/* =============================================================================
   landing.css — shared styles for the converted school landing pages
   (Views/Shared/Schools/<Key>/Landing/_*.cshtml section components).

   Every landing uses the same section skeleton; the per-school band colours are
   custom properties on .kk-landing, overridden by the .kk-landing--<key>
   modifier where a school's generated CSS (post-<id>.css) differed. Values are
   copied from the generated Elementor CSS, not eyeballed.
   ============================================================================= */

.kk-landing {
    --kkl-max: 1300px;              /* boxed content width of the landing bands  */
    --kkl-accent: #44ACAF;          /* headings bar / buttons / icons            */
    --kkl-welcome-bg: #2fa59f;      /* WELCOME stats band                        */
    --kkl-enquiry-bg: #44ACAF;      /* enquiry form band                         */
    --kkl-awards-bg: #EA4E5C;       /* awards heading band                       */
    --kkl-testimonials-bg: #EBA82F; /* testimonials band                         */
    --kkl-achievements-bg: #ECF5F3; /* student-achievements band                 */
    --kkl-strip-bg: #B8978D;        /* daily-adventures strip                    */
    --kkl-frame: #B98E7F;           /* PDC card border + curriculum divider      */
    font-family: "Montserrat", var(--kk-font-body);
}
.kk-landing * { box-sizing: border-box; }
.kk-landing img { max-width: 100%; }
.kk-landing__inner { max-width: var(--kkl-max); margin: 0 auto; padding: 0 20px; }

/* -- Section headings --------------------------------------------------------- */
.kk-landing h1, .kk-landing h2, .kk-landing h3 { margin: 0; font-family: "Montserrat", sans-serif; }
/* left-bar heading (Principal's Message / Student Achievements) */
.kk-landing__h-bar {
    font-size: 29px; font-weight: 700; text-transform: uppercase; color: #0F0F0F;
    border-left: 3px solid var(--kkl-accent); padding: 5px 0 5px 10px;
}
@media (max-width: 1024px) { .kk-landing__h-bar { font-size: 20px; } }

/* -- Buttons ------------------------------------------------------------------- */
.kk-landing__btn {
    display: inline-block; background: var(--kkl-accent); color: #fff;
    font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 500;
    text-transform: uppercase; text-decoration: none;
    border: 1px solid var(--kkl-accent); border-radius: 5px; padding: 16px 30px;
    cursor: pointer; transition: background .2s ease, color .2s ease;
}
.kk-landing__btn:hover, .kk-landing__btn:focus { background: transparent; color: var(--kkl-accent); }
.kk-landing__btn:focus-visible { outline: 2px solid var(--kkl-accent); outline-offset: 2px; }
@media (max-width: 767px) { .kk-landing__btn { font-size: 14px; } }

/* -- Icon lists (chevron / pen bullet via masked SVG) --------------------------- */
.kk-landing__list { list-style: none; margin: 0; padding: 0; }
.kk-landing__list li {
    position: relative; padding-left: 30px; margin: 10px 0;
    font-family: "Montserrat", sans-serif; font-weight: 500;
}
.kk-landing__list li::before {
    content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: var(--kkl-bullet) no-repeat center / contain;
    mask: var(--kkl-bullet) no-repeat center / contain;
}
.kk-landing__list--chevron { --kkl-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z'/%3E%3C/svg%3E"); }
.kk-landing__list--pen { --kkl-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M79.18 282.94a32.005 32.005 0 0 0-20.24 20.24L0 480l4.69 4.69 92.89-92.89c-.66-2.56-1.57-5.03-1.57-7.8 0-17.67 14.33-32 32-32s32 14.33 32 32-14.33 32-32 32c-2.77 0-5.24-.91-7.8-1.57l-92.89 92.89L32 512l176.82-58.94a31.983 31.983 0 0 0 20.24-20.24l33.07-84.07-98.88-98.88-84.07 33.07zM369.25 28.32L186.14 227.81l97.85 97.85 199.49-183.11C568.4 67.48 443.73-55.94 369.25 28.32z'/%3E%3C/svg%3E"); }
.kk-landing__list--pen li::before { color: var(--kkl-accent); }

/* -- 1. Hero (background video) -------------------------------------------------- */
.kk-hero {
    position: relative; min-height: 500px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: url("/wp-content/uploads/2024/10/KIS-Video-Placeholder.webp") 50% 50% / cover #252525;
}
.kk-hero::after { content: ""; position: absolute; inset: 0; background: #252525; opacity: .14; pointer-events: none; }
.kk-hero__video { position: absolute; inset: 0; overflow: hidden; }
@media (max-width: 1024px) { .kk-hero { min-height: 350px; } }
@media (max-width: 767px)  { .kk-hero { min-height: 200px; } }

/* -- 2. Welcome band (title + counters) ------------------------------------------ */
.kk-welcome { background: var(--kkl-welcome-bg); padding: 50px 0; color: #fff; }
.kk-welcome__title {
    text-align: center; font-size: 35px; line-height: 43px; font-weight: 700;
    text-transform: uppercase; color: #fff;
}
.kk-welcome__stats { display: flex; justify-content: center; margin-top: 30px; }
.kk-welcome__stat { flex: 1 1 0; padding: 0 20px; border-right: 1px solid #E7E7E7; text-align: center; }
.kk-welcome__stat:last-child { border-right: 0; }
.kk-welcome__stat .kk-counter__number, .kk-welcome__big {
    font-size: 65px; font-weight: 700; color: #fff; line-height: 1.2; display: block;
}
.kk-welcome__stat .kk-counter__title, .kk-welcome__small {
    font-size: 16px; font-weight: 500; text-transform: uppercase; line-height: 25px; color: #fff; display: block;
}
@media (max-width: 1024px) {
    .kk-welcome__title { font-size: 25px; }
    .kk-welcome__stat .kk-counter__number, .kk-welcome__big { font-size: 50px; }
    .kk-welcome__stat .kk-counter__title, .kk-welcome__small { font-size: 14px; }
}
@media (max-width: 767px) {
    .kk-welcome__title { line-height: 32px; }
    .kk-welcome__stats { flex-wrap: wrap; gap: 20px 0; }
    .kk-welcome__stat { flex: 1 1 50%; border-right: 0; }
    .kk-welcome__stat .kk-counter__number, .kk-welcome__big { font-size: 40px; }
}

/* -- 3. Leadership / Principal's message ------------------------------------------ */
.kk-lead {
    padding: 60px 0;
    background: url("/wp-content/uploads/2024/11/Leadership-Bg-1.webp") center right / cover no-repeat;
}
.kk-lead__cols { display: flex; gap: 40px; margin-top: 20px; }
.kk-lead__media { flex: 0 0 60%; align-self: flex-start; }
.kk-lead__media .kk-video { border-radius: 25px; }
.kk-lead__body { flex: 1 1 0; min-width: 0; }
/* When the message is taller than the video, components.js (initLeadScroll) caps this column to
   the video height and sets inline overflow so it scrolls — keep that scrollbar slim and give the
   text a little room from it. Only applies in the two-column layout (JS clears it when stacked). */
.kk-lead__body[style*="overflow"] { padding-right: 10px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; }
.kk-lead__body[style*="overflow"]::-webkit-scrollbar { width: 6px; }
.kk-lead__body[style*="overflow"]::-webkit-scrollbar-thumb { background: rgba(0,0,0,.24); border-radius: 3px; }
.kk-lead__text {
    /* Flows to natural height beside the video; when longer than the video the whole column
       scrolls (initLeadScroll), so no text is ever clipped. */
    font-size: 16px; font-weight: 500; line-height: 29px; letter-spacing: .4px;
    word-spacing: 3px; color: #474747;
}
.kk-lead__name { font-size: 25px; font-weight: 700; color: #1C1C1C; margin-top: 18px; }
.kk-lead__role { font-size: 16px; font-weight: 500; line-height: 25px; color: var(--kkl-accent); }
@media (max-width: 1024px) {
    .kk-lead__cols { flex-direction: column; }
    .kk-lead__media { flex-basis: auto; }
    .kk-lead__text { font-size: 14px; line-height: 24px; }
    .kk-lead__name { font-size: 20px; }
    .kk-lead__role { font-size: 14px; line-height: 22px; }
}

/* -- 4. Faculty cards -------------------------------------------------------------- */
.kk-faculty { background: #fff; padding: 50px 0; }
.kk-faculty__title {
    text-align: center; font-size: 40px; font-weight: 700; text-transform: uppercase;
    color: var(--kkl-accent); margin-bottom: 30px;
}
/* Controlled gap under the "Meet our faculty" heading (the .kk-landing h1/h2/h3
   reset zeroes the title's own margin, so set it here; kept small, <=30px). */
.kk-faculty__grid { display: flex; gap: 25px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.kk-faculty__card {
    flex: 1 1 0; min-width: 280px; max-width: 620px;
    background: #fff; border-radius: 15px; box-shadow: 0 2px 7px 1px rgba(0, 0, 0, .23);
    padding-bottom: 20px; display: flex; flex-direction: column; gap: 14px;
}
/* Faculty tiles a touch taller (3:2 vs the default 16:9). The YouTube hqdefault
   is 4:3 with the 16:9 card artwork letterboxed inside it, so a taller tile would
   reveal the black bars — scale the thumbnail up just enough to crop them back out
   (overflow is already hidden), keeping the name + face fully in frame. */
.kk-faculty__card .kk-video { border-radius: 15px 15px 0 0; aspect-ratio: 3 / 2; }
.kk-faculty__card .kk-video__thumb { transform: scale(1.2); }
/* A lone faculty card fills the row (the live site shows a single video at full
   width, not capped like the multi-card grid). At full width use the video's true
   16:9 so the 16:9 card artwork fills the frame on its own — no taller tile, so no
   letterbox bars to crop, hence no scale. */
.kk-faculty__card:only-child { max-width: none; }
.kk-faculty__card:only-child .kk-video { aspect-ratio: 16 / 9; }
.kk-faculty__card:only-child .kk-video__thumb { transform: none; }
.kk-faculty__name { font-size: 20px; font-weight: 700; color: #1C1C1C; padding: 0 30px; }
.kk-faculty__role { font-size: 16px; font-weight: 500; line-height: 23px; color: #777; padding: 0 30px; }
.kk-faculty__role .kk-faculty__sub { color: var(--kkl-accent); font-size: 14px; }
@media (max-width: 767px) {
    .kk-faculty__title { font-size: 30px; }
    .kk-faculty__name { font-size: 18px; padding: 0 20px; }
    .kk-faculty__role { font-size: 14px; padding: 0 20px; }
}

/* -- 5. Curriculum (tabs) ------------------------------------------------------------ */
.kk-lcur { padding: 60px 0 80px; }
.kk-lcur__title {
    text-align: center; font-size: 30px; font-weight: 600; text-transform: uppercase;
    color: var(--kkl-accent);
}
.kk-lcur__divider { width: 30%; margin: 10px auto 26px; border: 0; border-top: 2px solid var(--kkl-frame); }
.kk-lcur__intro { font-size: 16px; font-weight: 500; line-height: 27px; letter-spacing: .2px; word-spacing: 2px; color: #494949; }
.kk-lcur .kk-tabs { --kk-tabs-accent: var(--kkl-accent); --kk-tabs-font: "Montserrat", sans-serif; margin-top: 40px; }
/* max-width + flexible title pins the logo's x-position: the title flexes to
   fill, so when the web font swaps in and the title's width changes, only the
   trailing whitespace moves — the logo no longer slides sideways (FOUT reflow). */
.kk-lcur__panel-head { display: flex; align-items: center; justify-content: flex-start; gap: 24px; flex-wrap: wrap; max-width: 680px; }
.kk-lcur__panel-head h3 { font-size: 24px; font-weight: 700; color: #1C1C1C; flex: 1 1 auto; min-width: 0; }
/* Keep the co-brand logo (e.g. Kanakia Kids) beside the title at a sane size,
   not blown up to its native width and shoved to the far edge. */
.kk-lcur__panel-head img { height: 56px; width: auto; flex: 0 0 auto; }
.kk-lcur__text { font-size: 16px; font-weight: 500; line-height: 27px; color: #494949; }
/* Pre-Primary panel: image carousel (1 slide at a time) beside the copy. */
.kk-lcur__pp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 12px; }
.kk-lcur__ppcar { --kk-carousel-per: 1; --kk-carousel-per-tablet: 1; --kk-carousel-per-mobile: 1; }
.kk-lcur__ppcar img { width: 100%; border-radius: var(--kk-radius-md); display: block; }
@media (max-width: 767px) { .kk-lcur__pp { grid-template-columns: 1fr; gap: 20px; } }
.kk-lcur__text ul { margin: 10px 0; padding-left: 22px; }
.kk-lcur__cta { text-align: center; margin-top: 30px; }
@media (max-width: 1024px) {
    .kk-lcur { padding: 70px 10px; }
    .kk-lcur__intro, .kk-lcur__text { font-size: 14px; line-height: 24px; }
    .kk-lcur__panel-head h3 { font-size: 20px; }
}

/* -- 6. Daily-adventures strip -------------------------------------------------------- */
.kk-strip {
    display: flex; min-height: 332px; margin-bottom: 50px;
    background: var(--kkl-strip-bg);
    position: relative;
}
.kk-strip::before {
    content: ""; position: absolute; inset: 0; opacity: .21; pointer-events: none;
    background: url("/wp-content/uploads/2024/11/MASTER-TALK-21.webp") bottom center;
}
.kk-strip__img { flex: 0 0 50%; background: url("/wp-content/uploads/2024/11/education-generation.webp") center right / cover no-repeat; }
.kk-strip__body { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; position: relative; }
.kk-strip__text {
    font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: 1px;
    color: #fff; padding-left: 50px;
}
@media (max-width: 1024px) {
    .kk-strip__text { font-size: 37px; line-height: 45px; padding-left: 20px; }
}
@media (max-width: 767px) {
    .kk-strip { flex-direction: column; }
    .kk-strip__img { min-height: 206px; background-position: center left; background-size: 467px auto; }
    .kk-strip__text { font-size: 35px; line-height: 43px; padding: 20px 20px 20px 30px; }
}

/* -- 7. Student achievements (video playlist) ------------------------------------------ */
.kk-achieve { background: var(--kkl-achievements-bg); padding: 60px 0 80px; }
.kk-achieve .kk-landing__h-bar { margin-bottom: 20px; }
.kk-achieve .kk-playlist { --kk-playlist-accent: var(--kkl-accent); }

/* -- 8. Awards band + card --------------------------------------------------------------- */
.kk-awards { background: var(--kkl-awards-bg); }
.kk-awards__title {
    text-align: center; font-size: 45px; font-weight: 700; text-transform: uppercase;
    color: #fff; padding: 80px 0;
}
/* auto-fit + centred so any card count sits right: 1 card centres, 3 form a row,
   4 fill the row — instead of a fixed 3-up that strands a lone card at 1/3 width. */
.kk-awards__cards { max-width: var(--kkl-max); margin: -50px auto 0; padding: 0 20px 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 400px)); justify-content: center; gap: 20px; align-items: stretch; }
.kk-awards__card {
    flex: 1 1 260px; background: #fff; border: 1px solid #B7B7B7; border-radius: 15px;
    overflow: hidden; padding-bottom: 20px; display: flex; flex-direction: column; gap: 8px;
}
.kk-awards__card img { width: 100%; height: 235px; object-fit: cover; object-position: top center; border-radius: 15px 15px 0 0; }
.kk-awards__what { font-size: 18px; font-weight: 700; line-height: 25px; color: #282828; padding: 8px 10px 0; }
.kk-awards__for  { font-size: 14px; font-weight: 600; line-height: 21px; color: #282828; padding: 0 10px; }
.kk-awards__who  { font-size: 16px; font-weight: 700; line-height: 21px; color: #282828; padding: 0 10px; }
.kk-awards__role { font-size: 14px; font-weight: 500; line-height: 21px; color: #565656; padding: 0 10px; }
@media (max-width: 1024px) {
    .kk-awards__title { font-size: 30px; }
    .kk-awards__card img { height: 203px; }
    .kk-awards__what { font-size: 16px; line-height: 22px; }
    .kk-awards__for { font-size: 12px; line-height: 18px; }
    .kk-awards__who { font-size: 14px; }
    .kk-awards__role { font-size: 11px; line-height: 16px; }
}
@media (max-width: 767px) {
    .kk-awards__cards { grid-template-columns: 1fr; max-width: 520px; }
}

/* -- 9. Enquiry band ------------------------------------------------------------------------ */
.kk-lenq { background: var(--kkl-enquiry-bg); padding: 60px 0; color: #fff; }
.kk-lenq__title { text-align: center; font-size: 35px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.kk-lenq__tagline { text-align: center; font-size: 16px; font-weight: 500; line-height: 26px; color: #fff; padding: 0 150px; margin: 0 0 30px; }
.kk-lenq__cols { display: flex; gap: 40px; }
.kk-lenq__criteria { flex: 0 0 55%; min-width: 0; }
.kk-lenq__criteria h3 { font-size: 25px; font-weight: 600; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.kk-lenq__criteria-intro { font-size: 15px; font-weight: 500; line-height: 27px; letter-spacing: .5px; color: #fff; }
.kk-lenq__lists { display: flex; gap: 30px; margin-top: 16px; }
.kk-lenq__lists .kk-landing__list { flex: 1 1 0; color: #fff; }
.kk-lenq__lists .kk-landing__list li { font-size: 18px; color: #fff; }
.kk-lenq__form { flex: 1 1 0; min-width: 0; }
@media (max-width: 1024px) {
    .kk-lenq__title { font-size: 25px; }
    .kk-lenq__tagline { padding: 0 80px; }
    .kk-lenq__cols { flex-direction: column; }
    .kk-lenq__criteria { flex-basis: auto; }
    .kk-lenq__lists .kk-landing__list li { font-size: 12px; }
}
@media (max-width: 767px) {
    .kk-lenq__title { font-size: 30px; line-height: 30px; }
    .kk-lenq__tagline { font-size: 14px; line-height: 22px; padding: 0 10px; }
    .kk-lenq__lists .kk-landing__list li { font-size: 10px; }
}

/* -- 10. Admission process --------------------------------------------------------------------- */
.kk-admproc { padding: 60px 0; }
.kk-admproc__cols { display: flex; gap: 0; align-items: stretch; }
.kk-admproc__media { flex: 0 0 50%; }
.kk-admproc__media img { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; }
.kk-admproc__body { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; padding-left: 40px; }
.kk-admproc__body h2 { font-size: 25px; font-weight: 600; text-transform: uppercase; color: #2A2A2A; }
.kk-admproc__intro { font-size: 15px; font-weight: 500; line-height: 27px; letter-spacing: .5px; color: #1D1D1D; }
.kk-admproc .kk-landing__list li { font-size: 16px; color: #222; }
@media (max-width: 767px) {
    .kk-admproc__cols { flex-direction: column; }
    .kk-admproc__media img { height: 214px; }
    .kk-admproc__body { padding: 20px 20px 0; }
    .kk-admproc__body h2 { font-size: 25px; line-height: 30px; }
    .kk-admproc__intro { font-size: 14px; line-height: 24px; }
    .kk-admproc .kk-landing__list li { font-size: 14px; }
}

/* -- 11. Teachers' PDC card ----------------------------------------------------------------------- */
.kk-pdc { padding: 100px 0; }
.kk-pdc__card {
    display: flex; gap: 30px;
    border: 2px solid var(--kkl-frame); border-radius: 25px; padding: 40px;
}
.kk-pdc__body { flex: 0 0 60%; min-width: 0; }
.kk-pdc__body h2 { font-size: 40px; font-weight: 500; color: var(--kkl-frame); margin-bottom: 14px; }
.kk-pdc__text, .kk-pdc__details { font-size: 15px; font-weight: 500; color: #2A2A2A; line-height: 1.7; }
.kk-pdc__details { margin-top: 10px; }
.kk-pdc .kk-readmore {
    margin-top: 16px; border-radius: 0; padding: 10px 20px; font-weight: 600;
}
.kk-pdc__media { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.kk-pdc__media img { border-radius: 25px; }
@media (max-width: 1024px) {
    .kk-pdc__card { flex-direction: column; padding: 24px; }
    .kk-pdc__body { flex-basis: auto; }
    .kk-pdc__body h2 { font-size: 28px; }
    .kk-pdc__text, .kk-pdc__details { font-size: 12px; line-height: 22px; }
}

/* -- 12. Testimonials carousel ---------------------------------------------------------------------- */
.kk-ltest { background: var(--kkl-testimonials-bg); padding: 60px 0 80px; }
.kk-ltest__title { text-align: center; font-size: 35px; font-weight: 700; text-transform: uppercase; color: #fff; }
.kk-ltest .kk-carousel {
    /* gap under the heading — set on the carousel because the .kk-landing h1/h2/h3
       reset zeroes the title's own margin. */
    margin-top: 40px;
    --kk-carousel-per: 2; --kk-carousel-per-tablet: 2; --kk-carousel-per-mobile: 1;
    --kk-carousel-gap: 10px;
    --kk-carousel-dot: rgba(255, 255, 255, .45); --kk-carousel-dot-active: #fff;
}
@media (max-width: 767px) { .kk-ltest__title { font-size: 30px; line-height: 30px; } }

/* -- 13. Social media grid ----------------------------------------------------------------------------- */
.kk-lsocial { padding: 60px 0; }
.kk-lsocial__title { text-align: center; font-size: 35px; font-weight: 700; text-transform: uppercase; color: #2A2A2A; }
/* gap under the heading lives on the grid — the .kk-landing h1/h2/h3 reset
   zeroes the title's own margin. */
.kk-lsocial__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 40px; }
.kk-lsocial__item { display: block; position: relative; }
.kk-lsocial__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.kk-lsocial__item:focus-visible { outline: 2px solid var(--kkl-accent); outline-offset: 2px; }
.kk-lsocial__follow { text-align: center; margin-top: 24px; }
.kk-lsocial__follow a {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgb(64, 139, 209); color: #fff; text-decoration: none;
    font-family: var(--kk-font-body); font-size: 14px; font-weight: 600;
    padding: 10px 18px; border-radius: 4px;
}
.kk-lsocial__follow svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 767px) {
    .kk-lsocial__title { font-size: 25px; line-height: 30px; }
    .kk-lsocial__grid { grid-template-columns: repeat(2, 1fr); }
}

/* -- Spacer band (blank band between testimonials and social on the original) --------------------------- */
.kk-landing__spacer { padding: 60px 0; }

/* -- Scroll reveal ------------------------------------------------------------------------------------- */
/* Restores the entrance motion the Elementor source had (fadeInUp on section titles, cards, flip-boxes,
   gallery tiles and stats). components.js adds .kk-reveal ONLY to elements that start below the fold, so
   above-the-fold content never flashes and the page stays fully visible with JS disabled. */
/* .35s, not .7s: the fade is dead time between the content being ready and being
   readable, and at .7s it dominated everything — images were decoded in 26-258ms
   but sections stayed invisible for ~595ms. Short enough to feel immediate, long
   enough to still read as an entrance. */
/* No will-change here, deliberately. It was `will-change: opacity, transform`, which
   promotes every gated element to its own GPU layer — and nothing ever took it back
   off, so they stayed promoted for the life of the page long after the .35s fade had
   finished (measured: 14 permanently promoted layers on Bhayandar CBSE, 52 on ICSE
   Mira Road, all already .is-in). Desktop absorbs that; a phone's texture memory does
   not, and once the compositor cannot raster the tiles the section paints as a blank
   white gap. Blink composites an opacity/transform transition on its own while it
   runs, so the hint only bought pre-promotion — worthless here anyway now the sweep
   pre-arms a viewport early. */
.kk-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}
.kk-reveal.is-in { opacity: 1; transform: none; }
/* Slide-in-from-left variant (results / admission bullet points) — overrides the
   default upward slide. Declared after so it wins at equal specificity. */
.kk-reveal--left { transform: translateX(-28px); }
.kk-reveal--left.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .kk-reveal, .kk-reveal--left { opacity: 1; transform: none; transition: none; }
}