/* ============================================================
   SVCON website — global stylesheet
   Ported from the SVCON Design System (tokens + components).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Mukta:wght@300;400;500;600;700&display=swap');

/* ---------------- Tokens ---------------- */
:root {
  /* Indigo / Navy */
  --svc-navy-50:#eceaf6; --svc-navy-100:#d4d1ec; --svc-navy-200:#aaa6d8;
  --svc-navy-300:#807bc3; --svc-navy-400:#5b56ab; --svc-navy-500:#413d96;
  --svc-navy:#312e86; --svc-navy-700:#28265f; --svc-navy-800:#1d1c49; --svc-navy-900:#131233;
  /* Teal */
  --svc-teal-50:#e7f4f1; --svc-teal-100:#c5e6df; --svc-teal-200:#93cfc3;
  --svc-teal-300:#5fb6a7; --svc-teal:#2e9183; --svc-teal-600:#257a6e;
  --svc-teal-700:#1d5f56; --svc-teal-800:#154640;
  /* Pink */
  --svc-pink-50:#fdeef0; --svc-pink-100:#fbdee0; --svc-pink-200:#f7c4c7;
  --svc-pink:#f2a8a6; --svc-pink-500:#e58683; --svc-pink-600:#d56a67;
  /* Saffron */
  --svc-saffron-50:#fdf2dd; --svc-saffron-100:#fbe3b8; --svc-saffron:#f4a024;
  --svc-saffron-600:#d97f0d; --svc-saffron-700:#b56409;
  /* Neutrals */
  --svc-white:#fff; --svc-ink-50:#f5f6fa; --svc-ink-100:#edeef4; --svc-ink-200:#dde0ea;
  --svc-ink-300:#c2c6d6; --svc-ink-400:#9298ad; --svc-ink-500:#6b7186;
  --svc-ink-600:#4d5366; --svc-ink-700:#363b4c; --svc-ink-800:#262a38; --svc-ink-900:#1a1d29;

  /* Semantic */
  --brand-primary:var(--svc-navy); --brand-secondary:var(--svc-teal);
  --brand-accent:var(--svc-saffron); --brand-soft:var(--svc-pink);
  --text-strong:var(--svc-ink-900); --text-body:var(--svc-ink-700);
  --text-muted:var(--svc-ink-500); --text-link:var(--svc-navy); --text-link-hover:var(--svc-teal-600);
  --surface-subtle:var(--svc-ink-50);
  --border-subtle:var(--svc-ink-200); --border-strong:var(--svc-ink-300);
  --success:#2e9d6a; --warning:#e0902a; --danger:#d2473f;
  --focus-ring:rgba(49,46,134,.40);

  /* Type */
  --font-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-body:'Mukta','Segoe UI',system-ui,sans-serif;
  --fs-eyebrow:.78rem;

  /* Spacing / layout */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-pill:999px;
  --container-max:1200px; --container-narrow:820px;
  --gutter:clamp(1rem,4vw,3rem); --section-y:clamp(3.5rem,7vw,7rem);
  --bw-accent:4px;

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(26,28,51,.06);
  --shadow-sm:0 2px 6px rgba(26,28,51,.07);
  --shadow-md:0 8px 22px rgba(26,28,51,.09);
  --shadow-lg:0 18px 44px rgba(26,28,51,.12);
  --shadow-xl:0 28px 70px rgba(26,28,51,.16);
  --shadow-brand:0 12px 30px rgba(49,46,134,.22);
  --shadow-teal:0 12px 30px rgba(46,145,131,.22);
  --ring:0 0 0 3px var(--focus-ring);
}

/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--text-body);
  font-size:1rem; line-height:1.5; background:#fff;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--text-strong); line-height:1.12; letter-spacing:-.02em; margin:0; font-weight:700}
a{color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs)}
.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.bg-subtle{background:var(--surface-subtle)}

/* Eyebrow lockup (saffron tick + uppercase teal) */
.eyebrow{
  font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-secondary);
  display:inline-flex; align-items:center; gap:var(--space-2);
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--brand-accent); border-radius:2px}

.section-head{display:flex; flex-direction:column; gap:14px; max-width:640px}
.section-head.center{align-items:center; text-align:center; margin:0 auto}
.section-head h2{font-size:clamp(1.8rem,3vw,2.4rem); letter-spacing:-.025em}
.section-head .lede{font-size:1.12rem; line-height:1.6; color:var(--text-muted); margin:0}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1;
  letter-spacing:.01em; height:46px; padding:0 22px; border:1.5px solid transparent;
  border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0); box-shadow:var(--shadow-xs)!important}
.btn-sm{height:38px; padding:0 16px; font-size:14px}
.btn-lg{height:54px; padding:0 30px; font-size:17px}
.btn-block{width:100%}
.btn-primary{background:var(--svc-navy); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--svc-navy-700); color:#fff; box-shadow:var(--shadow-brand)}
.btn-secondary{background:var(--svc-teal); color:#fff; box-shadow:var(--shadow-sm)}
.btn-secondary:hover{background:var(--svc-teal-600); color:#fff; box-shadow:var(--shadow-teal)}
.btn-accent{background:var(--svc-saffron); color:#3a2400; box-shadow:var(--shadow-sm)}
.btn-accent:hover{background:var(--svc-saffron-600); color:#3a2400; box-shadow:0 12px 30px rgba(244,160,36,.28)}
.btn-outline{background:transparent; color:var(--svc-navy); border-color:var(--svc-navy)}
.btn-outline:hover{background:var(--svc-navy-50); color:var(--svc-navy)}
.btn-ghost{background:transparent; color:var(--svc-navy)}
.btn-ghost:hover{background:var(--svc-navy-50); color:var(--svc-navy)}
.btn-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn-light:hover{background:rgba(255,255,255,.12); color:#fff}

/* ---------------- Badges ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display);
  font-weight:600; font-size:12.5px; padding:5px 11px; border-radius:var(--radius-pill);
  letter-spacing:.01em;
}
.badge .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.badge-neutral{background:var(--svc-ink-100); color:var(--svc-ink-600)}
.badge-teal{background:var(--svc-teal-50); color:var(--svc-teal-600)}
.badge-pink{background:var(--svc-pink-50); color:var(--svc-pink-600)}
.badge-saffron{background:var(--svc-saffron-50); color:var(--svc-saffron-700)}
.badge-brand{background:var(--svc-navy-50); color:var(--svc-navy)}

/* ---------------- Header ---------------- */
.topbar{background:var(--svc-navy-800); color:rgba(255,255,255,.82)}
.topbar .inner{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter);
  height:40px; display:flex; align-items:center; justify-content:space-between; font-size:13.5px}
.topbar .grp{display:flex; gap:22px; align-items:center}
.topbar a{color:rgba(255,255,255,.82)}
.topbar a:hover{color:#fff}
.topbar .meta{display:inline-flex; align-items:center; gap:7px}
.topbar .socials{display:inline-flex; gap:12px}
.topbar .sep{width:1px; height:16px; background:rgba(255,255,255,.2)}
.topbar i{color:var(--svc-teal-200)}

.site-header{position:sticky; top:0; z-index:50}
.navbar{background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-sm)}
.navbar .inner{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter)}

/* Row 1 — bigger logo + full college name on a single line */
.nav-top .inner.brand-row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:center; gap:16px; min-width:0}
.brand .brand-logo{width:92px; height:92px; object-fit:contain; flex-shrink:0}
.brand .brand-text{display:flex; flex-direction:column; line-height:1.1; min-width:0; flex:1 1 auto}
.brand .b-name-full{font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2.4vw,27px);
  color:var(--svc-navy); letter-spacing:-.015em; white-space:normal; overflow-wrap:anywhere}
/* keep the name on a single line on desktop (the primary view) */
@media (min-width:861px){ .brand .b-name-full{white-space:nowrap} }
.brand .b-sub{font-family:var(--font-body); font-weight:500; font-size:12.5px; color:var(--text-muted);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px}

/* Row 2 — navigation strip below the name */
.nav-bottom{border-top:1px solid var(--border-subtle); background:var(--svc-ink-50)}
.nav-bottom .inner{max-width:1440px; display:flex; justify-content:center; padding:6px var(--gutter)}
/* Two-row responsive nav — wraps naturally when items don't fit on one line */
.main-nav{display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:center; row-gap:2px}
.main-nav .nav-item{position:relative}
.main-nav .nav-link{
  font-family:var(--font-display); font-weight:500; font-size:14px;
  padding:9px 14px; border-radius:8px; color:var(--text-body);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  border-bottom:none;
}
@media (min-width:1400px){ .main-nav .nav-link{font-size:14.5px; padding:9px 16px} }
@media (max-width:980px){ .main-nav .nav-link{font-size:13.5px; padding:8px 12px} }
.main-nav .nav-link:hover{background:var(--svc-navy-50); color:var(--svc-navy)}
.main-nav .nav-item.active > .nav-link{background:var(--svc-navy-50); color:var(--svc-navy)}
.main-nav .has-children > .nav-link::after{content:""; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6}

.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:248px;
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:all var(--dur-fast) var(--ease-out); z-index:60;
}
.main-nav .nav-item:hover > .dropdown,
.main-nav .nav-item:focus-within > .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{
  display:block; padding:9px 12px; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:14.5px; color:var(--text-body); font-weight:500;
}
.dropdown a:hover{background:var(--svc-ink-50); color:var(--svc-navy)}

.menu-btn{display:none; background:none; border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm); width:42px; height:42px; cursor:pointer; color:var(--svc-navy);
  align-items:center; justify-content:center}
.nav-cta{display:inline-flex}

/* Mobile menu */
.mobile-overlay{position:fixed; inset:0; z-index:90; background:rgba(19,18,51,.5); display:none}
.mobile-overlay.open{display:block}
.mobile-panel{position:absolute; top:0; right:0; bottom:0; width:min(320px,85%); background:#fff;
  box-shadow:var(--shadow-xl); padding:20px; overflow-y:auto; animation:slideIn .26s var(--ease-out)}
.mobile-panel .m-close{display:flex; justify-content:flex-end; margin-bottom:8px}
.mobile-panel .m-close button{background:none; border:none; cursor:pointer; color:var(--svc-navy)}
.mobile-panel details{border-bottom:1px solid var(--border-subtle)}
.mobile-panel summary{list-style:none; cursor:pointer; font-family:var(--font-display); font-weight:600;
  font-size:15.5px; color:var(--text-body); padding:12px 6px; display:flex; justify-content:space-between; align-items:center}
.mobile-panel summary::-webkit-details-marker{display:none}
.mobile-panel summary::after{content:"+"; color:var(--svc-teal); font-size:18px}
.mobile-panel details[open] summary::after{content:"–"}
.mobile-panel .m-top{display:block; font-family:var(--font-display); font-weight:600; font-size:15.5px;
  padding:12px 6px; color:var(--text-body); border-bottom:1px solid var(--border-subtle)}
.mobile-panel .m-sub{display:block; padding:9px 16px; font-size:14.5px; color:var(--text-muted)}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* ---------------- Hero ---------------- */
.hero{position:relative; background:var(--svc-ink-50); overflow:hidden}
.hero .blob1{position:absolute; top:-120px; right:-80px; width:380px; height:380px; border-radius:50%; background:var(--svc-pink-100); filter:blur(8px); opacity:.5}
.hero .blob2{position:absolute; bottom:-140px; left:-100px; width:320px; height:320px; border-radius:50%; background:var(--svc-teal-50); opacity:.8}
.hero .inner{max-width:var(--container-max); margin:0 auto; padding:clamp(3rem,6vw,5.5rem) var(--gutter);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; position:relative; z-index:1}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.025em; font-weight:800; color:var(--text-strong)}
.hero h1 .accent{color:var(--svc-navy)}
.hero .sub{font-size:18.5px; line-height:1.62; color:var(--text-body); max-width:520px; margin:0}
.hero .col-text{display:flex; flex-direction:column; gap:22px}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:4px}
.hero .accred{display:flex; gap:26px; margin-top:10px; flex-wrap:wrap}
.hero .accred span{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text-muted); font-weight:500}
.hero .accred i{color:var(--svc-teal)}
.hero .media{position:relative}
.float-stat{position:absolute; bottom:-26px; left:-26px; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--border-subtle); padding:18px 22px; display:flex; align-items:center; gap:14px}
.float-stat .ico{width:48px; height:48px; border-radius:var(--radius-md); background:var(--svc-pink-50); display:flex; align-items:center; justify-content:center; color:var(--svc-pink-600)}
.float-stat .num{font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--svc-navy); line-height:1}
.float-stat .lbl{font-size:13px; color:var(--text-muted)}

/* Photo / image slot */
.photo{position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(140deg,var(--svc-navy) 0%,var(--svc-navy-700) 55%,var(--svc-teal-700) 130%);
  display:flex; align-items:center; justify-content:center; min-height:200px}
.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.photo .arc{position:absolute; right:-40px; top:-40px; width:220px; height:220px; opacity:.16}
.photo .ph-label{display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.85); position:relative; z-index:1; font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.02em}

/* ---------------- Slider ---------------- */
.slider{position:relative; overflow:hidden; background:var(--svc-navy-900)}
.slider .slides{display:flex; transition:transform var(--dur-slow) var(--ease-out)}
.slide{min-width:100%; position:relative; height:clamp(340px,52vw,560px)}
.slide img{width:100%; height:100%; object-fit:cover}
.slide .overlay{position:absolute; inset:0; background:linear-gradient(90deg,rgba(19,18,51,.78) 0%,rgba(19,18,51,.35) 55%,rgba(19,18,51,.15) 100%)}
.slide .caption{position:absolute; inset:0; display:flex; align-items:center}
.slide .caption .wrap{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); width:100%}
.slide .caption .box{max-width:620px; color:#fff}
.slide .caption h2{color:#fff; font-size:clamp(1.9rem,4vw,3rem); line-height:1.1}
.slide .caption p{color:rgba(255,255,255,.9); font-size:1.15rem; margin:14px 0 0; line-height:1.55}
.slide .caption .btns{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap}
.slide.placeholder{background:linear-gradient(140deg,var(--svc-navy) 0%,var(--svc-navy-700) 60%,var(--svc-teal-700) 130%)}
.slider .arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px;
  border-radius:50%; border:none; background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:background var(--dur-fast)}
.slider .arrow:hover{background:rgba(255,255,255,.32)}
.slider .arrow.prev{left:18px}
.slider .arrow.next{right:18px}
.slider .dots{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:9px}
.slider .dots button{width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; padding:0}
.slider .dots button.active{background:#fff; width:26px; border-radius:5px}

/* ---------------- Upcoming Events floating widget ---------------- */
.events-widget{position:absolute; top:50%; right:18px; transform:translateY(-50%); z-index:5;
  display:flex; align-items:center; gap:0; pointer-events:none;
  font-family:var(--font-body)}
.events-widget > *{pointer-events:auto}
.events-widget .ew-tab{display:none; align-items:center; gap:6px; padding:14px 8px; min-height:120px;
  background:linear-gradient(180deg, var(--svc-saffron, #f59e0b) 0%, #e07a07 100%);
  color:#fff; border:none; border-radius:14px 0 0 14px; cursor:pointer;
  writing-mode:vertical-rl; transform:rotate(180deg); position:relative;
  box-shadow:-4px 6px 18px rgba(0,0,0,.18); font-weight:600; letter-spacing:.4px;
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast)}
.events-widget .ew-tab:hover{filter:brightness(1.05)}
.events-widget .ew-tab .ew-tab-text{font-size:12px; line-height:1.2; text-align:center}
.events-widget .ew-tab i{transform:rotate(180deg)}
.events-widget .ew-tab .ew-badge{position:absolute; top:6px; right:6px; transform:rotate(180deg);
  background:#fff; color:var(--svc-saffron, #d97706); border-radius:999px;
  min-width:20px; height:20px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; writing-mode:horizontal-tb}
.events-widget.collapsed .ew-tab{display:inline-flex}
.events-widget.collapsed .ew-panel{display:none}

.events-widget .ew-panel{width:300px; max-width:calc(100vw - 36px);
  background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.08);
  overflow:hidden; display:flex; flex-direction:column; max-height:min(86vh, 520px)}
.events-widget .ew-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; background:var(--svc-saffron-50, #fdf2dd);
  border-bottom:1px solid var(--svc-saffron-100, #fbe3b8); color:#3a2400}
.events-widget .ew-eyebrow{display:block; font-family:var(--font-display); font-weight:700; font-size:14.5px;
  letter-spacing:.2px; color:var(--svc-saffron-700, #b56409)}
.events-widget .ew-month{display:block; font-size:11.5px; opacity:.85; margin-top:2px; letter-spacing:.3px; color:#3a2400}
.events-widget .ew-close{background:rgba(58,36,0,.08); border:none; color:#3a2400; border-radius:8px;
  width:30px; height:30px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast)}
.events-widget .ew-close:hover{background:rgba(58,36,0,.18)}

.events-widget .ew-strip{display:flex; gap:6px; overflow-x:auto; padding:12px 12px;
  border-bottom:1px solid #eef0f5; scrollbar-width:thin}
.events-widget .ew-strip::-webkit-scrollbar{height:5px}
.events-widget .ew-strip::-webkit-scrollbar-thumb{background:#d6d8e0; border-radius:3px}
.events-widget .ew-day{position:relative; flex:0 0 auto; min-width:38px; padding:6px 4px 8px;
  background:#f7f8fb; border:1px solid transparent; border-radius:9px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--text-body); transition:background var(--dur-fast), border-color var(--dur-fast)}
.events-widget .ew-day:hover{background:#eef2fb}
.events-widget .ew-day .ew-wd{font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; opacity:.7}
.events-widget .ew-day .ew-dnum{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--svc-navy, #312e86)}
.events-widget .ew-day.today{background:var(--svc-navy, #312e86); border-color:var(--svc-navy, #312e86)}
.events-widget .ew-day.today .ew-wd,
.events-widget .ew-day.today .ew-dnum{color:#fff; opacity:1}
.events-widget .ew-day.has-event .ew-dot{position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--svc-saffron, #f59e0b)}
.events-widget .ew-day.today.has-event .ew-dot{background:#fff}
.events-widget .ew-day.is-active{background:#fff7e6; border-color:var(--svc-saffron, #f59e0b)}
.events-widget .ew-day.is-active .ew-dnum{color:#b45309}

.events-widget .ew-list{list-style:none; margin:0; padding:6px 0; overflow-y:auto; flex:1 1 auto}
.events-widget .ew-item{border-bottom:1px solid #f1f2f6}
.events-widget .ew-item:last-child{border-bottom:none}
.events-widget .ew-item.is-highlight{background:#fff7e6}
.events-widget .ew-link{display:flex; align-items:flex-start; gap:12px; padding:12px 16px;
  text-decoration:none; color:inherit; transition:background var(--dur-fast)}
.events-widget .ew-link:hover{background:#f7f8fb}
.events-widget .ew-date-chip{flex:0 0 auto; width:48px; min-width:48px; padding:6px 4px;
  background:var(--svc-teal, #2e9183); color:#fff; border-radius:9px; text-align:center; line-height:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px}
.events-widget .ew-date-chip .dd{font-family:var(--font-display); font-weight:700; font-size:18px}
.events-widget .ew-date-chip .mm{font-size:10px; font-weight:600; letter-spacing:.6px; opacity:.92}
.events-widget .ew-date-chip.tone-celebration{background:#e11d74}
.events-widget .ew-date-chip.tone-sports{background:#0891b2}
.events-widget .ew-date-chip.tone-academic{background:var(--svc-navy, #312e86)}
.events-widget .ew-date-chip.tone-cultural{background:#9333ea}
.events-widget .ew-date-chip.tone-other,
.events-widget .ew-date-chip.tone-event{background:var(--svc-teal, #2e9183)}
.events-widget .ew-meta{display:flex; flex-direction:column; gap:3px; min-width:0}
.events-widget .ew-title{font-family:var(--font-display); font-weight:600; font-size:13.5px;
  color:#1f2335; line-height:1.3}
.events-widget .ew-sub{font-size:11.5px; color:#64748b; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; line-height:1.3}
.events-widget .ew-sub i{vertical-align:-2px; margin-right:2px}

.events-widget .ew-foot{border-top:1px solid #eef0f5; padding:10px 16px; background:#fafbfd}
.events-widget .ew-all{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--svc-navy, #312e86); text-decoration:none}
.events-widget .ew-all:hover{color:#b45309}
.events-widget .ew-all i{transition:transform var(--dur-fast)}
.events-widget .ew-all:hover i{transform:translateX(3px)}

@media (max-width:1100px){
  .events-widget .ew-panel{width:280px}
}

/* Events listing page cards. */
.events-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:22px}
.event-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--border-subtle, #eef0f5);
  border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; position:relative;
  box-shadow:0 2px 10px rgba(15,23,42,.05); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.event-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(15,23,42,.12)}
.event-card.past{opacity:.85}
.event-card-img{height:160px; overflow:hidden}
.event-card-img img{width:100%; height:100%; object-fit:cover}
.event-card-date{position:absolute; top:14px; left:14px; z-index:2; min-width:54px; padding:8px 6px;
  background:var(--svc-teal, #2e9183); color:#fff; border-radius:10px; text-align:center; line-height:1;
  display:flex; flex-direction:column; gap:3px; box-shadow:0 4px 10px rgba(15,23,42,.18)}
.event-card-date .dd{font-family:var(--font-display); font-weight:700; font-size:20px}
.event-card-date .mm{font-size:11px; font-weight:600; letter-spacing:.6px}
.event-card-date.tone-celebration{background:#e11d74}
.event-card-date.tone-sports{background:#0891b2}
.event-card-date.tone-academic{background:var(--svc-navy, #312e86)}
.event-card-date.tone-cultural{background:#9333ea}
.event-card-date.tone-other,
.event-card-date.tone-event{background:var(--svc-teal, #2e9183)}
.event-card-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px}
.event-card-body h3{margin:0; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--svc-navy, #312e86); line-height:1.3}
.event-card-body .event-meta{display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:#64748b; margin:0}
.event-card-body .event-meta span{display:inline-flex; align-items:center; gap:5px}
.event-card-body .event-desc{margin:6px 0 0; font-size:14px; color:var(--text-body); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* Mobile: detach from slider edge, become a bottom-right floating action button. */
@media (max-width:860px){
  .events-widget{position:fixed; top:auto; right:14px; bottom:14px; transform:none}
  .events-widget .ew-tab{display:inline-flex; writing-mode:horizontal-tb; transform:none;
    border-radius:999px; padding:12px 16px; min-height:0; gap:8px}
  .events-widget .ew-tab .ew-tab-text{font-size:13px; text-align:left}
  .events-widget .ew-tab .ew-tab-text br{display:none}
  .events-widget .ew-tab i{transform:none}
  .events-widget .ew-tab .ew-badge{position:static; transform:none}
  .events-widget .ew-panel{position:fixed; right:14px; bottom:70px; width:min(340px, calc(100vw - 28px));
    max-height:min(70vh, 480px)}
  .events-widget:not(.collapsed) .ew-tab{display:none}
  .events-widget.collapsed .ew-panel{display:none}
  .events-widget:not(.collapsed) .ew-panel{display:flex}
}

/* ---------------- Cards ---------------- */
.card{background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:var(--space-5); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.card.hover:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}

.program-card{position:relative; background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-5); height:100%;
  display:flex; flex-direction:column; gap:14px; overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.program-card::before{content:""; position:absolute; left:0; bottom:0; height:var(--bw-accent); width:42px;
  background:var(--svc-teal); border-radius:0 4px 0 0; transition:width var(--dur-base) var(--ease-out)}
.program-card.accent-pink::before{background:var(--svc-pink)}
.program-card.accent-saffron::before{background:var(--svc-saffron)}
.program-card.accent-navy::before{background:var(--svc-navy)}
.program-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.program-card:hover::before{width:100%}
.icon-tile{width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center}
.icon-tile.teal{background:var(--svc-teal-50); color:var(--svc-teal)}
.icon-tile.pink{background:var(--svc-pink-50); color:var(--svc-pink-600)}
.icon-tile.saffron{background:var(--svc-saffron-50); color:var(--svc-saffron-600)}
.icon-tile.navy{background:var(--svc-navy-50); color:var(--svc-navy)}
.program-card h3{font-size:20px; font-weight:600; letter-spacing:-.01em}
.program-card p{margin:0; font-size:15px; line-height:1.55; color:var(--text-muted); flex:1}
.program-card .meta{display:flex; flex-wrap:wrap; gap:8px}
.program-card .know{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-weight:600; font-size:14.5px; color:var(--svc-navy); margin-top:2px}
.program-card .know span{color:var(--svc-teal); transition:transform var(--dur-fast) var(--ease-out)}
.program-card:hover .know span{transform:translateX(4px)}

.feature{display:flex; flex-direction:column; gap:13px}
.feature h3{font-size:19px; font-weight:600}
.feature p{margin:0; font-size:15px; line-height:1.55; color:var(--text-muted)}

/* ---------------- Stats band ---------------- */
.stats-band{background:linear-gradient(120deg,var(--svc-navy) 0%,var(--svc-navy-700) 100%);
  padding:clamp(3rem,5vw,4.5rem) 0; position:relative; overflow:hidden}
.stats-band .arc{position:absolute; left:-120px; bottom:-200px; width:500px; opacity:.08}
.stats-band .inner{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; z-index:1}
.stat{color:#fff}
.stat .num{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,3.4vw,2.8rem); line-height:1; letter-spacing:-.02em}
.stat .lbl{margin-top:8px; font-size:15px; color:rgba(255,255,255,.78); line-height:1.4}

/* ---------------- Split (Principal / Vision) ---------------- */
.split{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.split.rev{grid-template-columns:1.2fr .8fr}
.split .copy{display:flex; flex-direction:column; gap:20px}
.split .copy p{margin:0; font-size:17.5px; line-height:1.7; color:var(--text-body)}
.badge-float{position:absolute; right:-20px; bottom:28px; background:var(--svc-saffron); color:#3a2400;
  border-radius:var(--radius-md); padding:12px 18px; font-family:var(--font-display); font-weight:700; font-size:14px; box-shadow:var(--shadow-md)}
.sign{display:flex; align-items:center; gap:14px; margin-top:4px}
.sign .bar{width:4px; height:44px; border-radius:4px; background:var(--svc-teal)}
.sign .nm{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text-strong)}
.sign .ro{font-size:14px; color:var(--text-muted)}

/* Vision/Mission/Motto trio */
.vmm{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.vmm .card{display:flex; flex-direction:column; gap:14px}
.vmm .ico{width:54px; height:54px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center}
.vmm h3{font-size:20px; font-weight:600}
.vmm p{margin:0; color:var(--text-muted); font-size:15.5px; line-height:1.6}

/* ---------------- CTA strip ---------------- */
.cta-strip{position:relative; overflow:hidden; background:linear-gradient(120deg,var(--svc-teal) 0%,var(--svc-teal-700) 100%);
  border-radius:var(--radius-xl); padding:clamp(2.5rem,5vw,4rem); display:flex; align-items:center;
  justify-content:space-between; gap:30px; flex-wrap:wrap; box-shadow:var(--shadow-lg)}
.cta-strip .arc{position:absolute; right:-40px; top:-60px; width:320px; opacity:.14}
.cta-strip .copy{position:relative; z-index:1; max-width:560px}
.cta-strip h2{color:#fff; font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.12; margin-bottom:12px}
.cta-strip p{margin:0; color:rgba(255,255,255,.9); font-size:17px; line-height:1.6}
.cta-strip .btns{position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--svc-navy-900); color:rgba(255,255,255,.74)}
.site-footer .top{max-width:var(--container-max); margin:0 auto; padding:clamp(3rem,5vw,4rem) var(--gutter) 0;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px}
.site-footer .brand-f{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.site-footer .brand-f img{width:60px; height:60px; object-fit:contain;
  border-radius:50%; background:#fff; padding:3px; box-sizing:border-box}
.site-footer .brand-f .nm{font-family:var(--font-display); font-weight:700; font-size:17px; color:#fff; line-height:1.2}
.site-footer .brand-f .sub{font-size:13px; font-weight:500; color:rgba(255,255,255,.6)}
.site-footer .about{font-size:14.5px; line-height:1.6; max-width:320px; margin:0 0 18px}
.site-footer .contact-line{display:flex; flex-direction:column; gap:9px; font-size:14px}
.site-footer .contact-line span{display:inline-flex; gap:9px; align-items:center}
.site-footer .contact-line i{color:var(--svc-teal-200)}
.site-footer h4{font-family:var(--font-display); font-weight:600; font-size:15px; color:#fff; margin:0 0 16px}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.site-footer ul a{color:rgba(255,255,255,.72); font-size:14.5px}
.site-footer ul a:hover{color:#fff}
.site-footer .bar{max-width:var(--container-max); margin:36px auto 0; padding:22px var(--gutter);
  border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.55)}
.site-footer .bar a{color:rgba(255,255,255,.55)}
.site-footer .bar .links{display:flex; gap:18px}

/* ---------------- Forms ---------------- */
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--text-strong)}
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  padding:11px 14px; border:1.5px solid var(--border-strong); border-radius:var(--radius-sm);
  background:#fff; width:100%; transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--svc-navy); box-shadow:var(--ring)}
.field textarea{resize:vertical; min-height:120px}

/* ---------------- Modal ---------------- */
.modal-overlay{position:fixed; inset:0; z-index:100; background:rgba(19,18,51,.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px}
.modal-overlay.open{display:flex; animation:fadeIn .2s ease}
.modal{background:#fff; border-radius:var(--radius-xl); width:min(520px,100%); max-height:90vh; overflow:auto;
  box-shadow:var(--shadow-xl); animation:rise .26s var(--ease-out)}
.modal .head{background:linear-gradient(120deg,var(--svc-navy),var(--svc-navy-700)); padding:22px 26px; position:relative}
.modal .head .x{position:absolute; top:16px; right:16px; background:rgba(255,255,255,.14); border:none;
  border-radius:var(--radius-sm); width:34px; height:34px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.modal .head .t{font-family:var(--font-display); font-weight:700; font-size:21px; color:#fff}
.modal .head .s{font-size:14px; color:rgba(255,255,255,.78); margin-top:3px}
.modal form{padding:24px 26px; display:flex; flex-direction:column; gap:16px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--font-display); font-weight:600; font-size:13px; padding:8px 14px; border-radius:var(--radius-pill);
  cursor:pointer; border:1.5px solid var(--border-strong); background:#fff; color:var(--text-body); transition:all var(--dur-fast)}
.chip.sel{border-color:var(--svc-navy); background:var(--svc-navy); color:#fff}
.modal .ok{padding:34px 26px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center}
.modal .ok .circle{width:68px; height:68px; border-radius:50%; background:var(--svc-teal-50); display:flex; align-items:center; justify-content:center; color:var(--svc-teal)}
.fineprint{margin:0; font-size:12.5px; color:var(--text-muted); text-align:center}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}}

/* Flyer / poster popup (shown on home load) */
.popup-modal{position:relative; width:min(440px,100%); max-height:92vh; overflow:auto; padding:0; background:#fff}
.popup-close{position:absolute; top:10px; right:10px; z-index:3; width:38px; height:38px; border-radius:50%;
  border:none; background:rgba(19,18,51,.6); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast)}
.popup-close:hover{background:rgba(19,18,51,.85)}
.popup-img{width:100%; display:block}
.popup-body{padding:18px 22px 22px; display:flex; flex-direction:column; gap:12px; text-align:center}
.popup-body h3{font-size:1.2rem; font-weight:700}

/* ---------------- Page hero (interior) ---------------- */
.page-hero{position:relative; overflow:hidden; background:linear-gradient(120deg,var(--svc-navy) 0%,var(--svc-navy-700) 100%); color:#fff}
.page-hero .arc{position:absolute; right:-60px; top:-80px; width:340px; opacity:.12}
.page-hero .inner{max-width:var(--container-max); margin:0 auto; padding:clamp(2.4rem,5vw,4rem) var(--gutter)}
.page-hero h1{color:#fff; font-size:clamp(2rem,3.6vw,2.8rem); letter-spacing:-.02em}
.page-hero .lede{color:rgba(255,255,255,.85); font-size:1.1rem; margin:12px 0 0; max-width:680px; line-height:1.55}
.crumbs{display:flex; gap:8px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.7); margin-bottom:14px; flex-wrap:wrap}
.crumbs a{color:rgba(255,255,255,.8)}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}

/* Interior content + sidebar */
.page-body{display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start}
.prose{max-width:760px}
.prose h2{font-size:1.6rem; margin:2rem 0 .8rem}
.prose h3{font-size:1.3rem; margin:1.6rem 0 .6rem}
.prose p{margin:0 0 1rem; font-size:16.5px; line-height:1.7; color:var(--text-body)}
.prose ul,.prose ol{margin:0 0 1rem; padding-left:1.3rem; line-height:1.7}
.prose li{margin-bottom:.4rem}
.prose img{border-radius:var(--radius-md); margin:1rem 0}
.prose table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:15px}
.prose th,.prose td{border:1px solid var(--border-subtle); padding:10px 12px; text-align:left}
.prose th{background:var(--svc-ink-50); font-family:var(--font-display); font-weight:600; color:var(--text-strong)}
.prose a{color:var(--svc-navy); text-decoration:underline; text-underline-offset:2px}
.prose a:hover{color:var(--svc-teal-600)}

.sidebar{position:sticky; top:96px; display:flex; flex-direction:column; gap:20px}
.side-card{background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px 20px}
.side-card h4{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-strong); margin:0 0 12px; letter-spacing:-.01em}
.side-nav{display:flex; flex-direction:column; gap:2px}
.side-nav a{padding:9px 12px; border-radius:var(--radius-sm); font-size:14.5px; color:var(--text-body); font-weight:500}
.side-nav a:hover{background:var(--svc-ink-50); color:var(--svc-navy)}
.side-nav a.active{background:var(--svc-navy-50); color:var(--svc-navy); font-weight:600}

/* Placeholder block */
.placeholder-block{border:1.5px dashed var(--border-strong); border-radius:var(--radius-lg);
  background:var(--svc-ink-50); padding:48px 32px; text-align:center; color:var(--text-muted)}
.placeholder-block .ico{width:60px; height:60px; border-radius:var(--radius-md); background:var(--svc-navy-50); color:var(--svc-navy);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px}
.placeholder-block h3{color:var(--text-body); font-size:1.3rem; margin-bottom:8px}
.placeholder-block p{margin:0 auto; max-width:440px; line-height:1.6}

/* Downloads list */
.dl-list{display:flex; flex-direction:column; gap:10px}
.dl-item{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); background:#fff; transition:box-shadow var(--dur-fast)}
.dl-item:hover{box-shadow:var(--shadow-sm)}
.dl-item .ico{width:42px; height:42px; border-radius:var(--radius-sm); background:var(--svc-pink-50); color:var(--svc-pink-600); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.dl-item .t{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-strong)}
.dl-item .c{font-size:13px; color:var(--text-muted)}

/* Faculty grid */
.faculty-card{text-align:center}
.faculty-card .pf{width:100%; aspect-ratio:1/1; border-radius:var(--radius-lg); object-fit:cover; margin-bottom:14px; background:var(--svc-ink-100)}
.faculty-card .nm{font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--text-strong)}
.faculty-card .de{font-size:14px; color:var(--svc-teal-600); font-weight:600; margin-top:3px}
.faculty-card .ql{font-size:13.5px; color:var(--text-muted); margin-top:4px}

/* Faculty & Staff — page (department groups + team cards) */
/* Per-page auto-appended downloads block (Admin → Downloads with category = page slug) */
.page-docs{margin-top:32px; padding-top:24px; border-top:1px solid var(--border-subtle)}
.page-docs-title{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700;
  font-size:17px; color:var(--svc-navy); margin:0 0 14px}

/* Department slider — first section on the page. Just images + a small
   top-left breadcrumb overlay. Arrows/dots when there are 2+ slides. */
.dept-hero.slider{position:relative; height:clamp(440px, 66vh, 680px); overflow:hidden; background:var(--svc-navy-900)}
.dept-hero .slides{height:100%; display:flex; transition:transform var(--dur-slow) var(--ease-out)}
.dept-hero .slide{min-width:100%; height:100%; position:relative}
.dept-hero .slide img{width:100%; height:100%; object-fit:cover; display:block}
/* Fixed breadcrumb chip in the top-left, stationary above the sliding track.
   Backed by a subtle top-gradient shade so it stays readable on any image. */
.dept-hero.slider::before{content:''; position:absolute; inset:0 0 auto 0; height:140px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(19,18,51,.7) 0%, rgba(19,18,51,.35) 55%, transparent 100%)}
.dept-hero-crumbs{position:absolute; top:22px; left:24px; z-index:3;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:13.5px; color:rgba(255,255,255,.92);
  padding:8px 14px; border-radius:999px; background:rgba(19,18,51,.35);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18)}
.dept-hero-crumbs a{color:#fff; text-decoration:none; opacity:.9}
.dept-hero-crumbs a:hover{opacity:1; text-decoration:underline}
.dept-hero-crumbs .sep{color:rgba(255,255,255,.5)}
/* Arrows: vertically dead-centered against the strip */
.dept-hero .arrow{position:absolute; top:50%; margin-top:-24px; width:48px; height:48px;
  transform:none;
  border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:4;
  transition:background .14s}
.dept-hero .arrow:hover{background:rgba(255,255,255,.32); transform:none}
.dept-hero .arrow.prev{left:22px}
.dept-hero .arrow.next{right:22px}
/* Dots: horizontally centered at the bottom */
.dept-hero .dots{position:absolute; left:50%; transform:translateX(-50%); bottom:18px;
  display:flex; justify-content:center; gap:8px; z-index:4}
.dept-hero .dots button{width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.4); cursor:pointer; padding:0}
.dept-hero .dots button.active{background:#fff; width:26px; border-radius:6px}
@media (max-width:640px){
  .dept-hero.slider{height:clamp(320px, 56vh, 480px)}
  .dept-hero .arrow{width:40px; height:40px; margin-top:-20px}
  .dept-hero .arrow.prev{left:12px}
  .dept-hero .arrow.next{right:12px}
  .dept-hero-crumbs{top:14px; left:14px; font-size:12.5px; padding:6px 12px}
  .dept-hero.slider::before{height:110px}
}

/* Department detail — "On this page" auto-TOC in sidebar */
.dept-toc h4{color:var(--svc-navy); font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px}
.dept-toc .side-nav a{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:14px; color:var(--text-body); border-left:3px solid transparent; text-decoration:none;
  line-height:1.35;
}
.dept-toc .side-nav a:hover{background:var(--svc-navy-50); color:var(--svc-navy); border-left-color:var(--svc-saffron)}
/* Smooth scroll + heading offset so links land below the sticky header.
   Matches any …section-title class variant (dept-, comp-, or none). */
html{scroll-behavior:smooth}
h3[class*="section-title"],h2[class*="section-title"]{scroll-margin-top:120px}

.faculty-dept{margin-top:26px}
.faculty-dept:first-child{margin-top:0}
.faculty-dept-title{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600;
  color:var(--svc-navy); background:#fff; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border-subtle); margin:0 0 16px;
}
.faculty-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px}
.faculty-card-v{background:#fff; border:1px solid var(--border-subtle); border-radius:14px; padding:18px; text-align:center}
.faculty-card-v .pf{width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0 auto 12px; background:var(--svc-ink-100); display:block}
.faculty-card-v .pf-blank{display:flex; align-items:center; justify-content:center; color:var(--svc-navy)}
.faculty-card-v .nm{font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--text-strong)}
.faculty-card-v .de{font-size:13.5px; color:var(--svc-teal-600); font-weight:600; margin-top:3px}
.faculty-card-v .ql{font-size:12.5px; color:var(--text-muted); margin-top:4px}
@media (max-width:920px){.faculty-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.faculty-grid{grid-template-columns:repeat(2,1fr)}}

/* Testimonials */
.tst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.tst{background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:26px; display:flex; flex-direction:column; gap:16px}
.tst .quote{font-size:15.5px; line-height:1.65; color:var(--text-body); font-style:italic; flex:1}
.tst .who{display:flex; align-items:center; gap:12px}
.tst .av{width:46px; height:46px; border-radius:50%; object-fit:cover; background:var(--svc-navy-50)}
.tst .who .nm{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-strong)}
.tst .who .ro{font-size:13px; color:var(--text-muted)}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.gallery a{display:block; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-base) var(--ease-out)}
.gallery a:hover img{transform:scale(1.05)}

/* Map */
.map-embed{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border-subtle)}
.map-embed iframe{width:100%; height:360px; border:0; display:block}

/* Announcements ticker */
.ticker{background:var(--svc-saffron-50); border-bottom:1px solid var(--svc-saffron-100)}
.ticker .inner{max-width:var(--container-max); margin:0 auto; padding:8px var(--gutter); display:flex; align-items:center; gap:14px; font-size:14px}
.ticker .tag{background:var(--svc-saffron); color:#3a2400; font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-pill); flex-shrink:0}
.ticker .scroll{overflow:hidden; white-space:nowrap; flex:1}
.ticker .scroll a{color:var(--svc-ink-700); font-weight:500}
.ticker .scroll a:hover{color:var(--svc-navy)}

.hide-sm{display:initial}
.utility{display:flex; align-items:center; gap:10px; flex-shrink:0}

/* Accreditation strip (in-header, 2-row layout) */
.accred-strip{background:#fff; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); padding:14px 0;
  max-height:240px; overflow:hidden;
  transition:max-height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)}
body.scrolled .accred-strip{max-height:0; padding-top:0; padding-bottom:0; opacity:0; border-top-color:transparent; border-bottom-color:transparent; pointer-events:none}
.accred-strip .container{display:flex; flex-direction:column; align-items:center; gap:10px}
.accred-row{width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px 64px}
.accred-item{display:inline-flex; align-items:center; gap:12px; min-width:0}
.accred-item img{height:48px; width:auto; object-fit:contain; flex-shrink:0;
  transition:transform var(--dur-fast) var(--ease-out)}
.accred-item:hover img{transform:scale(1.06)}
.accred-item .accred-text{font-family:var(--font-display); font-size:13.5px; font-weight:500;
  color:var(--text-muted); letter-spacing:.01em; line-height:1.35}
.accred-item .accred-text strong{font-weight:700; color:var(--svc-navy); font-size:14px}
.accred-item.lead img{height:56px}
.accred-item.lead .accred-text{font-size:14.5px}
.accred-item.lead .accred-text strong{font-size:15px}

@media (max-width:860px){
  .accred-row{gap:14px 32px}
  .accred-item img{height:42px}
  .accred-item.lead img{height:48px}
  .accred-item .accred-text{font-size:13px}
}

/* Social connect pills */
.social-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.social-pill{display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:600; font-size:15.5px; color:#fff; box-shadow:var(--shadow-sm); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast)}
.social-pill:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); color:#fff}
.social-pill.yt{background:#ff0000}
.social-pill.fb{background:#1877f2}
.social-pill.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}

/* Voice Matters split: feedback (left) | social (right) */
.vm-split{display:grid; grid-template-columns:minmax(0,1.85fr) 1px minmax(0,1fr); gap:48px; align-items:stretch; position:relative}
.vm-split::before{content:""; grid-column:2; grid-row:1; background:var(--border-subtle); width:1px; align-self:stretch; margin:8px 0}
.vm-split.single{grid-template-columns:1fr; gap:0}
.vm-split.single::before{display:none}
.vm-split .vm-left{grid-column:1}
.vm-split .vm-right{grid-column:3; display:flex; flex-direction:column}
.vm-split.single .vm-left,.vm-split.single .vm-right{grid-column:1}

.feedback-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.feedback-card{display:flex; align-items:center; gap:14px; padding:16px 18px; color:inherit; text-decoration:none}
.feedback-card .icon-tile{flex-shrink:0}
.feedback-card .fb-label{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--text-strong); line-height:1.25}
.feedback-card .fb-arrow{margin-left:auto; color:var(--svc-teal); display:inline-flex; align-items:center}

.social-col{display:flex; flex-direction:column; gap:12px}
.social-col .social-pill{width:100%; justify-content:flex-start; padding:14px 22px}

@media (max-width:960px){
  .vm-split{grid-template-columns:1fr; gap:28px}
  .vm-split::before{display:none}
  .vm-split .vm-left,.vm-split .vm-right{grid-column:1}
  .vm-split .vm-right{border-top:1px solid var(--border-subtle); padding-top:28px}
  .social-col{flex-direction:row; flex-wrap:wrap; gap:12px}
  .social-col .social-pill{width:auto; justify-content:center}
}
@media (max-width:540px){
  .feedback-grid{grid-template-columns:1fr}
  .social-col{flex-direction:column}
  .social-col .social-pill{width:100%}
}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .hero .inner{grid-template-columns:1fr}
  .hero .media{order:-1}
  .split,.split.rev{grid-template-columns:1fr}
  .stats-band .inner{grid-template-columns:repeat(2,1fr); gap:24px}
  .grid-3,.vmm,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .site-footer .top{grid-template-columns:1fr 1fr}
  .page-body{grid-template-columns:1fr}
  .sidebar{position:static; order:-1}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .brand .brand-logo-img{width:52px; height:52px}
  .brand .b-name-full{white-space:normal; overflow-wrap:anywhere; font-size:19px}
}
@media (max-width:720px){
  .nav-bottom,.nav-cta{display:none}
  .menu-btn{display:flex; width:46px; height:46px}
  .brand{gap:11px}
  .brand .brand-logo-img{width:46px; height:46px}
  .brand .b-name-full{font-size:16px; line-height:1.2}
  .brand .b-sub{display:none}
  .topbar .hide-sm{display:none}
  .grid-3,.grid-2,.grid-4,.vmm,.tst-grid{grid-template-columns:1fr}
  .float-stat{display:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .cta-strip{flex-direction:column; align-items:flex-start}
  .site-footer .top{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ============================================================
   IGP Belwandi additions — brand tile logo, trust strip,
   who-we-are band, dept card row, feedback/social rows,
   VMM top-border variants, initials avatar.
   ============================================================ */

/* CSS-only brand logo tile (no image asset). */
.brand-tile{
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(140deg, var(--svc-navy) 0%, var(--svc-navy-700) 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:0 4px 12px rgba(49,46,134,.28); flex-shrink:0;
}
.brand-tile-code{
  font-family:var(--font-display); font-weight:800; font-size:9px; color:#fff;
  letter-spacing:.08em; margin-top:1px; line-height:1;
}
.site-footer .brand-tile{width:54px; height:54px}

/* Slide eyebrow (pill inside hero). */
.slide .caption .slide-eyebrow{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  background:rgba(244,160,36,.18); color:var(--svc-saffron);
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:7px 14px; border-radius:var(--radius-pill);
  margin-bottom:16px;
}
.slide .caption .slide-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--svc-saffron)}
.btn-light-solid{background:#fff; color:var(--svc-ink-900); border-color:#fff}
.btn-light-solid:hover{background:var(--svc-ink-50); color:var(--svc-ink-900); border-color:var(--svc-ink-50)}

/* Trust strip (below hero). */
.trust-strip{background:var(--svc-ink-50); border-bottom:1px solid var(--border-subtle)}
.trust-strip .container{
  padding:16px var(--gutter); display:flex; gap:32px; flex-wrap:wrap; justify-content:center;
}
.trust-strip .trust-item{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--text-muted); font-weight:500;
}
.trust-strip .trust-item i{color:var(--svc-teal)}

/* Vision / Mission / Motto — top-border tinted cards. */
.vmm-card{
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:32px; box-shadow:0 8px 24px rgba(19,18,51,.06); border-top:4px solid var(--svc-navy);
}
.vmm-card h3{margin:0 0 10px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-strong)}
.vmm-card p{margin:0; font-size:15.5px; line-height:1.6; color:var(--text-muted)}
.vmm-card .motto-line{color:var(--text-body); font-weight:600}
.vmm-card .motto-note{margin-top:8px; font-size:14px; color:var(--svc-ink-400)}
.vmm-card .icon-tile{margin-bottom:16px}
.vmm-navy{border-top-color:var(--svc-navy)}
.vmm-teal{border-top-color:var(--svc-teal)}
.vmm-saffron{border-top-color:var(--svc-saffron)}

/* icon-tile variants (small square iconed background). */
.icon-tile{width:50px; height:50px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center}
.icon-tile.navy{background:var(--svc-navy-50); color:var(--svc-navy)}
.icon-tile.teal{background:var(--svc-teal-50); color:var(--svc-teal)}
.icon-tile.saffron{background:var(--svc-saffron-50); color:var(--svc-saffron-600)}
.icon-tile.pink{background:var(--svc-pink-50); color:var(--svc-pink-600)}

/* Who We Are band. */
.who-igp{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.who-media{position:relative}
.who-photo{
  position:relative; width:100%; height:400px; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(140deg,var(--svc-teal-700) 0%,var(--svc-navy-700) 100%);
  display:flex; align-items:center; justify-content:center;
}
.who-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.who-photo .arc{position:absolute; left:-40px; bottom:-40px; width:220px; height:220px; opacity:.14}
.who-photo .who-photo-label{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.85); position:relative; z-index:1;
  font-family:var(--font-display); font-weight:500; font-size:13px;
}
.who-badge{
  position:absolute; right:-20px; bottom:26px;
  background:var(--svc-saffron); color:#3a2400; border-radius:var(--radius-md);
  padding:12px 18px; font-family:var(--font-display); font-weight:700; font-size:14px;
  box-shadow:0 12px 28px rgba(19,18,51,.16);
}
.who-copy{display:flex; flex-direction:column; gap:20px}
.who-copy h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.14; letter-spacing:-.02em; color:var(--text-strong); margin:0}
.who-copy .lede{margin:0; font-size:17px; line-height:1.7; color:var(--text-body)}
.who-checks{display:flex; gap:26px; flex-wrap:wrap; margin-top:4px}
.who-checks span{display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--text-body); font-weight:500}
.who-checks i{color:var(--svc-teal)}

/* Department grid — 2 columns, horizontal row layout inside each card. */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.dept-grid .program-card{padding:0; overflow:hidden; display:block}
.dept-grid .program-card::before{display:none}
.dept-grid .program-card{border-top:5px solid var(--svc-teal)}
.dept-grid .program-card.accent-navy{border-top-color:var(--svc-navy)}
.dept-grid .program-card.accent-saffron{border-top-color:var(--svc-saffron)}
.dept-grid .program-card.accent-pink{border-top-color:var(--svc-pink)}
.dept-grid .program-card.accent-teal{border-top-color:var(--svc-teal)}
.dept-grid .program-card-row{display:flex; gap:18px; align-items:flex-start; padding:28px}
.dept-grid .icon-tile{width:54px; height:54px; flex-shrink:0}
.dept-grid .program-card-body{min-width:0}
.dept-grid .program-card-body h3{margin:0 0 8px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-strong); line-height:1.25}
.dept-grid .program-card-body p{margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--text-muted)}
.dept-grid .program-card-body .meta{display:flex; gap:8px; flex-wrap:wrap}
.admin-note{margin:24px 0 0; font-size:13.5px; color:var(--svc-ink-400); display:inline-flex; align-items:center; gap:7px}

/* Testimonials — quote icon, initials avatar. */
.tst{background:var(--svc-ink-50); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:18px}
.tst .quote{margin:0; font-size:15.5px; line-height:1.65; color:var(--text-body); font-style:normal}
.tst .who{display:flex; align-items:center; gap:12px; margin-top:auto}
.tst .av{width:44px; height:44px; border-radius:50%; object-fit:cover}
.tst .av-initials{
  background:var(--svc-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
}
.tst .nm{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-strong)}
.tst .ro{font-size:13px; color:var(--text-muted)}
.tst-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}

/* Feedback rows (list of large white pills). */
.feedback-list{display:flex; flex-direction:column; gap:12px}
.feedback-row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:16px 20px; text-decoration:none;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast);
}
.feedback-row:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm); color:inherit}
.feedback-row .feedback-left{
  display:flex; align-items:center; gap:13px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--text-strong);
}

/* Social rows (icon-tinted large pills). */
.social-list{display:flex; flex-direction:column; gap:12px}
.social-row{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:16px 20px; text-decoration:none;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast);
}
.social-row:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm); color:inherit}
.social-row .social-badge{
  width:42px; height:42px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.social-row .social-badge svg{width:22px; height:22px}
.social-row .social-badge.yt{background:#fee2e2; color:#dc2626}
.social-row .social-badge.fb{background:#e0e7ff; color:#1d4ed8}
.social-row .social-badge.ig{background:#fce7f3; color:#db2777}
.social-row .social-badge.li{background:#dbeafe; color:#0a66c2}
.social-row .social-copy{display:flex; flex-direction:column; line-height:1.3}
.social-row .social-name{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-strong)}
.social-row .social-note{font-size:13px; color:var(--text-muted)}

/* Split for feedback + follow (matches design). */
.vm-split{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,4vw,3rem)}
.vm-split.single{grid-template-columns:1fr}

/* Real IGP seal logo — vector SVG framed in a circular ring. */
.brand-logo-img{width:66px; height:66px; object-fit:contain; flex-shrink:0;
  border-radius:50%; background:#fff; padding:3px; box-sizing:border-box;
  box-shadow:0 1px 3px rgba(19,18,51,.08)}
.site-footer .brand-logo-img{width:60px; height:60px}

/* ---------------- Page banner (used on Alumni, Blog, and future pages) ---------------- */
.page-banner{
  background:linear-gradient(120deg, var(--svc-navy) 0%, var(--svc-navy-700) 100%);
  position:relative; overflow:hidden;
  padding:clamp(2.5rem, 5vw, 4rem) 0;
}
.page-banner .arc{position:absolute; right:-160px; top:-220px; width:520px; opacity:.09}
.page-banner .container{position:relative; z-index:1}
.page-banner h1{
  margin:10px 0 8px; font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 4vw, 3rem); color:#fff; letter-spacing:-.02em;
}
.page-banner .eyebrow-onDark{color:var(--svc-teal-200)}
.page-banner .eyebrow-onDark::before{background:var(--svc-saffron)}
.page-banner .breadcrumbs{font-size:14.5px; color:rgba(255,255,255,.7)}
.page-banner .breadcrumbs a{color:rgba(255,255,255,.7)}
.page-banner .breadcrumbs a:hover{color:#fff}
.page-banner .breadcrumbs .sep{margin:0 8px; color:rgba(255,255,255,.5)}
.page-banner .breadcrumbs .here{color:#fff}

/* ---------------- Alumni page ---------------- */
.narrow{max-width:820px; margin:0 auto}
.center-copy{text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.center-copy h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.16; letter-spacing:-.02em; color:var(--text-strong); margin:0}
.center-copy .lede{margin:0; font-size:17px; line-height:1.7; color:var(--text-muted)}

.stat-lite-grid{max-width:1000px; margin:40px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.stat-lite{background:var(--svc-ink-50); border:1px solid var(--border-subtle); border-radius:16px; padding:26px; text-align:center}
.stat-lite .num{font-family:var(--font-display); font-weight:800; font-size:32px; line-height:1}
.stat-lite .num.navy{color:var(--svc-navy)}
.stat-lite .num.teal{color:var(--svc-teal)}
.stat-lite .num.saffron{color:var(--svc-saffron-600)}
.stat-lite .lbl{font-size:14.5px; color:var(--text-muted); margin-top:4px}

.dist-heading{margin:0 0 28px; font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.16; letter-spacing:-.02em; color:var(--text-strong)}
.alumni-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.alumni-card{background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; text-decoration:none; color:inherit; transition:transform var(--dur-fast), box-shadow var(--dur-fast)}
.alumni-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.alumni-avatar{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:18px; object-fit:cover}
.alumni-avatar.av-navy{background:var(--svc-navy)}
.alumni-avatar.av-teal{background:var(--svc-teal)}
.alumni-avatar.av-saffron{background:var(--svc-saffron-600)}
.alumni-avatar.av-pink{background:var(--svc-pink-600)}
.alumni-name{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text-strong); line-height:1.2}
.alumni-meta{font-size:13.5px; color:var(--svc-teal); font-weight:600; margin-top:2px}
.alumni-blurb{margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--text-muted)}

.cta-strip.cta-split{display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:center}
.cta-strip.cta-split .btns{justify-content:flex-end}

/* ---------------- Blog page ---------------- */
.blog-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem, 3vw, 2.5rem);
  background:var(--svc-ink-50); border:1px solid var(--border-subtle); border-radius:20px;
  overflow:hidden; box-shadow:0 8px 24px rgba(19,18,51,.06); text-decoration:none; color:inherit;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast);
}
.blog-featured:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); color:inherit}
.blog-featured-cover{position:relative; min-height:280px; display:flex; align-items:center; justify-content:center}
.blog-featured-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.blog-featured-body{padding:clamp(1.5rem, 3vw, 2.5rem); display:flex; flex-direction:column; justify-content:center; gap:14px}
.blog-featured-body h2{margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:-.02em; color:var(--text-strong)}
.blog-featured-body p{margin:0; font-size:15.5px; line-height:1.6; color:var(--text-muted)}
.blog-meta{display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--svc-ink-400)}
.blog-meta span{display:inline-flex; gap:6px; align-items:center}

.blog-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.blog-card{display:block; background:#fff; border:1px solid var(--border-subtle); border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(19,18,51,.06); text-decoration:none; color:inherit; transition:transform var(--dur-fast), box-shadow var(--dur-fast)}
.blog-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); color:inherit}
.blog-card-cover{position:relative; height:170px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.blog-card-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.blog-card-body{padding:22px; display:flex; flex-direction:column; gap:10px}
.blog-card-body h3{margin:0; font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.25; color:var(--text-strong)}
.blog-card-body p{margin:0; font-size:14px; line-height:1.55; color:var(--text-muted)}
.blog-card-date{font-size:13px; color:var(--svc-ink-400); display:inline-flex; gap:6px; align-items:center}

.cat-chip{
  align-self:flex-start; font-family:var(--font-display); font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.06em;
}
.blog-featured-body .cat-chip{font-size:12px; padding:5px 12px}
.cat-chip.cat-navy{color:var(--svc-navy-700); background:var(--svc-navy-50)}
.cat-chip.cat-teal{color:var(--svc-teal-700); background:var(--svc-teal-50)}
.cat-chip.cat-saffron{color:var(--svc-saffron-700); background:var(--svc-saffron-50)}
.cat-chip.cat-pink{color:var(--svc-pink-600); background:var(--svc-pink-50)}

.empty-state{background:var(--svc-ink-50); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:48px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px}
.empty-state h3{margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-strong)}
.empty-state p{margin:0; color:var(--text-muted)}

/* ---------------- Facilities page ---------------- */
.facility-toc{background:#fff; border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:20}
.facility-toc-inner{padding:14px var(--gutter); display:flex; gap:10px; flex-wrap:wrap}
.toc-pill{
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  color:var(--svc-navy-700); background:var(--svc-navy-50);
  padding:9px 15px; border-radius:var(--radius-pill);
  transition:background var(--dur-fast), color var(--dur-fast);
}
.toc-pill:hover{background:var(--svc-navy); color:#fff}

.facility-section{padding:clamp(2.6rem, 5vw, 4rem) 0; scroll-margin-top:80px}
.facility-section.bg-subtle{background:var(--svc-ink-50)}
.facility-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 3vw, 3rem); align-items:center}
.facility-copy h2{margin:8px 0 0; font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.16; letter-spacing:-.02em; color:var(--text-strong)}
.facility-copy .lede{margin:8px 0 0; font-size:16px; line-height:1.7; color:var(--text-muted); max-width:760px}
.facility-features{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px}
.facility-features li{display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--text-body)}
.facility-features i{color:var(--svc-teal); flex-shrink:0}

.facility-visual{
  height:280px; border-radius:16px; border:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.facility-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

@media (max-width:980px){
  .facility-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .facility-toc{position:static}
  .facility-visual{height:200px}
}

/* ---------------- Info-page pattern (Faculty/Placement/Student Corner/Research/Gallery/Mandatory Disclosure) ---------------- */
.info-section{padding:clamp(2.6rem, 5vw, 4rem) 0; scroll-margin-top:80px}
.info-section.bg-subtle{background:var(--svc-ink-50)}
.info-section-head{display:flex; flex-direction:column; gap:6px; margin-bottom:24px}
.info-section-head h2{margin:8px 0 0; font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.16; letter-spacing:-.02em; color:var(--text-strong)}
.info-lede{margin:8px 0 20px; font-size:16px; line-height:1.7; color:var(--text-muted); max-width:760px}

/* Stats row */
.info-stats{margin-top:20px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px}
.info-stat{text-align:center}
.info-stat .num{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 3.4vw, 2.8rem); line-height:1; color:var(--svc-navy)}
.info-stat .lbl{font-size:14.5px; color:var(--text-muted); margin-top:6px}

/* Cards */
.info-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.info-card{background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:24px; box-shadow:0 8px 24px rgba(19,18,51,.05)}
.info-card .icon-tile{width:48px; height:48px; margin-bottom:14px}
.info-card-title{font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--text-strong); margin-bottom:6px}
.info-card p{margin:0; font-size:14px; line-height:1.55; color:var(--text-muted)}

/* Download tiles */
.info-downloads{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.download-tile{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--border-subtle); border-radius:14px;
  padding:16px 20px; text-decoration:none; color:inherit;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast);
}
.download-tile:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm); color:inherit}
.download-tile .download-icon{
  width:42px; height:42px; border-radius:12px; background:var(--svc-navy-50);
  color:var(--svc-navy); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.download-tile .download-meta{flex:1; display:flex; flex-direction:column; line-height:1.3}
.download-tile .download-title{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-strong)}
.download-tile .download-sub{font-size:13px; color:var(--text-muted); margin-top:2px}

/* Gallery tiles */
.info-gallery{display:grid; gap:20px}
.info-gallery.cols-1{grid-template-columns:1fr}
.info-gallery.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.info-gallery.cols-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.gallery-tile{
  height:200px; border-radius:16px; border:1px solid var(--border-subtle);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:rgba(255,255,255,.9); font-family:var(--font-display); font-weight:500; font-size:13.5px;
  text-align:center; padding:0 12px; position:relative; overflow:hidden; text-decoration:none;
}
.info-gallery.cols-1 .gallery-tile{height:340px}
.gallery-tile.has-img{background-size:cover; background-position:center; color:#fff}
.gallery-tile.has-img::before{
  content:''; position:absolute; inset:0; border-radius:15px;
  background:linear-gradient(180deg, rgba(19,18,51,.05) 40%, rgba(19,18,51,.75) 100%);
}
.gallery-tile.has-img > *{position:relative; z-index:1}
.gallery-tile.video-tile .video-play{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.gallery-tile.video-tile{cursor:pointer; transition:transform .18s ease}
.gallery-tile.video-tile:hover{transform:translateY(-2px)}
.gallery-tile.video-tile:hover .video-play{background:rgba(255,255,255,.3)}

/* Full-width tour embed inside cols-1 grid */
.tour-embed{position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(19,18,51,.14); background:#000}
.tour-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Recruiter tiles (logo placeholders) */
.info-recruiters{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.recruiter-tile{
  background:#fff; border:1px solid var(--border-subtle); border-radius:12px;
  height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--text-body);
  padding:8px 10px; text-align:center;
}
.recruiter-tile .recruiter-logo{max-width:80%; max-height:44px; object-fit:contain; display:block}

/* Info-section table (Placement Data, etc.) */
.info-table-wrap{overflow-x:auto; border:1px solid var(--border-subtle); border-radius:12px; background:#fff}
.info-table{width:100%; border-collapse:collapse; font-size:14.5px}
.info-table th{text-align:left; font-family:var(--font-display); font-weight:700; color:var(--svc-navy);
  padding:12px 16px; background:var(--svc-navy-50, #eceaf6); border-bottom:1px solid var(--border-subtle);
  font-size:13px; text-transform:uppercase; letter-spacing:.04em}
.info-table td{padding:12px 16px; border-bottom:1px solid var(--border-subtle); color:var(--text-body); vertical-align:top}
.info-table tr:last-child td{border-bottom:none}
.info-table tbody tr:hover td{background:var(--svc-ink-50, #f5f6fa)}
@media (max-width:640px){
  .info-table{font-size:13.5px}
  .info-table th,.info-table td{padding:10px 12px}
}

/* CTA row (single button) */
.info-cta-row{display:flex}

/* ---------------- Feedback form (student / parent) ---------------- */
.fb-form{background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:26px; box-shadow:var(--shadow-md)}
.fb-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px}
.fb-field{display:flex; flex-direction:column; gap:6px}
.fb-field label{font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--text-strong)}
.fb-field input[type=text],.fb-field input[type=email],.fb-field input[type=tel],
.fb-field select,.fb-field textarea{
  width:100%; padding:10px 14px; border:1.5px solid var(--border-strong); border-radius:10px;
  font-family:var(--font-body); font-size:15px; color:var(--text-strong); background:#fff;
}
.fb-field input:focus,.fb-field select:focus,.fb-field textarea:focus{
  outline:none; border-color:var(--svc-navy); box-shadow:0 0 0 3px rgba(49,46,134,.15)
}
.fb-field textarea{resize:vertical; min-height:120px}
.fb-rating{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.fb-star{cursor:pointer}
.fb-star input{position:absolute; opacity:0; pointer-events:none}
.fb-star span{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px;
  border:1.5px solid var(--border-strong); color:var(--text-muted);
  font-family:var(--font-display); font-weight:600; font-size:14px; transition:.14s;
}
.fb-star:hover span{border-color:var(--svc-navy); color:var(--svc-navy)}
.fb-star input:checked + span{background:var(--svc-saffron); border-color:var(--svc-saffron); color:#fff}
.fb-alert{padding:12px 16px; border-radius:12px; margin-bottom:18px; font-weight:500}
.fb-alert.err{background:#fdeef0; color:#c0392b; border:1px solid #f7c4c7}
@media (max-width:640px){.fb-grid{grid-template-columns:1fr}}

/* ---------------- Admissions page ---------------- */
.adm-steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px}
.adm-step{background:var(--svc-ink-50); border:1px solid var(--border-subtle); border-radius:18px; padding:26px}
.adm-step-num{
  width:44px; height:44px; border-radius:12px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:18px; margin-bottom:14px;
}
.adm-step-num.tone-navy{background:var(--svc-navy)}
.adm-step-num.tone-teal{background:var(--svc-teal)}
.adm-step-num.tone-saffron{background:var(--svc-saffron-600)}
.adm-step h3{margin:0 0 8px; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text-strong)}
.adm-step p{margin:0; font-size:14.5px; line-height:1.55; color:var(--text-muted)}

.adm-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem, 4vw, 3rem); align-items:start}
.adm-panel{background:#fff; border:1px solid var(--border-subtle); border-radius:18px; box-shadow:0 8px 24px rgba(19,18,51,.06); overflow:hidden}
.adm-panel-bar{height:5px; background:var(--svc-navy)}
.adm-panel-body{padding:28px}
.adm-panel-body h3{margin:0 0 6px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-strong)}
.adm-panel-sub{margin:0 0 18px; font-size:14.5px; color:var(--text-muted)}
.adm-programme-list{display:flex; flex-direction:column}
.adm-programme-row{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--border-subtle); font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-strong)}
.adm-programme-row.last{border-bottom:none}
.adm-programme-row .seats{font-size:14px; color:var(--svc-teal)}
.adm-info-note{margin-top:22px; padding:16px 18px; background:var(--svc-navy-50); border-radius:12px; display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.55; color:var(--svc-navy-700)}
.adm-info-note i{color:var(--svc-navy); flex-shrink:0}

.adm-side{display:flex; flex-direction:column; gap:18px}
.adm-side-card{background:#fff; border:1px solid var(--border-subtle); border-radius:18px; box-shadow:0 8px 24px rgba(19,18,51,.06); padding:24px}
.adm-side-card h3{margin:0 0 16px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text-strong)}
.adm-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.adm-checks li{display:flex; gap:11px; align-items:center; font-size:14.5px; color:var(--text-body)}
.adm-checks i{color:var(--svc-teal); flex-shrink:0}

.adm-dates{background:linear-gradient(120deg, var(--svc-teal), var(--svc-teal-700)); border-radius:18px; padding:24px; color:#fff}
.adm-dates h3{margin:0 0 14px; font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff}
.adm-date-row{display:flex; justify-content:space-between; align-items:center; font-size:14.5px; color:rgba(255,255,255,.85); padding:4px 0}
.adm-date-row .date-val{font-family:var(--font-display); font-weight:600; color:#fff}

.cta-strip.cta-navy{background:linear-gradient(120deg, var(--svc-navy), var(--svc-navy-700))}

/* ---------------- Contact — Committees ---------------- */
.committees-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px}
.committee-card{background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:22px; box-shadow:0 8px 24px rgba(19,18,51,.05)}
.committee-card .icon-tile{width:46px; height:46px; margin-bottom:14px}
.committee-title{font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--text-strong); line-height:1.3; margin-bottom:6px}
.committee-card p{margin:0; font-size:13.5px; line-height:1.55; color:var(--text-muted)}

/* Responsive tweaks for IGP additions. */
@media (max-width:980px){
  .who-igp{grid-template-columns:1fr}
  .grid-2, .dept-grid{grid-template-columns:1fr}
  .vm-split{grid-template-columns:1fr}
  .tst-grid{grid-template-columns:1fr}
  .vmm{grid-template-columns:1fr}
  .alumni-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-lite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-strip.cta-split{grid-template-columns:1fr}
  .cta-strip.cta-split .btns{justify-content:flex-start}
  .blog-featured{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-recruiters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .info-gallery.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-gallery.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-grid{grid-template-columns:1fr}
  .committees-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .who-photo{height:280px}
  .who-badge{display:none}
  .trust-strip .container{gap:14px 22px}
  .dept-grid .program-card-row{padding:22px; gap:14px}
  .alumni-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .info-cards{grid-template-columns:1fr}
  .info-downloads{grid-template-columns:1fr}
  .info-recruiters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-gallery.cols-4, .info-gallery.cols-3{grid-template-columns:1fr}
  .adm-steps{grid-template-columns:1fr}
  .committees-grid{grid-template-columns:1fr}
}

