@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Tiro+Bangla&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

:root{
  color-scheme: light;
  /* --- color --- */
  --maroon:        #8A2432;
  --maroon-dark:   #5A1620;
  --maroon-tint:   #F6E7E5;
  --forest:        #1B5E3F;
  --forest-dark:   #113E2A;
  --slate:         #5C6E85;
  --gold:          #B8892B;
  --gold-tint:     #F3E7CC;
  --paper:         #FAF7F1;
  --paper-dim:     #F1ECE1;
  --card:          #FFFFFF;
  --ink:           #221D18;
  --ink-soft:      #5B5347;
  --ink-faint:     #8B8377;
  --line:          #E4DCCB;
  --line-strong:   #D2C6A8;
  /* text-on-surface accent colors (theme-aware; brand fills like --maroon stay constant) */
  --heading:       var(--maroon-dark);
  --accent:        var(--maroon);

  /* blue, sampled from the school seal's inner ring — used sparingly as a second accent */
  --seal-blue:      #0B5DBF;
  --seal-blue-tint: #DCE9FA;

  /* --- type --- */
  --f-display: 'Fraunces', 'Tiro Bangla', serif;
  --f-bangla:  'Tiro Bangla', 'Hind Siliguri', serif;
  --f-bangla-ui: 'Hind Siliguri', sans-serif;
  --f-body:    'Work Sans', 'Hind Siliguri', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  /* --- layout --- */
  --maxw: 1180px;
  --radius-s: 4px;
  --radius-m: 10px;
  --shadow-card: 0 1px 2px rgba(34,29,24,.06), 0 8px 24px -12px rgba(34,29,24,.18);
  --shadow-pop:  0 12px 32px -8px rgba(34,29,24,.28);
}

/* --------------------------------- dark theme --------------------------------- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --maroon-tint:   #3A2226;
  --gold-tint:     #33291A;
  --paper:         #16130F;
  --paper-dim:     #1C1812;
  --card:          #221D17;
  --ink:           #F0E9DE;
  --ink-soft:      #C3B8A6;
  --ink-faint:     #8F8574;
  --line:          #362E24;
  --line-strong:   #4A3E2F;
  --heading:       #EAB4B9;
  --accent:        #DE93A0;
  --seal-blue:      #6FA8F0;
  --seal-blue-tint: #17263A;
}

body{
  transition: background-color .2s ease, color .2s ease;
}

/* --------------------------------- reset --------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{ margin:0; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
h1,h2,h3,h4,p{ margin:0; }

body{
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

/* headings */
h1,h2,h3,h4{ font-family: var(--f-display); font-weight: 600; color: var(--heading); letter-spacing: -0.01em; }
h1{ font-size: clamp(2.1rem, 1.6rem + 2vw, 3.4rem); line-height: 1.05; }
h2{ font-size: clamp(1.5rem, 1.3rem + 1vw, 2.15rem); line-height: 1.15; }
h3{ font-size: 1.25rem; line-height: 1.25; }
h4{ font-size: 1.02rem; }

.eyebrow{
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 2px;
  background: var(--gold);
  display: inline-block;
}

.bangla{ font-family: var(--f-bangla); }

.lede{ color: var(--ink-soft); font-size: 1.05rem; max-width: 62ch; }

/* --------------------------------- buttons -------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .78em 1.4em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn-primary{ background: var(--maroon); color: #fff; }
.btn-primary:hover{ background: var(--maroon-dark); box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.55); color: inherit; }
.btn-outline:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
.btn-ghost{ background: var(--paper-dim); color: var(--heading); }
.btn-ghost:hover{ background: var(--maroon-tint); color: var(--heading); }
.btn-small{ padding: .5em 1em; font-size: .82rem; }

/* --------------------------------- topbar --------------------------------- */
.topbar{
  background: var(--forest-dark);
  color: #E9EFE9;
  font-size: .82rem;
}
.topbar .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-info{ display:flex; align-items:center; gap: 20px; flex-wrap: wrap; }
.topbar-info a{ opacity: .92; }
.topbar-info a:hover{ opacity: 1; text-decoration: underline; }
.topbar-tag{ font-family: var(--f-bangla-ui); opacity: .85; }

.social-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.social-link .ico-fb{
  color: var(--gold);
  transition: color .15s ease, transform .15s ease;
}
.social-link:hover .ico-fb{ color: #fff; transform: scale(1.08); }
.footer-col .social-link .ico-fb{ color: var(--gold); }
.footer-col a.social-link:hover{ color: var(--gold); }

/* --------------------------------- header --------------------------------- */
.site-header{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--maroon) 0 25%,
    var(--gold) 25% 50%,
    var(--seal-blue) 50% 75%,
    var(--forest) 75% 100%);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: 20px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-crest{ width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }
.brand-text-en{ font-family: var(--f-display); font-weight: 700; font-size: 1.18rem; color: var(--heading); line-height: 1.15; }
.brand-text-bn{ font-family: var(--f-bangla); font-size: .95rem; color: var(--ink-soft); }

.header-right{ display:flex; align-items:center; gap: 18px; }
.main-nav ul{ display: flex; gap: 4px; align-items: center; }
.main-nav a{
  font-weight: 600;
  font-size: .92rem;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: background-color .15s ease, color .15s ease;
}
.main-nav a:hover{ background: var(--maroon-tint); color: var(--heading); }
.main-nav a.active{ background: var(--maroon); color: #fff; }

.nav-toggle{
  display: none;
  background: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s);
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; }

/* --------------------------------- header controls (lang / theme) --------------------------------- */
.header-controls{ display:flex; align-items:center; gap:8px; }
.ctrl-btn{
  background: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ctrl-btn:hover{ border-color: var(--maroon); color: var(--heading); }
.ctrl-btn svg{ width: 18px; height: 18px; display:block; }
#theme-toggle{ width: 42px; height: 42px; display:flex; align-items:center; justify-content:center; }
#lang-toggle{
  height: 42px; padding: 0 12px;
  font-family: var(--f-mono); font-weight: 600; font-size: .8rem; letter-spacing: .03em;
}

@media (max-width: 900px){
  .nav-toggle{ display: inline-flex; }
  .main-nav{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--card);
    box-shadow: var(--shadow-pop);
    transform: translateX(100%);
    transition: transform .28s ease;
    padding: 90px 24px 24px;
    z-index: 60;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav ul{ flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a{ display: block; padding: 13px 14px; }
  .nav-scrim{
    position: fixed; inset:0; background: rgba(20,16,12,.45);
    opacity:0; pointer-events:none; transition: opacity .25s ease; z-index: 40;
  }
  .nav-scrim.open{ opacity:1; pointer-events:auto; }
}

/* --------------------------------- hero --------------------------------- */
.hero{
  position: relative;
  color: #fff;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 38%;
}
.hero-bg::after{
  content:"";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,15,12,.15) 0%, rgba(20,15,12,.35) 55%, rgba(16,12,10,.86) 100%);
}
.hero-inner{
  position: relative;
  z-index: 2;
  padding-block: 56px 64px;
}
.hero .eyebrow{ color: var(--gold); }
.hero .eyebrow::before{ background: #fff; }
.hero h1{ color: #fff; margin-block: 14px 10px; }
.hero-bn{ font-family: var(--f-bangla); font-size: 1.3rem; color: #F0E4D6; margin-bottom: 18px; }
.hero-lede{ color: #EFE7DC; max-width: 56ch; font-size: 1.05rem; }
.hero-actions{ display:flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.hero-inner .brand-crest{ margin-bottom: 6px; }

/* page header (non-home pages) */
.page-head{
  position: relative;
  color: #fff;
  padding-block: 68px 46px;
  background: var(--maroon-dark);
  overflow: hidden;
}
.page-head::before{
  content:"";
  position: absolute; inset:0;
  background: radial-gradient(120% 140% at 100% 0%, rgba(184,137,43,.35), transparent 55%),
              radial-gradient(120% 140% at 0% 120%, rgba(27,94,63,.5), transparent 55%);
}
.page-head .container{ position: relative; z-index: 2; }
.page-head h1{ color: #fff; margin-top: 8px; }
.page-head .eyebrow{ color: var(--gold); }
.page-head .eyebrow::before{ background:#fff; }
.page-head p{ color: #EFE7DC; max-width: 60ch; margin-top: 10px; }
.breadcrumb{ font-size: .82rem; color: #D9CBB0; margin-top: 18px; display:flex; gap:8px; }
.breadcrumb a:hover{ text-decoration: underline; }

/* --------------------------------- sections --------------------------------- */
section{ padding-block: 64px; }
.section-tight{ padding-block: 40px; }
.section-head{ margin-bottom: 34px; max-width: 720px; }
.bg-dim{ background: var(--paper-dim); }
.bg-maroon{ background: var(--maroon-dark); color: #fff; }
.bg-maroon h2{ color: #fff; }

.grid{ display: grid; gap: 24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

/* --------------------------------- welcome / about --------------------------------- */
.welcome-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px){ .welcome-grid{ grid-template-columns: 1fr; } }
.welcome-figure{
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.welcome-figure img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.welcome-figure figcaption{
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
  background: var(--maroon-dark); color: #F0E4D6; padding: 10px 14px;
}

/* --------------------------------- stat strip --------------------------------- */
.stat-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--card);
}
.stat{
  padding: 26px 20px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.stat:first-child{ border-left: none; }
.stat-num{ font-family: var(--f-mono); font-weight: 600; font-size: 2rem; color: var(--accent); }
.stat-label{ font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 700px){ .stat-strip{ grid-template-columns: repeat(2,1fr);} .stat{ border-left:none; border-top:1px solid var(--line);} .stat:nth-child(1),.stat:nth-child(2){border-top:none;} }

/* --------------------------------- head master message --------------------------------- */
.leader-card{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 32px;
  box-shadow: var(--shadow-card);
  align-items: start;
}
@media (max-width: 700px){ .leader-card{ grid-template-columns: 1fr; } .leader-card img{ width: 140px; margin-inline:auto; } }
.leader-card img{ border-radius: var(--radius-s); aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-card); }
.leader-quote{ font-family: var(--f-display); font-size: 1.15rem; font-style: italic; color: var(--ink); }
.leader-quote::before{ content:"\201C"; color: var(--gold); font-size:1.6em; line-height:0; vertical-align:-0.35em; margin-right:.05em; }
.leader-name{ margin-top: 18px; font-weight: 700; color: var(--heading); }
.leader-role{ font-size: .85rem; color: var(--ink-soft); }

/* --------------------------------- notice board --------------------------------- */
.notice-board{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.notice-board-head{
  background: var(--maroon);
  color: #fff;
  padding: 16px 22px;
  display:flex; align-items:center; justify-content:space-between;
}
.notice-board-head h3{ color:#fff; }
.notice-item{
  border-top: 1px solid var(--line);
}
.notice-item:first-child{ border-top:none; }
.notice-summary{
  display:flex; gap:16px; align-items:center;
  width: 100%;
  padding: 18px 22px;
  background: none; border: 0; margin: 0;
  font: inherit; text-align: left; color: inherit;
  cursor: pointer;
  transition: background-color .15s ease;
}
.notice-summary:hover{ background: var(--paper-dim); }
.notice-date{
  font-family: var(--f-mono);
  font-size: .72rem;
  background: var(--gold-tint);
  color: var(--heading);
  border-radius: var(--radius-s);
  padding: 6px 8px;
  text-align: center;
  line-height: 1.2;
  min-width: 54px;
  flex-shrink: 0;
}
.notice-date b{ display:block; font-size: 1.05rem; }
.notice-title{ font-weight: 600; color: var(--ink); flex: 1; }
.notice-chevron{
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--ink-faint);
  transition: transform .2s ease;
}
.notice-summary[aria-expanded="true"] .notice-chevron{ transform: rotate(180deg); color: var(--accent); }
.notice-details{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.notice-details.open{ max-height: 500px; }
.notice-details-inner{ padding: 0 22px 20px 92px; }
@media (max-width: 560px){ .notice-details-inner{ padding-left: 22px; } }
.notice-body{ color: var(--ink-soft); font-size: .92rem; }
.notice-attachment-card{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--maroon-tint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--heading);
  font-weight: 600; font-size: .88rem;
  transition: background-color .15s ease, transform .15s ease;
}
.notice-attachment-card:hover{ background: var(--gold-tint); transform: translateY(-1px); }
.notice-attachment-icon{ width: 22px; height: 22px; flex-shrink: 0; display:flex; }
.notice-attachment-icon svg{ width: 100%; height: 100%; }

/* --------------------------------- quick links --------------------------------- */
.quick-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.quick-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.quick-card-icon{
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--maroon-tint); color: var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom: 16px;
}
.quick-card-icon svg{ width: 22px; height: 22px; }
.quick-card h4{ margin-bottom: 6px; }
.quick-card p{ color: var(--ink-soft); font-size: .92rem; }
.quick-card .go{ margin-top: 14px; font-family: var(--f-mono); font-size: .78rem; color: var(--accent); font-weight: 600; }

/* ==========================================================================
   PROFILE / ID CARDS  — signature element
   Styled after the school's own MPO index-registration paperwork: a
   perforated maroon strip, a boxed photo, and monospace registration data.
   ========================================================================== */
.profile-card{
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.profile-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.profile-strip{
  background: repeating-linear-gradient(90deg, var(--maroon) 0 10px, var(--maroon-dark) 10px 20px);
  height: 6px;
}
.profile-body{ padding: 22px 20px 20px; display:flex; gap:16px; }
.profile-photo{
  width: 76px; height: 95px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.profile-photo img{ width:100%; height:100%; object-fit: cover; }
.profile-name{ font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--heading); line-height:1.2; }
.profile-role{ font-size: .84rem; color: var(--ink-soft); margin-top: 3px; }
.profile-tag{
  display:inline-block; margin-top: 10px;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing:.04em;
  background: var(--forest); color:#fff;
  padding: 3px 8px; border-radius: 4px;
}
.profile-tag.tag-lead{ background: var(--gold); color: var(--maroon-dark); }
.profile-seal{
  margin-left:auto; width: 34px; height:34px; flex-shrink:0; opacity:.85;
}

/* ==========================================================================
   TEACHER PROFILE PAGE
   ========================================================================== */
.teacher-hero{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.teacher-hero-strip{
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--maroon) 0 10px, var(--maroon-dark) 10px 20px);
}
.teacher-hero-body{
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 34px 36px;
}
@media (max-width: 640px){ .teacher-hero-body{ flex-direction: column; align-items: flex-start; padding: 28px 22px; } }
.teacher-hero-photo{
  width: 140px; height: 174px;
  flex-shrink: 0;
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px){ .teacher-hero-photo{ margin-inline: auto; } }
.teacher-hero-photo img{ width: 100%; height: 100%; object-fit: cover; }
.teacher-hero-info h2{ margin-bottom: 6px; }
.teacher-hero-role{ color: var(--ink-soft); font-size: 1rem; margin-bottom: 14px; }
.teacher-hero-tags{ display: flex; gap: 10px; flex-wrap: wrap; }

.teacher-quote-card{
  margin-top: 30px;
  background: var(--maroon-tint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  padding: 28px 32px;
}
.teacher-quote-card .eyebrow{ margin-bottom: 14px; }
.teacher-quote{
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink);
}
.teacher-quote::before{ content:"\201C"; color: var(--gold); font-size:1.6em; line-height:0; vertical-align:-0.35em; margin-right:.05em; }
.teacher-quote-note{
  display: block;
  margin-top: 16px;
  font-size: .8rem;
  color: var(--ink-faint);
}

.teacher-info-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.teacher-info-card h3{ margin-bottom: 18px; }
.teacher-info-list{ margin: 0; display: flex; flex-direction: column; gap: 14px; }
.teacher-info-list > div{ display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid var(--line); }
.teacher-info-list > div:first-child{ padding-top: 0; border-top: none; }
.teacher-info-list dt{ font-family: var(--f-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.teacher-info-list dd{ margin: 0; font-size: .95rem; color: var(--ink); }
.teacher-info-list dd a{ color: var(--accent); }
.teacher-info-list dd a:hover{ text-decoration: underline; }
.mono{ font-family: var(--f-mono); }

/* --------------------------------- students --------------------------------- */
.sample-banner{
  display:flex; align-items:flex-start; gap:12px;
  background: var(--gold-tint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  font-size: .9rem;
  color: var(--heading);
  margin-bottom: 30px;
}
.sample-banner svg{ width: 20px; height:20px; flex-shrink:0; margin-top:2px; }

.filter-bar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-bottom: 22px;
}
.filter-bar select, .filter-bar input{
  font: inherit; font-size:.9rem;
  padding: 10px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
}
.filter-bar input{ flex: 1; min-width: 180px; }
.filter-bar select:focus, .filter-bar input:focus{ border-color: var(--maroon); }

.data-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.data-table thead th{
  text-align:left;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--maroon);
  padding: 12px 16px;
}
.data-table tbody td{
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: .92rem;
}
.data-table tbody tr:hover{ background: var(--maroon-tint); }
.roll-chip{
  font-family: var(--f-mono);
  background: var(--paper-dim);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .82rem;
}
.data-table th.th-photo{ width: 52px; padding-inline: 10px; }
.data-table td:first-child{ padding: 8px 10px; }
.student-thumb{
  display:block;
  width: 36px; height: 48px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.student-thumb-empty{
  width: 36px; height: 48px;
  border-radius: 5px;
  background: var(--paper-dim);
  border: 1px dashed var(--line-strong);
}
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.table-wrap{ overflow-x:auto; border-radius: var(--radius-m); }
.empty-state{ text-align:center; padding: 40px 20px; color: var(--ink-soft); }

/* --------------------------------- gallery --------------------------------- */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 760px){ .gallery-grid{ grid-template-columns: repeat(2,1fr);} }
.gallery-item{
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  cursor: zoom-in;
  box-shadow: var(--shadow-card);
}
.gallery-item img{ width:100%; height:100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 12px;
  font-size: .78rem;
  color:#fff;
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}
.lightbox{
  position: fixed; inset:0; z-index: 100;
  background: rgba(15,11,9,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 30px;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width: min(90vw, 1100px); max-height: 86vh; border-radius: 6px; }
.lightbox-close{
  position:absolute; top:22px; right:26px;
  width: 42px; height:42px; border-radius: 999px;
  background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* --------------------------------- contact --------------------------------- */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap: 40px;
}
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info-item{
  display:flex; gap:14px; padding: 16px 0; border-top: 1px solid var(--line);
}
.contact-info-item:first-child{ border-top:none; }
.contact-info-item svg{ width:20px; height:20px; color: var(--accent); flex-shrink:0; margin-top:2px; }
.contact-info-item b{ display:block; font-size:.8rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; font-family: var(--f-mono); margin-bottom:3px; }

.form-field{ margin-bottom: 18px; }
.form-field label{ display:block; font-weight:600; font-size:.86rem; margin-bottom:6px; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; font: inherit; font-size: .95rem;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--ink);
}
.form-field select{ cursor: pointer; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--maroon); }
.form-note{ font-size: .82rem; color: var(--ink-faint); margin-top: 14px; }
.map-frame{ border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--line); margin-top:24px; }
.map-frame iframe{ width:100%; height: 260px; border:0; display:block; }

/* --------------------------------- admission --------------------------------- */
.rules-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 30px 32px;
  box-shadow: var(--shadow-card);
}
.rules-list{ counter-reset: rule; display:flex; flex-direction:column; gap:16px; list-style:none; margin:0; padding:0; }
.rules-list li{
  counter-increment: rule;
  display:flex; gap:14px; align-items:flex-start;
  font-size:.96rem; color:var(--ink);
}
.rules-list li::before{
  content: counter(rule);
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background: var(--seal-blue-tint); color: var(--seal-blue);
  font-family: var(--f-mono); font-weight:600; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  margin-top: 1px;
}
.admission-form-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 34px 36px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px){ .admission-form-card{ padding: 26px 20px; } }
.form-section-title{
  font-size: 1.05rem;
  margin: 8px 0 18px;
  padding-top: 26px;
  border-top: 1px dashed var(--line-strong);
}
.form-section-title--first{ padding-top: 0; border-top: none; margin-top: 0; }
.form-subhead{
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.form-declaration{
  background: var(--paper-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 16px 18px;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 4px 0 20px;
}
.form-check{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: 22px;
}
.form-check input{ width: 17px; height: 17px; margin-top: 2px; accent-color: var(--maroon); flex-shrink: 0; }

.admission-cta{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.admission-cta-strip{
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--maroon) 10px 20px);
}
.admission-cta-body{
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 34px 36px;
}
@media (max-width: 640px){ .admission-cta-body{ flex-direction: column; padding: 28px 24px; } }
.admission-cta-icon{
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--maroon-tint); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.admission-cta-content{ flex: 1; min-width: 0; }
.admission-cta-content h3{ margin-bottom: 8px; }
.admission-cta-content .lede{ margin-bottom: 22px; }
.admission-steps-eyebrow{ display: inline-flex; margin-bottom: 14px; }
.admission-steps{
  counter-reset: step;
  list-style: none;
  margin: 0 0 26px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.admission-steps li{
  counter-increment: step;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .92rem; color: var(--ink-soft);
}
.admission-steps li::before{
  content: counter(step);
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-tint); color: var(--gold);
  font-family: var(--f-mono); font-weight: 600; font-size: .74rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* --------------------------------- footer --------------------------------- */
.site-footer{
  background: var(--forest-dark);
  color: #DCE6DF;
  padding-block: 56px 24px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
}
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand{ display:flex; gap:12px; align-items:center; margin-bottom: 14px; }
.footer-brand .brand-text-en{ color:#fff; }
.footer-desc{ font-size:.88rem; color:#B9C9BE; max-width: 34ch; }
.footer-col h5{
  font-family: var(--f-mono); font-size: .74rem; letter-spacing:.1em; text-transform:uppercase;
  color: #9FD1B4; margin-bottom: 14px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:9px; }
.footer-col a{ font-size:.9rem; color:#DCE6DF; opacity:.9; }
.footer-col a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.8rem; color:#9FB2A5;
}
.footer-bottom .footer-credit:hover{ color:#fff; text-decoration:underline; }

/* --------------------------------- mobile polish --------------------------------- */
html, body{ overflow-x: hidden; }
.table-wrap{ -webkit-overflow-scrolling: touch; }
a, button{ -webkit-tap-highlight-color: transparent; }

@media (max-width: 480px){
  .container{ padding-inline: 16px; }
  section{ padding-block: 44px; }
  .section-tight{ padding-block: 28px; }

  /* topbar: drop the address so phone + email + facebook fit on one line */
  .topbar-info > span{ display: none; }
  .topbar-info{ gap: 14px; }
  .topbar{ font-size: .74rem; }

  /* header: compact brand + controls so nothing crowds or wraps */
  .site-header .container{ gap: 10px; }
  .brand{ gap: 8px; }
  .brand-crest{ width: 40px; height: 40px; }
  .brand-text-en{ font-size: 1rem; }
  .brand-text-bn{ font-size: .8rem; }
  .header-controls{ gap: 6px; }
  #lang-toggle{ padding: 0 9px; height: 38px; }
  #theme-toggle{ width: 38px; height: 38px; }
  .nav-toggle{ width: 38px; height: 38px; }

  /* hero: don't force a tall viewport-relative box on small phones */
  .hero{ min-height: auto; }
  .hero-inner{ padding-block: 40px 44px; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ justify-content: center; width: 100%; }

  .page-head{ padding-block: 48px 32px; }

  .notice-item{ padding: 14px 16px; gap: 12px; }
  .data-table thead th, .data-table tbody td{ padding: 10px 10px; font-size: .84rem; }
}

/* --------------------------------- class routine --------------------------------- */
.day-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.day-tab{
  font: inherit; font-size:.88rem; font-weight:600;
  padding: 10px 18px; border-radius:999px;
  border: 1.5px solid var(--line-strong);
  background: var(--card); color: var(--ink-soft);
  cursor:pointer; transition: all .15s ease;
}
.day-tab:hover{ border-color: var(--maroon); color: var(--heading); }
.day-tab.active{ background: var(--maroon); border-color: var(--maroon); color:#fff; }

.routine-table th, .routine-table td{ text-align:center; vertical-align:middle; }
.routine-table thead th{ line-height:1.4; white-space:nowrap; }
.period-time{ display:block; font-weight:400; text-transform:none; letter-spacing:0; font-size:.66rem; opacity:.85; margin-top:2px; }
.routine-table thead .th-class{ background: var(--maroon); }
.routine-table tbody .th-class{ background: var(--paper-dim); color: var(--heading); font-family: var(--f-bangla-ui); font-weight:700; font-size:.88rem; white-space:nowrap; text-align:left; padding-left:16px; }
.th-break, .td-break{ background: var(--gold-tint) !important; }
.td-break{ font-size:.76rem; color: var(--ink-faint); font-family: var(--f-bangla-ui); }
.routine-subject{ display:block; font-weight:600; color:var(--ink); font-size:.85rem; white-space:normal; min-width:90px; }
.routine-code{ display:inline-block; margin-top:4px; font-family: var(--f-mono); font-size:.66rem; color: var(--accent); background: var(--maroon-tint); padding:1px 6px; border-radius:4px; }

.routine-notes{
  margin-top: 30px;
  background: var(--paper-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  padding: 20px 24px;
}
.routine-notes h4{ margin-bottom:12px; }
.routine-notes ul{ display:flex; flex-direction:column; gap:8px; }
.routine-notes li{ font-size:.9rem; color:var(--ink-soft); padding-left:18px; position:relative; }
.routine-notes li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }

.routine-doc-card{
  display:flex; gap:22px; align-items:center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 28px 30px;
  box-shadow: var(--shadow-card);
  margin-bottom: 26px;
}
.routine-doc-icon{
  width: 60px; height: 60px; flex-shrink:0; border-radius: 14px;
  background: var(--maroon-tint); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.routine-doc-icon svg{ width:30px; height:30px; }
.routine-doc-info h3{ margin-bottom: 4px; }
.routine-doc-meta{ color: var(--ink-soft); font-size:.9rem; margin-bottom: 16px; }
.routine-doc-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width: 560px){ .routine-doc-card{ flex-direction:column; align-items:flex-start; text-align:left; padding: 24px; } }

.routine-embed-wrap{
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--card);
}
.routine-embed-wrap iframe{ width:100%; height: 80vh; min-height:520px; border:0; display:block; }
@media (max-width: 700px){ .routine-embed-wrap{ display:none; } }

/* --------------------------------- misc utils --------------------------------- */
.text-center{ text-align:center; margin-inline:auto; }
.mt-0{ margin-top:0; }
.divider{ height:1px; background:var(--line); border:0; margin-block: 8px; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--f-mono); font-size:.72rem; letter-spacing:.05em;
  background: var(--forest); color:#fff; padding:5px 10px; border-radius: 999px;
}
.badge-blue{ background: var(--seal-blue); }