/* ============================================================
   ROOT
   ============================================================ */

/* Scoped to the navbar rather than :root. These were global before, which
   meant the navbar's --kiu-muted and --kiu-border silently overrode the
   canonical values in tokens.css for any element outside a .kiu-* page root.
   --kiu-navy, --kiu-white and --kiu-muted now come from tokens.css; only the
   shades the navbar genuinely owns are declared here. */
#kiu-navbar,
#kiuMobileDrawer {
    --kiu-blue: #123f73;
    --kiu-deep: #071f3d;

    --kiu-cyan: #14aeb5;
    --kiu-cyan-soft: #eefafa;

    --kiu-text: #172b44;
    --kiu-border: #e4eaf1;
}


/* ============================================================
   PAGE LOADING / PREVENT NAVBAR FLICKER
   ============================================================ */

#kiu-navbar {
    opacity: 0;
    visibility: hidden;
}

body.kiu-page-ready #kiu-navbar {
    opacity: 1;
    visibility: visible;

    /* Short: this is a finishing touch on arrival, not an entrance.
       At .45s the fade itself read as the navbar arriving late. */
    transition:
        opacity .15s var(--kiu-ease-out),
        visibility .15s var(--kiu-ease-out);
}


/* ============================================================
   RESET
   ============================================================ */

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

#kiu-navbar a {
    text-decoration: none;
}

#kiu-navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#kiu-navbar button {
    font-family: inherit;
}


/* ============================================================
   NAVBAR ROOT
   ============================================================ */

#kiu-navbar {
    /* ------------------------------------------------------------
       Scroll-shrink timing.

       The top bar, the main bar and the hanging badge all resize
       when .kiu-scrolled is toggled, and they must finish together:
       the badge is what covers the left end of the bar, so if it
       reaches its compact height before the bar around it does, a
       white strip is exposed underneath it for the difference.

       These previously ran on four durations (.25s/.3s/.32s/.35s)
       and two easing curves, which is exactly what produced the
       glitchy, unsynchronised shrink. Every scroll-driven property
       below now references these two tokens — do not hard-code a
       duration or curve into a scroll transition again. They are
       declared in css/tokens.css alongside the rest of the motion
       scale; this block only consumes them.

       ------------------------------------------------------------ */

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 2147483647;

    font-family:
        var(--rs-ff-body);

    isolation: isolate;

    /*
     * IMPORTANT:
     * Smooth hide/show while scrolling
     */
    will-change: transform;

    transform:
        translateY(0);

    transition:
        transform .42s cubic-bezier(.4, 0, .2, 1),
        opacity .35s var(--kiu-ease-out);
}


/* ============================================================
   SMART SCROLL STATES
   ============================================================ */

/*
 * Navbar visible
 */

#kiu-navbar.kiu-nav-visible {
    transform:
        translateY(0);
}


/*
 * Navbar hidden while scrolling DOWN
 */

#kiu-navbar.kiu-nav-hidden {
    transform:
        translateY(-100%);
}


/*
 * Mobile menu open:
 * Navbar must never disappear
 */

#kiu-navbar.kiu-mobile-open {
    transform:
        translateY(0);
}


/* ============================================================
   TOP BAR
   ============================================================ */

.kiu-topbar {
    height: 34px;

    background:
        linear-gradient(90deg,
            #071f3d 0%,
            #0b315b 55%,
            #123f73 100%);

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

    overflow: hidden;

    transition:
        height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
        opacity var(--kiu-shrink-dur) var(--kiu-shrink-ease),
        visibility var(--kiu-shrink-dur) var(--kiu-shrink-ease);
}


.kiu-topbar-inner {
    width:
        min(1480px, calc(100% - 70px));

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.kiu-top-welcome {
    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

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

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        0;

    white-space:
        nowrap;
}


.kiu-top-welcome-icon {
    width: 17px;

    height: 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;
}


.kiu-top-welcome-icon svg {
    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* Hide welcome text before it crowds the topbar links (topbar itself is hidden below 700px) */

@media (max-width: 900px) {
    .kiu-top-welcome {
        display:
            none;
    }
}


.kiu-top-right {
    display: flex;

    align-items: center;

    gap: 15px;
}


.kiu-top-link {
    color:
        rgba(255, 255, 255, .78);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .025em;

    white-space:
        nowrap;

    transition:
        color var(--kiu-dur-fast) var(--kiu-ease-out);
}


.kiu-top-link:hover {
    color:
        #ffffff;
}


.kiu-top-divider {
    width: 1px;
    height: 11px;

    background:
        rgba(255, 255, 255, .20);
}


/* ============================================================
   MAIN BAR
   ============================================================ */

.kiu-mainbar {
    height: 82px;

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

    border-bottom:
        1px solid var(--kiu-border);

    box-shadow:
        0 6px 25px rgba(8, 32, 60, .08);

    position: relative;

    transition:
        height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
        min-height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
        box-shadow var(--kiu-shrink-dur) var(--kiu-shrink-ease);
}


.kiu-main-inner {
    width:
        min(1480px, calc(100% - 70px));

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    position: relative;
}


/* ============================================================
   HANGING BADGE LOGO
   ============================================================ */

.kiu-logo-holder {

    position: absolute;

    left: 18px;

    top: 0;

    width: 255px;

    height: 286px;

    z-index: 500;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding:
        28px 20px 35px;

    background:
        linear-gradient(180deg,
            #123f73 0%,
            #0b315b 72%,
            #071f3d 100%);

    color: #ffffff;

    clip-path:
        polygon(0 0,
            100% 0,
            100% 78%,
            50% 100%,
            0 78%);

    filter:
        drop-shadow(0 5px 8px rgba(7, 31, 61, .16)) drop-shadow(0 16px 18px rgba(7, 31, 61, .14));

    transition:
        transform var(--kiu-shrink-dur) var(--kiu-shrink-ease),
        height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
        filter var(--kiu-shrink-dur) var(--kiu-shrink-ease);
}


.kiu-logo-holder::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

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

    pointer-events: none;
}


.kiu-logo-holder:hover {

    transform:
        translateY(2px);

    filter:
        drop-shadow(0 7px 11px rgba(7, 31, 61, .18)) drop-shadow(0 19px 23px rgba(7, 31, 61, .16));
}


/* ============================================================
   LOGO INSIDE BADGE
   ============================================================ */

.kiu-logo-image {

    display: block;

    width: 120px;

    height: 120px;

    object-fit: contain;

    object-position: center;

    flex-shrink: 0;

    margin-top: 2px;

    background: transparent;

    border: 0;

    filter:
        drop-shadow(0 4px 7px rgba(0, 0, 0, .12));
}


/* ============================================================
   UNIVERSITY NAME INSIDE BADGE
   ============================================================ */

.kiu-badge-name {

    margin-top: 13px;

    color: #ffffff;

    text-align: center;

    font-family:
        var(--rs-ff-title);

    font-size: 25px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing:
        -.015em;

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

    max-width: 215px;
}


/* ============================================================
   MOBILE BRAND NAME
   ============================================================ */

.kiu-mobile-brand-name {
    display: none;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.kiu-navigation {

    margin-left:
        305px;

    flex: 1;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-end;
}


.kiu-menu {

    height: 100%;

    display: flex;

    align-items: center;

    gap: 0;
}


.kiu-menu-item {

    height: 100%;

    position: relative;

    display: flex;

    align-items: center;
}


.kiu-menu-link {

    height: 100%;

    padding:
        0 13px;

    display: flex;

    align-items: center;

    gap: 7px;

    position: relative;

    color:
        var(--kiu-text);

    font-size:
        14.5px;

    font-weight:
        700;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color var(--kiu-dur) var(--kiu-ease-out),
        background var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-menu-link::after {

    content: "";

    position: absolute;

    left: 13px;
    right: 13px;

    bottom: 0;

    height: 3px;

    background:
        #0bb3a7;
    /* first try */
    /* #4ac8b8 */
    /* second try */

    /*var(--kiu-blue); */

    border-radius: 3px 3px 0 0;

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-menu-item:hover .kiu-menu-link {

    color:
        var(--kiu-blue);

    background:
        rgba(18, 63, 115, .025);
}


.kiu-menu-item:hover .kiu-menu-link::after,
.kiu-menu-item.active .kiu-menu-link::after {

    transform:
        scaleX(1);
}


.kiu-menu-item.active .kiu-menu-link {

    color:
        var(--kiu-blue);
}


/* ============================================================
   CHEVRON
   ============================================================ */

.kiu-chevron {

    width: 7px;
    height: 7px;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        rotate(45deg);

    margin-top:
        -4px;

    opacity:
        .65;

    transition:
        transform var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-menu-item:hover .kiu-chevron,
.kiu-menu-item.open .kiu-chevron {

    transform:
        rotate(225deg);

    margin-top:
        3px;
}


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

.kiu-dropdown {

    position: absolute;

    top:
        calc(100% + 1px);

    left: 0;

    min-width:
        265px;

    padding:
        9px;

    background:
        #ffffff;

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

    border-top:
        3px solid var(--kiu-blue);

    border-radius:
        0 0 12px 12px;

    box-shadow:
        0 18px 45px rgba(8, 34, 67, .14);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(9px);

    transition:
        opacity var(--kiu-dur-fast) var(--kiu-ease-out),
        transform var(--kiu-dur-fast) var(--kiu-ease-out),
        visibility var(--kiu-dur-fast) var(--kiu-ease-out);

    z-index:
        500;
}


.kiu-menu-item:hover .kiu-dropdown,
.kiu-menu-item.open .kiu-dropdown {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}


.kiu-dropdown li a {

    min-height:
        42px;

    padding:
        10px 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #52667d;

    font-size:
        13px;

    font-weight:
        500;

    border-radius:
        7px;

    transition:
        color var(--kiu-dur-fast) var(--kiu-ease-out),
        background var(--kiu-dur-fast) var(--kiu-ease-out),
        padding-left var(--kiu-dur-fast) var(--kiu-ease-out);
}


.kiu-dropdown li a::before {

    content:
        "";

    width:
        4px;

    height:
        4px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--kiu-cyan);

    opacity:
        0;

    transition:
        opacity var(--kiu-dur-fast) var(--kiu-ease-out);
}


.kiu-dropdown li a:hover {

    background:
        var(--kiu-cyan-soft);

    color:
        var(--kiu-blue);

    padding-left:
        18px;
}


.kiu-dropdown li a:hover::before {

    opacity:
        1;
}


/* ============================================================
   NESTED SUB-DROPDOWN (FLYOUT)
   ============================================================ */

.kiu-dropdown li {
    position: relative;
}

.kiu-dropdown li.kiu-has-sub > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kiu-dropdown li.kiu-has-sub > a .kiu-sub-arrow {
    font-size: 15px;
    margin-left: auto;
    color: #8b9eb5;
    transition: transform var(--kiu-dur-fast) var(--kiu-ease-out), color var(--kiu-dur-fast) var(--kiu-ease-out);
    display: inline-flex;
    align-items: center;
}

.kiu-dropdown li.kiu-has-sub:hover > a .kiu-sub-arrow {
    transform: translateX(3px);
    color: var(--kiu-blue);
}

.kiu-sub-dropdown {
    position: absolute;
    top: -9px;
    left: 100%;
    min-width: 240px;
    padding: 9px;
    background: #ffffff;
    border: 1px solid var(--kiu-border);
    border-top: 3px solid var(--kiu-blue);
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 18px 45px rgba(8,34,67,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity var(--kiu-dur-fast) var(--kiu-ease-out), transform var(--kiu-dur-fast) var(--kiu-ease-out), visibility var(--kiu-dur-fast) var(--kiu-ease-out);
    z-index: 510;
    list-style: none;
    margin: 0;
}

.kiu-dropdown li.kiu-has-sub:hover > .kiu-sub-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* ============================================================
   ACTIONS
   ============================================================ */

.kiu-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-left:
        12px;
}


/* ============================================================
   APPLY NOW CTA
   ============================================================ */

.kiu-cta {

    height:
        39px;

    padding:
        0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--kiu-blue);

    color:
        #ffffff;

    border:
        1px solid var(--kiu-blue);

    border-radius:
        5px;

    font-size:
        12px;

    font-weight:
        650;

    white-space:
        nowrap;

    transition:
        all var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-cta:hover {

    background:
        var(--kiu-navy);

    border-color:
        var(--kiu-navy);

    transform:
        translateY(var(--kiu-lift));

    box-shadow:
        0 7px 18px rgba(18, 63, 115, .18);
}


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

.kiu-mobile-toggle {

    width:
        40px;

    height:
        40px;

    padding:
        0;

    display:
        none;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

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

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

    border-radius:
        8px;

    cursor:
        pointer;

    transition:
        var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-mobile-toggle:hover {

    background:
        rgba(255, 255, 255, .17);
}


.kiu-mobile-toggle span {

    width:
        20px;

    height:
        2px;

    background:
        #ffffff;

    border-radius:
        3px;

    transition:
        var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-mobile-toggle.open span:nth-child(1) {

    transform:
        translateY(7px) rotate(45deg);
}


.kiu-mobile-toggle.open span:nth-child(2) {

    opacity:
        0;
}


.kiu-mobile-toggle.open span:nth-child(3) {

    transform:
        translateY(-7px) rotate(-45deg);
}


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

/* The overlay and the drawer must outrank #kiu-navbar, which carries
   z-index: 2147483647. At 100001/100002 they lost to it, so the topbar, the
   mainbar and the hanging badge all painted on top of an open drawer: the
   badge sat over the panel, and because the navbar (~94px) is taller than the
   drawer's own 82px header, it clipped the first menu item.

   Both markers are siblings that follow </header> in the DOM, so matching the
   navbar's value is enough — source order breaks the tie in their favour, and
   the drawer (later) still wins over the overlay. */
.kiu-mobile-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        2147483647;

    background:
        rgba(5, 20, 40, .62);

    backdrop-filter:
        blur(4px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity var(--kiu-dur) var(--kiu-ease-out),
        visibility var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-mobile-overlay.open {

    opacity:
        1;

    visibility:
        visible;
}


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

.kiu-mobile-drawer {

    position:
        fixed;

    top:
        0;

    right:
        0;

    bottom:
        0;

    width:
        365px;

    max-width:
        92vw;

    background:
        #ffffff;

    /* Same value as the overlay above; the drawer follows it in the DOM. */
    z-index:
        2147483647;

    transform:
        translateX(100%);

    transition:
        transform .35s cubic-bezier(.4, 0, .2, 1);

    box-shadow:
        -18px 0 55px rgba(0, 0, 0, .20);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;
}


.kiu-mobile-drawer.open {

    transform:
        translateX(0);
}


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

.kiu-mobile-header {

    min-height:
        82px;

    flex-shrink:
        0;

    padding:
        10px 16px;

    background:
        linear-gradient(135deg,
            #f8fbfe 0%,
            #ffffff 100%);

    border-bottom:
        1px solid #e6edf4;

    display:
        flex;

    align-items:
        center;

    position:
        relative;
}


/* MOBILE LOGO */

.kiu-mobile-logo {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

    flex-shrink:
        0;
}


/* ============================================================
   MOBILE DRAWER UNIVERSITY NAME
   ============================================================ */

.kiu-mobile-drawer-name {

    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        calc(100% - 125px);

    text-align:
        center;

    color:
        var(--kiu-blue);

    font-family:
        var(--rs-ff-title);

    font-size:
        18px;

    line-height:
        1.05;

    font-weight:
        700;

    letter-spacing:
        -.015em;

    white-space:
        nowrap;

    pointer-events:
        none;

    user-select:
        none;
}


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

.kiu-mobile-close {

    position:
        relative;

    z-index:
        10;

    width:
        38px;

    height:
        38px;

    margin-left:
        auto;

    flex-shrink:
        0;

    border:
        1px solid #dbe4ed;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--kiu-blue);

    font-size:
        22px;

    line-height:
        1;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

    pointer-events:
        auto;

    user-select:
        none;

    transition:
        var(--kiu-dur-fast) var(--kiu-ease-out);
}


.kiu-mobile-close:hover,
.kiu-mobile-close:active {

    color:
        #ffffff;

    background:
        var(--kiu-blue);

    border-color:
        var(--kiu-blue);
}


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

.kiu-mobile-body {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding:
        8px 0 25px;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        thin;

    scrollbar-color:
        #b9c8d8 transparent;
}


.kiu-mobile-body::-webkit-scrollbar {

    width:
        5px;
}


.kiu-mobile-body::-webkit-scrollbar-track {

    background:
        transparent;
}


.kiu-mobile-body::-webkit-scrollbar-thumb {

    background:
        #b9c8d8;

    border-radius:
        10px;
}


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

.kiu-mobile-item {

    border-bottom:
        1px solid #edf1f6;
}


.kiu-mobile-link {

    min-height:
        53px;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--kiu-text);

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background var(--kiu-dur-fast) var(--kiu-ease-out),
        color var(--kiu-dur-fast) var(--kiu-ease-out);
}


.kiu-mobile-link:hover {

    color:
        var(--kiu-blue);

    background:
        var(--kiu-cyan-soft);
}


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

.kiu-mobile-arrow {

    width:
        8px;

    height:
        8px;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        rotate(45deg);

    margin-top:
        -4px;

    transition:
        transform var(--kiu-dur) var(--kiu-ease-out);
}


.kiu-mobile-item.open .kiu-mobile-arrow {

    transform:
        rotate(225deg);

    margin-top:
        4px;
}


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

.kiu-mobile-sub {

    display:
        none;

    background:
        #f7fafc;
}


.kiu-mobile-item.open .kiu-mobile-sub {

    display:
        block;
}


.kiu-mobile-sub a {

    display:
        flex;

    align-items:
        center;

    min-height:
        44px;

    padding:
        9px 20px 9px 38px;

    color:
        #566981;

    font-size:
        13px;

    border-top:
        1px solid #e9eef4;

    transition:
        var(--kiu-dur-fast) var(--kiu-ease-out);

    position:
        relative;
}


.kiu-mobile-sub a::before {

    content:
        "";

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--kiu-cyan);

    position:
        absolute;

    left:
        23px;
}


.kiu-mobile-sub a:hover {

    color:
        var(--kiu-blue);

    background:
        var(--kiu-cyan-soft);

    padding-left:
        43px;
}


.kiu-mobile-sub a.kiu-mobile-sub-child {

    padding-left:
        52px;

    font-size:
        12.5px;

    color:
        #647890;

    background:
        rgba(0, 0, 0, .02);
}


.kiu-mobile-sub a.kiu-mobile-sub-child::before {

    left:
        38px;

    width:
        4px;

    height:
        4px;

    background:
        var(--kiu-blue);
}


.kiu-mobile-sub a.kiu-mobile-sub-child:hover {

    color:
        var(--kiu-blue);

    background:
        var(--kiu-cyan-soft);

    padding-left:
        56px;
}


/* ============================================================
   QUICK ACCESS
   ============================================================ */

.kiu-quick-access {

    margin:
        0;

    padding:
        0;
}


/* QUICK LINKS */

/* Scoped to .kiu-mobile-sub so these beat the generic `.kiu-mobile-sub a`
   rules above — same specificity would lose on source order alone, and the
   two-column grid would collapse into a plain submenu list. */
.kiu-mobile-sub .kiu-quick-grid {

    display:
        grid;

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

    gap:
        0;

    background:
        #f7fafc;
}


.kiu-mobile-sub .kiu-quick-link {

    min-height:
        43px;

    padding:
        8px 10px 8px 38px;

    display:
        flex;

    align-items:
        center;

    position:
        relative;

    color:
        #566981;

    font-size:
        12.5px;

    font-weight:
        500;

    border-bottom:
        1px solid #e9eef4;

    transition:
        var(--kiu-dur-fast) var(--kiu-ease-out);
}


.kiu-mobile-sub .kiu-quick-link::before {

    content:
        "";

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--kiu-cyan);

    position:
        absolute;

    left:
        23px;
}


.kiu-mobile-sub .kiu-quick-link:hover {

    color:
        var(--kiu-blue);

    background:
        #eefafa;

    padding-left:
        42px;
}


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

.kiu-mobile-footer {

    padding:
        14px 18px 8px;

    text-align:
        center;

    color:
        #8998a9;

    font-size:
        10.5px;

    line-height:
        1.5;
}


/* ============================================================
   SCROLL STATE
   ============================================================ */

/*
 * Top bar disappears after scrolling.
 */

#kiu-navbar.kiu-scrolled .kiu-topbar {

    height:
        0;

    min-height:
        0;

    opacity:
        0;

    visibility:
        hidden;

    overflow:
        hidden;
}


/*
 * Main bar gets slightly stronger shadow.
 */

#kiu-navbar.kiu-scrolled .kiu-mainbar {

    box-shadow:
        0 8px 30px rgba(7, 31, 61, .12);
}


/*
 * Badge gets slightly smaller while scrolling.
 */

#kiu-navbar.kiu-scrolled .kiu-logo-holder {

    transform:
        scale(.92);

    transform-origin:
        top center;
}


/* ============================================================
   1280
   ============================================================ */

@media (max-width: 1280px) {

    .kiu-menu-link {

        padding:
            0 9px;

        font-size:
            14px;
    }


    .kiu-menu-link::after {

        left:
            9px;

        right:
            9px;
    }


    .kiu-logo-holder {

        left:
            15px;

        width:
            235px;

        height:
            270px;
    }


    .kiu-logo-image {

        width:
            94px;

        height:
            94px;
    }


    .kiu-badge-name {

        font-size:
            23px;
    }


    .kiu-navigation {

        margin-left:
            275px;
    }

}


/* ============================================================
   1140
   ============================================================ */

@media (max-width: 1140px) {

    .kiu-menu {

        display:
            none;
    }


    .kiu-cta {

        display:
            none;
    }


    .kiu-mobile-toggle {

        display:
            flex;
    }


    .kiu-navigation {

        margin-left:
            auto;

        justify-content:
            flex-end;
    }

}


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

@media (max-width: 700px) {

    #kiu-navbar {

        transition:
            transform .38s cubic-bezier(.4,0,.2,1),
            opacity var(--kiu-dur-slow) var(--kiu-ease-out);
    }


    #kiu-navbar.kiu-nav-hidden {

        transform:
            translateY(-100%);
    }


    #kiu-navbar.kiu-nav-visible {

        transform:
            translateY(0);
    }


    .kiu-topbar {

        display:
            none;
    }


    .kiu-mainbar {

        /* Height is fixed at 76px by the final layering rules below */

        background:
            linear-gradient(135deg,
                #164778 0%,
                #1a4d7d 100%);

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

        box-shadow:
            0 5px 18px rgba(7, 31, 61, .18);
    }


    .kiu-main-inner {

        width:
            calc(100% - 20px);

        justify-content:
            space-between;
    }


    /* MOBILE LOGO HOLDER */

    .kiu-logo-holder {

        position:
            relative;

        top:
            auto;

        left:
            auto;

        width:
            auto;

        height:
            58px;

        padding:
            0;

        background:
            transparent;

        clip-path:
            none;

        filter:
            none;

        border:
            0;

        display:
            flex;

        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            flex-start;

        transform:
            none;

        box-shadow:
            none;
    }


    .kiu-logo-holder::before {

        display:
            none;
    }


    .kiu-logo-image {

        width:
            58px;

        height:
            52px;

        object-fit:
            contain;

        filter:
            none;
    }


    .kiu-badge-name {

        display:
            none;
    }


    .kiu-mobile-brand-name {

        display:
            block;

        position:
            absolute;

        left:
            50%;

        transform:
            translateX(-50%);

        width:
            calc(100% - 155px);

        text-align:
            center;

        /* Navy, not white: the mobile block below sets a dark gradient on
           .kiu-mainbar, but `#kiu-navbar .kiu-mainbar { background: #fff }`
           further down outranks it on source order, so the bar is actually
           white at every mobile state and white text rendered invisible —
           which is why this space looked empty. */
        color:
            var(--kiu-blue);

        font-family:
            var(--rs-ff-title);

        font-size:
            16px;

        line-height:
            1;

        font-weight:
            700;

        letter-spacing:
            -.015em;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        pointer-events:
            none;
    }


    .kiu-mobile-brand-en,
    .kiu-mobile-brand-bn {

        display:
            block;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        /* The parent's line-height: 1 crops descenders (g, y) and Bangla
           vowel marks once overflow is hidden — give each line room. */
        line-height:
            1.3;
    }


    .kiu-mobile-brand-bn {

        margin-top:
            2px;

        color:
            #0f7f97;

        font-family:
            "Kalpurush",
            "Noto Sans Bengali",
            "Hind Siliguri",
            sans-serif;

        font-size:
            .9em;

        font-weight:
            400;

        line-height:
            1.45;

        letter-spacing:
            0;
    }


    .kiu-navigation {

        margin-left:
            auto;

        height:
            100%;

        flex:
            0 0 auto;
    }


    .kiu-actions {

        margin-left:
            0;
    }


    .kiu-mobile-toggle {

        width:
            40px;

        height:
            40px;

        display:
            flex;
    }

}


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

@media (max-width: 430px) {

    .kiu-main-inner {

        width:
            calc(100% - 16px);
    }


    .kiu-logo-image {

        width:
            53px;

        height:
            48px;
    }


    .kiu-mobile-brand-name {

        width:
            calc(100% - 140px);

        font-size:
            14px;
    }


    .kiu-mobile-toggle {

        width:
            38px;

        height:
            38px;
    }


    .kiu-mobile-drawer {

        width:
            350px;

        max-width:
            94vw;
    }


    .kiu-mobile-drawer-name {

        font-size:
            17px;

        width:
            calc(100% - 120px);
    }

}


/* ============================================================
   EXTRA SMALL
   ============================================================ */

@media (max-width: 350px) {

    .kiu-mobile-brand-name {

        width:
            calc(100% - 125px);

        font-size:
            12.5px;
    }


    .kiu-logo-image {

        width:
            49px;

        height:
            45px;
    }


    .kiu-mobile-toggle {

        width:
            36px;

        height:
            36px;
    }


    .kiu-mobile-drawer-name {

        font-size:
            15px;
    }

}


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

@media (hover: none) {

    .kiu-logo-holder:hover {

        transform:
            none;
    }

}


/* ============================================================
   DESKTOP BRAND NAME HIDDEN
   ============================================================ */

@media (min-width: 701px) {

    .kiu-mobile-brand-name {

        display:
            none;
    }

}


/* ============================================================
   FINAL DESKTOP POLISH
   ============================================================ */

@media (min-width: 1141px) {

    .kiu-topbar {

        height:
            38px;
    }


    .kiu-topbar-inner {

        width:
            min(1500px, calc(100% - 60px));

        height:
            38px;

        margin:
            0 auto;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;
    }


    .kiu-top-welcome {

        display:
            flex;

        align-items:
            center;

        gap:
            8px;

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

        font-size:
            12px;

        font-weight:
            600;

        letter-spacing:
            0;

        white-space:
            nowrap;
    }


    .kiu-top-welcome-icon {

        width:
            17px;

        height:
            17px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        flex:
            0 0 auto;
    }


    .kiu-top-welcome-icon svg {

        width:
            17px;

        height:
            17px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.5;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;
    }


    .kiu-top-right {

        display:
            flex;

        align-items:
            center;

        gap:
            14px;
    }


    .kiu-top-link {

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

        font-size:
            12px;

        font-weight:
            500;

        letter-spacing:
            0;
    }


    .kiu-top-divider {

        width:
            1px;

        height:
            14px;

        background:
            rgba(255, 255, 255, .28);
    }


    /* MAIN NAVBAR */

    .kiu-mainbar {

        height:
            76px;
    }


    .kiu-main-inner {

        width:
            min(1500px, calc(100% - 60px));

        height:
            76px;

        margin:
            0 auto;
    }


    /* HANGING BADGE */

    .kiu-logo-holder {

        left:
            0;

        top:
            0;

        width:
            218px;

        height:
            235px;

        padding:
            18px 14px 28px;

        clip-path:
            polygon(0 0,
                100% 0,
                100% 83%,
                50% 100%,
                0 83%);

        filter:
            drop-shadow(0 4px 7px rgba(7, 31, 61, .16)) drop-shadow(0 10px 14px rgba(7, 31, 61, .10));
    }


    .kiu-logo-holder::before {

        height:
            3px;
    }


    .kiu-logo-image {

        width:
            78px;

        height:
            78px;

        margin-top:
            1px;

        filter:
            drop-shadow(0 3px 5px rgba(0, 0, 0, .11));
    }


    .kiu-badge-name {

        margin-top:
            9px;

        max-width:
            185px;

        font-size:
            22px;

        line-height:
            1.04;

        letter-spacing:
            -.015em;
    }


    /* NAVIGATION */

    .kiu-navigation {

        margin-left:
            250px;

        height:
            76px;

        flex:
            1;

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-end;
    }


    .kiu-menu {

        height:
            76px;

        gap:
            0;
    }


    .kiu-menu-item {

        height:
            76px;
    }


    .kiu-menu-link {

        height:
            76px;

        padding:
            0 11px;

        gap:
            6px;

        font-size:
            15px;

        font-weight:
            700;
    }


    .kiu-menu-link::after {

        left:
            11px;

        right:
            11px;

        height:
            3px;
    }


    .kiu-chevron {

        width:
            6px;

        height:
            6px;

        border-width:
            1.4px;
    }


    /* ACTIONS */

    .kiu-actions {

        height:
            76px;

        display:
            flex;

        align-items:
            center;

        gap:
            8px;

        margin-left:
            9px;

        flex:
            0 0 auto;
    }


    /* DESKTOP HAMBURGER */

    .kiu-mobile-toggle {

        width:
            38px;

        height:
            38px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-direction:
            column;

        gap:
            5px;

        margin-left:
            3px;

        background:
            transparent;

        border:
            0;

        border-radius:
            0;
    }


    .kiu-mobile-toggle:hover {

        background:
            transparent;
    }


    .kiu-mobile-toggle span {

        width:
            23px;

        height:
            2px;

        background:
            #102846;

        border-radius:
            2px;
    }


    /* APPLY NOW */

    .kiu-cta {

        height:
            38px;

        padding:
            0 18px;

        margin-left:
            1px;

        background:
            #1455a4;

        border:
            1px solid #1455a4;

        border-radius:
            21px;

        font-size:
            13px;

        font-weight:
            600;

        letter-spacing:
            0;

        color:
            #fff;
    }


    .kiu-cta::after {

        content:
            "→";

        margin-left:
            9px;

        font-size:
            17px;

        line-height:
            1;
    }


    .kiu-cta:hover {

        background:
            #0b4388;

        border-color:
            #0b4388;

        transform:
            translateY(var(--kiu-lift));
    }


}


/* ============================================================
   WIDE SCREEN
   ============================================================ */

@media (min-width: 1500px) {

    .kiu-topbar-inner,
    .kiu-main-inner {

        width:
            min(1540px, calc(100% - 70px));
    }


    .kiu-logo-holder {

        width:
            220px;
    }


    .kiu-navigation {

        margin-left:
            252px;
    }


    .kiu-menu-link {

        padding-left:
            12px;

        padding-right:
            12px;
    }
}


/* ============================================================
   1141–1280px
   ============================================================ */

@media (min-width: 1141px) and (max-width: 1280px) {

    .kiu-topbar-inner,
    .kiu-main-inner {

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


    .kiu-logo-holder {

        width:
            198px;

        height:
            220px;

        padding-top:
            16px;
    }


    .kiu-logo-image {

        width:
            70px;

        height:
            70px;
    }


    .kiu-badge-name {

        font-size:
            20px;
    }


    .kiu-navigation {

        margin-left:
            218px;
    }


    .kiu-menu-link {

        padding-left:
            7px;

        padding-right:
            7px;

        font-size:
            14px;
    }


    .kiu-actions {

        gap:
            5px;

        margin-left:
            5px;
    }


    .kiu-cta {

        padding-left:
            13px;

        padding-right:
            13px;
    }
}


/* ============================================================
   FINAL FIX — NAVBAR LAYERING
   ============================================================ */

#kiu-navbar {
    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    width:
        100%;

    z-index:
        2147483647;

    isolation:
        isolate;
}


#kiu-navbar .kiu-topbar {

    position:
        relative;

    z-index:
        20;
}


#kiu-navbar .kiu-mainbar {

    position:
        relative;

    z-index:
        30;

    width:
        100%;

    height:
        76px;

    min-height:
        76px;

    background:
        #ffffff;

    opacity:
        1;

    visibility:
        visible;

    overflow:
        visible;

    box-shadow:
        0 6px 22px rgba(7,31,61,.10);
}


#kiu-navbar .kiu-main-inner {

    position:
        relative;

    z-index:
        31;

    height:
        76px;
}


#kiu-navbar .kiu-navigation,
#kiu-navbar .kiu-menu,
#kiu-navbar .kiu-menu-item,
#kiu-navbar .kiu-menu-link,
#kiu-navbar .kiu-actions {

    position:
        relative;

    z-index:
        40;
}


#kiu-navbar .kiu-navigation {

    height:
        76px;

    align-items:
        center;
}


#kiu-navbar .kiu-menu {

    height:
        76px;

    align-items:
        center;
}


#kiu-navbar .kiu-menu-item {

    height:
        76px;

    align-items:
        center;
}


#kiu-navbar .kiu-menu-link {

    height:
        76px;

    align-items:
        center;
}


#kiu-navbar .kiu-actions {

    height:
        76px;

    align-items:
        center;
}


#kiu-navbar .kiu-logo-holder {

    position:
        absolute;

    z-index:
        100;
}


#kiu-navbar .kiu-mobile-toggle,
#kiu-navbar .kiu-cta {

    position:
        relative;

    z-index:
        50;
}


/* DROPDOWN ABOVE HERO */

#kiu-navbar .kiu-dropdown {

    z-index:
        500;
}


/* ============================================================
   SCROLL
   ============================================================ */

#kiu-navbar.kiu-scrolled .kiu-topbar {

    height:
        0;

    min-height:
        0;

    opacity:
        0;

    visibility:
        hidden;

    overflow:
        hidden;
}


#kiu-navbar.kiu-scrolled .kiu-mainbar {

    height:
        76px;

    min-height:
        76px;

    z-index:
        100;

    box-shadow:
        0 8px 28px rgba(7,31,61,.14);
}


#kiu-navbar.kiu-scrolled .kiu-main-inner,
#kiu-navbar.kiu-scrolled .kiu-navigation,
#kiu-navbar.kiu-scrolled .kiu-menu,
#kiu-navbar.kiu-scrolled .kiu-actions {

    height:
        76px;
}


#kiu-navbar.kiu-scrolled .kiu-logo-holder {

    transform:
        none;

    transform-origin:
        top center;
}


/* ============================================================
   PREVENT HERO / SLIDER COVERING NAVBAR
   ============================================================ */

.kiu-hero,
.hero,
.hero-section,
.kiu-slider,
.slider,
.swiper,
.swiper-container {

    position:
        relative;

    z-index:
        1;
}


/* ============================================================
   FINAL BADGE ADJUSTMENT
   DESKTOP
   ============================================================ */

@media (min-width: 1141px) {

    #kiu-navbar .kiu-logo-holder {

        left:
            35px;

        width:
            202px;

        height:
            220px;

        padding:
            12px 12px 22px;
    }


    #kiu-navbar .kiu-logo-image {

        width:
            82px;

        height:
            82px;

        margin-top:
            0;
    }


    #kiu-navbar .kiu-badge-name {

        margin-top:
            7px;

        max-width:
            174px;

        font-size:
            20px;

        line-height:
            1.04;
    }


    #kiu-navbar .kiu-navigation {

        margin-left:
            235px;
    }
}


/* ============================================================
   WIDE SCREEN 1500+
   ============================================================ */

@media (min-width: 1500px) {

    #kiu-navbar .kiu-logo-holder {

        left:
            37px;

        width:
            204px;

        height:
            222px;

        padding:
            13px 12px 23px;
    }


    #kiu-navbar .kiu-logo-image {

        width:
            84px;

        height:
            84px;
    }


    #kiu-navbar .kiu-navigation {

        margin-left:
            240px;
    }
}


/* ============================================================
   1141–1280px FINAL BADGE
   ============================================================ */

@media (min-width: 1141px) and (max-width: 1280px) {

    #kiu-navbar .kiu-logo-holder {

        left:
            30px;

        width:
            190px;

        height:
            212px;

        padding:
            12px 10px 21px;
    }


    #kiu-navbar .kiu-logo-image {

        width:
            76px;

        height:
            76px;
    }


    #kiu-navbar .kiu-badge-name {

        margin-top:
            6px;

        font-size:
            19px;

        max-width:
            166px;
    }


    #kiu-navbar .kiu-navigation {

        margin-left:
            210px;
    }
}


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

@media (max-width: 1140px) {

    #kiu-navbar .kiu-logo-holder {

        left:
            auto;
    }
}


/* ============================================================
   FINAL MOBILE LOGO
   ============================================================ */

@media (max-width: 700px) {

    #kiu-navbar .kiu-logo-holder {

        left:
            auto;

        width:
            auto;

        height:
            58px;

        padding:
            0;

        background:
            transparent;

        clip-path:
            none;

        filter:
            none;

        transform:
            none;
    }


    #kiu-navbar .kiu-logo-image {

        width:
            58px;

        height:
            52px;
    }
}


@media (max-width: 430px) {

    #kiu-navbar .kiu-logo-image {

        width:
            53px;

        height:
            48px;
    }
}


@media (max-width: 350px) {

    #kiu-navbar .kiu-logo-image {

        width:
            49px;

        height:
            45px;
    }
}


/* ============================================================
   MOBILE SCROLL SAFETY
   ============================================================ */

@media (max-width: 700px) {

    #kiu-navbar.kiu-mobile-open {

        transform:
            translateY(0);
    }


    #kiu-navbar.kiu-mobile-open .kiu-mainbar {

        box-shadow:
            0 5px 18px rgba(7,31,61,.18);
    }
}


/* ============================================================
   TABLET HAMBURGER (701–1140px)
   The base toggle styles assume the dark blue mobile bar;
   on the white mainbar the bars must be dark to be visible.
   ============================================================ */

@media (min-width: 701px) and (max-width: 1140px) {

    .kiu-mobile-toggle {

        background:
            #ffffff;

        border:
            1px solid #dbe4ed;
    }


    .kiu-mobile-toggle span {

        background:
            #102846;
    }
}


/* ============================================================
   PHONE HAMBURGER (≤700px)
   Same fix as tablet: the mainbar is forced white above,
   so the toggle bars must be dark blue to stay visible.
   ============================================================ */

@media (max-width: 700px) {

    .kiu-mobile-toggle {

        background:
            #ffffff;

        border:
            1px solid #dbe4ed;
    }


    .kiu-mobile-toggle span {

        background:
            var(--kiu-blue);
    }
}


/* ============================================================
   HAMBURGER ONLY WHERE THE MENU IS HIDDEN
   (overrides the desktop-hamburger display:flex above)
   ============================================================ */

@media (min-width: 1141px) {

    .kiu-mobile-toggle {

        display:
            none;
    }
}


/* ============================================================
   LOGO PLAQUE + SCROLL SHRINK
   ------------------------------------------------------------
   The lockup is typeset rather than an image now: the crest
   (public/kiu_logo.webp, transparent) sits left of a hairline
   rule, with the English name in Source Serif 4 and the Bengali
   name in Kalpurush stacked beside it. Live text means it stays
   sharp at any density, recolours with the design and is
   readable by search engines and screen readers.

   The plaque it sits on is built from four layers:

     1. a flat white face — no gradients anywhere on it
     2. a 1px teal-tinted keyline plus a 1px inner top highlight
     3. a flat teal foot rail
     4. two shadows — a tight contact shadow and a wide teal
        ambient one

   The two bottom corners carry the same radius; the top edge is
   square because it is tucked under the bar. The radius eases
   down with the plaque as it docks, so the curve stays in
   proportion at every size.

   Motion:
     - on load  : the face drops out from behind the bar
     - on hover : the plaque lifts, its shadow blooms and the
                  crest scales a touch
     - on scroll: it docks into the 76px bar, corners tightening
                  and every border dropping away as it goes

   Applies from 701px up. Below that .kiu-badge-face collapses to
   display:contents and the existing bare-crest treatment takes
   over untouched.

   This block is last in the file on purpose. The badge is
   already sized by several earlier !important blocks, so these
   rules need equal specificity plus later source order to win.
   ============================================================ */

/* The plaque belongs to the desktop bar only: on mobile the crest
   has to stay a direct flex item of the holder so the bare-crest
   rules keep working, and the decorative layers stay out of it. */
#kiu-navbar .kiu-badge-face {

    display: contents;
}


#kiu-navbar .kiu-badge-rule {

    display: none;
}


@keyframes kiu-plaque-drop {

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

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


@media (min-width: 701px) {

    #kiu-navbar .kiu-logo-holder {

        position: absolute;

        left: 18px;
        top: 0;

        margin-left: 0;

        /* Width follows the lockup; only the height is driven. */
        width: auto;
        height: 112px;

        min-height: 0;

        display: block;

        padding: 0;

        background: transparent;

        clip-path: none;

        /* Tight contact shadow + wide teal ambient. */
        filter:
            drop-shadow(0 2px 4px rgba(7, 31, 61, .10))
            drop-shadow(0 18px 34px rgba(20, 174, 181, .22));

        transform: none;

        transition:
            height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            transform var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            filter var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }


    /* The old highlight strip belongs to the navy badge. */
    #kiu-navbar .kiu-logo-holder::before {

        display: none;
    }


    #kiu-navbar .kiu-logo-holder:hover,
    #kiu-navbar .kiu-logo-holder:focus-visible {

        transform: translateY(3px);

        filter:
            drop-shadow(0 3px 6px rgba(7, 31, 61, .12))
            drop-shadow(0 24px 44px rgba(20, 174, 181, .34));
    }


    /* ---------- The rectangle behind the lockup ---------- */

    #kiu-navbar .kiu-badge-face {

        position: relative;

        display: flex;

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

        gap: 16px;

        width: 100%;
        height: 100%;

        padding: 0 30px;

        overflow: hidden;

        background: var(--kiu-white);

        border: 1px solid rgba(20, 174, 181, .28);
        border-top: 0;

        /* Flat teal foot rail — no gradient anywhere on the face. */
        border-bottom: 5px solid var(--kiu-cyan);

        /* The rounding is done by the holder clipping its own
           child, so the rail keeps its full weight into the
           corners instead of being mitred away. */
        border-radius: 0;

        animation:
            kiu-plaque-drop .52s var(--kiu-shrink-ease) both;

        transition:
            padding var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            gap var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }


    /* Clipping on the holder keeps the border-image rail intact
       while still rounding the corners. */
    #kiu-navbar .kiu-logo-holder {

        border-radius: 0 0 20px 20px;

        overflow: hidden;
    }


    /* Inner top highlight — the lip of a printed card. */
    #kiu-navbar .kiu-badge-face::before {

        content: "";

        position: absolute;

        top: 0;
        left: 0;
        right: 0;

        height: 1px;

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

        pointer-events: none;
    }


    /* ---------- Crest ---------- */

    #kiu-navbar .kiu-logo-image {

        display: block;

        width: auto;
        height: 66px;

        max-width: none;

        object-fit: contain;

        margin: 0;

        filter:
            drop-shadow(0 2px 3px rgba(7, 31, 61, .14));

        transition:
            height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            transform var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }


    #kiu-navbar .kiu-logo-holder:hover .kiu-logo-image {

        transform: scale(var(--kiu-scale-hover));
    }


    /* ---------- Hairline between crest and wordmark ---------- */

    #kiu-navbar .kiu-badge-rule {

        display: block;

        flex: 0 0 auto;

        width: 1px;
        height: 60%;

        background: rgba(20, 174, 181, .38);

        transition:
            height var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }


    /* ---------- Wordmark ---------- */

    #kiu-navbar .kiu-badge-text {

        display: flex;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 3px;
    }


    #kiu-navbar .kiu-badge-name {

        display: block;

        margin-top: 0;
        max-width: none;

        color: var(--kiu-navy);

        font-family:
            "Instrument Serif",
            Georgia,
            "Times New Roman",
            serif;

        font-size: 23px;
        font-weight: 600;
        line-height: 1.04;

        letter-spacing: -.006em;

        white-space: nowrap;

        text-shadow: none;

        transition: font-size var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }


    #kiu-navbar .kiu-badge-name-bn {

        display: block;

        color: #0f7f97;

        font-family:
            "Kalpurush",
            "Noto Sans Bengali",
            "Hind Siliguri",
            sans-serif;

        font-size: 17px;
        font-weight: 400;
        line-height: 1.25;

        white-space: nowrap;

        transition: font-size var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }


    /* ---------- Keyboard focus ---------- */

    /* A teal ring round the whole plaque read as a stray border —
       browsers show :focus-visible after any key press (Tab, Alt+Left,
       the address bar), so it seemed to appear at random. Focus now
       reuses the hover lift above and underlines the wordmark, which
       still marks the badge clearly for keyboard users. */
    #kiu-navbar .kiu-logo-holder:focus-visible {

        outline: none;
    }

    #kiu-navbar .kiu-logo-holder:focus-visible .kiu-badge-name {

        text-decoration: underline;
        text-decoration-color: var(--kiu-cyan);
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
    }


    /* ---------- SCROLLED: dock into the 76px bar ---------- */

    #kiu-navbar.kiu-scrolled .kiu-logo-holder {

        top: 0;

        height: 76px;

        border-radius: 0 0 14px 14px;

        filter:
            drop-shadow(0 2px 4px rgba(7, 31, 61, .10))
            drop-shadow(0 10px 22px rgba(20, 174, 181, .18));
    }


    /* Docked, the plaque drops every edge — keyline and foot rail
       both — and rides on its shadow alone, so it reads as part of
       the bar rather than a card parked on it. The frame is the
       expanded state's signature only. */
    #kiu-navbar.kiu-scrolled .kiu-badge-face {

        gap: 12px;

        padding: 0 24px;

        border: 0;
    }


    #kiu-navbar.kiu-scrolled .kiu-logo-image {

        height: 48px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-rule {

        height: 66%;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-name {

        font-size: 17.5px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-name-bn {

        font-size: 13.5px;
    }
}


/* ---------- Compact sizing on narrower bars ----------
   701-1140px is the hamburger range: the plaque still hangs, it
   just runs smaller so it does not crowd the toggle. */

@media (min-width: 701px) and (max-width: 1340px) {

    #kiu-navbar .kiu-logo-holder {

        left: 15px;

        height: 100px;

        border-radius: 0 0 17px 17px;
    }


    #kiu-navbar .kiu-badge-face {

        gap: 13px;

        padding: 0 22px;

        border-bottom-width: 4px;
    }


    #kiu-navbar .kiu-logo-image {

        height: 56px;
    }


    #kiu-navbar .kiu-badge-name {

        font-size: 19.5px;
    }


    #kiu-navbar .kiu-badge-name-bn {

        font-size: 15px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-face {

        gap: 11px;

        padding: 0 18px;
    }


    #kiu-navbar.kiu-scrolled .kiu-logo-image {

        height: 44px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-name {

        font-size: 16px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-name-bn {

        font-size: 12.5px;
    }
}


/* ---------- Wide screens ---------- */

@media (min-width: 1500px) {

    #kiu-navbar .kiu-logo-holder {

        left: 24px;

        height: 124px;

        border-radius: 0 0 23px 23px;
    }


    #kiu-navbar .kiu-badge-face {

        gap: 18px;

        padding: 0 36px;

        border-bottom-width: 6px;
    }


    #kiu-navbar .kiu-logo-image {

        height: 78px;
    }


    #kiu-navbar .kiu-badge-name {

        font-size: 26px;
    }


    #kiu-navbar .kiu-badge-name-bn {

        font-size: 19.5px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-face {

        gap: 14px;

        padding: 0 28px;
    }


    #kiu-navbar.kiu-scrolled .kiu-logo-image {

        height: 52px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-name {

        font-size: 19px;
    }


    #kiu-navbar.kiu-scrolled .kiu-badge-name-bn {

        font-size: 14.5px;
    }
}


/* ---------- Menu clearance (only where the menu is visible) ----------
   The plaque is crest + rule + wordmark + padding wide, so these
   margins are measured off the widest state at each breakpoint. */

@media (min-width: 1141px) {

    #kiu-navbar .kiu-navigation {

        margin-left: 424px;

        transition: margin-left var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }


    #kiu-navbar.kiu-scrolled .kiu-navigation {

        margin-left: 332px;
    }
}


@media (min-width: 1141px) and (max-width: 1340px) {

    #kiu-navbar .kiu-navigation {

        margin-left: 352px;
    }


    #kiu-navbar.kiu-scrolled .kiu-navigation {

        margin-left: 292px;
    }
}


@media (min-width: 1500px) {

    #kiu-navbar .kiu-navigation {

        margin-left: 492px;
    }


    #kiu-navbar.kiu-scrolled .kiu-navigation {

        margin-left: 372px;
    }
}


/* ---------- Phones keep the plain crest ---------- */

@media (max-width: 700px) {

    #kiu-navbar .kiu-badge-text {

        display: none;
    }
}


/* ============================================================
   TOPBAR: ADMISSION CTA + DOWNLOADS
   ------------------------------------------------------------
   Admission moved out of the main bar and collapsed to a single
   link (it points at the university's own admission portal).
   Given it as a primary call to action, it gets a accent outline
   so it reads as more than another utility link, while staying
   inside the topbar's own type scale.
   ============================================================ */

#kiu-navbar .kiu-top-link--cta {
    padding: 3px 12px;
    border: 1px solid rgba(0, 163, 147, .75);
    border-radius: 999px;
    color: #F0D68C;
    font-weight: 700;
    transition: background-color var(--kiu-dur) var(--kiu-ease-out), color var(--kiu-dur) var(--kiu-ease-out);
}

#kiu-navbar .kiu-top-link--cta:hover {
    background: #00A393;
    color: #ffffff;
}

@media (max-width: 991px) {
    #kiu-navbar .kiu-top-link--cta {
        padding: 2px 9px;
    }
}

/* ============================================================
   INACTIVE LINKS
   Webmail and Library have no destination yet. They keep the
   link styling so the bar reads evenly, but must not respond
   to hover or the pointer as though they go somewhere.
   ============================================================ */

#kiu-navbar .kiu-top-link.is-inactive,
#kiuMobileDrawer .kiu-quick-link.is-inactive {

    cursor:
        default;

    opacity:
        .6;
}

#kiu-navbar .kiu-top-link.is-inactive:hover {

    color:
        inherit;

    background:
        transparent;

    /* Keep Webmail and Library at their original desktop width. The old
       shared rule added the mobile submenu's 38px left padding here. */
    padding-left:
        0;
}

#kiuMobileDrawer .kiu-quick-link.is-inactive:hover {

    color:
        inherit;

    background:
        transparent;

    padding-left:
        38px;
}


/* ============================================================
   FINAL INTERACTION + SCROLL SYNCHRONISATION FIX
   ============================================================ */

/* Quick Access dots are indicators of the item currently being interacted
   with; they are not a permanent selected state. */
#kiuMobileDrawer .kiu-mobile-sub .kiu-quick-link::before {

    opacity:
        0;

    transform:
        scale(.45);

    transition:
        opacity var(--kiu-dur-fast) var(--kiu-ease-out),
        transform var(--kiu-dur-fast) var(--kiu-ease-out);
}

#kiuMobileDrawer .kiu-mobile-sub .kiu-quick-link:hover::before,
#kiuMobileDrawer .kiu-mobile-sub .kiu-quick-link:focus-visible::before,
#kiuMobileDrawer .kiu-mobile-sub .kiu-quick-link:active::before {

    opacity:
        1;

    transform:
        scale(1);
}

/* Keep every scroll-driven element on one timing token. From tablet upward
   the topbar keeps its layout height and both bars translate together. This
   avoids the intermediate reflow that exposed a temporary white band between
   the navbar and carousel. */
@media (min-width: 701px) {

    #kiu-navbar {

        --kiu-topbar-travel:
            34px;
    }

    #kiu-navbar .kiu-topbar {

        height:
            var(--kiu-topbar-travel);

        min-height:
            var(--kiu-topbar-travel);

        transform:
            translate3d(0, 0, 0);

        visibility:
            visible;

        will-change:
            transform;

        transition:
            transform var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            visibility 0s linear 0s;
    }

    #kiu-navbar .kiu-mainbar {

        transform:
            translate3d(0, 0, 0);

        will-change:
            transform;

        transition:
            transform var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            box-shadow var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }

    #kiu-navbar.kiu-scrolled .kiu-topbar {

        height:
            var(--kiu-topbar-travel);

        min-height:
            var(--kiu-topbar-travel);

        transform:
            translate3d(0, calc(-1 * var(--kiu-topbar-travel)), 0);

        /* Never fade the blue bar while it is still visible. Fading exposed
           the white page underneath and produced the pale strip above the
           badge seen in the recording. */
        opacity:
            1;

        visibility:
            hidden;

        transition:
            transform var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            visibility 0s linear var(--kiu-shrink-dur);
    }

    #kiu-navbar.kiu-scrolled .kiu-mainbar {

        transform:
            translate3d(0, calc(-1 * var(--kiu-topbar-travel)), 0);
    }

    #kiu-navbar .kiu-logo-holder,
    #kiu-navbar.kiu-scrolled .kiu-logo-holder {

        min-height:
            76px;

        transform:
            none;

        transform-origin:
            top center;

        overflow:
            hidden;

        will-change:
            height;

        transition:
            height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            min-height var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            padding var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            gap var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            filter var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }

    /* The top overlap prevents a hairline above the badge; the compact
       79px height also carries its blue edge 2px below the 76px mainbar. */
    #kiu-navbar .kiu-logo-holder {

        top:
            -1px;
    }

    #kiu-navbar.kiu-scrolled .kiu-logo-holder {

        top:
            -1px;

        height:
            79px;

        min-height:
            79px;
    }

    #kiu-navbar .kiu-logo-image {

        transition:
            width var(--kiu-shrink-dur) var(--kiu-shrink-ease),
            height var(--kiu-shrink-dur) var(--kiu-shrink-ease);
    }
}

@media (min-width: 1141px) {

    #kiu-navbar {

        --kiu-topbar-travel:
            38px;
    }
}


/* ============================================================
   CLEAN NAVBAR / HERO EDGE
   ------------------------------------------------------------
   The light border and sub-pixel edge blending created the pale horizontal
   streak visible over the dark hero. Remove the light border, replace it with
   a navy shadow, and let the compact badge overlap the hero edge by 2px.
   ============================================================ */

#kiu-navbar .kiu-mainbar {

    border-bottom:
        0;

    box-shadow:
        0 1px 0 rgba(7,31,61,.22),
        0 6px 22px rgba(7,31,61,.12);
}

#kiu-navbar.kiu-scrolled .kiu-mainbar {

    box-shadow:
        0 1px 0 rgba(7,31,61,.26),
        0 7px 24px rgba(7,31,61,.14);
}


/* ============================================================
   NAVBAR HIT AREA
   ------------------------------------------------------------
   #kiu-navbar carries `z-index: 2147483647`, and its box is
   taller than what it paints: the shrink translates both bars
   upward without changing their layout height, so once scrolled
   the bottom 34/38px of the element is an empty, transparent
   band sitting over the top of the page.

   With a z-index that high, that band swallowed every click
   aimed at whatever was underneath it — which on /faculty-members
   and /research is a sticky filter bar tucked right under the
   header, so none of its links could be clicked while scrolled.

   The element therefore takes no pointer events itself; the bars
   and controls that actually paint take them back. Anything
   added to the navbar that must be clickable needs to be inside
   one of these, or listed here.
   ============================================================ */

#kiu-navbar {

    pointer-events:
        none;
}

#kiu-navbar .kiu-topbar,
#kiu-navbar .kiu-mainbar,
#kiu-navbar .kiu-logo-holder,
#kiu-navbar .kiu-dropdown,
#kiu-navbar .kiu-mobile-toggle,
#kiu-navbar .kiu-cta {

    pointer-events:
        auto;
}


/* ============================================================
   REDUCED MOTION
   ------------------------------------------------------------
   One block, deliberately last in the file.

   This used to be three separate blocks — near the shrink states, after the
   badge rules, and again after the topbar travel — each restating the same
   declarations because the previous one kept getting outranked. None of them
   worked on the scroll shrink: `#kiu-navbar.kiu-scrolled .kiu-topbar` and
   `.kiu-logo-holder` are (1,2,0), and every reduced-motion rule was (1,1,0),
   so specificity beat them no matter where they sat. The .kiu-scrolled
   variants below close that gap, and being last in the file means source
   order settles every remaining tie.

   Scope note: the hover colour transition on .kiu-top-link--cta is left
   alone on purpose. Reduced motion means less movement, not fewer colour
   cues — colour changes aid comprehension and cause no vestibular problem.
   The mobile drawer's slide is also untouched; say the word if you want it
   to appear instantly too.
   ============================================================ */

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

    #kiu-navbar,
    body.kiu-page-ready #kiu-navbar,

    #kiu-navbar .kiu-topbar,
    #kiu-navbar .kiu-mainbar,
    #kiu-navbar .kiu-logo-holder,
    #kiu-navbar .kiu-badge-face,
    #kiu-navbar .kiu-badge-rule,
    #kiu-navbar .kiu-badge-name,
    #kiu-navbar .kiu-badge-name-bn,
    #kiu-navbar .kiu-logo-image,
    #kiu-navbar .kiu-navigation,

    #kiu-navbar.kiu-scrolled .kiu-topbar,
    #kiu-navbar.kiu-scrolled .kiu-mainbar,
    #kiu-navbar.kiu-scrolled .kiu-logo-holder,
    #kiu-navbar.kiu-scrolled .kiu-badge-face,
    #kiu-navbar.kiu-scrolled .kiu-logo-image {

        transition:
            none;
    }


    /* No drop-in. */
    #kiu-navbar .kiu-badge-face,
    #kiu-navbar.kiu-scrolled .kiu-badge-face {

        animation:
            none;
    }
}