:root{
    --navy:#0b1f3a;
    --navy-deep:#071426;
    --oxblood:#c62828;
    --gold:#2f54a3;
    --gold-light:#5f82c9;
    --parchment:#ffffff;
    --parchment-dark:#f3f7fc;
    --ink:#172033;
    --ink-soft:#596579;
    --line:rgba(11,31,58,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--parchment);
    color:var(--ink);
    font-family:'Source Sans 3',sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size: 15px;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Fraunces',serif;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--oxblood);
    font-weight:600;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  /* ===== reveal on scroll ===== */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-stagger .r-item{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
  .reveal-stagger.in .r-item{opacity:1;transform:translateY(0);}
  .reveal-stagger.in .r-item:nth-child(1){transition-delay:.05s;}
  .reveal-stagger.in .r-item:nth-child(2){transition-delay:.15s;}
  .reveal-stagger.in .r-item:nth-child(3){transition-delay:.25s;}
  .reveal-stagger.in .r-item:nth-child(4){transition-delay:.35s;}
  .reveal-stagger.in .r-item:nth-child(5){transition-delay:.45s;}
  .reveal-stagger.in .r-item:nth-child(6){transition-delay:.55s;}

  /* ===== TOPBAR ===== */
  .topbar{
    background:var(--navy-deep);color:rgba(255,255,255,0.7);
    font-size:0.8rem;padding:8px 0;border-bottom:1px solid rgba(198,160,79,0.15);
  }
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
  .topbar-links{display:flex;gap:22px;}
  .topbar-links a, .topbar-links span {
      color: #fff;
  }
  .topbar-links a:hover{color:var(--gold-light);}

  /* ===== NAV ===== */
  header{
    position:sticky;top:0;z-index:50;
   /* background:rgba(21,34,56,0.97);*/
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(198,160,79,0.25);
    transition:box-shadow .3s ease;
  }
  header.scrolled{box-shadow:0 12px 28px rgba(0,0,0,0.28);background:#fff;}
  nav.wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
  /*.brand{display:flex;align-items:center;gap:12px;color:var(--parchment);}*/

  .brand small {
    position: relative;
    left: 70px;
    top: -5px;
  }
  .crest-mark{width:38px;height:42px;flex-shrink:0;}
  .brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;letter-spacing:0.01em;line-height:1.2;}
  .brand-name span{display:block;font-family:'JetBrains Mono',monospace;font-size:0.6rem;letter-spacing:0.14em;color:var(--gold-light);text-transform:uppercase;margin-top:3px;}
  .navlinks{display:flex;gap:2px;align-items:center;}
  .navitem{position:relative;}
  .navitem>a{
    display:flex;align-items:center;gap:5px;
    opacity:0.85;font-size:0.87rem;font-weight:500;
    padding:14px 13px;transition:opacity .2s;
  }
  .navitem>a:hover{opacity:1;}
  .navitem .caret{width:7px;height:7px;border-right:1.5px solid #95730b;border-bottom:1.5px solid #95730b;transform:rotate(45deg);margin-top:-3px;opacity:0.8;transition:transform .2s;}
  .navitem:hover .caret{transform:rotate(225deg);margin-top:3px;}
  .dropdown{
    position:absolute;top:100%;left:0;min-width:210px;
    background:var(--navy-deep);border:1px solid rgba(198,160,79,0.28);border-top:2px solid var(--gold);
    padding:8px 0;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow:0 18px 34px rgba(0,0,0,0.35);
  }
  .navitem:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown a{
    display:block;padding:11px 20px;font-size:0.85rem;color:rgba(255,255,255,0.8);
    border-left:2px solid transparent;transition:background .15s, color .15s, border-color .15s;
  }
  .dropdown a:hover{background:rgba(198,160,79,0.08);color:var(--gold-light);border-left-color:var(--gold);}
  .cta-btn{
    background:#c62828;color:#fff;
    padding:11px 20px;border-radius:2px;font-weight:600;font-size:0.83rem;
    letter-spacing:0.02em;border:1px solid var(--gold);
    transition:background .2s, color .2s, transform .2s;white-space:nowrap;
  }
  .cta-btn:hover{background:transparent;color:var(--gold-light);transform:translateY(-1px);}

  /* ===== MOBILE NAV ===== */
  .navmobile-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
  .navmobile-btn span{width:24px;height:2px;background:var(--gold-light);transition:transform .25s ease, opacity .25s ease;}
  .navmobile-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .navmobile-btn.open span:nth-child(2){opacity:0;}
  .navmobile-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-drawer{
    display:none;position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:60;
    background:var(--navy-deep);border-left:1px solid rgba(198,160,79,0.3);
    padding:26px 22px;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .mobile-drawer.open{transform:translateX(0);}
  .mobile-scrim{display:none;position:fixed;inset:0;background:rgba(13,22,38,0.6);z-index:59;opacity:0;transition:opacity .3s ease;}
  .mobile-scrim.open{opacity:1;}
  .mobile-drawer-close{background:none;border:none;color:var(--parchment);font-size:1.5rem;margin-bottom:18px;cursor:pointer;}
  .mobile-group{margin-bottom:6px;}
  .mobile-group>a{display:block;padding:13px 6px;color:var(--parchment);font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.1);}
  .mobile-sub{padding-left:14px;}
  .mobile-sub a{display:block;padding:9px 6px;color:rgba(255,255,255,0.68);font-size:0.88rem;}
  .mobile-cta{margin-top:20px;display:block;text-align:center;}
  /* ===== HERO SLIDER ===== */
 /* =========================================================
   KIS KARNAL - HERO SECTION
   INTERNATIONAL SCHOOL STYLE
========================================================= */

.hero{
    position:relative;
    min-height:600px;
    display:flex;
    align-items:center;
    color:#ffffff;
    overflow:hidden;
    isolation:isolate;
}


/* =========================================================
   HERO SLIDER
========================================================= */

.slider{
    position:absolute;
    inset:0;
    z-index:-3;
}

.slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:0;

    /* IMPORTANT:
       No brightness filter
       No dark filter
       No saturation reduction
    */
    filter:none;

    animation:slideshow 20s infinite;
}


/* SLIDER IMAGES */

.slide:nth-child(1){
    background-image:url('../images/ki1.webp');
    animation-delay:0s;
}

.slide:nth-child(2){
    background-image:url('../images/ki2.webp');
    animation-delay:5s;
}

.slide:nth-child(3){
    background-image:url('../images/ki3.webp');
    animation-delay:10s;
}

.slide:nth-child(4){
    background-image:url('../images/gi4.webp');
    animation-delay:15s;
}



/* SLIDER ANIMATION */

@keyframes slideshow{

    0%{
        opacity:0;
        transform:scale(1.02);
    }

    4%{
        opacity:1;
        transform:scale(1.02);
    }

    22%{
        opacity:1;
        transform:scale(1.06);
    }

    26%{
        opacity:0;
        transform:scale(1.06);
    }

    100%{
        opacity:0;
        transform:scale(1.06);
    }
}


/* =========================================================
   HERO OVERLAY
   ONLY LEFT SIDE DARK
   RIGHT SIDE IMAGE REMAINS BRIGHT
========================================================= */

.hero-overlay{
    position:absolute;
    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

    /* LEFT TEXT AREA */
    linear-gradient(
        90deg,
        rgba(8,18,32,.82) 0%,
        rgba(8,18,32,.72) 18%,
        rgba(8,18,32,.55) 32%,
        rgba(8,18,32,.34) 45%,
        rgba(8,18,32,.14) 56%,
        rgba(8,18,32,0) 70%
    ),

    /* VERY LIGHT BOTTOM FADE */
    linear-gradient(
        0deg,
        rgba(8,18,32,.28) 0%,
        rgba(8,18,32,.10) 22%,
        rgba(8,18,32,0) 50%
    );
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{
    position:relative;

    z-index:2;

    width:100%;

    padding:0px 0 0px;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow{
    color:#ffffff;

    font-family:'JetBrains Mono',monospace;

    font-size:.75rem;
    font-weight:700;

    letter-spacing:.20em;

    text-transform:uppercase;

    margin-bottom:22px;

    display:flex;
    align-items:center;

    gap:10px;

    text-shadow:
        0 2px 5px rgba(0,0,0,.75);
}


.hero-eyebrow::before{
    content:'';

    width:28px;
    height:2px;

    background:var(--kis-red);

    flex-shrink:0;

    box-shadow:
        0 1px 4px rgba(0,0,0,.4);
}


/* =========================================================
   HERO HEADING
========================================================= */

.hero h1{
    font-size:clamp(2.2rem,4.2vw,3.6rem);

    font-weight:600;

    line-height:1.08;

    letter-spacing:-.015em;

    margin:0 0 22px;

    max-width:700px;

    color:#ffffff;

    text-shadow:
        0 3px 10px rgba(0,0,0,.80),
        0 1px 3px rgba(0,0,0,.85);
}


/* KIS KARNAL RED */

.hero h1 em{
    font-style:italic;

    font-weight:500;

    color:var(--gold-light);

    text-shadow:
        0 2px 6px rgba(0,0,0,.55);
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-sanskrit{
    font-family:'Fraunces',serif;

    font-style:italic;

    font-weight:500;

    font-size:1.08rem;

    color:#ffffff;

    border-left:3px solid #c62828;

    padding-left:16px;

    margin:0 0 32px;

    max-width:560px;

    line-height:1.55;

    background:transparent;

    text-shadow:
        0 2px 7px rgba(0,0,0,.85),
        0 1px 3px rgba(0,0,0,.8);
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions{
    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:52px;
}


/* =========================================================
   PRIMARY RED BUTTON
========================================================= */

.btn-solid{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:14px 27px;

    background:#c62828;

    color:#ffffff;

    border:1px solid #c62828;

    border-radius:3px;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.01em;

    text-decoration:none;

    box-shadow:
        0 8px 22px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.btn-solid:hover{
    background:#a91f1f;

    border-color:#a91f1f;

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.btn-ghost{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:14px 26px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.75);

    border-radius:3px;

    font-size:.9rem;

    font-weight:600;

    color:#ffffff;

    text-decoration:none;

    backdrop-filter:blur(2px);
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.btn-ghost:hover{
    background:rgba(255,255,255,.18);

    border-color:#ffffff;

    color:#ffffff;

    transform:translateY(-2px);
}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    max-width:720px;

    border-top:1px solid rgba(255,255,255,.55);

    padding-top:24px;

    gap:20px;
}


.hero-stats div{
    border-right:1px solid rgba(255,255,255,.35);

    padding-right:18px;

    text-shadow:
        0 2px 6px rgba(0,0,0,.75);
}


.hero-stats div:last-child{
    border-right:none;
}


/* NUMBER */

.hero-stats .num{
    font-family:'Fraunces',serif;

    font-weight:700;

    font-size:1.7rem;

    color:#ffffff;

    display:block;

    text-shadow:
        0 2px 7px rgba(0,0,0,.8);
}


/* LABEL */

.hero-stats .lbl{
    font-family:'JetBrains Mono',monospace;

    font-size:.63rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:rgba(255,255,255,.88);

    text-shadow:
        0 2px 6px rgba(0,0,0,.8);
}


/* =========================================================
   SLIDER DOTS
========================================================= */

.slider-dots{
    position:absolute;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:9px;

    z-index:4;
}


.slider-dots span{
    width:24px;

    height:3px;

    background:rgba(255,255,255,.65);

    border-radius:2px;

    overflow:hidden;

    position:relative;
}


.slider-dots span::after{
    content:'';

    position:absolute;

    inset:0;

    background:#c62828;

    animation:dotfill 20s infinite;
}


.slider-dots span:nth-child(1)::after{
    animation-delay:0s;
}

.slider-dots span:nth-child(2)::after{
    animation-delay:5s;
}

.slider-dots span:nth-child(3)::after{
    animation-delay:10s;
}

.slider-dots span:nth-child(4)::after{
    animation-delay:15s;
}


@keyframes dotfill{

    0%{
        transform:translateX(-100%);
    }

    4%{
        transform:translateX(-100%);
    }

    25%{
        transform:translateX(0);
    }

    26%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(0);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .hero{
        min-height:600px;
    }

    .hero-content{
        padding:70px 25px 65px;
    }

    .hero h1{
        max-width:650px;
    }

    .hero-sanskrit{
        max-width:530px;
    }

    .hero-stats{
        max-width:100%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){
.topbar {
    display: none;
}

.brand img {
    width: 70%;
}
    /* Slightly stronger left readability on mobile */

    .hero-overlay{
        background:

        linear-gradient(
            90deg,
            rgba(8,18,32,.78) 0%,
            rgba(8,18,32,.58) 48%,
            rgba(8,18,32,.18) 78%,
            rgba(8,18,32,0) 100%
        ),

        linear-gradient(
            0deg,
            rgba(8,18,32,.35) 0%,
            rgba(8,18,32,.10) 35%,
            rgba(8,18,32,0) 65%
        );
    }


    .hero-content{
        padding:70px 20px 65px;
    }


    .hero-eyebrow{
        font-size:.65rem;

        letter-spacing:.13em;

        margin-bottom:16px;
    }


    .hero-eyebrow::before{
        width:22px;
    }


    .hero h1{
        font-size:clamp(2rem,9vw,2.8rem);

        line-height:1.08;

        margin-bottom:20px;

        max-width:100%;
    }


    .hero-sanskrit{
        font-size:.95rem;

        max-width:100%;

        line-height:1.5;

        margin-bottom:25px;

        padding-left:13px;
    }


    .hero-actions{
        margin-bottom:38px;

        gap:10px;
    }


    .btn-solid,
    .btn-ghost{
        padding:12px 18px;

        font-size:.82rem;
    }


    .hero-stats{
        grid-template-columns:repeat(2,1fr);

        max-width:100%;

        gap:18px;

        padding-top:20px;
    }


    .hero-stats div{
        border-right:none;

        padding-right:0;
    }


    .hero-stats .num{
        font-size:1.45rem;
    }


    .hero-stats .lbl{
        font-size:.55rem;
    }


    .slider-dots{
        bottom:18px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .hero{
        min-height: auto !important;
    }


    .hero-content{
        padding:55px 16px 55px;
    }


    .hero-eyebrow{
        font-size:.58rem;

        letter-spacing:.10em;
    }


    .hero h1{
        font-size:2rem;

        line-height:1.08;
    }


    .hero-sanskrit{
        font-size:.88rem;

        line-height:1.5;
    }


    .hero-actions{
        flex-direction:column;

        align-items:flex-start;
    }


    .btn-solid,
    .btn-ghost{
        width:auto;

        min-width:190px;
    }


    .hero-stats{
        gap:15px 10px;
    }


    .hero-stats .num{
        font-size:1.35rem;
    }


    .hero-stats .lbl{
        font-size:.52rem;
    }
}
  section{padding:50px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:600;line-height:1.15;}
  .section-head p{color:var(--ink-soft);margin-top:16px;font-size:1.02rem;line-height:1.6;}

  .houses{background:var(--parchment-dark);color:var(--ink);}
  .houses .section-head p{color:var(--ink-soft);}
  .houses .eyebrow{color:#c62828;}
  .house-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
  .shield{position:relative;padding:38px 24px 30px;text-align:center;clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%);transition:transform .35s cubic-bezier(.2,.8,.3,1.3);}
  .shield:hover{transform:translateY(-10px) scale(1.02);}
  .shield .house-name{font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;margin-bottom:6px;}
  .shield .house-motto-sa{font-style:italic;color:#fff;font-size:1.02rem;margin-bottom:2px;}
  .shield .house-motto-en{font-size:0.78rem;color:rgb(255 255 255);margin-bottom:18px;font-family:'JetBrains Mono',monospace;letter-spacing:0.03em;}
  .shield .house-quote{font-size:0.86rem;color:rgb(255 255 255 / 96%);line-height:1.5;padding-top:14px;border-top:1px solid rgb(255 255 255 / 81%);}

  .campus-life{background:var(--parchment);}
  .life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .life-card{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/3;}
  .life-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
  .life-card:hover img{transform:scale(1.08);}
  .life-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(13,22,38,0.88) 0%, rgba(13,22,38,0.15) 55%, transparent 75%);}
  .life-card-label{position:absolute;left:20px;bottom:18px;z-index:2;color:var(--parchment);}
  .life-card-label .tag{font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-light);display:block;margin-bottom:4px;}
  .life-card-label h4{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;}

  /* =========================================
   LEADERSHIP SECTION
========================================= */

.leaders {
    background: var(--parchment-dark);
    padding: 90px 0;
}

.leader-row {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    column-gap: 50px !important;
    row-gap: 35px;
    width: 100%;
    margin-bottom: 30px;
    align-items: start;
    position: relative;
}

.leader-row:last-child {
    margin-bottom: 0;
}


/* =========================================
   LEADER IMAGE
========================================= */

.leader-img {
    position: relative;
    overflow: hidden;

    border-radius: 2px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(198,160,79,0.16),
            transparent 55%
        ),
        linear-gradient(
            160deg,
            var(--navy),
            var(--navy-deep)
        );

    flex-shrink: 0;
}


/* If actual image is inside leader-img */

.leader-img img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center;
}


/* Grid pattern */

.leader-img::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.5;

    background-image:
        linear-gradient(
            rgba(198,160,79,0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(198,160,79,0.07) 1px,
            transparent 1px
        );

    background-size: 22px 22px;

    pointer-events: none;
    z-index: 2;
}


/* Border */

.leader-img::after {
    content: '';
    position: absolute;
    inset: 0;

    border: 1px solid var(--gold);

    opacity: 0.4;
    margin: 10px;

    pointer-events: none;
    z-index: 3;
}


/* Initials */

.leader-img .initials {
    position: relative;
    z-index: 4;

    font-family: 'Fraunces', serif;
    font-size: 3rem;
    font-weight: 600;

    color: var(--gold-light);
    opacity: 0.65;

    letter-spacing: 0.02em;
}


/* =========================================
   LEADER TEXT
========================================= */

.leader-text {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    align-self: start;

    overflow: visible !important;
}


/* Role */

.leader-text .role {
    font-family: 'JetBrains Mono', monospace;

    font-size: 0.72rem;
    line-height: 1.4;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--oxblood);

    margin: 0 0 10px 0;
}


/* Name */

.leader-text h3 {
    font-size: 1.5rem;
    line-height: 1.3;

    font-weight: 600;

    margin: 0 0 16px 0;
}


/* Description */

.leader-text p {
    color: var(--ink-soft);

    line-height: 1.75;

    margin: 0 0 14px 0;

    font-size: 1rem;

    max-width: 750px;
}


/* Signature */

.leader-sign {
    font-family: 'Fraunces', serif;
    font-weight: 600;

    margin-top: 18px;

    color: var(--ink);
}

.leader-sign span {
    display: block;

    font-family: 'Source Sans 3', sans-serif;

    font-style: normal;

    font-size: 0.82rem;

    color: var(--ink-soft);

    margin-top: 3px;
}


/* =========================================
   IMPORTANT - PREVENT OVERLAPPING
========================================= */

.leader-row > .leader-img {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.leader-row > .leader-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .leader-row {
        grid-template-columns: 240px minmax(0, 1fr) !important;
        column-gap: 35px !important;
    }

    .leader-img {
        width: 240px !important;
        max-width: 240px !important;
        height: 320px !important;
    }

    .leader-text p {
        font-size: 0.95rem;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .leaders {
        padding: 60px 0;
    }

    .leader-row {
        display: flex !important;
        flex-direction: column !important;

        gap: 25px !important;

        margin-bottom: 55px;
    }

    .leader-row > .leader-img {
        width: 100% !important;
        max-width: 320px !important;
        height: 390px !important;

        grid-column: auto !important;
        grid-row: auto !important;

        margin: 0 auto;
    }

    .leader-row > .leader-text {
        width: 100% !important;

        grid-column: auto !important;
        grid-row: auto !important;
    }

    .leader-text h3 {
        font-size: 1.35rem;
    }

    .leader-text p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}


/* Small mobile */

@media (max-width: 480px) {

    .leader-img {
        height: 350px !important;
    }

    .leader-text .role {
        font-size: 0.65rem;
    }

    .leader-text h3 {
        font-size: 1.25rem;
    }
}

  .stats-strip{background:var(--oxblood);color:var(--parchment);padding:56px 0;}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
  .stats-grid .num{font-family:'Fraunces',serif;font-weight:700;font-size:2.6rem;color:var(--gold-light);}
  .stats-grid .lbl{font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-top:6px;}

  .facilities{background:var(--parchment);}
  .facility-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:44px;align-items:center;}
  .facility-img{aspect-ratio:4/3;border-radius:2px;overflow:hidden;}
  .facility-img img{width:100%;height:100%;object-fit:cover;}
  .facility-list{display:flex;flex-direction:column;gap:26px;}
  .facility-item{display:flex;gap:18px;align-items:flex-start;}
  .facility-icon{flex-shrink:0;width:44px;height:44px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;color:var(--oxblood);border-radius:2px;}
  .facility-item h4{font-family:'Fraunces',serif;font-size:1.08rem;font-weight:600;margin-bottom:4px;}
  .facility-item p{color:var(--ink-soft);font-size:0.92rem;line-height:1.5;}

  .academies{background:var(--parchment-dark);}
  .academy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .academy-card{background:var(--parchment);border:1px solid var(--line);padding:30px 24px;transition:border-color .2s, transform .2s;}
  .academy-card:hover{border-color:var(--gold);transform:translateY(-4px);}
  .academy-card .tag{font-family:'JetBrains Mono',monospace;font-size:0.95rem;font-weight:600;color:var(--oxblood);margin-bottom:10px;}
  .academy-card h4{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;margin-bottom:8px;}
  .academy-card p{font-size:0.88rem;color:var(--ink-soft);line-height:1.5;}

  .achievers{background:var(--navy);color:var(--parchment);}
  .achievers .section-head p{color:rgba(255,255,255,0.62);}
  .achievers .eyebrow{color:var(--gold-light);}
  .topper-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;}
  .topper-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.14);}
  .topper-row .name{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;}
  .topper-row .score{font-family:'JetBrains Mono',monospace;color:var(--gold-light);font-size:0.9rem;}

  .olympiad-band{background:var(--parchment);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .olympiad-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
  .olympiad-stat-row{display:flex;gap:36px;margin-top:26px;}
  .olympiad-stat .num{font-family:'Fraunces',serif;font-size:2.1rem;font-weight:700;color:var(--oxblood);}
  .olympiad-stat .lbl{font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px;}
  .olympiad-quote{font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem;color:var(--ink);line-height:1.6;border-left:2px solid var(--gold);padding-left:18px;margin-top:22px;}

  .gallery-preview{background:var(--parchment-dark);}
  .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:12px;}
  .gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:2px;transition:transform .45s ease, filter .45s ease;filter:saturate(0.95);}
  .gallery-grid a{overflow:hidden;border-radius:2px;display:block;}
  .gallery-grid a:hover img{transform:scale(1.09);filter:saturate(1.1);}
  .g-tall{grid-row:span 2;}
  .g-wide{grid-column:span 2;}

  .events{background:var(--parchment);}
  .event-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .event-card{border:1px solid var(--line);background:var(--parchment-dark);transition:transform .25s ease, box-shadow .25s ease;}
  .event-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(11,31,58,0.1);}
  .event-thumb{aspect-ratio:4/3;background:linear-gradient(150deg,var(--parchment-dark),var(--parchment));border-bottom:1px solid var(--line);position:relative;}
  .event-thumb::after{content:'⛨';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--gold);opacity:0.5;}
  .event-body{padding:18px 20px 22px;}
  .event-date{font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--oxblood);margin-bottom:8px;}
  .event-body h4{font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;margin-bottom:4px;}
  .event-body .loc{font-size:0.8rem;color:var(--ink-soft);}

  .cta-band{background:linear-gradient(160deg,var(--oxblood),var(--oxblood));color:var(--parchment);text-align:center;padding:90px 0;position:relative;overflow:hidden;}
  .cta-band::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle, rgba(198,160,79,0.14), transparent 60%);}
  .cta-band h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:600;margin-bottom:18px;position:relative;}
  .cta-band p{color:rgba(255,255,255,0.65);max-width:520px;margin:0 auto 34px;position:relative;line-height:1.6;}
  .cta-band .hero-actions{justify-content:center;position:relative;margin-bottom:0;}
  .cta-band .btn-solid {
      background: var(--gold-light);
      color: var(--ink);
  }
  footer{background:var(--navy-deep);color:rgba(255,255,255,0.6);padding:64px 0 28px;font-size:0.9rem;}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
  .foot-brand{color:var(--parchment);font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
  .foot-brand .crest-mark{width:30px;height:34px;}
  .foot-grid p{line-height:1.7;max-width:320px;}
  .foot-col h5{font-family:'JetBrains Mono',monospace;font-size:18px;letter-spacing:0;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px;}
  .foot-col a{display:block;margin-bottom:10px;opacity:1.75;transition:opacity .2s;}
  .foot-col a:hover{opacity:1;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;display:flex;justify-content:space-between;font-size:14px;opacity:1.55;flex-wrap:wrap;gap:10px;}

  @media (max-width:960px){
    .navlinks{display:none;}
    .navmobile-btn{display:flex;}
    .mobile-drawer{display:block;}
    .mobile-scrim{display:block;}
    #ctaDesktop{display:none;}
    .house-grid{grid-template-columns:repeat(2,1fr);}
    .life-grid{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
    .academy-grid{grid-template-columns:repeat(2,1fr);}
    .event-grid{grid-template-columns:repeat(2,1fr);}
    .leader-row{grid-template-columns:1fr;}
    .leader-img{max-width:220px;}
    .topper-list{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .hero-stats{grid-template-columns:repeat(2,1fr);row-gap:18px;}
    .facility-grid{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .g-wide{grid-column:span 1;}
    .olympiad-grid{grid-template-columns:1fr;}
  }

  /* ================================
   HOUSE CARDS - CONTENT FIX
================================ */

.house-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: stretch;
}

.shield {
    position: relative;
    min-height: 300px;
    height: auto;
    padding: 42px 24px 58px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    background: #172132;
    border-top: 2px solid var(--house-color);

    /* shield shape */
    clip-path: polygon(
        0 0,
        100% 0,
        100% 76%,
        50% 100%,
        0 76%
    );

    overflow: visible;
}

/* House name */
.house-name {
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

/* Sanskrit motto */
.house-motto-sa {
    font-size: 16px;
    line-height: 1.4;
    color: var(--house-color);
    margin-bottom: 5px;
}

/* English motto */
.house-motto-en {
    font-size: 14px;
    line-height: 1.35;
    color: #c7cbd2;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 220px;
}

/* Divider */
.house-quote {
    width: 100%;
    max-width: 250px;
    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid rgba(255,255,255,0.16);

    font-size: 13px;
    line-height: 1.5;
    color: #f0f0f0;

    /* IMPORTANT */
    height: auto;
    min-height: 55px;
    overflow: visible;
}

/* ================================
   TABLET
================================ */

@media (max-width: 991px) {

    .house-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .shield {
        min-height: 310px;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 575px) {

    .house-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .shield {
        min-height: 300px;
        padding: 38px 22px 58px;
    }

    .house-name {
        font-size: 20px;
    }

    .house-motto-sa {
        font-size: 15px;
    }

    .house-motto-en {
        font-size: 13px;
        min-height: auto;
    }

    .house-quote {
        font-size: 13px;
        max-width: 270px;
        line-height: 1.55;
    }
}
/* =========================================
   GALLERY LIGHTBOX
========================================= */

.gallery-item {
    cursor: zoom-in;
    display: block;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Popup background */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    background: rgba(5, 10, 20, 0.94);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    z-index: 99999;
}


/* Open */

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}


/* Image */

.lightbox-content {
    width: min(90vw, 1200px);
    height: min(88vh, 800px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 3px;

    box-shadow: 0 20px 70px rgba(0,0,0,0.5);
}


/* Close button */

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 30px;

    width: 48px;
    height: 48px;

    border: 0;
    background: rgba(255,255,255,0.1);

    color: #fff;

    font-size: 34px;
    line-height: 1;

    cursor: pointer;

    border-radius: 50%;

    z-index: 10;

    transition: 0.25s ease;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.2);
}


/* Previous / Next */

.lightbox-prev,
.lightbox-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 52px;
    height: 52px;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,0.12);

    color: #fff;

    font-size: 24px;

    cursor: pointer;

    z-index: 10;

    transition: 0.25s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255,255,255,0.25);
}

.lightbox-prev {
    left: 25px;
}

.lightbox-next {
    right: 25px;
}


/* Mobile */

@media (max-width: 767px) {

    .lightbox-content {
        width: 95vw;
        height: 85vh;
        padding: 10px;
    }

    .lightbox-close {
        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;

        font-size: 28px;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }
}
/* =====================================================
   RESULTS SHOWCASE
   Completely different editorial layout
===================================================== */

.results-showcase {
    background: var(--navy-deep);
    color: #fff;
    padding: 105px 0;
    position: relative;
    overflow: hidden;
}


/* Intro */

.results-intro {
    margin-bottom: 55px;
    position: relative;
    z-index: 2;
}
.results-intro .eyebrow {
    color:var(--gold-light);
}
.results-heading-row {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: end;
}

.results-heading-row h2 {
    color: #fff;
    font-size: 3.4rem;
    line-height: 1.05;
    margin: 12px 0 0;
    font-weight: 600;
}

.results-heading-row h2 span {
    display: block;
    color: var(--gold-light);
    font-style: italic;
}

.results-heading-row p {
    color: rgba(255,255,255,0.62);
    line-height: 1.75;
    max-width: 510px;
    margin: 0 0 4px;
}


/* =====================================================
   STAGE
===================================================== */

.results-stage {
    position: relative;
    z-index: 3;
}


/* =====================================================
   SLIDE
===================================================== */

.result-slide {
    display: none;
}

.result-slide.active {
    display: block;
    animation: resultIn .6s ease;
}

@keyframes resultIn {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Slide number */

.result-number {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 14px;
}

.result-number span {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    color: var(--gold-light);
}

.result-number small {
    font-family: 'JetBrains Mono', monospace;
    font-size: .6rem;
    color: rgba(255,255,255,.4);
}


/* =====================================================
   MAIN EDITORIAL AREA
===================================================== */
.result-main1 {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    min-height: 500px;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.result-main {
    display: grid;
    grid-template-columns: 1fr 1.15fr .85fr;
    min-height: 500px;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}


/* =====================================================
   STORY
===================================================== */

.result-story {
    padding: 42px 42px 42px 0;
    border-right: 1px solid rgba(255,255,255,.12);
}

.result-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
}

.result-meta span {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    letter-spacing: .14em;
    color: var(--gold-light);
    text-transform: uppercase;
}

.result-meta span + span {
    color: rgba(255,255,255,.4);
}

.result-story h3 {
    font-family: 'Fraunces', serif;
    font-size: 2.7rem;
    line-height: 1.05;
    font-weight: 500;
    margin: 0 0 24px;
}

.result-story h3 strong {
    display: block;
    color: var(--gold-light);
    font-style: italic;
    font-weight: 500;
}

.result-story p {
    color: rgba(255,255,255,.62);
    line-height: 1.75;
    font-size: .93rem;
    margin: 0 0 14px;
}

.result-story p strong {
    color: #fff;
}


/* Results numbers */

.result-achievement-line {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 35px;
}

.big-result strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 2.2rem;
    color: #fff;
    line-height: 1;
}

.big-result span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .57rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.42);
    margin-top: 7px;
}

.result-divider {
    width: 1px;
    height: 45px;
    background: rgba(255,255,255,.15);
}


/* =====================================================
   IMAGE
===================================================== */

.result-visual {
    position: relative;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-image-frame {
    width: 100%;
    height: 430px;
    position: relative;
    overflow: hidden;
    background: #111;
}

.result-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.result-slide.active:hover .result-image-frame img {
    transform: scale(1.04);
}

.result-image-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.75),
            transparent 55%
        );
}

.result-image-label {
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 2;
}

.result-image-label span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem;
    letter-spacing: .13em;
    color: var(--gold-light);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.result-image-label strong {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    font-weight: 500;
}


/* Vertical text */

.result-vertical-text {
    position: absolute;
    right: 5px;
    bottom: 45px;

    writing-mode: vertical-rl;

    font-family: 'JetBrains Mono', monospace;
    font-size: .5rem;
    letter-spacing: .2em;

    color: rgba(255,255,255,.25);
}


/* =====================================================
   STUDENT RANKINGS
===================================================== */

.result-rankings {
    padding: 35px 0 35px 35px;
}

.ranking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 14px;
    margin-bottom: 4px;

    border-bottom: 1px solid rgba(255,255,255,.12);
}

.ranking-head span {
    font-family: 'JetBrains Mono', monospace;
    font-size: .61rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.45);
}

.ranking-head strong {
    font-family: 'Fraunces', serif;
    color: var(--gold-light);
    font-size: 1.3rem;
}


.rank-row {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 54px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.rank-no {
    width: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    color: rgba(255,255,255,.28);
}

.rank-row strong {
    display: block;
    color: rgba(255,255,255,.8);
    font-size: .78rem;
    font-weight: 600;
}

.rank-row small {
    display: block;
    color: var(--gold-light);
    font-size: .6rem;
    margin-top: 3px;
}

.rank-row.featured {
    border-left: 2px solid var(--gold);
    padding-left: 10px;
    background: rgba(198,160,79,.055);
}

.rank-row.featured .rank-no {
    color: var(--gold-light);
}

.rank-row.featured strong {
    color: #fff;
}


/* =====================================================
   QUOTE
===================================================== */

.result-footer {
    min-height: 115px;

    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 20px;

    padding: 24px 0;
}

.quote-mark {
    font-family: 'Fraunces', serif;
    font-size: 4rem;
    line-height: .5;
    color: var(--gold-light);
}

.result-footer p {
    color: rgba(255,255,255,.55);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: .9rem;
    line-height: 1.55;
    margin: 0;
}

.result-footer > span {
    font-size: .65rem;
    color: rgba(255,255,255,.38);
    white-space: nowrap;
}


/* =====================================================
   ARROWS
===================================================== */

.result-nav {
    position: absolute;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;

    background: var(--navy-deep);

    color: #fff;

    cursor: pointer;

    font-size: 1.1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .25s ease;

    z-index: 10;
}

.result-nav:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy-deep);
}

.result-prev {
    left: -68px;
    top: 47%;
}

.result-next {
    right: -68px;
    top: 47%;
}


/* =====================================================
   CONTROLS
===================================================== */

.result-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.result-dots {
    display: flex;
    gap: 8px;
}

.result-dot {
    width: 28px;
    height: 3px;
    padding: 0;
    border: none;
    background: rgba(255,255,255,.2);
    cursor: pointer;
    transition: .3s ease;
}

.result-dot.active {
    width: 60px;
    background: var(--gold);
}

.result-control-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: rgba(255,255,255,.3);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .result-main {
        grid-template-columns: 1fr 1fr;
    }

    .result-story {
        padding: 35px;
    }

    .result-visual {
        border-right: none;
    }

    .result-rankings {
        grid-column: 1 / -1;
        padding: 25px 35px 35px;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .ranking-head {
        margin-bottom: 10px;
    }

    .result-rankings {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 20px;
    }

    .ranking-head {
        grid-column: 1 / -1;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .results-showcase {
        padding: 70px 0;
    }

    .results-heading-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .results-heading-row h2 {
        font-size: 2.4rem;
    }

    .result-main {
        display: flex;
        flex-direction: column;
    }

    .result-story {
        padding: 28px 22px;
        border-right: none;
    }

    .result-story h3 {
        font-size: 2.1rem;
    }

    .result-visual {
        padding: 18px;
    }

    .result-image-frame {
        height: 320px;
    }

    .result-rankings {
        display: block;
        padding: 20px 22px 25px;
    }

    .rank-row {
        min-height: 50px;
    }

    .result-footer {
        grid-template-columns: 35px 1fr;
        padding: 22px;
    }

    .result-footer > span {
        grid-column: 2;
    }

    .result-prev {
        left: 10px;
        top: 35%;
    }

    .result-next {
        right: 10px;
        top: 35%;
    }

    .result-controls {
        margin-top: 18px;
    }

}


/* Small mobile */

@media (max-width: 480px) {

    .results-heading-row h2 {
        font-size: 2rem;
    }

    .result-story h3 {
        font-size: 1.8rem;
    }

    .result-achievement-line {
        gap: 18px;
    }

    .big-result strong {
        font-size: 1.8rem;
    }

    .result-image-frame {
        height: 270px;
    }

}
.foot-brand h4 {
    color:var(--gold-light);
    font-size: 20px;
}
/* ========================================== KIS TESTIMONIALS ========================================== */ .kis-testimonials { background: var(--parchment); padding: 100px 0; position: relative; overflow: hidden; } .testimonial-heading { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: end; margin-bottom: 55px; } .testimonial-heading h2 { font-family: 'Fraunces', serif; font-size: 3rem; line-height: 1.08; font-weight: 600; margin: 12px 0 0; } .testimonial-heading h2 em { color: #c62828; font-style: italic; } .testimonial-heading > p { color: var(--ink-soft); line-height: 1.75; margin: 0; } /* ========================================== SLIDER ========================================== */ .testimonial-slider { position: relative; } .testimonial-slide { display: none; } .testimonial-slide.active { display: block; animation: testimonialFade .55s ease; } @keyframes testimonialFade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* ========================================== NUMBER ========================================== */ .testimonial-count { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .testimonial-count span { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--oxblood); } .testimonial-count i { width: 45px; height: 1px; background: rgba(20,25,35,.2); } .testimonial-count small { font-family: 'JetBrains Mono', monospace; font-size: .58rem; color: var(--ink-soft); } /* ========================================== CONTENT ========================================== */ .testimonial-content { display: grid; grid-template-columns: 1.55fr .65fr; min-height: 390px; border-top: 1px solid rgba(20,25,35,.15); border-bottom: 1px solid rgba(20,25,35,.15); } /* ========================================== QUOTE ========================================== */ .testimonial-quote { padding: 48px 65px 45px 0; } .quote-symbol { display: block; font-family: 'Fraunces', serif; font-size: 5rem; line-height: .65; color: #c62828; margin-bottom: 22px; } .testimonial-quote blockquote { max-width: 780px; font-family: 'Fraunces', serif; font-size: 2rem; line-height: 1.42; font-weight: 500; color: var(--ink); margin: 0 0 38px; } /* ========================================== AUTHOR ========================================== */ .testimonial-author { display: flex; align-items: center; gap: 13px; } .author-mark { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 1.15rem; border: 1px solid rgba(198,160,79,.5); } .testimonial-author strong { display: block; font-size: .9rem; color: var(--ink); } .testimonial-author span { display: block; font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; } /* ========================================== SIDE INFO ========================================== */ .testimonial-side { border-left: 1px solid rgba(20,25,35,.13); padding: 48px 0 40px 38px; display: flex; flex-direction: column; justify-content: center; } .testimonial-label { margin-bottom: 20px; } .testimonial-label span { display: block; font-family: 'JetBrains Mono', monospace; font-size: .58rem; color: var(--oxblood); letter-spacing: .12em; margin-bottom: 6px; } .testimonial-label strong { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; color: var(--ink); } .testimonial-side p { color: var(--ink-soft); line-height: 1.7; font-size: .88rem; margin: 0; } .testimonial-line { width: 45px; height: 2px; background: var(--gold); margin: 25px 0 15px; } .testimonial-theme { font-family: 'JetBrains Mono', monospace; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.7; } /* ========================================== CONTROLS ========================================== */ .testimonial-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; } .testimonial-prev, .testimonial-next { width: 46px; height: 46px; border: 1px solid rgba(20,25,35,.18); background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; font-size: 1.1rem; transition: .25s ease; } .testimonial-prev:hover, .testimonial-next:hover { background: var(--oxblood); border-color: var(--oxblood); color: #fff; } .testimonial-dots { display: flex; align-items: center; gap: 7px; } .testimonial-dot { width: 24px; height: 3px; border: 0; padding: 0; background: rgba(20,25,35,.2); cursor: pointer; transition: .3s ease; } .testimonial-dot.active { width: 50px; background: var(--oxblood); } /* ========================================== TABLET ========================================== */ @media (max-width: 991px) { .testimonial-heading { grid-template-columns: 1fr; gap: 20px; } .testimonial-content { grid-template-columns: 1fr; } .testimonial-quote { padding: 40px; } .testimonial-side { border-left: 0; border-top: 1px solid rgba(20,25,35,.13); padding: 30px 40px; } } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .kis-testimonials { padding: 65px 0; } .testimonial-heading { margin-bottom: 35px; } .testimonial-heading h2 { font-size: 2.25rem; } .testimonial-quote { padding: 32px 22px; } .quote-symbol { font-size: 4rem; } .testimonial-quote blockquote { font-size: 1.45rem; line-height: 1.5; margin-bottom: 28px; } .testimonial-side { padding: 28px 22px; } .testimonial-controls { margin-top: 18px; } } /* Small mobile */ @media (max-width: 480px) { .testimonial-heading h2 { font-size: 1.9rem; } .testimonial-quote blockquote { font-size: 1.3rem; } }


/* =========================================================
   KIS — INTERNATIONAL REFRESH
   Cream / parchment tones removed completely.
========================================================= */

:root{
  --kis-blue:#2f54a3;
  --kis-blue-dark:#0b1f3a;
  --kis-blue-deep:#071426;
  --kis-red:#c62828;
  --kis-red-dark:#a91f1f;
  --kis-sky:#f3f7fc;
  --kis-white:#ffffff;
  --kis-ink:#172033;
  --kis-muted:#596579;
  --kis-line:rgba(11,31,58,.11);
}

body{
  background:#fff !important;
  color:var(--kis-ink);
}

section{
  position:relative;
}

.section-head h2,
.testimonial-heading h2,
.results-heading-row h2,
.result-story h3,
.testimonial-quote blockquote{
  letter-spacing:-.025em;
}

/* Header — clean white international navigation */
header{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(11,31,58,.09);
  box-shadow:0 6px 25px rgba(7,20,38,.06);
}

header.scrolled{
  background:#fff !important;
  box-shadow:0 12px 32px rgba(7,20,38,.12);
}

.brand{color:var(--kis-blue-dark); padding-top: 10px;}
.brand-name span{color:var(--kis-blue);}
.navitem>a{color:var(--kis-blue-dark);opacity:.88;}
.navitem>a:hover{color:var(--kis-blue);}
.navitem .caret{border-color:var(--kis-blue);}
.dropdown{
  background:var(--kis-blue-dark);
  border-color:rgba(255,255,255,.1);
  border-top-color:var(--kis-red);
}
.cta-btn{
  background:var(--kis-red);
  border-color:var(--kis-red);
}
.cta-btn:hover{
  background:var(--kis-blue);
  border-color:var(--kis-blue);
  color:#fff;
}

/* Hero — stronger editorial image treatment */
.hero{
  min-height:680px;
}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(7,20,38,.88) 0%,rgba(7,20,38,.68) 30%,rgba(7,20,38,.22) 58%,rgba(7,20,38,0) 78%),
    linear-gradient(0deg,rgba(7,20,38,.35),transparent 48%);
}
.hero h1{
  font-size:clamp(2.6rem,5vw,4.6rem);
  max-width:760px;
  line-height:1.02;
}
.hero h1 em{color:#79a0ed;}
.hero-sanskrit{
  border-left-color:var(--kis-red);
}
.btn-solid{
  background:var(--kis-red);
  border-color:var(--kis-red);
}
.btn-solid:hover{
  background:var(--kis-blue);
  border-color:var(--kis-blue);
}
.btn-ghost{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.8);
}
.slider-dots span::after{background:var(--kis-red);}

/* Section rhythm */
.houses,
.leaders,
.academies,
.gallery-preview{
  background:#f3f7fc !important;
}

.campus-life,
.facilities,
.events,
.kis-testimonials,
.olympiad-band{
  background:#fff !important;
}

/* Section headings */
.eyebrow{
  color:var(--kis-red);
}
.section-head p,
.testimonial-heading > p{
  color:var(--kis-muted);
}

/* Houses — premium blue cards instead of shield/cream styling */
.house-grid{
  gap:22px;
}
.shield{
  min-height:320px;
  padding:42px 28px 62px;
  border-top:3px solid var(--kis-red);
  box-shadow:0 18px 38px rgba(11,31,58,.13);
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
}
.shield:hover{
  transform:translateY(-12px);
  box-shadow:0 26px 48px rgba(11,31,58,.22);
}
.house-name{color:#fff;}
.house-motto-sa{color:#79a0ed;}
.house-motto-en{color:rgba(255,255,255,.7);}
.house-quote{
  color:rgba(255,255,255,.82);
  border-top-color:rgba(255,255,255,.18);
}

/* Campus cards */
.life-card{
  border-radius:14px;
  box-shadow:0 18px 42px rgba(11,31,58,.12);
}
.life-card::after{
  background:linear-gradient(0deg,rgba(7,20,38,.88),rgba(7,20,38,.08) 65%,transparent);
}
.life-card-label .tag{color:#8fb0f0;}

/* Leadership — white cards on light blue canvas */
.leaders{
  padding:105px 0;
}
.leader-row{
  background:#fff;
  padding:34px;
  border:1px solid rgba(11,31,58,.08);
  box-shadow:0 18px 45px rgba(11,31,58,.08);
  border-radius:16px;
}
.leader-img{
  border-radius:12px;
  background:linear-gradient(145deg,var(--kis-blue-dark),var(--kis-blue));
}
.leader-img::after{
  border-color:#fff;
  opacity:.25;
  border-radius:8px;
}
.leader-text .role{color:var(--kis-red);}
.leader-text h3{color:var(--kis-blue-dark);}

/* Stats — bold blue/red band */
.stats-strip{
  background:linear-gradient(110deg,#0b1f3a,#173e72) !important;
  padding:62px 0;
}
.stats-grid .num{color:#fff;}
.stats-grid .lbl{color:rgba(255,255,255,.68);}

/* Boarding / facilities */
.facility-img{
  border-radius:16px;
  box-shadow:0 22px 50px rgba(11,31,58,.13);
}
.facility-icon{
  color:var(--kis-blue);
  border-color:var(--kis-blue);
  border-radius:10px;
  background:#f3f7fc;
}

/* Academies — clean cards */
.academy-grid{gap:20px;}
.academy-card{
  background:#fff;
  border:1px solid rgba(11,31,58,.09);
  border-radius:14px;
  padding:32px 26px;
  box-shadow:0 12px 32px rgba(11,31,58,.06);
}
.academy-card:hover{
  border-color:rgba(47,84,163,.45);
  transform:translateY(-7px);
  box-shadow:0 20px 42px rgba(11,31,58,.12);
}
.academy-card .tag{color:var(--kis-red);}

/* Achievers */
.achievers{
  background:linear-gradient(125deg,#071426,#0b2a50) !important;
}
.achievers .eyebrow{color:#86a9ec;}
.topper-row{
  border-bottom-color:rgba(255,255,255,.13);
}

/* Olympiad */
.olympiad-band{
  border-top:1px solid var(--kis-line);
  border-bottom:1px solid var(--kis-line);
}
.olympiad-stat .num{color:var(--kis-red);}

/* Gallery */
.gallery-grid{
  gap:14px;
}
.gallery-grid a{
  border-radius:12px;
}
.gallery-grid img{
  filter:none;
  border-radius:12px;
}
.gallery-grid a:hover img{
  transform:scale(1.06);
}

/* Events */
.event-card{
  background:#fff;
  border:1px solid rgba(11,31,58,.09);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(11,31,58,.06);
}
.event-card:hover{
  box-shadow:0 22px 44px rgba(11,31,58,.12);
}
.event-thumb{
  background:#f3f7fc;
  border-bottom:1px solid rgba(11,31,58,.08);
}
.event-thumb::after{color:var(--kis-blue);}
.event-date{color:var(--kis-red);}

/* Results — retain premium dark editorial character */
.results-showcase{
  background:linear-gradient(135deg,#071426,#0b2b52) !important;
}
.results-heading-row h2 span,
.result-story h3 strong{
  color:#82a7ed;
}
.result-nav:hover{
  background:var(--kis-red);
  border-color:var(--kis-red);
  color:#fff;
}
.result-dot.active{background:var(--kis-red);}

/* Testimonials — modern white editorial */
.kis-testimonials{
  background:#fff !important;
}
.testimonial-heading h2 em{color:var(--kis-red);}
.testimonial-count span,
.testimonial-label span{color:var(--kis-red);}
.author-mark{
  background:var(--kis-blue-dark);
  border-color:rgba(95,130,201,.6);
}
.testimonial-line{background:var(--kis-blue);}
.testimonial-prev:hover,
.testimonial-next:hover{
  background:var(--kis-blue);
  border-color:var(--kis-blue);
}
.testimonial-dot.active{background:var(--kis-red);}

/* CTA — strong blue/red finish */
.cta-band{
  background:linear-gradient(120deg,#c62828,#a91f1f) !important;
}
.cta-band .btn-solid{
  background:#fff;
  color:var(--kis-blue-dark);
  border-color:#fff;
}
.cta-band .btn-solid:hover{
  background:var(--kis-blue-dark);
  color:#fff;
  border-color:var(--kis-blue-dark);
}

/* Footer */
footer{
  background:#071426 !important;
}
.foot-brand h4,
.foot-col h5{
  color:#ccc;
  font-family: 'JetBrains Mono',monospace;
}

/* Lightbox remains dark and premium */
.gallery-lightbox{
  background:rgba(4,10,20,.96);
}

/* Mobile */
@media(max-width:767px){

  .hero h1{font-size:clamp(2.15rem,9vw,3rem);}
  .leader-row{
    padding:22px;
    border-radius:13px;
  }
  .stats-strip{padding:48px 0;}
}
/* =========================================================
   KIS — FULL RESPONSIVE OVERRIDE
   Paste this AFTER all existing CSS
========================================================= */

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

img {
  height: auto;
}

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

.wrap {
  width: min(1200px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   LARGE LAPTOP — 1200px
========================================================= */

@media (max-width: 1200px) {

  .wrap {
    width: calc(100% - 50px);
  }

  .navlinks {
    gap: 0;
  }

  .navitem > a {
    padding: 12px 9px;
    font-size: .82rem;
  }

  .hero {
    min-height: 640px;
  }

  .hero h1 {
    max-width: 650px;
  }

  .house-grid {
    gap: 18px;
  }

  .shield {
    padding-left: 20px;
    padding-right: 20px;
  }

  .facility-grid {
    gap: 35px;
  }

  .academy-grid {
    gap: 18px;
  }

  .event-grid {
    gap: 18px;
  }

  .testimonial-heading {
    gap: 50px;
  }

  .results-heading-row {
    gap: 50px;
  }
}


/* =========================================================
   TABLET / SMALL LAPTOP — 991px
========================================================= */

@media (max-width: 991px) {

  .wrap {
    width: calc(100% - 36px);
  }


  /* ================= HEADER ================= */

  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  nav.wrap {
    height: 70px;
  }

  .navlinks {
    display: none !important;
  }

  .navmobile-btn {
    display: flex !important;
  }

  .mobile-drawer {
    display: block;
  }

  .mobile-scrim {
    display: block;
  }

  #ctaDesktop {
    display: none !important;
  }

  .brand {
    min-width: 0;
  }

  .brand-name {
    font-size: 1rem;
  }


  /* ================= HERO ================= */

  .hero {
    min-height: 620px;
  }

  .hero-content {
    padding: 80px 0 70px;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    max-width: 680px;
  }

  .hero-sanskrit {
    max-width: 600px;
  }

  .hero-stats {
    max-width: 700px;
  }


  /* ================= GENERAL SECTIONS ================= */

  section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .section-head {
    margin-bottom: 42px;
  }


  /* ================= HOUSES ================= */

  .house-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px;
  }

  .shield {
    min-height: 300px;
  }


  /* ================= CAMPUS ================= */

  .life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }


  /* ================= LEADERSHIP ================= */

  .leaders {
    padding: 75px 0;
  }

  .leader-row {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 28px !important;
    padding: 28px;
  }

  .leader-img {
    width: 220px !important;
    max-width: 220px !important;
    height: 300px !important;
  }

  .leader-text h3 {
    font-size: 1.35rem;
  }

  .leader-text p {
    font-size: .94rem;
    line-height: 1.7;
  }


  /* ================= STATS ================= */

  .stats-strip {
    padding: 52px 0;
  }

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

  .stats-grid .num {
    font-size: 2.3rem;
  }


  /* ================= FACILITIES ================= */

  .facility-grid {
    grid-template-columns: 1fr !important;
    gap: 35px;
  }

  .facility-img {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
  }


  /* ================= ACADEMIES ================= */

  .academy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }


  /* ================= ACHIEVERS ================= */

  .topper-list {
    grid-template-columns: 1fr !important;
  }


  /* ================= OLYMPIAD ================= */

  .olympiad-grid {
    grid-template-columns: 1fr !important;
    gap: 35px;
  }

  .olympiad-stat-row {
    gap: 28px;
  }


  /* ================= GALLERY ================= */

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

  .g-wide {
    grid-column: span 1 !important;
  }


  /* ================= EVENTS ================= */

  .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }


  /* ================= RESULTS ================= */

  .results-showcase {
    padding: 75px 0;
  }

  .results-heading-row {
    grid-template-columns: 1fr !important;
    gap: 25px;
    align-items: start;
  }

  .results-heading-row h2 {
    font-size: clamp(2.5rem, 6vw, 3.4rem);
  }

  .result-main {
    grid-template-columns: 1fr 1fr !important;
  }

  .result-story {
    padding: 35px 30px 35px 0;
  }

  .result-story h3 {
    font-size: 2.25rem;
  }

  .result-visual {
    padding: 25px;
  }

  .result-image-frame {
    height: 380px;
  }

  .result-rankings {
    grid-column: 1 / -1;
  }


  /* ================= TESTIMONIALS ================= */

  .kis-testimonials {
    padding: 75px 0;
  }

  .testimonial-heading {
    grid-template-columns: 1fr !important;
    gap: 20px;
    margin-bottom: 40px;
  }

  .testimonial-heading h2 {
    font-size: 2.7rem;
  }

  .testimonial-content {
    grid-template-columns: 1fr !important;
  }

  .testimonial-quote {
    padding: 40px 35px;
  }

  .testimonial-side {
    border-left: 0;
    border-top: 1px solid rgba(20,25,35,.13);
    padding: 30px 35px;
  }


  /* ================= FOOTER ================= */

  footer {
    padding: 55px 0 25px;
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 35px 25px;
  }
}


/* =========================================================
   TABLET — 768px
========================================================= */

@media (max-width: 767px) {

  .wrap {
    width: calc(100% - 30px);
  }
.brand small {
    position: relative;
    left: 40px;
    top: -8px;
    font-size: 8px;
}

  /* =======================================================
     HEADER
  ======================================================= */

  nav.wrap {
    height: 64px;
  }

  .brand {
    gap: 8px;
  }

  .crest-mark {
    width: 32px;
    height: 36px;
  }

  .brand-name {
    font-size: .92rem;
  }

  .brand-name span {
    font-size: .52rem;
    letter-spacing: .1em;
  }

  .navmobile-btn {
    padding: 7px;
  }

  .navmobile-btn span {
    width: 23px;
  }

  .mobile-drawer {
    width: min(330px, 88vw);
    padding: 22px 18px;
  }

  .hero-content {
    padding: 65px 0 70px;
  }

  .hero-eyebrow {
    font-size: .62rem;
    letter-spacing: .12em;
    margin-bottom: 15px;
  }

  .hero-eyebrow::before {
    width: 20px;
  }

  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.9rem) !important;
    line-height: 1.08;
    max-width: 100%;
    margin-bottom: 18px;
  }

  .hero-sanskrit {
    font-size: .92rem;
    line-height: 1.55;
    padding-left: 12px;
    margin-bottom: 24px;
  }

  .hero-actions {
    gap: 10px;
    margin-bottom: 35px;
  }

  .btn-solid,
  .btn-ghost {
    min-height: 44px;
    padding: 11px 17px;
    font-size: .8rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px;
    padding-top: 18px;
  }

  .hero-stats div {
    border-right: 0 !important;
    padding-right: 0;
  }

  .hero-stats .num {
    font-size: 1.35rem;
  }

  .hero-stats .lbl {
    font-size: .52rem;
    line-height: 1.4;
  }

  .slider-dots {
    bottom: 15px;
    gap: 6px;
  }

  .slider-dots span {
    width: 19px;
  }


  /* =======================================================
     GENERAL
  ======================================================= */

  section {
    padding: 48px 0;
  }

  .page-section {
    padding: 48px 0;
  }

  .page-section.tight {
    padding: 35px 0;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .section-head h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.12;
  }

  .section-head p {
    font-size: .92rem;
    line-height: 1.65;
  }


  /* =======================================================
     HOUSES
  ======================================================= */

  .house-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .shield {
    min-height: 290px;
    padding: 38px 25px 55px;
  }

  .house-name {
    font-size: 1.25rem;
  }

  .house-motto-sa {
    font-size: .95rem;
  }

  .house-motto-en {
    font-size: .78rem;
    min-height: auto;
  }

  .house-quote {
    font-size: .78rem;
    line-height: 1.55;
  }


  /* =======================================================
     CAMPUS LIFE
  ======================================================= */

  .life-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .life-card {
    aspect-ratio: 16 / 10;
  }

  .life-card-label {
    left: 17px;
    bottom: 15px;
  }

  .life-card-label h4 {
    font-size: 1.05rem;
  }


  /* =======================================================
     LEADERSHIP
  ======================================================= */

  .leaders {
    padding: 55px 0;
  }

  .leader-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 22px;
    margin-bottom: 28px;
  }

  .leader-row > .leader-img {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    height: 380px !important;
    margin: 0 auto;
  }

  .leader-row > .leader-text {
    width: 100% !important;
  }

  .leader-text .role {
    font-size: .64rem;
    letter-spacing: .11em;
  }

  .leader-text h3 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  .leader-text p {
    font-size: .91rem;
    line-height: 1.72;
  }

  .leader-sign {
    margin-top: 14px;
  }


  /* =======================================================
     STATS
  ======================================================= */

  .stats-strip {
    padding: 48px 0;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 25px 12px;
  }

  .stats-grid .num {
    font-size: 2rem;
  }

  .stats-grid .lbl {
    font-size: .58rem;
    line-height: 1.4;
  }


  /* =======================================================
     FACILITIES
  ======================================================= */

  .facility-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }

  .facility-img {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .facility-list {
    gap: 22px;
  }

  .facility-item {
    gap: 13px;
  }

  .facility-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .facility-item h4 {
    font-size: 1rem;
  }

  .facility-item p {
    font-size: .86rem;
    line-height: 1.6;
  }


  /* =======================================================
     ACADEMIES
  ======================================================= */

  .academy-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .academy-card {
    padding: 25px 20px;
  }

  .academy-card .tag {
    font-size: .82rem;
  }

  .academy-card h4 {
    font-size: 1.1rem;
  }

  .academy-card p {
    font-size: .87rem;
    line-height: 1.6;
  }


  /* =======================================================
     ACHIEVERS
  ======================================================= */

  .topper-list {
    grid-template-columns: 1fr !important;
  }

  .topper-row {
    gap: 12px;
    flex-wrap: wrap;
  }

  .topper-row .name {
    font-size: .95rem;
  }

  .topper-row .score {
    font-size: .75rem;
  }


  /* =======================================================
     OLYMPIAD
  ======================================================= */

  .olympiad-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .olympiad-stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .olympiad-stat .num {
    font-size: 1.8rem;
  }

  .olympiad-stat .lbl {
    font-size: .58rem;
  }

  .olympiad-quote {
    font-size: 1rem;
    padding-left: 14px;
  }


  /* =======================================================
     GALLERY
  ======================================================= */

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 145px;
    gap: 9px;
  }

  .g-tall {
    grid-row: span 2;
  }

  .g-wide {
    grid-column: span 1 !important;
  }

  .gallery-grid a,
  .gallery-grid img {
    border-radius: 9px;
  }


  /* =======================================================
     EVENTS
  ======================================================= */

  .event-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .event-body {
    padding: 17px 18px 20px;
  }

  .event-body h4 {
    font-size: 1rem;
  }


  /* =======================================================
     RESULTS SHOWCASE
  ======================================================= */

  .results-showcase {
    padding: 58px 0;
  }

  .results-intro {
    margin-bottom: 35px;
  }

  .results-heading-row {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .results-heading-row h2 {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
    line-height: 1.08;
  }

  .results-heading-row p {
    font-size: .9rem;
    line-height: 1.65;
  }

  .result-main {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }

  .result-story {
    padding: 28px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .result-meta {
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .result-story h3 {
    font-size: clamp(1.8rem, 8vw, 2.3rem);
  }

  .result-story p {
    font-size: .88rem;
  }

  .result-achievement-line {
    gap: 18px;
    flex-wrap: wrap;
  }

  .big-result strong {
    font-size: 1.9rem;
  }

  .result-divider {
    height: 38px;
  }

  .result-visual {
    padding: 18px;
  }

  .result-image-frame {
    height: 300px;
  }

  .result-rankings {
    padding: 20px;
  }

  .result-footer {
    grid-template-columns: 35px 1fr;
    padding: 20px;
  }

  .result-prev {
    left: 8px;
  }

  .result-next {
    right: 8px;
  }


  /* =======================================================
     TESTIMONIALS
  ======================================================= */

  .kis-testimonials {
    padding: 55px 0;
  }

  .testimonial-heading {
    grid-template-columns: 1fr !important;
    gap: 15px;
    margin-bottom: 30px;
  }

  .testimonial-heading h2 {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
  }

  .testimonial-heading > p {
    font-size: .9rem;
    line-height: 1.65;
  }

  .testimonial-content {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }

  .testimonial-quote {
    padding: 30px 20px;
  }

  .quote-symbol {
    font-size: 3.5rem;
    margin-bottom: 15px;
  }

  .testimonial-quote blockquote {
    font-size: 1.35rem;
    line-height: 1.5;
    margin-bottom: 25px;
  }

  .testimonial-side {
    border-left: 0;
    padding: 25px 20px;
  }

  .testimonial-controls {
    margin-top: 16px;
  }

  .testimonial-prev,
  .testimonial-next {
    width: 42px;
    height: 42px;
  }

  .testimonial-dot {
    width: 18px;
  }

  .testimonial-dot.active {
    width: 35px;
  }


  /* =======================================================
     CTA
  ======================================================= */

  .cta-band {
    padding: 60px 0;
  }

  .cta-band h2 {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
  }

  .cta-band p {
    font-size: .9rem;
    line-height: 1.65;
    margin-bottom: 25px;
  }

  .cta-band .hero-actions {
    flex-wrap: wrap;
    justify-content: center;
  }


  /* =======================================================
     FOOTER
  ======================================================= */

  footer {
    padding: 48px 0 24px;
  }

  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
    margin-bottom: 35px;
  }

  .foot-grid p {
    max-width: 100%;
  }

  .foot-col h5 {
    font-size: 15px;
    margin-bottom: 13px;
  }

  .foot-col a {
    font-size: .86rem;
    margin-bottom: 8px;
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
  }


  /* =======================================================
     LIGHTBOX
  ======================================================= */

  .lightbox-content {
    width: 96vw;
    height: 82vh;
    padding: 8px;
  }

  .lightbox-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 25px;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }
}


/* =========================================================
   SMALL MOBILE — 575px
========================================================= */

@media (max-width: 575px) {

  .wrap {
    width: calc(100% - 24px);
  }

  section,
  .page-section {
    padding: 40px 0;
  }


  /* HEADER */

  nav.wrap {
    height: 60px;
  }

  .crest-mark {
    width: 29px;
    height: 33px;
  }

  .brand-name {
    font-size: .85rem;
  }

  .brand-name span {
    font-size: .48rem;
  }


  /* HERO */


  .hero-content {
    padding: 55px 0 55px;
  }

  .hero h1 {
    font-size: 25px !important;
  }

  .hero-sanskrit {
    font-size: .85rem;
  }

  .hero-actions {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
  }

  .btn-solid,
  .btn-ghost {
    width: 100%;
    min-width: 0;
  }

  .hero-stats {
    gap: 18px 8px;
  }

  .hero-stats .num {
    font-size: 1.2rem;
  }

  .hero-stats .lbl {
    font-size: .48rem;
  }


  /* HOUSE */

  .shield {
    min-height: 285px;
    padding: 35px 20px 52px;
  }

  .house-name {
    font-size: 1.15rem;
  }


  /* LEADERS */

  .leader-row {
    padding: 18px;
  }

  .leader-row > .leader-img {
    max-width: 290px !important;
    height: 340px !important;
  }

  .leader-text h3 {
    font-size: 1.2rem;
  }

  .leader-text p {
    font-size: .87rem;
  }


  /* STATS */

  .stats-grid {
    gap: 22px 8px;
  }

  .stats-grid .num {
    font-size: 1.7rem;
  }


  /* FACILITIES */

  .facility-list {
    gap: 19px;
  }

  .facility-item {
    gap: 11px;
  }

  .facility-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: .8rem;
  }


  /* ACADEMIES */

  .academy-card {
    padding: 22px 18px;
  }


  /* OLYMPIAD */

  .olympiad-stat-row {
    gap: 18px 12px;
  }

  .olympiad-stat .num {
    font-size: 1.55rem;
  }


  /* GALLERY */

  .gallery-grid {
    grid-auto-rows: 125px;
    gap: 7px;
  }


  /* RESULTS */

  .results-showcase {
    padding: 48px 0;
  }

  .result-story {
    padding: 24px 16px;
  }

  .result-story h3 {
    font-size: 1.75rem;
  }

  .result-visual {
    padding: 12px;
  }

  .result-image-frame {
    height: 260px;
  }

  .result-rankings {
    padding: 16px;
  }

  .result-footer {
    padding: 18px 16px;
  }


  /* TESTIMONIAL */

  .testimonial-quote {
    padding: 25px 16px;
  }

  .testimonial-quote blockquote {
    font-size: 1.2rem;
  }

  .testimonial-side {
    padding: 22px 16px;
  }


  /* EVENT */

  .event-body {
    padding: 15px 16px 18px;
  }


  /* CTA */

  .cta-band {
    padding: 50px 0;
  }
}


/* =========================================================
   EXTRA SMALL — 400px
========================================================= */

@media (max-width: 400px) {

  .wrap {
    width: calc(100% - 20px);
  }


  .hero h1 {
    font-size: 1.75rem !important;
  }

  .hero-eyebrow {
    font-size: .55rem;
  }

  .hero-sanskrit {
    font-size: .82rem;
  }

  .hero-stats .num {
    font-size: 1.1rem;
  }

  .hero-stats .lbl {
    font-size: .44rem;
  }

  .shield {
    min-height: 275px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .leader-row > .leader-img {
    max-width: 260px !important;
    height: 310px !important;
  }

  .stats-grid .num {
    font-size: 1.5rem;
  }

  .olympiad-stat .num {
    font-size: 1.4rem;
  }

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

  .result-story h3 {
    font-size: 1.6rem;
  }

  .result-image-frame {
    height: 230px;
  }

  .testimonial-heading h2 {
    font-size: 1.75rem;
  }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

  .shield:hover,
  .academy-card:hover,
  .event-card:hover,
  .life-card:hover {
    transform: none !important;
  }

  .gallery-grid a:hover img,
  .life-card:hover img,
  .gallery-grid img:hover {
    transform: none !important;
  }

  .academy-card:hover,
  .event-card:hover {
    box-shadow: none;
  }
}


/* =========================================================
   PREVENT LONG TEXT BREAKING LAYOUT
========================================================= */

.hero h1,
.hero-sanskrit,
.section-head h2,
.section-head p,
.leader-text,
.leader-text p,
.academy-card,
.event-card,
.result-story,
.testimonial-quote,
.testimonial-side,
.foot-grid {
  overflow-wrap: anywhere;
}


/* =========================================================
   MOBILE TABLE / HORIZONTAL CONTENT SAFETY
========================================================= */

.table-wrap,
.table-responsive,
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}


/* =========================================================
   MOBILE IFRAME SAFETY
========================================================= */

iframe {
  max-width: 100%;
}

.map-frame iframe,
.video-frame iframe,
.visit-video iframe {
  width: 100%;
  max-width: 100%;
}


/* =========================================================
   MOBILE FORM SAFETY
========================================================= */

.form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
}

@media (max-width: 575px) {

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .contact-card {
    padding: 22px 17px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================
   KIS MOBILE MENU
   CSS ONLY - NO JAVASCRIPT REQUIRED
========================================================= */

.kis-menu-checkbox{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}


/* =========================================
   HAMBURGER
========================================= */

.navmobile-btn{
    display:none;
    width:46px;
    height:46px;

    padding:0;

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;

    cursor:pointer;

    position:relative;
    z-index:1000001;

    background:transparent;
    border:0;
}

.navmobile-btn span{
    display:block;

    width:25px;
    height:2px;

    background:#111;

    border-radius:2px;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* =========================================
   DRAWER
========================================= */

.mobile-drawer{
    display:block !important;

    position:fixed !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:min(340px,88vw) !important;
    height:100vh !important;
    height:100dvh !important;

    padding:75px 22px 30px !important;

    background:#071426 !important;

    overflow-y:auto !important;

    transform:translateX(100%) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    z-index:1000000 !important;

    transition:
        transform .35s ease,
        opacity .25s ease,
        visibility .35s ease !important;
}


/* =========================================
   OVERLAY
========================================= */

.mobile-scrim{
    display:block !important;

    position:fixed !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    background:rgba(0,0,0,.58) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    z-index:999999 !important;

    transition:
        opacity .3s ease,
        visibility .3s ease !important;
}


/* =========================================
   CHECKBOX OPEN STATE
========================================= */

#kisMenuToggle:checked ~ #siteHeader .navmobile-btn span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

#kisMenuToggle:checked ~ #siteHeader .navmobile-btn span:nth-child(2){
    opacity:0;
}

#kisMenuToggle:checked ~ #siteHeader .navmobile-btn span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}


/* DRAWER OPEN */

#kisMenuToggle:checked ~ .mobile-drawer{
    transform:translateX(0) !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}


/* SCRIM OPEN */

#kisMenuToggle:checked ~ .mobile-scrim{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}


/* =========================================
   CLOSE BUTTON
========================================= */

.mobile-drawer-close{
    position:absolute !important;

    top:18px !important;
    right:18px !important;

    width:40px !important;
    height:40px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:rgba(255,255,255,.08) !important;

    color:#fff !important;

    border:0 !important;
    border-radius:50% !important;

    font-size:26px !important;
    line-height:1 !important;

    cursor:pointer !important;

    z-index:10 !important;
}


/* =========================================
   MOBILE MENU LINKS
========================================= */

.mobile-group{
    margin-bottom:6px;
}

.mobile-group > a{
    display:block;

    padding:13px 6px;

    color:#fff !important;

    border-bottom:1px solid rgba(255,255,255,.12);

    text-decoration:none;
}

.mobile-sub{
    padding-left:14px;
}

.mobile-sub a{
    display:block;

    padding:9px 6px;

    color:rgba(255,255,255,.68) !important;

    text-decoration:none;
}


/* =========================================
   MOBILE CTA
========================================= */

.mobile-cta{
    display:block;

    margin-top:20px;

    text-align:center;
}


/* =========================================
   MOBILE ONLY
========================================= */

@media (max-width:960px){

    #siteHeader nav{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
    }

    .navlinks{
        display:none !important;
    }

    #ctaDesktop{
        display:none !important;
    }

    .navmobile-btn{
        display:flex !important;
    }

    .brand{
        min-width:0;
    }

}


/* =========================================
   DESKTOP
========================================= */

@media (min-width:961px){

    .navmobile-btn{
        display:none !important;
    }

    .mobile-drawer,
    .mobile-scrim{
        display:none !important;
    }

}
.house-grid .tag {
    background: #008d53;
}

.house-grid .ran {
    background: #f8c826;
}
.house-grid .neta {
    background: #017cfe;
}
.house-grid .shiv {
    background: #c80330;
}
.download-prospectus-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 8px;

    background:#c62828;
    color: #fff;
    padding: 14px 12px;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    border-radius: 8px 0 0 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.18);
    transition: all 0.3s ease;
}

.download-prospectus-btn i {
    font-size: 17px;
    transform: rotate(90deg);
}

.download-prospectus-btn:hover {
    background: #2f54a3;
    color: #fff;
}