/* ===================== DESIGN TOKENS ===================== */
:root{
  --navy-950:#081b2c;
  --navy-900:#0a2540;
  --navy-800:#0d3358;
  --navy-700:#12406e;
  --blue-600:#1b5a94;
  --blue-500:#2872b3;
  --saffron:#e58b1f;
  --saffron-soft:#f6a53c;
  --green-700:#0d7a3e;
  --green-600:#128a46;
  --gold:#b8912c;
  --ink-900:#152233;
  --ink-700:#374757;
  --ink-500:#5c7085;
  --line:#dde5ec;
  --line-soft:#eaf0f5;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --surface-tint:#f7fafc;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --shadow-1:0 1px 2px rgba(10,37,64,.06), 0 1px 1px rgba(10,37,64,.04);
  --shadow-2:0 8px 24px -8px rgba(10,37,64,.18);
  --shadow-3:0 20px 48px -12px rgba(10,37,64,.28);
  --fs-scale:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.reduce-motion, html.reduce-motion *{scroll-behavior:auto !important; animation-duration:.001s !important; transition-duration:.001s !important;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink-900);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size:calc(16px * var(--fs-scale));
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{font-family:'Hind',system-ui,sans-serif;}
.container{width:100%;max-width:1240px;margin:0 auto;padding-left:20px;padding-right:20px;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--saffron-soft); outline-offset:2px;}
.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--navy-900); color:#fff; padding:10px 16px;
  border-radius:6px; z-index:999; transition:top .2s ease; font-weight:600; font-size:14px;
}
.skip-link:focus{top:12px;}

/* ===================== TRICOLOUR STRIP ===================== */
.tricolor-strip{height:5px; width:100%; background:linear-gradient(90deg,var(--saffron) 0 33.3%, #ffffff 33.3% 66.6%, var(--green-700) 66.6% 100%);}

/* ===================== TOP BAR ===================== */
.topbar{background:var(--navy-950); color:#cfe0f0; font-size:13px;}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:7px 0; flex-wrap:wrap;}
.topbar-left{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.topbar-left a{opacity:.9; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.topbar-left a:hover{color:#fff; opacity:1;}
.topbar-right{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.a11y-group{display:flex; align-items:center; gap:6px; border-left:1px solid rgba(255,255,255,.18); padding-left:14px;}
.a11y-btn{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16);
  width:26px;height:26px;border-radius:5px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; line-height:1;
}
.a11y-btn:hover{background:rgba(255,255,255,.18);}
.lang-select{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16);
  border-radius:5px; padding:4px 8px; font-size:12.5px;
}
.lang-select option{color:#0a2540;}

/* ===================== HEADER (sticky, centered logo, shrinks on scroll) ===================== */
.site-header-wrap{
  position:sticky; top:0; z-index:100;
  background:var(--surface);
  box-shadow:var(--shadow-1);
  transition:box-shadow .3s ease;
}
.site-header-wrap.scrolled{
  box-shadow:0 6px 24px -8px rgba(10,37,64,.28);
}
.site-header{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);
  transition:padding .3s cubic-bezier(.4,0,.2,1);
}
.header-row{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:16px 0;
  transition:padding .3s cubic-bezier(.4,0,.2,1);
}
.brand{
  display:flex; align-items:center; gap:14px; min-width:0; text-align:left;
  margin:0 auto;
}
.logo-mark{flex-shrink:0; line-height:0; transition:height .3s cubic-bezier(.4,0,.2,1);}
.logo-mark svg{display:block; height:100%; width:auto;}
.emblem{
  width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #163f66, var(--navy-900) 70%);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:2px solid var(--gold); box-shadow:inset 0 0 0 2px rgba(184,145,44,.35);
  transition:width .3s ease, height .3s ease;
}
.emblem i{color:var(--saffron-soft); font-size:22px;}
.brand-text{min-width:0;}
.brand-text .dept{
  font-size:11.5px; letter-spacing:.03em; color:var(--ink-500); font-weight:600; margin:0 0 3px;
  transition:max-height .3s ease, opacity .3s ease, margin .3s ease;
  max-height:20px; opacity:1; overflow:hidden;
}
.brand-text h1{font-family:'Hind',serif; font-size:21px; line-height:1.2; margin:0; color:var(--navy-900); font-weight:700; white-space:nowrap; transition:font-size .3s ease;}
.brand-text .sub{font-size:13px; color:var(--saffron); font-weight:700; margin-top:3px; letter-spacing:.01em; transition:font-size .3s ease;}
.header-right{
  display:flex; align-items:center; gap:14px;
  position:absolute; right:0; top:50%; transform:translateY(-50%);
}
.header-side-emblem{display:flex; align-items:center;}
.header-side-emblem img, .header-side-emblem svg{height:42px; width:auto; transition:height .3s ease;}
.header-actions{display:flex; align-items:center; gap:10px;}

/* ---- shrunk / scrolled state ---- */
.site-header-wrap.scrolled .header-row{padding:8px 0;}
.site-header-wrap.scrolled .logo-mark{height:36px;}
.site-header-wrap.scrolled .brand-text .dept{max-height:0; opacity:0; margin:0;}
.site-header-wrap.scrolled .brand-text h1{font-size:17px;}
.site-header-wrap.scrolled .brand-text .sub{font-size:11.5px;}
.site-header-wrap.scrolled .header-side-emblem img,
.site-header-wrap.scrolled .header-side-emblem svg{height:30px;}
.site-header-wrap.scrolled .emblem{width:38px; height:38px;}
.site-header-wrap.scrolled .emblem i{font-size:16px;}
.site-header-wrap.scrolled .nav-list>li>a,
.site-header-wrap.scrolled .nav-list>li>button.nav-top-link{padding-top:9px; padding-bottom:9px;}

@media (max-width:980px){
  .header-side-emblem{display:none;}
  .header-row{justify-content:flex-start;}
  .brand{margin:0;}
  .header-right{position:static; transform:none; margin-left:auto;}
}
@media (max-width:560px){
  .brand-text h1{font-size:16.5px; white-space:normal;}
  .logo-mark{height:40px;}
  .site-header-wrap.scrolled .logo-mark{height:32px;}
}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px;
  font-weight:600; font-size:14.5px; border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--navy-900); color:#fff; box-shadow:var(--shadow-1);}
.btn-primary:hover{background:var(--navy-800); box-shadow:var(--shadow-2);}
.btn-outline{background:#fff; color:var(--navy-900); border-color:var(--line);}
.btn-outline:hover{border-color:var(--navy-700); background:var(--surface-tint);}
.btn-saffron{background:var(--saffron); color:#fff;}
.btn-saffron:hover{background:#cf7c17;}
.btn-ghost{background:transparent; color:var(--navy-900);}
.btn-sm{padding:7px 13px; font-size:13px; border-radius:6px;}
.hamburger{
  display:none; width:44px; height:44px; border-radius:8px; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; font-size:19px; color:var(--navy-900);
}
@media (max-width:560px){ .hide-sm{display:none;} }

/* ===================== NAV (centered under logo) ===================== */
.navbar{background:var(--navy-900); transition:padding .3s ease;}
.navbar-inner{display:flex; align-items:stretch; justify-content:center;}
.nav-list{display:flex; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center;}
.nav-list>li{flex:0 0 auto; position:relative;}
.nav-list>li>a, .nav-list>li>button.nav-top-link{
  display:flex; align-items:center; gap:5px; color:#e7eef5; padding:14px 13px; font-size:14px;
  font-weight:600; border-bottom:3px solid transparent; background:none; border-top:none; border-left:none; border-right:none;
  white-space:nowrap; transition:padding .3s cubic-bezier(.4,0,.2,1), background .15s ease, color .15s ease;
}
.nav-list>li>a:hover, .nav-list>li>button.nav-top-link:hover, .nav-list>li.open>button.nav-top-link{
  background:rgba(255,255,255,.06); border-bottom-color:var(--saffron-soft); color:#fff;
}
.dropdown{
  position:absolute; top:100%; left:0; min-width:250px; background:#fff; border-radius:0 0 10px 10px;
  box-shadow:var(--shadow-3); padding:8px; display:none; z-index:50; border-top:3px solid var(--saffron);
}
.nav-list>li.open .dropdown{display:block;}
.dropdown a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:7px; color:var(--ink-900); font-size:14px; font-weight:500;}
.dropdown a:hover{background:var(--surface-tint); color:var(--navy-900);}
.dropdown a i{color:var(--blue-500); width:16px; text-align:center;}
.nav-caret{font-size:10px; margin-top:1px; transition:transform .15s ease;}
.nav-list>li.open .nav-caret{transform:rotate(180deg);}

/* mobile nav */
@media (max-width:980px){
  .hamburger{display:inline-flex;}
  .navbar{display:none;}
  .navbar.mobile-open{display:block; position:fixed; inset:0; top:0; z-index:200; overflow-y:auto; background:var(--navy-950);}
  .navbar.mobile-open .navbar-inner{flex-direction:column; padding:0; overflow-x:visible; overflow-y:visible;}
  .mobile-nav-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.12);}
  .mobile-nav-head span{color:#fff; font-weight:700; font-family:'Hind',sans-serif; font-size:17px;}
  .mobile-close{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center;}
  .nav-list{flex-direction:column; width:100%; min-width:0;}
  .nav-list>li{border-bottom:1px solid rgba(255,255,255,.08); width:100%; flex:none;}
  .nav-list>li>a, .nav-list>li>button.nav-top-link{width:100%; justify-content:space-between; padding:15px 16px; border-bottom:none;}
  .dropdown{position:static; box-shadow:none; border-radius:0; background:rgba(255,255,255,.04); display:none; border-top:none; padding:4px 8px 10px 8px;}
  .nav-list>li.open .dropdown{display:block;}
  .dropdown a{color:#dce8f4;}
  .dropdown a:hover{background:rgba(255,255,255,.08); color:#fff;}
  .dropdown a i{color:var(--saffron-soft);}
}

/* ===================== TICKER ===================== */
.ticker-bar{background:var(--saffron); display:flex; align-items:stretch; overflow:hidden;}
.ticker-label{background:var(--navy-950); color:#fff; font-weight:700; font-size:13px; padding:9px 18px; display:flex; align-items:center; gap:8px; flex-shrink:0; letter-spacing:.02em;}
.ticker-viewport{flex:1; overflow:hidden; position:relative; display:flex; align-items:center;}
.ticker-track{display:flex; gap:60px; white-space:nowrap; animation:ticker-scroll 32s linear infinite; padding-left:100%;}
.ticker-track span{color:#3a2405; font-weight:600; font-size:13.5px; display:inline-flex; align-items:center; gap:8px;}
@keyframes ticker-scroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
.ticker-bar:hover .ticker-track{animation-play-state:paused;}

/* ===================== HERO SLIDER ===================== */
.hero{position:relative; height:min(78vh, 620px); min-height:380px; overflow:hidden; background:var(--navy-950); animation:heroFadeIn .9s cubic-bezier(.22,.8,.28,1);}
@keyframes heroFadeIn{ from{opacity:0; transform:scale(1.02);} to{opacity:1; transform:scale(1);} }
html.reduce-motion .hero{animation:none;}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; background-size:cover; background-position:center;}
.hero-slide.active{opacity:1;}
.hero-slide::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,27,44,.25) 0%, rgba(8,27,44,.55) 60%, rgba(8,27,44,.86) 100%);}
.hero-content{position:absolute; left:0; right:0; bottom:0; padding:0 0 44px; color:#fff; z-index:5;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(4px); padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:.03em; margin-bottom:14px;}
.hero-title{font-size:clamp(28px,4.4vw,48px); line-height:1.1; font-weight:700; max-width:720px; margin:0 0 12px; text-shadow:0 2px 18px rgba(0,0,0,.35);}
.hero-desc{font-size:15.5px; max-width:560px; color:#e7eef5; margin:0 0 22px; line-height:1.55;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px;height:46px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); color:#fff; display:flex; align-items:center; justify-content:center; z-index:6; backdrop-filter:blur(3px); transition:background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);}
.hero-nav:hover{background:rgba(255,255,255,.28); transform:translateY(-50%) scale(1.08);}
.hero-nav:hover{background:rgba(255,255,255,.28);}
.hero-nav.prev{left:20px;} .hero-nav.next{right:20px;}
.hero-dots{position:absolute; bottom:16px; right:24px; display:flex; gap:8px; z-index:6;}
.hero-dots button{width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,.45); border:none; padding:0;}
.hero-dots button.active{background:var(--saffron-soft); width:24px; border-radius:5px;}
@media (max-width:600px){ .hero-nav{width:36px;height:36px; font-size:13px;} .hero{height:64vh;} }

/* ===================== QUICK SERVICE STRIP ===================== */
.quick-strip{background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 6px 18px -12px rgba(10,37,64,.25);}
.quick-strip-inner{display:grid; grid-template-columns:repeat(6,1fr); gap:0;}
.quick-strip-item{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:18px 8px;
  border-right:1px solid var(--line-soft); transition:background .15s ease;
}
.quick-strip-item:last-child{border-right:none;}
.quick-strip-item:hover{background:var(--surface-tint);}
.quick-strip-item .qi-icon{width:44px;height:44px;border-radius:12px; background:var(--navy-900); color:#fff; display:flex;align-items:center;justify-content:center; font-size:18px;}
.quick-strip-item:nth-child(2) .qi-icon{background:var(--green-700);}
.quick-strip-item:nth-child(3) .qi-icon{background:var(--saffron);}
.quick-strip-item:nth-child(4) .qi-icon{background:var(--blue-600);}
.quick-strip-item:nth-child(5) .qi-icon{background:var(--gold);}
.quick-strip-item:nth-child(6) .qi-icon{background:#7a2e2e;}
.quick-strip-item span{font-size:12.5px; font-weight:600; color:var(--ink-700); max-width:110px;}
@media (max-width:900px){ .quick-strip-inner{grid-template-columns:repeat(3,1fr);} .quick-strip-item:nth-child(3){border-right:none;} }
@media (max-width:480px){ .quick-strip-inner{grid-template-columns:repeat(2,1fr);} .quick-strip-item:nth-child(3){border-right:1px solid var(--line-soft);} .quick-strip-item:nth-child(2n){border-right:none;} }

/* ===================== SECTION SHELL ===================== */
.section{padding:64px 0;}
.section-alt{background:var(--surface);}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--saffron); margin-bottom:8px;}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--saffron); display:inline-block;}
.section-title{font-size:clamp(22px,2.6vw,30px); font-weight:700; color:var(--navy-900); margin:0;}
.section-desc{color:var(--ink-500); font-size:14.5px; max-width:560px; margin-top:6px;}
.chakra-divider{display:flex; align-items:center; gap:10px; margin:0 0 30px;}

/* Compact variant: applied only to News & Notifications, Tender Notices, and the
   Photo Gallery preview — trims the excess air above/below/between these three
   sections without touching padding anywhere else on the page. */
.section-compact{padding:16px 0;}
.section-compact .section-head{margin-bottom:10px;}
.chakra-divider .line{height:1px; background:var(--line); flex:1;}
.chakra-divider i{color:var(--blue-500); font-size:16px;}

/* ===================== CARDS ===================== */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-1); transition:box-shadow .2s ease, transform .2s ease;}
.card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px);}
.card-accent{border-left:4px solid var(--navy-800);}
.grid{display:grid; gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;} }

/* News cards */
.news-card{padding:20px; display:flex; flex-direction:column; gap:10px;}
.news-date{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--green-700); background:#eaf7ee; padding:4px 10px; border-radius:999px; width:fit-content;}
.news-card h3{font-size:16.5px; margin:0; color:var(--navy-900); line-height:1.35;}
.news-card p{font-size:13.8px; color:var(--ink-500); margin:0; line-height:1.55;}
.news-link{font-size:13.5px; font-weight:700; color:var(--blue-600); display:inline-flex; align-items:center; gap:6px; margin-top:auto;}
.news-link i{font-size:12px; transition:transform .15s ease;}
.news-link:hover i{transform:translateX(3px);}

/* Notices list */
.notice-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:#fff;}
.notice-row{display:flex; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line-soft);}
.notice-row:last-child{border-bottom:none;}
.notice-row:hover{background:var(--surface-tint);}
.notice-date{flex-shrink:0; width:64px; text-align:center; background:var(--navy-900); color:#fff; border-radius:8px; padding:7px 4px;}
.notice-date .d{font-size:18px; font-weight:700; line-height:1;}
.notice-date .m{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; opacity:.85;}
.notice-body{flex:1; min-width:0;}
.notice-body h4{margin:0 0 3px; font-size:14.5px; color:var(--ink-900); font-weight:600;}
.notice-body span{font-size:12.5px; color:var(--ink-500);}
.notice-actions{display:flex; gap:8px; flex-shrink:0;}
.icon-btn{width:36px;height:36px;border-radius:7px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--navy-800); font-size:13.5px;}
.icon-btn:hover{background:var(--navy-900); color:#fff; border-color:var(--navy-900);}
@media (max-width:600px){ .notice-row{flex-wrap:wrap;} .notice-body{width:100%; order:2;} .notice-actions{order:3; margin-left:78px;} }

/* Tabs */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; flex-wrap:wrap;}
.tab-btn{padding:10px 16px; font-size:14px; font-weight:600; color:var(--ink-500); border-bottom:3px solid transparent; background:none; border-top:none;border-left:none;border-right:none;}
.tab-btn.active{color:var(--navy-900); border-bottom-color:var(--saffron);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Stats strip */
.stats-strip{background:var(--navy-900); border-radius:var(--radius-lg); padding:34px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; color:#fff; position:relative; overflow:hidden;}
.stats-strip::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(255,153,51,.18), transparent 55%);}
.stat-item{position:relative; text-align:center;}
.stat-item .num{font-family:'Hind',sans-serif; font-size:clamp(26px,3vw,36px); font-weight:700; color:var(--saffron-soft);}
.stat-item .lbl{font-size:12.5px; color:#c7d7e6; margin-top:4px;}
@media (max-width:768px){ .stats-strip{grid-template-columns:repeat(2,1fr);} }

/* Table */
.gov-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.gov-table thead th{background:var(--navy-900); color:#fff; text-align:left; font-size:12.5px; letter-spacing:.02em; padding:12px 16px; font-weight:600;}
.gov-table tbody td{padding:13px 16px; font-size:13.8px; border-bottom:1px solid var(--line-soft); color:var(--ink-700);}
.gov-table tbody tr:last-child td{border-bottom:none;}
.gov-table tbody tr:hover{background:var(--surface-tint);}
.table-scroll{width:100%; overflow-x:auto; border-radius:var(--radius-md);}
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700;}
.badge-open{background:#eaf7ee; color:var(--green-700);}
.badge-closed{background:#fdeaea; color:#a33434;}
.badge-new{background:#fff3e2; color:#a3610f;}

/* Officials */
.official-card{padding:22px; text-align:center;}
.official-photo{width:88px;height:88px;border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--navy-800),var(--blue-600)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; font-weight:700; font-family:'Hind',sans-serif; border:3px solid #fff; box-shadow:0 0 0 3px var(--line);}
.official-card h3{margin:0 0 2px; font-size:15.5px; color:var(--navy-900);}
.official-card .role{font-size:12.5px; color:var(--saffron); font-weight:700; margin-bottom:10px;}
.official-card .meta{font-size:12.5px; color:var(--ink-500); display:flex; flex-direction:column; gap:4px;}

/* Steps */
.step-list{counter-reset:step; display:flex; flex-direction:column; gap:0;}
.step-item{display:flex; gap:18px; position:relative; padding-bottom:30px;}
.step-item:last-child{padding-bottom:0;}
.step-item::before{counter-increment:step; content:counter(step); flex-shrink:0; width:38px;height:38px;border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; z-index:1;}
.step-item:not(:last-child)::after{content:""; position:absolute; left:19px; top:38px; bottom:0; width:2px; background:var(--line);}
.step-body h4{margin:0 0 4px; color:var(--navy-900); font-size:15px;}
.step-body p{margin:0; font-size:13.8px; color:var(--ink-500); line-height:1.6;}

/* Downloads */
.dl-row{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;}
.dl-row + .dl-row{margin-top:10px;}
.dl-icon{width:40px;height:40px;border-radius:8px; background:#fdeaea; color:#a33434; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.dl-row .name{font-weight:600; font-size:14px; color:var(--ink-900);}
.dl-row .size{font-size:12px; color:var(--ink-500);}

/* Gallery */
/* Photo Gallery: modern responsive carousel.
   .gallery-item keeps its existing look (rounded corners, aspect-ratio,
   object-fit cover, hover zoom) — only the outer layout changed from a
   static grid to a sliding track. */
.gallery-carousel{ position:relative; --gallery-visible:4; }
.gallery-viewport{ overflow:hidden; }
.gallery-track{ display:flex; gap:16px; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.gallery-track .gallery-item{
  flex:0 0 calc((100% - (var(--gallery-visible) - 1) * 16px) / var(--gallery-visible));
}
@media (max-width:900px){ .gallery-carousel{ --gallery-visible:3; } }
@media (max-width:600px){ .gallery-carousel{ --gallery-visible:2; } }
@media (max-width:420px){ .gallery-carousel{ --gallery-visible:1; } }

.gallery-item{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; background:var(--navy-800);}
.gallery-item img{width:100%;height:100%;object-fit:cover; transition:transform .35s ease;}
.gallery-item:hover img{transform:scale(1.07);}
.gallery-item .cap{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(0deg, rgba(8,27,44,.85), transparent); color:#fff; font-size:12px; font-weight:600; padding:20px 12px 10px;}

.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2); cursor:pointer; z-index:2; font-size:15px;
  transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.gallery-arrow:hover{ background:var(--navy-900); color:#fff; transform:translateY(-50%) scale(1.07); }
.gallery-arrow:focus-visible{ outline:2px solid var(--saffron); outline-offset:2px; }
.gallery-arrow-prev{ left:-8px; }
.gallery-arrow-next{ right:-8px; }
@media (max-width:700px){
  .gallery-arrow{ width:36px; height:36px; font-size:12px; }
  .gallery-arrow-prev{ left:4px; }
  .gallery-arrow-next{ right:4px; }
}

.gallery-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:8px; }
.gallery-dots button{
  width:9px; height:9px; border-radius:50%; background:var(--line); border:none; padding:0;
  cursor:pointer; transition:background .25s ease, width .25s ease;
}
.gallery-dots button.active{ background:var(--saffron); width:24px; border-radius:5px; }
.gallery-dots button:focus-visible{ outline:2px solid var(--saffron); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .gallery-track{ transition:none !important; }
}
.video-card{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/9; background:var(--navy-950);}
.video-card img{width:100%;height:100%;object-fit:cover; opacity:.75;}
.video-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.video-play span{width:56px;height:56px;border-radius:50%; background:rgba(255,255,255,.92); color:var(--navy-900); display:flex; align-items:center; justify-content:center; font-size:20px;}
.video-title{position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(0deg, rgba(8,27,44,.9), transparent); color:#fff; font-size:13.5px; font-weight:600;}

/* ===================== ENQUIRY (modern split card) ===================== */
.enquiry-card{
  display:grid; grid-template-columns:0.85fr 1.15fr; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-2); border:1px solid var(--line);
}
.enquiry-side{
  position:relative; background:linear-gradient(155deg,var(--navy-950) 0%, var(--navy-800) 100%);
  color:#fff; padding:40px 36px; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.enquiry-side::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 12%, rgba(255,153,51,.2), transparent 55%); pointer-events:none;}
.enquiry-side .eyebrow{color:var(--saffron-soft);}
.enquiry-side .eyebrow::before{background:var(--saffron-soft);}
.enquiry-side h2{position:relative; font-family:'Hind',sans-serif; font-size:clamp(20px,2.4vw,26px); color:#fff; margin:2px 0 10px;}
.enquiry-side p{position:relative; font-size:13.8px; line-height:1.75; color:#c7d7e6; margin:0 0 22px; max-width:340px;}
.enquiry-info{position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.enquiry-info li{display:flex; align-items:center; gap:12px; font-size:13.5px; color:#dbe6f0;}
.enquiry-info li i{width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--saffron-soft); font-size:13px; flex-shrink:0;}

.enquiry-form-panel{background:var(--surface); padding:38px 40px;}
.input-group{position:relative; margin-bottom:16px;}
.input-group i{
  position:absolute; left:14px; top:22px; transform:translateY(-50%); color:var(--ink-500); font-size:14px;
  transition:color .2s ease; pointer-events:none;
}
.input-group textarea ~ i, .input-group.textarea-group i{top:22px; transform:none;}
.input-group input, .input-group textarea{
  width:100%; padding:12px 14px 12px 42px; border-radius:10px; border:1.5px solid var(--line);
  font-size:14px; font-family:inherit; color:var(--ink-900); background:#fbfcfd;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.input-group textarea{padding-top:14px; resize:vertical; min-height:90px;}
.input-group input:focus, .input-group textarea:focus{
  border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(40,114,179,.13); outline:none; background:#fff;
}
.input-group:focus-within i{color:var(--blue-600);}
.enquiry-form-panel label{font-size:12.5px; font-weight:600; color:var(--ink-500); display:block; margin:0 0 6px 2px;}

.btn-enquiry-submit{
  width:100%; justify-content:center; border:none; cursor:pointer;
  background:linear-gradient(90deg, var(--navy-900) 0%, var(--blue-600) 50%, var(--navy-900) 100%);
  background-size:200% 100%; background-position:0% 0%;
  transition:background-position .5s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-enquiry-submit:hover{background-position:100% 0%; box-shadow:var(--shadow-2);}
.btn-enquiry-submit i{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.btn-enquiry-submit:hover i{transform:translateX(4px) translateY(-2px);}

@media (max-width:860px){
  .enquiry-card{grid-template-columns:1fr;}
  .enquiry-side{padding:32px 26px;}
  .enquiry-form-panel{padding:30px 26px;}
}

/* Contact / Forms (used elsewhere, e.g. Contact Us page) */
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-field label{font-size:13px; font-weight:600; color:var(--ink-700);}
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:14px; font-family:inherit; color:var(--ink-900); background:#fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(40,114,179,.15);}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--navy-950); color:#c6d5e2;}
.footer-top{padding:56px 0 36px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; border-bottom:1px solid rgba(255,255,255,.09);}
.footer-brand{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;}
.footer-brand .emblem{width:48px;height:48px;}
.footer-brand h3{color:#fff; font-size:16.5px; margin:0 0 2px;}
.footer-brand p{margin:0; font-size:12.5px; color:#8ea3b6;}
.footer-col h4{color:#fff; font-size:14.5px; margin:0 0 16px; font-weight:600;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:13.5px; color:#adc0d1; display:inline-flex; align-items:center; gap:8px;}
.footer-col a:hover{color:#fff;}
.footer-col a i{font-size:11px; color:var(--saffron-soft);}
.footer-contact li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#adc0d1;}
.footer-contact i{color:var(--saffron-soft); margin-top:3px;}
.social-row{display:flex; gap:10px; margin-top:16px;}
.social-row a{width:34px;height:34px;border-radius:8px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;}
.social-row a:hover{background:var(--saffron);}
.footer-bottom{padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#8ea3b6;}
.footer-bottom-links{display:flex; gap:18px; flex-wrap:wrap;}
.footer-bottom-links a:hover{color:#fff;}
.visitor-pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); padding:6px 12px; border-radius:999px; font-size:12px;}
@media (max-width:980px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:32px;} }
@media (max-width:600px){ .footer-top{grid-template-columns:1fr;} .footer-bottom{flex-direction:column; align-items:flex-start;} }

/* back to top */
.back-to-top{position:fixed; right:20px; bottom:22px; width:46px;height:46px;border-radius:50%; background:var(--navy-900); color:#fff; display:none; align-items:center; justify-content:center; box-shadow:var(--shadow-3); z-index:80; border:2px solid var(--saffron-soft);}
.back-to-top.show{display:flex;}

/* utility */
.mt-40{margin-top:40px;}
.text-center{text-align:center;}
.demo-note{background:#fff3e2; border:1px dashed #d99b3d; color:#8a5a12; font-size:12.5px; padding:12px 16px; border-radius:8px; margin-bottom:26px; display:flex; gap:10px; align-items:flex-start;}

/* ===================== SIMPLE CONTACT TOPBAR (reference-style) ===================== */
.topbar-simple{background:var(--navy-950); color:#cfe0f0; font-size:13px;}
.topbar-simple-inner{display:flex; align-items:center; justify-content:flex-end; gap:22px; padding:8px 0; flex-wrap:wrap;}
.topbar-simple-inner a{display:inline-flex; align-items:center; gap:7px; color:#cfe0f0;}
.topbar-simple-inner a:hover{color:#fff;}

/* ===================== PAGE TITLE / BREADCRUMB BAR =====================
   Semi-transparent navy overlay over a site banner image so the page
   background stays subtly visible behind the breadcrumb. Content is
   horizontally and vertically centred, stays compact (no extra
   whitespace) and is fully responsive. */
.page-title-bar{
  position:relative;
  background:
    linear-gradient(100deg, rgba(8,27,44,.92) 0%, rgba(10,37,64,.85) 55%, rgba(13,51,88,.80) 100%),
    url('../images/banner-2.jpg') center 30% / cover no-repeat;
  border-bottom:3px solid var(--saffron);
  padding:50px 0;
  min-height:60px;
  display:flex;
  align-items:center;
  animation:pageBarIn .45s cubic-bezier(.22,.8,.28,1);
}
@keyframes pageBarIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
.page-title-bar .container{
  width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:4px;
}
.page-title-bar h1{
  font-family:'Hind',sans-serif; font-size:clamp(18px,2.4vw,25px); color:#fff; margin:2px 0 0;
  font-weight:700; letter-spacing:.01em;
}
.breadcrumb{
  font-family:'Inter',system-ui,sans-serif; font-size:12.5px; color:#cfe0f0;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; min-height:22px; line-height:1.4;
}
.breadcrumb a{color:#fff; font-weight:600; position:relative; text-decoration:none; opacity:.9;}
.breadcrumb a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--saffron-soft);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.breadcrumb a:hover{opacity:1;}
.breadcrumb a:hover::after{transform:scaleX(1);}
.breadcrumb .crumb-sep{color:var(--saffron-soft); font-weight:700;}
.breadcrumb [aria-current=page]{
  color:#fff; font-weight:700; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  padding:3px 11px; border-radius:20px;
}
html.reduce-motion .page-title-bar{animation:none;}

@media (max-width:600px){
  .page-title-bar{padding:13px 0;}
  .breadcrumb{font-size:11.5px; gap:6px;}
  .breadcrumb [aria-current=page]{padding:2px 9px;}
}

/* ===================== WELCOME SPLIT SECTION ===================== */
.welcome-split{display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; align-items:center;}
.welcome-img-wrap{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-2); overflow:hidden; height:340px;
  transition:box-shadow .35s ease, transform .35s cubic-bezier(.22,.8,.28,1);
}
.welcome-img-wrap:hover{box-shadow:var(--shadow-3); transform:translateY(-4px);}
.welcome-img-wrap img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,.8,.28,1);}
.welcome-img-wrap:hover img{transform:scale(1.05);}
.welcome-split h2{font-family:'Hind',sans-serif; font-size:clamp(22px,2.8vw,30px); color:var(--navy-900); margin:0 0 14px;}
.welcome-split p{font-size:14.3px; line-height:1.8; color:var(--ink-700); margin:0 0 14px;}
@media (max-width:860px){ .welcome-split{grid-template-columns:1fr;} .welcome-img-wrap{height:240px;} }

/* ===================== PRINCIPAL / HEAD MESSAGE (split editorial layout) ===================== */
.message-card{
  background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:260px 1fr; box-shadow:var(--shadow-2); border:1px solid var(--line);
}
.message-photo{
  position:relative; background:linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:36px 24px;
}
.message-photo::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 15%, rgba(255,153,51,.22), transparent 55%);
}
.message-photo-frame {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;

  background-image:url('../images/principal.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

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

  font-size: 38px;
  font-weight: 700;
  font-family: 'Hind', sans-serif;
  color: #fff;

  border: 3px solid var(--saffron-soft);
  box-shadow: 0 0 0 5px rgba(255,255,255,.1);
  overflow: hidden;
}.message-photo h4{position:relative; margin:0; font-size:15.5px; color:#fff; font-weight:700; text-align:center;}
.message-photo span{position:relative; font-size:12px; color:#b9cbdb; text-align:center; line-height:1.5;}
.message-content{position:relative; padding:38px 40px; display:flex; flex-direction:column; justify-content:center;}
.message-quote-icon{font-size:30px; color:var(--saffron); opacity:.85; margin-bottom:14px; display:block;}
.message-text{font-size:15px; line-height:1.85; color:var(--ink-700); font-style:italic; margin:0 0 20px;}
.message-signoff{display:flex; align-items:center; gap:14px;}
.message-signoff .line{width:36px; height:2px; background:var(--saffron); border-radius:2px; flex-shrink:0;}
.message-signoff h4{margin:0; font-size:14.5px; color:var(--navy-900); font-weight:700;}
.message-signoff span{font-size:12px; color:var(--ink-500);}
@media (max-width:700px){
  .message-card{grid-template-columns:1fr;}
  .message-content{padding:30px 26px; text-align:center;}
  .message-signoff{justify-content:center;}
}

/* ===================== PROGRAMME CARDS WITH PHOTO ===================== */
.prog-card{border-radius:var(--radius-md); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1); transition:box-shadow .2s ease, transform .2s ease;}
.prog-card:hover{box-shadow:var(--shadow-2); transform:translateY(-3px);}
.prog-card .thumb{height:150px; overflow:hidden; position:relative;}
.prog-card .thumb img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.22,.8,.28,1);}
.prog-card .thumb::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
  background:linear-gradient(180deg, rgba(10,37,64,0) 55%, rgba(10,37,64,.32) 100%);
}
.prog-card:hover .thumb::after{opacity:1;}
.prog-card:hover .thumb img{transform:scale(1.06);}
.prog-card .body{padding:18px;}
.prog-card h3{font-size:15px; margin:0 0 4px; color:var(--navy-900);}
.prog-card .tag{font-size:12px; color:var(--ink-500); margin:0 0 12px;}

/* ===================== ENQUIRY SECTION ===================== */

/* ===================== SIMPLE FOOTER (reference-style) ===================== */
.footer-simple{background:var(--navy-950); color:#c6d5e2;}
.footer-simple-top{padding:44px 0 30px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; border-bottom:1px solid rgba(255,255,255,.09);}
.footer-simple-bottom{padding:16px 0; text-align:center; font-size:12.5px; color:#8ea3b6;}
.footer-simple-bottom a{color:#adc0d1;}
.footer-simple-bottom a:hover{color:#fff;}
@media (max-width:860px){ .footer-simple-top{grid-template-columns:1fr;} }

/* ===================== TENDER / NEWS COMPACT LIST (reference-style) ===================== */
.compact-list{display:flex; flex-direction:column; gap:0;}
.compact-list .notice-row{padding:14px 0; border-bottom:1px solid var(--line-soft);}
.compact-list .notice-row:first-child{padding-top:0;}
.compact-list .notice-row:last-child{border-bottom:none;}

/* ===================== LIGHTBOX ===================== */
.gallery-item{cursor:pointer;}
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(6,16,26,.94); z-index:300; display:none;
  align-items:center; justify-content:center; padding:70px 24px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-img-wrap{position:relative; max-width:1100px; width:100%; max-height:80vh; display:flex; flex-direction:column; align-items:center;}
.lightbox-img-wrap img{max-width:100%; max-height:80vh; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 24px 64px rgba(0,0,0,.55); background:#0a1622;}
.lightbox-caption{margin-top:14px; color:#dbe6f0; font-size:13.5px; text-align:center;}
.lightbox-close{
  position:absolute; top:18px; right:22px; width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; border:1px solid rgba(255,255,255,.28); z-index:302;
}
.lightbox-close:hover{background:rgba(255,255,255,.22);}
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:302; font-size:17px;
}
.lightbox-nav:hover{background:rgba(255,255,255,.22);}
.lightbox-nav.prev{left:22px;} .lightbox-nav.next{right:22px;}
.lightbox-counter{position:fixed; top:22px; left:24px; color:#a9c0d3; font-size:12.5px; font-weight:600; z-index:302; letter-spacing:.03em;}
@media (max-width:600px){
  .lightbox-overlay{padding:56px 14px;}
  .lightbox-nav{width:40px;height:40px; font-size:14px;}
  .lightbox-nav.prev{left:8px;} .lightbox-nav.next{right:8px;}
  .lightbox-close{top:10px; right:10px;}
}

/* ===================== SCROLL REVEAL ===================== */
.reveal-init{opacity:0; transform:translateY(26px); transition:opacity .65s cubic-bezier(.22,.8,.28,1), transform .65s cubic-bezier(.22,.8,.28,1); will-change:opacity, transform;}
.reveal-init.in-view{opacity:1; transform:translateY(0);}
html.reduce-motion .reveal-init{opacity:1; transform:none; transition:none;}

/* ===================== HOVER / MICRO-INTERACTIONS ===================== */

/* Buttons: nudge trailing arrow icons on hover */
.btn i.fa-arrow-right, a.btn i.fa-arrow-right{transition:transform .25s cubic-bezier(.22,.8,.28,1);}
.btn:hover i.fa-arrow-right{transform:translateX(4px);}
.btn-primary, .btn-outline, .btn-saffron{position:relative; overflow:hidden;}
.btn-primary::after, .btn-saffron::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.18);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease; pointer-events:none;
}
.btn-primary:hover::after, .btn-saffron:hover::after{transform:scaleX(1);}

/* Cards: border glow + smoother lift */
.card{transition:box-shadow .3s cubic-bezier(.22,.8,.28,1), transform .3s cubic-bezier(.22,.8,.28,1), border-color .3s ease;}
.card:hover{border-color:var(--blue-500);}
.prog-card{transition:box-shadow .3s cubic-bezier(.22,.8,.28,1), transform .3s cubic-bezier(.22,.8,.28,1);}

/* Quick-strip icons: playful hover */
.quick-strip-item .qi-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;}
.quick-strip-item:hover .qi-icon{transform:scale(1.12) rotate(-6deg); box-shadow:0 8px 18px -4px rgba(10,37,64,.35);}
.quick-strip-item span{transition:color .2s ease;}
.quick-strip-item:hover span{color:var(--navy-900);}

/* Logo hover */
.brand-link{display:flex; align-items:center; gap:14px; text-decoration:none;}
.brand-link .logo-mark{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.brand-link:hover .logo-mark{transform:scale(1.06) rotate(-2deg);}

/* Nav links: single clean underline indicator (border-bottom only — no duplicate pseudo-line) */
.nav-list>li>a, .nav-list>li>button.nav-top-link{position:relative;}

/* Dropdown items: slide-in on hover */
.dropdown a{transition:background .2s ease, color .2s ease, padding-left .2s ease;}
.dropdown a:hover{padding-left:16px;}

/* Gallery: smoother zoom + caption lift */
.gallery-item img{transition:transform .5s cubic-bezier(.22,.8,.28,1);}
.gallery-item .cap{transition:transform .3s ease, opacity .3s ease;}
.gallery-item:hover .cap{transform:translateY(-3px);}

/* Footer links: slide on hover */
.footer-col a, .footer-contact li{transition:transform .2s ease, color .2s ease;}
.footer-col a:hover{transform:translateX(4px);}

/* Notice rows: highlight bar on hover */
.notice-row{position:relative; transition:background .2s ease;}
.notice-row::before{
  content:""; position:absolute; left:-18px; top:0; bottom:0; width:3px; background:var(--saffron);
  transform:scaleY(0); transition:transform .25s ease;
}
.notice-row:hover::before{transform:scaleY(1);}
.notice-body h4 a{transition:color .2s ease;}
.notice-row:hover .notice-body h4 a{color:var(--blue-600);}

/* Social icons */
.social-row a{transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;}
.social-row a:hover{transform:translateY(-3px) scale(1.08);}

/* Hero: subtle Ken Burns zoom for atmosphere */
.hero-slide{transform:scale(1); }
.hero-slide.active{animation:heroKenBurns 9s ease-in-out forwards;}
@keyframes heroKenBurns{
  0%{transform:scale(1);}
  100%{transform:scale(1.06);}
}
html.reduce-motion .hero-slide.active{animation:none;}

/* Back to top button */
.back-to-top{transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease, background .2s ease;}
.back-to-top:hover{transform:translateY(-4px) scale(1.05); background:var(--navy-800);}

/* Official / video cards lift */
.official-card{transition:box-shadow .3s ease, transform .3s ease;}
.video-card{overflow:hidden;}
.video-card img{transition:transform .5s cubic-bezier(.22,.8,.28,1), opacity .3s ease;}
.video-card:hover img{transform:scale(1.08); opacity:.9;}
.video-play span{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.video-card:hover .video-play span{transform:scale(1.12);}

/* Stat numbers pop-in */
.stat-item .num{display:inline-block;}

/* ===================== SCROLLABLE WIDGETS — CSS-only, no HTML changes needed ===================== */

/* Notices & Tenders: fixed-height scrollable box.
   Targets .compact-list directly — already present on both your
   "News & Notifications" and "Tender Notices" lists. */
.compact-list{
  max-height:360px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-md);
  background:#fff; padding:4px 20px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.compact-list::-webkit-scrollbar{width:6px;}
.compact-list::-webkit-scrollbar-track{background:transparent;}
.compact-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.compact-list::-webkit-scrollbar-thumb:hover{background:var(--ink-500);}
.compact-list .notice-row:first-child{padding-top:16px;}
.compact-list .notice-row:last-child{padding-bottom:16px;}

/* News has 5 items, Tenders has 3 — size each box to what it actually holds
   instead of one tall shared height, so neither looks like an oversized,
   half-empty container. */
#newsScrollBox{ max-height:300px; }
#tendersScrollBox{ max-height:220px; }

/* Trades / Programmes Offered: horizontal scroll carousel.
   Scoped with :has() to the section whose "View All" link points to
   services.html, so it can never affect a grid on another page. */
.section:has(> .container > .section-head a[href="services.html"]) .grid.grid-4{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:none; padding:4px 4px 14px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; -webkit-overflow-scrolling:touch;
}
.section:has(> .container > .section-head a[href="services.html"]) .grid.grid-4::-webkit-scrollbar{height:6px;}
.section:has(> .container > .section-head a[href="services.html"]) .grid.grid-4::-webkit-scrollbar-track{background:transparent;}
.section:has(> .container > .section-head a[href="services.html"]) .grid.grid-4::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.section:has(> .container > .section-head a[href="services.html"]) .prog-card{flex:0 0 250px; scroll-snap-align:start;}

@media (max-width:600px){
  .section:has(> .container > .section-head a[href="services.html"]) .prog-card{flex-basis:210px;}
}

/* ===================== News & Notifications and Tender Notices: seamless, continuous
   vertical auto-scroll carousels (pure CSS @keyframes, driven from auto-scroll.js) ===================== */
#newsScrollBox, #tendersScrollBox{
  overflow:hidden; /* removes the manual scrollbar; the CSS animation drives the movement instead */
}
#newsScrollBox::-webkit-scrollbar, #tendersScrollBox::-webkit-scrollbar{ display:none; }
#newsScrollTrack, #tendersScrollTrack{
  display:flex;
  flex-direction:column;
  will-change:transform;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* Keep uniform spacing/border across every row once rows are duplicated for the seamless loop,
   so the join between the last real notice and the repeated first one looks identical to the rest. */
#newsScrollTrack .notice-row, #tendersScrollTrack .notice-row{
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}

/* Each track's content is doubled by JS, so translating exactly -50% of the track's
   own size lines up perfectly with the start of the (identical) second half —
   a genuinely seamless, jump-free loop. */
@keyframes ivbAutoScrollY{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}

/* ===================== Homepage "Latest Updates" ticker: seamless, continuous
   HORIZONTAL auto-scroll (News & Notifications chips). Scoped under
   #updatesScrollBox so it never affects the vertical #newsScrollTrack use
   elsewhere on the site. ===================== */
#updatesScrollBox{ overflow:hidden; }
#updatesScrollBox::-webkit-scrollbar{ display:none; }
#updatesScrollBox #newsScrollTrack{
  flex-direction:row;
  will-change:transform;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
@keyframes ivbAutoScrollX{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  #updatesScrollBox #newsScrollTrack{ animation:none !important; }
}

@media (prefers-reduced-motion: reduce){
  #newsScrollTrack, #tendersScrollTrack{ animation:none !important; }
}

/* =====================================================================
   REDESIGN 2026 — EDITORIAL / ASYMMETRIC LAYOUT SYSTEM
   Appended override layer. Does not remove or rename any element ID
   relied on by main.js / auto-scroll.js / gallery-carousel.js / the
   ASP.NET code-behind (runat="server" targets, asp: controls). Only
   visual presentation is changed.
   ===================================================================== */
:root{
  --teal:#0f7a72;
  --teal-soft:#12968c;
  --editorial-bg:#eef3f7;
}

/* ---- Section rhythm ---- */
.section{padding:76px 0;}
.section-compact{padding:22px 0;}
.section-head{align-items:flex-end;}
.eyebrow{
  color:var(--teal); font-weight:700; letter-spacing:1.5px; font-size:12.5px;
}
.section-title{letter-spacing:-0.5px;}

/* ---- HERO: layered editorial overlay ---- */
.hero{position:relative;}
.hero-overlay-panel{
  position:absolute; left:0; bottom:0; z-index:5;
  max-width:640px; margin:0 clamp(20px,5vw,64px) clamp(28px,6vw,64px);
  padding:clamp(24px,3vw,40px);
  background:rgba(8,27,44,.72);
  backdrop-filter:blur(6px);
  border-left:5px solid var(--teal);
  color:#fff;
}
.hero-overlay-panel .eyebrow{color:var(--saffron-soft);}
.hero-overlay-panel h1{
  font-family:'Hind',sans-serif; font-size:clamp(26px,4vw,44px); line-height:1.15;
  margin:8px 0 14px; color:#fff;
}
.hero-overlay-panel p{font-size:14.5px; line-height:1.7; color:#dce8f2; margin:0 0 20px;}
.hero-overlay-actions{display:flex; gap:12px; flex-wrap:wrap;}
@media (max-width:640px){ .hero-overlay-panel{margin:0 14px 18px; padding:18px;} }

/* ---- WELCOME: asymmetric split with facts rail ---- */
.welcome-split{
  display:grid; grid-template-columns:0.55fr 0.18fr 1.05fr; gap:0 32px; align-items:stretch;
}
.welcome-facts-rail{
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  border-left:3px solid var(--line); padding-left:20px;
}
.welcome-facts-rail .fact-num{
  font-family:'Hind',sans-serif; font-weight:700; font-size:26px; color:var(--navy-900); line-height:1.1;
}
.welcome-facts-rail .fact-label{font-size:11.5px; color:var(--ink-500); text-transform:uppercase; letter-spacing:.6px;}
@media (max-width:980px){
  .welcome-split{grid-template-columns:1fr;}
  .welcome-facts-rail{
    flex-direction:row; flex-wrap:wrap; border-left:0; border-top:3px solid var(--line);
    padding-left:0; padding-top:16px; margin-top:6px; gap:24px;
  }
}

/* ---- PRINCIPAL MESSAGE: overlapping editorial card ---- */
.message-card{position:relative; overflow:visible;}
.message-photo{position:relative; z-index:2;}
.message-content{
  position:relative; z-index:1; margin-left:-48px; padding-left:68px;
  border-left:4px solid var(--teal);
}
@media (max-width:860px){ .message-content{margin-left:0; padding-left:24px;} }

/* ---- NEWS / TENDER STRIPS ---- */
.notice-list.compact-list.scroll-box{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  box-shadow:var(--shadow-1); overflow:hidden;
}

/* ---- PROGRAMMES: variable-size feature panel grid ---- */
.feature-panel-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:18px;
}
.feature-panel-grid .prog-card:first-child{grid-column:span 2; grid-row:span 2;}
.feature-panel-grid .prog-card:first-child .thumb{height:100%;}
.feature-panel-grid .prog-card{display:flex; flex-direction:column;}
.feature-panel-grid .prog-card .thumb{flex:1; height:auto; min-height:110px;}
@media (max-width:980px){
  .feature-panel-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:170px;}
  .feature-panel-grid .prog-card:first-child{grid-column:span 2; grid-row:span 1;}
}
@media (max-width:600px){
  .feature-panel-grid{grid-template-columns:1fr; grid-auto-rows:auto;}
  .feature-panel-grid .prog-card:first-child{grid-column:span 1;}
}

/* ---- WHY CHOOSE (horizontal strip, alternating emphasis) ---- */
.why-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.why-item{background:var(--surface); padding:28px 22px;}
.why-item i{font-size:22px; color:var(--teal); margin-bottom:12px; display:block;}
.why-item h4{margin:0 0 8px; font-size:15px; color:var(--navy-900);}
.why-item p{margin:0; font-size:13px; color:var(--ink-500); line-height:1.6;}
@media (max-width:860px){ .why-strip{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .why-strip{grid-template-columns:1fr;} }

/* ---- STATS STRIP ---- */
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr); background:var(--navy-950); color:#fff;
  border-radius:var(--radius-lg); overflow:hidden;
}
.stat-item{padding:30px 18px; text-align:center; border-left:1px solid rgba(255,255,255,.09);}
.stat-item:first-child{border-left:0;}
.stat-item .num{font-family:'Hind',sans-serif; font-weight:700; font-size:clamp(26px,3vw,36px); color:var(--saffron-soft); display:block;}
.stat-item .label{font-size:12px; color:#b9cadb; letter-spacing:.4px; margin-top:6px;}
@media (max-width:860px){ .stats-strip{grid-template-columns:repeat(2,1fr);} .stat-item:nth-child(3){border-left:0;} }
@media (max-width:520px){ .stats-strip{grid-template-columns:1fr;} .stat-item{border-left:0; border-top:1px solid rgba(255,255,255,.09);} .stat-item:first-child{border-top:0;} }

/* ---- ENQUIRY: split panel ---- */
.enquiry-card{border-radius:var(--radius-lg); overflow:hidden;}
.enquiry-side{background:var(--navy-950); color:#fff;}
.enquiry-side .eyebrow{color:var(--saffron-soft);}
.enquiry-side h2{color:#fff;}
.enquiry-side p{color:#c6d5e2;}
.enquiry-info li{color:#dce8f2;}

/* ---- FOOTER ---- */
.footer-simple{background:var(--navy-950);}
.footer-simple-top{border-top:3px solid var(--teal);}

/* =====================================================================
   REDESIGN 2026 v2 — HOMEPAGE RE-ARRANGEMENT
   New order: Hero -> Stats -> Why Choose -> Welcome (reversed) ->
   Programmes -> Principal Message -> News & Tenders (side-by-side) -> Gallery
   ===================================================================== */

/* Welcome section reversed: text | facts rail | image (image now last/right) */
.welcome-split-home{
  grid-template-columns:1.05fr 0.18fr 0.55fr;
}
@media (max-width:980px){
  .welcome-split-home{grid-template-columns:1fr;}
  .welcome-split-home .welcome-img-wrap{order:3;}
  .welcome-split-home .welcome-facts-rail{order:2;}
}

/* Stats strip sits directly under the hero now — tighten top spacing */
.hero + .section.section-compact{padding-top:38px;}

/* News & Tenders side-by-side panels */
.news-tenders-split{align-items:start;}
.news-tenders-panel .section-head{margin-bottom:14px;}
.news-tenders-panel:first-child{
  padding-right:28px; border-right:1px solid var(--line);
}
.news-tenders-panel:last-child{padding-left:0;}
@media (max-width:860px){
  .news-tenders-split{grid-template-columns:1fr; gap:34px;}
  .news-tenders-panel:first-child{
    padding-right:0; border-right:0; border-bottom:1px solid var(--line); padding-bottom:24px;
  }
}

/* =====================================================================
   REDESIGN 2026 v3 — NEW COLOR SYSTEM + NEW STRUCTURAL PATTERNS
   NOTE: originally repointed to a maroon/gold palette; reverted below to
   navy/orange to match the reference design provided later, which also
   restores consistency with this file's true root palette (line 2-28).
   ===================================================================== */
:root{
  --navy-950:#081b2c;
  --navy-900:#0a2540;
  --navy-800:#0d3358;
  --navy-700:#12406e;
  --blue-600:#1b5a94;
  --blue-500:#2872b3;
  --saffron:#e58b1f;
  --saffron-soft:#f6a53c;
  --gold:#b8912c;
  --teal:#0f7a72;
  --teal-soft:#12968c;
  --ink-900:#152233;
  --ink-700:#374757;
  --ink-500:#5c7085;
  --line:#dde5ec;
  --line-soft:#eaf0f5;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --surface-tint:#f7fafc;
}

/* True Indian tricolour must stay accurate regardless of theme */
.tricolor-strip{
  background:linear-gradient(90deg,#ff9933 0 33.3%, #ffffff 33.3% 66.6%, #128a46 66.6% 100%) !important;
}

/* ---- HERO: split-screen (text panel | media panel) ---- */
.hero-split{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  height:auto; min-height:520px; background:var(--navy-950);
}
.hero-split-panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,4vw,64px); color:#fff;
}
.hero-split-panel .eyebrow{color:var(--saffron-soft);}
.hero-split-panel h1{
  font-family:'Hind',sans-serif; font-size:clamp(28px,3.4vw,42px); line-height:1.2;
  margin:12px 0 16px; color:#fff;
}
.hero-split-panel p{font-size:15px; line-height:1.7; color:#e7d9cd; margin:0 0 22px; max-width:44ch;}
.hero-overlay-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero-split .btn-outline{border-color:rgba(255,255,255,.45); color:#fff;}
.hero-split-media{position:relative; overflow:hidden; min-height:320px;}
.hero-split-media .hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .8s ease;}
.hero-split-media .hero-slide.active{opacity:1;}
.hero-split-media .hero-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:4;}
.hero-split-media .hero-dots{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:4;}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr;}
  .hero-split-media{min-height:260px;}
}

/* ---- WELCOME: zigzag two-tone panel (replaces facts-rail split) ---- */
.welcome-split-home{
  grid-template-columns:1fr;
  background:var(--surface-tint);
  border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,40px);
  position:relative;
}
.welcome-split-home::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, var(--saffron), var(--teal));
  border-radius:6px 0 0 6px;
}
.welcome-split-home .welcome-img-wrap{display:none;} /* image now used at the zigzag stat band below, not duplicated */
.welcome-split-home .welcome-facts-rail{
  flex-direction:row; border-left:0; border-top:2px dashed var(--line); padding-left:0; padding-top:20px; margin-top:20px; gap:32px;
}

/* ---- WHY CHOOSE: icon-circle row instead of bordered strip ---- */
.why-strip{
  display:flex; gap:28px; background:transparent; border:0; flex-wrap:wrap;
}
.why-item{
  flex:1 1 220px; background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--line); text-align:center; padding:32px 20px;
}
.why-item i{
  width:56px; height:56px; border-radius:50%; background:var(--navy-950); color:var(--saffron-soft);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:20px;
}

/* ---- PRINCIPAL MESSAGE + STATS RAIL (side by side) ---- */
.principal-stats-grid{display:grid; grid-template-columns:1.4fr 0.6fr; gap:36px; align-items:start;}
.principal-stats-rail{
  background:var(--navy-950); border-radius:var(--radius-lg); padding:26px 22px; position:sticky; top:110px;
}
.stats-rail-v{display:flex; flex-direction:column; gap:22px;}
.stats-rail-v .rail-item{
  border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:18px;
}
.stats-rail-v .rail-item:last-child{border-bottom:0; padding-bottom:0;}
.stats-rail-v .num{
  display:block; font-family:'Hind',sans-serif; font-weight:700; font-size:28px; color:var(--saffron-soft);
}
.stats-rail-v .label{font-size:11.5px; color:#e2d3c6; letter-spacing:.4px;}
@media (max-width:860px){
  .principal-stats-grid{grid-template-columns:1fr;}
  .principal-stats-rail{position:static;}
  .stats-rail-v{flex-direction:row; flex-wrap:wrap;}
  .stats-rail-v .rail-item{flex:1 1 45%; border-bottom:0;}
}

/* ---- Feature panel grid / prog-card tint to new palette ---- */
.prog-card{border-color:var(--line);}
.prog-card h3{color:var(--navy-900);}

/* =====================================================================
   REDESIGN 2026 v4 — INNER PAGE DESIGN LANGUAGE
   Shared patterns for About, Principal Message, Staff, Trades,
   Admission, IMC and other inner pages. Purely presentational.
   ===================================================================== */

/* ---- Page hero band (title bar upgrade) ---- */
.page-title-bar{
  background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%);
  padding:38px 0 30px; position:relative; overflow:hidden;
}
.page-title-bar::after{
  content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle, rgba(224,168,63,.18), transparent 70%);
}
.page-title-bar .breadcrumb{color:#cbb9a8; font-size:12.5px; position:relative; z-index:1;}
.page-title-bar .breadcrumb a{color:#e7d9cd;}
.page-title-bar .breadcrumb a:hover{color:var(--saffron-soft);}
.page-title-bar h1{color:#fff; margin:8px 0 0; position:relative; z-index:1; font-size:clamp(22px,3vw,32px);}

/* ---- Reveal-on-scroll utility (hooks into main.js IntersectionObserver via existing selectors) ---- */
.reveal-init{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal-init.in-view{opacity:1; transform:none;}

/* ---- Split content layout (image + text, alternating) ---- */
.info-split{display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center; margin-bottom:44px;}
.info-split.reverse{grid-template-columns:1.1fr 0.9fr;}
.info-split.reverse .info-split-media{order:2;}
.info-split-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-2); width:100%; height:280px; object-fit:cover; transition:transform .5s ease;}
.info-split-media:hover img{transform:scale(1.03);}
@media (max-width:860px){ .info-split, .info-split.reverse{grid-template-columns:1fr;} .info-split.reverse .info-split-media{order:0;} }

/* ---- Milestone timeline ---- */
.milestone-timeline{position:relative; padding-left:34px; margin:0 0 40px;}
.milestone-timeline::before{content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line);}
.milestone{position:relative; padding-bottom:28px;}
.milestone:last-child{padding-bottom:0;}
.milestone::before{
  content:''; position:absolute; left:-34px; top:3px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:3px solid var(--saffron); box-shadow:0 0 0 4px var(--surface-tint);
}
.milestone .year{font-family:'Hind',sans-serif; font-weight:700; color:var(--navy-900); font-size:16px;}
.milestone p{margin:4px 0 0; font-size:13.5px; color:var(--ink-700); line-height:1.65;}

/* ---- Objective / mission cards ---- */
.objective-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.objective-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 22px; transition:box-shadow .25s ease, transform .25s ease;
}
.objective-card:hover{box-shadow:var(--shadow-2); transform:translateY(-4px);}
.objective-card i{width:44px; height:44px; border-radius:10px; background:var(--navy-950); color:var(--saffron-soft); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:14px;}
.objective-card h4{margin:0 0 8px; font-size:14.5px; color:var(--navy-900);}
.objective-card p{margin:0; font-size:12.8px; color:var(--ink-500); line-height:1.6;}
@media (max-width:860px){ .objective-cards{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .objective-cards{grid-template-columns:1fr;} }

/* ---- Staff directory grid ---- */
.staff-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.staff-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  text-align:center; transition:box-shadow .25s ease, transform .25s ease;
}
.staff-card:hover{box-shadow:var(--shadow-2); transform:translateY(-4px);}
.staff-card .avatar{
  width:100%; aspect-ratio:1; background:var(--surface-tint); display:flex; align-items:center; justify-content:center;
  font-size:38px; color:var(--line); position:relative; overflow:hidden;
}
.staff-card .avatar img{width:100%; height:100%; object-fit:cover;}
.staff-card .body{padding:16px 14px 20px;}
.staff-card h4{margin:0 0 4px; font-size:14px; color:var(--navy-900);}
.staff-card .role{font-size:12px; color:var(--teal); font-weight:600;}
@media (max-width:980px){ .staff-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .staff-grid{grid-template-columns:1fr;} }

/* ---- Trade explorer cards ---- */
.trade-explorer{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.trade-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.trade-card:hover{box-shadow:var(--shadow-2); transform:translateY(-4px);}
.trade-card .thumb{height:170px; overflow:hidden;}
.trade-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.trade-card:hover .thumb img{transform:scale(1.07);}
.trade-card .body{padding:18px 18px 20px;}
.trade-card h3{margin:0 0 8px; font-size:15.5px; color:var(--navy-900);}
.trade-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.trade-tag{font-size:10.5px; font-weight:700; letter-spacing:.3px; padding:3px 9px; border-radius:20px; background:var(--surface-tint); color:var(--ink-500); border:1px solid var(--line); text-transform:uppercase;}
.trade-tag.ncvt{color:var(--teal); border-color:var(--teal);}
.trade-tag.scvt{color:var(--saffron); border-color:var(--saffron);}
.trade-meta{font-size:12.5px; color:var(--ink-500); margin:0;}
@media (max-width:980px){ .trade-explorer{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .trade-explorer{grid-template-columns:1fr;} }

/* ---- Step / process cards (Admission etc.) ---- */
.step-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.step-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 18px; position:relative;
}
.step-item .step-no{
  width:34px; height:34px; border-radius:50%; background:var(--saffron); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:14px;
}
.step-item h4{margin:0 0 6px; font-size:14px; color:var(--navy-900);}
.step-item p{margin:0; font-size:12.5px; color:var(--ink-500); line-height:1.6;}
@media (max-width:860px){ .step-flow{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .step-flow{grid-template-columns:1fr;} }

/* ---- Modern document/table list ---- */
.doc-list-modern{display:flex; flex-direction:column; gap:10px;}
.doc-row-modern{
  display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:14px 16px; transition:box-shadow .2s ease;
}
.doc-row-modern:hover{box-shadow:var(--shadow-1);}
.doc-row-modern .doc-icon{
  width:38px; height:38px; border-radius:8px; background:var(--surface-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.doc-row-modern .doc-title{font-size:13.5px; font-weight:600; color:var(--navy-900); margin:0;}
.doc-row-modern .doc-meta{font-size:11.5px; color:var(--ink-500);}
.doc-row-modern .doc-action{margin-left:auto;}

/* ---- IMC / committee table ---- */
.modern-table{width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1);}
.modern-table th{background:var(--navy-950); color:#fff; text-align:left; padding:12px 16px; font-size:12px; text-transform:uppercase; letter-spacing:.4px;}
.modern-table td{padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-700);}
.modern-table tr:last-child td{border-bottom:0;}
.modern-table tr:hover td{background:var(--surface-tint);}

/* =====================================================================
   REDESIGN 2026 v6 — PREMIUM EDITORIAL HOMEPAGE (5th pass)
   Full-bleed centered hero + overlapping quick-access panel, asymmetric
   about block, icon-based trade cards, split-panel news, vertical
   pull-quote principal message, campus features strip. All existing
   dynamic IDs (#newsScrollTrack, #tendersScrollTrack, #galleryTrack,
   #heroDots, asp: controls) are reused untouched by the markup that
   follows this block — this only styles new wrapper classes.
   ===================================================================== */

/* ---- HERO v6: full-bleed, centered typography, overlapping quick-access panel ---- */
.hero-v6{position:relative; height:min(86vh,680px); min-height:460px;}
.hero-v6-center{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 20px;
}
.hero-v6-center .eyebrow{color:var(--saffron-soft); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); padding:6px 16px; border-radius:30px; backdrop-filter:blur(4px);}
.hero-v6-center h1{
  font-family:'Hind',sans-serif; color:#fff; font-weight:700; font-size:clamp(30px,5vw,54px);
  line-height:1.15; margin:18px 0 16px; max-width:820px; text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-v6-center p{color:#e9dfd3; font-size:15px; max-width:560px; margin:0 0 28px; line-height:1.7;}
.hero-v6-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.hero-v6-actions .btn{padding:13px 26px; font-size:14px;}

.hero-quickpanel{
  position:relative; z-index:5; max-width:1080px; margin:-52px auto 0; padding:0 20px;
}
.hero-quickpanel-inner{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:0 20px 48px -14px rgba(20,10,10,.28);
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
}
.hero-quick-item{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:22px 14px; border-right:1px solid var(--line); transition:background .2s ease;
}
.hero-quick-item:last-child{border-right:0;}
.hero-quick-item:hover{background:var(--surface-tint);}
.hero-quick-item i{width:42px; height:42px; border-radius:50%; background:var(--navy-950); color:var(--saffron-soft); display:flex; align-items:center; justify-content:center; font-size:16px;}
.hero-quick-item span{font-size:12.5px; font-weight:700; color:var(--navy-900);}
@media (max-width:760px){
  .hero-quickpanel-inner{grid-template-columns:repeat(2,1fr);}
  .hero-quick-item{border-bottom:1px solid var(--line);}
}

/* ---- ABOUT v6: asymmetric large-image + editorial info panel ---- */
.about-v6{display:grid; grid-template-columns:1.15fr 0.85fr; gap:0; align-items:stretch; margin-top:96px;}
.about-v6-media{position:relative; min-height:420px;}
.about-v6-media img{width:100%; height:100%; object-fit:cover;}
.about-v6-media::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 70%, var(--surface-tint) 100%);}
.about-v6-panel{background:var(--surface-tint); padding:clamp(30px,4vw,56px); display:flex; flex-direction:column; justify-content:center;}
.about-v6-panel .eyebrow{color:var(--saffron);}
.about-v6-panel h2{margin:10px 0 16px; font-size:clamp(22px,2.6vw,30px);}
.about-v6-panel p{font-size:14px; line-height:1.8; color:var(--ink-700); margin:0 0 14px;}
@media (max-width:900px){ .about-v6{grid-template-columns:1fr;} .about-v6-media{min-height:280px;} }

/* ---- Trades as icon cards (distinct from photo cards used elsewhere) ---- */
.trade-icon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.trade-icon-card{background:var(--surface); padding:30px 20px; text-align:center; transition:background .2s ease, transform .2s ease;}
.trade-icon-card:hover{background:var(--navy-950); transform:translateY(-3px);}
.trade-icon-card i{font-size:26px; color:var(--saffron); margin-bottom:14px; display:block; transition:color .2s ease;}
.trade-icon-card:hover i{color:var(--saffron-soft);}
.trade-icon-card h4{margin:0; font-size:13.5px; color:var(--navy-900); transition:color .2s ease;}
.trade-icon-card:hover h4{color:#fff;}
@media (max-width:860px){ .trade-icon-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- Principal message v6: vertical pull-quote editorial ---- */
.principal-v6{max-width:820px; margin:0 auto; text-align:center; position:relative; padding:20px 0 0;}
.principal-v6 i.quote-mark{font-size:40px; color:var(--saffron); opacity:.5;}
.principal-v6 blockquote{font-family:'Hind',sans-serif; font-size:clamp(18px,2.2vw,24px); line-height:1.6; color:var(--navy-900); margin:18px 0 26px; font-style:italic;}
.principal-v6-byline{display:flex; align-items:center; justify-content:center; gap:14px;}
.principal-v6-byline img{width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--saffron);}
.principal-v6-byline .n{font-weight:700; color:var(--navy-900); font-size:14px;}
.principal-v6-byline .r{font-size:12px; color:var(--ink-500);}

/* ---- News/tenders split v6 ---- */
.split-panel-v6{display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.split-panel-v6-row{display:grid; grid-template-columns:170px 1fr; border-bottom:1px solid var(--line);}
.split-panel-v6-row:last-child{border-bottom:0;}
.split-panel-v6-head{background:var(--navy-950); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:20px; gap:4px;}
.split-panel-v6-head .eyebrow{color:var(--saffron-soft); font-size:10.5px;}
.split-panel-v6-head h3{margin:0; font-size:14.5px; color:#fff;}
.split-panel-v6-head a{font-size:11px; color:#d9c6b6; margin-top:6px;}
.split-panel-v6-body{padding:6px 0;}
@media (max-width:640px){ .split-panel-v6-row{grid-template-columns:1fr;} }

/* ---- Campus features strip ---- */
.campus-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.campus-strip-item{position:relative; height:220px; overflow:hidden;}
.campus-strip-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.campus-strip-item:hover img{transform:scale(1.08);}
.campus-strip-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(0deg, rgba(8,20,15,.85), transparent);
  color:#fff; font-size:12.5px; font-weight:700;
}
@media (max-width:860px){ .campus-strip{grid-template-columns:repeat(2,1fr);} }

/* ---- Video teaser panel ---- */
.video-teaser{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px;
  background:var(--navy-950); border-radius:var(--radius-lg); padding:30px 32px; color:#fff;
}
.video-teaser i.play-badge{width:56px; height:56px; border-radius:50%; background:var(--saffron); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;}
.video-teaser h3{margin:0 0 6px; color:#fff; font-size:18px;}
.video-teaser p{margin:0; color:#cbb9a8; font-size:13px;}
@media (max-width:640px){ .video-teaser{grid-template-columns:1fr; text-align:center;} }

/* =====================================================================
   REDESIGN 2026 v7 — HEADER & NAVIGATION (totally different treatment)
   CSS-only override so it applies uniformly across every page without
   touching each page's markup. Logo asset has a dark navy wordmark
   baked into the PNG, so a fully dark unified header would make the
   text unreadable -- kept the header light for legibility, but made it
   bolder/larger with an accent edge, and gave the nav bar a completely
   different pill-based, animated treatment instead of the old flat
   instant-toggle bar.
   ===================================================================== */

/* ---- Header: bolder scale + accent edge instead of a plain flat bar ---- */
.site-header{
  background:var(--surface);
  border-bottom:none;
  position:relative;
}
.site-header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--saffron) 0%, var(--gold) 45%, var(--teal) 100%);
}
.header-row{padding:20px 0;}
.logo-mark, .brand-text img{}
.site-header-wrap.scrolled .brand-text img{height:30px;}
.site-header-wrap.scrolled .header-row{padding:10px 0;}

/* ---- NAV: merged-look dark bar with pill active/hover states ---- */
.navbar{
  background:var(--navy-950);
  border-top:1px solid rgba(255,255,255,.06);
}
.navbar-inner{padding:2px 0;}
.nav-list{gap:4px; padding:6px 4px;}
.nav-list>li{padding:2px 0;}
.nav-list>li>a, .nav-list>li>button.nav-top-link{
  border-radius:999px; border-bottom:none; padding:10px 18px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list>li>a:hover, .nav-list>li>button.nav-top-link:hover{
  background:rgba(255,255,255,.1); border-bottom:none; transform:translateY(-1px);
}
.nav-list>li.open>button.nav-top-link{
  background:var(--saffron); color:#20140a; border-bottom:none;
}
.nav-list>li.open>button.nav-top-link .nav-caret{color:#20140a;}
/* current-page pill (Home link ships with an inline active style from markup;
   this just gives it the new pill treatment instead of the old underline) */
.nav-list>li>a[style*="border-bottom-color"]{
  background:var(--saffron) !important; color:#20140a !important; border-radius:999px;
}

/* ---- Animated dropdown reveal (was instant display:none/block) ---- */
.dropdown{
  display:block; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px) scale(.98); transform-origin:top left;
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), visibility .22s;
  border-top:none; border-radius:14px; margin-top:8px; box-shadow:0 16px 40px -12px rgba(10,10,20,.35);
}
.nav-list>li.open .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
}
.dropdown a{border-radius:10px;}
.dropdown a:hover{background:var(--surface-tint); transform:translateX(2px);}
.dropdown a i{transition:transform .2s ease;}
.dropdown a:hover i{transform:scale(1.15);}

@media (max-width:980px){
  .dropdown{
    transform:none; opacity:1; visibility:visible; pointer-events:auto; /* mobile keeps simple slide via max-height */
    display:none; box-shadow:none; margin-top:0;
  }
  .nav-list>li.open .dropdown{display:block;}
  .nav-list>li>a, .nav-list>li>button.nav-top-link{border-radius:0;}
  .nav-list>li.open>button.nav-top-link{background:rgba(255,255,255,.08); color:#fff;}
  .nav-list>li.open>button.nav-top-link .nav-caret{color:var(--saffron-soft);}
}

/* =====================================================================
   REDESIGN 2026 v8 — HOMEPAGE BENTO GRID (6th pass, new paradigm)
   Departs from every previous "stacked full-width section" layout.
   The whole homepage body (below a slim hero strip) is one large
   asymmetric CSS grid of mixed-size tiles -- an editorial/dashboard
   composition rather than a sequence of sections. Every existing
   dynamic ID (#newsScrollTrack, #tendersScrollTrack, #galleryTrack,
   #heroDots, asp: controls) is preserved inside its tile untouched.
   ===================================================================== */

/* ---- Slim hero strip (replaces full-height hero used in every prior version) ---- */
.hero-strip{position:relative; height:300px; min-height:260px; border-radius:0 0 28px 28px; overflow:hidden;}
.hero-strip .hero-slide{border-radius:0 0 28px 28px;}
.hero-strip-content{
  position:absolute; inset:0; z-index:4; display:flex; align-items:center;
  padding:0 clamp(20px,5vw,64px);
}
.hero-strip-content .eyebrow{color:var(--saffron-soft);}
.hero-strip-content h1{color:#fff; font-family:'Hind',sans-serif; font-size:clamp(22px,3vw,34px); margin:8px 0 14px; max-width:640px; line-height:1.2;}
.hero-strip-content .btn{padding:10px 20px; font-size:13px;}

/* ---- BENTO GRID ---- */
.bento-wrap{max-width:1280px; margin:-40px auto 0; padding:0 20px 80px; position:relative; z-index:5;}
.bento-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:minmax(90px, auto);
  gap:18px;
}
.bento-tile{
  background:var(--surface); border-radius:20px; border:1px solid var(--line);
  box-shadow:0 8px 28px -14px rgba(20,10,10,.18);
  padding:24px; overflow:hidden; position:relative;
  transition:box-shadow .25s ease, transform .25s ease;
}
.bento-tile:hover{box-shadow:0 18px 40px -16px rgba(20,10,10,.28); transform:translateY(-3px);}
.bento-tile-dark{background:var(--navy-950); color:#fff; border-color:var(--navy-950);}
.bento-tile-accent{background:linear-gradient(150deg, var(--saffron) 0%, var(--gold) 100%); color:#241405; border-color:transparent;}
.bento-tile h3, .bento-tile h2{margin:0 0 10px;}
.bento-tile-dark h3, .bento-tile-dark h2{color:#fff;}
.bento-tile .eyebrow{display:block; margin-bottom:8px;}
.bento-tile-dark .eyebrow{color:var(--saffron-soft);}
.bento-tile-scroll{overflow-y:auto;}

/* grid spans -- deliberately asymmetric, mixed sizes */
.bt-about        { grid-column:span 7; grid-row:span 2; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; }
.bt-about img{width:100%; height:100%; min-height:180px; object-fit:cover; border-radius:14px;}
.bt-quicklinks   { grid-column:span 5; grid-row:span 2; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.bt-quicklinks a{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--surface-tint); color:var(--navy-900); font-weight:600; font-size:13.5px; transition:background .2s ease;}
.bt-quicklinks a:hover{background:var(--saffron); color:#241405;}
.bt-quicklinks a i{width:20px; text-align:center;}

.bt-stat        { grid-column:span 3; grid-row:span 1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.bt-stat .num{font-family:'Hind',sans-serif; font-weight:700; font-size:30px; color:var(--saffron);}
.bt-stat-dark .num{color:var(--saffron-soft);}
.bt-stat .label{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-500); margin-top:4px;}
.bt-stat-dark .label{color:#c9d3de;}

.bt-trades      { grid-column:span 5; grid-row:span 3; }
.bt-trades-list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.bt-trades-list a{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; background:var(--surface-tint); font-size:13px; font-weight:600; color:var(--navy-900);}
.bt-trades-list a:hover{background:var(--navy-950); color:#fff;}
.bt-trades-list a i:last-child{opacity:.5;}

.bt-principal   { grid-column:span 4; grid-row:span 3; display:flex; flex-direction:column; }
.bt-principal .msg{font-size:13px; line-height:1.75; font-style:italic; color:#dcd3c8; flex:1;}
.bt-principal .who{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.15); font-size:12.5px;}
.bt-principal .who b{display:block; color:#fff;}

.bt-news        { grid-column:span 3; grid-row:span 3; display:flex; flex-direction:column; }
.bt-tenders     { grid-column:span 3; grid-row:span 3; display:flex; flex-direction:column; }
.bt-news .notice-list, .bt-tenders .notice-list{flex:1; margin-top:8px;}

.bt-gallery     { grid-column:span 7; grid-row:span 2; }
.bt-gallery .gallery-carousel{margin-top:10px; border-radius:14px;}

.bt-video       { grid-column:span 5; grid-row:span 2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.bt-video i.play{width:48px; height:48px; border-radius:50%; background:var(--saffron); color:#241405; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px;}

.bt-enquiry     { grid-column:span 12; }
.bt-enquiry .grid{margin-top:14px;}

@media (max-width:1100px){
  .bt-about, .bt-quicklinks, .bt-trades, .bt-principal, .bt-news, .bt-tenders, .bt-gallery, .bt-video{grid-column:span 6;}
  .bt-stat{grid-column:span 3;}
}
@media (max-width:760px){
  .bento-grid{grid-template-columns:repeat(2,1fr);}
  .bt-about, .bt-quicklinks, .bt-trades, .bt-principal, .bt-news, .bt-tenders, .bt-gallery, .bt-video, .bt-enquiry{grid-column:span 2; grid-row:auto;}
  .bt-stat{grid-column:span 1;}
  .bt-about{grid-template-columns:1fr;}
  .hero-strip{height:340px; border-radius:0 0 20px 20px;}
}

/* =====================================================================
   REDESIGN 2026 v9 — HOMEPAGE FROM SCRATCH (premium editorial)
   Scoped to .hp-v9 (wraps <main> on index.aspx only) with its OWN
   palette (--hp-*) so this pass does not alter the colors already
   approved on About/Staff/Trades/Principal-Message/Admin — those keep
   using --navy-*/--saffron/--teal untouched. Every existing dynamic ID
   (#newsScrollTrack, #tendersScrollTrack, #galleryTrack, asp: controls)
   is reused inside this new visual language, never renamed.
   ===================================================================== */
.hp-v9{
  --hp-primary:#1c3a2e;
  --hp-primary-light:#2d5445;
  --hp-primary-dark:#122820;
  --hp-accent:#b5713f;
  --hp-accent-light:#d4956a;
  --hp-bg:#f7f2e9;
  --hp-surface:#ffffff;
  --hp-surface-tint:#efe7d8;
  --hp-ink:#211d17;
  --hp-ink-soft:#5c5348;
  --hp-line:#e3d9c6;
  background:var(--hp-bg);
  color:var(--hp-ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
.hp-v9 .hp-label{
  font-size:11.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--hp-accent);
  display:inline-block; margin-bottom:14px;
}
.hp-v9 .hp-display{font-family:'Hind',serif; color:var(--hp-primary-dark); font-weight:700; letter-spacing:-.5px;}
.hp-v9 .hp-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:3px;
  font-weight:600; font-size:13.5px; letter-spacing:.3px; transition:all .3s ease; white-space:nowrap; cursor:pointer; border:1.5px solid transparent;
}
.hp-v9 .hp-btn-primary{background:var(--hp-primary); color:#fff;}
.hp-v9 .hp-btn-primary:hover{background:var(--hp-primary-dark); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(28,58,46,.5);}
.hp-v9 .hp-btn-ghost{border-color:rgba(255,255,255,.5); color:#fff; background:transparent;}
.hp-v9 .hp-btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.hp-v9 .hp-btn-outline{border-color:var(--hp-primary); color:var(--hp-primary); background:transparent;}
.hp-v9 .hp-btn-outline:hover{background:var(--hp-primary); color:#fff;}
.hp-v9 .hp-wrap{max-width:1320px; margin:0 auto; padding:0 24px;}
.hp-v9 .hp-section{padding:110px 0;}
@media (max-width:860px){ .hp-v9 .hp-section{padding:70px 0;} }

/* scroll reveal (self-contained, distinct from main.js reveal-init to avoid double transitions) */
.hp-v9 .hp-reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.hp-v9 .hp-reveal.hp-in{opacity:1; transform:none;}
.hp-v9 .hp-reveal-1{transition-delay:.1s;} .hp-v9 .hp-reveal-2{transition-delay:.22s;} .hp-v9 .hp-reveal-3{transition-delay:.34s;}
html.reduce-motion .hp-v9 .hp-reveal{opacity:1; transform:none; transition:none;}

/* ---------------------------------------------------------------------
   1. HEADER OVERRIDE (glass on scroll, distinct active underline)
--------------------------------------------------------------------- */
.hp-v9-header-glass.site-header-wrap{transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;}
.hp-v9-header-glass.site-header-wrap.scrolled{
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}

/* ---------------------------------------------------------------------
   2. HERO — asymmetric, layered, floating shapes, entrance animation
--------------------------------------------------------------------- */
.hp-hero{position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--hp-primary-dark);}
.hp-hero .hero-slide{opacity:0; transition:opacity 1.4s ease;}
.hp-hero .hero-slide.active{opacity:1;}
.hp-hero::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(18,40,32,.35) 0%, rgba(18,40,32,.55) 55%, rgba(18,40,32,.92) 100%);
}
.hp-hero-shape{position:absolute; z-index:1; border-radius:50%; filter:blur(2px); opacity:.35; pointer-events:none;}
.hp-hero-shape.s1{width:340px; height:340px; background:radial-gradient(circle, var(--hp-accent), transparent 70%); top:-80px; right:8%; animation:hpFloat 9s ease-in-out infinite;}
.hp-hero-shape.s2{width:200px; height:200px; border:2px solid rgba(255,255,255,.25); background:none; filter:none; bottom:18%; right:20%; animation:hpFloat 12s ease-in-out infinite reverse;}
@keyframes hpFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-26px);}}
html.reduce-motion .hp-hero-shape{animation:none;}

.hp-hero-content{position:relative; z-index:3; width:100%; padding:0 clamp(24px,6vw,90px) clamp(50px,7vw,88px);}
.hp-hero-content-inner{max-width:640px;}
.hp-hero-content .hp-label{color:var(--hp-accent-light); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); padding:6px 16px; border-radius:30px; backdrop-filter:blur(4px);}
.hp-hero-content h1{
  color:#fff; font-size:clamp(36px,6vw,68px); line-height:1.05; margin:22px 0 20px; font-family:'Hind',serif; font-weight:700;
  opacity:0; transform:translateY(30px); animation:hpEnter 1s .3s cubic-bezier(.16,1,.3,1) forwards;
}
.hp-hero-content p{
  color:rgba(255,255,255,.82); font-size:16px; line-height:1.75; max-width:480px; margin:0 0 34px;
  opacity:0; transform:translateY(24px); animation:hpEnter 1s .55s cubic-bezier(.16,1,.3,1) forwards;
}
.hp-hero-actions{
  display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; transform:translateY(20px); animation:hpEnter 1s .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes hpEnter{to{opacity:1; transform:none;}}
html.reduce-motion .hp-hero-content h1, html.reduce-motion .hp-hero-content p, html.reduce-motion .hp-hero-actions{opacity:1; transform:none; animation:none;}

.hp-hero-nav{position:absolute; z-index:5; bottom:clamp(50px,7vw,88px); right:clamp(24px,6vw,90px); display:flex; gap:10px;}
.hp-hero-nav button{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08);
  color:#fff; display:flex; align-items:center; justify-content:center; transition:all .25s ease; backdrop-filter:blur(4px);
}
.hp-hero-nav button:hover{background:var(--hp-accent); border-color:var(--hp-accent);}
.hp-hero-dots{position:absolute; z-index:5; left:clamp(24px,6vw,90px); bottom:clamp(50px,7vw,88px); display:flex; gap:8px;}
.hp-hero-dots button{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:none; padding:0; transition:all .3s ease;}
.hp-hero-dots button.active{width:26px; border-radius:4px; background:var(--hp-accent-light);}

/* ---------------------------------------------------------------------
   3. ABOUT — editorial split with overlap
--------------------------------------------------------------------- */
.hp-about{background:var(--hp-surface);}
.hp-about-grid{display:grid; grid-template-columns:0.85fr 1fr; gap:0; align-items:center;}
.hp-about-media{position:relative;}
.hp-about-media img{width:100%; height:520px; object-fit:cover; display:block;}
.hp-about-float{
  position:absolute; bottom:-30px; right:-30px; background:var(--hp-primary); color:#fff; padding:26px 30px;
  max-width:230px; box-shadow:0 24px 48px -16px rgba(18,40,32,.4);
}
.hp-about-float .n{font-family:'Hind',serif; font-size:38px; font-weight:700; color:var(--hp-accent-light); line-height:1;}
.hp-about-float .l{font-size:11.5px; color:#dce6e0; text-transform:uppercase; letter-spacing:.6px; margin-top:8px; display:block;}
.hp-about-copy{padding:0 0 0 90px;}
.hp-about-copy h2{font-size:clamp(28px,3.4vw,42px); line-height:1.18; margin:0 0 22px;}
.hp-about-copy p{font-size:15px; line-height:1.9; color:var(--hp-ink-soft); margin:0 0 30px; max-width:46ch;}
.hp-about-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--hp-primary); border-bottom:2px solid var(--hp-accent); padding-bottom:4px;}
@media (max-width:980px){
  .hp-about-grid{grid-template-columns:1fr;}
  .hp-about-copy{padding:60px 24px 0;}
  .hp-about-media img{height:360px;}
  .hp-about-float{right:24px;}
}

/* ---------------------------------------------------------------------
   4. STATS — horizontal integrated strip, oversized numerals
--------------------------------------------------------------------- */
.hp-stats{background:var(--hp-surface-tint); border-top:1px solid var(--hp-line); border-bottom:1px solid var(--hp-line);}
.hp-stats-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:56px 0;}
.hp-stat{flex:1; min-width:150px; text-align:center; position:relative;}
.hp-stat:not(:last-child)::after{content:''; position:absolute; right:0; top:8px; bottom:8px; width:1px; background:var(--hp-line);}
.hp-stat .n{font-family:'Hind',serif; font-weight:700; font-size:clamp(38px,4.4vw,58px); color:var(--hp-primary); line-height:1;}
.hp-stat .l{display:block; margin-top:10px; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--hp-ink-soft); font-weight:600;}
@media (max-width:700px){ .hp-stat:nth-child(2n)::after{display:none;} }

/* ---------------------------------------------------------------------
   5. TRADES SHOWCASE (interactive; replaces the generic-card pattern)
--------------------------------------------------------------------- */
.hp-trades{background:var(--hp-primary-dark); position:relative; overflow:hidden;}
.hp-trades::before{content:''; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(181,113,63,.25), transparent 70%); top:-160px; left:-120px;}
.hp-trades-head{text-align:center; max-width:640px; margin:0 auto 60px; position:relative; z-index:2;}
.hp-trades-head h2{color:#fff;}
.hp-trades-head p{color:#c3d1c9; font-size:14.5px; margin-top:14px;}
.hp-trades-showcase{display:grid; grid-template-columns:1.3fr 0.7fr; gap:2px; position:relative; z-index:2; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden;}
.hp-trades-featured{background:var(--hp-primary); padding:48px; min-height:360px; display:flex; flex-direction:column; justify-content:flex-end; position:relative;}
.hp-trades-featured i.big-icon{font-size:44px; color:var(--hp-accent-light); margin-bottom:20px;}
.hp-trades-featured h3{color:#fff; font-size:clamp(24px,2.6vw,32px); margin:0 0 12px;}
.hp-trades-featured p{color:#d4ddd7; font-size:13.5px; max-width:38ch; margin:0;}
.hp-trades-tabs{display:flex; flex-direction:column;}
.hp-trades-tab{
  display:flex; align-items:center; gap:14px; padding:20px 24px; background:var(--hp-primary-dark);
  border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; transition:background .2s ease; text-align:left; width:100%;
}
.hp-trades-tab:last-child{border-bottom:none;}
.hp-trades-tab i{font-size:16px; color:var(--hp-accent-light); width:22px; text-align:center; flex-shrink:0;}
.hp-trades-tab span{color:#e6ece9; font-size:13.5px; font-weight:600;}
.hp-trades-tab:hover, .hp-trades-tab.active{background:var(--hp-primary);}
.hp-trades-tab.active span{color:#fff;}
@media (max-width:860px){ .hp-trades-showcase{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------------
   6. NEWS & TENDERS — editorial featured + preview carousel
--------------------------------------------------------------------- */
.hp-news{background:var(--hp-surface);}
.hp-news-cols{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.hp-nt-carousel{position:relative;}
.hp-nt-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px;}
.hp-nt-head a{font-size:12.5px; font-weight:700; color:var(--hp-primary);}
.hp-nt-track{position:relative; min-height:230px;}
.hp-nt-slide{display:none; animation:hpFade .5s ease;}
.hp-nt-slide.active{display:block;}
@keyframes hpFade{from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:none;}}
.hp-nt-featured{border-left:3px solid var(--hp-accent); padding-left:22px; margin-bottom:18px;}
.hp-nt-featured .date{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--hp-accent); font-weight:700;}
.hp-nt-featured h4{font-size:19px; line-height:1.4; margin:8px 0 0; color:var(--hp-ink);}
.hp-nt-featured h4 a{color:inherit;}
.hp-nt-preview{display:flex; flex-direction:column; gap:2px;}
.hp-nt-preview .notice-row{padding:12px 0; border-bottom:1px solid var(--hp-line);}
.hp-nt-preview .notice-row:last-child{border-bottom:none;}
.hp-nt-preview .notice-date{background:var(--hp-surface-tint); color:var(--hp-primary);}
.hp-nt-preview .notice-date .d, .hp-nt-preview .notice-date .m{color:var(--hp-primary);}
.hp-nt-nav{display:flex; gap:8px; margin-top:22px;}
.hp-nt-nav button{width:38px; height:38px; border-radius:50%; border:1px solid var(--hp-line); background:var(--hp-surface); color:var(--hp-primary); display:flex; align-items:center; justify-content:center; transition:all .2s ease;}
.hp-nt-nav button:hover{background:var(--hp-primary); color:#fff; border-color:var(--hp-primary);}
@media (max-width:900px){ .hp-news-cols{grid-template-columns:1fr; gap:50px;} }

/* ---------------------------------------------------------------------
   7. GALLERY — featured + peeking neighbors, hover zoom, caption reveal
--------------------------------------------------------------------- */
.hp-gallery{background:var(--hp-surface-tint);}
.hp-gallery-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:44px; flex-wrap:wrap; gap:16px;}
.hp-gallery .gallery-carousel{--gallery-visible:2.3; border-radius:4px;}
.hp-gallery .gallery-item{border-radius:4px; overflow:hidden; position:relative;}
.hp-gallery .gallery-item img{transition:transform .6s cubic-bezier(.16,1,.3,1); display:block; width:100%; height:100%; object-fit:cover;}
.hp-gallery .gallery-item:hover img{transform:scale(1.08);}
.hp-gallery-cap{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px 14px;
  background:linear-gradient(0deg, rgba(18,40,32,.88), transparent);
  color:#fff; font-size:13px; font-weight:600; opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
.hp-gallery .gallery-item:hover .hp-gallery-cap{opacity:1; transform:none;}
@media (max-width:760px){ .hp-gallery .gallery-carousel{--gallery-visible:1.15;} }

/* ---------------------------------------------------------------------
   9. CTA — dramatic full-bleed
--------------------------------------------------------------------- */
.hp-cta{position:relative; padding:140px 0; text-align:center; overflow:hidden; background:var(--hp-primary-dark) url('../images/banner-2.jpg') center/cover fixed;}
.hp-cta::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,40,32,.75), rgba(18,40,32,.92));}
.hp-cta-inner{position:relative; z-index:2; max-width:680px; margin:0 auto;}
.hp-cta-inner h2{color:#fff; font-size:clamp(28px,4vw,46px); margin:18px 0 20px; line-height:1.2;}
.hp-cta-inner p{color:#cfdad3; font-size:15px; margin:0 0 34px;}
@media (max-width:640px){ .hp-cta{background-attachment:scroll; padding:90px 0;} }

/* ---------------------------------------------------------------------
   10. CONTACT / LOCATION split
--------------------------------------------------------------------- */
.hp-contact-grid{display:grid; grid-template-columns:1.2fr 0.8fr; min-height:480px;}
.hp-contact-map iframe{width:100%; height:100%; min-height:380px; display:block; border:0; filter:grayscale(.25) contrast(1.05);}
.hp-contact-panel{background:var(--hp-primary); color:#fff; padding:60px 50px; display:flex; flex-direction:column; justify-content:center;}
.hp-contact-panel h2{color:#fff; font-size:26px; margin:14px 0 24px;}
.hp-contact-item{display:flex; gap:16px; margin-bottom:22px;}
.hp-contact-item i{width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--hp-accent-light); flex-shrink:0;}
.hp-contact-item .t{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#a9c0b3; margin-bottom:4px;}
.hp-contact-item .v{font-size:14px; color:#fff; font-weight:500;}
@media (max-width:900px){ .hp-contact-grid{grid-template-columns:1fr;} .hp-contact-map iframe{min-height:280px;} }

/* ---------------------------------------------------------------------
   11. FOOTER OVERRIDE — layered image background (homepage only)
--------------------------------------------------------------------- */
.hp-v9-footer{position:relative; background:var(--hp-primary-dark) !important;}
.hp-v9-footer::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,40,32,.92), rgba(9,20,16,.97)), url('../images/about.jpg') center/cover;
  z-index:0;
}
.hp-v9-footer > *{position:relative; z-index:1;}

/* =====================================================================
   REDESIGN 2026 v10 — HOMEPAGE ADDITIONS (fills gaps vs latest spec)
   New components only; nothing here removes or renames anything v9
   already established. Still scoped under .hp-v9.
   ===================================================================== */

/* ---- Hero scroll-down indicator ---- */
.hp-scroll-cue{
  position:absolute; z-index:5; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(255,255,255,.75);
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px;
}
.hp-scroll-cue i{animation:hpBounce 1.8s ease-in-out infinite;}
@keyframes hpBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}
html.reduce-motion .hp-scroll-cue i{animation:none;}

/* ---- Floating quick-info panel overlapping hero bottom ---- */
.hp-quickpanel-wrap{position:relative; z-index:6; margin-top:-46px;}
.hp-quickpanel{
  max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5); border-radius:10px; box-shadow:0 24px 48px -18px rgba(18,40,32,.35); overflow:hidden;
}
.hp-quick-item{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:26px 12px;
  border-right:1px solid rgba(28,58,46,.08); transition:background .25s ease, transform .25s ease;
}
.hp-quick-item:last-child{border-right:0;}
.hp-quick-item:hover{background:rgba(255,255,255,.9); transform:translateY(-3px);}
.hp-quick-item i{width:44px; height:44px; border-radius:50%; background:var(--hp-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px;}
.hp-quick-item span{font-size:12px; font-weight:700; color:var(--hp-ink);}
@media (max-width:900px){ .hp-quickpanel{grid-template-columns:repeat(3,1fr);} .hp-quick-item:nth-child(3){border-right:0;} }
@media (max-width:560px){ .hp-quickpanel{grid-template-columns:repeat(2,1fr); border-radius:0;} .hp-quickpanel-wrap{margin-top:0;} }

/* ---- About: highlight points ---- */
.hp-about-points{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px;}
.hp-about-points li{display:flex; align-items:flex-start; gap:12px; font-size:13.5px; color:var(--hp-ink-soft);}
.hp-about-points i{color:var(--hp-accent); margin-top:3px; flex-shrink:0;}

/* ---- Trades: horizontal numbered "learning pathway" ---- */
.hp-pathway{display:flex; flex-direction:column; gap:0; position:relative; z-index:2;}
.hp-pathway-row{
  display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:28px;
  padding:28px 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.hp-pathway-row:last-child{border-bottom:none;}
.hp-pathway-row:nth-child(even){grid-template-columns:110px 1fr auto;}
.hp-pathway-num{font-family:'Hind',serif; font-size:42px; font-weight:700; color:rgba(255,255,255,.18); line-height:1;}
.hp-pathway-main{display:flex; align-items:center; gap:18px;}
.hp-pathway-main i{width:46px; height:46px; border-radius:50%; background:var(--hp-primary); color:var(--hp-accent-light); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
.hp-pathway-main h3{color:#fff; font-size:17px; margin:0 0 4px;}
.hp-pathway-main p{color:#b9c8bf; font-size:12.5px; margin:0;}
.hp-pathway-row a{color:var(--hp-accent-light); font-size:12.5px; font-weight:700; white-space:nowrap;}
@media (max-width:700px){
  .hp-pathway-row{grid-template-columns:56px 1fr; row-gap:10px;}
  .hp-pathway-num{font-size:28px;}
  .hp-pathway-row a{grid-column:2; }
}

/* ---- Admission CTA section ---- */
.hp-admission{position:relative; padding:120px 0; overflow:hidden; background:var(--hp-primary) url('../images/banner-3.jpg') center/cover;}
.hp-admission::before{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(18,40,32,.94) 0%, rgba(18,40,32,.55) 70%);}
.hp-admission-inner{position:relative; z-index:2; max-width:560px;}
.hp-admission-inner h2{color:#fff; font-size:clamp(28px,3.6vw,42px); margin:16px 0 18px; line-height:1.2;}
.hp-admission-inner p{color:#d7e2db; font-size:14.5px; margin:0 0 22px;}
.hp-admission-points{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:10px;}
.hp-admission-points li{display:flex; gap:10px; color:#e6ece9; font-size:13.5px;}
.hp-admission-points i{color:var(--hp-accent-light); margin-top:3px;}
@media (max-width:640px){ .hp-admission{padding:80px 0;} }

/* ---- Events / "What's Happening" timeline ---- */
.hp-events{background:var(--hp-surface);}
.hp-events-track{display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; margin:0 -4px;}
.hp-events-track::-webkit-scrollbar{height:5px;}
.hp-events-track::-webkit-scrollbar-thumb{background:var(--hp-line); border-radius:4px;}
.hp-event-card{
  scroll-snap-align:start; flex:0 0 260px; margin:0 12px; padding:24px 20px; border-left:3px solid var(--hp-accent);
  background:var(--hp-surface-tint);
}
.hp-event-card .date{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--hp-accent); font-weight:700;}
.hp-event-card h4{font-size:15px; margin:10px 0 8px; color:var(--hp-ink);}
.hp-event-card p{font-size:12.5px; color:var(--hp-ink-soft); margin:0; line-height:1.6;}

/* ---- Campus Life immersive ---- */
.hp-campus{position:relative; height:520px; overflow:hidden;}
.hp-campus img{width:100%; height:100%; object-fit:cover; transition:transform 8s ease;}
.hp-campus.hp-in img{transform:scale(1.06);}
.hp-campus::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,40,32,.85) 0%, rgba(18,40,32,.1) 55%);}
.hp-campus-panel{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:44px clamp(24px,6vw,80px);}
.hp-campus-panel .hp-label{color:var(--hp-accent-light);}
.hp-campus-panel h2{color:#fff; font-size:clamp(24px,3vw,36px); margin:12px 0 10px;}
.hp-campus-panel p{color:#dde6e0; font-size:14px; max-width:520px; margin:0;}
@media (max-width:640px){ .hp-campus{height:380px;} }

/* ---- Video Gallery teaser ---- */
.hp-video{background:var(--hp-primary-dark); padding:90px 0;}
.hp-video-inner{display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; max-width:1000px; margin:0 auto; padding:0 24px;}
.hp-video-play{
  width:64px; height:64px; border-radius:50%; background:var(--hp-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(181,113,63,.5); animation:hpPulse 2.4s ease-out infinite;
}
@keyframes hpPulse{0%{box-shadow:0 0 0 0 rgba(181,113,63,.45);} 70%{box-shadow:0 0 0 22px rgba(181,113,63,0);} 100%{box-shadow:0 0 0 0 rgba(181,113,63,0);}}
html.reduce-motion .hp-video-play{animation:none;}
.hp-video-text{display:flex; align-items:center; gap:22px;}
.hp-video-text h3{color:#fff; font-size:20px; margin:0 0 6px;}
.hp-video-text p{color:#c3d1c9; font-size:13.5px; margin:0;}
@media (max-width:640px){ .hp-video-inner{grid-template-columns:1fr; text-align:center;} .hp-video-text{flex-direction:column;} }

/* ---- Principal / Leadership asymmetric ---- */
.hp-principal{background:var(--hp-surface-tint);}
.hp-principal-grid{display:grid; grid-template-columns:0.7fr 1fr; gap:0; align-items:center;}
.hp-principal-photo{position:relative; height:460px;}
.hp-principal-photo .frame{
  position:absolute; inset:30px 10px 10px 30px; background-size:cover; background-position:center; border:6px solid var(--hp-surface); box-shadow:0 24px 48px -16px rgba(18,40,32,.3);
}
.hp-principal-photo::before{content:''; position:absolute; inset:0 30px 30px 0; border:2px solid var(--hp-accent);}
.hp-principal-copy{padding:0 0 0 70px;}
.hp-principal-copy i.q{font-size:32px; color:var(--hp-accent); opacity:.5;}
.hp-principal-copy blockquote{font-family:'Hind',serif; font-size:19px; line-height:1.65; color:var(--hp-ink); margin:16px 0 26px; font-style:italic;}
.hp-principal-copy h4{margin:0; font-size:15px; color:var(--hp-primary);}
.hp-principal-copy span{font-size:12.5px; color:var(--hp-ink-soft);}
@media (max-width:900px){ .hp-principal-grid{grid-template-columns:1fr;} .hp-principal-copy{padding:40px 24px 0;} .hp-principal-photo{height:320px;} }

/* ---- Institute Values — large typographic statements ---- */
.hp-values{background:var(--hp-primary-dark); padding:100px 0;}
.hp-values-list{max-width:900px; margin:0 auto;}
.hp-value-line{
  display:flex; align-items:baseline; gap:24px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.1);
  transition:padding-left .3s ease;
}
.hp-value-line:hover{padding-left:14px;}
.hp-value-line:last-child{border-bottom:none;}
.hp-value-line .idx{font-size:13px; color:var(--hp-accent-light); font-weight:700; flex-shrink:0; width:28px;}
.hp-value-line h3{
  font-family:'Hind',serif; font-size:clamp(22px,3vw,34px); color:#fff; margin:0; font-weight:700;
  transition:color .3s ease;
}
.hp-value-line:hover h3{color:var(--hp-accent-light);}

/* =====================================================================
   REDESIGN 2026 v12 — MATCH REFERENCE DESIGN (navy + orange)
   Built to closely follow the provided reference screenshot: top bar
   with social + accessibility controls, orange pill nav, hero with
   stat badges, Welcome+Principal split, Latest Updates ticker, Trades
   featured+grid, Tenders table (using only real DB columns), Gallery
   strip, Contact+Enquiry split. Applies via the site's shared base
   classes so it's consistent with already-redesigned inner pages.
   ===================================================================== */

/* ---- Top bar: social icons + accessibility font-size controls ---- */
.topbar-simple-inner{justify-content:space-between;}
.topbar-simple-left{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.topbar-simple-right{display:flex; align-items:center; gap:16px;}
.topbar-social{display:flex; align-items:center; gap:10px;}
.topbar-social a{color:#cfe0f0; font-size:12.5px;}
.topbar-social a:hover{color:var(--saffron-soft);}
.skip-topbar-link{color:#cfe0f0; font-size:12.5px;}
.skip-topbar-link:hover{color:#fff;}
.fs-controls{display:flex; align-items:center; gap:2px; border-left:1px solid rgba(255,255,255,.18); padding-left:14px; margin-left:2px;}
.fs-controls button{
  background:none; border:none; color:#cfe0f0; font-size:11px; font-weight:700; padding:2px 6px; cursor:pointer; border-radius:4px;
}
.fs-controls button:hover{background:rgba(255,255,255,.1); color:#fff;}
.fs-controls button[data-fs="up"]{font-size:13px;}
.fs-controls button[data-fs="down"]{font-size:10px;}

/* ---- Orange pill nav (overrides v7's dark-pill treatment) ---- */
.navbar{background:var(--saffron);}
.nav-list>li>a, .nav-list>li>button.nav-top-link{color:#fff; font-weight:600;}
.nav-list>li>a:hover, .nav-list>li>button.nav-top-link:hover{background:rgba(255,255,255,.16); transform:none;}
.nav-list>li.open>button.nav-top-link{background:var(--navy-900); color:#fff;}
.nav-list>li>a[style*="border-bottom-color"]{background:var(--navy-900) !important; color:#fff !important;}
.dropdown{border-top:3px solid var(--navy-900);}
@media (max-width:980px){
  .navbar{background:var(--navy-950);}
}

/* ---- Hero: stat badge row + orange label ---- */
.hero-stat-badges{position:relative; z-index:5; display:flex; gap:26px; flex-wrap:wrap; margin:22px 0 26px;}
.hero-stat-badges .b{display:flex; align-items:center; gap:10px; color:#fff;}
.hero-stat-badges .b i{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.hero-stat-badges .b .t1{font-size:12.5px; font-weight:700; line-height:1.3;}
.hero-stat-badges .b .t2{font-size:10.5px; color:#d8e2ea;}

/* ---- Welcome + Principal split (reuses .welcome-split / .message-card base classes) ---- */
.ref-welcome-principal{display:grid; grid-template-columns:1.15fr 0.85fr; gap:32px; align-items:stretch;}
.ref-welcome-tilt{position:relative; padding:14px 24px 24px 0; max-width:480px;}
.ref-welcome-tilt img{width:100%; height:260px; object-fit:cover; border-radius:10px; transform:rotate(-2deg); box-shadow:var(--shadow-3); position:relative; z-index:2; display:block;}
.ref-welcome-tilt::before{content:''; position:absolute; left:-16px; top:-10px; width:56px; height:56px; background:var(--saffron); z-index:1; border-radius:8px;}
.ref-welcome-tilt::after{content:''; position:absolute; right:0; bottom:0; width:64px; height:100px; background:var(--navy-900); z-index:1; border-radius:8px;}
@media (max-width:900px){ .ref-welcome-tilt{max-width:100%; padding:14px 14px 24px 0;} }
.ref-principal-card{background:var(--navy-950); border-radius:10px; padding:32px 28px; color:#fff; display:flex; flex-direction:column; justify-content:center;}
.ref-principal-card .avatar{width:200px; height:200px; border-radius:50%; object-fit:cover; border:2px solid var(--saffron-soft); margin-bottom:16px;}
.ref-principal-card h3{color:#fff; font-size:17px; margin:0 0 10px;}
.ref-principal-card i.q{color:var(--saffron-soft); font-size:20px; margin-bottom:8px; display:block;}
.ref-principal-card p{font-size:13.5px; line-height:1.75; color:#d3dee7; font-style:italic; margin:0 0 16px;}
.ref-principal-card .who{font-size:12.5px; color:#9fb2c2; margin-bottom:18px;}
.ref-principal-card .who b{display:block; color:#fff; font-size:13px;}
@media (max-width:900px){ .ref-welcome-principal{grid-template-columns:1fr;} }

/* ---- Latest Updates horizontal ticker (real news data) ---- */
.ref-updates{background:var(--surface-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.ref-updates-row{display:flex; align-items:center; gap:26px; padding:20px 0;}
.ref-updates-label{display:flex; align-items:center; gap:12px; flex-shrink:0; min-width:220px;}
.ref-updates-label i{width:36px; height:36px; border-radius:50%; background:var(--saffron); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;}
.ref-updates-label h4{margin:0; font-size:14px; color:var(--navy-900);}
.ref-updates-label span{font-size:11px; color:var(--ink-500);}
.ref-updates-track-wrap{flex:1; overflow:hidden;}
.ref-updates-track{display:flex; gap:14px;}
.ref-update-chip{
  display:flex; align-items:center; gap:12px; background:var(--navy-950); color:#fff; padding:10px 16px;
  border-radius:8px; white-space:nowrap; flex-shrink:0;
}
.ref-update-chip .dd{background:var(--saffron); border-radius:5px; padding:4px 8px; text-align:center; line-height:1.1;}
.ref-update-chip .dd .n{display:block; font-weight:700; font-size:13px;}
.ref-update-chip .dd .m{display:block; font-size:9px; text-transform:uppercase;}
.ref-update-chip .tt{font-size:12.5px; max-width:220px; white-space:normal;}
@media (max-width:760px){ .ref-updates-label{min-width:0;} .ref-updates-row{flex-wrap:wrap;} }

/* ---- Our Trades: featured + icon grid (real 7 trades) ---- */
.ref-trades-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.ref-trade-featured{position:relative; border-radius:10px; overflow:hidden; min-height:260px; background:var(--navy-950);}
.ref-trade-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease; pointer-events:none;}
.ref-trade-slide.active{position:relative; opacity:1; visibility:visible; pointer-events:auto;}
.ref-trade-slide img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:.55;}
.ref-trade-slide-iconbg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--navy-900), var(--navy-700));}
.ref-trade-slide-iconbg i{font-size:110px; color:rgba(255,255,255,.08);}
.ref-trade-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; transition:background .2s ease;
}
.ref-trade-nav:hover{background:var(--saffron); border-color:var(--saffron);}
.ref-trade-nav.prev{left:14px;} .ref-trade-nav.next{right:14px;}
.ref-trade-featured img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:.55;}
.ref-trade-featured-content{position:relative; z-index:2; padding:50px; height:100%; display:flex; flex-direction:column; justify-content:flex-end;}
.ref-trade-featured-content i.badge{width:42px; height:42px; border-radius:8px; background:var(--saffron); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:14px;}
.ref-trade-featured-content h3{color:#fff; font-size:20px; margin:0 0 8px;}
.ref-trade-featured-content p{color:#dbe4ec; font-size:13px; margin:0 0 16px; max-width:34ch;}
.ref-trade-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.ref-trade-mini{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px 14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  width:100%; text-align:left; cursor:pointer; font-family:inherit;
}
.ref-trade-mini:hover{box-shadow:var(--shadow-2); transform:translateY(-3px);}
.ref-trade-mini.active{border-color:var(--saffron); box-shadow:0 0 0 2px rgba(229,139,31,.18);}
.ref-trade-mini i{width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff;}
.ref-trade-mini span{font-size:12.5px; font-weight:600; color:var(--navy-900); line-height:1.35;}
@media (max-width:900px){ .ref-trades-grid{grid-template-columns:1fr;} }
@media (max-width:560px){ .ref-trade-mini-grid{grid-template-columns:1fr 1fr;} }

/* ---- Tenders: dark panel styling the REAL .notice-row output (date+title only) ---- */
.ref-tenders-panel{background:var(--navy-950); border-radius:10px; overflow:hidden;}
.ref-tenders-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.1); flex-wrap:wrap; gap:12px;}
.ref-tenders-head .l{display:flex; align-items:center; gap:12px;}
.ref-tenders-head i.icon{width:34px; height:34px; border-radius:50%; background:var(--saffron); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ref-tenders-head h3{color:#fff; margin:0; font-size:15px;}
.ref-tenders-head span{font-size:11.5px; color:#9fb2c2;}
.ref-tenders-list{background:var(--surface); padding:6px 22px 14px;}
.ref-tenders-list .notice-row{border-bottom:1px solid var(--line);}
.ref-tenders-list .notice-row:first-child{background:var(--surface-tint); margin:0 -22px; padding:0 22px; border-radius:6px;}
.ref-tenders-list .notice-row:last-child{border-bottom:none;}
.ref-tenders-list .notice-date{background:var(--navy-950);}
.ref-tenders-list .notice-date .d, .ref-tenders-list .notice-date .m{color:var(--saffron-soft);}
.ref-tenders-list .notice-body h4 a{color:var(--navy-900);}
.ref-tenders-list .notice-body h4 a:hover{color:var(--saffron);}
.ref-tenders-list .notice-body span{color:var(--ink-500);}

/* ---- Gallery strip (thin horizontal, reuses gallery-carousel) ---- */
.ref-gallery .gallery-carousel{--gallery-visible:4;}
@media (max-width:860px){ .ref-gallery .gallery-carousel{--gallery-visible:2.2;} }
@media (max-width:520px){ .ref-gallery .gallery-carousel{--gallery-visible:1.3;} }
.ref-gallery .gallery-item{border-radius:8px; overflow:hidden; height:160px;}
.ref-gallery .gallery-item img{width:100%; height:100%; object-fit:cover;}

/* ---- Contact + Quick Enquiry split ---- */
.ref-contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; border-radius:10px; overflow:hidden; box-shadow:var(--shadow-2);}
.ref-contact-side{
  position:relative; background:var(--navy-950); color:#fff; padding:40px 34px; display:flex; flex-direction:column; justify-content:center;
}
.ref-contact-side::before{content:''; position:absolute; inset:0; background:url('../images/programme-1.jpg') center/cover; opacity:.18;}
.ref-contact-side > *{position:relative; z-index:1;}
.ref-contact-side h2{color:#fff; font-size:22px; margin:8px 0 20px;}
.ref-contact-side .item{display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:13.5px; color:#e2eaf0;}
.ref-contact-side .item i{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:var(--saffron-soft); flex-shrink:0;}
.ref-enquiry-side{background:var(--surface); padding:40px 34px;}
.ref-enquiry-side h3{margin:0 0 4px; font-size:17px; color:var(--navy-900);}
.ref-enquiry-side .sub{font-size:12.5px; color:var(--ink-500); margin:0 0 22px;}
@media (max-width:860px){ .ref-contact-grid{grid-template-columns:1fr;} }