/* ==========================================================================
   School Web — modern theme
   One stylesheet, no framework. Works with the existing Razor views.
   Prefix "ms-" marks every new component so legacy page CSS never collides.
   ========================================================================== */

/* ---------- Fonts (self-hosted, Bangla + Latin, loaded only when needed) -- */
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/hind-siliguri-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/hind-siliguri-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/hind-siliguri-bengali-400-normal.woff2) format("woff2");
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/hind-siliguri-bengali-600-normal.woff2) format("woff2");
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:"Baloo Da 2";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/baloo-da-2-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo Da 2";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/baloo-da-2-bengali-700-normal.woff2) format("woff2");
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  --ink:#16213E; --ink-2:#2E3A57; --muted:#5B6680; --faint:#8A93A8;
  --paddy:#0E8A5F;      --paddy-d:#0A6B4A;      --paddy-t:#E3F4EC;
  --marigold:#F5A201;   --marigold-d:#B97800;   --marigold-t:#FFF3D6;
  --kingfisher:#1B6FD1; --kingfisher-d:#1557A6; --kingfisher-t:#E2EEFC;
  --shapla:#DB3D74;     --shapla-d:#B02A5A;     --shapla-t:#FCE6EE;
  --sky:#F2F6FB; --white:#fff; --line:#DCE3EE; --line-2:#E9EEF5;
  --r-s:8px; --r:14px; --r-l:22px;
  --shadow-1:0 1px 2px rgba(22,33,62,.06),0 2px 8px -2px rgba(22,33,62,.08);
  --shadow-2:0 2px 4px rgba(22,33,62,.05),0 18px 40px -18px rgba(22,33,62,.28);
  --body:"Hind Siliguri","Noto Sans Bengali","Vrinda","SolaimanLipi","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --display:"Baloo Da 2","Hind Siliguri","Vrinda","Segoe UI",system-ui,sans-serif;
  --wrap:1200px; --gutter:clamp(16px,3vw,28px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base --------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.ms-body{margin:0;background:var(--sky);color:var(--ink);font:400 16px/1.65 var(--body);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;top:0!important}

/* ---------- Page background --------------------------------------------
   Default: a light school-doodle pattern (inline SVG, ~2.7 KB, no extra request).
   Photo:   _Layout adds .has-bg-photo + --ms-bg-photo when Content/modern/backgrounds/
            contains <school-domain>.jpg or default.jpg (see the README there).
   --ms-bg-veil: how strongly the photo is faded behind the content (0 = full photo, 1 = hidden).
   A fixed layer (not background-attachment:fixed) so it stays smooth on phones and iOS. */
:root{--ms-bg-veil:.84}
body.ms-body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22 viewBox=%220 0 300 300%22%3E%3Cg fill=%22none%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.2%22%3E%3Cg transform=%22translate(18 22) rotate(-8 12 12) scale(1.45)%22 stroke=%22%230E8A5F%22%3E%3Cpath d=%22M2 5c3-1.5 6-1.5 10 1 4-2.5 7-2.5 10-1v13c-3-1.5-6-1.5-10 1-4-2.5-7-2.5-10-1zM12 6v14%22/%3E%3C/g%3E%3Cg transform=%22translate(128 14) rotate(12 12 12) scale(1.45)%22 stroke=%22%23F5A201%22%3E%3Cpath d=%22M4 20l1-4L16 5l3 3L8 19zM14 7l3 3%22/%3E%3C/g%3E%3Cg transform=%22translate(232 40) rotate(0 12 12) scale(1.45)%22 stroke=%22%23DB3D74%22%3E%3Cpath d=%22M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6 6.6 19.5l1.2-6-4.5-4.2 6.1-.7z%22/%3E%3C/g%3E%3Cg transform=%22translate(62 112) rotate(0 12 12) scale(1.45)%22 stroke=%22%231B6FD1%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.6%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%2210%22 ry=%224%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%2210%22 ry=%224%22 transform=%22rotate(60 12 12)%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%2210%22 ry=%224%22 transform=%22rotate(120 12 12)%22/%3E%3C/g%3E%3Cg transform=%22translate(176 118) rotate(-10 12 12) scale(1.45)%22 stroke=%22%230E8A5F%22%3E%3Cpath d=%22M3 11l18-8-7 18-3-7zM11 14l10-11%22/%3E%3C/g%3E%3Cg transform=%22translate(258 150) rotate(8 12 12) scale(1.45)%22 stroke=%22%23F5A201%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.8.6 1.5 1.6 1.5 2.6h4c0-1 .7-2 1.5-2.6A6 6 0 0 0 12 3z%22/%3E%3C/g%3E%3Cg transform=%22translate(20 206) rotate(-6 12 12) scale(1.45)%22 stroke=%22%231B6FD1%22%3E%3Cpath d=%22M2 9l10-5 10 5-10 5zM6 11v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5%22/%3E%3C/g%3E%3Cg transform=%22translate(120 222) rotate(-14 12 12) scale(1.45)%22 stroke=%22%23DB3D74%22%3E%3Crect x=%222%22 y=%228%22 width=%2220%22 height=%228%22 rx=%221.5%22/%3E%3Cpath d=%22M6 8v3M10 8v4M14 8v3M18 8v4%22/%3E%3C/g%3E%3Cg transform=%22translate(214 236) rotate(0 12 12) scale(1.45)%22 stroke=%22%230E8A5F%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z%22/%3E%3C/g%3E%3C/g%3E%3Cg opacity=%22.22%22%3E%3Ccircle cx=%22104%22 cy=%2272%22 r=%222.6%22 fill=%22%23F5A201%22/%3E%3Ccircle cx=%22236%22 cy=%22196%22 r=%222.6%22 fill=%22%231B6FD1%22/%3E%3Ccircle cx=%22162%22 cy=%22282%22 r=%222.6%22 fill=%22%23DB3D74%22/%3E%3Ccircle cx=%2242%22 cy=%22160%22 r=%222.6%22 fill=%22%23DB3D74%22/%3E%3Ccircle cx=%22286%22 cy=%2292%22 r=%222.6%22 fill=%22%230E8A5F%22/%3E%3Ccircle cx=%2284%22 cy=%22280%22 r=%222.6%22 fill=%22%23F5A201%22/%3E%3C/g%3E%3C/svg%3E") 0 0/300px 300px repeat}
body.ms-body.has-bg-photo::before{
  background:linear-gradient(rgba(242,246,251,var(--ms-bg-veil)),rgba(242,246,251,var(--ms-bg-veil))),var(--ms-bg-photo) center/cover no-repeat}
.ms,.ms *,.ms *::before,.ms *::after{box-sizing:border-box}
.ms img{max-width:100%;display:block}
.ms a{color:inherit;text-decoration:none}
/* Resets use :where() so they carry almost no specificity — any component class wins over them */
.ms button{font:inherit;cursor:pointer;border:0}
:where(.ms) button{color:inherit;background:none;padding:0}
.ms ul{list-style:none}
:where(.ms) ul{margin:0;padding:0}
:where(.ms) h1,:where(.ms) h2,:where(.ms) h3,:where(.ms) h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.01em}
:where(.ms) p{margin:0}
a{color:var(--kingfisher-d)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px}
.ms-wrap{box-sizing:border-box;width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.ms-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ms-skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-s);transition:top .2s}
.ms-skip:focus{top:12px}
.ms-ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* The four-colour ribbon — the site's signature motif */
.ms-ribbon{height:4px;background:linear-gradient(90deg,var(--paddy) 0 25%,var(--marigold) 25% 50%,var(--kingfisher) 50% 75%,var(--shapla) 75% 100%)}

/* ---------- Buttons ------------------------------------------------------ */
.ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.55em 1.15em;
  border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,color .18s}
.ms-btn:hover{transform:translateY(-1px)}
.ms-btn:active{transform:translateY(0)}
.ms-btn--paddy{background:var(--paddy);color:#fff!important}
.ms-btn--paddy:hover{background:var(--paddy-d)}
.ms-btn--marigold{background:var(--marigold);color:var(--ink)!important}
.ms-btn--marigold:hover{background:#FFB21F}
.ms-btn--kingfisher{background:var(--kingfisher);color:#fff!important}
.ms-btn--kingfisher:hover{background:var(--kingfisher-d)}
.ms-btn--shapla{background:var(--shapla);color:#fff!important}
.ms-btn--shapla:hover{background:var(--shapla-d)}
.ms-btn--ghost{background:rgba(255,255,255,.14);color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ms-btn--ghost:hover{background:rgba(255,255,255,.26)}
.ms-btn--line{background:#fff;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--line)}
.ms-btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.ms-btn--block{width:100%}
.ms-pulse{animation:ms-pulse 2.4s var(--ease) infinite}
@keyframes ms-pulse{0%{box-shadow:0 0 0 0 rgba(245,162,1,.55)}70%{box-shadow:0 0 0 14px rgba(245,162,1,0)}100%{box-shadow:0 0 0 0 rgba(245,162,1,0)}}

/* ---------- Top bar ------------------------------------------------------ */
.ms-topbar{background:var(--ink);color:#C9D3E6;font-size:13.5px}
.ms-topbar .ms-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.ms-topbar__date{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-topbar__date .ms-ico{color:var(--marigold)}
.ms-topbar__en{color:#8C99B5}
.ms-topbar__links{display:flex;align-items:center;gap:4px;flex:none}
.ms-topbar__links a,.ms-topbar__links button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;color:#E7ECF6;transition:background-color .15s}
.ms-topbar__links a:hover,.ms-topbar__links button:hover{background:rgba(255,255,255,.1)}
.ms-translate{position:relative}
#google_translate_element{position:absolute;right:0;top:calc(100% + 6px);z-index:120;background:#fff;border-radius:var(--r-s);box-shadow:var(--shadow-2);padding:8px;display:none}
#google_translate_element.is-on{display:block}
.goog-logo-link{display:none!important}
.goog-te-gadget{color:transparent!important;font-size:0!important}
.goog-te-gadget select{font-size:14px;padding:6px;border-radius:6px;border:1px solid var(--line)}
.goog-te-banner-frame.skiptranslate,iframe.skiptranslate{display:none!important}

/* ---------- Header ------------------------------------------------------- */
.ms-header{background:#fff}
.ms-header__row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.ms-brand{display:flex;align-items:center;gap:14px;min-width:0}
.ms-brand__logo{width:68px;height:68px;flex:none;border-radius:50%;background:#fff;padding:4px;
  box-shadow:0 0 0 3px var(--paddy-t),0 0 0 4px var(--paddy);object-fit:contain}
.ms-brand__mono{width:68px;height:68px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--paddy);color:#fff;font:700 30px/1 var(--display)}
.ms-brand__text{min-width:0}
.ms-brand__name{display:block;font:700 clamp(20px,2.6vw,30px)/1.15 var(--display);color:var(--ink);letter-spacing:-.01em}
.ms-brand__addr{display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.4}
.ms-header__actions{display:flex;gap:10px;flex:none}
.ms-burger{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:999px;background:var(--ink);color:#fff!important;font-weight:600;font-size:15px}
.ms-burger .ms-ico{width:22px;height:22px}
.ms-nav__bar{display:none}

/* ---------- Navigation --------------------------------------------------- */
.ms-nav{position:sticky;top:0;z-index:90;background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.ms-nav.is-stuck{box-shadow:0 6px 20px -12px rgba(22,33,62,.35)}
.ms-nav__head{display:none}
.ms-menu{display:flex;flex-wrap:wrap;align-items:stretch}
.ms-menu>li{position:relative}
.ms-menu>li>a{position:relative;display:flex;align-items:center;gap:6px;height:52px;padding:0 16px;font-weight:600;font-size:15.5px;color:var(--ink)}
.ms-menu>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--c,var(--paddy));transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.ms-menu>li:nth-child(4n+1){--c:var(--paddy)}
.ms-menu>li:nth-child(4n+2){--c:var(--marigold)}
.ms-menu>li:nth-child(4n+3){--c:var(--kingfisher)}
.ms-menu>li:nth-child(4n+4){--c:var(--shapla)}
.ms-menu>li:hover>a,.ms-menu>li:focus-within>a,.ms-menu>li.is-current>a{color:var(--c)}
.ms-menu>li:hover>a::after,.ms-menu>li:focus-within>a::after,.ms-menu>li.is-current>a::after{transform:scaleX(1)}
.ms-caret{width:14px;height:14px;transition:transform .2s}
.ms-menu ul{position:absolute;top:100%;left:0;min-width:250px;padding:8px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-2);
  border:1px solid var(--line-2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:5}
.ms-menu ul ul{top:-9px;left:calc(100% + 6px)}
/* The last two top-level menus open towards the left: otherwise their (hidden) dropdowns and flyouts stick out past
   the right edge of the screen and make every page scroll sideways on 992-1270 px wide laptops and tablets. */
.ms-menu>li:nth-last-child(-n+2)>ul{left:auto;right:0}
.ms-menu>li:nth-last-child(-n+2) ul ul{left:auto;right:calc(100% + 6px)}
.ms-menu li:hover>ul,.ms-menu li:focus-within>ul{opacity:1;visibility:visible;transform:none}
.ms-menu ul li{position:relative}
.ms-menu ul a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:var(--r-s);font-size:15px;color:var(--ink-2);line-height:1.35}
.ms-menu ul a:hover,.ms-menu ul li:focus-within>a{background:var(--sky);color:var(--c,var(--paddy-d))}
.ms-menu ul .ms-caret{transform:rotate(-90deg)}
.ms-sub-toggle{display:none}
.ms-nav__backdrop{display:none}

/* ---------- Ticker ------------------------------------------------------- */
.ms-ticker{background:#fff;border-bottom:1px solid var(--line)}
.ms-ticker .ms-wrap{display:flex;align-items:center;gap:14px;min-height:46px}
.ms-ticker__label{display:inline-flex;align-items:center;gap:8px;flex:none;padding:5px 12px 5px 10px;border-radius:999px;background:var(--marigold);color:var(--ink);font-weight:600;font-size:14px}
.ms-ticker__dot{width:8px;height:8px;border-radius:50%;background:var(--shapla);box-shadow:0 0 0 0 rgba(219,61,116,.6);animation:ms-dot 1.8s infinite}
@keyframes ms-dot{70%{box-shadow:0 0 0 7px rgba(219,61,116,0)}100%{box-shadow:0 0 0 0 rgba(219,61,116,0)}}
.ms-ticker__track{position:relative;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ms-ticker__move{display:inline-flex;white-space:nowrap;will-change:transform}
.ms-ticker.is-running .ms-ticker__move{animation:ms-marquee var(--dur,40s) linear infinite}
.ms-ticker__track:hover .ms-ticker__move,.ms-ticker__track:focus-within .ms-ticker__move{animation-play-state:paused}
.ms-ticker__item{display:inline-flex;align-items:center;font-weight:600;font-size:15px;color:var(--ink)!important;padding-right:28px}
.ms-ticker__item::after{content:"";width:6px;height:6px;margin-left:28px;border-radius:2px;transform:rotate(45deg);background:var(--marigold)}
.ms-ticker__item:hover{color:var(--kingfisher-d)!important;text-decoration:underline}
@keyframes ms-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Hero slider (the showpiece) ---------------------------------- */
.ms-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;height:clamp(420px,46vw,620px);isolation:isolate}
.ms-hero__slides{position:absolute;inset:0}
.ms-slide{position:absolute;inset:0;margin:0;visibility:hidden;z-index:0}
.ms-slide img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.ms-slide:nth-child(4n+1) img{transform-origin:20% 30%}
.ms-slide:nth-child(4n+2) img{transform-origin:80% 40%}
.ms-slide:nth-child(4n+3) img{transform-origin:40% 80%}
.ms-slide:nth-child(4n+4) img{transform-origin:70% 20%}
.ms-slide.is-active{visibility:visible;z-index:2}
.ms-slide.is-leaving{visibility:visible;z-index:1}
.ms-slide.is-active img{animation:ms-kenburns 9s var(--ease) both}
.ms-hero.is-ready .ms-slide.is-active{animation:ms-wipe-next 1s cubic-bezier(.77,0,.18,1) both}
.ms-hero.is-ready[data-dir="prev"] .ms-slide.is-active{animation-name:ms-wipe-prev}
.ms-hero.is-first .ms-slide.is-active{animation:none}
@keyframes ms-kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes ms-wipe-next{from{clip-path:polygon(115% 0,100% 0,100% 100%,100% 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,-15% 100%)}}
@keyframes ms-wipe-prev{from{clip-path:polygon(0 0,-15% 0,0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,115% 100%,0 100%)}}
.ms-slide.is-leaving img{transform:scale(1.03);transition:transform 1s,filter 1s;filter:brightness(.7)}
/* coloured band that rides the leading edge of each wipe */
.ms-hero__flash{position:absolute;top:-10%;bottom:-10%;width:12%;z-index:3;pointer-events:none;background:var(--flash,var(--marigold));opacity:0;transform:skewX(-8deg)}
.ms-hero__flash.go-next{animation:ms-flash-next 1s cubic-bezier(.77,0,.18,1) both}
.ms-hero__flash.go-prev{animation:ms-flash-prev 1s cubic-bezier(.77,0,.18,1) both}
@keyframes ms-flash-next{0%{left:104%;opacity:.95}85%{opacity:.9}100%{left:-20%;opacity:0}}
@keyframes ms-flash-prev{0%{left:-16%;opacity:.95}85%{opacity:.9}100%{left:108%;opacity:0}}
.ms-hero__scrim{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,22,44,.82) 0%,rgba(14,22,44,.55) 38%,rgba(14,22,44,0) 70%),linear-gradient(0deg,rgba(14,22,44,.7) 0%,rgba(14,22,44,0) 34%)}
.ms-hero__inner{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:150px}
.ms-hero__title{max-width:15em;font-size:clamp(30px,4.6vw,58px);line-height:1.05;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.ms-hero__pre{display:block;margin-bottom:6px;font:600 clamp(15px,1.5vw,19px)/1.3 var(--body);color:var(--marigold);letter-spacing:0}
.ms-hero__addr{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:clamp(14.5px,1.4vw,17px);color:#DCE4F2;max-width:38em}
.ms-hero__addr .ms-ico{color:var(--marigold)}
.ms-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ms-hero__inner>*{animation:ms-rise .9s var(--ease) both}
.ms-hero__inner>*:nth-child(2){animation-delay:.12s}
.ms-hero__inner>*:nth-child(3){animation-delay:.24s}
@keyframes ms-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ms-hero__bar{position:absolute;left:0;right:0;bottom:0;z-index:6;padding-bottom:70px}
.ms-hero__bar .ms-wrap{display:flex;align-items:center;gap:16px}
.ms-segs{display:flex;gap:6px;flex:1;min-width:0;max-width:520px}
.ms-seg{position:relative;flex:1;height:22px;display:flex;align-items:center}
.ms-seg::before{content:"";position:absolute;left:0;right:0;height:5px;border-radius:5px;background:rgba(255,255,255,.28);transition:height .15s}
.ms-seg:hover::before{height:7px}
.ms-seg i{position:absolute;left:0;height:5px;width:0;border-radius:5px;background:var(--c,#fff)}
.ms-seg:nth-child(4n+1){--c:var(--paddy)} .ms-seg:nth-child(4n+2){--c:var(--marigold)}
.ms-seg:nth-child(4n+3){--c:var(--kingfisher)} .ms-seg:nth-child(4n+4){--c:var(--shapla)}
.ms-seg.is-done i{width:100%}
.ms-seg.is-active i{animation:ms-fill var(--dur,6s) linear both}
.ms-hero.is-paused .ms-seg.is-active i{animation-play-state:paused}
.ms-hero.is-static .ms-seg.is-active i{animation:none;width:100%}
@keyframes ms-fill{from{width:0}to{width:100%}}
.ms-hero__count{font:700 15px/1 var(--display);letter-spacing:.04em;color:#fff;min-width:56px;font-variant-numeric:tabular-nums}
.ms-hero__count b{color:var(--marigold);font-size:20px}
.ms-hero__btns{display:flex;gap:8px;margin-left:auto}
.ms-round{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .15s,transform .15s}
.ms-round:hover{background:rgba(255,255,255,.3)}
.ms-round:active{transform:scale(.94)}
.ms-round .ms-ico{width:20px;height:20px}
.ms-hero .ms-ico-play{display:none}
.ms-hero.is-paused .ms-ico-play{display:block}
.ms-hero.is-paused .ms-ico-pause{display:none}
/* Fallback hero when no slider photo has been uploaded */
.ms-hero--empty{background:
  radial-gradient(circle at 85% 20%,rgba(245,162,1,.9) 0 9%,transparent 9.2%),
  linear-gradient(115deg,var(--ink) 0 52%,var(--paddy) 52% 64%,var(--kingfisher) 64% 76%,var(--shapla) 76% 88%,var(--marigold) 88%)}
.ms-hero--empty .ms-hero__inner{padding-bottom:96px}

/* ---------- Quick access dock -------------------------------------------- */
.ms-dock{position:relative;z-index:10;margin-top:-46px}
.ms-dock__panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-2);padding:10px;gap:4px}
.ms-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px 14px;border-radius:var(--r);text-align:center;font-weight:600;font-size:14.5px;line-height:1.25;color:var(--ink)!important;transition:background-color .2s}
.ms-tile__ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--t);color:var(--c);transition:background-color .2s,color .2s,transform .25s var(--ease),border-radius .25s}
.ms-tile__ico .ms-ico{width:26px;height:26px}
.ms-tile:hover{background:var(--sky)}
.ms-tile:hover .ms-tile__ico{background:var(--c);color:#fff;transform:translateY(-3px) rotate(-4deg);border-radius:50%}
.ms-c-paddy{--c:var(--paddy);--t:var(--paddy-t);--d:var(--paddy-d)}
.ms-c-marigold{--c:var(--marigold);--t:var(--marigold-t);--d:var(--marigold-d)}
.ms-c-kingfisher{--c:var(--kingfisher);--t:var(--kingfisher-t);--d:var(--kingfisher-d)}
.ms-c-shapla{--c:var(--shapla);--t:var(--shapla-t);--d:var(--shapla-d)}

/* ---------- Sections ----------------------------------------------------- */
.ms-section{padding-block:clamp(40px,6vw,72px)}
.ms-section--tight{padding-top:clamp(28px,4vw,44px)}
.ms-section--white{background:rgba(255,255,255,.82)}
.ms-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.ms-title{position:relative;display:inline-block;font-size:clamp(24px,2.6vw,32px);padding-bottom:12px;color:var(--ink)}
/* hand-drawn chalk underline, tinted per section */
.ms-title::after{content:"";position:absolute;left:0;bottom:0;width:86px;height:10px;background:var(--c,var(--paddy));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 10'%3E%3Cpath d='M2 7c12-4 22-5 34-3s20 3 30 0 12-3 18-2' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 10'%3E%3Cpath d='M2 7c12-4 22-5 34-3s20 3 30 0 12-3 18-2' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.ms-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--d,var(--kingfisher-d))!important;white-space:nowrap}
.ms-link .ms-ico{transition:transform .2s var(--ease)}
.ms-link:hover .ms-ico{transform:translateX(3px)}
.ms-card{background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-1);border:1px solid var(--line-2)}

/* ---------- Home: notices + welcome -------------------------------------- */
.ms-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,32px);align-items:stretch}
.ms-split--single{grid-template-columns:minmax(0,1fr)}
/* With the Facebook card: Notice board | Facebook on the first row, Welcome full width underneath */
.ms-split--fb .ms-welcome{grid-column:1 / -1}
/* Notice board + Welcome share one row height. Each card is a column whose middle part
   (the notice list / the welcome text) has flex-basis 0, so neither one dictates the height:
   the row is as tall as the larger minimum, and both middles stretch to fill it. */
.ms-board,.ms-welcome{display:flex;flex-direction:column}
.ms-board{padding:clamp(18px,2.4vw,28px)}
.ms-board__tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ms-search{position:relative;flex:1}
.ms-search .ms-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.ms-search input{width:100%;height:44px;padding:0 14px 0 40px;border:1.5px solid var(--line);border-radius:999px;font:inherit;font-size:15px;color:var(--ink);background:var(--sky);transition:border-color .15s,background-color .15s}
.ms-search input:focus{outline:none;border-color:var(--marigold);background:#fff}
.ms-board__count{flex:none;font-size:14px;color:var(--muted)}
.ms-notices{flex:1 1 0;min-height:420px;overflow-y:auto;margin-right:-8px;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ms-notice{display:flex;gap:14px;align-items:center;padding:12px 10px;border-radius:var(--r);border-bottom:1px dashed var(--line);transition:background-color .15s}
.ms-notice:last-child{border-bottom:0}
.ms-notice:hover{background:var(--sky)}
.ms-date{flex:none;width:58px;height:62px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--marigold-t);color:var(--marigold-d);line-height:1}
.ms-date b{font:700 24px/1 var(--display);color:var(--ink)}
.ms-date span{font-size:13px;font-weight:600;margin-top:3px}
.ms-notice:nth-child(4n+2) .ms-date{background:var(--paddy-t);color:var(--paddy-d)}
.ms-notice:nth-child(4n+3) .ms-date{background:var(--kingfisher-t);color:var(--kingfisher-d)}
.ms-notice:nth-child(4n+4) .ms-date{background:var(--shapla-t);color:var(--shapla-d)}
.ms-notice__body{min-width:0;flex:1}
.ms-notice__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:15.5px;line-height:1.45;color:var(--ink)!important}
.ms-notice__title:hover{color:var(--kingfisher-d)!important}
.ms-notice__meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:13px;color:var(--faint)}
.ms-new{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--shapla);color:#fff;font-size:11.5px;font-weight:600;line-height:1.6}
.ms-empty{padding:28px 12px;text-align:center;color:var(--muted)}
/* empty states take the list's place, so the card keeps its height while searching */
.ms-board .ms-empty{flex:1 1 0;min-height:420px;display:flex;align-items:center;justify-content:center}
.ms-notices.is-empty{display:none}
.ms-welcome{padding:clamp(20px,2.6vw,30px)}
.ms-welcome{position:relative;overflow:hidden}
.ms-welcome::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--paddy)}
.ms-welcome .ms-head{align-items:center;flex-wrap:wrap;gap:6px 24px;margin-bottom:18px}
.ms-welcome .ms-title{--c:var(--paddy);margin-bottom:0}
.ms-welcome .ms-links{margin:0}
.ms-prose{color:var(--ink-2);font-size:16px;line-height:1.75;text-align:left}
.ms-prose p{margin:0 0 .9em}
.ms-prose img{max-width:100%;height:auto;border-radius:var(--r-s)}
/* Welcome text comes from old database HTML with fixed widths (tables, divs of 780px or more): keep it inside the card */
/* ---------- Rich text written in the admin editor (TinyMCE) ----------
   Welcome and the head/chairman messages are HTML from a web editor: inline styles, fixed widths, black bordered
   tables used as boxes, justified text with first-line indents, "&nbsp;" paragraphs, Word fonts.
   These rules make that content fit its card and match the site WITHOUT removing what the author meant: bold, italics,
   colours, centred or right-aligned lines, lists and links are all kept.
   !important is needed in places because editor styles are written inline on each element.
   site.js adds .ms-layout / .ms-stack / .ms-table-scroll / .ms-empty-p, which CSS alone cannot detect. */
.ms-rich{display:flow-root;overflow-wrap:break-word;word-wrap:break-word}
.ms-rich *{max-width:100%;box-sizing:border-box}
.ms-rich>:first-child{margin-top:0}
.ms-rich p{margin:0 0 1em}
.ms-rich .ms-empty-p{display:none}
.ms-rich [style*="justify"],.ms-rich [align="justify"]{text-align:left!important}
.ms-rich [style*="text-indent"]{text-indent:0!important}
.ms-rich [style*="line-height"]{line-height:inherit!important}
.ms-rich [style*="font-family"]:not([style*="utonny"]){font-family:inherit!important}   /* keep legacy SutonnyMJ Bangla text readable */
.ms-rich font[face]:not([face*="utonny"]){font-family:inherit}
.ms-rich h1,.ms-rich h2,.ms-rich h3,.ms-rich h4{font-family:var(--display);line-height:1.25;color:var(--ink);margin:1.1em 0 .5em}
.ms-rich h1[style*="font-family"]:not([style*="utonny"]),.ms-rich h2[style*="font-family"]:not([style*="utonny"]),
.ms-rich h3[style*="font-family"]:not([style*="utonny"]),.ms-rich h4[style*="font-family"]:not([style*="utonny"]){font-family:var(--display)!important}
.ms-rich h1{font-size:28px}.ms-rich h2{font-size:24px}.ms-rich h3{font-size:20px}.ms-rich h4{font-size:17px}
/* the site resets remove bullets and link colour; give them back inside editor content */
.ms-rich ul{list-style:disc}
.ms-rich ol{list-style:decimal}
.ms-rich ul,.ms-rich ol{margin:0 0 1em;padding-left:1.5em}
.ms-rich li{margin:0 0 .3em}
.ms-rich a{color:var(--kingfisher-d);text-decoration:underline;text-underline-offset:2px}
.ms-rich a:hover{color:var(--ink)}
.ms-rich blockquote{margin:1em 0;padding:.7em 1.1em;border-left:4px solid var(--paddy);background:var(--paddy-t);border-radius:0 var(--r-s) var(--r-s) 0}
.ms-rich hr{border:0;border-top:1px solid var(--line);margin:1.2em 0}
.ms-rich img{height:auto!important;border-radius:var(--r-s)}
.ms-rich img[style*="float"],.ms-rich img[align="left"],.ms-rich img[align="right"]{max-width:min(42%,340px);margin-bottom:.6em}
.ms-rich iframe,.ms-rich video{max-width:100%}
.ms-rich iframe[src*="youtube"],.ms-rich iframe[src*="youtu.be"]{width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--r-s)}
/* tables: softer borders; real data tables scroll inside the card instead of pushing it wider */
.ms-rich table{border-collapse:collapse;max-width:100%}
/* Heights typed in the editor (e.g. a table "height: 459px") are only a minimum while a table is a table, but a one-cell
   "box" table (and, on phones, a stacked table) is shown as a block, where a fixed height makes the text spill out over
   whatever comes next. Let the content decide the height. Tables the editor floated (align="left"/"right") are shown as
   full-width boxes with nothing beside them, and every table starts below any floated picture before it. */
.ms-rich table,.ms-rich thead,.ms-rich tbody,.ms-rich tfoot,.ms-rich tr,.ms-rich td,.ms-rich th{height:auto!important;min-height:0!important}
.ms-rich table[align="left"],.ms-rich table[align="right"],.ms-rich table[style*="float"]{float:none!important;margin-left:0;margin-right:0}
.ms-rich table{clear:both}
.ms-rich [style*="position: absolute"],.ms-rich [style*="position:absolute"]{position:static!important}
/* a picture that cannot load (for example one inserted from the author's own computer, "C:\...") is hidden instead of a broken icon */
.ms-rich img.ms-img-broken,.ms-page-body img.ms-img-broken{display:none!important}
.ms-rich td,.ms-rich th{padding:8px 12px;vertical-align:top;border-color:var(--line)!important}
.ms-rich table[border],.ms-rich table[style*="border"]{border-color:var(--line)!important}
.ms-rich th{background:var(--sky);font-weight:700;text-align:left}
.ms-table-scroll{overflow-x:auto;margin:0 0 1em;-webkit-overflow-scrolling:touch}
.ms-table-scroll>table{margin:0}
/* a one-cell table used as a framed box: drop the frame so the text sits directly on the card */
.ms-rich table.ms-layout,.ms-rich table.ms-layout>tbody,.ms-rich table.ms-layout>tbody>tr,.ms-rich table.ms-layout>tbody>tr>td{display:block;width:100%!important;border:0!important}
.ms-rich table.ms-layout>tbody>tr>td:not([style*="background"]){padding:0!important}
.ms-rich table.ms-layout>tbody>tr>td[style*="background"]{padding:14px 16px!important}
@media (max-width:640px){
  /* an "image | text" table becomes image above text on phones */
  .ms-rich table.ms-stack,.ms-rich table.ms-stack>tbody,.ms-rich table.ms-stack>tbody>tr,.ms-rich table.ms-stack>tbody>tr>td{display:block;width:100%!important;border:0!important;padding-left:0!important;padding-right:0!important}
  .ms-rich img[style*="float"],.ms-rich img[align="left"],.ms-rich img[align="right"]{float:none!important;display:block;max-width:100%;margin:0 auto .8em!important}
}
.ms-clamp{position:relative;max-height:var(--clamp,22em);overflow:hidden;transition:max-height .4s var(--ease)}
.ms-clamp.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5em;background:linear-gradient(rgba(255,255,255,0),#fff)}
.ms-clamp.is-open{max-height:none}
.ms-clamp.is-open::after{display:none}
.ms-split:not(.ms-split--fb) .ms-welcome .ms-clamp{flex:1 1 0;min-height:300px;max-height:none}
.ms-split--fb .ms-welcome .ms-clamp{--clamp:16em}
.ms-welcome .ms-clamp.is-open{flex:0 0 auto}
/* must be at least as specific as the 'fill the card' rule above, or Read more does nothing in the no-Facebook layout */
.ms-split:not(.ms-split--fb) .ms-welcome .ms-clamp.is-open{flex:0 0 auto}
.ms-welcome .ms-more{flex:none}
.ms-more{margin-top:12px}
.ms-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.ms-more-btn{align-self:flex-start;margin-top:14px;min-height:40px;padding:.4em 1.1em;font-size:14.5px}
.ms-more-btn .ms-ico{width:1.05em;height:1.05em;transition:transform .2s var(--ease)}
.ms-more-btn[aria-expanded="true"] .ms-ico{transform:rotate(180deg)}

/* ---------- Facebook card (right of the notice board) ---------- */
.ms-fb{display:flex;flex-direction:column;padding:clamp(18px,2.4vw,28px)}
.ms-fb .ms-head{margin-bottom:16px}
.ms-fb__frame{position:relative;flex:1 1 0;min-height:420px;display:flex;justify-content:center;border-radius:var(--r);overflow:hidden;background:var(--sky)}
.ms-fb__frame iframe{position:relative;z-index:1;display:block;max-width:100%;height:100%;border:0;background:#fff}
.ms-fb__ph{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;color:var(--muted)}
.ms-fb__ph .ms-ico{width:44px;height:44px;fill:#1877F2;stroke:none}
.ms-fb__btn{margin-top:14px}
.ms-fb__btn .ms-ico{fill:currentColor;stroke:none}

/* ---------- Messages ----------------------------------------------------- */
.ms-msgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,28px)}
.ms-msg{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;padding:clamp(18px,2.4vw,26px);overflow:hidden}
.ms-msg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.ms-msg__photo{width:150px;aspect-ratio:4/5;border-radius:16px;object-fit:cover;background:var(--t);box-shadow:8px 8px 0 var(--t)}
.ms-msg__head{font:700 20px/1.25 var(--display);color:var(--ink);margin-bottom:10px}
.ms-msg__text{font-size:15px;line-height:1.7;color:var(--ink-2);max-height:10.2em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.ms-msg__text p{margin:0 0 .6em}
.ms-msg .ms-link{margin-top:12px}

/* ---------- Talented students (scroller) --------------------------------- */
.ms-scroller{position:relative}
.ms-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,190px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ms-student{scroll-snap-align:start;background:#fff;border-radius:var(--r);border:1px solid var(--line-2);overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column}
.ms-student__photo{aspect-ratio:3/3.6;width:100%;object-fit:cover;background:var(--sky)}
.ms-student__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.ms-student__name{font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)!important}
.ms-student__name:hover{color:var(--shapla-d)!important}
.ms-student .ms-link{font-size:14px;margin-top:auto}
.ms-scroll-btns{display:flex;gap:8px}
.ms-round--dark{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.ms-round--dark:hover{background:var(--ink);color:#fff}

/* Talented students: auto-playing slider (see site.js "Horizontal scrollers") */
.ms-tslider .ms-track{scroll-behavior:smooth;scrollbar-width:none;padding-bottom:10px}
.ms-tslider .ms-track::-webkit-scrollbar{display:none}
.ms-tslider .ms-student{position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ms-tslider .ms-student::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;background:var(--c)}
.ms-tslider .ms-student:nth-child(4n+1){--c:var(--shapla)} .ms-tslider .ms-student:nth-child(4n+2){--c:var(--kingfisher)}
.ms-tslider .ms-student:nth-child(4n+3){--c:var(--marigold)} .ms-tslider .ms-student:nth-child(4n+4){--c:var(--paddy)}
.ms-tslider .ms-student__photo{transition:transform .7s var(--ease)}
.ms-tslider .ms-student:hover,.ms-tslider .ms-student:focus-within{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.ms-tslider .ms-student:hover .ms-student__photo{transform:scale(1.06)}
.ms-tdots{display:flex;justify-content:center;flex-wrap:wrap;margin-top:8px}
.ms-tdot{position:relative;width:18px;height:26px;transition:width .35s var(--ease)}
.ms-tdot::before,.ms-tdot::after{content:"";position:absolute;left:5px;top:9px;height:8px;width:8px;border-radius:8px}
.ms-tdot::before{background:var(--line);transition:width .35s var(--ease),background-color .35s}
.ms-tdot:nth-child(4n+1){--c:var(--shapla)} .ms-tdot:nth-child(4n+2){--c:var(--kingfisher)}
.ms-tdot:nth-child(4n+3){--c:var(--marigold)} .ms-tdot:nth-child(4n+4){--c:var(--paddy)}
.ms-tdot:hover::before{background:var(--faint)}
.ms-tdot.is-active{width:40px}
.ms-tdot.is-active::before{width:30px;background:var(--line-2);box-shadow:inset 0 0 0 1px var(--line)}
.ms-tdot.is-active::after{background:var(--c);animation:ms-tfill var(--tdur,3500ms) linear both}
.ms-tslider.is-paused .ms-tdot.is-active::after{animation-play-state:paused}
.ms-tslider.is-static .ms-tdot.is-active::after{animation:none;width:30px}
.ms-tslider.no-overflow .ms-tdots{display:none}
@keyframes ms-tfill{from{width:8px}to{width:30px}}

/* ---------- Video gallery (thumbnail first, player on click) --------------- */
/* Exactly 5 videos: the first is featured (2 columns x 2 rows) with the other four beside it. Fewer or more: an even grid. */
.ms-videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,22px);align-items:start}
.ms-videos[data-n="1"]{grid-template-columns:minmax(0,760px);justify-content:center}
.ms-videos[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ms-videos[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-video:first-child:nth-last-child(5){grid-column:span 2;grid-row:span 2}
.ms-video:first-child:nth-last-child(5) .ms-video__title{font-size:18px}
.ms-video:first-child:nth-last-child(5) .ms-video__play{width:76px;height:76px;margin:-38px 0 0 -38px}
.ms-video{margin:0}
.ms-video__frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink);box-shadow:var(--shadow-1)}
.ms-video__frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .3s}
.ms-video__frame:hover img,.ms-video__frame:focus-visible img{transform:scale(1.05);filter:brightness(.8)}
.ms-video__frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.ms-video__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;
  background:var(--shapla);color:#fff;box-shadow:0 0 0 8px rgba(219,61,116,.28);transition:transform .25s var(--ease),box-shadow .25s}
.ms-video__play .ms-ico{width:26px;height:26px;fill:currentColor;stroke:none;margin-left:4px}
.ms-video__frame:hover .ms-video__play{transform:scale(1.08);box-shadow:0 0 0 14px rgba(219,61,116,.22)}
.ms-video__badge{position:absolute;left:10px;top:10px;padding:3px 10px;border-radius:999px;background:var(--paddy);color:#fff;font-size:12.5px;font-weight:600;line-height:1.5;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ms-video__frame--list{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:40px clamp(14px,2vw,24px) clamp(14px,1.8vw,22px);text-align:left;color:#fff;
  background:linear-gradient(135deg,var(--c1,#1B6FD1),var(--c2,#16213E))}
.ms-video__frame--list::before{content:"";position:absolute;right:-12%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12)}
.ms-video__frame--list::after{content:"";position:absolute;right:8%;bottom:-40%;width:50%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.08)}
.ms-video__list-label{position:relative;z-index:1;font:700 clamp(15px,1.3vw,19px)/1.25 var(--display);max-width:70%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-video:first-child:nth-last-child(5) .ms-video__list-label{font-size:clamp(18px,1.9vw,26px);-webkit-line-clamp:3}
.ms-video__list-sub{position:relative;z-index:1;font-size:13.5px;opacity:.88}
.ms-video__frame--list .ms-video__play{left:auto;right:7%;margin:-32px 0 0}
.ms-videos .ms-video:nth-child(4n+1) .ms-video__frame--list{--c1:#1B6FD1;--c2:#16213E}
.ms-videos .ms-video:nth-child(4n+2) .ms-video__frame--list{--c1:#0E8A5F;--c2:#0A3F37}
.ms-videos .ms-video:nth-child(4n+3) .ms-video__frame--list{--c1:#DB3D74;--c2:#5A1E3F}
.ms-videos .ms-video:nth-child(4n+4) .ms-video__frame--list{--c1:#F5A201;--c2:#8A4B00}
.ms-video__frame--list .ms-video__badge{z-index:1}
.ms-video__title{margin-top:10px;font-weight:600;font-size:15.5px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Gallery mosaic ----------------------------------------------- */
.ms-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,14vw,190px);gap:12px}
.ms-mosaic a{position:relative;overflow:hidden;border-radius:var(--r);background:var(--line-2)}
.ms-mosaic a:first-child{grid-column:span 2;grid-row:span 2}
.ms-mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ms-mosaic a:hover img{transform:scale(1.06)}
.ms-mosaic a::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--marigold);transition:box-shadow .2s}
.ms-mosaic a:hover::after{box-shadow:inset 0 0 0 4px var(--marigold)}

/* ---------- Inner pages -------------------------------------------------- */
.ms-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-block:18px 14px;font-size:14px;color:var(--muted)}
.ms-crumbs a{color:var(--kingfisher-d)!important;font-weight:600}
.ms-crumbs .ms-ico{width:14px;height:14px;color:var(--faint)}
.ms-page{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start;padding-bottom:56px}
.ms-page__main{box-sizing:border-box;background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-1);border:1px solid var(--line-2);padding:clamp(14px,2vw,24px);min-width:0}
/* legacy page content lives in here — keep it contained and scrollable on small screens */
.ms-page-body{display:flow-root;overflow-x:auto;font-size:15.5px;color:var(--ink)}
/* old views use fixed widths (e.g. width:780px) plus padding — keep them inside the column */
.ms-page-body>div,.ms-page-body>table,.ms-page-body>form{max-width:100%;box-sizing:border-box}
.ms-page-body div,.ms-page-body table,.ms-page-body iframe,.ms-page-body form{max-width:100%}
.ms-page-body img{max-width:100%;height:auto}
.ms-page-body table{border-collapse:collapse}
.ms-page-body a{color:var(--kingfisher-d)}
.ms-page-body h1,.ms-page-body h2,.ms-page-body h3{font-family:var(--display);color:var(--ink);line-height:1.2}
/* ---------- Form controls on inner pages (Student Result, Student Search, Online Admission, Contact us ...) ----------
   The old views give text boxes and dropdowns many different fixed sizes (height 25px, widths 55px ... 422px), so with
   today's fonts the text is cut off and nothing lines up. Here every text box and dropdown gets the same comfortable size:
   300 px wide (or the full width when the page asked for 100%), 44 px high, never wider than the screen. On phones the
   label/field tables stack and the fields use the full width. Hidden fields, checkboxes, radio buttons and buttons keep
   their own look. */
.ms-page-body :is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=date],input[type=datetime-local],input[type=month],input[type=time]),
.ms-page-body select:not([multiple]):not([size]),
.ms-page-body select[size="1"]{
  box-sizing:border-box;width:300px!important;max-width:100%!important;height:auto!important;min-height:44px;margin:3px 0;padding:9px 12px!important;
  border:1px solid #B5BFCC;border-radius:8px;background-color:#fff;color:var(--ink);font:400 15px/1.4 "Hind Siliguri","Segoe UI",system-ui,sans-serif;
  vertical-align:middle;text-align:left}
.ms-page-body select:not([multiple]):not([size]),.ms-page-body select[size="1"]{
  -webkit-appearance:none;appearance:none;padding-right:38px!important;text-overflow:ellipsis;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/14px 14px}
.ms-page-body select::-ms-expand{display:none}
.ms-page-body select[multiple],.ms-page-body select[size]:not([size="1"]){box-sizing:border-box;max-width:100%!important;padding:6px;border:1px solid #B5BFCC;border-radius:8px;font:inherit;font-size:15px}
.ms-page-body textarea{box-sizing:border-box;width:100%!important;max-width:600px!important;min-height:120px;margin:3px 0;padding:10px 12px!important;border:1px solid #B5BFCC;border-radius:8px;
  background:#fff;color:var(--ink);font:400 15px/1.5 "Hind Siliguri","Segoe UI",system-ui,sans-serif;resize:vertical}
/* the page asked for the full width: keep it */
.ms-page-body :is(input,select,textarea)[style*="width: 100%"],.ms-page-body :is(input,select,textarea)[style*="width:100%"]{width:100%!important;max-width:100%!important}
.ms-page-body input[type=file]{box-sizing:border-box;width:300px;max-width:100%!important;height:auto!important;padding:8px;border:1px dashed #B5BFCC;border-radius:8px;background:#fff;font:inherit;font-size:14px}
.ms-page-body input[type=checkbox],.ms-page-body input[type=radio]{width:18px;height:18px;margin:0 6px;vertical-align:-3px;accent-color:var(--kingfisher);cursor:pointer}
.ms-page-body :is(input,select,textarea)::placeholder{color:#8A94A6;opacity:1}
.ms-page-body :is(input,select,textarea):focus{outline:none;border-color:var(--kingfisher);box-shadow:0 0 0 3px var(--kingfisher-t)}
.ms-page-body :is(input,select,textarea):disabled{background-color:#F2F4F7;color:#5B6576}
.ms-page-body input[type=submit],.ms-page-body input[type=button],.ms-page-body input[type=reset],.ms-page-body button:not(.ms-more):not([data-yt]):not([data-yt-list]):not([data-fb-video]):not(.ms-gal__play){
  box-sizing:border-box;height:auto!important;min-height:44px;max-width:100%!important;padding:9px 20px!important;font:inherit;font-weight:600;line-height:1.3;white-space:normal;cursor:pointer;border-radius:8px;vertical-align:middle}
.ms-page-body label{vertical-align:middle}
/* labels sit level with the 44 px fields */
.ms-page-body td[style*="float"]:not(:has(input,select,textarea,img,table)){display:flex;align-items:center;justify-content:flex-end;min-height:50px}
.ms-page-body table:has(>tbody>tr>td>:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tbody>tr>td,.ms-page-body table:has(>tbody>tr>td>:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tbody>tr>th{vertical-align:middle}
@media (max-width:700px){
  /* label | field tables become one column; fields use the full width */
  .ms-page-body table:has(:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea)),
  .ms-page-body table:has(:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tbody,
  .ms-page-body table:has(:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tbody>tr,
  .ms-page-body table:has(:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tbody>tr>:is(td,th),
  .ms-page-body table:has(:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tr,
  .ms-page-body table:has(:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tr>:is(td,th){
    display:block;box-sizing:border-box;width:auto!important;height:auto!important;float:none!important;text-align:left!important}
  .ms-page-body td[style*="float"]:not(:has(input,select,textarea,img,table)){display:block;min-height:0}
  .ms-page-body table:has(:is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=date],input[type=file],select,textarea))>tbody>tr>:is(td,th){padding:3px 0!important;border-left:0!important;border-right:0!important}
  .ms-page-body :is(input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=file]),
  .ms-page-body select:not([multiple]):not([size]),.ms-page-body select[size="1"],.ms-page-body textarea{width:100%!important;max-width:100%!important}
  .ms-page-body div[style*="float: left"],.ms-page-body div[style*="float:left"],.ms-page-body div[style*="float: right"],.ms-page-body div[style*="float:right"]{float:none!important;width:auto!important}
  .ms-page-body input[type=submit],.ms-page-body input[type=button],.ms-page-body input[type=reset]{float:none!important;margin-left:0!important;margin-right:0!important}
  .ms-page-body [style*="float: left"],.ms-page-body [style*="float:left"],.ms-page-body [style*="float: right"],.ms-page-body [style*="float:right"]{max-width:100%}
  .ms-page-body div[style*="width:"],.ms-page-body div[style*="width :"],.ms-page-body table[style*="width:"],.ms-page-body table[width]{width:auto!important;max-width:100%!important}
}
/* legacy module titles used by a few inner pages */
.jsn-moduletitle{font:700 22px/1.25 var(--display);color:var(--ink);margin:0 0 12px}
.jsn-moduletitle .jsn-moduleicon{background:none;padding:0}

/* sidebar */
.ms-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:72px}
.ms-side__card{border-radius:var(--r-l);padding:20px;overflow:hidden;position:relative}
.ms-side__card h3{font-size:20px;margin-bottom:6px}
.ms-side__card p{font-size:14.5px;line-height:1.5;margin-bottom:14px;opacity:.88}
.ms-side__card--ink{background:var(--ink);color:#fff}
.ms-side__card--ink::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--kingfisher);opacity:.35}
.ms-side__card--shapla{background:var(--shapla);color:#fff}
.ms-side__card--marigold{background:var(--marigold-t);color:var(--ink);box-shadow:inset 0 0 0 1.5px #F7D27A}
.ms-side__card .ms-btn+.ms-btn{margin-top:8px}
.ms-side__card .ms-btn--ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.ms-side__list{background:#fff;border-radius:var(--r-l);border:1px solid var(--line-2);box-shadow:var(--shadow-1);padding:18px 14px}
.ms-side__list h3{font-size:18px;padding:0 6px 10px;--c:var(--paddy)}
.ms-side__list a{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--r-s);font-size:15px;color:var(--ink-2)!important}
.ms-side__list a:hover{background:var(--sky);color:var(--paddy-d)!important}
.ms-side__list .ms-ico{color:var(--paddy)}

/* ---------- Footer ------------------------------------------------------- */
.ms-footer{background:var(--ink);color:#B8C3D9;font-size:15px}
.ms-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-block:52px 36px}
.ms-footer h4{font:700 18px/1.2 var(--display);color:#fff;margin-bottom:16px}
.ms-footer__name{font:700 22px/1.2 var(--display);color:#fff;margin-bottom:10px}
.ms-footer__row{display:flex;gap:10px;align-items:flex-start;margin-top:10px;line-height:1.5}
.ms-footer__row .ms-ico{color:var(--marigold);margin-top:3px}
.ms-footer ul a{display:inline-block;padding:4px 0;color:#D5DDEC!important;transition:color .15s,transform .15s}
.ms-footer ul a:hover{color:var(--marigold)!important;transform:translateX(3px)}
.ms-footer__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}
.ms-footer__thumbs a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--ink-2)}
.ms-footer__thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ms-footer__thumbs a:hover img{transform:scale(1.1)}
.ms-footer__bottom{border-top:1px solid rgba(255,255,255,.1)}
.ms-footer__bottom .ms-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-block:16px;font-size:14px;color:#8C99B5}
.ms-footer__bottom a{color:#fff!important;font-weight:600}

/* ---------- Floating bits ------------------------------------------------ */
.ms-top{position:fixed;right:18px;bottom:18px;z-index:80;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--paddy);color:#fff;
  box-shadow:0 10px 24px -8px rgba(14,138,95,.7);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.ms-top.is-on{opacity:1;visibility:visible;transform:none}
.ms-toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:300;display:flex;align-items:flex-start;gap:12px;max-width:min(560px,calc(100% - 32px));
  background:#fff;border-left:5px solid var(--shapla);border-radius:var(--r);box-shadow:var(--shadow-2);padding:14px 14px 14px 16px;color:var(--ink);animation:ms-rise .4s var(--ease) both}
.ms-toast .ms-ico{color:var(--shapla);margin-top:2px}
.ms-toast button{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.ms-toast button:hover{background:var(--sky)}
/* ---------- Photo viewer (site.js section 8): every photo link with data-zoom, in every design ---------- */
html.ms-viewer-open{overflow:hidden}
.ms-viewer{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;color:#fff;font-family:"Hind Siliguri","Segoe UI",system-ui,sans-serif;opacity:0;transition:opacity .26s ease}
.ms-viewer[hidden]{display:none}
.ms-viewer.is-open{opacity:1}
.ms-viewer__bg{position:absolute;inset:0;background:rgba(8,10,18,.94);opacity:var(--fade,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ms-viewer .ms-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* top bar: counter + caption on the left, tools on the right */
.ms-viewer__top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 8px 20px;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0));transform:translateY(-12px);opacity:0;transition:transform .35s ease .05s,opacity .35s ease .05s}
.ms-viewer.is-open .ms-viewer__top{transform:none;opacity:1}
.ms-viewer__info{display:flex;align-items:baseline;gap:12px;min-width:0;margin:0}
.ms-viewer__count{flex:none;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13.5px;font-weight:600;letter-spacing:.04em}
.ms-viewer__count:empty{display:none}
.ms-viewer__cap{overflow:hidden;font-size:15.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;opacity:.92}
.ms-viewer__tools{display:flex;gap:6px;flex:none}
.ms-viewer__btn{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff!important;cursor:pointer;transition:background-color .2s,transform .2s}
.ms-viewer__btn:hover,.ms-viewer__btn:focus-visible{background:rgba(255,255,255,.24);transform:scale(1.06)}
.ms-viewer__btn:focus-visible,.ms-viewer__nav:focus-visible,.ms-viewer__thumb:focus-visible{outline:2px solid #FFC93C;outline-offset:2px}
.ms-viewer__btn--close{background:rgba(255,255,255,.18)}
.ms-viewer__btn--close:hover{background:#E5484D}
.ms-viewer.is-playing [data-v="play"]{background:#FFC93C;color:#1B1B1B!important}
.ms-viewer.is-zoomed [data-v="zoom"]{background:rgba(255,201,60,.9);color:#1B1B1B!important}
/* the photo */
.ms-viewer__stage{position:relative;z-index:1;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:default}
.ms-viewer__slide{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:6px 74px}
.ms-viewer__slide img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);transition:transform .3s cubic-bezier(.2,.8,.2,1);user-select:none;-webkit-user-drag:none;cursor:zoom-in}
.ms-viewer.is-zoomed .ms-viewer__slide img{cursor:grab;transition:transform .25s ease}
.ms-viewer.is-zoomed .ms-viewer__slide img:active{cursor:grabbing}
.ms-viewer__slide.is-in-right{animation:ms-v-in-right .42s cubic-bezier(.2,.8,.2,1) both}
.ms-viewer__slide.is-in-left{animation:ms-v-in-left .42s cubic-bezier(.2,.8,.2,1) both}
.ms-viewer__slide.is-in-zoom{animation:ms-v-fade .3s ease both}
.ms-viewer__slide.is-out-left{animation:ms-v-out-left .4s ease both;pointer-events:none}
.ms-viewer__slide.is-out-right{animation:ms-v-out-right .4s ease both;pointer-events:none}
@keyframes ms-v-in-right{from{opacity:0;transform:translateX(70px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ms-v-in-left{from{opacity:0;transform:translateX(-70px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ms-v-out-left{to{opacity:0;transform:translateX(-70px) scale(.96)}}
@keyframes ms-v-out-right{to{opacity:0;transform:translateX(70px) scale(.96)}}
@keyframes ms-v-fade{from{opacity:0}to{opacity:1}}
.ms-viewer__slide.is-broken img{display:none}
.ms-viewer__slide.is-broken::after{content:attr(data-msg);padding:14px 20px;border-radius:12px;background:rgba(255,255,255,.1);font-size:15px}
.ms-viewer__spin{position:absolute;left:50%;top:50%;z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid rgba(255,255,255,.2);border-top-color:#FFC93C;border-radius:50%;opacity:0;transition:opacity .2s;animation:ms-v-spin .8s linear infinite;pointer-events:none}
.ms-viewer.is-loading .ms-viewer__spin{opacity:1;transition-delay:.15s}
@keyframes ms-v-spin{to{transform:rotate(360deg)}}
/* previous / next */
.ms-viewer__nav{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:54px;height:54px;margin-top:-50px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s,transform .25s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ms-viewer__nav .ms-ico{width:26px;height:26px}
.ms-viewer__nav--prev{left:14px}
.ms-viewer__nav--next{right:14px}
.ms-viewer__nav:hover{background:rgba(255,255,255,.26)}
.ms-viewer__nav--prev:hover{transform:translateX(-3px)}
.ms-viewer__nav--next:hover{transform:translateX(3px)}
.ms-viewer.is-single .ms-viewer__nav,.ms-viewer.is-single [data-v="play"],.ms-viewer.is-single .ms-viewer__bottom{display:none}
/* slide-show progress and thumbnails */
.ms-viewer__bottom{position:relative;z-index:3;padding:0 0 10px;transform:translateY(14px);opacity:0;transition:transform .35s ease .08s,opacity .35s ease .08s}
.ms-viewer.is-open .ms-viewer__bottom{transform:none;opacity:1}
.ms-viewer__progress{height:3px;margin:0 0 10px;background:rgba(255,255,255,.1)}
.ms-viewer__progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#FFC93C,#FF7A59)}
.ms-viewer:not(.is-playing) .ms-viewer__progress i{width:0!important}
@keyframes ms-viewer-bar{from{width:0}to{width:100%}}
.ms-viewer__thumbs{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 6px;scrollbar-width:none;scroll-snap-type:x proximity;justify-content:safe center}
.ms-viewer__thumbs::-webkit-scrollbar{display:none}
.ms-viewer__thumb{flex:none;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden;opacity:.5;cursor:pointer;scroll-snap-align:center;transition:opacity .2s,transform .2s,border-color .2s}
.ms-viewer__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ms-viewer__thumb:hover{opacity:.85}
.ms-viewer__thumb[aria-current="true"]{opacity:1;border-color:#FFC93C;transform:translateY(-3px)}
@media (max-width:700px){
  .ms-viewer__top{padding:8px 8px 6px 12px}
  .ms-viewer__cap{font-size:14px}
  .ms-viewer__btn{width:38px;height:38px}
  .ms-viewer__btn .ms-ico{width:20px;height:20px}
  .ms-viewer [data-v="full"],.ms-viewer [data-v="open"]{display:none}
  .ms-viewer__slide{padding:4px 0}
  .ms-viewer__slide img{border-radius:0}
  .ms-viewer__nav{top:auto;bottom:86px;width:44px;height:44px;margin:0;background:rgba(0,0,0,.4)}
  .ms-viewer__thumb{width:52px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .ms-viewer,.ms-viewer__top,.ms-viewer__bottom,.ms-viewer__slide img{transition:none}
  .ms-viewer__slide.is-in-right,.ms-viewer__slide.is-in-left,.ms-viewer__slide.is-in-zoom,.ms-viewer__slide.is-out-left,.ms-viewer__slide.is-out-right{animation:none}
  .ms-viewer__slide.is-out-left,.ms-viewer__slide.is-out-right{display:none}
}

/* ---------- Photo Gallery pages (Views/Home/PhotoCategoryGallery.cshtml and PhotoGallery.cshtml), every design ---------- */
.ms-gal{--gal-accent:var(--kingfisher,#1F7FC2);--gal-accent-2:var(--marigold,#F5A201);font-size:15.5px}
.ms-gal__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;margin:0 0 22px}
.ms-gal__kicker{margin:0;color:var(--gal-accent);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ms-gal__title{margin:2px 0 4px;font:700 clamp(26px,3vw,36px)/1.15 var(--display,inherit);color:var(--ink)}
.ms-gal__sub{margin:0;color:var(--muted,#667085);font-size:14.5px}
.ms-gal__back{display:inline-flex;align-items:center;gap:6px;margin-bottom:4px;color:var(--gal-accent)!important;font-weight:700;font-size:14.5px;text-decoration:none!important}
.ms-gal__back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ms-gal__back:hover svg{transform:translateX(-4px)}
.ms-gal__search{position:relative;display:block;width:min(100%,280px)}
.ms-gal__search svg{position:absolute;left:13px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:var(--muted,#667085);stroke-width:2;stroke-linecap:round}
.ms-page-body .ms-gal .ms-gal__search input{width:100%!important;max-width:100%!important;padding-left:40px!important;border-radius:999px}
.ms-gal__play{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 20px!important;border:0;border-radius:999px!important;background:var(--gal-accent);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 10px 22px -12px var(--gal-accent);transition:transform .2s,filter .2s}
.ms-gal__play svg{width:18px;height:18px;fill:currentColor}
.ms-gal__play:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ms-gal__empty{display:grid;place-items:center;gap:6px;padding:46px 20px;border:2px dashed var(--line,#DCE3EC);border-radius:16px;color:var(--muted,#667085);text-align:center}
.ms-gal__empty svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ms-gal__empty p{margin:0}
.ms-gal__none{margin:16px 0 0;color:var(--muted,#667085)}
/* the albums: cards with a stack of photos behind the cover */
.ms-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px 22px;padding-top:8px}
.ms-album{position:relative;display:flex;flex-direction:column;color:var(--ink)!important;text-decoration:none!important;animation:ms-gal-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.ms-album[hidden]{display:none}
.ms-album__stack,.ms-album__stack::before{position:absolute;left:8%;right:8%;top:-8px;height:40px;border-radius:14px;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.12);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ms-album__stack{background:#E3EDF7;background:color-mix(in srgb,var(--gal-accent) 22%,#fff)}
.ms-album__stack::before{content:"";left:-6%;right:-6%;top:4px;background:#FCEBC8;background:color-mix(in srgb,var(--gal-accent-2) 35%,#fff)}
.ms-album__cover{position:relative;z-index:1;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:#E8EEF6;background:linear-gradient(135deg,color-mix(in srgb,var(--gal-accent) 30%,#fff),color-mix(in srgb,var(--gal-accent-2) 30%,#fff));box-shadow:0 14px 30px -18px rgba(15,23,42,.55)}
.ms-album__cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.ms-album__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);opacity:.65;transition:opacity .3s}
.ms-album__badge{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--gal-accent);box-shadow:0 6px 14px -6px rgba(0,0,0,.4);transform:scale(.8);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.ms-album__badge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-album__body{display:flex;flex-direction:column;gap:2px;padding:12px 4px 0}
.ms-album__name{font:700 17px/1.3 var(--display,inherit);color:var(--ink)}
.ms-album__go{display:inline-flex;align-items:center;gap:6px;color:var(--gal-accent);font-size:14px;font-weight:700}
.ms-album__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.ms-album:hover .ms-album__cover img,.ms-album:focus-visible .ms-album__cover img{transform:scale(1.08)}
.ms-album:hover .ms-album__stack{transform:translateY(-6px) rotate(-2deg)}
.ms-album:hover .ms-album__stack::before{transform:translateY(-3px) rotate(3deg)}
.ms-album:hover .ms-album__shade{opacity:1}
.ms-album:hover .ms-album__badge,.ms-album:focus-visible .ms-album__badge{transform:none;opacity:1}
.ms-album:hover .ms-album__go svg{transform:translateX(5px)}
.ms-album:focus-visible{outline:none}
.ms-album:focus-visible .ms-album__cover{outline:3px solid var(--gal-accent);outline-offset:3px}
/* the photos of an album: masonry columns, each photo keeps its shape */
.ms-photos{column-count:3;column-gap:14px}
.ms-photo{position:relative;display:block;margin:0 0 14px;overflow:hidden;border-radius:14px;background:var(--line-2,#EEF2F7);break-inside:avoid;box-shadow:0 10px 24px -18px rgba(15,23,42,.6);animation:ms-gal-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.ms-photo img{display:block;width:100%;height:auto;min-height:120px;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.ms-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,0) 50%);opacity:0;transition:opacity .3s}
.ms-photo__zoom{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--gal-accent);transform:scale(.6);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.ms-photo__zoom svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ms-photo:hover img,.ms-photo:focus-visible img{transform:scale(1.06)}
.ms-photo:hover::after,.ms-photo:focus-visible::after{opacity:1}
.ms-photo:hover .ms-photo__zoom,.ms-photo:focus-visible .ms-photo__zoom{transform:none;opacity:1}
.ms-photo:focus-visible{outline:3px solid var(--gal-accent);outline-offset:3px}
@keyframes ms-gal-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:860px){ .ms-photos{column-count:2} }
@media (max-width:700px){
  .ms-albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .ms-album__name{font-size:15px}
  .ms-album__go{font-size:13px}
  .ms-album__badge{display:none}
  .ms-photos{column-gap:8px}
  .ms-photo{margin-bottom:8px;border-radius:10px}
  .ms-gal__search{width:100%}
}
@media (max-width:380px){ .ms-albums{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .ms-album,.ms-photo{animation:none} }
@keyframes ms-fade{from{opacity:0}to{opacity:1}}
@keyframes ms-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ---------- Lazy images: fade in (and un-blur) as they arrive. site.js adds .lz to a still-loading image and removes it again ---------- */
.lz{opacity:0;filter:blur(6px);transform:scale(1.03);transition:opacity .6s ease,filter .6s ease,transform .8s var(--ease)}
.lz.lz-in{opacity:1;filter:none;transform:none}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:1100px){
  .ms-footer__grid{grid-template-columns:1fr 1fr}
  .ms-msg{grid-template-columns:120px minmax(0,1fr)}
  .ms-msg__photo{width:120px}
}
@media (max-width:991px){
  .ms-header__actions{display:none}
  .ms-nav{border-top:0}
  .ms-nav__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;height:58px}
  .ms-nav__bar .ms-btn{min-height:40px;padding:.45em 1em;font-size:14px}
  .ms-nav__panel{position:fixed;top:0;left:0;bottom:0;z-index:150;width:min(88vw,360px);background:#fff;overflow-y:auto;
    transform:translateX(-102%);transition:transform .3s var(--ease);box-shadow:20px 0 40px -20px rgba(0,0,0,.4);padding-bottom:24px}
  .ms-nav.is-open .ms-nav__panel{transform:none}
  .ms-nav__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
  .ms-nav__head strong{font:700 18px/1.2 var(--display)}
  .ms-nav__backdrop{display:block;position:fixed;inset:0;z-index:140;background:rgba(10,16,32,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .ms-nav.is-open .ms-nav__backdrop{opacity:1;visibility:visible}
  .ms-menu{display:block;padding:8px}
  .ms-menu li{position:relative}
  .ms-menu>li>a{height:auto;padding:13px 52px 13px 12px;border-radius:var(--r-s)}
  .ms-menu>li>a::after{display:none}
  .ms-menu ul,.ms-menu ul ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;
    padding:0 0 6px 14px;margin-left:12px;border-left:2px solid var(--line);display:none}
  .ms-menu li.is-expanded>ul{display:block}
  .ms-menu ul a{padding:10px 48px 10px 12px}
  .ms-menu .ms-caret{display:none}
  .ms-sub-toggle{display:grid;place-items:center;position:absolute;right:4px;top:4px;width:42px;height:42px;border-radius:10px;color:var(--muted)}
  .ms-menu ul .ms-sub-toggle{top:0;width:40px;height:40px}
  .ms-sub-toggle:hover{background:var(--sky)}
  .ms-sub-toggle .ms-ico{transition:transform .2s}
  .ms-menu li.is-expanded>.ms-sub-toggle .ms-ico{transform:rotate(180deg)}
  .ms-split,.ms-msgs{grid-template-columns:minmax(0,1fr)}
  .ms-videos,.ms-videos[data-n]{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .ms-videos:not([data-n="5"]) .ms-video:last-child:nth-child(odd){grid-column:1 / -1}
  .ms-video:first-child:nth-last-child(5){grid-column:1 / -1;grid-row:auto}
  .ms-page{grid-template-columns:minmax(0,1fr)}
  .ms-side{position:static}
  .ms-hero__inner{padding-bottom:140px}
}
@media (max-width:640px){
  body.ms-body{font-size:15.5px}
  .ms-topbar__en,.ms-topbar__label{display:none}
  .ms-topbar__links a span,.ms-topbar__links button span{display:none}
  .ms-brand__logo,.ms-brand__mono{width:52px;height:52px}
  .ms-brand__mono{font-size:24px}
  .ms-brand__addr{font-size:13px}
  .ms-header__row{padding-block:12px}
  .ms-ticker__label span{display:none}
  .ms-hero{height:min(78vh,520px)}
  .ms-hero__scrim{background:linear-gradient(0deg,rgba(14,22,44,.9) 0%,rgba(14,22,44,.55) 55%,rgba(14,22,44,.15) 100%)}
  .ms-hero__inner{padding-bottom:108px}
  .ms-hero__bar{padding-bottom:42px}
  .ms-hero--empty .ms-hero__inner{padding-bottom:64px}
  .ms-hero__cta .ms-btn{flex:1 1 auto}
  .ms-hero__count{display:none}
  .ms-round{width:42px;height:42px}
  .ms-dock{margin-top:-28px}
  .ms-dock__panel{grid-template-columns:repeat(4,1fr);padding:8px}
  .ms-tile{padding:12px 2px 10px;font-size:12.5px;gap:8px}
  .ms-tile__ico{width:46px;height:46px;border-radius:14px}
  .ms-tile__ico .ms-ico{width:22px;height:22px}
  .ms-msg{grid-template-columns:minmax(0,1fr)}
  .ms-msg__photo{width:120px}
  .ms-mosaic{grid-template-columns:repeat(2,1fr)}
  .ms-videos,.ms-videos[data-n]{grid-template-columns:minmax(0,1fr)}
  .ms-videos .ms-video:last-child:nth-child(odd){grid-column:auto}
  .ms-video__list-label{max-width:68%}
  .ms-video:first-child:nth-last-child(5) .ms-video__title{font-size:15.5px}
  .ms-video:first-child:nth-last-child(5) .ms-video__play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .ms-video__play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .ms-footer__grid{grid-template-columns:1fr;gap:26px}
  .ms-head{align-items:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ms-ticker__track{overflow-x:auto}
  .ms-ticker.is-running .ms-ticker__move{animation:none}
}
@supports not (clip-path:polygon(0 0,1px 0,0 1px)){
  .ms-slide{opacity:0;transition:opacity .9s}
  .ms-slide.is-active{opacity:1}
}
@media print{
  .ms-topbar,.ms-nav,.ms-ticker,.ms-hero,.ms-dock,.ms-side,.ms-footer,.ms-top{display:none!important}
  body.ms-body::before{display:none}
  .ms-page{display:block}
  .ms-page__main{box-shadow:none;border:0;padding:0}
}

/* ===== Facebook GROUP panel (Views/Shared/_FacebookGroupPanel.cshtml): groups cannot be embedded, so a designed panel + Join button ===== */
body .ms-fb__frame.ms-fbg{align-items:center;background:linear-gradient(150deg,#1877F2 0%,#0E63D8 50%,#0A3F8F 100%);color:#fff;isolation:isolate}
.ms-fbg::before,.ms-fbg::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09);z-index:-1;pointer-events:none}
.ms-fbg::before{width:260px;height:260px;right:-90px;top:-90px}
.ms-fbg::after{width:180px;height:180px;left:-70px;bottom:-60px;background:rgba(255,255,255,.07)}
.ms-fbg__in{position:relative;width:100%;max-width:380px;padding:28px 22px;text-align:center}
.ms-fbg__badge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;margin-bottom:14px;border-radius:50%;background:#fff;color:#1877F2;box-shadow:0 10px 24px rgba(4,30,80,.28)}
.ms-fbg__badge svg{width:42px;height:42px;fill:currentColor}
.ms-fbg__badge .ms-fbg__f{position:absolute;right:-4px;bottom:-4px;width:30px;height:30px;padding:5px;border-radius:50%;background:#1877F2;fill:#fff;border:3px solid #fff}
.ms-fbg__title{margin:0 0 8px;font-size:1.22rem;font-weight:800;line-height:1.3;color:#fff}
.ms-fbg__text{margin:0 auto 16px;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.92)}
.ms-fbg__list{display:inline-flex;flex-direction:column;gap:9px;margin:0 0 16px;padding:0;list-style:none;text-align:left;font-size:.93rem;font-weight:600}
.ms-fbg__list li{display:flex;align-items:center;gap:10px}
.ms-fbg__list svg{flex:0 0 22px;width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(255,255,255,.2);fill:#fff}
.ms-fbg__note{margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.8)}
a.ms-fbg__btn2{margin-top:10px}
/* grow with its content (the theme files give the timeline frame a fixed flex-basis and min-height) */
.ms-fb__frame.ms-fbg.ms-fbg.ms-fbg{flex:1 1 auto;min-height:300px;height:auto}

/* ===== Lazy loading (big photos) =====
   Hero: while the first photo downloads, site.js puts .is-waiting on the hero: a soft shimmer runs and the photo
   fades in when it arrives. (Without JavaScript nothing is hidden.)
   Gallery tiles: shimmer until their photo (data-src) has loaded. */
@keyframes ms-shimmer{from{background-position:130% 0}to{background-position:-30% 0}}
.ms-hero.is-waiting .ms-hero__slides{background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 70%) 0 0/300% 100% no-repeat;animation:ms-shimmer 1.5s linear infinite}
.ms-hero.is-waiting .ms-slide.is-active img{opacity:0}
.ms-slide:first-child img{transition:opacity .7s ease}
a[data-zoom]:has(> img[data-src]),a[data-zoom]:has(> img.lz),.vlightbox1:has(img[data-src]){background:#E6ECF4 linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 70%) 0 0/300% 100% no-repeat;animation:ms-shimmer 1.3s linear infinite}
/* pictures inside Welcome / messages / content pages waiting for their turn (LazyHtml.cs: same-size placeholder) */
img[data-src][src^="data:image/svg"]{background:#E6ECF4 linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 70%) 0 0/300% 100% no-repeat;animation:ms-shimmer 1.3s linear infinite}
@media (prefers-reduced-motion:reduce){.ms-hero__slides,a[data-zoom],.vlightbox1,img[data-src]{animation:none!important}}

/* ---------- Video Gallery page (Views/Home/VedioGallery.cshtml, every design) ---------- */
.ms-vgal .ms-videos,.ms-vgal .ms-videos[data-n]{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.ms-vgal .ms-videos[data-n="1"]{grid-template-columns:minmax(0,760px)}
.ms-vgal .ms-videos .ms-video:first-child:nth-last-child(5){grid-column:auto;grid-row:auto}
.ms-vgal .ms-videos .ms-video:first-child:nth-last-child(5) .ms-video__title{font-size:15.5px}
.ms-vgal .ms-videos .ms-video:first-child:nth-last-child(5) .ms-video__list-label{font-size:clamp(15px,1.3vw,19px)}
.ms-vgal .ms-videos .ms-video:last-child:nth-child(odd){grid-column:auto}
.ms-vgal__list{margin:0}
.ms-gal__empty[hidden]{display:none}

/* ---------- Facebook video cards (reels, page videos; every design) ----------
   Facebook gives no preview picture without a login key, so the card is a Facebook-blue poster with the "f" mark,
   "Facebook video" / "Facebook reel" and the title. A click loads Facebook's own player (site.js 7b). */
.ms-video__frame.ms-video__frame--fb{--c1:#1877F2!important;--c2:#0A3D8F!important;color:#fff!important}
.ms-video__frame--fb::before{background:rgba(255,255,255,.14)}
.ms-video__fbtag{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin-bottom:auto;padding:4px 11px 4px 5px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:700;line-height:1.3;letter-spacing:.01em}
.ms-video__fbtag svg{width:20px;height:20px;padding:2px 2px 0;border-radius:50%;background:#fff;fill:#1877F2;flex:none}
.ms-video__frame--fb .ms-video__list-label{font-size:clamp(15px,1.3vw,19px)}
.ms-video__frame--fb.is-reel::after{content:"";position:absolute;right:16%;top:12%;bottom:auto;width:18%;max-height:76%;aspect-ratio:9/16;border:3px solid rgba(255,255,255,.55);border-radius:10px;background:none}
.ms-video__frame--fb.is-reel .ms-video__play{right:auto;left:calc(84% - 9%);margin-left:-32px}