@charset "utf-8";
@import url('../gfonts/fonts.css');
*:focus {
    outline: none;
}
body {max-width: 100%;overflow-x: hidden!important}

body{background:#fff;position:relative;padding:0;margin:0;font-size:17px;line-height: 1.2rem;color: #1f1914;letter-spacing: .45px;-webkit-font-smoothing:antialiased; overflow-x:hidden; font-family:"Noto Sans", sans-serif;font-weight: 400}a,a:active,a:link,a:hover{text-decoration:none!important;-webkit-transition:all .3s ease;transition:all .3s ease;outline:none!important;}h1,h2,h3,h4,h5,h6,.h6{font-family: "Poppins", sans-serif;font-weight: normal; font-optical-sizing: auto;font-style: normal;-webkit-transition: color .5s ease;-moz-transition: color .5s ease;-ms-transition: color .5s ease;-o-transition: color .5s ease;transition: color .5s ease;outline: none;color:inherit} p{font-weight: normal; text-align: inherit; margin-bottom: 20px;margin-top: 0px;line-height: 1.7;text-align: justify} spacer:before{content:"\2044";display:inline;margin:0px 5px}spacer{display:inline;margin:0px 5px} .npm{ padding:0; margin: 0}.white-text{color:#fff!important}.red-text{color: #ac1f23!important}.orange-text{color: #f15e2e!important}.p70{padding:70px 0} 
ul {list-style-type: none;padding-left: 0;margin: 0} button{border:0!important; outline: 0!important}.black-text{color:#010101}  .navbar-toggler {color: transparent} .container-fluid1{padding-left:45px; padding-right:45px} .text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.ml-auto, .mx-auto {margin-left: auto!important} .h2,h2{font-size:2.5rem}.f900{font-weight:900;margin-bottom:20px}.f600{font-weight:600;margin-bottom:20px}

.copyright,footer{position:relative}.copyright,.copyright a,footer,footer a{color:#fff}.copyright{display:block;background-color:#ac1f23;padding:10px 0;z-index:1;overflow:hidden;border-top:1px solid #ffffff26;font-size:12px}.copyright:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/site-footer-shape.png) center center/cover no-repeat;opacity:.1;z-index:-1}footer{background:url(../images/footer-bird.png) center right/20% no-repeat #ac1f23;font-size:14px;padding:35px 0;border-top: 5px solid #f7a51b}.copyright a:hover,footer a:hover{color:#f7a51b}footer h4{font-size: 1rem}

.foot-icon i,ul.flinks li a:hover{color:#f7a51b}.foot-icon{display:flex;margin-bottom:12px}.foot-icon i{padding:3px 10px 5px 5px;float:left;display:inline-flex}.foot-icon:last-child{margin-bottom:0}ul.flinks li{width:100%;position:relative}ul.flinks li a{display:block;color:#fff;padding:10px 0;line-height:.75rem;position:relative;border-bottom:0 solid #ffffff1f}ul.flinks li a:after{content:"";height:1px;background:#f7a51b;position:absolute;top:100%;left:0;right:0;transform-origin:0 50%;transform:scaleX(0);transition:transform .4s cubic-bezier(.7,0,.3,1);width:15px}ul.flinks li a:hover:after{transform:scaleX(1)}.linef{background:url(../images/line.png) center top repeat-y}.social-links{margin-top:5px}.social-links li{display:inline-block}.social-links a{width:45px;height:45px;border-radius:50%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:1px solid #fff;color:#fff;margin:0 5px;font-size:15px}.social-links a:hover{background-color:#f7a51b;border-color:#f7a51b;color:#ac1f23} .h4-headding{font-size: 1.5rem;font-family: "Poppins", sans-serif;}

.scroll-top{position:fixed;right:20px;bottom:20px;width:40px;height:40px;background:#f05725;border-radius:50%;text-align:center;line-height:40px;color:#fff!important;font-size:20px;z-index:999;cursor:pointer;display:none}.scroll-top svg{position:absolute;top:0;left:0;transform:rotate(-90deg)}.scroll-top path{stroke:#f98a17;stroke-width:5;stroke-linecap:round;fill:none;stroke-dasharray:307.919;stroke-dashoffset:307.919;transition:stroke-dashoffset .1s linear}

.animated-svg{display:inline-block;width:3vw;max-width:30px;height:auto}.animated-svg svg{width:100%;height:auto;animation:2.5s ease-in-out infinite alternate floatWave}@keyframes floatWave{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5%) scale(1.25)}}

.red-box{background: #ac1f23;padding:30px;color:#fff;border-radius:1rem;position:relative}.orange-box{background-color:#f15e2e;padding:30px;color:#fff;border-radius:1rem;position:relative}.orange-box::after{position:absolute;content:"";width:90%;height:6px;top:-3px; left:50%;transform:translateX(-50%);background:#f8a326;border-radius:100px}.icon-c{padding:16px;background:#fff;font-size:28px;width:60px;height:60px;text-align:center;border-radius:50%}.r-border{border-radius: 20px} .academy-box2 {background: #f15e2e;border-radius: 10px;padding: 21px 21px;filter: drop-shadow(0px 4.8px 24.4px rgba(19, 16, 34, 0.1));color: #1f1914}.academy-box3 {background: #fff0e5;border-radius: 10px;padding: 21px 21px} .r-border{border-radius: 20px} .red-bg{background-color: #ac1f23; background-image: url(../images/base-image.png);background-repeat:no-repeat; padding: 50px 0;}.admission-box{padding: 50px 40px 40px 40px;background: #fff;box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);border-radius: 10px}.admission-form-image img {max-width: 100%; margin-left:50px;margin-top:50px;object-fit: cover;border-radius: 10px}.admission-text {padding:20px 50px}


.video-wrapper { position: relative;width: 100%;padding-bottom: 56.25%;overflow: hidden}.video-wrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%}


.input100,input,textarea{background:#fff;outline:0;font-size:14px}.input100{display:block;width:100%;margin-bottom:20px;color:#333;line-height:1.2;border:1px solid #ccc;padding:15px}textarea.input100{min-height:162px;padding-top:22px;padding-bottom:15px}input,textarea{font-weight:400;height:auto;line-height:28px;-webkit-box-shadow:none;box-shadow:none;padding:5px 15px;border:1px solid #ddd;width:100%!important;border-radius:5px;margin-bottom:5px}input:focus,textarea:focus{border-color:#ac1f23}.form-label {display: inline-block;font-size: 13px;font-weight: bold;margin-bottom: 10px}

.rts-theme-btn{font-weight:500;display:inline-flex;justify-content:center;align-items:center;position:relative;padding:15px 20px;overflow:hidden;transition:.5s;z-index:1;background:#ac1f23;color:#fff;border-radius:8px;font-size: 15px}.rts-theme-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:#f15e2e;z-index:-1;opacity:1;border-radius:inherit;transition:.5s}.rts-theme-btn:hover{color:#fff}.rts-theme-btn:hover::before{left:0}.rts-theme-btn i{transform:rotate(-35deg);margin-left:10px;transition:.5s}.rts-theme-btn:hover i{transform:rotate(0)!important}

.pages-banner-area{position:relative;width:100%;height:280px;overflow:hidden}.pages-banner-area .ban-img{width:100%;height:100%;object-fit:cover}.pages-banner-area::before{content:"";position:absolute;inset:0;z-index:1;background:rgb(0 0 0 / 65%)}.pages-title{position:absolute;bottom:0;left:0;right:0;z-index:2;text-align:center}.pages-title h1{font-size:56px;margin-bottom:10px;color:#fff;font-weight:600}ul.breadcrumb{padding:10px 30px;margin:0 auto;justify-content:center;background:#fff;border-radius:10px 10px 0 0;width:fit-content;display:flex}ul.breadcrumb li{list-style-type:none;text-transform:uppercase;color:#1f1914;font-weight:700;font-size:14px}ul.breadcrumb>li+li:before{padding:0 5px 0 8px;color:#ccc;content:"/\00a0"}ul.breadcrumb a{font-weight:700;color:#ac1f23}

.academy-box3,.academy-box4{background:#fff0e5;border-radius:10px;margin-bottom:20px;min-height:200px}.academy-box3{padding:30px}.academy-box4{padding:0;display:flex;gap:20px;align-items:flex-start}.icon{flex:0 0 75px;height:85px;background:#f2622c;display:flex;justify-content:center;align-items:center;transition:.3s}.academy-box4:hover .icon{background:#ac1f23;border-radius:0 0 35px}.icon img{width:70px;height:auto}.academy-content{flex:1;padding:30px 25px 30px 0}

ul.square{list-style-type:none;margin-bottom:0;padding-left:0;padding-top: 13px;}ul.square li{position:relative;list-style:none;padding-left:1.5em;margin-bottom:.35em;line-height:normal}ul.square li::before {color: #ac1f23;position: absolute;content: '\25A0';left: 1px;top: 0}

.accordion{margin-top:20px}.accordion .card{border:none;margin-bottom:3px}.accordion .card h6{background:url(../images/arrow56-512.webp) calc(100% - 10px) center no-repeat #fff;background-size:15px;cursor:pointer;font-size:15px;border:1px solid #efefef;padding:10px 30px 10px 15px;color: #ac1f23;font-weight: bold}.accordion .card h6.collapsed{background-image:url(../images/expand2-256.webp);background-color:#fff;color: #1f1914}.accordion .card-body{color: #1f1914;padding:20px}

.choose-title {font-size: 50px;font-weight: 300;letter-spacing: -1.2px;line-height: 1.18; margin-bottom: 50px}
.academics, .academics1{position:relative;transition:.5s; margin-bottom: 20px}.academics-content{padding:25px;border-radius:20px;background:#ac1f23;color:#fff;font-size: 14px} .academics::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:20px;transition:transform .3s;z-index:2}.academics:hover::after{border:2px solid #ac1f23;transform:rotate(3deg)}
.academics-content1{padding:25px;border-radius:20px;background:#f15e2e;color:#fff;font-size: 14px} .academics1::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:20px;transition:transform .3s;z-index:2}.academics1:hover::after{border:2px solid #ab340d;transform:rotate(3deg)}

.icon-1,.icon-2{background:#fff;display:block;width:90px;height:90px;padding:10px;border-radius:50%;border:2px solid transparent;margin-bottom:10px}.academics1:hover .icon-1,.academics:hover .icon-1{background:#f15e2e;border:2px solid #fff}.academics1:hover .icon-2,.academics:hover .icon-2{background:#ac1f23;border:2px solid #fff}.academics1:hover .icon-1 img,.academics1:hover .icon-2 img,.academics:hover .icon-1 img,.academics:hover .icon-2 img{filter:brightness(9) saturate(0)}

.counter-base {background: url(../images/counter-bg.png) top center no-repeat;background-size: cover;transition:all .3s ease;}.why-box{position:relative;background-color:#fff;padding:10px 20px;margin-bottom:20px;border-radius:1rem;text-align:center;border:1px solid #fff;-webkit-transition:.3s;transition:.3s;font-size:14px}.why-box:focus,.why-box:hover{background-color:#ac1f23;color:#fff}.why-box p{margin-bottom:0; text-align: center}.why-box figure{position:relative;width:100%;-ms-transition:transform .6s;-o-transition:transform .6s;-webkit-transition:transform .6s;transition:transform .6s;transform-style:preserve-3d}.why-box:focus figure img,.why-box:hover figure img{filter:brightness(9) saturate(0)}
.counter_div{background:#fff;border-radius:.8rem;box-shadow:0 0 10px 9px rgb(0 0 0 / 7%);padding:25px;width:100%;transition:.5s;margin-bottom:25px}.counter_div p{margin-bottom:0}.counter_div1{background:#f15e2e;color:#fff}.counter_div1 .feature-text span{color:#fff}.counter_div:hover{box-shadow:0 0 10px 9px rgb(125 125 125 / 30%)}.feature-text span{color:#f15e2e} .counter_div img{width:100px; height:auto; padding: 10px} .counter_div:hover img{animation: rotation 2s linear;}.counter_div2 p{text-align: left!important}

@keyframes rotation {
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}


.admi-side{position: fixed;right: 0px;top: 55%;z-index: 999}.admi-side .block_text{position: relative;color: #fff;cursor: pointer;text-align: center;background-color: #f15e2e;padding: 8px 10px;text-transform: uppercase;border-radius: 0px;transition: background-color .5s;}.admi-side .block_text a{color:#fff}

.flip-card{perspective:1000px;height:380px;margin-bottom:20px}.flip-card-inner{position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}.flip-card-back,.flip-card:hover .flip-card-inner{transform:rotateY(180deg)}.flip-card-back,.flip-card-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;overflow:hidden}.flip-card-front{background:#fff;z-index:2}.flip-card-front img{position:relative;width:100%;height:100%;object-fit:cover}.flip-card-front img::before{position:absolute;content:"";width:100%;height:100%;left:0;bottom:-30px;background:linear-gradient(to top,#282f3b 6%,rgba(0,0,0,0) 70%);z-index:9;transition:.5s;-moz-transition:.5s;-o-transition:.5s;-ms-transition:.5s}.flip-card-front h3{position:absolute;width:100%;height:auto;padding:10px 25px;bottom:0;left:0;font-weight:700;font-size:18px;z-index:9;color:#fff;background:#ac1f23}.flip-card-back{background:url(../images/footer-bird.png) bottom right/30% no-repeat #eb6339;color:#fff;text-align:center;display:flex;align-items:center;justify-content:center;padding:25px}

.post-thumbnail{position:relative;overflow:hidden;margin-bottom:20px;border-radius:15px}.post-thumbnail .over-layer{position:absolute;top:-10px;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);transform:translateY(-100%);transition:.5s linear}.post-thumbnail:hover .over-layer{height:110%;transform:translateY(0)}.post-thumbnail .over-layer .social-links{padding:0;margin:0;list-style:none;text-align:center;position:relative;top:45%}.post-thumbnail .social-links li{display:inline-block;margin-right:10px}.post-thumbnail .social-links li a{border:1px solid #f49d0d;padding:5px;background:#f49d0d;FONT-WEIGHT:200;font-size:25px;border-radius:50%;color:#000}.post-thumbnail img{display:block;margin:0 auto;-webkit-box-shadow:0 13px 43px rgba(37,46,89,.23);box-shadow:0 13px 43px rgba(37,46,89,.23);width:100%;height:auto}


header{background:#fff;padding:0;width: 100%}.header {
  background: #fff;
  padding: 0;
  width: 100%;
  position: relative;
  transition: all 0.3s ease;
  z-index: 9999;
}

.header.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.top-nav {background: #ac1f23;color: #fff;padding: 5px 0;font-size: 13px; border-bottom:2px solid #f7a51b}
.header-top{float:right}.header-top li,.header-top li a,.header-top li a i{display:inline-block}.header-top li a{line-height:15px;padding:0 8px;border-right:1px solid #efefef6b;color:#fff;font-size:12px}.header-top li:last-child a{border-right:0}

.logo {
    padding: 5px;
    top: -36px;
    width: 120px;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 20%);
}

.header.fixed .logo {
    padding: 5px;
    top: -6px;
    width: 85px;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 20%);
}

.header {
  display: block;
  width: 100%;
  position: relative;
  z-index: 99;
  padding: 3px 10px;
}
.header .item-left {
  flex: 0 0 15%;
}
.header .logo a {
  font-size: 30px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
}
.header .item-center {
  flex: 0 0 85%; float: right
}
.header .item-right {
  flex: 0 0 15%;
  display: flex;
  justify-content: flex-end;
}
.header .menu-main{float: right}
.header .item-right a {
  text-decoration: none;
  font-size: 16px; line-height: 40px;
  color: #fff; font-weight: bold;
  display: inline-block; background: #050c2a;
  margin-left: 10px; padding: 10px 15px;
  transition: color 0.3s ease;
}
.header .menu > ul > li {
  display: inline-block;
  line-height: 60px;
  margin-left: 15px;
}
.header .menu > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  color: #1f1914;
  position: relative;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.header .menu > ul > li .sub-menu {
  position: absolute;
  z-index: 500;
  background-color: #ffffff;
  box-shadow: -2px 2px 70px -25px rgba(0, 0, 0, 0.3);
  padding: 20px 30px;
  transition: all 0.5s ease;
  margin-top: 25px;
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 992px) {
  .header .menu > ul > li.menu-item-has-children:hover .sub-menu {
    margin-top: 0;
    visibility: visible;
    opacity: 1;
  }
}
.header .menu > ul > li .sub-menu > ul > li {
  line-height: 1;
}
.header .menu > ul > li .sub-menu > ul > li > a {
  display: inline-block;
  padding: 10px 0;
  font-size: 15px;
  color: #555555; font-weight: bold;
  transition: color 0.3s ease;
  text-decoration: none;
  text-transform: capitalize;
}
.header .menu > ul > li .single-column-menu {
  min-width: 250px;
  max-width: 350px;
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li {
  line-height: 1;
  display: block;
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
  padding: 10px 0;
  display: inline-block;
  font-size: 15px; line-height: 20px; font-weight: bold;
  color: #555555;
  transition: color 0.3s ease;
}
.header .menu > ul > li .sub-menu.mega-menu {
  left: 50%;
  transform: translateX(-50%);
}

.header .menu > ul > li .sub-menu.mega-menu-column-4, .header .menu > ul > li .sub-menu.mega-menu-column-3 {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 15px;
}
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item {
  flex: 0 0 25%;
  padding: 0 15px;
}.header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item {
  flex: 0 0 33%;
  padding: 0 15px;
}
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item .title, .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item .title {
  font-size: 16px;
  color: #2bace1;
  font-weight: 500;
  line-height: 1;
  padding: 10px 0;
}
.header
  .menu
  > ul
  > li
  .sub-menu.mega-menu-column-4
  > .list-item.text-center
  .title {
  text-align: center;
}  .sub-menu.mega-menu-column-3
  > .list-item.text-center
  .title {
  text-align: center;
}
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img {
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  margin-top: 10px;
  /*height: 300px;*/
  object-fit: cover;
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover,
.header .menu > ul > li .sub-menu > ul > li > a:hover,
.header .item-right a:hover,
.header .menu > ul > li:hover > a {
  color: #ac1f23;
}
.mobile-menu-head,
.mobile-menu-trigger {
  display: none;
}
/*responsive*/
@media (max-width: 991px) {
	.header .menu-main {
    float: inherit;
}
  .header .item-center {
    order: 3;
    flex: 0 0 100%;
  }
  .header .item-left {
    flex: 0 0 45%;
  }  .header .item-right {
    flex: 0 0 25%;
  }
  .v-center {
    justify-content: space-between;
  }
  .header .mobile-menu-trigger {
    display: flex;
    height: 30px;
    width: 30px;
    margin-left: 15px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  .header .mobile-menu-trigger span {
    display: block;
    height: 2px;
    background-color: #333333;
    width: 24px;
    position: relative;
  }
  .header .mobile-menu-trigger span:before,
  .header .mobile-menu-trigger span:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333333;
  }
  .header .mobile-menu-trigger span:before {
    top: -6px;
  }
  .header .mobile-menu-trigger span:after {
    top: 6px;
  }
  .header .item-right {
    align-items: center;
  }

  .header .menu {
    position: fixed;
    width: 320px;
    background-color: #ffffff;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    transform: translate(-100%);
    transition: all 0.5s ease;
    z-index: 1099;
  }
  .header .menu.active {
    transform: translate(0%);
  }
  .header .menu > ul > li {
    line-height: 1;
    margin: 0;
    display: block;
  }
  .header .menu > ul > li > a {
    line-height: 50px;
    height: 50px;
    padding: 0 50px 0 15px;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .header .menu > ul > li > a i {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 50px;
    transform: rotate(-90deg);
  }
  .header .menu .mobile-menu-head {
    display: flex;
    height: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 501;
    position: sticky;
    background-color: #ffffff;
    top: 0;
  }
  .header .menu .mobile-menu-head .go-back {
    height: 50px;
    width: 50px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    color: #000000;
    font-size: 16px;
    display: none;
  }
  .header .menu .mobile-menu-head.active .go-back {
    display: block;
  }
  .header .menu .mobile-menu-head .current-menu-title {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
  }
  .header .menu .mobile-menu-head .mobile-menu-close {
    height: 50px;
    width: 50px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    color: #000000;
    font-size: 25px;
  }
  .header .menu .menu-main {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .header .menu > ul > li .sub-menu.mega-menu,
  .header .menu > ul > li .sub-menu {
    visibility: visible;
    opacity: 1;
    position: absolute;
    box-shadow: none;
    margin: 0;
    padding: 15px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 65px;
    max-width: none;
    min-width: auto;
    display: none;
    transform: translateX(0%);
    overflow-y: auto;
  }
  .header .menu > ul > li .sub-menu.active {
    display: block;
  }
  @keyframes slideLeft {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }
  @keyframes slideRight {
    0% {
      opacity: 1;
      transform: translateX(0%);
    }
    100% {
      opacity: 0;
      transform: translateX(100%);
    }
  }
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img {
    margin-top: 0;
  }
  .header
    .menu
    > ul
    > li
    .sub-menu.mega-menu-column-4
    > .list-item.text-center
    .title {
    margin-bottom: 20px;
  }  .header
    .menu
    > ul
    > li
    .sub-menu.mega-menu-column-3
    > .list-item.text-center
    .title {
    margin-bottom: 20px;
  }
  .header
    .menu
    > ul
    > li
    .sub-menu.mega-menu-column-4
    > .list-item.text-center:last-child
    .title {
    margin-bottom: 0px;
  }  .header
    .menu
    > ul
    > li
    .sub-menu.mega-menu-column-3
    > .list-item.text-center:last-child
    .title {
    margin-bottom: 0px;
  }
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item {
    flex: 0 0 100%;
    padding: 0px;
  }  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item {
    flex: 0 0 100%;
    padding: 0px;
  }
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
    display: block;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
    margin-bottom: 15px;
  }
  .menu-overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1098;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
  }
  .menu-overlay.active {
    visibility: visible;
    opacity: 1;
  }
}


.sidepanel{left:0;transition:.5s;height:100%;width:0;position:fixed;z-index:999;top:0;background-color:#2bace1;overflow-x:hidden;padding-top:60px}.sidepanel a{padding:15px 20px;text-decoration:none;font-size:15px;color:#000;display:block;font-weight:700;letter-spacing:1px;transition:.3s}.sidepanel .closebtn{position:absolute;top:0;right:0;font-size:36px;margin-left:50px}.openbtn{font-size:20px;cursor:pointer;padding:18px 15px 10px;border:none}

@media (max-width:767px){.text-justify{text-align:left} .text-right, .copyright{text-align:center!important} spacer:before{display: none}spacer{margin:5px 0; display:block} .p70{padding:50px 0} .container-fluid1 {padding-left: 30px;padding-right: 30px} footer .h6{margin-top:20px}footer .icon {display: inline-block;margin-right: 10px;margin-top: 5px} .h2, h2 {font-size: 2rem} .header-top .text-right{text-align:right!important}.academy-box4 .academy-content{padding: 20px!important}
	
header, .fixed-top{background: #fff; position:relative} .navbar-brand {padding: 0px;width: 100px;position: static;box-shadow:none;}
html body {min-width: 100%;min-height: 100%;-webkit-background-size: auto auto;-moz-background-size: auto auto;-o-background-size: auto auto;background-size: auto auto}
}

@media (max-width: 576px) {
    .academy-box4 {
        flex-direction: column;
        gap: 10px;
    }

    .icon {
        flex: none;
        width: 90px;
        height: 70px;
    }

    .academy-content {
        width: 100%;
    }
}

@media (max-width: @iphone-screen) {background-attachment:inherit;background-size:cover;-webkit-background-size:cover} 

/* === BOMIS change sheet 2026-09 === */
.legacy-strip{background:#fdf6ef}
.stage-grades{font-size:14px;letter-spacing:.02em;color:#ac1f23;margin-bottom:10px}
.stage-grades strong{font-weight:600}
.foot-affil{font-size:14px;line-height:1.6;color:#ffffffcc;margin:0 0 14px;text-align:left}
.foot-affil strong{color:#fff;font-weight:600}
.values-4c{list-style:none;padding:0;margin:0}
.values-4c li{padding:10px 0;border-bottom:1px solid #00000010}
.values-4c li:last-child{border-bottom:0}
.values-4c li strong{color:#ac1f23}
.stage-detail{margin:8px 0 0;font-size:15px}
.stage-detail strong{color:#ac1f23}
.schoollife-list{list-style:none;padding:0;margin:0}
.schoollife-list li{padding:14px 0;border-bottom:1px solid #00000010}
.schoollife-list li:last-child{border-bottom:0}
.schoollife-list li strong{color:#ac1f23;display:block;margin-bottom:4px}

/* flip-card back: stacked, two paragraphs */
.flip-card-back{flex-direction:column;text-align:center}
.flip-card-back p{margin-bottom:0;font-size:15px;line-height:1.5;text-align:center}
.flip-card-back .stage-grades{color:#fff;font-size:13px;letter-spacing:.03em;margin:0 0 10px;text-transform:uppercase}
.flip-card-back .stage-grades strong{font-weight:700}

/* === vertical rhythm === */
.p70{padding:38px 0}
@media (max-width:767px){.p70{padding:28px 0}}
section > .container-fluid > .row > [class^="col-"] > p:last-child,
section > .container-fluid > .row > [class^="col-"] > ul:last-child{margin-bottom:0}
/* headings already carry utility margins; stop them stacking on section padding */
section h2.mt-3{margin-top:0}
section .sub-heading{display:inline-block;margin-bottom:2px}
section > .container-fluid > .row > [class^="col-"] > h2:first-child,
section > .container-fluid1 > .row > [class^="col-"] > h2:first-child{margin-top:0}
/* the hr rules between blocks were tuned for 70px padding */
section hr.mt-4{margin-top:1rem!important}
section hr.mb-5{margin-bottom:1.75rem!important}
section hr.mt-3{margin-top:.75rem!important}
/* cards carried their own bottom margin on top of the row gutter */
.counter_div{margin-bottom:18px}
.academy-box3{margin-bottom:0}
/* new sections: don't vertically centre a short text column against a tall one */
section .row.align-items-center.rhythm-top{align-items:flex-start!important}


/* === alignment + spacing audit fixes === */
/* flip-card backs clipped their copy between 768-991px: give them room and a safety scroll */
.flip-card-back{overflow-y:auto;overscroll-behavior:contain}
/* measured: backs need at most 230px when the cards are 2-up, so 430px left ~250px dead */
@media (max-width:1199px){
  .flip-card{height:300px}
  .flip-card-back{padding:20px}
  .flip-card-back p{font-size:14px;line-height:1.45}
  .flip-card-back .stage-grades{font-size:12px;margin-bottom:8px}
}
@media (max-width:1199px) and (min-width:992px){ .flip-card{height:330px} }

/* long unbreakable strings (email addresses, URLs) must wrap instead of spilling.
   break-word (not anywhere) so min-content sizing — and therefore layout — is unchanged. */
p, li, td, th, dd, h1, h2, h3, h4, h5, h6, .foot-icon, figcaption{overflow-wrap:break-word}

/* numbers must never break mid-digit */
.feature-text, .feature-text big, .feature-text span,
.counter_div .feature-text { white-space:nowrap; overflow-wrap:normal; word-break:keep-all }
/* if the number is still wider than its card, scale the type instead of wrapping */
/* the widest counter is "1,00,000+"; measured 185px at 1.9rem, cards are 160px at 768px.
   fluid size keeps it on one line at every width without inventing more breakpoints. */
.counter_div .feature-text{font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem)}
@media (min-width:1440px){ .counter_div .feature-text{font-size:2.5rem} }
/* the white bird mark needs a dark ground; on light sections use the full colour logo */
.logo-mark{max-width:220px}

/* === cards fill their column: no ragged rows === */
/* A card that stops short of its neighbour leaves a wedge of section background
   beside it. Make every grid card fill its column, and move the vertical gutter
   off the card's own margin onto the row, so heights stay exact. */
section .row, footer .row { row-gap: 18px }
section .row > [class*="col-"] > .counter_div,
section .row > [class*="col-"] > .academy-box2,
section .row > [class*="col-"] > .academy-box3,
section .row > [class*="col-"] > .why-box,
section .row > [class*="col-"] > .academics,
section .row > [class*="col-"] > .academics1,
section .row > [class*="col-"] > .orange-box,
section .row > [class*="col-"] > .academy-box4 { height: 100%; margin-bottom: 0 }
/* the two motto boxes share one column beside the hero photo — split its height */
.stack-fill { display: flex; flex-direction: column; gap: 14px }
.stack-fill > *{flex:1 1 0;height:auto!important;margin-bottom:0!important;display:flex;flex-direction:column;justify-content:center}

/* === flip cards stretch to match taller neighbours === */
/* A flip card needs a definite height for the 3D flip, so it cannot simply be
   height:100%. Instead the column becomes a flex column and layout hands the
   card a real height. The plain `height` above stays as the fallback for any
   browser without :has(), so the card never collapses. */
section .row > [class*="col-"]:has(> .flip-card) { display: flex; flex-direction: column }
section .row > [class*="col-"]:has(> .flip-card) > .flip-card {
  flex: 1 1 auto; height: auto; min-height: 380px; margin-bottom: 0 }
@media (max-width:1199px){
  section .row > [class*="col-"]:has(> .flip-card) > .flip-card { min-height: 300px }
}

/* === editorial gallery + events === */
/* An asymmetric frame wall: one anchor tile, the rest orbiting it. The spans are
   set per tile so the rhythm is deliberate rather than a uniform grid. */
.frame-wall{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:118px;gap:14px;grid-auto-flow:dense}
.frame{position:relative;overflow:hidden;border-radius:16px;background:#f2e9e2;
  box-shadow:0 10px 30px rgba(31,25,20,.10);display:block;isolation:isolate}
.frame img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-origin:center}
.frame:hover img,.frame:focus-visible img{transform:scale(1.07)}
.frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(31,25,20,.92) 0%,rgba(31,25,20,.55) 22%,rgba(31,25,20,.12) 48%,rgba(31,25,20,0) 70%);
  opacity:.9;transition:opacity .45s ease}
.frame:hover::after{opacity:1}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;color:#fff}
.frame figcaption .ftitle{display:block;font-family:"Poppins",sans-serif;font-weight:700;
  font-size:16px;line-height:1.25;text-align:left;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.frame figcaption .fmeta{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:#ffc768;margin-bottom:5px;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.frame .fbar{position:absolute;left:18px;bottom:12px;z-index:3;height:3px;width:34px;border-radius:2px;
  background:#f15e2e;transform:scaleX(1);transform-origin:0 50%;transition:transform .5s ease}
.frame:hover .fbar{transform:scaleX(2.6)}
.frame:focus-visible{outline:3px solid #f7a51b;outline-offset:3px}
/* A composition that tiles exactly: three bands, each summing to 12 columns,
   so the wall never ends with a hole.
     band A  hero(6) | tall(3) | wide(3,r2) over unit(3,r1)
     band B  band(4) | slim(4) | duo(4)
     band C  pair(6) | close(6)                                             */
.frame.f-hero {grid-column:span 6;grid-row:span 4}
.frame.f-tall {grid-column:span 3;grid-row:span 4}
.frame.f-wide {grid-column:span 3;grid-row:span 2}
.frame.f-unit {grid-column:span 3;grid-row:span 2}
.frame.f-band {grid-column:span 4;grid-row:span 2}
.frame.f-slim {grid-column:span 4;grid-row:span 2}
.frame.f-duo  {grid-column:span 4;grid-row:span 2}
.frame.f-pair {grid-column:span 6;grid-row:span 2}
.frame.f-close{grid-column:span 6;grid-row:span 2}
@media (max-width:991px){
  .frame-wall{grid-template-columns:repeat(6,1fr);grid-auto-rows:110px;gap:12px;grid-auto-flow:dense}
  .frame.f-hero{grid-column:span 6;grid-row:span 3}
  .frame.f-tall,.frame.f-wide{grid-column:span 3;grid-row:span 2}
  .frame.f-unit,.frame.f-band,.frame.f-slim{grid-column:span 2;grid-row:span 2}
  .frame.f-duo{grid-column:span 2;grid-row:span 2}
  .frame.f-pair,.frame.f-close{grid-column:span 3;grid-row:span 2}
}
@media (max-width:575px){
  .frame-wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:94px;gap:10px;grid-auto-flow:dense}
  .frame.f-hero{grid-column:span 2;grid-row:span 3}
  .frame.f-tall,.frame.f-wide,.frame.f-unit,.frame.f-band,
  .frame.f-slim,.frame.f-duo,.frame.f-pair,.frame.f-close{grid-column:span 1;grid-row:span 2}
  .frame figcaption{padding:12px 13px}
  .frame figcaption .ftitle{font-size:14px}
}

/* Rising Stars glimpse — a filmstrip that reads as one continuous reel */
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:14px;
  overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.reel > *{scroll-snap-align:start}
.reel .frame{aspect-ratio:4/3;border-radius:14px}
@media (max-width:575px){ .reel{grid-auto-columns:minmax(170px,1fr)} }
/* a slot still waiting for its photograph — branded, not broken-looking */
.frame.awaiting{background:
  radial-gradient(120% 120% at 20% 10%, #f7a51b 0%, #f15e2e 45%, #ac1f23 100%)}
.frame.awaiting::after{opacity:.35}
.frame.awaiting .slot-mark{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;padding:14px}
.frame.awaiting .slot-mark i{font-size:1.5rem;opacity:.9}
.frame.awaiting .slot-mark span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.92}

/* events page */
.event-card{background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 12px 34px rgba(31,25,20,.10)}
.event-head{padding:26px 28px 6px}
.event-flag{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:#efe7df;color:#6c625a;margin-bottom:12px}
.event-flag.done{background:#e8f3ec;color:#2f6b45}
.event-flag.next{background:#fde9c9;color:#8a5a00}
.event-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 14px;padding:0;list-style:none}
.event-meta li{font-size:14px;color:#5b534c;display:flex;align-items:center;gap:7px}
.event-meta li i{color:#ac1f23}
.event-body{padding:0 28px 28px}

/* === stage card titles: one line, qualifier never split === */
/* "Foundational (Pre-School)" was breaking at the hyphen into "Pre-" / "School)".
   The qualifier is now one unbreakable unit, so it moves to the next line whole,
   and the type scales down so most titles hold a single line. */
/* The qualifier always takes its own line — predictable at every width, and it
   can never split at the hyphen in "Pre-School". The name stays the loud part. */
.flip-card-front h3 .qual, .academy-box3 h3 .qual {
  display: block; font-size: .8em; font-weight: 500;
  letter-spacing: .01em; opacity: .93; margin-top: 1px;
  /* long qualifiers stay free to wrap at spaces on a narrow card */
  white-space: normal; overflow-wrap: normal; hyphens: none }
/* "(Pre-School)" is short enough to hold one line everywhere, so it is pinned —
   that is what stops it splitting into "Pre-" / "School)". */
.qual.nb { white-space: nowrap }
.flip-card-front h3 {
  font-size: clamp(14px, 0.5vw + 10.8px, 17px);
  line-height: 1.22; padding: 10px 18px; hyphens: none; overflow-wrap: normal;
  /* two lines' worth even when the title is one word, so the red bars line up */
  min-height: calc(2 * 1.22em + 20px); display: flex; flex-direction: column;
  justify-content: center }
/* the detailed stage cards on Academics */
.academy-box3 h3 { font-size: clamp(1.1rem, 0.45vw + 0.92rem, 1.45rem);
  line-height: 1.2; hyphens: none; overflow-wrap: normal; margin-bottom: 2px }
.academy-box3 h3 .qual { color: #ac1f23 }

/* === dropdown must stay inside the viewport === */
/* The Admissions dropdown is absolutely positioned and, though hidden until
   hover, still contributes to the page's scroll width. Adding Events pushed it
   3px past the right edge at ~992px. Anchor it to the right of its parent so it
   can never hang off the page; at wider widths this is visually identical. */
@media (min-width:992px){
  .header .menu > ul > li.menu-item-has-children:nth-last-child(-n+3) > .sub-menu:not(.mega-menu){
    left: auto; right: 0 }
}

/* === enquiry / brochure modal === */
.bf-backdrop{position:fixed;inset:0;z-index:100000;background:rgba(31,25,20,.62);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;
  overflow-y:auto}
.bf-dialog{position:relative;width:100%;max-width:620px;background:#fff;border-radius:20px;
  padding:34px 34px 30px;box-shadow:0 30px 80px rgba(31,25,20,.35);max-height:92vh;overflow-y:auto}
.bf-x{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;border-radius:50%;
  background:#f4ede7;color:#8a7f76;font-size:1.5rem;line-height:1;cursor:pointer}
.bf-x:hover{background:#ac1f23;color:#fff}
.bf-eyebrow{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#ac1f23;
  font-weight:700;margin:0 0 6px}
.bf-title{font-size:26px;line-height:1.2;margin:0 0 8px}
.bf-intro{color:#5b534c;margin:0 0 20px;text-align:left}
.bf-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.bf-form[hidden]{display:none}
.bf-field{display:flex;flex-direction:column;gap:5px}
.bf-field.bf-wide{grid-column:1/-1}
.bf-field label{font-size:13px;font-weight:600;color:#3d3630}
.bf-field label span{color:#ac1f23}
.bf-field input,.bf-field textarea,.bf-field select{border:1.5px solid #e2d8cf;border-radius:10px;
  padding:11px 13px;font-size:15px;font-family:inherit;color:#1f1914;background:#fffdfb;width:100%}
.bf-field input:focus,.bf-field textarea:focus,.bf-field select:focus{outline:none;border-color:#f15e2e;
  box-shadow:0 0 0 3px rgba(241,94,46,.16)}
/* The enquiry form now asks for the applicant and the guardian, so it is
   grouped under two headings the way the school's own form is. */
.bf-group{grid-column:1/-1;margin:14px 0 -2px;font-family:"Poppins",sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#ac1f23}
.bf-group:first-child{margin-top:0}
.bf-error{grid-column:1/-1;margin:0;color:#ac1f23;font-size:14px;font-weight:600}
.bf-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.bf-submit{border:0;cursor:pointer}
.bf-call{font-size:14px;color:#5b534c}
.bf-call:hover{color:#ac1f23}
.bf-done{text-align:center;padding:10px 0 4px}
.bf-tick{width:62px;height:62px;border-radius:50%;background:#e8f3ec;color:#2f6b45;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.bf-done h3{margin:0 0 8px;font-size:1.25rem}
.bf-done p{color:#5b534c;text-align:center;margin:0 0 18px}
@media (max-width:575px){
  .bf-dialog{padding:26px 20px 22px;border-radius:16px}
  .bf-form{grid-template-columns:1fr}
  .bf-title{font-size:22px}
}
@media (prefers-reduced-motion:reduce){ .bf-backdrop{backdrop-filter:none} }

/* === admissions landing page === */
/* Same palette and faces as the rest of the site; what changes is the pacing —
   one decision per screen, the form never more than a scroll away. */
.lp{--ink:#1f1914;--red:#ac1f23;--orange:#f15e2e;--amber:#f7a51b;--cream:#fdf6ef;--line:#e7dcd2}
.lp-bar{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--line)}
.lp-bar .in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1280px;margin:0 auto;padding:12px 24px}
.lp-bar img{height:52px;width:auto}
.lp-bar .ph{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lp-bar .ph a{font-weight:600;color:var(--ink);white-space:nowrap}
.lp-bar .ph a:hover{color:var(--red)}

/* hero */
.lp-hero{position:relative;background:#2a1512;overflow:hidden}
.lp-hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(28,14,12,.94) 0%,rgba(28,14,12,.86) 42%,rgba(28,14,12,.42) 72%,rgba(28,14,12,.30) 100%),
  var(--hero) center/cover no-repeat;z-index:0}
.lp-hero .in{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:58px 24px 64px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.lp-kicker{display:inline-flex;align-items:center;gap:9px;background:rgba(247,165,27,.16);
  border:1px solid rgba(247,165,27,.5);color:#ffc768;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;padding:7px 14px;border-radius:100px;margin-bottom:18px}
.lp-hero h1{color:#fff;font-size:clamp(2rem,3.2vw,3.35rem);line-height:1.08;margin:0 0 18px;
  text-wrap:balance}
.lp-hero h1 em{font-style:normal;color:var(--amber)}
.lp-hero .lead{color:#f0e6df;font-size:17px;line-height:1.65;max-width:56ch;margin:0 0 26px;
  text-align:left}
.lp-proof{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.lp-proof li{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17);border-radius:12px;padding:10px 14px;color:#fff;
  font-size:14px;font-weight:500}
.lp-proof li i{color:var(--amber)}

/* the form card, always the brightest thing on the screen */
.lp-card{background:#fff;border-radius:20px;padding:28px 28px 24px;
  box-shadow:0 26px 70px rgba(0,0,0,.38)}
.lp-card h2{font-size:22px;margin:0 0 4px}
.lp-card .sub{color:#6c625a;font-size:15px;margin:0 0 18px;text-align:left}
.lp-form{display:grid;gap:12px}
.lp-form label{font-size:13px;font-weight:600;color:#3d3630;display:block;margin-bottom:4px}
.lp-form input,.lp-form select{width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 13px;font-size:15px;font-family:inherit;color:var(--ink);background:#fffdfb}
.lp-form input:focus,.lp-form select:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(241,94,46,.16)}
.lp-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-form button{width:100%;border:0;cursor:pointer;font-size:1rem;padding:14px 18px}
.lp-note{font-size:12px;color:#8a7f76;margin:10px 0 0;text-align:center}
.lp-err{color:var(--red);font-size:14px;font-weight:600;margin:0;display:none}
.lp-ok{display:none;text-align:center;padding:14px 0 6px}
.lp-ok .tick{width:58px;height:58px;border-radius:50%;background:#e8f3ec;color:#2f6b45;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 14px}

/* legacy numbers */
.lp-legacy{background:var(--red);color:#fff;padding:52px 0}
.lp-legacy .in{max-width:1280px;margin:0 auto;padding:0 24px}
.lp-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:26px}
.lp-num{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:20px 18px}
.lp-num b{display:block;font-family:"Poppins",sans-serif;font-weight:900;
  font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1;color:var(--amber);white-space:nowrap}
.lp-num span{display:block;margin-top:7px;font-size:14px;color:#f4e7dd}

/* reason cards */
.lp-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-reason{position:relative;border-radius:18px;overflow:hidden;min-height:290px;display:flex;
  align-items:flex-end;box-shadow:0 12px 34px rgba(31,25,20,.12)}
.lp-reason img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.lp-reason:hover img{transform:scale(1.06)}
.lp-reason::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,
  rgba(31,25,20,.93) 4%,rgba(31,25,20,.55) 40%,rgba(31,25,20,.05) 78%)}
.lp-reason .txt{position:relative;z-index:2;padding:22px;color:#fff}
.lp-reason .txt h3{font-size:18px;margin:0 0 6px;color:#fff}
.lp-reason .txt p{margin:0;font-size:14px;color:#eaded5;text-align:left}
.lp-reason .tag{display:inline-block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:#ffc768;font-weight:700;margin-bottom:7px}

/* steps */
.lp-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.lp-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px;position:relative}
.lp-step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:18px;
  width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.lp-step h4{font-size:1rem;margin:8px 0 6px}
.lp-step p{margin:0;font-size:14px;color:#5b534c;text-align:left}

/* sticky conversion bar */
.lp-stick{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--ink);color:#fff;
  box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.lp-stick .in{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.lp-stick .msg{font-size:15px}
.lp-stick .msg b{color:var(--amber)}
.lp-stick .acts{display:flex;gap:10px;flex-wrap:wrap}
.lp-stick a{white-space:nowrap}
.lbl-xs{display:none}
.lp-stick .ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;
  padding:10px 16px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.lp-stick .ghost:hover{background:rgba(255,255,255,.12);color:#fff}
body.has-stick{padding-bottom:78px}

@media (max-width:991px){
  .lp-hero .in{grid-template-columns:1fr;gap:30px;padding:40px 20px 48px}
  .lp-nums{grid-template-columns:repeat(3,1fr)}
  .lp-why{grid-template-columns:repeat(2,1fr)}
  .lp-steps{grid-template-columns:repeat(2,1fr);gap:22px 16px}
}
@media (max-width:575px){
  .lp-bar img{height:44px}
  .lp-bar .ph .hide-xs{display:none}
  .lp-nums{grid-template-columns:repeat(2,1fr)}
  .lp-why{grid-template-columns:1fr}
  .lp-steps{grid-template-columns:1fr}
  .lp-form .two{grid-template-columns:1fr}
  .lp-card{padding:22px 18px 18px}
  .lp-stick .in{padding:10px 16px;gap:10px}
  .lp-stick .msg{display:none}
  .lp-stick .acts{width:100%;gap:8px}
  /* the two secondary buttons shrink to their icon; the primary takes the rest */
  .lp-stick .acts .ghost{flex:0 0 auto;padding:10px 14px}
  .lp-stick .acts .rts-theme-btn{flex:1 1 auto;justify-content:center;text-align:center;
    padding-left:12px;padding-right:12px}
  .lbl-full{display:none}
  .lbl-xs{display:inline}
  body.has-stick{padding-bottom:70px}
}

/* === landing: film, care, voice, faq === */
/* The film sits in a dark band so the frame itself is the light in the room.
   Poster first, bytes only on click — a 95MB hero must not tax a phone on 4G. */
.lp-film{background:#170c0a;padding:64px 0;position:relative;overflow:hidden}
.lp-film::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(241,94,46,.30) 0%,rgba(241,94,46,0) 68%);
  top:-330px;right:-240px;pointer-events:none}
.lp-film .in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px}
.lp-film .say{max-width:70ch;margin:0 auto 30px;text-align:center}
.lp-film .say h2{color:#fff;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.15;margin:10px 0 12px}
.lp-film .say h2 em{font-style:normal;color:#f7a51b}
.lp-film .say p{color:#e6d8cf;margin:0;text-align:center}
.lp-frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#000;
  box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.lp-frame video,.lp-frame img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-frame .play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;border:0;background:linear-gradient(to top,rgba(23,12,10,.72),rgba(23,12,10,.25));
  cursor:pointer;color:#fff;font-family:inherit}
.lp-frame .play .disc{width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;
  font-size:29px;padding-left:6px;transition:transform .35s ease,background .35s ease}
.lp-frame .play:hover .disc{transform:scale(1.08);background:#f15e2e;border-color:#f15e2e}
.lp-frame .play .cap{font-size:14px;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.lp-film .under{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.lp-film .under li{list-style:none;color:#f0e3da;font-size:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:8px 16px}

/* safety cards — the questions a parent of a four-year-old asks first */
.lp-care{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lp-care .c{background:#fff;border:1px solid var(--line,#e7dcd2);border-radius:16px;padding:22px 20px}
.lp-care .c i{font-size:22px;color:#ac1f23;margin-bottom:10px;display:block}
.lp-care .c h4{font-size:16px;margin:0 0 7px}
.lp-care .c p{margin:0;font-size:14px;color:#5b534c;text-align:left}

/* the voice of the school */
.lp-voice{display:grid;grid-template-columns:.9fr 1.6fr;gap:36px;align-items:center}
.lp-voice .pic{border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(31,25,20,.18)}
.lp-voice .pic img{width:100%;height:100%;object-fit:cover;display:block}
.lp-voice blockquote{margin:0;font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.6;color:#2b241e}
.lp-voice blockquote::before{content:"\201C";display:block;font-family:"Poppins",serif;font-weight:900;
  font-size:54px;line-height:.6;color:#f7a51b;margin-bottom:10px}
.lp-voice .who{margin-top:18px;font-size:15px;color:#5b534c}
.lp-voice .who b{display:block;color:#ac1f23;font-size:16px}

/* stages strip */
.lp-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lp-stage{background:#fff;border:1px solid var(--line,#e7dcd2);border-left:4px solid #f15e2e;
  border-radius:12px;padding:18px 18px}
.lp-stage b{display:block;font-family:"Poppins",sans-serif;font-size:16px;margin-bottom:3px}
.lp-stage span{display:block;font-size:13px;color:#ac1f23;font-weight:600;margin-bottom:8px}
.lp-stage p{margin:0;font-size:14px;color:#5b534c;text-align:left}
.lp-stage.soon{border-left-color:#c9bdb2;opacity:.92}

/* faq */
.lp-faq{max-width:900px;margin:0 auto}
.lp-faq details{border-bottom:1px solid var(--line,#e7dcd2);padding:16px 0}
.lp-faq summary{cursor:pointer;font-weight:600;font-size:16px;color:#2b241e;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";color:#f15e2e;font-size:1.5rem;line-height:1;flex:0 0 auto}
.lp-faq details[open] summary::after{content:"\2013"}
.lp-faq p{margin:12px 0 0;color:#5b534c;text-align:left}

@media (max-width:991px){
  .lp-care{grid-template-columns:repeat(2,1fr)}
  .lp-stages{grid-template-columns:repeat(2,1fr)}
  .lp-voice{grid-template-columns:1fr;gap:24px}
  .lp-voice .pic{max-width:320px}
}
@media (max-width:575px){
  .lp-care,.lp-stages{grid-template-columns:1fr}
  .lp-film{padding:44px 0}
  .lp-frame .play .disc{width:66px;height:66px;font-size:22px}
}

/* === floating rail: apply tab + whatsapp === */
/* Right edge, stacked below the existing locate-us marker so nothing collides:
   marker at 55%, the Apply tab sits under it; WhatsApp and scroll-to-top share
   the bottom-right corner in one column. */
.apply-tab{position:fixed;right:0;top:55%;transform:translateY(46px);z-index:999;
  writing-mode:vertical-rl;background:#ac1f23;color:#fff!important;font-family:"Poppins",sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  padding:18px 11px;border-radius:8px 0 0 8px;display:flex;align-items:center;gap:10px;
  box-shadow:-4px 6px 20px rgba(31,25,20,.28);transition:background .35s ease,padding .35s ease;
  text-decoration:none!important}
.apply-tab:hover,.apply-tab:focus-visible{background:#f15e2e;color:#fff!important;padding-right:15px}
.apply-tab i{transform:rotate(90deg)}
.apply-tab:focus-visible{outline:3px solid #f7a51b;outline-offset:2px}

.wa-float{position:fixed;right:20px;bottom:70px;z-index:999;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff!important;display:flex;align-items:center;justify-content:center;
  font-size:26px;box-shadow:0 8px 24px rgba(37,211,102,.42);transition:transform .3s ease}
.wa-float:hover,.wa-float:focus-visible{transform:scale(1.08);color:#fff!important}
.wa-float:focus-visible{outline:3px solid #0b7a3b;outline-offset:3px}
.wa-float::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(37,211,102,.45);animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(.9);opacity:.85}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .wa-float::after{animation:none} }

/* the landing page already carries its own sticky conversion bar */
body.lp .apply-tab{display:none}
body.lp .wa-float{bottom:92px}

@media (max-width:767px){
  .apply-tab{writing-mode:horizontal-tb;top:auto;bottom:16px;right:88px;transform:none;
    border-radius:100px;padding:12px 18px;font-size:12px;box-shadow:0 8px 24px rgba(31,25,20,.3)}
  .apply-tab i{transform:none}
  .wa-float{width:50px;height:50px;bottom:16px;right:20px;font-size:1.5rem}
  .scroll-top{bottom:78px!important}
}

/* === landing: offering, school life, place, close === */
/* What the fee actually buys — one grid, scannable, no marketing adjectives. */
.lp-incl{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line,#e7dcd2);
  border-radius:16px;overflow:hidden;background:#fff}
.lp-incl .i{padding:20px 22px;border-right:1px solid var(--line,#e7dcd2);
  border-bottom:1px solid var(--line,#e7dcd2);display:flex;gap:13px;align-items:flex-start}
.lp-incl .i:nth-child(3n){border-right:0}
.lp-incl .i:nth-last-child(-n+3){border-bottom:0}
.lp-incl .i i{color:#2f6b45;font-size:17px;margin-top:3px;flex:0 0 auto}
.lp-incl .i b{display:block;font-family:"Poppins",sans-serif;font-size:16px;margin-bottom:3px}
.lp-incl .i span{font-size:14px;color:#5b534c;line-height:1.5}

/* school life — five strands, each with its own tile */
.lp-life{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lp-life .s{background:#fff;border-radius:14px;padding:20px 18px;border-top:4px solid #f15e2e;
  box-shadow:0 10px 26px rgba(31,25,20,.08)}
.lp-life .s:nth-child(2n){border-top-color:#ac1f23}
.lp-life .s b{display:block;font-family:"Poppins",sans-serif;font-size:1rem;margin-bottom:7px}
.lp-life .s p{margin:0;font-size:14px;color:#5b534c;text-align:left}

/* place */
.lp-place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:stretch}
.lp-place .map{border-radius:18px;overflow:hidden;min-height:340px;min-width:0;
  box-shadow:0 14px 40px rgba(31,25,20,.14)}
.lp-place .map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.lp-place .info{display:flex;flex-direction:column;justify-content:center}
.lp-place .row-i{display:flex;gap:13px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--line,#e7dcd2)}
.lp-place .row-i:last-child{border-bottom:0}
.lp-place .row-i i{color:#ac1f23;font-size:18px;margin-top:3px;flex:0 0 auto;width:20px}
/* a flex item's min-width is auto, so the long email address refused to shrink
   and pushed the page past a 320px phone */
.lp-place .row-i > div{min-width:0;flex:1 1 auto}
.lp-place .row-i a{overflow-wrap:anywhere}
.lp-place .row-i b{display:block;font-size:15px;margin-bottom:2px}
.lp-place .row-i span,.lp-place .row-i a{font-size:15px;color:#5b534c}
.lp-place .row-i a:hover{color:#ac1f23}

/* the closing ask */
.lp-close{background:linear-gradient(135deg,#ac1f23 0%,#8d1a1e 58%,#6f1417 100%);color:#fff;
  padding:62px 0;position:relative;overflow:hidden}
.lp-close::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,165,27,.22) 0%,rgba(247,165,27,0) 70%);
  bottom:-320px;left:-180px;pointer-events:none}
.lp-close .in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.lp-close h2{color:#fff;font-size:clamp(1.7rem,2.7vw,2.7rem);line-height:1.12;margin:10px 0 14px}
.lp-close h2 em{font-style:normal;color:#f7a51b}
.lp-close p{color:#f3e4da;margin:0 0 20px;text-align:left}
.lp-close .ways{display:flex;flex-wrap:wrap;gap:12px}
.lp-close .ways a{display:inline-flex;align-items:center;gap:9px;border:1.5px solid rgba(255,255,255,.4);
  border-radius:10px;padding:11px 17px;color:#fff!important;font-weight:600;font-size:15px}
.lp-close .ways a:hover{background:rgba(255,255,255,.14)}

@media (max-width:991px){
  .lp-incl{grid-template-columns:repeat(2,1fr)}
  .lp-incl .i:nth-child(3n){border-right:1px solid var(--line,#e7dcd2)}
  .lp-incl .i:nth-child(2n){border-right:0}
  .lp-incl .i:nth-last-child(-n+3){border-bottom:1px solid var(--line,#e7dcd2)}
  .lp-incl .i:nth-last-child(-n+2){border-bottom:0}
  .lp-life{grid-template-columns:repeat(2,1fr)}
  .lp-place,.lp-close .in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:575px){
  .lp-incl{grid-template-columns:1fr}
  .lp-incl .i{border-right:0!important}
  .lp-incl .i:not(:last-child){border-bottom:1px solid var(--line,#e7dcd2)!important}
  .lp-life{grid-template-columns:1fr}
  .lp-close{padding:44px 0}
}

/* === registration page === */
/* A form page, not a sales page: the form is the content, everything else
   exists only to answer "should I fill this in?" */
.reg-hero{background:#2a1512;position:relative;overflow:hidden}
.reg-hero::before{content:"";position:absolute;inset:0;z-index:0;background:
  linear-gradient(112deg,rgba(28,14,12,.95) 0%,rgba(28,14,12,.88) 48%,rgba(28,14,12,.55) 100%),
  var(--hero) center/cover no-repeat}
.reg-hero .in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:52px 24px 56px}
.reg-hero h1{color:#fff;font-size:clamp(1.9rem,3vw,3rem);line-height:1.1;margin:0 0 14px;max-width:20ch}
.reg-hero h1 em{font-style:normal;color:#f7a51b}
.reg-hero p{color:#efe2d9;max-width:62ch;margin:0;text-align:left}

.reg-wrap{max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:34px;align-items:start}
.reg-card{background:#fff;border:1px solid var(--line,#e7dcd2);border-radius:20px;
  padding:30px 30px 26px;box-shadow:0 18px 50px rgba(31,25,20,.10)}
.reg-card > h2{font-size:22px;margin:0 0 4px}
.reg-card > .sub{color:#6c625a;font-size:15px;margin:0 0 22px;text-align:left}
.reg-group{border:0;padding:0;margin:0 0 22px}
.reg-group legend{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ac1f23;
  font-weight:700;padding:0;margin-bottom:12px;width:100%;border-bottom:1px solid var(--line,#e7dcd2);
  padding-bottom:7px}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.reg-f{display:flex;flex-direction:column;gap:5px}
.reg-f.wide{grid-column:1/-1}
.reg-f label{font-size:13px;font-weight:600;color:#3d3630}
.reg-f label span{color:#ac1f23}
.reg-f input,.reg-f select,.reg-f textarea{border:1.5px solid var(--line,#e7dcd2);border-radius:10px;
  padding:11px 13px;font-size:15px;font-family:inherit;color:#1f1914;background:#fffdfb;width:100%}
.reg-f input:focus,.reg-f select:focus,.reg-f textarea:focus{outline:none;border-color:#f15e2e;
  box-shadow:0 0 0 3px rgba(241,94,46,.16)}
.reg-f .hint{font-size:12px;color:#8a7f76}
.reg-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reg-pick label{position:relative;display:block;cursor:pointer}
.reg-pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.reg-pick .box{border:1.5px solid var(--line,#e7dcd2);border-radius:12px;padding:15px 16px;
  transition:border-color .2s ease,background .2s ease;height:100%}
.reg-pick input:checked + .box{border-color:#f15e2e;background:#fff4ee}
.reg-pick input:focus-visible + .box{box-shadow:0 0 0 3px rgba(241,94,46,.25)}
.reg-pick .box b{display:block;font-family:"Poppins",sans-serif;font-size:1rem;margin-bottom:3px}
.reg-pick .box span{font-size:13px;color:#5b534c}
.reg-err{color:#ac1f23;font-size:14px;font-weight:600;margin:0 0 12px;display:none}
.reg-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.reg-actions button{border:0;cursor:pointer;font-size:1rem;padding:14px 22px}
.reg-note{font-size:13px;color:#8a7f76;margin:12px 0 0}
.reg-ok{display:none;text-align:center;padding:18px 0 8px}
.reg-ok .tick{width:62px;height:62px;border-radius:50%;background:#e8f3ec;color:#2f6b45;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}

/* the aside: only what a parent needs to decide */
.reg-aside .blk{background:#fff;border:1px solid var(--line,#e7dcd2);border-radius:16px;
  padding:20px 22px;margin-bottom:16px}
.reg-aside .blk h3{font-size:16px;margin:0 0 10px}
.reg-aside .blk p,.reg-aside .blk li{font-size:14px;color:#5b534c;text-align:left}
.reg-aside .blk ul{list-style:none;padding:0;margin:0}
.reg-aside .blk li{padding:8px 0;border-bottom:1px solid var(--line,#e7dcd2);display:flex;gap:10px}
.reg-aside .blk li:last-child{border-bottom:0}
.reg-aside .blk li i{color:#ac1f23;margin-top:3px}
/* a detail the school has still to confirm — visible, never invented */
.reg-tbc{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:#fdf0d8;color:#8a5a00;border-radius:100px;padding:3px 10px;font-weight:700}

@media (max-width:991px){ .reg-wrap{grid-template-columns:minmax(0,1fr)} }
@media (max-width:575px){
  .reg-grid,.reg-pick{grid-template-columns:1fr}
  .reg-card{padding:22px 18px 18px}
}

/* ── Pages whose content the school has not sent yet ──
   Reads as "being prepared", never as a broken page, and names what is awaited
   so the school can review the structure and see its own to-do list. */
.page-placeholder {
  max-width: 820px; margin: 0 auto; padding: 44px 40px;
  background: #faf7f2; border: 1px solid #e6ddcd;
  border-left: 4px solid #ac1f23; border-radius: 6px;
}
.page-placeholder h2 {
  margin: 0 0 12px; font-size: 26px; line-height: 1.2; color: #1a1a1a;
}
.page-placeholder p { margin: 0 0 14px; color: #5b4738; line-height: 1.7; font-size: 15px; }
.page-placeholder .ph-awaits {
  margin: 20px 0; padding: 14px 18px; background: #fff; border: 1px dashed #d8c6a8;
  border-radius: 4px; font-size: 14px; color: #6b5a49;
}
.page-placeholder .ph-awaits span {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #ac1f23; font-weight: 700; margin-bottom: 5px;
}
.page-placeholder .ph-links { margin: 22px 0 0; }
.page-placeholder .ph-links a {
  display: inline-block; margin: 0 14px 0 0; padding: 9px 18px;
  background: #ac1f23; color: #fff; border-radius: 4px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.page-placeholder .ph-links a + a { background: transparent; color: #ac1f23; border: 1px solid #ac1f23; }
@media (max-width: 600px) {
  .page-placeholder { padding: 30px 22px; }
  .page-placeholder .ph-links a { display: block; margin: 0 0 10px; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   Mega menu — brand-correct rebuild
   The theme ships a generic slab: cyan headings that fight the
   maroon, bold 15px links on loose leading, no dividers, and a
   column that keeps the panel's full height even when short.
   Scoped to the desktop breakpoint so the mobile drawer is untouched.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .header .menu > ul > li .sub-menu.mega-menu-column-3,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 {
    max-width: 940px;
    padding: 26px 10px 22px;
    border-top: 3px solid #ac1f23;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 26px 50px -26px rgba(70, 25, 12, 0.38),
                0 2px 10px rgba(70, 25, 12, 0.06);
    align-items: flex-start;
  }

  /* Columns: real gutters and a hairline between, not floating blocks */
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item {
    padding: 0 28px;
    border-left: 1px solid #efe6d8;
  }
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item:first-child {
    border-left: 0;
  }

  /* Column heading: a small brand-coloured label, not a cyan sub-title */
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item .title,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item .title {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #ac1f23;
    line-height: 1.2;
    padding: 0 0 9px;
    margin: 0 0 6px;
    border-bottom: 1px solid #efe6d8;
  }

  /* Links: readable weight, tight rhythm, an accent that arrives on hover */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a,
  .header .menu > ul > li .sub-menu.single-column-menu > ul > li > a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #4a3b2f;
    padding: 8px 8px 8px 13px;
    border-radius: 5px;
    position: relative;
    transition: color 0.18s ease, background 0.18s ease;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a::before,
  .header .menu > ul > li .sub-menu.single-column-menu > ul > li > a::before {
    content: "";
    position: absolute;
    left: 3px; top: 50%;
    width: 3px; height: 0;
    background: #ac1f23;
    border-radius: 2px;
    transform: translateY(-50%);
    transition: height 0.18s ease;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover,
  .header .menu > ul > li .sub-menu.single-column-menu > ul > li > a:hover {
    color: #ac1f23;
    background: #fdf8f2;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover::before,
  .header .menu > ul > li .sub-menu.single-column-menu > ul > li > a:hover::before {
    height: 17px;
  }

  /* The short dropdowns get the same treatment so the menu reads as one system */
  .header .menu > ul > li .sub-menu.single-column-menu {
    min-width: 260px;
    padding: 14px 12px;
    border-top: 3px solid #ac1f23;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 26px 50px -26px rgba(70, 25, 12, 0.38),
                0 2px 10px rgba(70, 25, 12, 0.06);
  }
}

/* ── Pages carrying the content the school has already given us ── */
.content-block { max-width: 880px; margin: 0 auto; }
.content-block .lead-copy {
  font-size: 18px; line-height: 1.65; color: #3a2d24; margin: 0 0 26px;
}
.content-block .lead-copy strong { color: #ac1f23; }
.content-block .mpd-table { width: 100%; }
.content-block .src {
  font-size: 12px; color: #8a7461; margin: 4px 0 0; font-style: italic;
}
.content-block .ph-awaits.ph-standalone {
  margin: 26px 0 0; padding: 15px 18px;
  background: #faf7f2; border: 1px dashed #d8c6a8; border-radius: 5px;
  font-size: 14px; color: #6b5a49; line-height: 1.6;
}
.content-block .ph-awaits.ph-standalone span {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #ac1f23; font-weight: 700; margin-bottom: 5px;
}
.content-block .ph-links { margin: 28px 0 0; }
.content-block .ph-links a {
  display: inline-block; margin: 0 14px 0 0; padding: 9px 18px;
  background: #ac1f23; color: #fff; border-radius: 4px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.content-block .ph-links a + a { background: transparent; color: #ac1f23; border: 1px solid #ac1f23; }
@media (max-width: 600px) {
  .content-block .lead-copy { font-size: 16px; }
  .content-block .ph-links a { display: block; margin: 0 0 10px; text-align: center; }
}

/* ══ Requirement form: what each page still needs, asked on the page ══ */
.req-section { padding-top: 40px; }
.req-form-block {
  max-width: 880px; margin: 0 auto; padding: 34px 36px;
  background: #fffdfa; border: 1px solid #e6ddcd;
  border-top: 4px solid #ac1f23; border-radius: 8px;
  box-shadow: 0 18px 40px -28px rgba(70,25,12,.3);
}
.req-tag {
  display: inline-block; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: #ac1f23;
  background: #fdeee9; border: 1px solid #f2d3ca;
  padding: 5px 12px; border-radius: 999px;
}
.req-purpose { margin: 14px 0 26px; font-size: 16px; line-height: 1.6; color: #4a3b2f; }
.req-field { margin: 0 0 22px; }
.req-field label { display: block; font-size: 14px; font-weight: 700; color: #2b211a; margin-bottom: 4px; }
.req-star { color: #ac1f23; }
.req-hint { margin: 0 0 8px; font-size: 12px; color: #8a7461; line-height: 1.5; }
.req-field input[type=text], .req-field textarea, .req-field select {
  width: 100%; padding: 11px 13px; font-size: 15px; color: #2b211a;
  background: #fff; border: 1px solid #ddd0ba; border-radius: 5px;
  font-family: inherit; line-height: 1.5;
}
.req-field textarea { resize: vertical; min-height: 92px; }
.req-field input[type=text]:focus, .req-field textarea:focus, .req-field select:focus {
  outline: none; border-color: #ac1f23; box-shadow: 0 0 0 3px rgba(172,31,35,.12);
}
.req-field input[type=file] { display: block; width: 100%; font-size: 14px; color: #5b4738; padding: 9px 0; }
.req-field.is-missing input, .req-field.is-missing textarea { border-color: #ac1f23; background: #fff8f6; }
.req-newname { display: none; margin-top: 10px; }

.req-question {
  margin: 28px 0; padding: 18px 20px;
  background: #fdf6ec; border: 1px solid #ecd9b8; border-left: 4px solid #e8821c;
  border-radius: 6px;
}
.req-question span {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: #b8700f; margin-bottom: 6px;
}
.req-question p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #4a3b2f; }
.req-question textarea {
  width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid #ddd0ba;
  border-radius: 5px; font-family: inherit; background: #fff; resize: vertical;
}
.req-pageaction { padding-top: 22px; border-top: 1px dashed #e6ddcd; }

.req-foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.req-by {
  flex: 1 1 200px; min-width: 0; padding: 12px 14px; font-size: 15px;
  border: 1px solid #ddd0ba; border-radius: 5px; font-family: inherit; background: #fff;
}
.req-send {
  padding: 13px 26px; background: #ac1f23; color: #fff; border: 0; border-radius: 5px;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .18s ease;
}
.req-send:hover { background: #8e2010; }
.req-send:disabled { opacity: .55; cursor: default; }
.req-status { margin: 14px 0 0; font-size: 14px; min-height: 1em; }
.req-status.is-warn { color: #ac1f23; }
.req-status.is-error { color: #ac1f23; }
.req-status.is-busy { color: #8a7461; }
.req-done { padding: 26px 0; text-align: center; }
.req-done strong { display: block; font-size: 19px; color: #2e7d5b; margin-bottom: 8px; }
.req-done p { margin: 0; font-size: 14px; color: #5b4738; }
@media (max-width: 600px) {
  .req-form-block { padding: 26px 20px; }
  .req-foot { flex-direction: column; align-items: stretch; }
  .req-send { width: 100%; }
}

/* Landing page: the CI Group line sits under the legacy paragraph. */
.lp-ci {
  margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft);
  max-width: 760px;
}
.lp-ci strong { color: var(--primary); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   Landing page: light palette  (Action Plan, Workstream B)
   "Replace the heavy dark brown background and dark shades with
    clean white and soft, lighter color tones."
   The hero and the film band were #2a1512 and #170c0a with white
   text on top, so the grounds alone cannot be flipped - the
   overlay, headings, body copy and chips all move with them.
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.lp-hero { background: #fbf6ee; }
.lp-hero::before {
  /* A light wash instead of the dark one, still heavy enough on the
     left for dark text to sit on the photograph. */
  background:
    linear-gradient(105deg,
      rgba(251, 246, 238, 0.975) 0%,
      rgba(251, 246, 238, 0.94)  42%,
      rgba(251, 246, 238, 0.58)  72%,
      rgba(251, 246, 238, 0.34) 100%),
    var(--hero) center/cover no-repeat;
}
.lp-kicker {
  background: #fdeee9;
  border-color: rgba(172, 31, 35, 0.28);
  color: #8e2010;
}
.lp-hero h1 { color: #1a0f0a; }
.lp-hero h1 em { color: #ac1f23; }
.lp-hero .lead { color: #5b4738; }
.lp-proof li {
  background: #ffffff;
  border: 1px solid #e6ddcd;
  color: #3a2d24;
  box-shadow: 0 1px 2px rgba(60, 30, 10, 0.05);
}
.lp-proof li i { color: #ac1f23; }

/* ── Film band ── */
.lp-film { background: #f5ebda; }
.lp-film::before {
  background: radial-gradient(circle,
    rgba(241, 94, 46, 0.14) 0%, rgba(241, 94, 46, 0) 68%);
}
.lp-film .say h2 { color: #1a0f0a; }
.lp-film .say h2 em { color: #ac1f23; }
.lp-film .say p { color: #5b4738; }
.lp-film .under li {
  color: #4a3b2f;
  background: #ffffff;
  border: 1px solid #e6ddcd;
}
/* The frame still sits on the video itself, so its own shadow softens
   rather than disappears. */
.lp-frame { box-shadow: 0 26px 60px -24px rgba(80, 30, 10, 0.38), 0 0 0 1px #e6ddcd; }

/* ── Landing page: readable note ──
   #8a7f76 on the white card came out at about 3.9:1 at 12.5px — legible
   on a design mock, not on a phone in daylight. */
.lp-note { color: #5b4738; font-size: 13px; }

/* ── Landing page: the sticky bar is no longer brown ──
   The rest of the page moved to light grounds; a #1f1914 strip pinned to
   the bottom was the last dark surface, and it read as a separate site.
   White ground, hairline edge, and the one red button still carries the
   action. Everything inside it was styled for a dark bar, so the text,
   the highlight and the outline buttons all move with it. */
.lp-stick {
  background: #ffffff;
  color: #3a2d24;
  border-top: 1px solid #e6ddcd;
  box-shadow: 0 -10px 30px -12px rgba(80, 30, 10, 0.22);
}
.lp-stick .msg { color: #3a2d24; }
.lp-stick .msg b { color: #ac1f23; }
.lp-stick .ghost {
  border: 1.5px solid #d8c6a8;
  color: #4a3b2f;
  background: #fff;
}
.lp-stick .ghost:hover {
  background: #fdf8f2;
  color: #ac1f23;
  border-color: #ac1f23;
}

/* ── The white card inside the closing band ──
   .lp-close paints white text for the maroon ground it sits on, and the
   card inside inherited it: its h2 was white on white and the note under
   the button was #f3e4da on white. Scoped back, and at a specificity that
   actually beats `.lp-close p` (0,0,1,1) which was quietly winning over
   the plain `.lp-note` class. */
.lp-close .lp-card h2 { color: #1a0f0a; }
.lp-close .lp-card p,
.lp-close .lp-card .sub { color: #5b4738; }
.lp-close .lp-card .lp-note { color: #5b4738; font-size: 13px; }

/* ── Mobile hero video ──
   Desktop keeps the still; the phone gets a short silent loop behind the
   copy. The file carries no audio stream at all, so it is silent even if
   a browser ignores `muted`. The wash above it is eased back on mobile so
   the motion reads, and the stacking order is made explicit because a
   child element otherwise paints on top of ::before. */
.lp-hero__video { display: none; }

@media (max-width: 991px) {
  .lp-hero__video {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }
  .lp-hero::before {
    z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(251, 246, 238, 0.78) 0%,
        rgba(251, 246, 238, 0.90) 38%,
        rgba(251, 246, 238, 0.96) 100%);
  }
  .lp-hero .in { z-index: 2; }
}

/* Someone who asked the system for less motion gets the poster instead. */
@media (prefers-reduced-motion: reduce) {
  .lp-hero__video { display: none !important; }
}


/* ── Legacy stat tiles ──
   The grid asked for five columns but the row has four tiles, so the last
   column sat empty on desktop and the odd tile stranded itself on a row of
   its own at two columns. Columns now match the tiles: four tiles, four
   columns, then two, then two. */
.lp-nums { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .lp-nums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .lp-nums { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════════════════════════════════════════════════════════
   A two-group mega menu
   The theme ships rules for mega-menu-column-3 and -4 only. The go-live
   build drops the Promoters column, which leaves About Us with two
   groups - and a two-group panel matches none of those selectors, so it
   rendered with no width, no grid and the theme's unstyled headings.
   These give two columns the same treatment as three, sized for two
   rather than stretched across the three-column width.
   ══════════════════════════════════════════════════════════════════ */
.header .menu > ul > li .sub-menu.mega-menu-column-2 {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 15px;
}
.header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item {
  flex: 0 0 50%;
  padding: 0 15px;
}

@media (min-width: 992px) {
  .header .menu > ul > li .sub-menu.mega-menu-column-2 {
    max-width: 680px;
    padding: 26px 10px 22px;
    border-top: 3px solid #ac1f23;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 26px 50px -26px rgba(70, 25, 12, 0.38),
                0 2px 10px rgba(70, 25, 12, 0.06);
    align-items: flex-start;
  }
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item {
    padding: 0 28px;
    border-left: 1px solid #efe6d8;
  }
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item:first-child {
    border-left: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item .title {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #ac1f23;
    line-height: 1.2;
    padding: 0 0 9px;
    margin: 0 0 6px;
    border-bottom: 1px solid #efe6d8;
  }
}

@media (max-width: 991px) {
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item {
    flex: 0 0 100%;
    padding: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Subject and outcome lists on the stage pages
   The theme's reset strips bullets and indent from every ul, so a list
   written without its own rules reads as loose lines of text. These
   carry a brand tick instead, which suits a list of subjects better
   than a disc and keeps the pages consistent with each other.
   ══════════════════════════════════════════════════════════════════ */
ul.tick-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}
ul.tick-list > li {
  position: relative;
  padding: 7px 0 7px 30px;
  line-height: 1.55;
  color: #4a3b2f;
  border-bottom: 1px solid #f2ece2;
}
ul.tick-list > li:last-child {
  border-bottom: 0;
}
ul.tick-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 11px;
  height: 6px;
  border-left: 2px solid #ac1f23;
  border-bottom: 2px solid #ac1f23;
  transform: rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════════
   Event cards on the festivals and assemblies pages
   One card per event: its name, the date read from the photographs'
   own EXIF, and a grid of pictures from that day. Four across on a
   desktop, two on a tablet, one on a phone.
   ══════════════════════════════════════════════════════════════════ */
.ev-list {
  display: grid;
  gap: 34px;
}
.ev-card {
  background: #fff;
  border: 1px solid #f0e7da;
  border-radius: 16px;
  padding: 22px 22px 24px;
  box-shadow: 0 18px 40px -30px rgba(70, 25, 12, 0.35);
}
.ev-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2ece2;
}
.ev-head h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  color: #ac1f23;
}
.ev-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b7a6b;
  white-space: nowrap;
}
.ev-date--none {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.ev-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ev-tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #f2e9e2;
  aspect-ratio: 16 / 9;
}
.ev-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.ev-tile:hover img,
.ev-tile:focus-visible img {
  transform: scale(1.06);
}
.ev-tile:focus-visible {
  outline: 3px solid #ac1f23;
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .ev-grid { grid-template-columns: minmax(0, 1fr); }
  .ev-card { padding: 16px 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-tile img { transition: none; }
  .ev-tile:hover img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Header layout
   The theme gave the three columns flex bases of 15% + 85% + 15%, which
   is 115% of a row: .item-right never had room, and the nav list, with
   Brochure as its eighth item, wrapped onto a second line below about
   1170px of viewport. Brochure now lives in .item-right, where it reads
   as the call to action it is, and the columns are a plain auto / fill /
   auto row. Scoped to the desktop breakpoint; the mobile drawer below
   992px is untouched.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .header .row.v-center {
    flex-wrap: nowrap;
    align-items: center;
  }
  /* Bootstrap sets width:100% on every direct child of .row, and a flex item
     whose basis is auto takes its basis from that width. All three header
     columns were therefore asking for the full row; .item-right won and the
     nav was squeezed to its padding. width:auto is what lets a basis of auto
     mean "as wide as the content". */
  .header .item-left {
    flex: 0 0 auto;
    /* A definite width, because the logo image is width:100% and would
       otherwise have nothing to measure against once the column stops
       taking Bootstrap's 100%. */
    width: 150px;
    max-width: 150px;
  }
  .header .item-center {
    flex: 1 1 auto;
    width: auto;
    /* No min-width: 0 here. A flex item defaults to min-width: auto, which
       is what stops this column collapsing under the nav it holds; forcing
       it to 0 let the column shrink to its padding and handed the whole row
       to .item-right. */
    float: none;
  }
  .header .item-right {
    flex: 0 0 auto;
    width: auto;
    align-items: center;
  }

  /* one line, always: the list may not wrap under the logo */
  /* No text-align here. Right-aligning the list also right-aligns the
     inline content inside each item, which moves the static position the
     dropdowns are placed from: the single-column menus opened at the far
     right of the header instead of under their own item. The list is
     pushed right as a flex row instead, which leaves each item's own box
     where the dropdown expects it. */
  .header .menu-main {
    float: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
  }
  /* Each item is the box its own dropdown is measured from. */
  .header .menu > ul > li { position: relative; }
  /* The mega menus are centred on the header, not on their item, so they
     keep their own containing block. */
  .header .menu > ul > li.menu-item-has-children:has(> .mega-menu) { position: static; }
  .header .menu > ul > li {
    margin-left: 13px;
    white-space: nowrap;
  }

  /* The brochure call to action, in the brand's own red rather than the
     theme's navy, and no longer eight inline styles on an <a>. */
  .header .item-right .hdr-brochure {
    background: #ac1f23;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 12px 18px;
    border-radius: 6px;
    margin-left: 18px;
    white-space: nowrap;
    transition: background 0.18s ease;
  }
  .header .item-right .hdr-brochure:hover,
  .header .item-right .hdr-brochure:focus-visible {
    background: #ac1f23;
    color: #fff;
  }
  .header .item-right .hdr-brochure:focus-visible {
    outline: 3px solid #ac1f23;
    outline-offset: 2px;
  }
}

/* Between 992 and 1279 the seven menu words plus the button are wider than
   the row. Tighten the gaps and the type rather than let anything wrap. */
@media (min-width: 992px) and (max-width: 1365px) {
  .header .menu > ul > li { margin-left: 7px; }
  .header .menu > ul > li > a { font-size: 12px; letter-spacing: -0.01em; }
  .header .item-right .hdr-brochure {
    font-size: 11px;
    padding: 10px 13px;
    margin-left: 10px;
  }
  .header .item-left { width: 120px; max-width: 120px; }
}

/* Below the desktop breakpoint the drawer takes over; the button sits
   beside the burger rather than inside the list. */
@media (max-width: 991px) {
  .header .item-right .hdr-brochure {
    background: #ac1f23;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 9px 13px;
    border-radius: 6px;
    margin-right: 14px;
    white-space: nowrap;
  }
}

/* Below 1100 the words still do not fit; one more notch rather than a wrap. */
@media (min-width: 992px) and (max-width: 1099px) {
  .header .menu > ul > li { margin-left: 4px; }
  .header .menu > ul > li > a { font-size: 11px; }
  .header .item-right .hdr-brochure {
    font-size: 10px;
    padding: 9px 10px;
    margin-left: 7px;
  }
  .header .item-left { width: 104px; max-width: 104px; }
}

/* ══════════════════════════════════════════════════════════════════
   Testimonials: the frame the parent films drop into
   ══════════════════════════════════════════════════════════════════ */
.tm-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tm-slot { margin: 0; }
.tm-frame {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 16px;
  border: 1px dashed #e0d0bd;
  background:
    radial-gradient(120% 120% at 50% 0%, #fffdfa 0%, #fbf4ec 60%, #f7ece1 100%);
  display: grid;
  place-items: center;
}
.tm-play {
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 26px -16px rgba(70,25,12,.6);
  display: block; position: relative;
}
.tm-play::after {
  content: ""; position: absolute; left: 52%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 15px solid #ac1f23;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.tm-slot figcaption {
  margin-top: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #a08d7c; text-align: center;
}
.tm-note {
  border-left: 3px solid #ac1f23;
  background: #fdf8f2;
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}
.tm-note p { color: #5c4b3e; line-height: 1.6; }
.tm-note a { color: #ac1f23; font-weight: 600; }
.tm-note a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .tm-wall { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   Gallery
   One run of pictures, scrolled top to bottom. No sections, no counts
   and no rail along the top: the picker in the corner is the only
   control, and it names whichever event is showing.
   ══════════════════════════════════════════════════════════════════ */
.gal-wrap { padding: 56px 0 72px; }
.gal-lede { font-size: 17px; line-height: 1.65; color: #5c4b3e; max-width: 62ch; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 168px;
  grid-auto-flow: dense;
  gap: 14px;
}
.gal-tile {
  display: block; position: relative; overflow: hidden;
  border-radius: 16px; background: #f3ece4;
  box-shadow: 0 16px 34px -26px rgba(70,25,12,.6);
}
.gal-tile[hidden] { display: none; }
.gal-tile:nth-child(9n + 1) { grid-column: span 2; grid-row: span 2; }
.gal-tile:nth-child(9n + 6) { grid-column: span 2; }
.gal-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.gal-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(40,14,6,.32));
  opacity: 0; transition: opacity .35s ease;
}
.gal-tile:hover img, .gal-tile:focus-visible img { transform: scale(1.055); }
.gal-tile:hover::after { opacity: 1; }
.gal-tile:focus-visible { outline: 3px solid #ac1f23; outline-offset: 3px; }

.gal-videos { margin-top: 56px; }
.gal-videos[hidden] { display: none; }
.gal-vidhead {
  font-size: 20px; color: #241c16; letter-spacing: -.01em;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid #f1e7da;
}
.gal-vidgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.gal-vid { margin: 0; }
.gal-vid video {
  width: 100%; display: block; border-radius: 16px; background: #000;
  aspect-ratio: 16/10; object-fit: cover;
  box-shadow: 0 16px 34px -26px rgba(70,25,12,.6);
}
.gal-vid figcaption { margin-top: 10px; font-size: 13px; color: #7d6d5e; }

@media (max-width: 1199px) { .gal-grid { grid-auto-rows: 148px; } }
@media (max-width: 991px) {
  .gal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 158px; }
  .gal-vidgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575px) {
  .gal-wrap { padding: 36px 0 56px; }
  .gal-grid { grid-auto-rows: 116px; gap: 9px; }
  .gal-vidgrid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gal-tile img { transition: none; }
  .gal-tile:hover img { transform: none; }
}

/* ── the floating picker, the gallery's only control ─────────────── */
.gal-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 998;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 40px);
  border: 0; background: #ac1f23; color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; line-height: 1;
  padding: 13px 19px 13px 16px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 16px 34px -14px rgba(172,31,35,.75), 0 2px 8px rgba(40,14,6,.16);
  transition: background .2s ease, transform .2s ease;
}
.gal-fab__t {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gal-fab:hover { background: #ac1f23; transform: translateY(-2px); }
.gal-fab:focus-visible { outline: 3px solid #ac1f23; outline-offset: 3px; }
.gal-fab__i { width: 15px; height: 11px; position: relative; display: block; flex: 0 0 auto; }
.gal-fab__i::before, .gal-fab__i::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: #fff; border-radius: 2px;
}
.gal-fab__i::before { top: 0; }
.gal-fab__i::after { bottom: 0; right: 5px; }
.gal-fab[aria-expanded="true"], .gal-fab.is-filtered { background: #ac1f23; }

.gal-pick {
  position: fixed; left: 20px; bottom: 74px; z-index: 998;
  width: min(304px, calc(100vw - 40px));
  max-height: min(58vh, 440px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #efe4d6; border-radius: 16px;
  box-shadow: 0 30px 60px -26px rgba(40,14,6,.45), 0 4px 14px rgba(40,14,6,.08);
  overflow: hidden;
}
.gal-pick[hidden] { display: none; }
.gal-pick__head {
  padding: 15px 18px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #a08d7c;
  border-bottom: 1px solid #f4ece1;
}
.gal-pick__list { overflow-y: auto; padding: 7px; }
.gal-pick__row {
  appearance: none; border: 0; background: transparent; width: 100%;
  display: block; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #4a3b2f;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.gal-pick__row:hover { background: #fdf8f2; color: #ac1f23; }
.gal-pick__row.is-on { background: #ac1f23; color: #fff; }
.gal-pick__row:focus-visible { outline: 2px solid #ac1f23; outline-offset: -2px; }

@media (max-width: 575px) {
  .gal-fab { left: 14px; bottom: 14px; padding: 12px 16px 12px 14px; font-size: 12px; }
  .gal-fab__t { max-width: 140px; }
  .gal-pick { left: 14px; bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-fab { transition: none; }
  .gal-fab:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   The two calls to action in the orange admissions box
   They were two inline-flex anchors with a non-breaking space between
   them. At any width where the pair wraps, that space carries no
   vertical room and the buttons sit edge to edge. A flex row with a
   real gap keeps them apart on one line and on two.
   ══════════════════════════════════════════════════════════════════ */
.ob-acts {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px;
}
.ob-acts .rts-theme-btn {
  flex: 0 1 auto; padding: 13px 20px; font-size: 14px;
}
.orange-box .ob-acts .rts-theme-btn { background: #ac1f23; }
@media (max-width: 991px) {
  .ob-acts .rts-theme-btn { flex: 1 1 180px; }
}

/* ══════════════════════════════════════════════════════════════════
   Page banner headings
   56px was fixed, so a long title ran to the banner's edges and, on a
   phone, out of them. It now scales with the viewport and sits inside
   the same gutter as the rest of the page.
   ══════════════════════════════════════════════════════════════════ */
.pages-title {
  padding-left: 20px; padding-right: 20px;
}
.pages-title h1 {
  font-size: clamp(26px, 4.4vw, 52px);
  line-height: 1.14;
  margin-bottom: 14px;
  text-wrap: balance;
  max-width: 20ch;
  margin-left: auto; margin-right: auto;
}
.pages-title img { max-width: 110px; height: auto; }
@media (max-width: 767px) {
  .pages-banner-area { height: 228px; }
  .pages-title img { max-width: 76px; }
  .pages-title h1 { margin-bottom: 10px; }
  ul.breadcrumb { padding: 9px 18px; }
  ul.breadcrumb li { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   The two floating controls, taken down a size
   Apply Now and WhatsApp sat over the content at full width on a
   laptop. Smaller, they leave the page readable without losing the
   target size a finger needs.
   ══════════════════════════════════════════════════════════════════ */
.apply-tab {
  font-size: 11px; letter-spacing: .07em;
  padding: 13px 7px; gap: 7px;
  box-shadow: -3px 4px 14px rgba(31,25,20,.24);
}
.apply-tab:hover, .apply-tab:focus-visible { padding-right: 10px; }
.apply-tab i { font-size: 12px; }
.wa-float {
  width: 44px; height: 44px; font-size: 21px; bottom: 62px; right: 16px;
  box-shadow: 0 6px 18px rgba(37,211,102,.38);
}
.wa-float::after { inset: -5px; }
@media (max-width: 767px) {
  .apply-tab { padding: 10px 15px; font-size: 12px; right: 74px; }
  .wa-float { width: 44px; height: 44px; bottom: 16px; right: 16px; font-size: 21px; }
}

/* ══════════════════════════════════════════════════════════════════
   The header below 992px
   Two faults, both from inherited values the mobile rules never set.
   The brochure link took a 40px line-height, so 12px of text sat in
   the middle of a 58px red block and read as an empty rectangle. And
   the logo kept its desktop height, standing 33px outside a 64px bar
   and colliding with the menu beside it.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .header .item-right .hdr-brochure {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 10px 14px;
    letter-spacing: .03em;
  }
}
@media (max-width: 575px) {
  .header .item-right .hdr-brochure {
    font-size: 11px; padding: 9px 11px; margin-right: 10px;
  }
}
@media (max-width: 400px) {
  .header .item-right .hdr-brochure { display: none; }
}
@media (max-width: 991px) {
  /* with a smaller logo the bar collapsed to 36px; keep a comfortable
     tap target for the hamburger and the brochure link */
  .header .row.v-center { min-height: 56px; }
}

/* ══════════════════════════════════════════════════════════════════
   Gallery sections
   The year is read top to bottom, one event after another. The picker
   in the corner only scrolls the page here, so each section needs a
   heading you can land on and enough room above it to breathe. The
   scroll margin clears the header, which turns fixed as you scroll and
   would otherwise cover whatever you just jumped to.
   ══════════════════════════════════════════════════════════════════ */
.gal-secs { margin-top: 44px; }
.gal-sec {
  margin-bottom: 58px;
  scroll-margin-top: calc(var(--hdr-h, 68px) + 26px);
}
.gal-sec:last-child { margin-bottom: 0; }

.gal-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 11px; margin-bottom: 18px;
  border-bottom: 1px solid #f1e7da;
}
.gal-title {
  font-size: 21px; line-height: 1.2; color: #241c16;
  letter-spacing: -.01em; margin: 0; font-weight: 600;
}
.gal-when {
  margin-left: auto; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #a08d7c; white-space: nowrap;
}
.gal-title--vid { margin-bottom: 18px; padding-bottom: 11px;
  border-bottom: 1px solid #f1e7da; }

/* The mosaic only makes sense once a section has pictures to spare;
   a three-photograph event stays an even row. */
.gal-grid > .gal-tile { grid-column: span 1; grid-row: span 1; }
.gal-grid:has(> :nth-child(5)) > .gal-tile:first-child {
  grid-column: span 2; grid-row: span 2;
}
/* The sixth tile used to span two columns and one row: a 618x168
   strip, 3.68 to 1, cut out of a 720x405 photograph that is 1.78
   to 1. Fifty-two per cent of its height never appeared, and on
   campus-6 that took a face with it. It spans two rows as well
   now, so the box is the shape of the photograph and the only
   crop is the one the cropper made. */
.gal-grid:has(> :nth-child(8)) > .gal-tile:nth-child(6) {
  grid-column: span 2; grid-row: span 2;
}
@media (max-width: 575px) {
  .gal-secs { margin-top: 30px; }
  .gal-sec { margin-bottom: 40px; }
  .gal-head { gap: 10px; margin-bottom: 13px; }
  .gal-title { font-size: 17px; }
  .gal-when { font-size: 10px; letter-spacing: .07em; }
  .gal-grid:has(> :nth-child(5)) > .gal-tile:first-child { grid-row: span 2; }
}

/* The picker shares the bottom edge with Apply Now and WhatsApp. On a
   phone a long event name grew it into them, so it sits on its own line
   above the pair instead of beside them. */
@media (max-width: 767px) {
  .gal-fab { bottom: 70px; left: 14px; }
  .gal-fab__t { max-width: 44vw; }
  .gal-pick { bottom: 118px; }
}

/* ══════════════════════════════════════════════════════════════════
   Mandatory Public Disclosure
   The page is the school's filing and nothing else, so the tables are
   the design: a serial column that stays narrow, a wide label, and the
   detail or document link held to the right. Read on a phone the rows
   still have to be legible, so the table scrolls inside its own box
   rather than squeezing three columns into 360px.
   ══════════════════════════════════════════════════════════════════ */
.mpd { padding-top: 48px; }
.mpd-file {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 0 0 40px;
}
.mpd-dl {
  font-size: 14px; font-weight: 600; color: #ac1f23;
  border-bottom: 1px solid #e2c4c4; padding-bottom: 2px;
}
.mpd-dl:hover { color: #ac1f23; border-bottom-color: #ac1f23; }

.mpd-h {
  display: flex; align-items: baseline; gap: 13px;
  font-size: 21px; font-weight: 600; color: #241c16;
  letter-spacing: -.01em; margin: 46px 0 16px;
}
.mpd-h:first-of-type { margin-top: 0; }
.mpd-k {
  flex: 0 0 auto;
  width: 29px; height: 29px; border-radius: 8px;
  background: #ac1f23; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 29px; text-align: center;
  position: relative; top: -2px;
}

.mpd .table-responsive { overflow-x: auto; }
.mpd-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  min-width: 560px;
}
.mpd-table th, .mpd-table td {
  border: 1px solid #efe4d6; padding: 11px 14px;
  text-align: left; vertical-align: top; line-height: 1.5;
}
.mpd-table thead th {
  background: #fdf8f2; color: #6d5a49;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.mpd-table tbody tr:nth-child(even) { background: #fdfbf8; }
.mpd-table td:last-child { width: 28%; }
.mpd-sn { width: 62px; color: #a08d7c; font-variant-numeric: tabular-nums; }
.mpd-sub td:nth-child(2) { padding-left: 34px; color: #5c4b3e; }
.mpd-sub td:nth-child(2)::before {
  content: "\2014"; color: #c6b4a3; margin-left: -18px; margin-right: 8px;
}

.mpd-doc { color: #ac1f23; font-weight: 600; }
.mpd-doc:hover { color: #ac1f23; text-decoration: underline !important; }
.mpd-na { color: #a08d7c; font-weight: 600; }

.mpd-note {
  background: #fdf8f2; border-left: 4px solid #f7a51b;
  padding: 15px 19px; margin: 18px 0 0;
  font-size: 14px; line-height: 1.65; color: #5c4b3e;
}
.mpd-note strong { color: #241c16; }

@media (max-width: 767px) {
  .mpd { padding-top: 34px; }
  .mpd-h { font-size: 18px; margin: 36px 0 13px; }
  .mpd-file { gap: 14px; margin-bottom: 30px; }
}

/* ══════════════════════════════════════════════════════════════════
   Important Documents
   Each card is a file, so the card is the link: the document's name as
   the filing words it, and under it the name of the file that actually
   opens. Nothing on this page is a status - a document is either here
   with a link or it is not on the page at all.
   ══════════════════════════════════════════════════════════════════ */
.docs { padding-top: 48px; }
.doc-lede { font-size: 17px; line-height: 1.65; color: #5c4b3e; margin: 0 0 22px; }
.doc-file-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 8px; }
.doc-dl {
  font-size: 14px; font-weight: 600; color: #ac1f23;
  border-bottom: 1px solid #e2c4c4; padding-bottom: 2px;
}
.doc-dl:hover { color: #ac1f23; border-bottom-color: #ac1f23; }

.doc-h {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #a08d7c;
  margin: 46px 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid #f1e7da;
}

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

.doc-card {
  display: flex; align-items: center; gap: 15px;
  background: #fff; border: 1px solid #efe4d6; border-radius: 14px;
  padding: 17px 18px; text-decoration: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.doc-card:hover {
  border-color: #e2c4c4; transform: translateY(-2px);
  box-shadow: 0 16px 34px -24px rgba(70, 25, 12, .55);
}
.doc-card:focus-visible { outline: 3px solid #ac1f23; outline-offset: 3px; }

/* a sheet of paper with its corner turned, drawn rather than fetched */
.doc-ic {
  flex: 0 0 auto; position: relative;
  width: 30px; height: 38px; border-radius: 3px 9px 3px 3px;
  background: #fdf0ef; border: 1.5px solid #e2b9b9;
}
.doc-ic::before {
  content: ""; position: absolute; top: -1.5px; right: -1.5px;
  width: 11px; height: 11px;
  background: #fff; border-left: 1.5px solid #e2b9b9; border-bottom: 1.5px solid #e2b9b9;
  border-radius: 0 0 0 3px;
}
.doc-ic::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 20px; height: 1.5px;
  background: #e2b9b9;
  box-shadow: 0 5px 0 #e2b9b9, 0 -7px 0 #e2b9b9;
}
.doc-ic--play {
  border-radius: 7px; height: 30px; width: 40px;
  background: #ac1f23; border-color: #ac1f23;
}
.doc-ic--play::before { display: none; }
.doc-ic--play::after {
  content: ""; left: 50%; top: 50%; right: auto; height: 0; width: 0;
  transform: translate(-36%, -50%);
  border-left: 11px solid #fff; border-top: 7px solid transparent;
  border-bottom: 7px solid transparent; background: none; box-shadow: none;
}

.doc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-name {
  font-size: 15px; font-weight: 600; line-height: 1.35; color: #241c16;
}
.doc-card:hover .doc-name { color: #ac1f23; }
.doc-file {
  font-size: 12px; color: #a08d7c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-go {
  flex: 0 0 auto; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid #c6b4a3; border-top: 2px solid #c6b4a3;
  transform: rotate(45deg); transition: border-color .2s ease, transform .2s ease;
}
.doc-card:hover .doc-go { border-color: #ac1f23; transform: rotate(45deg) translate(2px, -2px); }

@media (max-width: 767px) {
  .docs { padding-top: 34px; }
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-h { margin: 34px 0 13px; }
  .doc-card { padding: 14px 15px; gap: 13px; }
  .doc-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-card, .doc-go { transition: none; }
  .doc-card:hover { transform: none; }
}
@media (max-width: 767px) {
  /* on a narrow card the file name was cut mid-word; let it wrap instead */
  .doc-file { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
}

/* ══════════════════════════════════════════════════════════════════
   The four stage pages
   One spine across all four so a parent reading Primary already knows
   how to read Middle: an opening that puts the claim beside a face, the
   rail that says where you are among the four, a band of photographs
   from that stage, the stage's own content in whatever shape it wants,
   how it is assessed, and where it leads. The rail and the closing pair
   are fixed in height on purpose - they are the same on every page, so
   they should land in the same place on every page.
   ══════════════════════════════════════════════════════════════════ */

/* ── opening ─────────────────────────────────────────────────────── */
.st-open { padding: 58px 0 0; }
.st-open__in {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px; align-items: center;
}
.st-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.st-eyebrow__b {
  background: #ac1f23; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; line-height: 1;
}
.st-eyebrow__g {
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #a08d7c;
}
.st-head {
  font-family: "Poppins", sans-serif;
  font-size: clamp(27px, 3.1vw, 43px); line-height: 1.14; font-weight: 600;
  letter-spacing: -.022em; color: #241c16; margin: 0 0 22px; text-wrap: balance;
}
.st-head em { font-style: normal; color: #ac1f23; }
.st-lede { font-size: 17px; line-height: 1.68; color: #5c4b3e; margin: 0; max-width: 54ch; }

.st-open__fig { margin: 0; position: relative; }
.st-open__fig img {
  width: 100%; height: auto; display: block;
  border-radius: 22px 22px 90px 22px;
  box-shadow: 0 34px 70px -40px rgba(70, 25, 12, .65);
}
.st-open__fig figcaption,
.st-split__fig figcaption,
.st-tile figcaption {
  margin-top: 11px; font-size: 12px; line-height: 1.5; color: #a08d7c;
}

/* ── the rail of four ────────────────────────────────────────────── */
.st-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 58px 0 0; padding: 0 0 2px;
}
.st-rail__i {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  min-height: 78px; padding: 15px 18px;
  background: #fff; border: 1px solid #efe4d6; border-top: 3px solid #efe4d6;
  border-radius: 4px 4px 14px 14px; text-decoration: none !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.st-rail__i:hover { border-color: #e2c4c4; border-top-color: #e2c4c4; transform: translateY(-2px); }
.st-rail__i.is-here {
  background: #fdf8f2; border-color: #e2c4c4; border-top-color: #ac1f23;
}
.st-rail__i:focus-visible { outline: 3px solid #ac1f23; outline-offset: 3px; }
.st-rail__n { font-size: 15px; font-weight: 600; color: #241c16; line-height: 1.25; }
.st-rail__i.is-here .st-rail__n { color: #ac1f23; }
.st-rail__g {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #a08d7c;
}

/* ── section furniture ───────────────────────────────────────────── */
.st-sec { padding: 66px 0; }
.st-sec--tint { background: #fdf8f2; }
.st-h {
  font-family: "Poppins", sans-serif;
  font-size: clamp(21px, 2.1vw, 29px); font-weight: 600; line-height: 1.2;
  letter-spacing: -.018em; color: #241c16; margin: 0 0 30px; text-wrap: balance;
}
.st-h--tight { margin-bottom: 18px; }
.st-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: #ac1f23; margin: 0 0 13px;
}
.st-body { font-size: 17px; line-height: 1.72; color: #5c4b3e; margin: 0; max-width: 56ch; }

/* ── the photograph band ───────────────────────────────
   Five tiles in six columns, placed so the grid closes: a wide lead
   with two stacked beside it, and two below. Every cell has a fixed
   height and the pictures cover it, so a portrait among landscapes
   cannot punch a hole in the row. Captions sit on the picture rather
   than under it, which keeps the tiles level whatever a caption's
   length. */
.st-mosaic {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 232px; gap: 20px;
}
.st-tile {
  margin: 0; position: relative; overflow: hidden;
  border-radius: 18px; background: #f3ece4;
  box-shadow: 0 20px 44px -32px rgba(70, 25, 12, .6);
}
.st-tile--lead { grid-column: span 4; grid-row: span 2; }
.st-tile--side { grid-column: span 2; grid-row: span 1; }
.st-tile--foot { grid-column: span 3; grid-row: span 2; }
.st-tile img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.st-tile:hover img { transform: scale(1.04); }
.st-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 34px 18px 15px;
  font-size: 13px; line-height: 1.45; color: #fff;
  background: linear-gradient(180deg, rgba(32,12,5,0), rgba(32,12,5,.84));
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.st-tile--side figcaption { padding-top: 26px; font-size: 12px; }

/* ── the stage's own content ─────────────────────────────────────── */
.st-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-card {
  background: #fff; border: 1px solid #efe4d6; border-radius: 16px; padding: 24px 22px;
}
.st-card__h { font-size: 16px; font-weight: 600; color: #ac1f23; margin: 0 0 9px; line-height: 1.3; }
.st-card p { font-size: 15px; line-height: 1.62; color: #5c4b3e; margin: 0; text-align: left; }

.st-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-col { background: #fff; border: 1px solid #efe4d6; border-radius: 18px; padding: 28px 28px 24px; }
.st-col__h {
  font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: #ac1f23; margin: 0 0 16px; padding-bottom: 13px; border-bottom: 1px solid #f4ece1;
}

.st-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-path { background: #fff; border: 1px solid #efe4d6; border-radius: 18px; padding: 28px; }
.st-path__h { font-size: 16px; font-weight: 600; color: #241c16; margin: 0 0 18px; line-height: 1.35; }
.st-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.st-chips li {
  background: #fdf0ef; border: 1px solid #e9cdcd; color: #ac1f23;
  font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 999px;
}

/* ── assessment, text against a photograph ───────────────────────── */
.st-split {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 54px; align-items: center;
}
.st-split__fig { margin: 0; }
.st-split__fig img {
  width: 100%; height: auto; display: block;
  border-radius: 22px 90px 22px 22px;
  box-shadow: 0 30px 62px -40px rgba(70, 25, 12, .6);
}

/* ── where it leads ──────────────────────────────────────────────── */
.st-end { padding-top: 0; }
.st-end__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 20px; }
.st-end__in:only-child { grid-template-columns: minmax(0, 1fr); }
.st-next {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  position: relative; min-height: 172px; padding: 30px 32px;
  background: #fdf8f2; border: 1px solid #efe4d6; border-radius: 20px;
  text-decoration: none !important;
  transition: border-color .2s ease, transform .2s ease;
}
.st-next:hover { border-color: #e2c4c4; transform: translateY(-2px); }
.st-next:focus-visible { outline: 3px solid #ac1f23; outline-offset: 3px; }
.st-next__k {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: #a08d7c;
}
.st-next__n {
  font-family: "Poppins", sans-serif; font-size: 25px; font-weight: 600;
  color: #241c16; line-height: 1.15; letter-spacing: -.015em;
}
.st-next:hover .st-next__n { color: #ac1f23; }
.st-next__g { font-size: 13px; color: #8a7765; }
.st-next__go {
  position: absolute; right: 30px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid #c6b4a3; border-top: 2px solid #c6b4a3;
  transform: translateY(-50%) rotate(45deg); transition: border-color .2s ease;
}
.st-next:hover .st-next__go { border-color: #ac1f23; }

.st-cta {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 172px; padding: 32px 36px;
  background: #ac1f23; border-radius: 20px; color: #fff;
  background-image: url(../images/footer-bird.png);
  background-repeat: no-repeat; background-position: right -30px bottom -20px;
  background-size: 190px auto;
}
.st-cta__h {
  font-family: "Poppins", sans-serif; font-size: 23px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.015em; margin: 0 0 9px; color: #fff;
}
.st-cta__p { font-size: 15px; line-height: 1.6; color: #f6d8d9; margin: 0 0 18px; max-width: 46ch; }
.st-cta__a { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0; }
.st-cta .rts-theme-btn { background: #fff; color: #ac1f23; }
.st-cta .rts-theme-btn::before { background: #f7a51b; }
.st-cta .rts-theme-btn:hover { color: #241c16; }
.st-cta__alt {
  color: #fff; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 2px;
}
.st-cta__alt:hover { color: #fff; border-bottom-color: #fff; }

/* ── narrower ────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .st-open__in { gap: 38px; }
  .st-split { gap: 38px; }
  .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .st-open { padding-top: 44px; }
  .st-open__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .st-open__fig { order: -1; }
  .st-open__fig img { border-radius: 18px 18px 64px 18px; max-height: 460px; object-fit: cover; }
  .st-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; }
  .st-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .st-split__fig { order: -1; }
  .st-split__fig img { border-radius: 18px 64px 18px 18px; }
  .st-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .st-tile--lead { grid-column: span 4; grid-row: span 2; }
  .st-tile--side { grid-column: span 2; grid-row: span 1; }
  .st-tile--foot { grid-column: span 2; grid-row: span 2; }
  .st-end__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .st-sec { padding: 46px 0; }
  .st-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 13px; }
  .st-tile--lead { grid-column: span 2; grid-row: span 2; }
  .st-tile--side { grid-column: span 1; grid-row: span 1; }
  .st-tile--foot { grid-column: span 1; grid-row: span 2; }
  .st-cards, .st-cols, .st-paths { grid-template-columns: minmax(0, 1fr); }
  .st-rail { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .st-rail__i { min-height: 0; flex-direction: row; align-items: baseline; gap: 10px; }
  .st-col, .st-path { padding: 22px 20px; }
  .st-cta { padding: 26px 24px; background-size: 140px auto; }
  .st-next { min-height: 0; padding: 24px 26px; }
  .st-cta, .st-next { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .st-rail__i, .st-next, .st-next__go { transition: none; }
  .st-rail__i:hover, .st-next:hover { transform: none; }
}
@media (max-width: 767px) {
  /* a landscape photograph in a one-column, two-row cell becomes a narrow
     portrait strip; the lower pair take the full width instead */
  .st-tile--foot { grid-column: span 2; grid-row: span 2; }
}

/* ══════════════════════════════════════════════════════════════════
   Programme pages
   The facts strip under the opening had no stylesheet at all, so its
   label and its value ran together as one word. It is three facts in a
   row, on their own rule, with the label above the line it explains.
   ══════════════════════════════════════════════════════════════════ */
.pg-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin-top: 34px; padding-top: 26px;
  border-top: 1px solid #efe4d6;
}
.pg-fact { display: flex; flex-direction: column; gap: 5px; }
.pg-fact b {
  font-family: "Poppins", sans-serif;
  font-size: 15px; font-weight: 600; color: #ac1f23; line-height: 1.25;
}
.pg-fact span { font-size: 13px; line-height: 1.5; color: #8a7765; }

/* the second split band mirrors the first, so the page alternates */
.st-split--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.st-split--flip .st-split__fig img { border-radius: 22px 22px 22px 90px; }

.pg-lede { margin-bottom: 34px; max-width: 64ch; }

/* ── the three strands ───────────────────────────────────────────── */
.pg-strands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pg-strand {
  background: #fff; border: 1px solid #efe4d6; border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column;
}
.pg-strand__img { height: 190px; overflow: hidden; }
.pg-strand__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-strand__h {
  font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 600;
  color: #241c16; margin: 22px 24px 8px; line-height: 1.3;
}
.pg-strand p {
  font-size: 15px; line-height: 1.62; color: #5c4b3e;
  margin: 0 24px 24px; text-align: left;
}

/* ── We Care, one activity to a row ──────────────────────────────── */
.pg-cares { display: grid; gap: 18px; }
.pg-care {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  background: #fff; border: 1px solid #efe4d6; border-radius: 20px; overflow: hidden;
}
.pg-care__img { margin: 0; height: 100%; min-height: 190px; overflow: hidden; }
.pg-care__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-care__txt { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.pg-care__h {
  font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 600;
  color: #ac1f23; margin: 0 0 9px; line-height: 1.3;
}
.pg-care p { font-size: 15px; line-height: 1.68; color: #5c4b3e; margin: 0; text-align: left; }

.st-end__in--solo { grid-template-columns: minmax(0, 1fr) !important; }

@media (max-width: 1199px) {
  .pg-strands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pg-care { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .st-split--flip { grid-template-columns: minmax(0, 1fr); }
  .st-split--flip .st-split__fig { order: -1; }
  .st-split--flip .st-split__fig img { border-radius: 18px 18px 18px 64px; }
  .pg-strands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-care { grid-template-columns: 210px minmax(0, 1fr); }
  .pg-care__txt { padding: 22px 24px; }
}
@media (max-width: 767px) {
  .pg-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 26px; padding-top: 20px; }
  .pg-strands { grid-template-columns: minmax(0, 1fr); }
  .pg-strand__img { height: 200px; }
  .pg-care { grid-template-columns: minmax(0, 1fr); }
  .pg-care__img { min-height: 0; height: 200px; }
}
/* the short list under each section's paragraph, so the text column
   carries the height of the photograph beside it rather than leaving
   air under four lines */
.pg-points { margin-top: 20px; margin-bottom: 0; }
.pg-points li { font-size: 15px; }
.pg-care__k {
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #a08d7c; margin: 0 0 7px;
}
/* the split photographs sat taller than the text beside them; 16:9 closes
   most of that difference without cropping the picture hard */
.st-split__fig img { aspect-ratio: 16 / 9; object-fit: cover; }
/* the opening photograph stood far taller than the text beside it, which
   is where the white space was coming from; it is now capped in height
   and crops rather than stretches */
.st-open__fig img { height: clamp(320px, 31vw, 430px); object-fit: cover; aspect-ratio: auto; }

/* ══════════════════════════════════════════════════════════════════
   Aerobay
   The room is the subject, so the page opens on the room: a full-width
   photograph with the title sitting on it, before a single paragraph.
   Everything after that is the shape of the work itself - the fields it
   opens, a build from drawing to moving mechanism, the room in detail,
   and the satellite hanging in it.
   ══════════════════════════════════════════════════════════════════ */
.ab-stage {
  position: relative;
  min-height: clamp(360px, 52vw, 620px);
  display: flex; align-items: flex-end;
  overflow: hidden; background: #1b1410;
}
.ab-stage__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.ab-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* only the lower third is darkened, so the room stays the picture and
     the title still has something to sit on */
  background: linear-gradient(180deg, rgba(20,8,3,0) 0%, rgba(20,8,3,0) 34%,
                                       rgba(20,8,3,.52) 68%, rgba(20,8,3,.88) 100%);
}
.ab-stage__in { position: relative; z-index: 2; width: 100%; padding: 0 0 clamp(34px, 5vw, 64px); }
.ab-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #f7a51b; margin: 0 0 14px;
}
.ab-title, h1.ab-title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(30px, 4.6vw, 62px); line-height: 1.06; font-weight: 600;
  letter-spacing: -.028em; color: #fff; margin: 0; max-width: 18ch;
  text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.45);
}

/* ── what it is ──────────────────────────────────────────────────── */
.ab-intro { padding-top: 62px; }
.ab-intro__in { max-width: 860px; }
.ab-lede {
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.62; color: #3a2e25;
  margin: 0 0 20px; letter-spacing: -.004em;
}
.ab-lede--sm { font-size: 17px; color: #5c4b3e; margin-bottom: 0; }
.ab-facts { margin-top: 38px; }

/* ── the fields ──────────────────────────────────────────────────── */
.ab-fields {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: #efe4d6; border: 1px solid #efe4d6; border-radius: 20px;
  overflow: hidden;
}
.ab-field { background: #fff; padding: 30px 28px 32px; }
.ab-field__h {
  font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600;
  color: #ac1f23; margin: 0 0 10px; line-height: 1.25;
}
.ab-field p { font-size: 15px; line-height: 1.64; color: #5c4b3e; margin: 0; text-align: left; }

/* ── a build, step by step ───────────────────────────────────────── */
.ab-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.ab-step {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #efe4d6; border-radius: 20px; overflow: hidden;
}
.ab-step__fig { margin: 0; height: 300px; overflow: hidden; }
.ab-step__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-step__txt { padding: 26px 28px 28px; position: relative; }
.ab-step__n {
  display: block;
  font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; color: #d8c3ae; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.ab-step__h {
  font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 600;
  color: #241c16; margin: 0 0 10px; line-height: 1.25; letter-spacing: -.012em;
}
.ab-step p { font-size: 15px; line-height: 1.66; color: #5c4b3e; margin: 0; text-align: left; }
.ab-step__cap {
  margin-top: 14px !important; padding-top: 13px;
  border-top: 1px solid #f4ece1;
  font-size: 12px !important; color: #a08d7c !important; line-height: 1.5 !important;
}

/* ── the room in detail ──────────────────────────────────────────── */
.ab-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ab-detail { margin: 0; }
.ab-detail img {
  width: 100%; height: clamp(300px, 34vw, 460px); object-fit: cover; display: block;
  border-radius: 18px; box-shadow: 0 22px 46px -32px rgba(70,25,12,.6);
}
.ab-detail figcaption { margin-top: 11px; font-size: 12px; line-height: 1.5; color: #a08d7c; }

/* ── the satellite ───────────────────────────────────────────────── */
.ab-sat {
  position: relative;
  min-height: clamp(340px, 44vw, 540px);
  display: flex; align-items: center; overflow: hidden; background: #140a16;
}
.ab-sat__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.ab-sat::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(14,6,16,.92) 0%, rgba(14,6,16,.74) 40%,
                                      rgba(14,6,16,.10) 78%, rgba(14,6,16,0) 100%);
}
.ab-sat__in { position: relative; z-index: 2; width: 100%; }
.ab-sat__k {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #f7a51b; margin: 0 0 12px;
}
.ab-sat__h {
  font-family: "Poppins", sans-serif; font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 600; letter-spacing: .02em; color: #fff; margin: 0 0 16px; line-height: 1;
}
.ab-sat__p {
  font-size: 17px; line-height: 1.68; color: #e7dbe4; margin: 0; max-width: 46ch;
}

/* ── the film ────────────────────────────────────────────────────── */
.ab-film {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 46px; align-items: center;
}
.ab-film__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 26px 54px -34px rgba(70,25,12,.65);
}
.ab-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1199px) {
  .ab-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-film { gap: 32px; }
}
@media (max-width: 991px) {
  .ab-steps { grid-template-columns: minmax(0, 1fr); }
  .ab-step__fig { height: 280px; }
  .ab-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ab-detail img { height: clamp(220px, 30vw, 320px); }
  .ab-film { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-film__txt { order: -1; }
}
@media (max-width: 767px) {
  .ab-intro { padding-top: 42px; }
  .ab-fields { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .ab-field { padding: 24px 22px 26px; }
  .ab-details { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ab-detail img { height: 340px; }
  .ab-step__fig { height: 230px; }
  .ab-step__txt { padding: 22px 22px 24px; }
  .ab-sat__p { max-width: none; }
}
/* ── how the lab grows with the student ─────────────────────────── */
.ab-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ab-band {
  position: relative; padding: 28px 26px 30px;
  background: #fff; border: 1px solid #efe4d6; border-radius: 18px;
  border-top: 3px solid #f7a51b;
}
.ab-band__g {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #a08d7c; margin-bottom: 9px;
}
.ab-band__h {
  font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 600;
  color: #ac1f23; margin: 0 0 10px; line-height: 1.28;
}
.ab-band p { font-size: 15px; line-height: 1.64; color: #5c4b3e; margin: 0; text-align: left; }
@media (max-width: 991px) { .ab-bands { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } }
@media (max-width: 767px) { .ab-bands { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════════════════════════════════════════
   Mega menu columns that will not wrap
   The columns were sized flex: 0 0 33%, and a flex item will not shrink
   below its own min-content however small its basis. "Festivals and
   Events - Pre-Primary" is wider than a third of the panel, so the row
   overflowed and the third column wrapped on top of the first - which
   is why Our People Say was sitting across Special Assemblies.
   ══════════════════════════════════════════════════════════════════ */
.header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
.header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item {
  flex: 1 1 0;
  min-width: 0;
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
  white-space: normal;
  overflow-wrap: break-word;
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item .title {
  white-space: normal;
}
/* a wider panel, so three columns of real labels have room to begin with */
.header .menu > ul > li .sub-menu.mega-menu-column-3 { max-width: 1180px; }
/* ── the opening, moving through views of the room ───────────────── */
.ab-stage__img { opacity: 0; transition: opacity 1.1s ease; }
.ab-stage__img.is-on { opacity: 1; }
.ab-dots { display: flex; gap: 9px; margin-top: 26px; }
.ab-dot {
  width: 30px; height: 4px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.38); transition: background .25s ease, width .25s ease;
}
.ab-dot:hover { background: rgba(255,255,255,.62); }
.ab-dot.is-on { background: #f7a51b; width: 46px; }
.ab-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ab-stage__img { transition: none; }
  .ab-dot { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   The page opening, the same on every page
   Every page used to carry the identical banner photograph, which is
   what made them read as one template with the title swapped. Each one
   now opens on a picture of its own subject, with the h1 on it. The
   Aerobay keeps its own moving version of this; everything else is
   this one.
   ══════════════════════════════════════════════════════════════════ */
.ph-hero {
  position: relative;
  min-height: clamp(260px, 32vw, 420px);
  display: flex; align-items: flex-end;
  overflow: hidden; background: #1b1410;
}
.ph-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.ph-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,8,3,.10) 0%, rgba(20,8,3,.18) 40%,
                                       rgba(20,8,3,.80) 100%);
}
.ph-hero__in {
  position: relative; z-index: 2; width: 100%;
  padding: 0 0 clamp(26px, 3.4vw, 44px);
}
.ph-hero__h {
  font-family: "Poppins", sans-serif;
  font-size: clamp(27px, 3.5vw, 50px); line-height: 1.08; font-weight: 600;
  letter-spacing: -.025em; color: #fff; margin: 0 0 16px; max-width: 20ch;
  text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.42);
}
ul.breadcrumb.ph-hero__crumb {
  margin: 0; padding: 0; background: none; border-radius: 0;
  width: auto; justify-content: flex-start; gap: 0;
}
/* the theme sets ul.breadcrumb li to near-black, which beat a single
   class here and left the trail unreadable on both openings */
ul.breadcrumb.ph-hero__crumb li {
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
/* #f7a51b on the brand red is only 3.5:1; this clears 4.5 on both the
   plain opening and the darkened photographs */
ul.breadcrumb.ph-hero__crumb a { color: #ffd79a; }
ul.breadcrumb.ph-hero__crumb a:hover { color: #fff; }
ul.breadcrumb.ph-hero__crumb > li + li::before { color: rgba(255,255,255,.6); }

@media (max-width: 767px) {
  .ph-hero { min-height: 220px; }
  .ph-hero__in { padding-bottom: 22px; }
  .ph-hero__crumb li { font-size: 11px; }
}

/* ── the plain opening ───────────────────────────────────────────────
   Used wherever there is no photograph that is both about the page and
   wide enough to crop without cutting a face. It keeps the same shape,
   type and breadcrumb as the photographic one, so the site still reads
   as one thing. */
.ph-hero--plain {
  /* the same height as the photographic opening, so a page with a picture
     and a page without are the same shape on the way down */
  min-height: clamp(260px, 32vw, 420px);
  background: #ac1f23;
  background-image: url(../images/footer-bird.png);
  background-repeat: no-repeat;
  background-position: right -40px bottom -30px;
  background-size: 300px auto;
  border-bottom: 5px solid #f7a51b;
}
.ph-hero--plain::after { display: none; }
.ph-hero--plain .ph-hero__h { text-shadow: none; }
.ph-hero--plain .ph-hero__crumb li { text-shadow: none; }
@media (max-width: 767px) {
  .ph-hero--plain { min-height: 220px; background-size: 190px auto; }
}

/* ══════════════════════════════════════════════════════════════════
   Support services and the fee pages
   These carry no photographs, because the school has none of a bus, a
   medical room or a kitchen. They are set as a single readable column
   with the questions as headings, which is what a parent is reading
   them for.
   ══════════════════════════════════════════════════════════════════ */
.sv-wrap { padding-top: 60px; }
.sv-in { max-width: 760px; }
.sv-head {
  font-family: "Poppins", sans-serif;
  font-size: clamp(25px, 2.7vw, 37px); line-height: 1.16; font-weight: 600;
  letter-spacing: -.022em; color: #241c16; margin: 0 0 20px; text-wrap: balance;
}
.sv-lede { font-size: 18px; line-height: 1.66; color: #3a2e25; margin: 0 0 8px; }
.sv-blocks { margin-top: 36px; border-top: 1px solid #efe4d6; }
.sv-block { padding: 28px 0; border-bottom: 1px solid #efe4d6; }
.sv-block__h {
  font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 600;
  color: #ac1f23; margin: 0 0 10px; line-height: 1.3; letter-spacing: -.012em;
}
.sv-block p { font-size: 17px; line-height: 1.72; color: #5c4b3e; margin: 0; }

.sv-ask {
  margin-top: 40px; padding: 30px 32px;
  background: #fdf8f2; border: 1px solid #efe4d6; border-radius: 18px;
}
.sv-ask__h {
  font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 600;
  color: #241c16; margin: 0 0 8px; line-height: 1.3;
}
.sv-ask__p { font-size: 15px; line-height: 1.6; color: #5c4b3e; margin: 0 0 20px; }
.sv-ask__a { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0; }
.sv-ask__alt {
  font-size: 14px; font-weight: 600; color: #ac1f23;
  border-bottom: 1px solid #e2c4c4; padding-bottom: 2px;
}
.sv-ask__alt:hover { color: #ac1f23; border-bottom-color: #ac1f23; }
@media (max-width: 767px) {
  .sv-wrap { padding-top: 40px; }
  .sv-block { padding: 22px 0; }
  .sv-ask { padding: 24px 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   The header arriving, rather than appearing
   Past 450px the header leaves the flow. A spacer of its exact height
   takes its place, so nothing below it moves, and the header itself
   slides down from above rather than cutting in at the top.
   ══════════════════════════════════════════════════════════════════ */
.header-spacer { height: 0; }
.header.fixed {
  transform: translateY(-100%);
  transition: transform .42s cubic-bezier(.22,.72,.26,1), box-shadow .42s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0);
  will-change: transform;
}
.header.fixed.is-in {
  transform: translateY(0);
  box-shadow: 0 2px 14px rgba(40,14,6,.14);
}
@media (prefers-reduced-motion: reduce) {
  .header.fixed { transition: none; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   The gallery's two controls
   A rail across the top on a laptop, where there is room for it and a
   reader can see every event at once; the corner button on a phone,
   where a rail would eat the screen. Only ever one of them is present.
   ══════════════════════════════════════════════════════════════════ */
.gal-rail {
  position: sticky; top: var(--hdr-h, 68px); z-index: 20;
  margin: 34px 0 6px; padding: 12px 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid #f1e7da;
}
.gal-rail__in {
  display: flex; gap: 9px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gal-rail__in::-webkit-scrollbar { display: none; }
.gal-chip {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  border: 1px solid #efe4d6; background: #fff; color: #5c4b3e;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  padding: 10px 15px; border-radius: 999px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gal-chip:hover { background: #fdf8f2; color: #ac1f23; border-color: #e6cccc; }
.gal-chip.is-on { background: #ac1f23; border-color: #ac1f23; color: #fff; }
.gal-chip:focus-visible { outline: 3px solid #ac1f23; outline-offset: 2px; }

@media (max-width: 991px) { .gal-rail { display: none; } }
@media (min-width: 992px) { .gal-fab, .gal-pick { display: none !important; } }

/* ── the one-off nudge towards the corner button on a phone ───────── */
.gal-fab.is-hinting { animation: galNudge 1.5s ease-in-out 3; }
@keyframes galNudge {
  0%, 100% { transform: translateY(0) scale(1); }
  12%      { transform: translateY(-7px) scale(1.045); }
  24%      { transform: translateY(0) scale(1); }
  36%      { transform: translateY(-4px) scale(1.02); }
  48%      { transform: translateY(0) scale(1); }
}
.gal-fab.is-hinting::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 999px; border: 2px solid rgba(172,31,35,.55);
  animation: galPing 1.5s ease-out 3; pointer-events: none;
}
@keyframes galPing {
  0%   { transform: scale(.94); opacity: .9; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-fab.is-hinting { animation: none; }
  .gal-fab.is-hinting::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   The Young Inventor & CEO Challenge, on the Events page
   It is the thing the school is actually promoting, so it sits above
   the championship that has already happened and is given the weight
   of a page of its own inside the page.
   ══════════════════════════════════════════════════════════════════ */
.yi {
  background: #fdf8f2; border-top: 4px solid #f7a51b;
  padding-top: 54px; padding-bottom: 54px;
}
.yi-k {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #ac1f23; margin: 0 0 14px;
}
.yi-h {
  font-family: "Poppins", sans-serif;
  font-size: clamp(26px, 3vw, 42px); line-height: 1.12; font-weight: 600;
  letter-spacing: -.024em; color: #241c16; margin: 0 0 16px; max-width: 20ch;
  text-wrap: balance;
}
.yi-lede { font-size: 18px; line-height: 1.64; color: #3a2e25; margin: 0 0 30px; max-width: 62ch; }

.yi-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: #efe4d6; border: 1px solid #efe4d6;
  border-radius: 16px; overflow: hidden; margin-bottom: 44px;
}
.yi-facts > div { background: #fff; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.yi-facts b {
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #a08d7c;
}
.yi-facts span { font-size: 15px; line-height: 1.45; color: #241c16; font-weight: 500; }

.yi-sub {
  font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 600;
  color: #241c16; margin: 0 0 8px; line-height: 1.3;
}
.yi-note { font-size: 15px; line-height: 1.6; color: #8a7765; margin: 0 0 20px; }

.yi-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 46px; }
.yi-track { background: #fff; border: 1px solid #efe4d6; border-radius: 16px; padding: 24px 24px 26px; }
.yi-track__age {
  display: inline-block; background: #fdf0ef; color: #ac1f23;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  padding: 6px 11px; border-radius: 999px; margin-bottom: 12px;
}
.yi-track__h {
  font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 600;
  color: #ac1f23; margin: 0 0 8px; line-height: 1.2;
}
.yi-track p { font-size: 15px; line-height: 1.6; color: #5c4b3e; margin: 0; }

.yi-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-bottom: 40px; }
.yi-run { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.yi-run li {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #efe4d6; border-radius: 999px;
  padding: 9px 16px 9px 10px; font-size: 15px; font-weight: 600; color: #241c16;
}
.yi-run span {
  width: 24px; height: 24px; border-radius: 50%; background: #ac1f23; color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.yi-prize {
  margin: 20px 0 0; font-size: 16px; font-weight: 600; color: #ac1f23;
}
.yi-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0; }
.yi-seats {
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #a08d7c;
}

@media (max-width: 991px) {
  .yi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yi-tracks { grid-template-columns: minmax(0, 1fr); }
  .yi-two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 575px) {
  .yi-facts { grid-template-columns: minmax(0, 1fr); }
}
/* one line under an event's heading, so a page of photographs still says
   what each day was */
.gal-line {
  font-size: 15px; line-height: 1.6; color: #5c4b3e;
  margin: -6px 0 18px; max-width: 72ch;
}

/* ══════════════════════════════════════════════════════════════════
   Parent testimonials, shaped for the reels
   The school films parents on a phone, so what comes back is vertical.
   The slots are 9:16 so a film drops into the shape already on the page
   instead of being letterboxed into a widescreen frame.
   ══════════════════════════════════════════════════════════════════ */
.tm-wrap { padding-top: 56px; }
.tm-in { max-width: 680px; margin-bottom: 40px; }
.tm-head {
  font-family: "Poppins", sans-serif;
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.14; font-weight: 600;
  letter-spacing: -.022em; color: #241c16; margin: 0 0 16px;
}
.tm-lede { font-size: 17px; line-height: 1.66; color: #5c4b3e; margin: 0; }

.tm-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tm-reel { margin: 0; }
.tm-reel__frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 18px; background: #fdf8f2; border: 1px solid #efe4d6;
}
.tm-reel__frame video,
.tm-reel__frame iframe,
.tm-reel__frame blockquote { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.tm-reel__frame video { object-fit: cover; background: #000; }
.tm-reel figcaption {
  margin-top: 12px; font-size: 14px; font-weight: 600; color: #241c16;
  display: flex; flex-direction: column; gap: 3px;
}
.tm-reel figcaption span {
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: #a08d7c;
}
/* an empty slot reads as a frame waiting for a film, not as a broken one */
.tm-reel--empty .tm-reel__frame {
  background:
    repeating-linear-gradient(135deg, #fdf8f2 0 12px, #fbf2e8 12px 24px);
  display: grid; place-items: center;
}
.tm-reel__play {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid #e2c4c4; position: relative; display: block;
}
.tm-reel__play::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-40%, -50%);
  border-left: 15px solid #e2c4c4;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.tm-foot {
  margin: 36px 0 0; font-size: 15px; line-height: 1.68; color: #8a7765;
  max-width: 66ch;
}
@media (max-width: 991px) { .tm-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .tm-wall { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tm-reel__frame { aspect-ratio: 4 / 5; }
}
/* the photograph in the orange STEAM panel was the one square corner on a
   page where everything else is rounded */
.orange-box img, .academy-box2 img.img-fluid, .red-box img.img-fluid { border-radius: 16px; }
.orange-box img[width="100"], .orange-box img[width="80"] { border-radius: 0; }

}
/* --- the 2 October corrections ------------------------------------- */

/* Home, section two. One photograph of the podium became five of the
   children; the slot keeps the shape the single picture had so the
   philosophy and motto cards beside it still line up with its edges. */
.hc{position:relative}
.hc__stage{position:relative;aspect-ratio:800/1152;border-radius:16px;overflow:hidden}
.hc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease}
.hc__img.is-on{opacity:1}
.hc__dots{position:absolute;left:0;right:0;bottom:16px;display:flex;gap:8px;
  justify-content:center}
.hc__dot{width:9px;height:9px;padding:0;border:0;border-radius:99px;
  background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s ease,background .3s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hc__dot.is-on{background:#f7a51b;width:28px}
.hc__dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Section three: the Our Mission card stopped half way up its column and
   left a block of empty cream below it. It fills the column now.

   Scoped to the red band on purpose. Written as `.counter .academy-box3`
   it also caught the Joy of Learning card in section two, which lives in
   a .counter container as well: that card has a fixed min-height and a
   flock graphic that scales with its width, so between 430px and 767px
   the birds burst out of a 200px box and pushed the title clean out of
   the card. */
.red-bg .counter .academy-box3{height:100%}

/* And the flock cannot outgrow its card again whatever the rule above
   does. It is a mark, not a photograph; past about this size it stops
   reading as one. */
.stack-fill .academy-box3 img{max-width:240px;margin-inline:auto}

/* Life @ BOMIS: the lede sat straight on top of the icons. */
.life-icons{margin-top:34px}

/* Below 1200 the icon cards lose enough width that every title except
   Sports breaks onto a second line and the row goes ragged. The cards
   keep their height and their icons; only the side padding gives way,
   which is 22px more than the longest title needs. */
@media (max-width:1199.98px){
  .academics-content,.academics-content1{padding-left:12px;padding-right:12px}
}
@media (prefers-reduced-motion: reduce){
  .hc__img,.hc__dot{transition:none}
}
/* --- the opening collage ------------------------------------------- */

/* Three photographs stacked in the same box. Each is a <picture>, so the
   phone gets a frame cropped for its own shape instead of a wide one with
   its sides shaved off. The first frame carries is-on from the server,
   which means the opening is never blank before the script runs - and
   stays correct if it never runs at all. */
/* The opening used to stop growing at 420px tall however wide the screen
   got, so on a 2560px monitor the box was 6.1:1 and threw away half the
   height of a 3.1:1 photograph - which is what cut the dancer's face off
   at the top. Its height follows the width now, so the box stays near
   3.3:1 from a tablet upwards and the picture arrives whole. */
.ph-hero{height:clamp(220px, 30vw, 720px)}
.ph-hero__pic{position:absolute;inset:0;display:block}
.ph-hero[data-hero-reel] .ph-hero__pic{opacity:0;transition:opacity 1.4s ease}
.ph-hero[data-hero-reel] .ph-hero__pic.is-on{opacity:1}
@media (prefers-reduced-motion: reduce){
  .ph-hero[data-hero-reel] .ph-hero__pic{transition:none}
}
/* --- the red opening ------------------------------------------------
   The photographs are out of the header. What is left is the school's
   own red, the gold rule it always sits above, and the chidiya - the
   mark the whole brand is built on - held large and quiet behind the
   title rather than used as decoration.

   The bird is drawn twice: one solid at the right, and a second much
   fainter one behind the type, so the panel has depth without anything
   competing with the words. Both are the brand's own file, not a new
   drawing. Height follows the width exactly as the photographic opening
   did, so a page with the red header and a page without are the same
   shape on the way down. */
.ph-hero--red{
  position:relative; overflow:hidden;
  /* the photographic opening sets a min-height for the picture's sake;
     a flat panel does not need the same room, and beats it here */
  min-height:0;
  height:clamp(190px, 20vw, 340px);
  background:#ac1f23;
  border-bottom:5px solid #f7a51b;
  display:flex; align-items:flex-end;
}
/* the quiet one, behind the words */
.ph-hero--red::before{
  content:""; position:absolute; z-index:0;
  left:-4%; bottom:-28%; width:min(46%, 460px); aspect-ratio:7/5;
  background:url(../images/logo-bird.png) left bottom/contain no-repeat;
  opacity:.055; transform:scaleX(-1);
}
/* the one you are meant to see */
.ph-hero--red::after{
  content:""; position:absolute; z-index:1; inset:auto;
  right:clamp(-30px, -1vw, 0px); bottom:-14%;
  width:clamp(170px, 24vw, 330px); aspect-ratio:7/5;
  background:url(../images/logo-bird.png) right bottom/contain no-repeat;
  opacity:.16;
}
.ph-hero--red .ph-hero__in{position:relative; z-index:2}
.ph-hero--red .ph-hero__h{text-shadow:none}
.ph-hero--red .ph-hero__crumb li{text-shadow:none}
@media (max-width:767px){
  .ph-hero--red{height:170px}
  .ph-hero--red::after{width:150px; bottom:-10%}
}
/* --- the contact cards ----------------------------------------------
   These shipped with class names and no rules, so each heading came out
   at page-title size over three lines of small text with a bare glyph
   above it. The heading is the label here, not the content: it is set
   small and in the brand red, the icon sits in a chip beside it rather
   than floating over it, and the detail underneath is what the eye
   lands on. */
.ct-cards{
  display:grid; gap:14px;
  /* Two, fixed. auto-fit was wrong twice over: at 230px minimum it
     collapsed to one very wide card for the whole 992-1199 band, and at
     205px it found room for three at 768 and 1440 and squeezed the email
     out of its card. The content is four short facts; two columns is
     what they want at every size that can hold two. */
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width:519px){ .ct-cards{grid-template-columns:1fr} }
.ct-card{
  display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto;
  column-gap:14px; row-gap:2px; align-items:center;
  padding:18px 20px; border-radius:12px;
  background:#fff0e5; border:1px solid rgba(172,31,35,.10);
}
.ct-card i{
  grid-row:1 / span 2; grid-column:1; align-self:start;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-size:16px;
  background:#ac1f23; color:#fff;
}
.ct-card h3{
  grid-column:2; margin:0 0 2px;
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#ac1f23;
}
.ct-card p{
  grid-column:2; margin:0; font-size: 15px; line-height:1.55; text-align:left;
  /* an email address has no spaces to break at */
  overflow-wrap:anywhere;
}
.ct-card a{color:#1f1914; border-bottom:1px solid rgba(172,31,35,.35)}
.ct-card a:hover{color:#ac1f23; border-bottom-color:#ac1f23}

/* the form had a sixth of the page per field once the duplicate panel
   beside it was removed; it uses the width now */
.ct-form .form-label{font-weight:600; font-size:14px; margin-bottom:6px}
.ct-form .input100{margin-bottom:18px}

/* WhatsApp sits on the first number, as a thing to do with it */
.ct-wa{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:8px; padding:2px 10px; border-radius:99px;
  font-size: 12px; font-weight:600; letter-spacing:.02em;
  background:#e8f6ec; color:#1c7a3e; border:0 !important;
}
.ct-wa i{all:unset; font-family:inherit; font-size:13px}
.ct-wa:hover{background:#1c7a3e; color:#fff}

@media (max-width: 575px){
  .ct-card{padding:15px 16px; column-gap:12px}
  .ct-card i{width:34px; height:34px; font-size:14px}
}
/* --- justified running text ------------------------------------------
   Running paragraphs are justified so each one reads as a box, flush on
   both edges, on every screen including a phone.

   The text INSIDE a box is not, and that is deliberate. Sujeet put it to
   ma'am on the 5 October call in exactly these terms: the paragraphs are
   justified, but a card is narrow enough that justifying it opens gaps
   rather than making an edge, so a card's text is set as ordinary lines.
   A previous pass here justified the cards too; this undoes that.

   hyphens: auto is what makes the justified part work at all. Without
   hyphenation the browser has nowhere to break a long word and opens the
   word spaces instead, which is where the holes come from. It needs the
   lang attribute, which every page carries. text-align-last: left stops
   the closing line of a paragraph being stretched on its own. */
p, .st-body, .st-lede, .ab-lede, .doc-lede, .gal-lede{
  text-align: justify;
  text-align-last: left;
  /* 7 October, continued. hyphenate-limit-chars is DECLARED and reads
     back as "12 5 5" from getComputedStyle - and the browser ignores it
     in layout. Measured after setting it, across five pages at three
     widths, the breaks were still:

         observat|ion   11 letters, a 3-letter tail
         achievem|ents  on four separate pages
         intellig|ence  perselves a 4-letter tail
         experie|nces   imaginat|ion   perspect|ives

     "achievem-ents" is not a hyphenation of anything. So hyphenation
     comes off this site's running text altogether.

     The reason it was switched on still has to be answered: without it
     the browser opens the word spaces instead. It was measured both ways
     after the change, and the answer is that it no longer matters -
     non-prose is not justified any more, two-line paragraphs are ragged,
     and every block has a sane measure, so the slack that hyphenation
     was mopping up is mostly gone already. */
  hyphens: manual; -webkit-hyphens: manual;
  /* kept, in case a future browser honours it and hyphenation is wanted
     back: only long words, never a tail shorter than five letters - without
     it the browser opens the word spaces instead - but left to itself it
     will break a word anywhere it is allowed to, and on the home page it
     was producing

         nurtur-ing      compassion-ate      educa-tion      cam-pus

     which is exactly the cheap look he keeps pointing at. A three-letter
     tail is not a hyphenation, it is a word with its last syllable torn
     off.

     So: only words of 12 characters or more, and never fewer than five
     letters on either side of the break. That leaves the long compound
     words - "infrastructure", "international" - where a break genuinely
     helps, and refuses the short ones where it never does. */
  hyphenate-limit-chars: 12 5 5;
  -webkit-hyphenate-limit-chars: 12 5 5;
  text-wrap: pretty;
}

/* Everything that lives in a box, and everything that is chrome rather
   than prose. */
/* 7 October. "Why we removed so much of justification from maximum
   places? We need to add justification every possible where, apart from
   that only a box with a single word or text."

   This list used to carry every card body on the site - .flip-card-back,
   .academy-box2, .why-box, .st-card, .doc-card, .gal-card, .event-body,
   .tm-card, .sv-block, .counter_div - on the reasoning he gave ma'am on
   5 October, that a card is narrow enough for justification to open
   holes instead of making an edge. He has now looked at the result and
   reversed it: a card body is four or five lines of prose and reads as
   prose, so it is justified like prose. Measured at 390px, that was
   52 unclassed paragraphs sitting ragged in the middle of a justified
   page.

   What is left here is what he is excepting - the boxes holding a single
   word or a short label: a nav item, a crumb, a chip, a button, a form
   label, a stat caption. Nothing here is a paragraph. */
.counter_div .desc,
.yi-facts span, .yi-facts b, .pg-facts p,
.ph-hero__crumb li, .form-label, .form-check label,
.foot-icon, .gal-chip, .doc-ic, .st-next__go,
.ab-dot, .hc__dot, .ct-wa, .rts-theme-btn{
  text-align: left;
  text-align-last: auto;
  hyphens: manual; -webkit-hyphens: manual;
}


/* One exception to "footer p". Sujeet, 6 October, quoting it back:
   "Connect with us to explore a learning environment that values
   curiosity, creativity and character and stay inspired through our
   social media platforms ... JUSTIFY IT".

   It is the only running prose in the footer - everything else down
   there is an address, a link or a heading - and it sits beside a
   column of equal width whose text IS justified, so left-aligned it
   was the one ragged edge in the pair. Selected by what follows it,
   the row of social icons, rather than by a class, so no page markup
   has to carry anything and no regeneration can lose it. */

/* .academy-box3 and .academy-box4 are two different things wearing one
   class. On the home page they are narrow cards in the counter column,
   where justifying opens holes - that is the case the exception above
   was written for. On the Academics and the stage pages the same class
   is a full-width panel carrying three lines of running prose, and
   leaving THAT ragged is the one unjustified block on the page, which
   is what Sujeet pointed at on 6 October. So the exception is scoped to
   the narrow ones. */
.academy-box3 p, .academy-box4 p{
  text-align: justify; text-align-last: left;
  /* hyphenation is off site-wide - see the note on the main rule */
  hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty;
}
/* ONLY the home page's narrow cards. .counter is not the discriminator -
   the Academics panels sit inside a .counter container too, which is why
   scoping to it left them ragged. .stack-fill is the home column, and
   .red-bg is the red band on About. */
.stack-fill .academy-box3 p, .stack-fill .academy-box4 p,
.red-bg .academy-box3 p, .red-bg .academy-box4 p{
  text-align: left; text-align-last: auto;
  hyphens: manual; -webkit-hyphens: manual;
}

footer p:has(+ .social-links){
  text-align: justify;
  text-align-last: left;
  hyphens: manual; -webkit-hyphens: manual;
  text-wrap: pretty;
}

/* 7 October, superseded. This block used to repeat the non-prose list
   with !important, and because specificity is worked out per selector -
   p:has(br) is (0,0,2), .st-eyebrow is (0,1,0) - it outranked the final
   `p, li` rule even though that rule comes later in the file. It was
   quietly un-justifying the Vice President's message and three other
   paragraphs.

   There is one place that decides justification now and it is the
   ALL PROSE IS JUSTIFIED block at the end of the stylesheet
   (apply/zz_justify_all.py). Deciding it here as well is what made two
   paragraphs in one section disagree in the first place. */
/* --- the stage carousels ---------------------------------------------
   Ma'am asked for more children: the four cards on the home page cycle
   three photographs instead of holding one, and the lead photograph on
   each stage page does the same. The frames are stacked and faded, so
   nothing moves and the card keeps the height it had.

   The flip card still flips on hover - the cycle is behind the front
   face and does not interfere with it. */
.sc{position:relative;display:block;overflow:hidden}
.sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease}
.sc img.is-on{opacity:1}
/* the card's front face is a fixed box with the title absolutely placed
   over its lower edge, so the stack fills the face exactly as the single
   photograph did - an aspect-ratio here left a white strip behind the
   title */
.flip-card-front .sc{position:absolute;inset:0}

/* 7 October. The tile had exactly the same fault and it was not caught,
   because the note above was written about the flip card only.

   A stage tile is sized by the grid - `grid-row: span 2` - so its height
   is 313px at 390, 420 at 768 and 484 at 992. The carousel inside it was
   given aspect-ratio 1300/720 instead, so its height came from its own
   WIDTH and the two agreed only by accident:

       390px   tile 313   carousel 183   130px of bare tile
       768px   tile 420   carousel 376    45px
       992px   tile 484   carousel 329   155px
      1440px   tile 484   carousel 495    none - it overflows instead

   .st-tile has background #f3ece4, so every one of those gaps showed as
   a cream strip under the photograph. He found the 390px one. The fix is
   the one already applied to the flip card: fill the box. */
.st-tile .sc{position:absolute;inset:0}
.st-tile .sc img{border-radius:inherit}
@media (prefers-reduced-motion: reduce){ .sc img{transition:none} }
/* --- 6 October ------------------------------------------------------
   A photograph was being cropped twice: once into its file, and again
   by the box it is shown in. The second crop is the one nobody was
   checking, and it is where the faces went.

     the four Aerobay steps   a 900x760 photograph in a 610x300 box,
                              so 42% of its height never appeared
     the three Soul Science   an 820x620 photograph in a 400x190 box,
       strands                37%

   The boxes take the shape of what they hold now, so the only crop is
   the one the cropper made, and the cropper is the thing that knows
   where the faces are. */
.ab-step__fig{aspect-ratio:900/760; height:auto}
.pg-strand__img{aspect-ratio:820/620; height:auto}
@media (max-width:767px){
  .ab-step__fig{aspect-ratio:900/760; height:auto}
  .pg-strand__img{aspect-ratio:820/620; height:auto}
}

/* The Aerobay introduction was 860px of text with the rest of the row
   left white. It is two columns now, the words and the room. */
.ab-intro__in{max-width:none}
.ab-intro__grid{
  display:grid; gap:clamp(26px, 4vw, 54px);
  grid-template-columns:minmax(0, 1fr) minmax(0, 0.78fr);
  align-items:start;
}
.ab-intro__words{max-width:62ch}
.ab-intro__pics{position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:900/1120; box-shadow:0 10px 40px rgba(20,8,3,.13)}
.ab-intro__pics img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.2s ease}
.ab-intro__pics img.is-on{opacity:1}
@media (max-width:991px){
  .ab-intro__grid{grid-template-columns:minmax(0,1fr)}
  .ab-intro__pics{aspect-ratio:16/10}
}
@media (prefers-reduced-motion: reduce){ .ab-intro__pics img{transition:none} }
/* --- Apply: Pre-Nursery to Prep, and Grade 1 to 9 --------------------
   These two pages carried .ap-* markup and the stylesheet had no rule
   for any of it, so both rendered in the browser's defaults. */
.ap-wrap { padding: 62px 0 74px; }
.ap-in { max-width: 860px; margin: 0 auto; }

.ap-head {
  font-family: "Poppins", sans-serif;
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; line-height: 1.14;
  letter-spacing: -.022em; color: #241c16; margin: 0 0 18px; text-wrap: balance;
}
.ap-lede {
  font-size: 17px; line-height: 1.72; color: #5c4b3e;
  margin: 0 0 46px; max-width: 62ch;
}

/* a section heading, with the short red rule used elsewhere on the site */
.ap-sub {
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 1.8vw, 23px); font-weight: 600; line-height: 1.25;
  letter-spacing: -.015em; color: #241c16;
  margin: 0 0 26px; padding-bottom: 12px; position: relative;
}
.ap-sub::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px; background: #ac1f23; border-radius: 2px;
}

/* ── the steps ─────────────────────────────────────────
   A hairline runs down behind the numbers so the five stages read as
   one sequence. The list marker is turned off: the number is already
   in the markup, and both were printing ("1. 1"). */
.ap-steps {
  list-style: none; margin: 0 0 52px; padding: 0;
  position: relative; display: grid; gap: 26px;
}
.ap-steps::before {
  content: ""; position: absolute; left: 19px; top: 14px; bottom: 14px;
  width: 1px; background: #ead9c6;
}
.ap-step {
  position: relative; display: grid;
  grid-template-columns: 40px minmax(0, 1fr); gap: 20px; align-items: start;
}
.ap-step__n {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600;
  color: #fff; background: #ac1f23;
  box-shadow: 0 0 0 5px #fff;      /* lifts the number off the hairline */
  position: relative; z-index: 1;
}
.ap-step__h {
  font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 600;
  color: #241c16; margin: 8px 0 6px; line-height: 1.3;
}
.ap-step p { font-size: 16px; line-height: 1.7; color: #5c4b3e; margin: 0; }

/* ── what to bring ─────────────────────────────────────
   .tick-list already carries the tick; this only sets the panel it
   sits in and puts it in two columns where there is room. */
.ap-docs {
  background: #fdf8f2; border: 1px solid #efe4d6; border-radius: 18px;
  padding: 28px 30px; margin: 0 0 30px;
  columns: 2; column-gap: 38px;
}
.ap-docs li {
  break-inside: avoid; margin-bottom: 13px;
  font-size: 15px; line-height: 1.6; color: #5c4b3e;
}
.ap-docs li:last-child { margin-bottom: 0; }

.ap-note {
  margin: 0; padding: 2px 0 2px 20px; border-left: 3px solid #ac1f23;
  font-size: 15px; line-height: 1.7; color: #5c4b3e; max-width: 64ch;
}

@media (max-width: 767px) {
  .ap-wrap { padding: 44px 0 54px; }
  .ap-lede { font-size: 17px; margin-bottom: 34px; }
  .ap-steps { gap: 22px; }
  .ap-steps::before { left: 16px; }
  .ap-step { grid-template-columns: 34px minmax(0, 1fr); gap: 15px; }
  .ap-step__n { width: 34px; height: 34px; font-size: 14px; box-shadow: 0 0 0 4px #fff; }
  .ap-step__h { font-size: 17px; margin-top: 5px; }
  .ap-docs { columns: 1; padding: 22px 22px; }
}
/* --- the Vice President's row, both halves the same height ----------
   object-position is the measured face: 43.4% across, 21.6% down. */
.red-bg .counter > .row > .col-md-3{ display: flex; }
.red-bg .counter > .row > .col-md-3 > img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: 43.4% 21.6%; margin-bottom: 0;
}
.red-bg .counter > .row > .col-md-3 > .counter_div{
  width: 100%; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 575px){
  /* on a phone the two sit side by side at half width each, which is
     where the mismatch showed most */
  .red-bg .counter > .row > .col-md-3 > img{ object-position: 43.4% 18%; }
}
/* --- one type scale, the theme's own --------------------------------
   17px / 1.7 for running text, 32px for an h2, 23px for an h3 - the
   sizes the rest of the site has always used, measured on the school's
   own live pages. The pages written for this build had drifted to
   eight different scales between them. */
.ap-lede, .ap-step p, .ap-docs li, .ap-note,
.st-body, .st-lede, .st-card p, .st-cta__p,
.ab-band p, .ab-field p, .ab-step p, .ab-lede--sm,
.pg-care p, .pg-points li,
.sv-lede, .sv-block p, .sv-ask__p,
.tm-lede, .yi-lede, .yi-note, .yi-track p,
.doc-lede, .gal-lede{
  font-size: 17px; line-height: 1.7;
}
/* a lede opens a page, so it keeps its weight without changing size */
.ap-lede, .st-lede, .sv-lede, .yi-lede, .tm-lede{ line-height: 1.72; }

/* the two heading levels the theme actually has */
.ap-head{ font-size: 32px; line-height: 1.2; }
.ap-sub, .ap-step__h, .st-card__h, .st-path__h, .sv-ask__h{
  font-size: 23px; line-height: 1.2;
}
@media (max-width: 575px){
  /* the theme's own h2 steps down on a narrow screen; nothing else does */
  .ap-head{ font-size: 27px; }
  .ap-sub, .ap-step__h, .st-card__h, .st-path__h, .sv-ask__h{ font-size: 20px; }
}
/* --- every crop aimed at its faces ---------------------------------
   object-position defaults to 50% 50%, and dead centre is the one
   place a face reliably is not. These are measured: Vision finds
   the faces in each photograph, and the position puts them in the
   middle of whatever its box chooses to show. Generated by
   apply/objectpos.py - do not hand-edit. */
img[src$="/acad-foundation.jpg"]{object-position:50% 23%}
img[src$="/acad-middle.jpg"]{object-position:50% 18%}
img[src$="/acad-preparatory.jpg"]{object-position:50% 0%}
img[src$="/acad-secondary.jpg"]{object-position:50% 0%}
img[src$="/artist-village.jpg"]{object-position:9% 50%}
img[src$="/bomis-aerobay.jpg"]{object-position:50% 54%}
img[src$="/bomis-computer-lab.jpg"]{object-position:0% 50%}
img[src$="/events/aerobay-2.jpg"]{object-position:50% 0%}
img[src$="/events/aerobay-4.jpg"]{object-position:50% 0%}
img[src$="/events/bravery-shield-1.jpg"]{object-position:50% 0%}
img[src$="/events/bravery-shield-2.jpg"]{object-position:50% 0%}
img[src$="/events/bravery-shield-3.jpg"]{object-position:50% 0%}
img[src$="/events/bravery-shield-4.jpg"]{object-position:50% 0%}
img[src$="/events/chess-2.jpg"]{object-position:50% 0%}
img[src$="/events/chess-3.jpg"]{object-position:50% 0%}
img[src$="/events/chocolate-day-1.jpg"]{object-position:50% 41%}
img[src$="/events/chocolate-day-2.jpg"]{object-position:50% 64%}
img[src$="/events/chocolate-day-3.jpg"]{object-position:50% 0%}
img[src$="/events/chocolate-day-4.jpg"]{object-position:50% 0%}
img[src$="/events/creative-convergence-2.jpg"]{object-position:50% 0%}
img[src$="/events/creative-convergence-3.jpg"]{object-position:50% 0%}
img[src$="/events/creative-convergence-4.jpg"]{object-position:50% 0%}
img[src$="/events/creative-convergence-5.jpg"]{object-position:50% 0%}
img[src$="/events/creative-convergence-6.jpg"]{object-position:50% 0%}
img[src$="/events/digital-gurukul-1.jpg"]{object-position:50% 0%}
img[src$="/events/digital-gurukul-2.jpg"]{object-position:50% 0%}
img[src$="/events/digital-gurukul-3.jpg"]{object-position:50% 0%}
img[src$="/events/digital-gurukul-4.jpg"]{object-position:50% 0%}
img[src$="/events/doctors-day-1.jpg"]{object-position:50% 0%}
img[src$="/events/doctors-day-2.jpg"]{object-position:50% 0%}
img[src$="/events/doctors-day-3.jpg"]{object-position:50% 0%}
img[src$="/events/doctors-day-4.jpg"]{object-position:50% 0%}
img[src$="/events/fancy-dress-1.jpg"]{object-position:50% 0%}
img[src$="/events/fancy-dress-2.jpg"]{object-position:50% 0%}
img[src$="/events/fancy-dress-3.jpg"]{object-position:50% 0%}
img[src$="/events/fancy-dress-4.jpg"]{object-position:50% 0%}
img[src$="/events/grandparents-1.jpg"]{object-position:50% 0%}
img[src$="/events/grandparents-2.jpg"]{object-position:50% 0%}
img[src$="/events/grandparents-3.jpg"]{object-position:50% 0%}
img[src$="/events/grandparents-4.jpg"]{object-position:50% 0%}
img[src$="/events/janmashtami-1.jpg"]{object-position:50% 0%}
img[src$="/events/janmashtami-2.jpg"]{object-position:50% 0%}
img[src$="/events/janmashtami-3.jpg"]{object-position:50% 0%}
img[src$="/events/mock-drill-1.jpg"]{object-position:50% 0%}
img[src$="/events/mud-day-1.jpg"]{object-position:50% 0%}
img[src$="/events/mud-day-2.jpg"]{object-position:50% 0%}
img[src$="/events/mud-day-3.jpg"]{object-position:50% 0%}
img[src$="/events/mud-day-4.jpg"]{object-position:50% 0%}
img[src$="/events/plantation-2.jpg"]{object-position:50% 0%}
img[src$="/events/plantation-3.jpg"]{object-position:50% 0%}
img[src$="/events/plantation-4.jpg"]{object-position:50% 0%}
img[src$="/events/poem-recitation-1.jpg"]{object-position:50% 0%}
img[src$="/events/poem-recitation-2.jpg"]{object-position:50% 0%}
img[src$="/events/poem-recitation-3.jpg"]{object-position:50% 0%}
img[src$="/events/poem-recitation-4.jpg"]{object-position:50% 0%}
img[src$="/events/raksha-bandhan-2.jpg"]{object-position:50% 0%}
img[src$="/events/raksha-bandhan-3.jpg"]{object-position:50% 0%}
img[src$="/events/raksha-bandhan-4.jpg"]{object-position:50% 0%}
img[src$="/events/rising-rs-01.jpg"]{object-position:0% 50%}
img[src$="/events/rising-rs-02.jpg"]{object-position:68% 50%}
img[src$="/events/rising-rs-03.jpg"]{object-position:0% 50%}
img[src$="/events/rising-rs-04.jpg"]{object-position:17% 50%}
img[src$="/events/rising-rs-05.jpg"]{object-position:0% 50%}
img[src$="/events/rising-rs-06.jpg"]{object-position:57% 50%}
img[src$="/events/rising-rs-07.jpg"]{object-position:54% 50%}
img[src$="/events/teachers-day-1.jpg"]{object-position:50% 0%}
img[src$="/events/teachers-day-2.jpg"]{object-position:50% 0%}
img[src$="/events/teachers-day-3.jpg"]{object-position:50% 0%}
img[src$="/events/yoga-day-1.jpg"]{object-position:50% 0%}
img[src$="/events/yoga-day-2.jpg"]{object-position:50% 0%}
img[src$="/events/yoga-day-3.jpg"]{object-position:50% 0%}
img[src$="/events/yoga-day-4.jpg"]{object-position:50% 0%}
img[src$="/financial-literacy.jpg"]{object-position:50% 76%}
img[src$="/gallery/doctors-day-2.jpg"]{object-position:50% 0%}
img[src$="/gallery/doctors-day-3.jpg"]{object-position:50% 0%}
img[src$="/gallery/fancy-dress-2.jpg"]{object-position:50% 0%}
img[src$="/gallery/fancy-dress-3.jpg"]{object-position:50% 0%}
img[src$="/gallery/fancy-dress-4.jpg"]{object-position:50% 0%}
img[src$="/gallery/fancy-dress-5.jpg"]{object-position:50% 100%}
img[src$="/gallery/rising-stars-3.jpg"]{object-position:50% 0%}
img[src$="/gallery/rising-stars-4.jpg"]{object-position:50% 21%}
img[src$="/gallery/rising-stars-5.jpg"]{object-position:50% 0%}
img[src$="/gallery/rising-stars-7.jpg"]{object-position:50% 0%}
img[src$="/gallery/rising-stars-8.jpg"]{object-position:50% 0%}
img[src$="/programmes/digital-gurukul-hero.jpg"]{object-position:50% 12%}
img[src$="/programmes/digital-gurukul-sec1.jpg"]{object-position:50% 0%}
img[src$="/programmes/digital-gurukul-sec2.jpg"]{object-position:50% 0%}
img[src$="/programmes/soul-science-sec1.jpg"]{object-position:50% 0%}
img[src$="/programmes/yoga-and-wellness-hero.jpg"]{object-position:50% 0%}
img[src$="/rising/rs-sec1.jpg"]{object-position:50% 0%}
img[src$="/stage-foundation-1.jpg"]{object-position:50% 0%}
img[src$="/stage-foundation-2.jpg"]{object-position:50% 57%}
img[src$="/stage-foundation-3.jpg"]{object-position:50% 33%}
img[src$="/stage-middle-1.jpg"]{object-position:50% 0%}
img[src$="/stage-middle-2.jpg"]{object-position:50% 29%}
img[src$="/stage-middle-3.jpg"]{object-position:50% 0%}
img[src$="/stage-preparatory-1.jpg"]{object-position:50% 0%}
img[src$="/stage-preparatory-2.jpg"]{object-position:50% 0%}
img[src$="/stage-preparatory-3.jpg"]{object-position:50% 0%}
img[src$="/stage-secondary-1.jpg"]{object-position:50% 100%}
img[src$="/stages/high-school-1.jpg"]{object-position:41% 50%}
img[src$="/stages/high-school-hero.jpg"]{object-position:50% 12%}
img[src$="/stages/middle-years-1.jpg"]{object-position:41% 50%}
img[src$="/stages/middle-years-assess.jpg"]{object-position:50% 0%}
img[src$="/stages/middle-years-hero.jpg"]{object-position:50% 0%}
img[src$="/stages/pre-primary-1.jpg"]{object-position:71% 50%}
img[src$="/stages/pre-primary-hero.jpg"]{object-position:50% 0%}
img[src$="/stages/primary-hero.jpg"]{object-position:50% 0%}
/* --- the mobile menu, made properly ---------------------------------
   Everything the drawer script adds is hidden OUTSIDE the drawer's own
   breakpoint, before anything else is said about it.

   6 October: resize a window from a phone width back to a desktop one
   and the quick actions stayed in the DOM with every one of their rules
   switched off, so three unstyled blue links appeared beside the logo
   in the desktop header. Visibility is not the script's job - it builds
   once and leaves the elements there - so the stylesheet decides, and
   it decides in both directions. */
.md-actions, .md-logo, .md-self{ display: none !important; }

/* --- the mobile menu, made properly ---------------------------------
   The theme has mobile rules for mega-menu-column-3 and -4 and none for
   -2 or for a single column, so those two kept their desktop 50% widths
   inside a 320px drawer and overlapped. */
@media (max-width: 991px){

  /* the drawer itself */
  .header .menu{
    width: min(86vw, 360px);
    box-shadow: 0 0 60px rgba(20, 8, 3, .28);
    background: #fff;
    /* The theme gives .header `will-change: transform` once the page is
       scrolled (its .is-in state). will-change creates a containing
       block for fixed descendants exactly as a transform does, so the
       drawer's own `height: 100%` stopped meaning the viewport and
       started meaning the header - 62px. The drawer opened as a bare
       red bar with nothing under it, but only after scrolling, which is
       why it looked intermittent. Viewport units cannot be captured
       that way. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* the head: the school's red, not a bare white strip */
  .header .menu .mobile-menu-head{
    height: 58px; background: #ac1f23; border-bottom: 0;
  }
  .header .menu .mobile-menu-head .current-menu-title{
    font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; color: #fff; padding-left: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* At the top level the theme leaves this element empty, which turned
     the head into a bare red bar with a cross in it and nothing else -
     it read as a fault rather than as a heading. The school's name sits
     there until a submenu gives it a title. */
  .header .menu .mobile-menu-head .current-menu-title:empty::before{
    content: "Birla Open Minds";
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    opacity: .95;
  }
  .header .menu .mobile-menu-head .go-back,
  .header .menu .mobile-menu-head .mobile-menu-close{
    height: 58px; width: 54px; color: #fff; font-size: 22px;
    border-color: rgba(255,255,255,.22);
  }
  .header .menu .mobile-menu-head .mobile-menu-close{ font-size: 28px; line-height: 58px; }

  /* top level */
  .header .menu > ul > li > a{
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
    line-height: 54px; height: 54px; color: #241c16;
    padding: 0 52px 0 20px; border-bottom: 1px solid #f2e9df;
  }
  .header .menu > ul > li > a i{
    height: 54px; line-height: 54px; width: 52px; color: #ac1f23; font-size: 15px;
  }
  .header .menu > ul > li:last-child > a{ border-bottom: 0; }

  /* EVERY column is full width in the drawer, whatever the desktop
     layout is - this is the rule the theme never had for two columns
     or for a single one, and it is the whole fault he was looking at */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
    flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu{
    display: none; flex-wrap: wrap;
  }
  .header .menu > ul > li .sub-menu.mega-menu.active{ display: block; }

  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    /* The theme pads 65px off the top to clear a head that overlapped
       the panel. Once .menu-main became the containing block the panel
       already starts below the head, so that padding was 68px of empty
       white between the red bar and the first row - which is what
       Sujeet was pointing at. */
    padding: 8px 0 24px; background: #fff;
  }

  /* a section heading is a label, not a page title */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > .title,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item h4.title{
    font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: #ac1f23;
    margin: 20px 0 6px; padding: 0 20px; border: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item:first-child > .title{
    margin-top: 6px;
  }

  /* the links */
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
    display: block; padding: 0 20px; line-height: 46px; height: 46px;
    font-size: 15px; color: #3d3630; font-family: "Noto Sans", sans-serif;
    /* the theme sets 700 on every menu link, which reads as shouting
       once the drawer is a list of twenty of them */
    font-weight: 500;
    border-bottom: 1px solid #f7f1ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header .menu > ul > li .sub-menu > ul > li:last-child > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li:last-child > a{
    border-bottom: 0;
  }
  .header .menu > ul > li .sub-menu > ul > li > a:active,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:active{
    background: #fdf6ef; color: #ac1f23;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul{ margin-bottom: 0; }

  /* nothing in the drawer is a mega-menu picture or a promo panel */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item img{ display: none; }


  /* ── the logo in the head ─────────────────────────── */
  .header .menu .mobile-menu-head{ padding-right: 0; }
  .header .menu .mobile-menu-head .md-logo{
    display: flex !important; align-items: center; height: 58px;
    padding: 0 0 0 18px; flex: 0 0 auto;
  }
  .header .menu .mobile-menu-head .md-logo img{
    height: 42px; width: auto; display: block;
    filter: brightness(0) invert(1);      /* the mark reads white on the red */
  }
  /* with a logo present the word mark is not needed beside it */
  .header .menu .mobile-menu-head .md-logo + .current-menu-title:empty::before{
    content: none;
  }
  .header .menu .mobile-menu-head .current-menu-title{ flex: 1 1 auto; }
  .header .menu .mobile-menu-head.active .md-logo{ display: none; }

  /* ── the drawer is a column: head, list, actions ──── */
  .header .menu{ display: flex; flex-direction: column; }
  .header .menu .menu-main{
    flex: 1 1 auto; height: auto; min-height: 0;
    /* the submenu panels are absolute; without this they measure
       themselves against the whole drawer and cover the quick
       actions at its foot */
    position: relative;
  }

  /* ── the quick actions, pinned at the foot ────────── */
  .md-actions{
    display: grid !important;
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #f2e9df; background: #fff; display: grid; gap: 9px;
  }
  .md-act{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .md-act--go{ background: #ac1f23; color: #fff; }
  .md-act--go i{ font-size: 12px; transform: rotate(-35deg); }
  .md-act__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .md-act--alt{
    background: #fdf6ef; color: #ac1f23; border: 1px solid #f0e2d2; font-size: 13px;
  }
  .md-act--alt i{ font-size: 14px; }
  /* These are <a> elements, so every link state has to be named or the
     browser's own blue comes back on hover - which it did. */
  .md-act, .md-act:link, .md-act:visited,
  .md-act:hover, .md-act:focus, .md-act:active{ text-decoration: none; }
  .md-act--go, .md-act--go:link, .md-act--go:visited,
  .md-act--go:hover, .md-act--go:focus, .md-act--go:active{
    color: #fff; background: #ac1f23;
  }
  .md-act--alt, .md-act--alt:link, .md-act--alt:visited,
  .md-act--alt:hover, .md-act--alt:focus, .md-act--alt:active{
    color: #ac1f23; background: #fdf6ef;
  }
  .md-act:hover{ filter: brightness(.93); }
  .md-act:active{ opacity: .85; }

  /* the submenu panel must stop above the actions, not cover them */
  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    height: auto; bottom: 0; top: 0;
  }

  /* the parent's own page, first row of its own submenu */
  .header .menu .md-self{ display: block !important; margin-bottom: 2px; }
  .header .menu .md-self > ul > li > a{
    font-weight: 600 !important; color: #241c16 !important;
    border-bottom: 1px solid #f2e9df !important;
  }

  /* With the drawer open, the floating Apply Now tab, the WhatsApp
     button and the chat bubble sat on top of the quick actions - two
     sets of the same call to action fighting over the same corner. */
  body:has(.menu.active) .apply-tab,
  body:has(.menu.active) .wa-float,
  body:has(.menu.active) .admi-side,
  body:has(.menu.active) .bomisw,
  body:has(.menu.active) [class*="chat-widget"],
  body:has(.menu.active) iframe[src*="widget"]{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }

  .menu-overlay{ background-color: rgba(20, 8, 3, .55); }
}
/* --- the mobile menu, made properly ---------------------------------
   The theme has mobile rules for mega-menu-column-3 and -4 and none for
   -2 or for a single column, so those two kept their desktop 50% widths
   inside a 320px drawer and overlapped. */
@media (max-width: 991px){

  /* the drawer itself */
  .header .menu{
    width: min(86vw, 360px);
    box-shadow: 0 0 60px rgba(20, 8, 3, .28);
    background: #fff;
    /* The theme gives .header `will-change: transform` once the page is
       scrolled (its .is-in state). will-change creates a containing
       block for fixed descendants exactly as a transform does, so the
       drawer's own `height: 100%` stopped meaning the viewport and
       started meaning the header - 62px. The drawer opened as a bare
       red bar with nothing under it, but only after scrolling, which is
       why it looked intermittent. Viewport units cannot be captured
       that way. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* the head: the school's red, not a bare white strip */
  .header .menu .mobile-menu-head{
    height: 58px; background: #ac1f23; border-bottom: 0;
  }
  .header .menu .mobile-menu-head .current-menu-title{
    font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; color: #fff; padding-left: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* At the top level the theme leaves this element empty, which turned
     the head into a bare red bar with a cross in it and nothing else -
     it read as a fault rather than as a heading. The school's name sits
     there until a submenu gives it a title. */
  .header .menu .mobile-menu-head .current-menu-title:empty::before{
    content: "Birla Open Minds";
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    opacity: .95;
  }
  .header .menu .mobile-menu-head .go-back,
  .header .menu .mobile-menu-head .mobile-menu-close{
    height: 58px; width: 54px; color: #fff; font-size: 22px;
    border-color: rgba(255,255,255,.22);
  }
  .header .menu .mobile-menu-head .mobile-menu-close{ font-size: 28px; line-height: 58px; }

  /* top level */
  .header .menu > ul > li > a{
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
    line-height: 54px; height: 54px; color: #241c16;
    padding: 0 52px 0 20px; border-bottom: 1px solid #f2e9df;
  }
  .header .menu > ul > li > a i{
    height: 54px; line-height: 54px; width: 52px; color: #ac1f23; font-size: 15px;
  }
  .header .menu > ul > li:last-child > a{ border-bottom: 0; }

  /* EVERY column is full width in the drawer, whatever the desktop
     layout is - this is the rule the theme never had for two columns
     or for a single one, and it is the whole fault he was looking at */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
    flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu{
    display: none; flex-wrap: wrap;
  }
  .header .menu > ul > li .sub-menu.mega-menu.active{ display: block; }

  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    /* The theme pads 65px off the top to clear a head that overlapped
       the panel. Once .menu-main became the containing block the panel
       already starts below the head, so that padding was 68px of empty
       white between the red bar and the first row - which is what
       Sujeet was pointing at. */
    padding: 8px 0 24px; background: #fff;
  }

  /* a section heading is a label, not a page title */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > .title,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item h4.title{
    font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: #ac1f23;
    margin: 20px 0 6px; padding: 0 20px; border: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item:first-child > .title{
    margin-top: 6px;
  }

  /* the links */
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
    display: block; padding: 0 20px; line-height: 46px; height: 46px;
    font-size: 15px; color: #3d3630; font-family: "Noto Sans", sans-serif;
    /* the theme sets 700 on every menu link, which reads as shouting
       once the drawer is a list of twenty of them */
    font-weight: 500;
    border-bottom: 1px solid #f7f1ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header .menu > ul > li .sub-menu > ul > li:last-child > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li:last-child > a{
    border-bottom: 0;
  }
  .header .menu > ul > li .sub-menu > ul > li > a:active,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:active{
    background: #fdf6ef; color: #ac1f23;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul{ margin-bottom: 0; }

  /* nothing in the drawer is a mega-menu picture or a promo panel */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item img{ display: none; }


  /* ── the logo in the head ─────────────────────────── */
  .header .menu .mobile-menu-head{ padding-right: 0; }
  .header .menu .mobile-menu-head .md-logo{
    display: flex !important; align-items: center; height: 58px;
    padding: 0 0 0 18px; flex: 0 0 auto;
  }
  .header .menu .mobile-menu-head .md-logo img{
    height: 42px; width: auto; display: block;
    filter: brightness(0) invert(1);      /* the mark reads white on the red */
  }
  /* with a logo present the word mark is not needed beside it */
  .header .menu .mobile-menu-head .md-logo + .current-menu-title:empty::before{
    content: none;
  }
  .header .menu .mobile-menu-head .current-menu-title{ flex: 1 1 auto; }
  .header .menu .mobile-menu-head.active .md-logo{ display: none; }

  /* ── the drawer is a column: head, list, actions ──── */
  .header .menu{ display: flex; flex-direction: column; }
  .header .menu .menu-main{
    flex: 1 1 auto; height: auto; min-height: 0;
    /* the submenu panels are absolute; without this they measure
       themselves against the whole drawer and cover the quick
       actions at its foot */
    position: relative;
  }

  /* ── the quick actions, pinned at the foot ────────── */
  .md-actions{
    display: grid !important;
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #f2e9df; background: #fff; display: grid; gap: 9px;
  }
  .md-act{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .md-act--go{ background: #ac1f23; color: #fff; }
  .md-act--go i{ font-size: 12px; transform: rotate(-35deg); }
  .md-act__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .md-act--alt{
    background: #fdf6ef; color: #ac1f23; border: 1px solid #f0e2d2; font-size: 13px;
  }
  .md-act--alt i{ font-size: 14px; }
  /* These are <a> elements, so every link state has to be named or the
     browser's own blue comes back on hover - which it did. */
  .md-act, .md-act:link, .md-act:visited,
  .md-act:hover, .md-act:focus, .md-act:active{ text-decoration: none; }
  .md-act--go, .md-act--go:link, .md-act--go:visited,
  .md-act--go:hover, .md-act--go:focus, .md-act--go:active{
    color: #fff; background: #ac1f23;
  }
  .md-act--alt, .md-act--alt:link, .md-act--alt:visited,
  .md-act--alt:hover, .md-act--alt:focus, .md-act--alt:active{
    color: #ac1f23; background: #fdf6ef;
  }
  .md-act:hover{ filter: brightness(.93); }
  .md-act:active{ opacity: .85; }

  /* the submenu panel must stop above the actions, not cover them */
  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    height: auto; bottom: 0; top: 0;
  }

  /* the parent's own page, first row of its own submenu */
  .header .menu .md-self{ display: block !important; margin-bottom: 2px; }
  .header .menu .md-self > ul > li > a{
    font-weight: 600 !important; color: #241c16 !important;
    border-bottom: 1px solid #f2e9df !important;
  }

  /* With the drawer open, the floating Apply Now tab, the WhatsApp
     button and the chat bubble sat on top of the quick actions - two
     sets of the same call to action fighting over the same corner. */
  body:has(.menu.active) .apply-tab,
  body:has(.menu.active) .wa-float,
  body:has(.menu.active) .admi-side,
  body:has(.menu.active) .bomisw,
  body:has(.menu.active) [class*="chat-widget"],
  body:has(.menu.active) iframe[src*="widget"]{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }

  .menu-overlay{ background-color: rgba(20, 8, 3, .55); }
}
/* --- the mobile menu, made properly ---------------------------------
   The theme has mobile rules for mega-menu-column-3 and -4 and none for
   -2 or for a single column, so those two kept their desktop 50% widths
   inside a 320px drawer and overlapped. */
@media (max-width: 991px){

  /* the drawer itself */
  .header .menu{
    width: min(86vw, 360px);
    box-shadow: 0 0 60px rgba(20, 8, 3, .28);
    background: #fff;
    /* The theme gives .header `will-change: transform` once the page is
       scrolled (its .is-in state). will-change creates a containing
       block for fixed descendants exactly as a transform does, so the
       drawer's own `height: 100%` stopped meaning the viewport and
       started meaning the header - 62px. The drawer opened as a bare
       red bar with nothing under it, but only after scrolling, which is
       why it looked intermittent. Viewport units cannot be captured
       that way. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* the head: the school's red, not a bare white strip */
  .header .menu .mobile-menu-head{
    height: 58px; background: #ac1f23; border-bottom: 0;
  }
  .header .menu .mobile-menu-head .current-menu-title{
    font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; color: #fff; padding-left: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* At the top level the theme leaves this element empty, which turned
     the head into a bare red bar with a cross in it and nothing else -
     it read as a fault rather than as a heading. The school's name sits
     there until a submenu gives it a title. */
  .header .menu .mobile-menu-head .current-menu-title:empty::before{
    content: "Birla Open Minds";
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    opacity: .95;
  }
  .header .menu .mobile-menu-head .go-back,
  .header .menu .mobile-menu-head .mobile-menu-close{
    height: 58px; width: 54px; color: #fff; font-size: 22px;
    border-color: rgba(255,255,255,.22);
  }
  .header .menu .mobile-menu-head .mobile-menu-close{ font-size: 28px; line-height: 58px; }

  /* top level */
  .header .menu > ul > li > a{
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
    line-height: 54px; height: 54px; color: #241c16;
    padding: 0 52px 0 20px; border-bottom: 1px solid #f2e9df;
  }
  .header .menu > ul > li > a i{
    height: 54px; line-height: 54px; width: 52px; color: #ac1f23; font-size: 15px;
  }
  .header .menu > ul > li:last-child > a{ border-bottom: 0; }

  /* EVERY column is full width in the drawer, whatever the desktop
     layout is - this is the rule the theme never had for two columns
     or for a single one, and it is the whole fault he was looking at */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
    flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu{
    display: none; flex-wrap: wrap;
  }
  .header .menu > ul > li .sub-menu.mega-menu.active{ display: block; }

  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    /* The theme pads 65px off the top to clear a head that overlapped
       the panel. Once .menu-main became the containing block the panel
       already starts below the head, so that padding was 68px of empty
       white between the red bar and the first row - which is what
       Sujeet was pointing at. */
    padding: 8px 0 24px; background: #fff;
  }

  /* a section heading is a label, not a page title */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > .title,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item h4.title{
    font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: #ac1f23;
    margin: 20px 0 6px; padding: 0 20px; border: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item:first-child > .title{
    margin-top: 6px;
  }

  /* the links */
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
    display: block; padding: 0 20px; line-height: 46px; height: 46px;
    font-size: 15px; color: #3d3630; font-family: "Noto Sans", sans-serif;
    /* the theme sets 700 on every menu link, which reads as shouting
       once the drawer is a list of twenty of them */
    font-weight: 500;
    border-bottom: 1px solid #f7f1ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header .menu > ul > li .sub-menu > ul > li:last-child > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li:last-child > a{
    border-bottom: 0;
  }
  .header .menu > ul > li .sub-menu > ul > li > a:active,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:active{
    background: #fdf6ef; color: #ac1f23;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul{ margin-bottom: 0; }

  /* nothing in the drawer is a mega-menu picture or a promo panel */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item img{ display: none; }


  /* ── the logo in the head ─────────────────────────── */
  .header .menu .mobile-menu-head{ padding-right: 0; }
  .header .menu .mobile-menu-head .md-logo{
    display: flex !important; align-items: center; height: 58px;
    padding: 0 0 0 18px; flex: 0 0 auto;
  }
  .header .menu .mobile-menu-head .md-logo img{
    height: 42px; width: auto; display: block;
    filter: brightness(0) invert(1);      /* the mark reads white on the red */
  }
  /* with a logo present the word mark is not needed beside it */
  .header .menu .mobile-menu-head .md-logo + .current-menu-title:empty::before{
    content: none;
  }
  .header .menu .mobile-menu-head .current-menu-title{ flex: 1 1 auto; }
  .header .menu .mobile-menu-head.active .md-logo{ display: none; }

  /* ── the drawer is a column: head, list, actions ──── */
  .header .menu{ display: flex; flex-direction: column; }
  .header .menu .menu-main{
    flex: 1 1 auto; height: auto; min-height: 0;
    /* the submenu panels are absolute; without this they measure
       themselves against the whole drawer and cover the quick
       actions at its foot */
    position: relative;
  }

  /* ── the quick actions, pinned at the foot ────────── */
  .md-actions{
    display: grid !important;
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #f2e9df; background: #fff; display: grid; gap: 9px;
  }
  .md-act{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .md-act--go{ background: #ac1f23; color: #fff; }
  .md-act--go i{ font-size: 12px; transform: rotate(-35deg); }
  .md-act__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .md-act--alt{
    background: #fdf6ef; color: #ac1f23; border: 1px solid #f0e2d2; font-size: 13px;
  }
  .md-act--alt i{ font-size: 14px; }
  /* These are <a> elements, so every link state has to be named or the
     browser's own blue comes back on hover - which it did. */
  .md-act, .md-act:link, .md-act:visited,
  .md-act:hover, .md-act:focus, .md-act:active{ text-decoration: none; }
  .md-act--go, .md-act--go:link, .md-act--go:visited,
  .md-act--go:hover, .md-act--go:focus, .md-act--go:active{
    color: #fff; background: #ac1f23;
  }
  .md-act--alt, .md-act--alt:link, .md-act--alt:visited,
  .md-act--alt:hover, .md-act--alt:focus, .md-act--alt:active{
    color: #ac1f23; background: #fdf6ef;
  }
  .md-act:hover{ filter: brightness(.93); }
  .md-act:active{ opacity: .85; }

  /* the submenu panel must stop above the actions, not cover them */
  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    height: auto; bottom: 0; top: 0;
  }

  /* the parent's own page, first row of its own submenu */
  .header .menu .md-self{ display: block !important; margin-bottom: 2px; }
  .header .menu .md-self > ul > li > a{
    font-weight: 600 !important; color: #241c16 !important;
    border-bottom: 1px solid #f2e9df !important;
  }

  /* With the drawer open, the floating Apply Now tab, the WhatsApp
     button and the chat bubble sat on top of the quick actions - two
     sets of the same call to action fighting over the same corner. */
  body:has(.menu.active) .apply-tab,
  body:has(.menu.active) .wa-float,
  body:has(.menu.active) .admi-side,
  body:has(.menu.active) .bomisw,
  body:has(.menu.active) [class*="chat-widget"],
  body:has(.menu.active) iframe[src*="widget"]{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }

  .menu-overlay{ background-color: rgba(20, 8, 3, .55); }
}
/* --- the mobile menu, made properly ---------------------------------
   The theme has mobile rules for mega-menu-column-3 and -4 and none for
   -2 or for a single column, so those two kept their desktop 50% widths
   inside a 320px drawer and overlapped. */
@media (max-width: 991px){

  /* the drawer itself */
  .header .menu{
    width: min(86vw, 360px);
    box-shadow: 0 0 60px rgba(20, 8, 3, .28);
    background: #fff;
    /* The theme gives .header `will-change: transform` once the page is
       scrolled (its .is-in state). will-change creates a containing
       block for fixed descendants exactly as a transform does, so the
       drawer's own `height: 100%` stopped meaning the viewport and
       started meaning the header - 62px. The drawer opened as a bare
       red bar with nothing under it, but only after scrolling, which is
       why it looked intermittent. Viewport units cannot be captured
       that way. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* the head: the school's red, not a bare white strip */
  .header .menu .mobile-menu-head{
    height: 58px; background: #ac1f23; border-bottom: 0;
  }
  .header .menu .mobile-menu-head .current-menu-title{
    font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; color: #fff; padding-left: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* At the top level the theme leaves this element empty, which turned
     the head into a bare red bar with a cross in it and nothing else -
     it read as a fault rather than as a heading. The school's name sits
     there until a submenu gives it a title. */
  .header .menu .mobile-menu-head .current-menu-title:empty::before{
    content: "Birla Open Minds";
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    opacity: .95;
  }
  .header .menu .mobile-menu-head .go-back,
  .header .menu .mobile-menu-head .mobile-menu-close{
    height: 58px; width: 54px; color: #fff; font-size: 22px;
    border-color: rgba(255,255,255,.22);
  }
  .header .menu .mobile-menu-head .mobile-menu-close{ font-size: 28px; line-height: 58px; }

  /* top level */
  .header .menu > ul > li > a{
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
    line-height: 54px; height: 54px; color: #241c16;
    padding: 0 52px 0 20px; border-bottom: 1px solid #f2e9df;
  }
  .header .menu > ul > li > a i{
    height: 54px; line-height: 54px; width: 52px; color: #ac1f23; font-size: 15px;
  }
  .header .menu > ul > li:last-child > a{ border-bottom: 0; }

  /* EVERY column is full width in the drawer, whatever the desktop
     layout is - this is the rule the theme never had for two columns
     or for a single one, and it is the whole fault he was looking at */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
    flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu{
    display: none; flex-wrap: wrap;
  }
  .header .menu > ul > li .sub-menu.mega-menu.active{ display: block; }

  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    /* The theme pads 65px off the top to clear a head that overlapped
       the panel. Once .menu-main became the containing block the panel
       already starts below the head, so that padding was 68px of empty
       white between the red bar and the first row - which is what
       Sujeet was pointing at. */
    padding: 8px 0 24px; background: #fff;
  }

  /* a section heading is a label, not a page title */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > .title,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item h4.title{
    font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: #ac1f23;
    margin: 20px 0 6px; padding: 0 20px; border: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item:first-child > .title{
    margin-top: 6px;
  }

  /* the links */
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
    display: block; padding: 0 20px; line-height: 46px; height: 46px;
    font-size: 15px; color: #3d3630; font-family: "Noto Sans", sans-serif;
    /* the theme sets 700 on every menu link, which reads as shouting
       once the drawer is a list of twenty of them */
    font-weight: 500;
    border-bottom: 1px solid #f7f1ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header .menu > ul > li .sub-menu > ul > li:last-child > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li:last-child > a{
    border-bottom: 0;
  }
  .header .menu > ul > li .sub-menu > ul > li > a:active,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:active{
    background: #fdf6ef; color: #ac1f23;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul{ margin-bottom: 0; }

  /* nothing in the drawer is a mega-menu picture or a promo panel */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item img{ display: none; }


  /* ── the logo in the head ─────────────────────────── */
  .header .menu .mobile-menu-head{ padding-right: 0; }
  .header .menu .mobile-menu-head .md-logo{
    display: flex !important; align-items: center; height: 58px;
    padding: 0 0 0 18px; flex: 0 0 auto;
  }
  .header .menu .mobile-menu-head .md-logo img{
    height: 42px; width: auto; display: block;
    filter: brightness(0) invert(1);      /* the mark reads white on the red */
  }
  /* with a logo present the word mark is not needed beside it */
  .header .menu .mobile-menu-head .md-logo + .current-menu-title:empty::before{
    content: none;
  }
  .header .menu .mobile-menu-head .current-menu-title{ flex: 1 1 auto; }
  .header .menu .mobile-menu-head.active .md-logo{ display: none; }

  /* ── the drawer is a column: head, list, actions ──── */
  .header .menu{ display: flex; flex-direction: column; }
  .header .menu .menu-main{
    flex: 1 1 auto; height: auto; min-height: 0;
    /* the submenu panels are absolute; without this they measure
       themselves against the whole drawer and cover the quick
       actions at its foot */
    position: relative;
  }

  /* ── the quick actions, pinned at the foot ────────── */
  .md-actions{
    display: grid !important;
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #f2e9df; background: #fff; display: grid; gap: 9px;
  }
  .md-act{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .md-act--go{ background: #ac1f23; color: #fff; }
  .md-act--go i{ font-size: 12px; transform: rotate(-35deg); }
  .md-act__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .md-act--alt{
    background: #fdf6ef; color: #ac1f23; border: 1px solid #f0e2d2; font-size: 13px;
  }
  .md-act--alt i{ font-size: 14px; }
  /* These are <a> elements, so every link state has to be named or the
     browser's own blue comes back on hover - which it did. */
  .md-act, .md-act:link, .md-act:visited,
  .md-act:hover, .md-act:focus, .md-act:active{ text-decoration: none; }
  .md-act--go, .md-act--go:link, .md-act--go:visited,
  .md-act--go:hover, .md-act--go:focus, .md-act--go:active{
    color: #fff; background: #ac1f23;
  }
  .md-act--alt, .md-act--alt:link, .md-act--alt:visited,
  .md-act--alt:hover, .md-act--alt:focus, .md-act--alt:active{
    color: #ac1f23; background: #fdf6ef;
  }
  .md-act:hover{ filter: brightness(.93); }
  .md-act:active{ opacity: .85; }

  /* the submenu panel must stop above the actions, not cover them */
  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    height: auto; bottom: 0; top: 0;
  }

  /* the parent's own page, first row of its own submenu */
  .header .menu .md-self{ display: block !important; margin-bottom: 2px; }
  .header .menu .md-self > ul > li > a{
    font-weight: 600 !important; color: #241c16 !important;
    border-bottom: 1px solid #f2e9df !important;
  }

  /* With the drawer open, the floating Apply Now tab, the WhatsApp
     button and the chat bubble sat on top of the quick actions - two
     sets of the same call to action fighting over the same corner. */
  body:has(.menu.active) .apply-tab,
  body:has(.menu.active) .wa-float,
  body:has(.menu.active) .admi-side,
  body:has(.menu.active) .bomisw,
  body:has(.menu.active) [class*="chat-widget"],
  body:has(.menu.active) iframe[src*="widget"]{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }

  .menu-overlay{ background-color: rgba(20, 8, 3, .55); }
}
/* --- the mobile menu, made properly ---------------------------------
   The theme has mobile rules for mega-menu-column-3 and -4 and none for
   -2 or for a single column, so those two kept their desktop 50% widths
   inside a 320px drawer and overlapped. */
@media (max-width: 991px){

  /* the drawer itself */
  .header .menu{
    width: min(86vw, 360px);
    box-shadow: 0 0 60px rgba(20, 8, 3, .28);
    background: #fff;
    /* The theme gives .header `will-change: transform` once the page is
       scrolled (its .is-in state). will-change creates a containing
       block for fixed descendants exactly as a transform does, so the
       drawer's own `height: 100%` stopped meaning the viewport and
       started meaning the header - 62px. The drawer opened as a bare
       red bar with nothing under it, but only after scrolling, which is
       why it looked intermittent. Viewport units cannot be captured
       that way. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* the head: the school's red, not a bare white strip */
  .header .menu .mobile-menu-head{
    height: 58px; background: #ac1f23; border-bottom: 0;
  }
  .header .menu .mobile-menu-head .current-menu-title{
    font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; color: #fff; padding-left: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* At the top level the theme leaves this element empty, which turned
     the head into a bare red bar with a cross in it and nothing else -
     it read as a fault rather than as a heading. The school's name sits
     there until a submenu gives it a title. */
  .header .menu .mobile-menu-head .current-menu-title:empty::before{
    content: "Birla Open Minds";
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    opacity: .95;
  }
  .header .menu .mobile-menu-head .go-back,
  .header .menu .mobile-menu-head .mobile-menu-close{
    height: 58px; width: 54px; color: #fff; font-size: 22px;
    border-color: rgba(255,255,255,.22);
  }
  .header .menu .mobile-menu-head .mobile-menu-close{ font-size: 28px; line-height: 58px; }

  /* top level */
  .header .menu > ul > li > a{
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
    line-height: 54px; height: 54px; color: #241c16;
    padding: 0 52px 0 20px; border-bottom: 1px solid #f2e9df;
  }
  .header .menu > ul > li > a i{
    height: 54px; line-height: 54px; width: 52px; color: #ac1f23; font-size: 15px;
  }
  .header .menu > ul > li:last-child > a{ border-bottom: 0; }

  /* EVERY column is full width in the drawer, whatever the desktop
     layout is - this is the rule the theme never had for two columns
     or for a single one, and it is the whole fault he was looking at */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
    flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu{
    display: none; flex-wrap: wrap;
  }
  .header .menu > ul > li .sub-menu.mega-menu.active{ display: block; }

  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    /* The theme pads 65px off the top to clear a head that overlapped
       the panel. Once .menu-main became the containing block the panel
       already starts below the head, so that padding was 68px of empty
       white between the red bar and the first row - which is what
       Sujeet was pointing at. */
    padding: 8px 0 24px; background: #fff;
  }

  /* a section heading is a label, not a page title */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > .title,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item h4.title{
    font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: #ac1f23;
    margin: 20px 0 6px; padding: 0 20px; border: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item:first-child > .title{
    margin-top: 6px;
  }

  /* the links */
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
    display: block; padding: 0 20px; line-height: 46px; height: 46px;
    font-size: 15px; color: #3d3630; font-family: "Noto Sans", sans-serif;
    /* the theme sets 700 on every menu link, which reads as shouting
       once the drawer is a list of twenty of them */
    font-weight: 500;
    border-bottom: 1px solid #f7f1ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header .menu > ul > li .sub-menu > ul > li:last-child > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li:last-child > a{
    border-bottom: 0;
  }
  .header .menu > ul > li .sub-menu > ul > li > a:active,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:active{
    background: #fdf6ef; color: #ac1f23;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul{ margin-bottom: 0; }

  /* nothing in the drawer is a mega-menu picture or a promo panel */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item img{ display: none; }


  /* ── the logo in the head ─────────────────────────── */
  .header .menu .mobile-menu-head{ padding-right: 0; }
  .header .menu .mobile-menu-head .md-logo{
    display: flex !important; align-items: center; height: 58px;
    padding: 0 0 0 18px; flex: 0 0 auto;
  }
  .header .menu .mobile-menu-head .md-logo img{
    height: 42px; width: auto; display: block;
    filter: brightness(0) invert(1);      /* the mark reads white on the red */
  }
  /* with a logo present the word mark is not needed beside it */
  .header .menu .mobile-menu-head .md-logo + .current-menu-title:empty::before{
    content: none;
  }
  .header .menu .mobile-menu-head .current-menu-title{ flex: 1 1 auto; }
  .header .menu .mobile-menu-head.active .md-logo{ display: none; }

  /* ── the drawer is a column: head, list, actions ──── */
  .header .menu{ display: flex; flex-direction: column; }
  .header .menu .menu-main{
    flex: 1 1 auto; height: auto; min-height: 0;
    /* the submenu panels are absolute; without this they measure
       themselves against the whole drawer and cover the quick
       actions at its foot */
    position: relative;
  }

  /* ── the quick actions, pinned at the foot ────────── */
  .md-actions{
    display: grid !important;
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #f2e9df; background: #fff; display: grid; gap: 9px;
  }
  .md-act{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .md-act--go{ background: #ac1f23; color: #fff; }
  .md-act--go i{ font-size: 12px; transform: rotate(-35deg); }
  .md-act__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .md-act--alt{
    background: #fdf6ef; color: #ac1f23; border: 1px solid #f0e2d2; font-size: 13px;
  }
  .md-act--alt i{ font-size: 14px; }
  /* These are <a> elements, so every link state has to be named or the
     browser's own blue comes back on hover - which it did. */
  .md-act, .md-act:link, .md-act:visited,
  .md-act:hover, .md-act:focus, .md-act:active{ text-decoration: none; }
  .md-act--go, .md-act--go:link, .md-act--go:visited,
  .md-act--go:hover, .md-act--go:focus, .md-act--go:active{
    color: #fff; background: #ac1f23;
  }
  .md-act--alt, .md-act--alt:link, .md-act--alt:visited,
  .md-act--alt:hover, .md-act--alt:focus, .md-act--alt:active{
    color: #ac1f23; background: #fdf6ef;
  }
  .md-act:hover{ filter: brightness(.93); }
  .md-act:active{ opacity: .85; }

  /* the submenu panel must stop above the actions, not cover them */
  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    height: auto; bottom: 0; top: 0;
  }

  /* the parent's own page, first row of its own submenu */
  .header .menu .md-self{ display: block !important; margin-bottom: 2px; }
  .header .menu .md-self > ul > li > a{
    font-weight: 600 !important; color: #241c16 !important;
    border-bottom: 1px solid #f2e9df !important;
  }

  /* With the drawer open, the floating Apply Now tab, the WhatsApp
     button and the chat bubble sat on top of the quick actions - two
     sets of the same call to action fighting over the same corner. */
  body:has(.menu.active) .apply-tab,
  body:has(.menu.active) .wa-float,
  body:has(.menu.active) .admi-side,
  body:has(.menu.active) .bomisw,
  body:has(.menu.active) [class*="chat-widget"],
  body:has(.menu.active) iframe[src*="widget"]{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }

  .menu-overlay{ background-color: rgba(20, 8, 3, .55); }
}
/* --- the mobile menu, made properly ---------------------------------
   The theme has mobile rules for mega-menu-column-3 and -4 and none for
   -2 or for a single column, so those two kept their desktop 50% widths
   inside a 320px drawer and overlapped. */
@media (max-width: 991px){

  /* the drawer itself */
  .header .menu{
    width: min(86vw, 360px);
    box-shadow: 0 0 60px rgba(20, 8, 3, .28);
    background: #fff;
    /* The theme gives .header `will-change: transform` once the page is
       scrolled (its .is-in state). will-change creates a containing
       block for fixed descendants exactly as a transform does, so the
       drawer's own `height: 100%` stopped meaning the viewport and
       started meaning the header - 62px. The drawer opened as a bare
       red bar with nothing under it, but only after scrolling, which is
       why it looked intermittent. Viewport units cannot be captured
       that way. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* the head: the school's red, not a bare white strip */
  .header .menu .mobile-menu-head{
    height: 58px; background: #ac1f23; border-bottom: 0;
  }
  .header .menu .mobile-menu-head .current-menu-title{
    font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; color: #fff; padding-left: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* At the top level the theme leaves this element empty, which turned
     the head into a bare red bar with a cross in it and nothing else -
     it read as a fault rather than as a heading. The school's name sits
     there until a submenu gives it a title. */
  .header .menu .mobile-menu-head .current-menu-title:empty::before{
    content: "Birla Open Minds";
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    opacity: .95;
  }
  .header .menu .mobile-menu-head .go-back,
  .header .menu .mobile-menu-head .mobile-menu-close{
    height: 58px; width: 54px; color: #fff; font-size: 22px;
    border-color: rgba(255,255,255,.22);
  }
  .header .menu .mobile-menu-head .mobile-menu-close{ font-size: 28px; line-height: 58px; }

  /* top level */
  .header .menu > ul > li > a{
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
    line-height: 54px; height: 54px; color: #241c16;
    padding: 0 52px 0 20px; border-bottom: 1px solid #f2e9df;
  }
  .header .menu > ul > li > a i{
    height: 54px; line-height: 54px; width: 52px; color: #ac1f23; font-size: 15px;
  }
  .header .menu > ul > li:last-child > a{ border-bottom: 0; }

  /* EVERY column is full width in the drawer, whatever the desktop
     layout is - this is the rule the theme never had for two columns
     or for a single one, and it is the whole fault he was looking at */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
    flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu{
    display: none; flex-wrap: wrap;
  }
  .header .menu > ul > li .sub-menu.mega-menu.active{ display: block; }

  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    /* The theme pads 65px off the top to clear a head that overlapped
       the panel. Once .menu-main became the containing block the panel
       already starts below the head, so that padding was 68px of empty
       white between the red bar and the first row - which is what
       Sujeet was pointing at. */
    padding: 8px 0 24px; background: #fff;
  }

  /* a section heading is a label, not a page title */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > .title,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item h4.title{
    font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: #ac1f23;
    margin: 20px 0 6px; padding: 0 20px; border: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item:first-child > .title{
    margin-top: 6px;
  }

  /* the links */
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
    display: block; padding: 0 20px; line-height: 46px; height: 46px;
    font-size: 15px; color: #3d3630; font-family: "Noto Sans", sans-serif;
    /* the theme sets 700 on every menu link, which reads as shouting
       once the drawer is a list of twenty of them */
    font-weight: 500;
    border-bottom: 1px solid #f7f1ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header .menu > ul > li .sub-menu > ul > li:last-child > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li:last-child > a{
    border-bottom: 0;
  }
  .header .menu > ul > li .sub-menu > ul > li > a:active,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:active{
    background: #fdf6ef; color: #ac1f23;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul{ margin-bottom: 0; }

  /* nothing in the drawer is a mega-menu picture or a promo panel */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item img{ display: none; }


  /* ── the logo in the head ─────────────────────────── */
  .header .menu .mobile-menu-head{ padding-right: 0; }
  .header .menu .mobile-menu-head .md-logo{
    display: flex !important; align-items: center; height: 58px;
    padding: 0 0 0 18px; flex: 0 0 auto;
  }
  .header .menu .mobile-menu-head .md-logo img{
    height: 42px; width: auto; display: block;
    filter: brightness(0) invert(1);      /* the mark reads white on the red */
  }
  /* with a logo present the word mark is not needed beside it */
  .header .menu .mobile-menu-head .md-logo + .current-menu-title:empty::before{
    content: none;
  }
  .header .menu .mobile-menu-head .current-menu-title{ flex: 1 1 auto; }
  .header .menu .mobile-menu-head.active .md-logo{ display: none; }

  /* ── the drawer is a column: head, list, actions ──── */
  .header .menu{ display: flex; flex-direction: column; }
  .header .menu .menu-main{
    flex: 1 1 auto; height: auto; min-height: 0;
    /* the submenu panels are absolute; without this they measure
       themselves against the whole drawer and cover the quick
       actions at its foot */
    position: relative;
  }

  /* ── the quick actions, pinned at the foot ────────── */
  .md-actions{
    display: grid !important;
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #f2e9df; background: #fff; display: grid; gap: 9px;
  }
  .md-act{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .md-act--go{ background: #ac1f23; color: #fff; }
  .md-act--go i{ font-size: 12px; transform: rotate(-35deg); }
  .md-act__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .md-act--alt{
    background: #fdf6ef; color: #ac1f23; border: 1px solid #f0e2d2; font-size: 13px;
  }
  .md-act--alt i{ font-size: 14px; }
  /* These are <a> elements, so every link state has to be named or the
     browser's own blue comes back on hover - which it did. */
  .md-act, .md-act:link, .md-act:visited,
  .md-act:hover, .md-act:focus, .md-act:active{ text-decoration: none; }
  .md-act--go, .md-act--go:link, .md-act--go:visited,
  .md-act--go:hover, .md-act--go:focus, .md-act--go:active{
    color: #fff; background: #ac1f23;
  }
  .md-act--alt, .md-act--alt:link, .md-act--alt:visited,
  .md-act--alt:hover, .md-act--alt:focus, .md-act--alt:active{
    color: #ac1f23; background: #fdf6ef;
  }
  .md-act:hover{ filter: brightness(.93); }
  .md-act:active{ opacity: .85; }

  /* the submenu panel must stop above the actions, not cover them */
  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    height: auto; bottom: 0; top: 0;
  }

  /* the parent's own page, first row of its own submenu */
  .header .menu .md-self{ display: block !important; margin-bottom: 2px; }
  .header .menu .md-self > ul > li > a{
    font-weight: 600 !important; color: #241c16 !important;
    border-bottom: 1px solid #f2e9df !important;
  }

  /* With the drawer open, the floating Apply Now tab, the WhatsApp
     button and the chat bubble sat on top of the quick actions - two
     sets of the same call to action fighting over the same corner. */
  body:has(.menu.active) .apply-tab,
  body:has(.menu.active) .wa-float,
  body:has(.menu.active) .admi-side,
  body:has(.menu.active) .bomisw,
  body:has(.menu.active) [class*="chat-widget"],
  body:has(.menu.active) iframe[src*="widget"]{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }

  .menu-overlay{ background-color: rgba(20, 8, 3, .55); }
}
/* --- the mobile menu, made properly ---------------------------------
   The theme has mobile rules for mega-menu-column-3 and -4 and none for
   -2 or for a single column, so those two kept their desktop 50% widths
   inside a 320px drawer and overlapped. */
@media (max-width: 991px){

  /* the drawer itself */
  .header .menu{
    width: min(86vw, 360px);
    box-shadow: 0 0 60px rgba(20, 8, 3, .28);
    background: #fff;
    /* The theme gives .header `will-change: transform` once the page is
       scrolled (its .is-in state). will-change creates a containing
       block for fixed descendants exactly as a transform does, so the
       drawer's own `height: 100%` stopped meaning the viewport and
       started meaning the header - 62px. The drawer opened as a bare
       red bar with nothing under it, but only after scrolling, which is
       why it looked intermittent. Viewport units cannot be captured
       that way. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
  }

  /* the head: the school's red, not a bare white strip */
  .header .menu .mobile-menu-head{
    height: 58px; background: #ac1f23; border-bottom: 0;
  }
  .header .menu .mobile-menu-head .current-menu-title{
    font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: .02em; color: #fff; padding-left: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* At the top level the theme leaves this element empty, which turned
     the head into a bare red bar with a cross in it and nothing else -
     it read as a fault rather than as a heading. The school's name sits
     there until a submenu gives it a title. */
  .header .menu .mobile-menu-head .current-menu-title:empty::before{
    content: "Birla Open Minds";
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    opacity: .95;
  }
  .header .menu .mobile-menu-head .go-back,
  .header .menu .mobile-menu-head .mobile-menu-close{
    height: 58px; width: 54px; color: #fff; font-size: 22px;
    border-color: rgba(255,255,255,.22);
  }
  .header .menu .mobile-menu-head .mobile-menu-close{ font-size: 28px; line-height: 58px; }

  /* top level */
  .header .menu > ul > li > a{
    font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500;
    line-height: 54px; height: 54px; color: #241c16;
    padding: 0 52px 0 20px; border-bottom: 1px solid #f2e9df;
  }
  .header .menu > ul > li > a i{
    height: 54px; line-height: 54px; width: 52px; color: #ac1f23; font-size: 15px;
  }
  .header .menu > ul > li:last-child > a{ border-bottom: 0; }

  /* EVERY column is full width in the drawer, whatever the desktop
     layout is - this is the rule the theme never had for two columns
     or for a single one, and it is the whole fault he was looking at */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-2 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-3 > .list-item,
  .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
    flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu{
    display: none; flex-wrap: wrap;
  }
  .header .menu > ul > li .sub-menu.mega-menu.active{ display: block; }

  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    /* The theme pads 65px off the top to clear a head that overlapped
       the panel. Once .menu-main became the containing block the panel
       already starts below the head, so that padding was 68px of empty
       white between the red bar and the first row - which is what
       Sujeet was pointing at. */
    padding: 8px 0 24px; background: #fff;
  }

  /* a section heading is a label, not a page title */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > .title,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item h4.title{
    font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: #ac1f23;
    margin: 20px 0 6px; padding: 0 20px; border: 0;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item:first-child > .title{
    margin-top: 6px;
  }

  /* the links */
  .header .menu > ul > li .sub-menu > ul > li > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
    display: block; padding: 0 20px; line-height: 46px; height: 46px;
    font-size: 15px; color: #3d3630; font-family: "Noto Sans", sans-serif;
    /* the theme sets 700 on every menu link, which reads as shouting
       once the drawer is a list of twenty of them */
    font-weight: 500;
    border-bottom: 1px solid #f7f1ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header .menu > ul > li .sub-menu > ul > li:last-child > a,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li:last-child > a{
    border-bottom: 0;
  }
  .header .menu > ul > li .sub-menu > ul > li > a:active,
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:active{
    background: #fdf6ef; color: #ac1f23;
  }
  .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul{ margin-bottom: 0; }

  /* nothing in the drawer is a mega-menu picture or a promo panel */
  .header .menu > ul > li .sub-menu.mega-menu > .list-item img{ display: none; }


  /* ── the logo in the head ─────────────────────────── */
  .header .menu .mobile-menu-head{ padding-right: 0; }
  .header .menu .mobile-menu-head .md-logo{
    display: flex !important; align-items: center; height: 58px;
    padding: 0 0 0 18px; flex: 0 0 auto;
  }
  .header .menu .mobile-menu-head .md-logo img{
    height: 42px; width: auto; display: block;
    filter: brightness(0) invert(1);      /* the mark reads white on the red */
  }
  /* with a logo present the word mark is not needed beside it */
  .header .menu .mobile-menu-head .md-logo + .current-menu-title:empty::before{
    content: none;
  }
  .header .menu .mobile-menu-head .current-menu-title{ flex: 1 1 auto; }
  .header .menu .mobile-menu-head.active .md-logo{ display: none; }

  /* ── the drawer is a column: head, list, actions ──── */
  .header .menu{ display: flex; flex-direction: column; }
  .header .menu .menu-main{
    flex: 1 1 auto; height: auto; min-height: 0;
    /* the submenu panels are absolute; without this they measure
       themselves against the whole drawer and cover the quick
       actions at its foot */
    position: relative;
  }

  /* ── the quick actions, pinned at the foot ────────── */
  .md-actions{
    display: grid !important;
    flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #f2e9df; background: #fff; display: grid; gap: 9px;
  }
  .md-act{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .md-act--go{ background: #ac1f23; color: #fff; }
  .md-act--go i{ font-size: 12px; transform: rotate(-35deg); }
  .md-act__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .md-act--alt{
    background: #fdf6ef; color: #ac1f23; border: 1px solid #f0e2d2; font-size: 13px;
  }
  .md-act--alt i{ font-size: 14px; }
  /* These are <a> elements, so every link state has to be named or the
     browser's own blue comes back on hover - which it did. */
  .md-act, .md-act:link, .md-act:visited,
  .md-act:hover, .md-act:focus, .md-act:active{ text-decoration: none; }
  .md-act--go, .md-act--go:link, .md-act--go:visited,
  .md-act--go:hover, .md-act--go:focus, .md-act--go:active{
    color: #fff; background: #ac1f23;
  }
  .md-act--alt, .md-act--alt:link, .md-act--alt:visited,
  .md-act--alt:hover, .md-act--alt:focus, .md-act--alt:active{
    color: #ac1f23; background: #fdf6ef;
  }
  .md-act:hover{ filter: brightness(.93); }
  .md-act:active{ opacity: .85; }

  /* the submenu panel must stop above the actions, not cover them */
  .header .menu > ul > li .sub-menu,
  .header .menu > ul > li .sub-menu.mega-menu{
    height: auto; bottom: 0; top: 0;
  }

  /* the parent's own page, first row of its own submenu */
  .header .menu .md-self{ display: block !important; margin-bottom: 2px; }
  .header .menu .md-self > ul > li > a{
    font-weight: 600 !important; color: #241c16 !important;
    border-bottom: 1px solid #f2e9df !important;
  }

  /* With the drawer open, the floating Apply Now tab, the WhatsApp
     button and the chat bubble sat on top of the quick actions - two
     sets of the same call to action fighting over the same corner. */
  body:has(.menu.active) .apply-tab,
  body:has(.menu.active) .wa-float,
  body:has(.menu.active) .admi-side,
  body:has(.menu.active) .bomisw,
  body:has(.menu.active) [class*="chat-widget"],
  body:has(.menu.active) iframe[src*="widget"]{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }

  .menu-overlay{ background-color: rgba(20, 8, 3, .55); }
}
/* --- the Academics stage panels -------------------------------------
   The panel was the same cream as the page it sat on, and its three
   lists were run-on sentences of eight subjects each. */
.academy-box3.h-100{
  background: #fff;
  border: 1px solid #efe4d6;
  border-radius: 20px;
  padding: 26px 26px 24px;
  box-shadow: 0 6px 28px rgba(20, 8, 3, .07);
}

/* the header: picture, name, grade range */
.academy-box3.h-100 > .row{ margin-bottom: 20px !important; }
/* Scoped to .col-4, which is the Academics panel's own thumbnail
   column. Written as `> .row img` on 7 October it also caught the Head
   of School's portrait on the About page - a 250x250 square inside the
   same class - and forced it into a 4:3 box, so a circle came out an
   oval and 277px wide on a phone. One selector, two different pictures. */
.academy-box3.h-100 > .row > .col-4 img{
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  border-radius: 14px; box-shadow: 0 4px 16px rgba(20, 8, 3, .14);
}
.academy-box3.h-100 h3{
  font-family: "Poppins", sans-serif; font-size: 23px; font-weight: 600;
  line-height: 1.18; letter-spacing: -.015em; color: #241c16; margin: 0 0 9px;
}
/* the grade range was parentheses inside the heading; it is a pill now */
.academy-box3.h-100 h3 .qual{
  display: inline-block; margin: 0; font-family: "Poppins", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #ac1f23; background: #fdf6ef; border: 1px solid #f3e6d7;
  border-radius: 999px; padding: 4px 11px; vertical-align: middle;
  position: relative; top: -2px;
}
.academy-box3.h-100 .stage-grades{
  font-size: 13px; color: #8a7968; margin: 0; letter-spacing: .01em;
}
.academy-box3.h-100 .stage-grades strong{ font-weight: 500; }

/* ── the lists ───────────────────────────────────── */
.sd{ margin: 16px 0 0; }
.sd__k{
  font-family: "Poppins", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #ac1f23; margin: 0 0 9px;
  text-align: left !important;
}
.sd__v{ margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.sd-chip{
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: #fbf6f0; border: 1px solid #f0e5d8;
  font-size: 13px; line-height: 1.45; color: #4a3d33;
  white-space: nowrap;
  /* never wider than what holds it: "Information and Communication
     Technology" is 303px and pushed a 320px screen 32px sideways */
  max-width: 100%;
}
@media (max-width: 575px){
  /* at this width a long subject has to be allowed to take two lines */
  .sd-chip{ white-space: normal; }
}

/* Assessment is a sentence, so it stays one - set off by a rule rather
   than dressed up as something it is not */
.sd--note{
  margin-top: 20px; padding: 14px 0 2px 16px;
  border-top: 1px solid #f4ece3; border-left: 0;
}
.sd--note .sd__v{
  display: block; font-size: 15px; line-height: 1.65; color: #5c4b3e;
  text-align: left !important;
}
.sd--note{ padding-left: 0; }

@media (max-width: 575px){
  .academy-box3.h-100{ padding: 20px 18px 18px; border-radius: 16px; }
  .academy-box3.h-100 h3{ font-size: 20px; }
  .sd-chip{ font-size: 12px; padding: 4px 10px; }
}
/* --- the footer, and one red on hover -------------------------------
   .flinks a had font-size 14px against line-height 12px, so every link
   that wrapped printed its two lines on top of each other. */
/* The theme's own rule is `ul.flinks li a { line-height: .75rem }` -
   twelve pixels for fourteen-pixel text. It has to be matched selector
   for selector, or it keeps winning on specificity. */
ul.flinks li a, ul.flinks li, .flinks a, .foot-affil, footer li{
  line-height: 1.55;
}
.flinks li{ margin-bottom: 9px; }
.flinks a{ display: inline-block; }

/* the address block: nothing here should break in the middle */
footer .foot-icon, footer .foot-icon a{ line-height: 1.6; }
footer a[href^="tel:"], footer a[href^="https://wa.me"]{ white-space: nowrap; }
/* the telephone row: the number, then WhatsApp, both as links */
footer .foot-icon a{ color: inherit; }
footer .foot-icon a:hover{ color: #f8a326; }
footer .foot-icon spacer{ margin: 0 10px; opacity: .55; }
footer .foot-icon .fa-whatsapp{ margin-right: 5px; }
footer .foot-sep{ margin: 0 7px; opacity: .5; }
footer a[href^="mailto:"]{ word-break: break-word; }

/* the quick-links columns: let them reflow instead of crushing */
@media (max-width: 991px){
  .flinks{ column-gap: 18px; }
  .flinks li{ margin-bottom: 11px; }
}
@media (max-width: 575px){
  footer .copyright, footer .copyright p{ line-height: 1.6; text-align: center; }
  .flinks li{ margin-bottom: 13px; }
}

/* The bottom bar: "© 2026 BOMIS Bhopal" on the left, "Powered by
   Govindani Infotech Pvt. Ltd. / Disclaimer / Privacy" on the right.
   Stacking it was set at 767px, but Bootstrap's own col-md-6 starts at
   768 - so at exactly 768 the two halves were 351px each, the right
   one held forty-eight characters of text, and "Powered by ..." and
   "Disclaimer" printed on top of each other. On 32 pages. The stack
   now starts where the columns themselves start. */
.copyright .row{ row-gap: 10px; }
.copyright p, .copyright .flinks{ line-height: 1.6; }
@media (max-width: 991px){
  .copyright .col-md-6, .copyright .col-md-6.text-right{
    text-align: center !important; flex: 0 0 100%; max-width: 100%;
  }
}
/* and above that, let the right half wrap instead of colliding */
.copyright .col-md-6.text-right{
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: baseline; column-gap: 6px; row-gap: 4px;
}
@media (max-width: 991px){
  .copyright .col-md-6.text-right{ justify-content: center; }
}

/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}
/* --- one red on hover too ---
   #ac1f23 was a second red. Same red, darkened in place. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible{
  background: #ac1f23; color: #fff;
  filter: brightness(.86);
}
.rts-theme-btn:hover{ color: #fff; }

/* the two actions in the orange panel: one column, honest spacing, and
   never overlapping whatever the panel's width turns out to be */
.orange-box .ob-acts{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
.orange-box .ob-acts .rts-theme-btn{
  margin: 0; flex: 0 1 auto;
}

/* --- one red, including on hover ------------------------------------
   #ac1f23 was a second red doing the work of a hover state. These
   darken the one red in place instead. */
.header .item-right .hdr-brochure:hover,
.header .item-right .hdr-brochure:focus-visible,
.gal-fab:hover,
.gal-fab[aria-expanded="true"], .gal-fab.is-filtered{
  filter: brightness(.86);
}
.mpd-dl:hover, .mpd-doc:hover, .doc-dl:hover, .sv-ask__alt:hover{
  filter: brightness(.86);
}
/* --- the enquiry dialog's submit bar --------------------------------
   Eleven fields scroll; the button does not go with them. */
.bf-dialog{
  display: flex; flex-direction: column;
  overflow: hidden;                 /* the body scrolls, not the shell */
  padding-bottom: 0;
}
.bf-dialog > .bf-form{
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 4px; min-height: 0;
  /* room for the bar so the last field is never hidden behind it */
  scroll-padding-bottom: 86px;
}
.bf-actions{
  position: sticky; bottom: 0; z-index: 2;
  margin: 10px -34px 0; padding: 14px 34px calc(18px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #f2e9df;
  box-shadow: 0 -10px 22px rgba(255,255,255,.95);
}
/* the done panel has no form to scroll, so it keeps the old padding */
.bf-dialog > .bf-done{ padding-bottom: 26px; }

/* ── the form in steps ───────────────────────────── */
.bf-step{ display: none; grid-column: 1/-1; }
.bf-step.is-on{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.bf-step .bf-group{ margin-top: 0; }
.bf-back{
  border: 1px solid #e2d8cf; background: #fff; color: #5b534c;
  border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.bf-back:hover{ border-color: #ac1f23; color: #ac1f23; }
.bf-count{
  font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #a08d7c;
  margin-left: auto;
}
.bf-actions .bf-call{ flex-basis: 100%; }

@media (max-width: 575px){
  .bf-step.is-on{ grid-template-columns: 1fr; }
  .bf-count{ margin-left: 0; }
  .bf-actions{
    margin: 10px -20px 0;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .bf-dialog > .bf-form{ scroll-padding-bottom: 96px; }
}
/* --- two controls that were anchors ---------------------------------
   A <button> does not inherit the page's font or lose its own chrome
   the way an <a> does, so the two that changed tag are told to. */
button.openbtn, button.rts-theme-btn{
  font-family: inherit; font-size: inherit; line-height: inherit;
  background: none; border: 0; cursor: pointer; -webkit-appearance: none;
  appearance: none;
}
button.rts-theme-btn{ background: #ac1f23; color: #fff; }
button.openbtn:focus-visible, button.rts-theme-btn:focus-visible{
  outline: 3px solid #ac1f23; outline-offset: 2px;
}
/* --- 7 October ------------------------------------------------------
   The title band on a campus card is absolute with bottom:0, but an h3
   keeps its margin, so the band stopped eight pixels above the card's
   edge and a sliver of the photograph showed through against the red
   section behind it. Read as two reds that did not match; it was a gap. */
.flip-card-front h3{ margin: 0; }
/* --- the copyright bar ----------------------------------------------
   Disclaimer and Privacy sat at the tail of the right-hand column and
   wrapped under the floating Apply Now pill on a narrow window. Their
   own line now, and room beneath the bar for the floats. */
.copyright .cr-legal{
  text-align: center; padding-top: 12px; margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.copyright .cr-legal a{ white-space: nowrap; }
/* The floating controls live over the bottom of the viewport, so the
   bar needs clearance under it - but only as much as they actually
   take. Measured at 375px: the highest of them starts 60px from the
   bottom edge, and the first pass reserved 104, which left 44px of
   empty red under the last line. 68 is the 60 they need and a little
   breath, and nothing more. */
.copyright{ padding-bottom: 20px; }
@media (max-width: 991px){
  .copyright{ padding-bottom: 68px; }
}
@media (max-width: 575px){
  .copyright .cr-legal{ padding-top: 10px; }
}
/* --- the footer's Quick Links ---------------------------------------
   Three columns of 3, 3 and 4 links. At col-6 the third starts a new
   row on its own and leaves the half beside it empty. Below 768px the
   boxes step out of the way and the ten links become one even grid. */
@media (max-width: 767px){
  footer .col-md-6 > .row{
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 18px; row-gap: 0;
  }
  footer .col-md-6 > .row > .col-md-12{ grid-column: 1 / -1; }
  footer .col-md-6 > .row > .col-md-4{ display: contents; }
  footer .col-md-6 > .row ul.flinks{ display: contents; }
  footer .col-md-6 > .row ul.flinks li{ margin: 0 0 14px; }
  footer .col-md-6 > .row ul.flinks li a{ display: inline-block; }
}
@media (max-width: 575px){
  footer .col-md-6 > .row{ column-gap: 14px; }
  footer .col-md-6 > .row ul.flinks li{ margin-bottom: 12px; }
}
/* --- a photograph that opens says so --------------------------------
   Every tile on the site opens in a lightbox on click and every one of
   them kept the arrow cursor, so nothing told a reader they could. */
.gal-tile, .ev-tile, .frame, .sc, [data-fancybox],
.gal-tile img, .ev-tile img, .frame img, [data-fancybox] img{
  cursor: pointer;
}
.gal-tile:focus-visible, .ev-tile:focus-visible, .frame:focus-visible,
[data-fancybox]:focus-visible{
  outline: 3px solid #ac1f23; outline-offset: 3px;
}
/* --- the festivals and assemblies pages ------------------------------
   .gal-ix and .gal-meta had no rules at all, so the numeral, the title
   and the date rendered as three defaults in a row. */
.ev-list{ display: grid; gap: clamp(22px, 3vw, 34px); }

.ev-list .gal-sec{
  background: #fff;
  border: 1px solid #efe4d6;
  border-radius: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 6px 28px rgba(20, 8, 3, .07);
  margin: 0;
}

/* the header: numeral, title, date */
.ev-list .gal-head{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 14px; margin: 0 0 14px; padding: 0; border: 0;
}
.ev-list .gal-ix{
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ac1f23; color: #fff;
  font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .01em;
}
.ev-list .gal-title{
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: "Poppins", sans-serif; font-size: 23px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.015em; color: #241c16;
  border: 0; padding: 0;
}
.ev-list .gal-meta{ flex: 0 0 auto; }
.ev-list .gal-date{
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #ac1f23;
  background: #fdf6ef; border: 1px solid #f3e6d7;
  border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}

.ev-list .gal-line{
  margin: 0 0 20px; font-size: 17px; line-height: 1.7; color: #5c4b3e;
  max-width: 68ch;
}

/* the photographs: the first leads, the rest follow */
.ev-list .gal-grid{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; grid-auto-rows: auto;
}
.ev-list .gal-grid > .gal-tile{
  grid-column: span 1; grid-row: span 1;
  border-radius: 14px; overflow: hidden; position: relative;
  aspect-ratio: 16 / 9;
}
.ev-list .gal-grid > .gal-tile:first-child{ grid-column: span 2; grid-row: span 2; }
.ev-list .gal-grid > .gal-tile img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.ev-list .gal-tile:hover img, .ev-list .gal-tile:focus-visible img{
  transform: scale(1.05);
}
.ev-list .gal-tile::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to top, rgba(20,8,3,.22), rgba(20,8,3,0) 45%);
  opacity: 0; transition: opacity .3s ease;
}
.ev-list .gal-tile:hover::after{ opacity: 1; }

@media (max-width: 767px){
  .ev-list .gal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ev-list .gal-grid > .gal-tile:first-child{ grid-column: span 2; grid-row: span 1; }
  .ev-list .gal-title{ font-size: 20px; }
  .ev-list .gal-ix{ width: 34px; height: 34px; font-size: 13px; }
  .ev-list .gal-line{ font-size: 16px; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .ev-list .gal-tile img{ transition: none; }
  .ev-list .gal-tile:hover img{ transform: none; }
}
/* --- three names that had no rules ----------------------------------
   Written into the markup and never given one. */

/* Applying, by age group - the foot of the Admission Process page */
.ap-also{
  background: #fdf8f2; border: 1px solid #efe4d6; border-radius: 20px;
  padding: clamp(22px, 3vw, 34px); margin-top: clamp(28px, 4vw, 48px);
}
.ap-also .ap-sub{ margin-bottom: 14px; }
.ap-also .ap-lede{ margin-bottom: 22px; max-width: 62ch; }
.ap-also__go{
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0;
}
.ap-also__go .rts-theme-btn{ margin: 0; }

/* the second paragraph of a stage lede really is the smaller one */
.st-lede--sm{
  font-size: 16px; line-height: 1.72; color: #6b5a4c; margin-top: 14px;
}

/* A lede that introduces the block under it rather than trailing the one
   above it: ma'am's "Scholastic & Co-Scholastic Learning" lead-in on
   Primary, and her "...while developing:" line above the High School
   cards. Both sit between a heading and a grid, so the margin runs the
   other way. */
.st-lede--mid{
  margin-top: 0; margin-bottom: 20px; max-width: 72ch;
}

/* Her seven High School items are headings with nothing under them. The
   nine pixels of space a card's heading leaves for its paragraph is dead
   air when there is no paragraph. */
.st-card__h:only-child{ margin-bottom: 0; }

/* a film is not a PDF */
.doc-card--vid .doc-ic{ background: #fdf0ef; color: #ac1f23; }
.doc-card--vid{ border-color: #f0dcd9; }







/* --- the footer closes up -------------------------------------------
   Measured at 1440 and at 390: a Quick Link holds 22px of text in a
   42px box and then adds 9px (desktop) or 14px (phone) of margin, so
   the rows sat 50px and 54px apart. The margin goes; the padding stays
   at 8px because these are thumb targets. New pitch: 38px. */
footer ul.flinks li{ margin-bottom: 0; }
footer ul.flinks li a{ padding: 8px 0; }

/* The theme's gutter column is two columns' worth of air. Stacked on a
   phone there are no two columns, so it is 55px of empty footer. */
@media (max-width: 767px){
  footer .row > .col-md-1{ display: none; }
  footer ul.flinks li{ margin-bottom: 0; }
  footer .col-md-6 > .row ul.flinks li{ margin: 0; }
  footer hr.mb-5{ margin-bottom: 1.75rem !important; }
}
/* --- the album strip ------------------------------------------------
   Measured at 1440: the row is 1374px, the description wants 1062px on
   one line, the button is 201px. Letting the words have everything the
   button does not need gives them 1133px, so the sentence holds one
   line and the closing line stands on its own. */
.legacy-strip .ls-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 40px; flex-wrap: wrap;
}
.legacy-strip .ls-head__txt{ flex: 1 1 520px; min-width: 0; }
.legacy-strip .ls-head__go{ flex: 0 0 auto; }
.legacy-strip .ls-head__go .rts-theme-btn{ margin: 0; }
.legacy-strip .ls-tail{ display: block; }
@media (max-width: 991px){
  .legacy-strip .ls-head{ align-items: flex-start; }
  .legacy-strip .ls-head__txt{ flex: 1 1 100%; }
}
/* --- the scale's missing steps --------------------------------------
   typescale.py set 32 / 23 / 17 and left everything smaller alone, so
   twenty components each invented a size: 10.88, 11.5, 11.52, 12.16,
   12.25, 13.12, 13.5, 13.6, 13.76, 14.5, 14.72, 15.2, 16.32, 16.96.
   None of those is a number anyone picked - they are what a percentage
   or an off-scale rem lands on.

   The scale now reads, in full:

       32px   h2
       23px   h3
       17px   running text
       15px   secondary text
       13px   a label or a caption
       12px   an uppercase chip

   and the components below are snapped to the nearest step. */
.ftitle, .lead, summary{ font-size: 17px; }
.f600, .sub, .lbl-full, .who, .msg{ font-size: 15px; }
.foot-affil, .qual, .stage-grades, .lp-note, .cap, .gal-chip,
figcaption{ font-size: 13px; }
.fmeta, .lp-kicker, .st-kicker, .st-rail__g, .tag, .yi-k,
.event-flag{ font-size: 12px; }

/* round_sizes took .hdr-brochure's 10.5px down to 10px, and 10px is
   below anything else on the site - it is a button, not a footnote. */
.header .item-right .hdr-brochure{ font-size: 11px; }

/* The admissions box in the footer set its heading with an inline
   style="font-size: 1.45rem" on all 28 pages - 23.2px, which is the
   h3 step plus a fifth of a pixel. It is a class now, on the step. */
.ob-h{ font-size: 23px; font-weight: 700; margin-bottom: .5rem; }

/* Bootstrap sizes <small> at 87.5% of its parent, and the footer runs
   at 14px, so it landed on 12.25px. */
footer small, .orange-box small{ font-size: 12px; }
/* --- one measure per block ------------------------------------------
   A paragraph carried a max-width in ch; the heading above it carried
   none; so on a wide screen they ended in different places. Measured at
   1440: .st-cta__p left 831px of blank beside its own heading.

   Case 1 - the column is already the measure, so the cap comes off and
   the text ends where the heading ends. */
.st-open__txt .st-lede,
.st-split__txt .st-body,
.lp-hero .lead{ max-width: none; }

/* Case 2 - the block sits in a container far too wide for running text
   (1280-1440px), so the heading takes the paragraph's measure rather
   than the paragraph losing it. */
.st-cta__h, .st-cta__p, .st-cta__a{ max-width: 620px; }
.yi-h, .yi-lede{ max-width: 620px; }
.ap-in .ap-head, .ap-in .ap-sub, .ap-also .ap-lede,
.ap-lede, .ap-note{ max-width: 620px; }
.gal-sec .gal-line{ max-width: 620px; }

/* .gal-when was rounded down to 10px, which is smaller than anything
   else on the site; it is a date under a photograph, not a footnote. */
.gal-when{ font-size: 11px; }
.lp-legacy h2.white-text,
.lp-legacy p.white-text,
.lp-legacy .lp-ci{ max-width: 760px; }

/* The two sections whose paragraph sits straight under a full-width h2
   with no wrapper of its own to carry the measure. */
h2.st-h:has(+ .st-lede--mid),
h2.st-h:has(+ .st-body.pg-lede){ max-width: 660px; }
.col-lg-9:has(> .gal-lede) > h2{ max-width: 620px; }

/* 7 October, his word: "yeh text full line mai jaega."
   .st-head carried text-wrap: balance, which makes a browser even out
   the lines rather than fill them - so on a stacked layout, where the
   column is the full page width, the heading still broke at about half
   of it and looked arbitrarily narrow. `pretty` keeps the thing balance
   was there for (no single word stranded on the last line) and drops
   the part he is objecting to. */
.st-head, .st-h, .ap-head, .gal-title{ text-wrap: pretty; }

/* A paragraph with a block-level child has two closing lines, and
   text-align-last only protects one of them - so the sentence just
   before .ls-tail was being stretched as if it were a middle line.
   266px into one line, measured at 768. */
.legacy-strip .ls-head__txt p{ text-align: left; text-align-last: auto; }

/* .qual is the one em-based size left on the site: .8em of its heading,
   which lands on 13.6px. */
.qual{ font-size: 14px; }

@media (max-width: 991px){
  /* on a narrow screen the container is the measure again, and a cap
     only reintroduces the ragged edge it was meant to prevent */
  .st-cta__h, .st-cta__p, .st-cta__a,
  .yi-h, .yi-lede, .ap-in .ap-head, .ap-in .ap-sub, .ap-also .ap-lede,
  .ap-lede, .ap-note,
  .gal-sec .gal-line,
  .lp-legacy h2.white-text, .lp-legacy p.white-text, .lp-legacy .lp-ci,
  h2.st-h:has(+ .st-lede--mid), h2.st-h:has(+ .st-body.pg-lede),
  .st-lede--mid, .st-body.pg-lede,
  .col-lg-9:has(> .gal-lede) > h2,
  .gal-lede, .gal-line{ max-width: none; }
}

/* --- centred prose is justified --------------------------------------
   A paragraph in a .text-center column was centred so it would not sit
   hard left under a centred heading. On a phone that leaves it ragged on
   both edges. Justified it is flush on both, and the closing line stays
   centred so nothing is stranded. */
/* 7 October, superseded. This used to set text-align-last: center here
   as well, which is a second place deciding the same thing - the fault
   that made two paragraphs in one section disagree. The centred column
   rule now lives only in the ALL PROSE IS JUSTIFIED block at the end of
   the stylesheet, and its last line is left, on his word. */
/* --- the red panel is a two-column effect ----------------------------
   Inline on the element: margin-left:-60px; padding-left:65px. That
   slides it under the neighbouring column on a desktop. Stacked on a
   phone there is no neighbour, so it just hangs 60px off the screen.
   Measured at 390px: the row starts at x=18, the box at x=-42. */
@media (max-width: 767px){
  [style*="margin-left: -60px"]{
    margin-left: 0 !important;
    padding-left: 15px !important;
  }
}
/* --- a company name is one word --------------------------------------
   "Managing Director, Birla Edutech Limited" wrapped as "...Birla /
   Edutech Limited" at 390px, splitting the company's own name. The name
   is wrapped in .orgname and held together, so the line breaks after the
   comma instead. */
.orgname{ white-space: nowrap; }

/* A two-tone heading's coloured half is a phrase, not loose words.
   "One Journey, Four Stages" was breaking as "One Journey, Four /
   Stages" with room to spare. It breaks at the comma now.

   Only SHORT phrases. A blanket nowrap here pushed the page sideways:
   "Empowering Young Minds" is 446px of unbreakable type in a 330px
   column, so bomis-bhopal scrolled to 476px at 390. The cut-off is 16
   characters, applied at build time, which keeps "Four Stages" and
   "Nation Building" whole and lets the long ones wrap as before. */
.nobr{ white-space: nowrap; }
@media (max-width: 360px){
  /* on the narrowest phones a long name or phrase may still have to
     break rather than push the page sideways - a horizontal scrollbar is
     worse than a split name. Verified at 320px: no page overflows. */
  .orgname, .nobr{ white-space: normal; }
}
/* --- the campus headline on a phone ----------------------------------
   Measured at 390px: .choose-title was 50px type on a 59px line with a
   60px <big> inside, running to 7 lines and 425px in a 330px column -
   taller than the phone screen it sits on. A desktop size that was never
   stepped down. */
@media (max-width: 767px){
  .choose-title{ font-size: 28px; line-height: 1.22; }
  .choose-title big{ font-size: 34px; }
}
@media (max-width: 575px){
  .choose-title{ font-size: 25px; }
  .choose-title big{ font-size: 30px; }
}


/* --- two lines is not a block ----------------------------------------
   text-align-last: left means the closing line is never stretched, so a
   two-line paragraph has exactly one justified line and every bit of its
   slack lands there. Measured: up to 157px pushed into one line.

   Above 768px only - and that went back and forth twice, so the reason
   is worth writing down. The rule first ran above 768, then at every
   width because the sweep found two still stretched at 390. On
   7 October he sent four phone screenshots asking for justify, and he
   is right: at 390 these paragraphs are five and six lines, which is a
   real block with several justified lines sharing the slack. The fault
   this rule exists for - ONE line carrying everything - only happens on
   a wide screen, where the same paragraph is two lines. So it is a
   desktop rule. */
/* 7 October, later: WITHDRAWN on his instruction.
   "Why we removed so much of justification from maximum places? We need
   to add justification every possible where, apart from that only a box
   with a single word or text."

   This rule set about thirty real paragraphs ragged to stop one line
   being stretched on a wide screen. He has seen the result and does not
   want the trade: a stretched line costs less than a ragged paragraph in
   the middle of a justified page. The class is still stamped on the
   markup so the list of which paragraphs they were is not lost, but it
   no longer changes anything.

   What stays unjustified is only what is not prose - signatures, name
   blocks, button pairs, chips, bylines - which is exactly the "box with
   a single word or text" he is excepting. That list lives in justify.py. */

/* --- the Contact cards without the photograph ------------------------
   The photograph is gone, so the four cards have the whole row instead
   of half of it, and they sit side by side rather than in one tall
   stack. */
.ct-cards{ grid-template-columns: 1fr; }
@media (min-width: 768px){
  .ct-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px){
  .ct-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* --- the drawer's top bar --------------------------------------------
   display:flex, justify-content:space-between, padding:0 - so the back
   arrow sat on the very edge of the screen and the close on the other.
   Gutters, and the title centred in what is left between them. */
/* the theme sets these further down the file, so the selectors carry a
   class each to outrank it - and the title's own padding-left: 20px has
   to go, or "centred" is centred 20px to the right. */
.menu .mobile-menu-head, .mobile-menu-head{
  padding-left: 14px !important; padding-right: 10px !important;
}
.mobile-menu-head .current-menu-title{
  flex: 1 1 auto; text-align: center; padding: 0 8px !important;
}
.mobile-menu-head .go-back{ padding-right: 6px; }

/* The philosophy card and the motto card are a pair - same shape, same
   place, one above the other. The philosophy one carries text-center in
   the markup and the motto one does not, so "Our philosophy / Joy of
   Learning" sat centred while "Birla motto / Shaping Tomorrow" sat left.
   .academy-box2 is used exactly twice on the whole site and both are
   this card, so it is safe to settle it here. */
.academy-box2{ text-align: center; }
.academy-box2 p, .academy-box2 h2{
  text-align: center !important; text-align-last: center !important;
}
/* The bird and the transform mark are display:block with margin 0, so
   centring the card's TEXT left them sitting against the left padding
   edge - measured: the card starts at x=30, the bird at x=51 in a 330px
   box. An auto inline margin is what centres a block, not text-align. */
.academy-box2 > img, .academy-box3 > img{
  margin-left: auto; margin-right: auto;
}
/* --- ALL PROSE IS JUSTIFIED ------------------------------------------
   Last block in the file on purpose. Justification used to be decided in
   five places and the last one in the file won, so two paragraphs in one
   section could disagree. Everything is decided here now.

   1. every paragraph and list item is justified */
p, li{
  text-align: justify !important;
  text-align-last: left !important;
}

/* 2. ...except the things that are not prose. Every selector below is a
   label, a chip, a button, a name or a nav item - a box holding a single
   word or a short line. This list is the only exception on the site. */
/* navigation, crumbs and menus */
.menu li, .menu a, nav li, nav a, .header-top li, .ph-hero__crumb li,
.menu-item-has-children, .mobile-menu-head, .go-back,
/* buttons and the rows that hold a pair of them */
.rts-theme-btn, .st-cta__a, .ap-also__go, .yi-cta, .st-next__go,
.sv-ask__a, .sv-ask__alt,
p:has(> .rts-theme-btn), p:has(> a.rts-theme-btn),
/* a short label inside a narrow box - his own exception, "a box with a
   single word or text". Measured at 390px, justify was tearing these
   apart: .why-box p had 66px pushed into one gap in a 111px box
   ("Connect        academics with the world"), .ct-card 118px on the
   email address, .lp-proof 55px on "15-acre campus". Each is a caption
   under an icon, not a paragraph. */
.why-box p, .ct-card p, .lp-proof li, .lp-proof,
/* a bullet in a list and a line of event metadata are each one short
   item, not a paragraph: .square li had 233px pushed into one gap
   ("Fill out the registration form online."), .event-meta 263px. */
.square li, .event-meta li, .event-meta,
/* a tick-list of subjects and the labels under the programme icons are
   one short item each. Found at 320px: "Environmental Studies" had 96px
   pushed into one gap in a 218px box, "Soul Science" 61px in a 94px box. */
.tick-list li, .academics-content p, .academics-content1 p,
/* a list item that CONTAINS a heading and a paragraph is a card, not a
   line of prose - justifying the container put 324px into one line on
   the Apply steps. Its own <p> children are still justified. */
li:has(p), li:has(h2), li:has(h3), li:has(h4), li:has(div),
/* chips, tags, eyebrows, kickers, stat captions */
.gal-chip, .sd__v, .sd__k, .tag, .st-eyebrow, .st-kicker, .st-rail__g,
.fmeta, .lp-kicker, .yi-k, .event-flag, .stage-grades, .qual, .gal-when,
.counter_div .desc, .yi-facts span, .yi-facts b, .pg-facts p, .doc-ic,
.ab-dot, .hc__dot, .sub-heading,
/* a name, a signature or an address - broken by hand with <br>, never
   prose. NOT p:has(> strong:only-child): :only-child counts element
   children only, so a normal paragraph containing one <strong> matched
   it, and that quietly un-justified the Vice President's whole message.
   Nor .mt-2, which is a margin utility that lands on anything.
   Short bold labels need no exception anyway - a one-line paragraph is
   its own last line, and a last line is never stretched. */
p:has(br), .who, .msg, .foot-affil,
/* the markup asking for it by name. .text-left / .text-center are
   Bootstrap utilities somebody put on the element on purpose - the
   Vision line carries class="red-text mb-2 text-left" and the blanket
   rule was overriding it, which stretched a two-line bold label. If the
   HTML says left, it means left. */
.text-left,
/* form furniture */
.form-label, .form-check label, .bf-field label, .lp-note,
/* the footer's link column and contact lines */
footer .flinks li, footer .flinks a, .foot-icon, .ct-wa{
  text-align: left !important;
  text-align-last: auto !important;
}

/* 2b. ...and when the markup puts text-center on the PARAGRAPH itself,
   that is an instruction about that paragraph, not about a column.
   "Our philosophy" carries class="mb-0 text-center" and was rendering
   hard left: a one-line paragraph set to justify is its own last line,
   and text-align-last is left, so justify quietly becomes left and the
   centring in the markup is lost. */
p.text-center, li.text-center, .text-center > p.text-center{
  text-align: center !important;
  text-align-last: center !important;
}

/* 2c. and .text-right means right. It was swept into the list above with
   .text-left, which set it to LEFT - so the Submit button's row on the
   three form pages sat on the wrong side of the page. "Respect the
   markup" has to mean respecting what it actually says. */
.text-right{
  text-align: right !important;
  text-align-last: right !important;
}
@media (max-width: 767px){
  /* except where the theme deliberately centres it on a phone - the
     copyright bar has done that since before this build */
  .copyright .text-right, .copyright{
    text-align: center !important; text-align-last: center !important;
  }
}

/* 3. inside a column somebody chose to centre, prose is still justified.
   The last line stays LEFT, not centred - his word, 7 October: "last
   line humesha left align rakho, centre mai gandi lag rahi". A centred
   closing line under a justified block reads as a mistake, and it is the
   one line on the page that is not flush with the rest. */
[class*="col-"].text-center > p,
[class*="col-"].text-center > li{
  text-align: justify !important;
  text-align-last: left !important;
}
/* --- School Life flows in two columns --------------------------------
   Five items were split by hand 3/2 across two col-md-6, so the right
   column ended early and the rules did not line up. One list in a
   balanced two-column flow instead. */
.schoollife-wrap{ columns: 2; column-gap: 48px; }
.schoollife-wrap .schoollife-list li{ break-inside: avoid; }
.schoollife-wrap .schoollife-list li:last-child{ border-bottom: 1px solid #00000010; }
@media (max-width: 767px){
  .schoollife-wrap{ columns: 1; }
  .schoollife-wrap .schoollife-list li:last-child{ border-bottom: 0; }
}
/* --- the footer centres on a phone -----------------------------------
   The copyright bar under it has been centred below 768px all along, so
   a left-aligned footer above a centred bar read as two different
   blocks. One narrow column, one alignment. */
@media (max-width: 767px){
  footer .container-fluid1{ text-align: center; }
  /* !important because the ALL PROSE IS JUSTIFIED block names
     .foot-affil and footer .flinks in its not-prose list with
     !important, and that would otherwise hold them at left. */
  footer h4, footer p, footer .foot-affil, footer li, footer a{
    text-align: center !important;
    text-align-last: center !important;
  }
  /* a flex row ignores text-align - the icon lines need their own rule,
     the same trap as a block image inside a centred card */
  footer .foot-icon{ justify-content: center; }
  footer ul.flinks, footer .flinks li, footer .flinks a{
    text-align: center !important;
  }
  footer ul.flinks li a{ display: inline-block; }
  /* the orange admissions box keeps its own left-aligned stack: it is a
     card with buttons, not a column of footer text */
  footer .orange-box, footer .orange-box *{
    text-align: left !important;
    text-align-last: auto !important;
  }
  footer .orange-box .ob-acts{ justify-content: flex-start; }
}