/* ===================== 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; height:52px; 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%); }
}

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