/* ==========================================================================
   Global Excellence Forum (GEF) — Institutional Design System
   Tokens -> Base -> Layout -> Components -> Sections -> Responsive -> Motion
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Institutional navy — authority */
  --navy-900:#071B33; --navy-800:#0A2542; --navy-700:#103458;
  --navy-600:#1A4A78; --navy-500:#2A6099; --navy-100:#E8EFF7;

  /* Saffron — energy (600/700 are text-safe on white) */
  --saffron-700:#8F4600; --saffron-600:#B25A00; --saffron-500:#E27A12;
  --saffron-400:#F49B36; --saffron-100:#FDF0E1;

  /* India green — growth */
  --green-800:#07452B; --green-700:#0A5C39; --green-600:#0E7A4B;
  --green-500:#159C61; --green-100:#E4F4EC;

  /* Gold — distinction */
  --gold-700:#8A6413; --gold-600:#A67C1A; --gold-500:#C9A227; --gold-100:#FBF3DC;

  /* Neutrals */
  --ink:#0D1826; --ink-2:#3E5068; --ink-3:#5D6F88;
  --line:#E3E9F0; --line-2:#EEF2F7;
  --paper:#FFFFFF; --paper-2:#F7F9FC; --paper-warm:#FCF9F3;

  /* Semantic */
  --brand:var(--navy-800); --accent:var(--saffron-500); --accent-text:var(--saffron-600);
  --surface:var(--paper); --surface-2:var(--paper-2); --on-surface:var(--ink);
  --on-surface-muted:var(--ink-2); --border:var(--line);
  --focus:#0B69D4;

  /* Spacing (4/8 rhythm) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:999px;

  /* Layered shadows */
  --sh-1:0 1px 2px rgba(10,37,66,.06), 0 1px 3px rgba(10,37,66,.05);
  --sh-2:0 2px 4px rgba(10,37,66,.05), 0 6px 16px rgba(10,37,66,.07);
  --sh-3:0 4px 8px rgba(10,37,66,.06), 0 16px 32px rgba(10,37,66,.10);
  --sh-4:0 8px 16px rgba(10,37,66,.08), 0 28px 56px rgba(10,37,66,.14);

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:180ms; --t-base:280ms; --t-slow:420ms;

  /* Layers */
  --z-bg:0; --z-content:1; --z-sticky:40; --z-drawer:80; --z-overlay:100; --z-skip:200;

  --container:1240px;
  --nav-h:78px; --topbar-h:38px;

  /* User font-size control (A- / A / A+) */
  --font-scale:1;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--on-surface);
  font-family:"Inter","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:calc(16px * var(--font-scale));
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,h5{
  font-family:"Plus Jakarta Sans","Noto Sans Devanagari",system-ui,sans-serif;
  color:var(--navy-900); margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:700;
  text-wrap:balance;
}
p{margin:0; text-wrap:pretty}
img{max-width:100%; display:block; height:auto}
a{color:var(--navy-600); text-decoration-thickness:1px; text-underline-offset:3px}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; cursor:pointer}
:where(input,textarea,select){font:inherit; color:inherit}
::selection{background:var(--saffron-100); color:var(--navy-900)}

:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}

.skip-link{
  position:fixed; left:16px; top:-120px; z-index:var(--z-skip);
  background:var(--navy-800); color:#fff; padding:14px 22px;
  border-radius:0 0 var(--r-md) var(--r-md);
  font-weight:600; text-decoration:none; transition:top var(--t-base) var(--e-out);
}
.skip-link:focus{top:0}
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. LAYOUT ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
.section{padding-block:clamp(56px,8vw,var(--sp-9)); position:relative}
.section--tight{padding-block:clamp(40px,6vw,72px)}

/* ---------- 4. TYPOGRAPHY SCALE (fluid) ---------- */
.display{font-size:clamp(2.05rem,1.1rem + 4.1vw,4.05rem); line-height:1.07; letter-spacing:-.035em}
.h1{font-size:clamp(1.85rem,1.2rem + 2.8vw,3rem)}
.h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.45rem)}
.h3{font-size:clamp(1.18rem,1rem + .8vw,1.5rem); letter-spacing:-.015em}
.h4{font-size:clamp(1.02rem,.97rem + .32vw,1.15rem); letter-spacing:-.01em}
.lead{font-size:clamp(1rem,.96rem + .38vw,1.18rem); color:var(--ink-2); line-height:1.68; max-width:66ch}
.body-sm{font-size:.9375rem; color:var(--ink-2); line-height:1.62}
.body-xs{font-size:.85rem; color:var(--ink-3); line-height:1.55}
.overline{
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); display:inline-flex; align-items:center; gap:var(--sp-2);
}
.overline::before{content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--saffron-500),var(--gold-500))}
.overline--light{color:var(--saffron-400)}
.measure{max-width:64ch}
.devanagari{font-family:"Noto Sans Devanagari","Inter",sans-serif}
.tnum{font-variant-numeric:tabular-nums}
.text-center{text-align:center}

.section-head{max-width:780px; margin-bottom:clamp(32px,4vw,var(--sp-7))}
.section-head .h2{margin-top:var(--sp-3)}
.section-head .lead{margin-top:var(--sp-4)}
.section-head--center{margin-inline:auto; text-align:center}
.section-head--center .lead{margin-inline:auto}
.section-head--center .overline{justify-content:center}

/* ---------- 5. DECORATIVE BACKDROPS ---------- */
.bg-grid{
  position:absolute; inset:0; z-index:var(--z-bg); pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 15%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 15%,transparent 78%);
}
.bg-warm{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-warm) 48%,var(--paper) 100%)}
.bg-cool{background:var(--paper-2)}
.chakra-motif{
  position:absolute; pointer-events:none; z-index:var(--z-bg);
  opacity:.055; color:var(--navy-700); animation:chakra-spin 150s linear infinite;
}
.chakra-motif--light{opacity:.09; color:#fff}
@keyframes chakra-spin{to{transform:rotate(360deg)}}
.tri-rule{height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--saffron-500) 0 33.33%,#F4F6F9 33.33% 66.66%,var(--green-600) 66.66% 100%);
  box-shadow:inset 0 0 0 1px rgba(10,37,66,.10)}

/* ---------- 6. BUTTONS ---------- */
.btn{
  --btn-bg:var(--navy-800); --btn-fg:#fff; --btn-bd:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 26px; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  font-weight:650; font-size:.95rem; letter-spacing:-.01em; text-decoration:none;
  cursor:pointer; overflow:hidden; isolation:isolate; box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.3) 45%,transparent 70%);
  transform:translateX(-130%); transition:transform 660ms var(--e-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-3px); box-shadow:var(--sh-3)}
.btn:active{transform:translateY(-1px); transition-duration:90ms}
.btn .arrow{transition:transform var(--t-base) var(--e-out); flex:none}
.btn:hover .arrow{transform:translateX(4px)}

.btn--primary{--btn-bg:linear-gradient(135deg,var(--saffron-600),var(--saffron-700)); --btn-fg:#fff}
.btn--primary:hover{box-shadow:0 10px 28px rgba(178,90,0,.32), var(--sh-2)}
.btn--navy{--btn-bg:linear-gradient(135deg,var(--navy-700),var(--navy-900)); --btn-fg:#fff}
.btn--navy:hover{box-shadow:0 10px 28px rgba(10,37,66,.30), var(--sh-2)}
.btn--outline{--btn-bg:transparent; --btn-fg:var(--navy-800); --btn-bd:var(--navy-600); box-shadow:none}
.btn--outline:hover{--btn-bg:var(--navy-800); --btn-fg:#fff; --btn-bd:var(--navy-800)}
.btn--ghost-light{--btn-bg:rgba(255,255,255,.10); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:none}
.btn--ghost-light:hover{--btn-bg:#fff; --btn-fg:var(--navy-900); --btn-bd:#fff}
.btn--green{--btn-bg:linear-gradient(135deg,var(--green-600),var(--green-700)); --btn-fg:#fff}
.btn--sm{min-height:44px; padding:10px 18px; font-size:.875rem}
.btn--lg{min-height:56px; padding:16px 32px; font-size:1.02rem}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex; align-items:center; gap:7px; font-weight:650; font-size:.925rem;
  color:var(--navy-700); text-decoration:none; position:relative; padding-block:2px;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--saffron-500); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-base) var(--e-out);
}
.link-arrow:hover::after,.link-arrow:focus-visible::after{transform:scaleX(1); transform-origin:left}
.link-arrow svg{transition:transform var(--t-base) var(--e-out); flex:none}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 7. CARDS ---------- */
.card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--sh-1); overflow:hidden;
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-3); border-color:#D3DEEA}
.card__body{padding:clamp(20px,2.4vw,28px)}
.card--accent::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--saffron-500),var(--gold-500),var(--green-600));
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow) var(--e-out);
}
.card--accent:hover::before{transform:scaleX(1)}
.card__pattern{
  position:absolute; right:-28px; bottom:-28px; width:148px; height:148px;
  opacity:.045; color:var(--navy-800); pointer-events:none;
  transition:opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}
.card:hover .card__pattern{opacity:.1; transform:scale(1.08) rotate(8deg)}

.icon-badge{
  width:54px; height:54px; border-radius:var(--r-lg); display:grid; place-items:center;
  background:var(--navy-100); color:var(--navy-700); flex:none;
  transition:transform var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out);
}
.card:hover .icon-badge{transform:translateY(-2px) scale(1.06); background:var(--navy-800); color:#fff}
.icon-badge--saffron{background:var(--saffron-100); color:var(--saffron-700)}
.card:hover .icon-badge--saffron{background:var(--saffron-600); color:#fff}
.icon-badge--green{background:var(--green-100); color:var(--green-700)}
.card:hover .icon-badge--green{background:var(--green-700); color:#fff}
.icon-badge--gold{background:var(--gold-100); color:var(--gold-700)}
.card:hover .icon-badge--gold{background:var(--gold-700); color:#fff}

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:.73rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--navy-100); color:var(--navy-700); border:1px solid rgba(26,74,120,.14);
}
.chip--saffron{background:var(--saffron-100); color:var(--saffron-700); border-color:rgba(178,90,0,.18)}
.chip--green{background:var(--green-100); color:var(--green-700); border-color:rgba(14,122,75,.18)}
.chip--gold{background:var(--gold-100); color:var(--gold-700); border-color:rgba(166,124,26,.2)}
.chip--light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3)}

.media{position:relative; overflow:hidden; background:var(--navy-100)}
.media img{width:100%; height:100%; object-fit:cover; transition:transform 640ms var(--e-out)}
.card:hover .media img{transform:scale(1.06)}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}

/* ==========================================================================
   8. HEADER
   ========================================================================== */
.site-header{position:sticky; top:0; z-index:var(--z-sticky)}

/* Top institutional bar */
.topbar{
  background:linear-gradient(90deg,var(--navy-900),var(--navy-700) 55%,var(--navy-800));
  color:#D8E4F1; font-size:.8rem; border-bottom:1px solid rgba(255,255,255,.09);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); min-height:var(--topbar-h); flex-wrap:wrap}
.topbar__group{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.topbar a,.topbar button{
  color:#D8E4F1; text-decoration:none; background:none; border:0;
  padding:8px 10px; border-radius:var(--r-sm); font-size:.8rem; line-height:1;
  display:inline-flex; align-items:center; gap:6px; min-height:34px;
  transition:background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.topbar a:hover,.topbar button:hover{background:rgba(255,255,255,.13); color:#fff}
.topbar__sep{width:1px; height:16px; background:rgba(255,255,255,.2); margin-inline:6px}
.fontsize-group{display:inline-flex; align-items:center; gap:2px;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-pill); padding:2px}
.fontsize-group button{min-width:34px; justify-content:center; border-radius:var(--r-pill); padding:6px 8px}
.fontsize-group button[aria-pressed="true"]{background:var(--saffron-600); color:#fff; font-weight:700}
.lang-switch{display:inline-flex; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill); padding:2px; gap:2px}
.lang-switch button{border-radius:var(--r-pill); padding:6px 12px; min-height:30px}
.lang-switch button[aria-pressed="true"]{background:#fff; color:var(--navy-900); font-weight:700}

/* Main navigation */
.navbar{
  background:rgba(255,255,255,.97); border-bottom:1px solid var(--border);
  transition:background-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             backdrop-filter var(--t-base) var(--e-out);
}
.site-header.is-scrolled .navbar{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
          backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 4px 24px rgba(10,37,66,.10);
}
/* The bar carries brand + 9 destinations + a CTA, so it is allowed a wider
   track than the content container. */
.navbar > .container{max-width:1420px}
.navbar__inner{display:flex; align-items:center; gap:var(--sp-4); min-height:var(--nav-h)}

.brand{display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; flex:none}
.brand__mark{
  width:52px; height:52px; border-radius:12px; object-fit:contain; background:#fff;
  border:1px solid var(--border); padding:3px; flex:none;
}
.brand__text{display:flex; flex-direction:column; line-height:1.12}
.brand__name{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:1.06rem;
  color:var(--navy-900); letter-spacing:-.025em}
.brand__sub{font-size:.685rem; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; font-weight:600}
.brand__motto{font-size:.68rem; color:var(--saffron-700); font-weight:600}

.nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.nav__item{position:relative}
.nav__link{
  display:inline-flex; align-items:center; gap:5px; padding:10px 12px; border-radius:var(--r-sm);
  font-size:.905rem; font-weight:600; color:var(--navy-800); text-decoration:none;
  white-space:nowrap; background:none; border:0; min-height:42px;
  transition:color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.nav__link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:var(--saffron-500); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform var(--t-base) var(--e-out);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--navy-900); background:var(--navy-100)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1); transform-origin:left}
.nav__link.is-active{color:var(--saffron-700)}
.nav__link.is-active::after{transform:scaleX(1)}
.nav__caret{transition:transform var(--t-base) var(--e-out); flex:none}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:274px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-4); padding:8px; z-index:10;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out),
             visibility var(--t-base);
}
.dropdown::before{content:""; position:absolute; top:-8px; left:0; right:0; height:8px}
.nav__item.is-open .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{
  display:block; padding:10px 14px; border-radius:var(--r-sm); font-size:.885rem;
  color:var(--ink-2); text-decoration:none; font-weight:550; min-height:42px;
  transition:background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out),
             padding-left var(--t-fast) var(--e-out);
}
.dropdown a:hover,.dropdown a:focus-visible{background:var(--navy-100); color:var(--navy-900); padding-left:20px}

.nav-actions{display:flex; align-items:center; gap:var(--sp-3); flex:none}
.nav-toggle{
  display:none; width:48px; height:48px; border-radius:var(--r-md);
  border:1px solid var(--border); background:#fff; align-items:center; justify-content:center;
}
.nav-toggle__bars{display:block; width:22px; height:16px; position:relative}
.nav-toggle__bars span{
  position:absolute; left:0; height:2px; width:100%; background:var(--navy-800); border-radius:2px;
  transition:transform var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out), top var(--t-base) var(--e-out);
}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:7px}
.nav-toggle__bars span:nth-child(3){top:14px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){top:7px; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){top:7px; transform:rotate(-45deg)}

/* Mobile drawer */
.drawer-scrim{
  position:fixed; inset:0; background:rgba(7,27,51,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; z-index:var(--z-drawer);
  transition:opacity var(--t-base) var(--e-out), visibility var(--t-base);
}
.drawer-scrim.is-open{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(400px,88vw);
  background:#fff; z-index:calc(var(--z-drawer) + 1); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--t-slow) var(--e-out);
  box-shadow:-20px 0 60px rgba(7,27,51,.24);
}
.drawer.is-open{transform:translateX(0)}
.drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); flex:none;
}
.drawer__close{
  width:48px; height:48px; border-radius:var(--r-md); border:1px solid var(--border);
  background:#fff; display:grid; place-items:center; color:var(--navy-800);
}
.drawer__body{overflow-y:auto; padding:var(--sp-4) var(--sp-5) var(--sp-7); flex:1;
  overscroll-behavior:contain}
.drawer__foot{padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--border); flex:none;
  background:var(--paper-2)}
.m-nav__row{border-bottom:1px solid var(--line-2)}
.m-nav__link{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  width:100%; padding:15px 4px; background:none; border:0; text-align:left;
  font-size:1rem; font-weight:650; color:var(--navy-900); text-decoration:none; min-height:52px;
}
.m-nav__link svg{transition:transform var(--t-base) var(--e-out); flex:none; color:var(--ink-3)}
.m-nav__row.is-open .m-nav__link svg{transform:rotate(180deg)}
.m-nav__sub{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-slow) var(--e-out)}
.m-nav__row.is-open .m-nav__sub{grid-template-rows:1fr}
.m-nav__sub-inner{overflow:hidden}
.m-nav__sub a{
  display:block; padding:12px 4px 12px 18px; font-size:.92rem; color:var(--ink-2);
  text-decoration:none; border-left:2px solid var(--line); min-height:46px;
}
.m-nav__sub a:hover{color:var(--navy-900); border-left-color:var(--saffron-500)}

/* ==========================================================================
   9. HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg,#FFFFFF 0%,#F6F9FD 42%,#FCF6EC 100%);
  padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,104px);
}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(90px);
}
.hero__glow--saffron{width:min(560px,70vw); aspect-ratio:1; top:-16%; right:-10%;
  background:radial-gradient(circle,rgba(226,122,18,.20),transparent 68%)}
.hero__glow--green{width:min(480px,60vw); aspect-ratio:1; bottom:-22%; left:-12%;
  background:radial-gradient(circle,rgba(14,122,75,.14),transparent 68%)}
/* Faint institutional crest on the left of the hero. Purely decorative and
   kept low enough that headline contrast is unaffected. */
.hero__crest{
  position:absolute; z-index:1; left:-5%; top:54%; transform:translateY(-50%);
  width:min(42%,560px); pointer-events:none; opacity:.16;
}
.hero__crest img{width:100%; height:auto}

.hero__inner{position:relative; z-index:2; display:grid; gap:clamp(36px,5vw,var(--sp-8));
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  box-shadow:var(--sh-1); font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:var(--sp-5);
}
.hero__eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--green-500);
  box-shadow:0 0 0 4px rgba(21,156,97,.16); flex:none; margin-left:6px}
/* overflow:hidden masks the reveal; the padding/negative-margin pair keeps
   ascenders and descenders from being clipped by that mask. */
.hero__title .line{display:block; overflow:hidden; padding-block:.12em; margin-block:-.12em}
.hero__title .line > span{display:block}
.hero__title .accent{
  background:linear-gradient(100deg,var(--saffron-600),var(--gold-600) 55%,var(--green-700));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{margin-top:var(--sp-5); max-width:60ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:clamp(24px,3vw,var(--sp-6))}
.hero__meta{display:flex; flex-wrap:wrap; gap:var(--sp-5) var(--sp-6); margin-top:clamp(28px,3.5vw,var(--sp-7));
  padding-top:var(--sp-5); border-top:1px solid var(--border)}
.hero__meta-item{display:flex; align-items:center; gap:10px; font-size:.875rem; color:var(--ink-2); font-weight:550}
.hero__meta-item svg{color:var(--saffron-600); flex:none}

/* Hero visual composition */
.hero__visual{position:relative}
.hero__frame{
  position:relative; border-radius:var(--r-2xl); overflow:hidden;
  box-shadow:var(--sh-4); border:6px solid #fff; will-change:transform;
}
.hero__frame img{width:100%; aspect-ratio:4/3.1; object-fit:cover}
.hero__frame::after{content:""; position:absolute; inset:0;
  background:linear-gradient(200deg,transparent 45%,rgba(7,27,51,.36))}
.hero__frame-badge{
  position:absolute; left:16px; bottom:16px; z-index:2; display:flex; align-items:center; gap:10px;
  padding:9px 15px; border-radius:var(--r-pill); background:rgba(7,27,51,.62); color:#fff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2); font-size:.8rem; font-weight:600;
}
.hero__float{
  position:absolute; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:14px 18px; z-index:3; will-change:transform;
}
.hero__float--tl{top:-16px; left:-18px}
.hero__float--br{right:-16px; bottom:34px}
.hero__float .k{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.5rem; font-weight:800;
  color:var(--navy-900); line-height:1}
.hero__float .l{font-size:.73rem; color:var(--ink-3); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; margin-top:3px}

.scroll-cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  display:inline-flex; flex-direction:column; align-items:center; gap:7px;
  color:var(--ink-3); font-size:.7rem; font-weight:650; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; padding:8px 12px; border-radius:var(--r-md);
}
.scroll-cue__track{width:24px; height:38px; border:2px solid var(--ink-3); border-radius:var(--r-pill);
  position:relative; opacity:.6}
.scroll-cue__dot{position:absolute; left:50%; top:7px; width:4px; height:7px; border-radius:2px;
  background:var(--saffron-500); transform:translateX(-50%); animation:cue 1.9s var(--e-in-out) infinite}
@keyframes cue{0%,100%{transform:translate(-50%,0); opacity:1}55%{transform:translate(-50%,14px); opacity:.25}}

/* ==========================================================================
   10. TRUST STRIP / STATS
   ========================================================================== */
.trust{position:relative; margin-top:calc(-1 * clamp(24px,4vw,52px)); z-index:5}
.trust__panel{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl);
  box-shadow:var(--sh-3); overflow:hidden;
}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,26px); position:relative; text-align:center;
  transition:background-color var(--t-base) var(--e-out)}
.stat + .stat{border-left:1px solid var(--line-2)}
.stat:hover{background:var(--paper-2)}
.stat__icon{width:46px; height:46px; margin:0 auto var(--sp-3); border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--navy-100); color:var(--navy-700);
  transition:transform var(--t-base) var(--e-out)}
.stat:hover .stat__icon{transform:translateY(-3px)}
.stat__num{font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(1.9rem,1.2rem + 2.1vw,2.7rem);
  font-weight:800; color:var(--navy-900); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.stat__num .plus{color:var(--saffron-600)}
.stat__label{margin-top:8px; font-size:.855rem; font-weight:600; color:var(--ink-2)}
.stat__rule{width:38px; height:3px; border-radius:3px; margin:12px auto 0;
  background:linear-gradient(90deg,var(--saffron-500),var(--gold-500))}

/* ==========================================================================
   11. ABOUT
   ========================================================================== */
.about__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,var(--sp-8)); align-items:center}
.about__composition{position:relative; padding-bottom:56px; padding-right:44px}
.about__img-main{border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-3);
  border:5px solid #fff; aspect-ratio:4/4.4}
.about__img-main img{width:100%; height:100%; object-fit:cover}
.about__img-sub{position:absolute; right:0; bottom:0; width:56%; border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-4); border:5px solid #fff; aspect-ratio:4/3}
.about__img-sub img{width:100%; height:100%; object-fit:cover}
.est-badge{
  position:absolute; top:18px; left:-14px; z-index:3; display:flex; align-items:center; gap:11px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  padding:9px 18px 9px 10px; box-shadow:var(--sh-3);
}
.est-badge__seal{width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--saffron-500),var(--gold-600)); color:#fff; flex:none}
.est-badge__k{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:.98rem;
  color:var(--navy-900); line-height:1.1}
.est-badge__l{font-size:.7rem; color:var(--ink-3); font-weight:600; letter-spacing:.06em; text-transform:uppercase}

.timeline{margin-top:clamp(28px,3.4vw,var(--sp-7)); position:relative; padding-left:30px}
.timeline::before{content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--saffron-500),var(--gold-500) 45%,var(--green-600));
  border-radius:2px; opacity:.42}
.timeline__item{position:relative; padding-bottom:var(--sp-5)}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{
  content:""; position:absolute; left:-30px; top:5px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--saffron-500);
  box-shadow:0 0 0 4px rgba(226,122,18,.14);
}
.timeline__k{font-size:.78rem; font-weight:750; color:var(--saffron-700); letter-spacing:.07em;
  text-transform:uppercase}
.timeline__t{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; color:var(--navy-900);
  font-size:1.02rem; margin-top:3px}
.timeline__d{font-size:.9rem; color:var(--ink-2); margin-top:4px; line-height:1.58}

/* ==========================================================================
   12. GENERIC GRIDS
   ========================================================================== */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,26px)}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,26px)}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,24px)}

/* Commitment cards */
.commit-card .card__body{display:flex; flex-direction:column; gap:var(--sp-4); min-height:100%}
.commit-card__more{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-slow) var(--e-out);
}
.commit-card:hover .commit-card__more,.commit-card:focus-within .commit-card__more{grid-template-rows:1fr}
.commit-card__more-inner{overflow:hidden}
.commit-card__more p{padding-top:var(--sp-3); border-top:1px dashed var(--line);
  font-size:.895rem; color:var(--ink-2); line-height:1.6}

/* Program cards */
.program-card{display:flex; flex-direction:column}
.program-card .card__body{display:flex; flex-direction:column; gap:var(--sp-3); flex:1}
.program-card .media{aspect-ratio:16/10}
.program-card .media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,27,51,.42))}
.program-card .media .chip{position:absolute; left:14px; bottom:14px; z-index:2}
.program-card .link-arrow{margin-top:auto; padding-top:var(--sp-2)}

/* ==========================================================================
   13. TRAINING DASHBOARD
   ========================================================================== */
.tabs{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-6);
  padding:6px; background:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  box-shadow:var(--sh-1); width:fit-content; max-width:100%}
.tab{
  border:0; background:transparent; border-radius:var(--r-pill); padding:10px 20px; min-height:44px;
  font-size:.9rem; font-weight:650; color:var(--ink-2); white-space:nowrap;
  transition:background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.tab:hover{background:var(--navy-100); color:var(--navy-900)}
.tab[aria-selected="true"]{background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
  color:#fff; box-shadow:var(--sh-2)}
.train-card{display:flex; flex-direction:column}
.train-card .card__body{display:flex; flex-direction:column; gap:var(--sp-3); flex:1}
.train-card__head{display:flex; align-items:flex-start; gap:var(--sp-4)}
.train-card__meta{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:auto;
  padding-top:var(--sp-4); border-top:1px solid var(--line-2)}
.train-card__meta span{display:inline-flex; align-items:center; gap:6px; font-size:.8rem;
  color:var(--ink-3); font-weight:600}
.train-card__meta svg{color:var(--saffron-600); flex:none}
.filter-item{animation:filter-in var(--t-slow) var(--e-out) both}
@keyframes filter-in{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}

/* ==========================================================================
   14. DARK INSTITUTIONAL SECTIONS
   ========================================================================== */
.dark-section{
  position:relative; overflow:hidden; isolation:isolate; color:#DCE7F3;
  background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-800) 45%,#0C3055 100%);
}
.dark-section h2,.dark-section h3,.dark-section h4{color:#fff}
.dark-section .lead{color:#B7CADF}
.dark-section .body-sm{color:#A9BFD6}
.dark-section__canvas{position:absolute; inset:0; z-index:0; pointer-events:none}
.dark-section > .container{position:relative; z-index:2}
.dark-section::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at 12% 18%,rgba(226,122,18,.16),transparent 45%),
             radial-gradient(circle at 88% 82%,rgba(14,122,75,.16),transparent 45%);
}
.hr-feature{
  display:flex; gap:var(--sp-4); padding:var(--sp-5); border-radius:var(--r-xl);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.hr-feature:hover{transform:translateY(-5px); background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22)}
.hr-feature__icon{width:48px; height:48px; border-radius:var(--r-md); flex:none; display:grid;
  place-items:center; background:rgba(226,122,18,.18); color:var(--saffron-400);
  border:1px solid rgba(226,122,18,.3); transition:transform var(--t-base) var(--e-out)}
.hr-feature:hover .hr-feature__icon{transform:scale(1.08) rotate(-5deg)}
.hr-quote{
  border-left:3px solid var(--saffron-500); padding-left:var(--sp-5);
  font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(1.05rem,.95rem + .6vw,1.32rem);
  line-height:1.5; color:#EAF2FA; font-weight:600; letter-spacing:-.015em;
}

/* Scales-of-justice / dignity illustration */
.dignity-viz{position:relative; display:grid; place-items:center; padding:var(--sp-5)}
.dignity-viz svg{width:100%; max-width:440px; height:auto}

/* ==========================================================================
   15. EVENTS
   ========================================================================== */
.event-card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:0}
.event-card__date{
  padding:var(--sp-5) var(--sp-4); text-align:center; min-width:104px;
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900)); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.event-card__d{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.85rem; font-weight:800;
  line-height:1; font-variant-numeric:tabular-nums}
.event-card__m{font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--saffron-400)}
.event-card__y{font-size:.72rem; color:#96AFC8; font-weight:600}
.event-card__body{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3)}
.event-card__meta{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4)}
.event-card__meta span{display:inline-flex; align-items:center; gap:6px; font-size:.82rem;
  color:var(--ink-2); font-weight:550}
.event-card__meta svg{color:var(--saffron-600); flex:none}

.event-featured{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); overflow:hidden;
  border-radius:var(--r-2xl); border:1px solid var(--border); background:#fff; box-shadow:var(--sh-3);
}
.event-featured__media{position:relative; overflow:hidden; min-height:340px; background:var(--navy-100)}
.event-featured__media img{width:100%; height:100%; object-fit:cover; object-position:center}
.event-featured__body{padding:clamp(24px,3vw,44px); display:flex; flex-direction:column;
  gap:var(--sp-4); justify-content:center}
.event-featured__facts{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4);
  padding-block:var(--sp-4); border-block:1px solid var(--line-2)}
.event-featured__fact .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3); font-weight:700}
.event-featured__fact .v{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700;
  color:var(--navy-900); margin-top:3px; font-size:.98rem}

/* Horizontal timeline rail */
.rail{
  display:flex; gap:var(--sp-4); overflow-x:auto; padding-bottom:var(--sp-4); scroll-snap-type:x mandatory;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-track{background:var(--line-2); border-radius:8px}
.rail::-webkit-scrollbar-thumb{background:var(--navy-500); border-radius:8px}
.rail > *{scroll-snap-align:start; flex:0 0 clamp(270px,32vw,340px)}

/* ==========================================================================
   16. GALLERY + LIGHTBOX
   ========================================================================== */
.masonry{columns:4; column-gap:16px}
.masonry__item{
  break-inside:avoid; margin-bottom:16px; border-radius:var(--r-lg); overflow:hidden;
  position:relative; display:block; width:100%; padding:0; border:1px solid var(--border);
  background:var(--navy-100); cursor:pointer; box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.masonry__item:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.masonry__item img{width:100%; height:auto; display:block; transition:transform 620ms var(--e-out)}
.masonry__item:hover img{transform:scale(1.055)}
.masonry__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:5px; padding:16px; text-align:left; color:#fff;
  background:linear-gradient(180deg,transparent 40%,rgba(7,27,51,.86));
  opacity:0; transition:opacity var(--t-base) var(--e-out);
}
.masonry__item:hover .masonry__overlay,
.masonry__item:focus-visible .masonry__overlay{opacity:1}
.masonry__overlay .t{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.95rem}
.masonry__overlay .d{font-size:.78rem; color:#C9DAEB}

.lightbox{
  position:fixed; inset:0; z-index:var(--z-overlay); display:none;
  background:rgba(5,17,32,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:clamp(16px,4vw,48px);
}
.lightbox[open]{display:grid; grid-template-rows:auto 1fr auto; gap:var(--sp-4)}
.lightbox__bar{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); color:#fff}
.lightbox__count{font-size:.85rem; color:#9FB6CD; font-variant-numeric:tabular-nums}
.lightbox__stage{display:grid; place-items:center; min-height:0; position:relative}
.lightbox__img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:var(--r-md); box-shadow:0 24px 80px rgba(0,0,0,.55);
  animation:lb-in var(--t-slow) var(--e-out)}
@keyframes lb-in{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
.lightbox__cap{text-align:center; color:#fff}
.lightbox__cap .t{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1.05rem}
.lightbox__cap .d{font-size:.85rem; color:#9FB6CD; margin-top:3px}
.lb-btn{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#fff;
  transition:background-color var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.lb-btn:hover{background:rgba(255,255,255,.22); transform:scale(1.06)}
.lb-btn--prev{position:absolute; left:0; top:50%; transform:translateY(-50%)}
.lb-btn--next{position:absolute; right:0; top:50%; transform:translateY(-50%)}
.lb-btn--prev:hover,.lb-btn--next:hover{transform:translateY(-50%) scale(1.06)}

/* ==========================================================================
   17. IMPACT
   ========================================================================== */
.impact__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(36px,5vw,var(--sp-8)); align-items:center}
.meter{padding-block:var(--sp-4); border-bottom:1px solid rgba(255,255,255,.11)}
.meter:last-child{border-bottom:0}
.meter__top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:10px}
.meter__label{font-size:.94rem; font-weight:600; color:#DCE7F3}
.meter__value{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.28rem; font-weight:800;
  color:#fff; font-variant-numeric:tabular-nums}
.meter__track{height:7px; border-radius:7px; background:rgba(255,255,255,.13); overflow:hidden}
.meter__fill{height:100%; width:0; border-radius:7px;
  background:linear-gradient(90deg,var(--saffron-500),var(--gold-500));
  transition:width 1500ms var(--e-out)}
.meter:nth-child(even) .meter__fill{background:linear-gradient(90deg,var(--green-500),var(--green-600))}
.india-viz{position:relative; display:grid; place-items:center}
.india-viz svg{width:100%; max-width:400px; height:auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.34))}

/* ==========================================================================
   18. INDIA IDENTITY BAND
   ========================================================================== */
.india-band{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#FFF6E8 0%,#FDEBCE 40%,#FBF3DC 100%);
}
.india-band::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(166,124,26,.28) 1px,transparent 0),
    repeating-linear-gradient(45deg,rgba(166,124,26,.07) 0 2px,transparent 2px 22px),
    repeating-linear-gradient(-45deg,rgba(166,124,26,.07) 0 2px,transparent 2px 22px);
  background-size:26px 26px,auto,auto;
}
.india-band > .container{position:relative; z-index:2}
.india-band__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px,5vw,var(--sp-8)); align-items:center}
.pillar{display:flex; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-xl);
  background:rgba(255,255,255,.72); border:1px solid rgba(166,124,26,.2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             background-color var(--t-base) var(--e-out)}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--sh-2); background:#fff}
.pillar__icon{width:44px; height:44px; border-radius:var(--r-md); flex:none; display:grid;
  place-items:center; background:linear-gradient(135deg,var(--saffron-500),var(--gold-600)); color:#fff}
.emblem-note{
  margin-top:var(--sp-5); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg);
  background:rgba(255,255,255,.8); border:1px solid rgba(166,124,26,.26);
  font-size:.83rem; color:var(--ink-2); line-height:1.6; display:flex; gap:12px;
}
.emblem-note svg{color:var(--gold-700); flex:none; margin-top:2px}
.chakra-hero{display:grid; place-items:center; position:relative}
.chakra-hero svg{width:100%; max-width:380px; height:auto}

/* ==========================================================================
   19. COMMITTEE (government directory style)
   ========================================================================== */
.person{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.person:hover{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:#D3DEEA}
.person__photo{aspect-ratio:1/1.06; overflow:hidden; background:var(--navy-100); position:relative}
.person__photo img{width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform 560ms var(--e-out)}
.person:hover .person__photo img{transform:scale(1.05)}
.person__body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:5px; flex:1;
  border-top:3px solid var(--navy-800)}
.person__name{font-family:"Plus Jakarta Sans",sans-serif; font-weight:750; font-size:1rem;
  color:var(--navy-900); line-height:1.25; letter-spacing:-.015em}
.person__role{font-size:.82rem; color:var(--saffron-700); font-weight:650; line-height:1.4}
.person__note{font-size:.8rem; color:var(--ink-3); line-height:1.5; margin-top:2px}
.person--lead .person__body{border-top-color:var(--saffron-500)}

/* ==========================================================================
   20. MEDIA / NEWS
   ========================================================================== */
.news-featured{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  border-radius:var(--r-2xl); overflow:hidden; border:1px solid var(--border);
  background:#fff; box-shadow:var(--sh-2)}
.news-featured .media{min-height:300px}
.news-featured__body{padding:clamp(22px,2.8vw,38px); display:flex; flex-direction:column;
  gap:var(--sp-3); justify-content:center}
.news-item{display:flex; gap:var(--sp-4); padding:var(--sp-4); border-radius:var(--r-lg);
  border:1px solid var(--border); background:#fff;
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out)}
.news-item:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#D3DEEA}
.news-item__date{flex:none; width:56px; text-align:center; padding-top:2px}
.news-item__date .d{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.35rem; font-weight:800;
  color:var(--navy-900); line-height:1; font-variant-numeric:tabular-nums}
.news-item__date .m{font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--saffron-700); margin-top:2px}

/* ==========================================================================
   21. RESOURCES
   ========================================================================== */
.doc{
  display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.doc:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#D3DEEA}
.doc__icon{width:48px; height:58px; flex:none; border-radius:6px; position:relative;
  display:grid; place-items:center; background:linear-gradient(160deg,#FDEEEE,#FBDCDC);
  border:1px solid #F3C4C4; color:#B3261E; font-size:.62rem; font-weight:800; letter-spacing:.05em}
.doc__icon--link{background:linear-gradient(160deg,var(--navy-100),#DDE9F6);
  border-color:#C6D9EC; color:var(--navy-700)}
.doc__meta{flex:1; min-width:0}
.doc__title{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; color:var(--navy-900);
  font-size:.98rem; line-height:1.35}
.doc__sub{font-size:.8rem; color:var(--ink-3); margin-top:3px; display:flex; flex-wrap:wrap;
  gap:4px 10px; align-items:center}
.doc__dl{flex:none; width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--navy-100); color:var(--navy-700); text-decoration:none;
  transition:background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-out)}
.doc:hover .doc__dl{background:var(--navy-800); color:#fff; transform:translateY(-2px)}

/* ==========================================================================
   22. VOLUNTEER CTA
   ========================================================================== */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  background:linear-gradient(140deg,var(--navy-900) 0%,#0E3A63 48%,var(--navy-800) 100%);
  color:#DCE7F3;
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.35; pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-60deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
    radial-gradient(circle at 50% 120%,rgba(226,122,18,.3),transparent 58%);
}
.cta-band > .container{position:relative; z-index:2}
.cta-band h2{color:#fff}
/* .lead defaults to dark body ink; on this dark band it must be re-lightened
   or it drops to roughly 1.5:1 against the navy. */
.cta-band .lead,.cta-band p{color:#C7D8EA}

/* ==========================================================================
   23. CONTACT
   ========================================================================== */
.contact__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,4vw,var(--sp-7)); align-items:start}
.contact-item{display:flex; gap:var(--sp-4); padding:var(--sp-4) 0}
.contact-item + .contact-item{border-top:1px solid var(--line-2)}
.contact-item__icon{width:46px; height:46px; border-radius:var(--r-md); flex:none; display:grid;
  place-items:center; background:var(--navy-100); color:var(--navy-700)}
.contact-item__k{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3)}
.contact-item__v{font-family:"Plus Jakarta Sans",sans-serif; font-weight:650; color:var(--navy-900);
  margin-top:3px; font-size:1rem; line-height:1.45}
.contact-item__v a{color:inherit; text-decoration:none}
.contact-item__v a:hover{color:var(--saffron-700); text-decoration:underline}

.map-frame{border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--sh-2); margin-top:var(--sp-5); background:var(--navy-100)}
.map-frame iframe{display:block; width:100%; height:290px; border:0}

.form-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl);
  box-shadow:var(--sh-2); padding:clamp(22px,3vw,38px)}
.field{margin-bottom:var(--sp-5)}
.field label{display:block; font-size:.875rem; font-weight:650; color:var(--navy-900); margin-bottom:7px}
.field .req{color:#B3261E; margin-left:2px}
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:13px 15px; border-radius:var(--r-md);
  border:1.5px solid var(--border); background:var(--paper-2); color:var(--ink);
  transition:border-color var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.field textarea{min-height:128px; resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C9D6E4}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy-600); background:#fff;
  box-shadow:0 0 0 4px rgba(26,74,120,.13);
}
.field .help{font-size:.8rem; color:var(--ink-3); margin-top:6px}
.field .err{font-size:.82rem; color:#B3261E; margin-top:6px; display:none; align-items:center; gap:6px;
  font-weight:600}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:#B3261E; background:#FEF5F5}
.field.is-invalid .err{display:flex}
.form-status{margin-top:var(--sp-4); padding:14px 16px; border-radius:var(--r-md); font-size:.9rem;
  font-weight:600; display:none; align-items:flex-start; gap:10px}
.form-status.is-ok{display:flex; background:var(--green-100); color:var(--green-800);
  border:1px solid rgba(14,122,75,.28)}
.form-status.is-err{display:flex; background:#FDECEC; color:#8C1D18; border:1px solid #F3C4C4}
.error-summary{
  display:none; margin-bottom:var(--sp-5); padding:16px 18px; border-radius:var(--r-md);
  background:#FDECEC; border:1px solid #F3C4C4; color:#8C1D18;
}
.error-summary.is-shown{display:block}
.error-summary h3{font-size:.98rem; color:#8C1D18; margin-bottom:8px}
.error-summary a{color:#8C1D18; font-weight:650; font-size:.88rem; display:inline-block; padding:3px 0}

.whatsapp-btn{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 22px;
  border-radius:var(--r-pill); background:#0F7267; color:#fff; text-decoration:none; font-weight:650;
  box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             background-color var(--t-base) var(--e-out);
}
.whatsapp-btn:hover{background:#0B564E; transform:translateY(-3px); box-shadow:var(--sh-3)}

.social-row{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-5)}
.social-link{
  width:48px; height:48px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--paper-2); border:1px solid var(--border); color:var(--navy-700);
  text-decoration:none;
  transition:background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.social-link:hover{background:var(--navy-800); color:#fff; border-color:var(--navy-800);
  transform:translateY(-3px)}

/* ==========================================================================
   24. FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-900); color:#AFC4DA; position:relative; overflow:hidden}
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.4; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);
  background-size:30px 30px;
}
.site-footer > *{position:relative; z-index:2}
.footer__top{padding-block:clamp(44px,6vw,var(--sp-8))}
.footer__grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.4fr; gap:clamp(28px,3.4vw,var(--sp-7))}
.footer__brand{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4)}
.footer__brand img{width:56px; height:56px; border-radius:12px; background:#fff; padding:4px;
  object-fit:contain; flex:none}
.footer__brand .n{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; color:#fff;
  font-size:1.08rem; line-height:1.2; letter-spacing:-.02em}
.footer__brand .s{font-size:.72rem; color:#8AA4C0; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; margin-top:3px}
.footer h3{font-size:.85rem; color:#fff; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:var(--sp-4); font-weight:700}
.footer__links li{margin-bottom:2px}
.footer__links a{
  color:#AFC4DA; text-decoration:none; font-size:.9rem; display:inline-block; padding:7px 0;
  min-height:38px; position:relative;
  transition:color var(--t-fast) var(--e-out), padding-left var(--t-fast) var(--e-out);
}
.footer__links a:hover{color:#fff; padding-left:9px}
.footer__links a::before{
  content:""; position:absolute; left:0; top:50%; width:5px; height:1px; background:var(--saffron-500);
  transform:translateY(-50%) scaleX(0); transform-origin:left;
  transition:transform var(--t-fast) var(--e-out);
}
.footer__links a:hover::before{transform:translateY(-50%) scaleX(1)}
.footer__contact li{display:flex; gap:11px; margin-bottom:var(--sp-4); font-size:.9rem; line-height:1.55}
.footer__contact svg{color:var(--saffron-400); flex:none; margin-top:3px}
.footer__contact a{color:#AFC4DA; text-decoration:none}
.footer__contact a:hover{color:#fff; text-decoration:underline}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-block:var(--sp-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  font-size:.83rem; color:#8AA4C0;
}
.footer__bottom-links{display:flex; gap:var(--sp-4); flex-wrap:wrap}
.footer__bottom-links a{color:#8AA4C0; text-decoration:none; padding:6px 0; min-height:34px;
  display:inline-flex; align-items:center}
.footer__bottom-links a:hover{color:#fff; text-decoration:underline}
.footer__disclaimer{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md); padding:14px 16px; font-size:.8rem; line-height:1.6;
  color:#9FB6CD; margin-top:var(--sp-5);
}

/* Back to top */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:var(--z-sticky); width:50px; height:50px;
  border-radius:50%; display:grid; place-items:center; border:1px solid var(--border);
  background:#fff; color:var(--navy-800); box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out),
             visibility var(--t-base), background-color var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out);
}
.to-top.is-shown{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--navy-800); color:#fff}

/* ==========================================================================
   25. SCROLL REVEAL
   ========================================================================== */
/* Every "starts hidden" state is scoped to html.js, which is set by an inline
   script in <head>. Without JavaScript — or if scripting fails — nothing is
   ever hidden, so no content depends on an animation running to completion. */
.js .reveal{opacity:0; transform:translateY(26px);
  transition:opacity 720ms var(--e-out), transform 720ms var(--e-out)}
.js .reveal.is-in{opacity:1; transform:none}
.js .reveal-stagger > *{opacity:0; transform:translateY(22px);
  transition:opacity 640ms var(--e-out), transform 640ms var(--e-out)}
.js .reveal-stagger.is-in > *{opacity:1; transform:none}
.js .reveal-stagger.is-in > *:nth-child(1){transition-delay:0ms}
.js .reveal-stagger.is-in > *:nth-child(2){transition-delay:70ms}
.js .reveal-stagger.is-in > *:nth-child(3){transition-delay:140ms}
.js .reveal-stagger.is-in > *:nth-child(4){transition-delay:210ms}
.js .reveal-stagger.is-in > *:nth-child(5){transition-delay:280ms}
.js .reveal-stagger.is-in > *:nth-child(6){transition-delay:350ms}
.js .reveal-stagger.is-in > *:nth-child(7){transition-delay:420ms}
.js .reveal-stagger.is-in > *:nth-child(8){transition-delay:490ms}
.js .reveal-stagger.is-in > *:nth-child(n+9){transition-delay:540ms}

/* Hero headline line reveal */
.js .line-reveal > span{display:block; transform:translateY(105%); opacity:0;
  transition:transform 900ms var(--e-out), opacity 700ms var(--e-out)}
.js .is-ready .line-reveal > span{transform:none; opacity:1}
.js .is-ready .line-reveal:nth-of-type(1) > span{transition-delay:80ms}
.js .is-ready .line-reveal:nth-of-type(2) > span{transition-delay:200ms}
.js .is-ready .line-reveal:nth-of-type(3) > span{transition-delay:320ms}
.js .fade-up-delayed{opacity:0; transform:translateY(18px);
  transition:opacity 700ms var(--e-out) 480ms, transform 700ms var(--e-out) 480ms}
.js .is-ready .fade-up-delayed{opacity:1; transform:none}
.js .fade-in-late{opacity:0; transition:opacity 900ms var(--e-out) 700ms}
.js .is-ready .fade-in-late{opacity:1}

/* Safety net: the intro animation is decoration, never a gate on reading the
   page. Once the entrance window has elapsed, JS adds .anim-settled and the
   final state is asserted with no transition — so a throttled or background
   tab (where the animation clock crawls) still shows the hero immediately. */
.js .anim-settled .line-reveal > span,
.js .anim-settled .fade-up-delayed,
.js .anim-settled .fade-in-late,
.js .reveal.is-settled,
.js .reveal-stagger.is-settled > *{
  opacity:1!important; transform:none!important; transition:none!important;
}
/* Progress bars carry the figures, so settle them to their final width too. */
.js .reveal.is-settled .meter__fill{transition:none!important}

/* ==========================================================================
   26. RESPONSIVE
   ========================================================================== */
/* Progressive tightening so the full bar survives down to the drawer
   breakpoint instead of pushing destinations off the right edge. */
@media (max-width:1440px){
  .nav__link{padding:10px 9px; font-size:.875rem}
  .nav__link::after{left:9px; right:9px}
  .brand__sub{font-size:.64rem}
}
@media (max-width:1300px){
  .nav__link{padding:10px 7px; font-size:.83rem}
  .nav__link::after{left:7px; right:7px}
  .brand__mark{width:46px; height:46px}
  .brand__name{font-size:1rem}
  /* Brochure CTA collapses to its icon rather than squeezing the nav. */
  .nav-actions .btn--sm{padding:12px 14px; gap:0}
  .nav-actions .btn--sm .btn-label{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap;
  }
}
@media (max-width:1024px){
  :root{--nav-h:70px}
  .nav,.nav-actions .btn{display:none}
  .nav-toggle{display:inline-flex}
  .hero__inner{grid-template-columns:1fr; gap:var(--sp-7)}
  .hero__visual{max-width:660px; margin-inline:auto; width:100%}
  .hero__float--tl{top:-12px; left:-8px}
  .hero__float--br{right:-8px; bottom:24px}
  /* Anchor the crest to the headline block once the hero stacks. */
  .hero__crest{top:34%; width:min(62%,460px); left:-14%; opacity:.11}
  .about__grid,.impact__grid,.contact__grid,.india-band__grid{grid-template-columns:1fr}
  .about__composition{max-width:560px; margin-inline:auto; width:100%}
  .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .masonry{columns:3}
  .event-featured,.news-featured{grid-template-columns:1fr}
  .event-featured__media,.news-featured .media{min-height:260px; aspect-ratio:16/9}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line-2)}
  .india-viz,.chakra-hero{order:-1}
}
@media (max-width:820px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .masonry{columns:2}
  .topbar__group--secondary{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__col--brand{grid-column:1 / -1}
  .footer__col--contact{grid-column:1 / -1}
}
@media (max-width:600px){
  :root{--nav-h:66px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .masonry{columns:1}
  .trust__grid{grid-template-columns:1fr}
  .stat + .stat{border-left:0; border-top:1px solid var(--line-2)}
  .brand__sub,.brand__motto{display:none}
  .brand__mark{width:44px; height:44px}
  .brand__name{font-size:.98rem}
  .topbar__inner{justify-content:center}
  .topbar__group--primary{display:none}
  .hero__float{padding:11px 14px}
  .hero__float .k{font-size:1.25rem}
  .hero__cta .btn{width:100%}
  .event-card{grid-template-columns:1fr}
  .event-card__date{flex-direction:row; align-items:baseline; justify-content:center; gap:8px;
    padding:12px; min-width:0}
  .event-featured__facts{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{justify-content:center; text-align:center}
  .tabs{width:100%; justify-content:flex-start; overflow-x:auto; border-radius:var(--r-lg);
    flex-wrap:nowrap}
  .about__composition{padding-right:0; padding-bottom:44px}
  .about__img-sub{width:64%; right:-6px}
  .est-badge{left:-6px}
  .to-top{right:14px; bottom:14px}
}
@media (max-width:390px){
  .hero__float--tl{left:0; top:-8px}
  .hero__float--br{right:0}
  .lb-btn{width:46px; height:46px}
}

/* ==========================================================================
   27. REDUCED MOTION / PRINT / FORCED COLORS
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .reveal,.reveal-stagger > *,.fade-up-delayed,.fade-in-late{opacity:1!important; transform:none!important}
  .line-reveal > span{transform:none!important; opacity:1!important}
  /* Filter results must appear immediately, with no entrance delay. */
  .filter-item{animation:none!important; animation-delay:0s!important;
    opacity:1!important; transform:none!important}
  .chakra-motif{animation:none}
  .scroll-cue__dot{animation:none}
  .btn:hover,.card:hover,.person:hover,.doc:hover,.news-item:hover,.hr-feature:hover,.pillar:hover,
  .masonry__item:hover{transform:none}
}
@media (forced-colors:active){
  .card,.person,.doc,.btn,.field input,.field textarea,.field select{border:1px solid CanvasText}
  .btn::after{display:none}
}
@media print{
  .site-header,.to-top,.hero__canvas,.drawer,.drawer-scrim,.lightbox,.scroll-cue{display:none!important}
  body{font-size:11pt}
  .section{padding-block:16pt}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}