/* ============================================================
   ETHICS & INTEGRITY INSTITUTE — design tokens
   Color:  deep indigo-purple (brand), magenta-purple, mustard gold accent
   Type:   Fraunces (display/serif) + Inter (body/UI)
   Layout: editorial / certificate-inspired, hairline rules, generous space
   ============================================================ */

:root{
  --purple-950:#241A3D;
  --purple-900:#33234F;
  --purple-800:#402C63;
  --purple-700:#4E3378;
  --purple-600:#623E8C;
  --purple-500:#7A4A96;
  --magenta-600:#7C3B84;

  --gold-500:#E3A22E;
  --gold-600:#C88A22;
  --gold-100:#FBEBD1;

  --cream:#FAF7F1;
  --paper:#FFFFFF;
  --ink:#211A33;
  --ink-soft:#544B6B;
  --line:rgba(33,26,51,0.12);
  --line-light:rgba(255,255,255,0.18);

  --font-display:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container:1240px;
  --radius-sm:4px;
  --radius-md:10px;

  --shadow-card:0 18px 40px -22px rgba(36,26,61,0.35);
  --ease:cubic-bezier(.22,.61,.36,1);

  --topbar-h:36px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--purple-950);
  letter-spacing:-0.02em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

/* ---------- eyebrow / typography helpers ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--gold-600);
  letter-spacing:.04em;
  margin:0 0 12px;
  position:relative;
  padding-left:28px;
}
.eyebrow::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:18px; height:2px;
  background:var(--gold-500);
  transform:translateY(-50%);
}
.eyebrow--center{text-align:center;padding-left:0;display:flex;align-items:center;justify-content:center;gap:10px;}
.eyebrow--center::before{position:static;transform:none;}
.eyebrow--light{color:var(--gold-500);}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--purple-800);
  border-bottom:1px solid var(--purple-800);
  padding-bottom:2px;
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.text-link i{font-size:12px;transition:transform .25s var(--ease);}
.text-link:hover{gap:12px;color:var(--gold-600);border-color:var(--gold-600);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 26px;
  border-radius:3px;
  font-weight:600;
  font-size:14.5px;
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn--lg{padding:16px 32px;font-size:15px;}
.btn--block{width:100%;}
.btn--gold{
  background:var(--gold-500);
  color:var(--purple-950);
  box-shadow:0 12px 24px -12px rgba(227,162,46,.65);
}
.btn--gold:hover{background:var(--gold-600); transform:translateY(-2px);}
.btn--ghost{
  background:transparent;
  color:var(--purple-900);
  border-color:var(--line);
}
.btn--ghost:hover{border-color:var(--purple-900);}
.btn--outline-light{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.btn--outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff;}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--purple-950);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.preloader__mark img{width:120px; animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{opacity:.55; transform:scale(.94);}
  50%{opacity:1; transform:scale(1);}
}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.topbar{
  background:var(--purple-950);
  color:rgba(255,255,255,.82);
  font-size:12.5px;
  position:fixed; top:0; left:0; right:0;
  z-index:1001;
}
.topbar__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:8px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:var(--topbar-h);
}
.topbar__contact{display:flex; align-items:center; gap:24px; min-width:0;}
.topbar__contact li{min-width:0;}
.topbar__contact li a{display:flex; align-items:center; gap:7px; transition:color .2s; min-width:0;}
.topbar__contact li a:hover{color:var(--gold-500);}
.topbar__contact i{color:var(--gold-500); font-size:11px; flex-shrink:0;}
.topbar__contact span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar__addr{display:flex; align-items:center; gap:7px; min-width:0;}
.topbar__addr i{color:var(--gold-500); font-size:11px; flex-shrink:0;}
.topbar__addr span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar__social{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.topbar__social a{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  transition:background .2s, border-color .2s;
  font-size:11px;
}
.topbar__social a:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}

/* ============================================================
   NAVBAR (base / desktop)
   ============================================================ */
.navbar{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:1000;
  background:rgba(250,247,241,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:top .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.navbar.scrolled{
  top:0;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 30px -18px rgba(33,26,51,.35);
  border-bottom-color:var(--line);
}
.navbar__inner{
  max-width:1400px;
  margin:0 auto;
  padding:14px 28px;
  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
}
.navbar.scrolled .navbar__inner{padding:40px 0px 15px 28px;}
.navbar__brand{
  flex-shrink:0;
  display:flex; align-items:center;
  margin-right:16px;
}
.navbar__brand img{height:46px; transition:height .3s var(--ease);}
.navbar.scrolled .navbar__brand img{height:38px;}
.navbar__nav{flex:1 1 auto; min-width:0;}
.navbar__nav > ul{display:flex; align-items:center; gap:2px; justify-content:flex-start; flex-wrap:nowrap;}
.navbar__nav > ul > li{position:relative; flex-shrink:0;}
.navbar__nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  border-radius:3px;
  white-space:nowrap;
  transition:color .2s, background .2s;
}
.navbar__nav > ul > li > a i{font-size:10px; opacity:.6;}
.navbar__nav > ul > li > a:hover,
.navbar__nav > ul > li > a.active{color:var(--purple-800); background:rgba(122,74,150,.08);}

.dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:240px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow-card);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown li a{
  display:block; padding:10px 14px; border-radius:5px; font-size:14px; font-weight:500; color:var(--ink-soft);
  transition:background .2s, color .2s;
}
.dropdown li a:hover{background:var(--cream); color:var(--purple-800);}

.navbar__cta{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; white-space:nowrap;}

/* Mobile-only CTA block (hidden on desktop) */
.navbar__cta-mobile{display:none;}

/* Hamburger toggle */
.navbar__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  flex-shrink:0;
  width:44px; height:44px;
  background:none;
  border:none;
  padding:10px;
  margin-left:auto;
  z-index:1002;
  border-radius:6px;
  transition:background .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.navbar__toggle:hover{background:rgba(122,74,150,.08);}
.navbar__toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--purple-950);
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.navbar__toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navbar__toggle.active span:nth-child(2){opacity:0;}
.navbar__toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding-top:110px;
  background:var(--purple-950);
}
.hero__track{
  position:absolute; inset:0;
  display:flex;
  width:max-content;
  animation:heroScroll 60s linear infinite;
}
.hero__slide{
  width:46vw;
  min-width:640px;
  height:100vh;
  background-size:cover;
  background-position:center;
  flex-shrink:0;
  position:relative;
  filter:saturate(.85);
}
.hero__slide + .hero__slide{margin-left:6px;}
@keyframes heroScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(36,26,61,.94) 0%, rgba(36,26,61,.72) 32%, rgba(51,35,79,.55) 60%, rgba(36,26,61,.85) 100%),
    linear-gradient(180deg, rgba(36,26,61,.35) 0%, rgba(36,26,61,.15) 40%, rgba(36,26,61,.75) 100%);
}
.hero__content{
  position:relative; z-index:2;
  max-width:var(--container);
  margin:0 auto;
  width:100%;
  padding:60px 32px 40px;
  color:#fff;
}
.hero__eyebrow{
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  font-size:12.5px; color:var(--gold-500);
  display:flex; align-items:center; gap:12px;
  margin-bottom:22px;
}
.hero__eyebrow::before{content:"";width:34px;height:2px;background:var(--gold-500);}
.hero__title{
  font-size:clamp(38px, 5.4vw, 68px);
  color:#fff;
  max-width:820px;
  font-weight:800;
  margin-bottom:24px;
}
.hero__lede{
  font-size:18px;
  color:rgba(255,255,255,.82);
  max-width:560px;
  margin-bottom:38px;
}
.hero__actions{display:flex; flex-wrap:wrap; gap:16px;}

.hero__stats{
  position:relative; z-index:2;
  max-width:var(--container);
  margin:0 auto;
  width:100%;
  padding:34px 32px 46px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero__stat{display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; color:#fff;}
.hero__stat-num{
  font-family:var(--font-display);
  font-size:clamp(28px,3.4vw,40px);
  font-weight:600;
  color:var(--gold-500);
}
.hero__stat-plus{font-family:var(--font-display); font-size:22px; color:var(--gold-500); font-weight:600;}
.hero__stat-label{
  width:100%;
  font-size:13px;
  color:rgba(255,255,255,.68);
  margin-top:2px;
}

.hero__scroll{
  position:absolute; right:32px; bottom:36px; z-index:3;
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:120px 0 0;}
.about__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:start;
  margin-bottom:100px;
}
.about__media-frame{
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  position:relative;
}
.about__media-frame::after{
  content:"";
  position:absolute; inset:0;
  border:6px solid var(--paper);
  box-sizing:border-box;
}
.about__media-frame img{width:100%; height:460px; object-fit:cover;}
.about__media-caption{
  margin-top:-46px;
  margin-left:24px;
  position:relative;
  background:var(--purple-950);
  color:#fff;
  padding:26px 26px 22px;
  max-width:340px;
  border-left:4px solid var(--gold-500);
}
.about__media-caption-mark{
  font-family:var(--font-display);
  font-size:44px;
  color:var(--gold-500);
  line-height:0;
  display:block;
  margin-bottom:10px;
}
.about__media-caption p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:16.5px;
  color:#fff;
  margin:0;
}
.about__copy h2{font-size:clamp(28px,3.2vw,40px); max-width:520px;}
.about__lead{font-size:17px; max-width:540px;}
.about__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin:36px 0 32px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.about__cols h3{font-size:18px; margin-bottom:8px;}
.about__cols p{font-size:14.5px; margin:0;}

/* core values */
.values{background:var(--purple-950); padding:64px 0;}
.values .eyebrow--center{color:var(--gold-500);}
.values .eyebrow--center::before,.values .eyebrow--center::after{content:"";width:18px;height:2px;background:var(--gold-500);}
.values__row{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:28px;
  margin-top:34px;
}
.values__item{color:#fff; text-align:center; padding:0 6px;}
.values__item h4{color:var(--gold-500); font-size:19px; margin-bottom:10px;}
.values__item p{color:rgba(255,255,255,.72); font-size:14px; margin:0;}
.values__divider{width:1px; background:rgba(255,255,255,.18); align-self:stretch;}

/* ============================================================
   ABOUT TEASER (homepage)
   ============================================================ */
.about-teaser{padding:120px 0;}
.about-teaser__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
  align-items:start;
}
.about-teaser__media-frame{
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  position:relative;
}
.about-teaser__media-frame::after{
  content:"";
  position:absolute; inset:0;
  border:6px solid var(--paper);
  box-sizing:border-box;
}
.about-teaser__media-frame img{width:100%; height:460px; object-fit:cover;}
.about-teaser__media-caption{
  margin-top:-46px;
  margin-left:24px;
  position:relative;
  background:var(--purple-950);
  color:#fff;
  padding:26px 26px 22px;
  max-width:340px;
  border-left:4px solid var(--gold-500);
}
.about-teaser__media-caption-mark{
  font-family:var(--font-display);
  font-size:44px;
  color:var(--gold-500);
  line-height:0;
  display:block;
  margin-bottom:10px;
}
.about-teaser__media-caption p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:16.5px;
  color:#fff;
  margin:0;
}
.about-teaser__copy h2{font-size:clamp(28px,3.2vw,40px); max-width:520px;}
.about-teaser__lead{font-size:17px; max-width:540px;}
.about-teaser__values{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:30px 0 34px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.about-teaser__values li span{
  display:inline-block;
  border:1px solid var(--line);
  border-radius:30px;
  padding:9px 20px;
  font-size:13.5px;
  font-weight:600;
  color:var(--purple-800);
  background:var(--paper);
}

/* ============================================================
   PROGRAMS TEASER (homepage)
   ============================================================ */
.programs-teaser{padding:110px 0; background:var(--purple-950);}
.programs-teaser__head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:end;
  margin-bottom:52px;
}
.programs-teaser__head h2{color:#fff; font-size:clamp(28px,3.2vw,40px); margin:0;}
.programs-teaser__intro{color:rgba(255,255,255,.68); font-size:15.5px; margin:0;}
.programs-teaser__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}

/* ============================================================
   PORTFOLIO TEASER (homepage)
   ============================================================ */
.portfolio-teaser{padding:110px 0 0; background:var(--paper);}
.portfolio-teaser h2{font-size:clamp(28px,3.2vw,40px); max-width:640px;}
.portfolio-teaser__intro{max-width:560px; font-size:16px;}
.portfolio-teaser__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:48px;
}
.portfolio-teaser__link{margin-top:40px; display:inline-flex;}
.portfolio-card{background:var(--paper); padding:38px 34px; transition:background .25s var(--ease);}
.portfolio-card:hover{background:var(--cream);}
.portfolio-card__tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--gold-600); margin-bottom:14px;}
.portfolio-card h3{font-size:19px; margin-bottom:10px;}
.portfolio-card p{font-size:14.5px; margin:0;}

/* ============================================================
   NEWS TEASER (homepage)
   ============================================================ */
.news-teaser{padding:110px 0; background:var(--cream);}
.news-teaser__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:46px;}
.news-teaser__head h2{font-size:clamp(28px,3.2vw,38px); margin:0;}
.news-teaser__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px;}
.news-card{background:var(--paper); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-card); transition:transform .3s var(--ease);}
.news-card:hover{transform:translateY(-6px);}
.news-card img{width:100%; height:210px; object-fit:cover;}
.news-card--feature img{height:340px;}
.news-card__body{padding:24px 26px 28px;}
.news-card__date{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--gold-600); text-transform:uppercase; margin-bottom:10px;}
.news-card h3{font-size:17px; margin:0;}
.news-card--feature h3{font-size:23px;}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{background:var(--purple-800); padding:80px 0;}
.cta-banner__inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-banner h2{color:#fff; font-size:clamp(26px,3vw,34px); max-width:520px; margin-bottom:10px;}
.cta-banner p{color:rgba(255,255,255,.72); max-width:460px; margin:0;}
.cta-banner__actions{display:flex; gap:16px; flex-wrap:wrap;}

/* footer newsletter */
.footer__col--newsletter p{color:rgba(255,255,255,.6); font-size:13.5px; margin-bottom:16px;}
.footer__newsletter{display:flex; border:1px solid rgba(255,255,255,.25); border-radius:5px; overflow:hidden;}
.footer__newsletter input{
  flex:1; border:none; background:rgba(255,255,255,.06); color:#fff;
  padding:11px 14px; font-size:13.5px; font-family:inherit; min-width:0;
}
.footer__newsletter input::placeholder{color:rgba(255,255,255,.45);}
.footer__newsletter input:focus{outline:none; background:rgba(255,255,255,.12);}
.footer__newsletter button{
  border:none; background:var(--gold-500); color:var(--purple-950);
  width:44px; flex-shrink:0; font-size:14px; transition:background .2s;
}
.footer__newsletter button:hover{background:var(--gold-600);}

/* ============================================================
   WHY / TESTIMONIALS
   ============================================================ */
.why{padding:110px 0; background:var(--paper);}
.why__grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
.why__copy h2{font-size:clamp(28px,3.2vw,38px); max-width:480px;}
.why__list{margin-top:26px; display:flex; flex-direction:column; gap:14px;}
.why__list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-soft); font-weight:500;}
.why__list i{color:var(--gold-600); margin-top:3px;}
.why__testimonial{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:44px;
  position:relative;
}
.why__quote-mark{color:var(--gold-500); font-size:28px; margin-bottom:16px;}
.why__quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:21px;
  color:var(--purple-950);
  line-height:1.5;
  margin-bottom:28px;
}
.why__person{display:flex; align-items:center; gap:14px;}
.why__avatar{
  width:48px; height:48px; border-radius:50%;
  background:var(--purple-800); color:var(--gold-100);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:15px;
}
.why__name{font-weight:600; font-size:14.5px; color:var(--purple-950); margin:0;}
.why__role{font-size:13px; margin:0; color:var(--ink-soft);}

/* ============================================================
   PROGRAMS
   ============================================================ */
.programs{padding:110px 0; background:var(--cream);}
.programs__head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:end;
  margin-bottom:48px;
}
.programs__head h2{font-size:clamp(28px,3.2vw,40px); margin:0;}
.programs__intro{font-size:15.5px; margin:0;}
.programs__tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:38px;
}
.programs__tab{
  background:transparent; border:1px solid var(--line);
  padding:11px 20px; border-radius:30px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:all .25s var(--ease);
}
.programs__tab:hover{border-color:var(--purple-700); color:var(--purple-800);}
.programs__tab.active{background:var(--purple-950); border-color:var(--purple-950); color:#fff;}

.programs__panel{display:none;}
.programs__panel.active{display:grid; grid-template-columns:.9fr 1.4fr; gap:56px; animation:fadeUp .5s var(--ease);}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.programs__panel-desc{font-size:16px; max-width:400px; align-self:start;}
.programs__list{margin:0; padding:0; counter-reset:none;}
.programs__list li{
  display:flex; align-items:center; gap:22px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-weight:500; color:var(--purple-950);
  font-size:15.5px;
}
.programs__list li:first-child{padding-top:0;}
.programs__code{
  font-family:var(--font-display); font-style:italic;
  color:var(--gold-600); font-size:14px; min-width:78px; flex-shrink:0;
}

.programs__sub{background:var(--purple-950); padding:80px 0; margin-top:100px;}
.programs__sub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.feature-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:34px 30px;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.feature-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(227,162,46,.4);}
.feature-card__icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--gold-500); color:var(--purple-950);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:22px;
}
.feature-card h3{color:#fff; font-size:19px;}
.feature-card p{color:rgba(255,255,255,.68); font-size:14.5px;}
.feature-card .text-link{color:var(--gold-500); border-color:var(--gold-500);}
.feature-card .text-link:hover{color:#fff; border-color:#fff;}

/* ============================================================
   MISSIONS STRIP
   ============================================================ */
.missions{background:var(--purple-800); padding:70px 0; overflow:hidden;}
.missions__inner{display:grid; grid-template-columns:1fr; gap:36px;}
.missions__copy h2{color:#fff; font-size:clamp(24px,2.8vw,32px); max-width:640px;}
.missions__copy p{color:rgba(255,255,255,.72); max-width:680px;}
.missions__chips{
  display:flex; flex-wrap:wrap; gap:12px;
}
.missions__chips span{
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  padding:9px 18px;
  border-radius:30px;
  font-size:13.5px;
  font-weight:500;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.missions__chips span:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}

/* ============================================================
   GOVERNANCE PAGE — accountability framework cards
   ============================================================ */
.framework{padding:110px 0; background:var(--paper);}
.framework__head{max-width:680px; margin-bottom:52px;}
.framework__head h2{font-size:clamp(28px,3.2vw,38px);}
.framework__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.framework-card{
  position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  padding:38px 32px;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.framework-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold-500), var(--purple-600));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.framework-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:transparent;}
.framework-card:hover::before{transform:scaleX(1);}
.framework-card__num{
  font-family:var(--font-display); font-weight:800; font-size:13px;
  color:var(--gold-600); letter-spacing:.08em; margin-bottom:18px; display:block;
}
.framework-card i{font-size:26px; color:var(--purple-800); margin-bottom:20px; display:block;}
.framework-card h3{font-size:19px; margin-bottom:10px;}
.framework-card p{font-size:14.5px; margin:0;}

/* ============================================================
   GOVERNANCE PAGE — interactive accordion (Our Approach)
   ============================================================ */
.gov-accordion{padding:110px 0; background:var(--cream);}
.gov-accordion__head{max-width:680px; margin-bottom:20px;}
.gov-accordion__head h2{font-size:clamp(28px,3.2vw,38px);}
.gov-accordion__intro{max-width:640px; font-size:16px; margin-bottom:54px;}
.accordion{border-top:1px solid var(--line);}
.accordion__item{border-bottom:1px solid var(--line);}
.accordion__header{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:28px 4px; background:none; border:none; text-align:left; cursor:pointer;
}
.accordion__header-left{display:flex; align-items:center; gap:22px; min-width:0;}
.accordion__num{
  font-family:var(--font-display); font-weight:800; font-size:14px;
  color:var(--line); flex-shrink:0; width:28px;
  transition:color .3s var(--ease);
}
.accordion__icon{
  width:54px; height:54px; border-radius:50%; flex-shrink:0;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--purple-800); font-size:20px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.accordion__title{font-weight:700; font-size:18px; color:var(--purple-950); margin:0;}
.accordion__chevron{color:var(--ink-soft); transition:transform .35s var(--ease), color .3s var(--ease); flex-shrink:0;}
.accordion__item.active .accordion__num{color:var(--gold-600);}
.accordion__item.active .accordion__icon{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}
.accordion__item.active .accordion__chevron{transform:rotate(180deg); color:var(--gold-600);}
.accordion__panel{max-height:0; overflow:hidden; transition:max-height .45s var(--ease);}
.accordion__panel-inner{padding:0 4px 32px 104px;}
.accordion__panel-inner p{font-size:15px; margin-bottom:14px;}
.accordion__example{
  font-size:13.5px; font-weight:600; color:var(--purple-800);
  padding-left:16px; border-left:3px solid var(--gold-500); margin:0;
}
@media (max-width:620px){
  .accordion__panel-inner{padding-left:4px;}
  .accordion__num{display:none;}
}

/* ============================================================
   GOVERNANCE PAGE — interactive process stepper
   ============================================================ */
.gov-stepper{padding:110px 0; background:var(--purple-950); color:#fff;}
.gov-stepper__head{max-width:640px; margin-bottom:60px;}
.gov-stepper__head h2{color:#fff; font-size:clamp(28px,3.2vw,38px);}
.gov-stepper__intro{color:rgba(255,255,255,.7); font-size:16px; margin:0;}
.stepper-nav{display:flex; justify-content:space-between; position:relative; margin-bottom:54px; gap:8px;}
.stepper-nav::before{content:""; position:absolute; top:23px; left:5%; right:5%; height:2px; background:rgba(255,255,255,.16); z-index:0;}
.stepper-nav__progress{position:absolute; top:23px; left:5%; height:2px; background:var(--gold-500); z-index:0; transition:width .4s var(--ease); width:0%;}
.stepper-nav__item{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:none; border:none; cursor:pointer; flex:1; padding:0;
}
.stepper-nav__circle{
  width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  background:var(--purple-950);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:16px; color:rgba(255,255,255,.6);
  transition:all .3s var(--ease);
}
.stepper-nav__label{font-size:12.5px; font-weight:600; color:rgba(255,255,255,.55); max-width:120px; text-align:center; transition:color .3s;}
.stepper-nav__item.active .stepper-nav__circle{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}
.stepper-nav__item.active .stepper-nav__label{color:#fff;}
.stepper-nav__item.done .stepper-nav__circle{border-color:var(--gold-500); color:var(--gold-500);}

.stepper-panels{max-width:720px; margin:0 auto; text-align:center; min-height:150px;}
.stepper-panel{display:none;}
.stepper-panel.active{display:block; animation:fadeUp .5s var(--ease) both;}
.stepper-panel__tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:14px;
}
.stepper-panel h3{color:#fff; font-size:24px; margin-bottom:14px;}
.stepper-panel p{color:rgba(255,255,255,.72); font-size:16px; margin:0;}
.stepper-controls{display:flex; justify-content:center; gap:14px; margin-top:40px;}
.stepper-controls button{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.stepper-controls button:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}
.stepper-controls button:disabled{opacity:.3; cursor:not-allowed;}
.stepper-controls button:disabled:hover{background:transparent; border-color:rgba(255,255,255,.28); color:#fff;}

/* ============================================================
   GOVERNANCE PAGE — publications & resources
   ============================================================ */
.publications{padding:110px 0; background:var(--paper);}
.publications__head{max-width:640px; margin-bottom:48px;}
.publications__head h2{font-size:clamp(28px,3.2vw,38px);}
.publications__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.publication-card{
  display:flex; align-items:center; gap:22px;
  border:1px solid var(--line); border-radius:10px;
  padding:28px 30px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.publication-card:hover{border-color:var(--purple-700); background:var(--cream); transform:translateY(-3px);}
.publication-card__icon{
  width:56px; height:56px; border-radius:10px; flex-shrink:0;
  background:var(--purple-950); color:var(--gold-500);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.publication-card h4{font-size:16.5px; margin-bottom:4px;}
.publication-card p{font-size:13.5px; margin:0; color:var(--ink-soft);}
.publication-card i.fa-arrow-right{margin-left:auto; color:var(--ink-soft); flex-shrink:0; transition:transform .3s var(--ease), color .3s var(--ease);}
.publication-card:hover i.fa-arrow-right{transform:translateX(4px); color:var(--purple-800);}

/* ============================================================
   PORTFOLIO PAGE — case study cards + year tabs
   ============================================================ */
.chip-filter{
  background:var(--paper); border:1px solid var(--line);
  padding:9px 18px; border-radius:30px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:all .25s var(--ease);
}
.chip-filter:hover{border-color:var(--purple-700); color:var(--purple-800);}
.chip-filter.active{background:var(--purple-950); border-color:var(--purple-950); color:#fff;}

.case-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:26px;
  margin-top:40px;
}
.case-card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.case-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.case-card__media{position:relative; height:150px; overflow:hidden;}
.case-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.case-card:hover .case-card__media img{transform:scale(1.08);}
.case-card__sector{
  position:absolute; top:14px; left:14px;
  background:rgba(36,26,61,.82); color:#fff; backdrop-filter:blur(4px);
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px;
}
.case-card__year{
  position:absolute; top:14px; right:14px;
  background:var(--gold-500); color:var(--purple-950);
  font-family:var(--font-display); font-weight:800; font-size:12px;
  padding:5px 11px; border-radius:20px;
}
.case-card__body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;}
.case-card__org{font-size:16.5px; margin-bottom:8px; line-height:1.3;}
.case-card__desc{font-size:13.5px; color:var(--ink-soft); margin:0; flex:1;}

.year-tabs{padding:110px 0; background:var(--purple-950);}
.year-tabs__head{max-width:640px; margin-bottom:40px;}
.year-tabs__head h2{color:#fff; font-size:clamp(28px,3.2vw,38px);}
.year-tabs__intro{color:rgba(255,255,255,.7); font-size:16px; margin:0;}
.year-tabs__chips{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 44px;}
.year-tab{
  background:transparent; border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.75);
  padding:10px 20px; border-radius:30px; font-size:13.5px; font-weight:700;
  transition:all .25s var(--ease);
}
.year-tab:hover{border-color:var(--gold-500); color:#fff;}
.year-tab.active{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}
.year-panel{display:none; animation:fadeUp .5s var(--ease) both;}
.year-panel.active{display:block;}
.year-panel ul{display:flex; flex-direction:column; gap:16px; padding:0; margin:0; list-style:none;}
.year-panel li{
  display:flex; gap:16px; color:rgba(255,255,255,.82); font-size:15px; line-height:1.6;
  padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1);
}
.year-panel li:last-child{border-bottom:none; padding-bottom:0;}
.year-panel li i{color:var(--gold-500); margin-top:4px; flex-shrink:0;}

@media (max-width:620px){
  .case-grid{grid-template-columns:1fr;}
}

/* ============================================================
   EDUCATIONAL TOURS — study mission cards
   ============================================================ */
.missions-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:26px;
  margin-top:48px;
}
.mission-card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mission-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.mission-card__media{position:relative; height:150px; overflow:hidden;}
.mission-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.mission-card:hover .mission-card__media img{transform:scale(1.08);}
.mission-card__country{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(36,26,61,.92), transparent);
  color:#fff; padding:28px 16px 10px;
  font-family:var(--font-display); font-weight:800; font-size:16px;
}
.mission-card__body{padding:18px 20px 22px; flex:1; display:flex; flex-direction:column;}
.mission-card__partner{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:var(--gold-600); text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:10px;
}
.mission-card__desc{font-size:13.5px; color:var(--ink-soft); margin:0;}

@media (max-width:620px){
  .missions-grid{grid-template-columns:1fr;}
}
.mission-card--featured{max-width:760px; flex-direction:row; align-items:stretch;}
.mission-card--featured .mission-card__media{width:260px; height:auto; flex-shrink:0;}
.mission-card--featured .mission-card__body{padding:26px 28px;}
@media (max-width:700px){
  .mission-card--featured{flex-direction:column;}
  .mission-card--featured .mission-card__media{width:100%; height:180px;}
}

/* ============================================================
   COURSES CATALOGUE
   ============================================================ */
.courses{padding:70px 0 110px; background:var(--cream);}
.courses__toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px; margin-bottom:40px; padding-bottom:26px; border-bottom:1px solid var(--line);
}
.courses__count{font-size:14px; color:var(--ink-soft); font-weight:600;}
.courses__count strong{color:var(--purple-950);}
.course-filters{display:flex; flex-wrap:wrap; gap:10px;}
.course-filter{
  background:var(--paper); border:1px solid var(--line);
  padding:9px 18px; border-radius:30px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:all .25s var(--ease);
}
.course-filter:hover{border-color:var(--purple-700); color:var(--purple-800);}
.course-filter.active{background:var(--purple-950); border-color:var(--purple-950); color:#fff;}

.courses__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:28px;
}
.course-card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.course-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.course-card__media{position:relative; height:170px; overflow:hidden;}
.course-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.course-card:hover .course-card__media img{transform:scale(1.07);}
.course-card__category{
  position:absolute; top:14px; left:14px;
  background:rgba(36,26,61,.82); color:#fff; backdrop-filter:blur(4px);
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px;
}
.course-card__like{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:15px; cursor:pointer;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.course-card__like:hover{transform:scale(1.1);}
.course-card__like.liked{color:#e0435c;}
.course-card__like.liked i{font-weight:900;}
.course-card__body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.course-card__code{font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--gold-600); margin-bottom:8px;}
.course-card__title{font-size:17px; line-height:1.3; margin-bottom:10px; min-height:44px;}
.course-card__desc{font-size:13.5px; color:var(--ink-soft); margin-bottom:16px; flex:1;}
.course-card__meta{display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--ink-soft); margin-bottom:16px;}
.course-card__meta span{display:flex; align-items:center; gap:6px;}
.course-card__meta i{color:var(--purple-700); font-size:12px;}
.course-card__rating{display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.course-card__stars{color:var(--gold-500); font-size:13px; letter-spacing:1px;}
.course-card__rating-num{font-size:12.5px; font-weight:700; color:var(--purple-950);}
.course-card__rating-count{font-size:12px; color:var(--ink-soft);}
.course-card__footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:16px; border-top:1px solid var(--line); margin-top:auto;
}
.course-card__price{display:flex; flex-direction:column;}
.course-card__price-label{font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.course-card__price-value{font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--purple-950);}
.course-card__register{
  background:var(--gold-500); color:var(--purple-950);
  padding:10px 18px; border-radius:30px; font-size:13px; font-weight:700; border:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.course-card__register:hover{background:var(--gold-600); transform:translateY(-2px);}
.course-card__price-note{font-size:10.5px; color:var(--ink-soft); margin-top:16px; text-align:center;}

.courses__empty{display:none; text-align:center; padding:60px 0; color:var(--ink-soft); font-size:15px;}

@media (max-width:620px){
  .courses__toolbar{flex-direction:column; align-items:flex-start;}
  .courses__grid{grid-template-columns:1fr;}
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-header{
  position:relative;
  padding:170px 0 90px;
  background:var(--purple-950);
  overflow:hidden;
}
.page-header::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 320px at 85% 0%, rgba(227,162,46,.16), transparent 70%),
    radial-gradient(500px 300px at 10% 100%, rgba(122,74,150,.35), transparent 70%);
}
.page-header__inner{position:relative; z-index:1;}
.page-header__crumbs{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.6);
  margin-bottom:20px;
}
.page-header__crumbs a{color:rgba(255,255,255,.85); transition:color .2s;}
.page-header__crumbs a:hover{color:var(--gold-500);}
.page-header__crumbs i{font-size:9px; opacity:.6;}
.page-header h1{color:#fff; font-size:clamp(32px,4.4vw,50px); max-width:720px; margin-bottom:16px;}
.page-header p{color:rgba(255,255,255,.72); font-size:17px; max-width:600px; margin:0;}

/* ============================================================
   HISTORY / TIMELINE
   ============================================================ */
.history{padding:110px 0; background:var(--cream);}
.history h2{font-size:clamp(28px,3.2vw,38px); max-width:640px;}
.history__intro{max-width:600px; font-size:16px;}
.timeline{margin-top:56px; position:relative; padding-left:32px;}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line);}
.timeline__item{position:relative; padding-bottom:44px;}
.timeline__item:last-child{padding-bottom:0;}
.timeline__item::before{
  content:""; position:absolute; left:-32px; top:4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--gold-500); border:3px solid var(--cream); box-shadow:0 0 0 2px var(--gold-500);
}
.timeline__year{font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--purple-800); margin-bottom:6px; letter-spacing:.02em;}
.timeline__item h4{font-size:18px; margin-bottom:6px;}
.timeline__item p{font-size:14.5px; margin:0; max-width:600px;}

/* ============================================================
   TESTIMONIALS GRID
   ============================================================ */
.testimonials{padding:110px 0; background:var(--paper);}
.testimonials__head{margin-bottom:48px;}
.testimonials__head h2{font-size:clamp(28px,3.2vw,38px); max-width:640px;}
.testimonials__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testimonial-card{
  background:var(--cream); border:1px solid var(--line); border-radius:8px;
  padding:36px 32px; display:flex; flex-direction:column;
}
.testimonial-card .why__quote-mark{margin-bottom:14px;}
.testimonial-card p.quote{
  font-family:var(--font-display); font-style:italic; font-size:17px;
  color:var(--purple-950); line-height:1.5; margin-bottom:24px; flex:1;
}
.testimonial-card .why__person{margin-top:auto;}

/* ============================================================
   GOVERNANCE / APPROACH
   ============================================================ */
.approach{padding:110px 0; background:var(--purple-950);}
.approach--teaser{padding:90px 0;}
.approach--teaser__grid{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.approach--teaser__grid .approach__head{flex:1 1 480px; margin-bottom:0;}
.approach--teaser__grid .btn{flex-shrink:0;}
.approach__head{max-width:640px; margin-bottom:20px;}
.approach__head h2{color:#fff; font-size:clamp(28px,3.2vw,38px);}
.approach__intro{color:rgba(255,255,255,.72); font-size:16px; max-width:640px; margin-bottom:54px;}
.approach__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12);
  margin-bottom:70px;
}
.approach__item{
  background:var(--purple-950); padding:32px 26px; transition:background .25s var(--ease);
}
.approach__item:hover{background:rgba(255,255,255,.05);}
.approach__item i{font-size:22px; color:var(--gold-500); margin-bottom:18px; display:block;}
.approach__item h4{color:#fff; font-size:15.5px; margin:0;}

.process{border-top:1px solid rgba(255,255,255,.12); padding-top:60px;}
.process h3{color:#fff; font-size:22px; margin-bottom:36px;}
.process__steps{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.process__step{position:relative; padding-top:44px;}
.process__step-num{
  position:absolute; top:0; left:0;
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  color:var(--gold-500); font-family:var(--font-display); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.process__step h5{color:#fff; font-size:14.5px; font-weight:700; margin-bottom:6px;}
.process__step p{color:rgba(255,255,255,.62); font-size:13px; margin:0;}

/* ============================================================
   CLIENTS & PARTNERS MARQUEE
   ============================================================ */
.clients{padding:64px 0 90px; margin-top:60px; border-top:1px solid var(--line);}
.clients__label{
  text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ink-soft); text-transform:uppercase; margin-bottom:34px;
}
.clients__marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.clients__track{display:flex; align-items:center; gap:52px; width:max-content; animation:marquee 42s linear infinite;}
.clients__track img{height:56px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.6; transition:opacity .3s, filter .3s;}
.clients__track img:hover{filter:grayscale(0); opacity:1;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ============================================================
   NEWS
   ============================================================ */
.news{padding:110px 0; background:var(--cream);}
.news__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:46px;}
.news__head h2{font-size:clamp(28px,3.2vw,38px); margin:0;}
.news__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:28px;
}
.news__card{
  background:var(--paper);
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease);
}
.news__card:hover{transform:translateY(-6px);}
.news__card img{width:100%; height:210px; object-fit:cover;}
.news__card--feature img{height:340px;}
.news__card-body{padding:24px 26px 28px;}
.news__date{
  display:inline-block;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  color:var(--gold-600); text-transform:uppercase; margin-bottom:10px;
}
.news__card h3{font-size:17px; margin:0;}
.news__card--feature h3{font-size:23px;}

/* gallery */
.gallery{margin-top:70px;}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:190px;
  gap:6px;
}
.gallery__item{overflow:hidden; cursor:pointer; position:relative;}
.gallery__item:nth-child(4n+1){grid-row:span 2;}
.gallery__item img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.gallery__item::after{
  content:"\f00e";
  font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px;
  background:rgba(36,26,61,0);
  opacity:0;
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.gallery__item:hover img{transform:scale(1.08);}
.gallery__item:hover::after{opacity:1; background:rgba(36,26,61,.45);}

/* ============================================================
   NEWS & UPDATES PAGE
   ============================================================ */
.news-card{position:relative;}
.news-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:28px;
  margin-top:44px;
}
.news-grid .news-card{display:flex; flex-direction:column;}
.news-grid .news-card__body{display:flex; flex-direction:column; flex:1;}
.news-card__tag{
  position:absolute; top:14px; left:14px; z-index:1;
  background:rgba(36,26,61,.85); color:#fff; backdrop-filter:blur(4px);
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px;
}
.news-card__excerpt{font-size:14px; color:var(--ink-soft); margin:10px 0 0;}
.news-card__full{display:none; font-size:14px; color:var(--ink-soft); margin:10px 0 0;}
.news-card__full.expanded{display:block;}
.news-card__more{
  align-self:flex-start; margin-top:auto; padding-top:14px; background:none; border:none;
  font-size:13px; font-weight:700; color:var(--purple-800); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.news-card__more i{font-size:11px; transition:transform .3s var(--ease);}
.news-card__more.expanded i{transform:rotate(180deg);}
.news-empty{display:none; text-align:center; padding:60px 0; color:var(--ink-soft); font-size:15px;}

@media (max-width:620px){
  .news-grid{grid-template-columns:1fr;}
}

/* ============================================================
   LEGAL DOCUMENT PAGES
   ============================================================ */
.legal-progress{
  position:fixed; top:0; left:0; height:3px; background:var(--gold-500);
  z-index:1100; width:0%;
}
.legal{padding:70px 0 110px; background:var(--paper);}
.legal__disclaimer{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--gold-100); border:1px solid var(--gold-500);
  border-radius:8px; padding:18px 22px; margin-bottom:40px;
  font-size:13.5px; color:var(--purple-950);
}
.legal__disclaimer i{color:var(--gold-600); font-size:18px; margin-top:2px; flex-shrink:0;}
.legal__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-bottom:40px; font-size:13px; color:var(--ink-soft);
}
.legal__meta strong{color:var(--purple-950);}
.legal__actions{margin-left:auto;}

.legal__jump{display:none; margin-bottom:32px;}
.legal__jump select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px;
  font-size:14px; background:var(--cream); font-family:inherit;
}

.legal-grid{display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start;}
.legal-toc{position:sticky; top:130px;}
.legal-toc__title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin-bottom:14px;
}
.legal-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px;}
.legal-toc li{counter-increment:toc;}
.legal-toc a{
  display:flex; gap:10px; padding:8px 10px; border-radius:6px;
  font-size:13.5px; color:var(--ink-soft); font-weight:500;
  border-left:2px solid transparent; transition:all .2s var(--ease);
}
.legal-toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--font-display); font-weight:700; color:var(--line); font-size:12px;
}
.legal-toc a:hover{background:var(--cream); color:var(--purple-800);}
.legal-toc a.active{background:var(--cream); color:var(--purple-950); border-left-color:var(--gold-500); font-weight:700;}
.legal-toc a.active::before{color:var(--gold-600);}

.legal-content section{
  padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--line);
  scroll-margin-top:120px;
}
.legal-content section:last-child{border-bottom:none; margin-bottom:0;}
.legal-content h2{
  font-size:20px; display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.legal-content p{font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin:0 0 14px;}
.legal-content ul{padding-left:20px; margin:0 0 14px;}
.legal-content li{font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:8px;}
.legal-content a{color:var(--purple-800); font-weight:600; text-decoration:underline;}
.legal-copy-link{
  background:none; border:none; color:var(--ink-soft); font-size:12px; cursor:pointer;
  margin-left:auto; opacity:0; transition:opacity .2s var(--ease); flex-shrink:0;
}
.legal-content h2:hover .legal-copy-link, .legal-copy-link:focus-visible{opacity:1;}

.legal-table-wrap{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:8px;}
.legal-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px;}
.legal-table th, .legal-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
.legal-table th{background:var(--cream); font-weight:700; color:var(--purple-950); font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.legal-table tr:last-child td{border-bottom:none;}
.legal-table td{color:var(--ink-soft);}

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-search{position:relative; max-width:640px; margin:0 auto 32px;}
.faq-search i{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); font-size:15px; pointer-events:none;
}
.faq-search input{
  width:100%; padding:16px 20px 16px 50px;
  border:1px solid var(--line); border-radius:30px;
  font-size:15px; font-family:inherit; background:var(--paper); color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-search input:focus{
  outline:none; border-color:var(--purple-700);
  box-shadow:0 0 0 3px rgba(122,74,150,.12);
}

.faq-vote{
  display:flex; align-items:center; flex-wrap:wrap; gap:0;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  min-height:1px;
}
.faq-vote:empty{margin-top:0; padding-top:0; border-top:none;}
.faq-vote__btn{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink-soft); font-size:12.5px; margin-right:8px; padding:0;
  transition:all .2s var(--ease); cursor:pointer;
}
.faq-vote__btn:hover{border-color:var(--purple-700); color:var(--purple-800);}
.faq-vote__btn.active{background:var(--purple-950); border-color:var(--purple-950); color:var(--gold-500);}

@media (max-width:620px){
  .faq-search input{padding:14px 18px 14px 46px; font-size:14px;}
}

/* ============================================================
   REPORT CORRUPTION PAGE
   ============================================================ */
.report-options{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:44px 0 70px;}
.report-option{
  border:1px solid var(--line); border-radius:12px; padding:36px 32px;
  display:flex; flex-direction:column; background:var(--paper);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.report-option:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.report-option--primary{background:var(--purple-950); border-color:var(--purple-950);}
.report-option__icon{
  width:56px; height:56px; border-radius:14px; margin-bottom:22px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:var(--cream); color:var(--purple-800);
}
.report-option--primary .report-option__icon{background:rgba(255,255,255,.1); color:var(--gold-500);}
.report-option h3{font-size:21px; margin-bottom:10px;}
.report-option--primary h3{color:#fff;}
.report-option p{font-size:14.5px; color:var(--ink-soft); margin-bottom:20px;}
.report-option--primary p{color:rgba(255,255,255,.75);}
.report-option__list{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px;}
.report-option__list li{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--purple-950);}
.report-option--primary .report-option__list li{color:#fff;}
.report-option__list i{color:var(--gold-600); width:16px; flex-shrink:0;}
.report-option--primary .report-option__list i{color:var(--gold-500);}
.report-option .btn{margin-top:auto; align-self:flex-start;}

@media (max-width:860px){
  .report-options{grid-template-columns:1fr;}
}

/* ============================================================
   CODES & GUIDELINES PAGE
   ============================================================ */
.resource-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:26px;
  margin-top:44px;
}
.resource-card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.resource-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card);}
.resource-card__top{
  padding:26px 24px 22px; background:var(--cream); border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.resource-card__icon{
  width:48px; height:48px; border-radius:10px; flex-shrink:0;
  background:var(--purple-950); color:var(--gold-500);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.resource-card__filetype{
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--purple-800); background:rgba(122,74,150,.1);
  padding:5px 10px; border-radius:20px; flex-shrink:0;
}
.resource-card__body{padding:20px 24px 24px; display:flex; flex-direction:column; flex:1;}
.resource-card__category{
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:8px;
}
.resource-card__title{font-size:17px; margin-bottom:8px; line-height:1.3;}
.resource-card__desc{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; flex:1;}
.resource-card__footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:14px; border-top:1px solid var(--line); margin-top:auto;
}
.resource-card__meta{font-size:11.5px; color:var(--ink-soft);}
.resource-card__action{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; padding:9px 16px; border-radius:30px;
  background:var(--gold-500); color:var(--purple-950); border:none;
  transition:background .25s var(--ease);
}
.resource-card__action:hover{background:var(--gold-600);}
.resource-card__action--pending{
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
}
.resource-card__action--pending:hover{border-color:var(--purple-700); color:var(--purple-800); background:transparent;}

@media (max-width:620px){
  .resource-grid{grid-template-columns:1fr;}
}

@media (max-width:1080px){
  .legal-grid{grid-template-columns:1fr;}
  .legal-toc{display:none;}
  .legal__jump{display:block;}
}
@media (max-width:620px){
  .legal__actions{margin-left:0; width:100%;}
  .legal__actions .btn{width:100%; justify-content:center;}
}

/* ============================================================
   TEAM / GOVERNANCE
   ============================================================ */
.team{padding:110px 0; background:var(--paper);}
.team h2{font-size:clamp(28px,3.2vw,38px); max-width:640px;}
.team__intro{max-width:560px; font-size:16px;}
.team__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px;}
.team__card{border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.team__photo{height:220px; background-size:cover; background-position:center;}
.team__card h3{font-size:18px; margin:22px 26px 10px;}
.team__card p{font-size:14px; margin:0 26px 24px;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--purple-950); padding:110px 0 0; color:#fff;}
.contact__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; padding-bottom:90px;}
.contact__copy h2{color:#fff; font-size:clamp(28px,3.2vw,38px); max-width:480px;}
.contact__copy > p{color:rgba(255,255,255,.72); max-width:440px;}
.contact__list{margin:34px 0; display:flex; flex-direction:column; gap:20px;}
.contact__list li{display:flex; gap:16px; align-items:flex-start; font-size:14.5px; color:rgba(255,255,255,.85);}
.contact__list i{color:var(--gold-500); margin-top:3px; width:16px;}
.contact__social{display:flex; gap:12px;}
.contact__social a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.contact__social a:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}

.contact__form{
  background:var(--paper);
  border-radius:10px;
  padding:40px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form__field{margin-bottom:20px;}
.form__field label{display:block; font-size:13px; font-weight:600; color:var(--purple-950); margin-bottom:7px;}
.form__field input, .form__field select, .form__field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:5px;
  padding:12px 14px;
  font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--cream);
  transition:border-color .2s, background .2s;
}
.form__field input:focus, .form__field select:focus, .form__field textarea:focus{
  border-color:var(--purple-700); background:#fff; outline:none;
}
.form__field textarea{resize:vertical;}
.form__note{margin:14px 0 0; font-size:13.5px; color:var(--purple-800); font-weight:600; min-height:1em;}

.contact__map{width:100%; height:360px; filter:grayscale(.25) contrast(1.05);}
.contact__map iframe{width:100%; height:100%; border:0; display:block;}

.contact__hours{margin:28px 0; padding:20px 22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px;}
.contact__hours h4{color:#fff; font-size:14px; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.contact__hours h4 i{color:var(--gold-500);}
.contact__hours-row{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:rgba(255,255,255,.7); padding:7px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.contact__hours-row:last-child{border-bottom:none;}
.contact__hours-row span:last-child{color:#fff; font-weight:600;}

.form__error{display:none; font-size:12px; color:#c0392b; margin-top:6px; font-weight:600;}
.form__field.has-error input, .form__field.has-error select, .form__field.has-error textarea{border-color:#c0392b; background:#fdf1f0;}
.form__field.has-error .form__error{display:block;}

.form__consent{display:flex; align-items:flex-start; gap:10px; margin:4px 0 22px;}
.form__consent input[type="checkbox"]{margin-top:3px; width:17px; height:17px; accent-color:var(--purple-800); flex-shrink:0; cursor:pointer;}
.form__consent label{font-size:13px; color:var(--ink-soft); line-height:1.55; cursor:pointer;}
.form__consent a{color:var(--purple-800); font-weight:600; text-decoration:underline;}
.form__consent .form__error{margin-top:8px;}

.form__whatsapp-note{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); margin-top:16px; justify-content:center;}
.form__whatsapp-note i{color:#25D366; font-size:15px;}

/* ============================================================
   AUTH MODAL
   ============================================================ */
.auth-modal{position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);}
.auth-modal.is-open{opacity:1; visibility:visible;}
.auth-modal__backdrop{position:absolute; inset:0; background:rgba(33,26,51,.6); backdrop-filter:blur(3px);}
.auth-modal__panel{
  position:relative; background:#fff; border-radius:10px; width:min(420px,92vw);
  padding:40px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
  transform:translateY(16px); transition:transform .35s var(--ease);
}
.auth-modal.is-open .auth-modal__panel{transform:translateY(0);}
.auth-modal__close{position:absolute; top:16px; right:18px; background:none; border:none; font-size:24px; color:var(--ink-soft); line-height:1;}
.auth-modal__tabs{display:flex; gap:4px; background:var(--cream); border-radius:30px; padding:4px; margin-bottom:26px;}
.auth-modal__tabs button{flex:1; background:none; border:none; padding:10px; border-radius:26px; font-weight:600; font-size:14px; color:var(--ink-soft); transition:background .25s, color .25s;}
.auth-modal__tabs button.active{background:var(--purple-950); color:#fff;}
.auth-modal__panel h3{font-size:22px; margin-bottom:20px;}
.auth-modal__form{display:flex; flex-direction:column; gap:14px;}
.auth-modal__form label{font-size:13px; font-weight:600; color:var(--purple-950);}
.auth-modal__form input{border:1px solid var(--line); border-radius:5px; padding:12px 14px; font-size:14.5px; background:var(--cream);}
.auth-modal__form input:focus{border-color:var(--purple-700); background:#fff; outline:none;}
.auth-modal__form button{margin-top:6px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--purple-950); color:rgba(255,255,255,.78); position:relative;}
.footer__top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;
  gap:40px;
  padding:80px 32px 60px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer__brand img{height:46px; margin-bottom:18px;}
.footer__brand p{color:rgba(255,255,255,.6); font-size:14px; max-width:280px;}
.footer__social{display:flex; gap:10px; margin-top:18px;}
.footer__social a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.footer__social a:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--purple-950);}
.footer__col h4{color:#fff; font-family:var(--font-body); font-size:14.5px; font-weight:700; margin-bottom:20px;}
.footer__col ul{display:flex; flex-direction:column; gap:12px;}
.footer__col ul a{font-size:14px; color:rgba(255,255,255,.66); transition:color .2s, padding-left .2s;}
.footer__col ul a:hover{color:var(--gold-500); padding-left:4px;}
.footer__contact li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:rgba(255,255,255,.66);}
.footer__contact i{color:var(--gold-500); margin-top:3px; width:14px;}

.footer__bottom{
  max-width:var(--container); margin:0 auto;
  padding:26px 32px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,.5);
}
.footer__powered a{color:var(--gold-500); font-weight:600;}

.back-to-top{
  position:fixed; right:28px; bottom:28px; z-index:900;
  width:46px; height:46px; border-radius:50%;
  background:var(--purple-950); color:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -12px rgba(36,26,61,.6);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease), background .25s;
}
.back-to-top.visible{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--gold-500); color:var(--purple-950);}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:3000;
  background:rgba(20,14,33,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.is-open{opacity:1; visibility:visible;}
.lightbox img{max-width:88vw; max-height:84vh; border-radius:4px; box-shadow:0 40px 80px rgba(0,0,0,.5);}
.lightbox__close{position:absolute; top:28px; right:34px; font-size:30px; color:#fff; background:none; border:none;}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; width:48px; height:48px; border-radius:50%; font-size:18px;}
.lightbox__nav--prev{left:28px;}
.lightbox__nav--next{right:28px;}

/* nav overlay backdrop for mobile drawer */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(20,14,33,.55);
  backdrop-filter:blur(2px); z-index:998;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.nav-backdrop.visible{opacity:1; visibility:visible;}
/* ============================================================
   SIGN IN / SIGN UP — auth page (fade/slide swap, responsive)
   (form__field, form__row, btn, eyebrow all reused)
   ============================================================ */

.auth-page{
  padding: calc(var(--topbar-h) + 40px) 0 70px;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(227,162,46,.12), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(122,74,150,.18), transparent 70%),
    var(--cream);
}

.auth-shell{
  display:grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  max-width:1040px;
  width:100%;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(36,26,61,.35);
  background:var(--paper);
  align-items:stretch;
}

/* ---------- Left: branding panel ---------- */
.auth-brand{
  background:var(--purple-950);
  color:#fff;
  padding:52px 40px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.auth-brand::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(400px 300px at 100% 100%, rgba(227,162,46,.18), transparent 70%);
  pointer-events:none;
}
.auth-brand__logo{
  position:relative;
  height:42px;
  width:auto;              /* stops the stretch */
  max-width:200px;
  object-fit:contain;
  margin-bottom:36px;
  flex-shrink:0;
}
.auth-brand h2{
  position:relative;
  color:#fff;
  font-size:clamp(20px, 2.2vw, 26px);
  line-height:1.25;
  margin-bottom:14px;
}
.auth-brand p{
  position:relative;
  color:rgba(255,255,255,.72);
  font-size:14.5px;
  line-height:1.65;
  margin-bottom:32px;
}
.auth-brand__benefits{
  position:relative;
  list-style:none;
  margin:auto 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.auth-brand__benefits li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:13.5px;
  line-height:1.55;
  color:rgba(255,255,255,.85);
}
.auth-brand__benefits i{
  color:var(--gold-500);
  margin-top:3px;
  flex-shrink:0;
}

/* ---------- Right: form panel ---------- */
.auth-flip-wrap{
  padding:48px 48px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
}

/* The wrapper no longer does a 3D flip — it crossfades between faces
   so each face can grow to its natural height without being clipped. */
.auth-flip{
  position:relative;
  width:100%;
  max-width:460px;
  min-height:0;
}
.auth-face{
  display:none;
  width:100%;
  animation: authFade .35s var(--ease) both;
}
.auth-face.is-active{
  display:block;
}
@keyframes authFade{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

.auth-face h1{
  font-size:clamp(22px, 2.4vw, 26px);
  margin-bottom:6px;
}
.auth-face__sub{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:24px;
}
.auth-face .form__field{
  margin-bottom:16px;
}
.auth-face .form__field label{
  font-size:12.5px;
}

/* ---------- Remember / forgot row ---------- */
.auth-remember-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:22px;
  font-size:13px;
}
.auth-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--ink-soft);
  cursor:pointer;
}
.auth-checkbox input{
  margin-top:3px;
  flex-shrink:0;
  width:16px;
  height:16px;
  accent-color:var(--purple-800);
}
.auth-forgot{
  color:var(--purple-800);
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
}
.auth-forgot:hover{
  color:var(--gold-600);
}

/* ---------- Consent checkbox ---------- */
.auth-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  color:var(--ink-soft);
  margin:6px 0 18px;
  line-height:1.55;
  cursor:pointer;
}
.auth-consent input{
  margin-top:3px;
  flex-shrink:0;
  width:16px;
  height:16px;
  accent-color:var(--purple-800);
}
.auth-consent a{
  color:var(--purple-800);
  font-weight:600;
  text-decoration:underline;
}

/* ---------- Password strength meter ---------- */
.pw-strength{
  margin:10px 0 6px;
}
.pw-strength__track{
  display:flex;
  gap:4px;
  margin-bottom:6px;
}
.pw-strength__seg{
  height:4px;
  flex:1;
  border-radius:2px;
  background:var(--line);
  transition:background .25s var(--ease);
}
.pw-strength__label{
  font-size:11.5px;
  color:var(--ink-soft);
  font-weight:600;
}

/* ---------- Inline field errors ---------- */
.auth-error{
  font-size:12px;
  color:#B3382C;
  margin:6px 0 0;
  display:none;
  line-height:1.5;
}
.auth-error.visible{
  display:block;
}
.form__field.has-error input,
.form__field.has-error select{
  border-color:#B3382C;
  background:#fdf1f0;
}

/* ---------- Bottom notes & switch ---------- */
.auth-note{
  font-size:11.5px;
  color:var(--ink-soft);
  text-align:center;
  line-height:1.55;
  margin:16px 0 0;
  padding:0 4px;
}
.auth-switch{
  text-align:center;
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-soft);
}
.auth-switch button{
  background:none;
  border:none;
  color:var(--purple-800);
  font-weight:700;
  cursor:pointer;
  padding:0 4px;
  font-size:13.5px;
}
.auth-switch button:hover{
  color:var(--gold-600);
  text-decoration:underline;
}

/* ---------- Navbar signed-in state (used elsewhere) ---------- */
.navbar__user{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
  color:var(--purple-950);
  padding:8px 4px;
}
.navbar__user i{
  color:var(--purple-700);
  font-size:20px;
}

/* ============================================================
   AUTH PAGE — RESPONSIVE
   ============================================================ */

/* Tablet landscape / small laptop: stack the two panels */
@media (max-width: 960px){
  .auth-shell{
    grid-template-columns:1fr;
    max-width:560px;
  }
  .auth-brand{
    padding:36px 32px;
  }
  .auth-brand__benefits{
    margin-top:24px;
  }
  .auth-flip-wrap{
    padding:36px 32px 42px;
  }
}

/* Tablet portrait / large phone */
@media (max-width: 620px){
  .auth-page{
    padding: calc(var(--topbar-h) + 24px) 0 50px;
    align-items:flex-start;
  }
  .auth-shell{
    border-radius:12px;
    box-shadow:0 24px 50px -24px rgba(36,26,61,.35);
  }
  .auth-brand{
    padding:30px 24px;
  }
  .auth-brand__logo{
    height:36px;
    margin-bottom:24px;
  }
  .auth-brand h2{
    font-size:19px;
  }
  .auth-brand p{
    font-size:13.5px;
    margin-bottom:20px;
  }
  .auth-brand__benefits{
    gap:12px;
  }
  .auth-brand__benefits li{
    font-size:13px;
  }
  .auth-flip-wrap{
    padding:28px 22px 32px;
  }
  .auth-face h1{
    font-size:21px;
  }
  .auth-face__sub{
    font-size:13.5px;
    margin-bottom:20px;
  }
  .auth-remember-row{
    margin-bottom:18px;
  }
}

/* Small phones */
@media (max-width: 420px){
  .auth-page{
    padding: calc(var(--topbar-h) + 16px) 0 40px;
  }
  .auth-brand{
    padding:26px 20px;
  }
  .auth-brand__logo{
    height:32px;
    margin-bottom:20px;
  }
  .auth-brand h2{
    font-size:17.5px;
  }
  .auth-brand p{
    font-size:13px;
  }
  .auth-flip-wrap{
    padding:24px 18px 28px;
  }
  .auth-face h1{
    font-size:20px;
  }
  .auth-face .form__field label{
    font-size:12px;
  }
  .auth-remember-row{
    font-size:12.5px;
  }
  .auth-forgot{
    font-size:12.5px;
  }
  .auth-switch{
    font-size:13px;
  }
  .auth-switch button{
    font-size:13px;
  }
  .auth-note{
    font-size:11px;
  }
}

/* ============================================================
   RESPONSIVE
   Tiers (largest → smallest):
   1200px = nav collapses to the drawer
   1080px = tablet / iPad landscape
    860px = iPad portrait / phablet
    620px = phone
    500px = small phones (drawer + topbar refinements)
   ============================================================ */

/* ---------- 1200px: nav collapse + drawer + laptop tweaks ---------- */
@media (max-width: 1200px){

  /* ---- topbar + navbar shell ---- */
  .topbar__addr{display:none;}

  .navbar{top:0;}
  .navbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    gap:12px;
  }
  .navbar.scrolled .navbar__inner{padding:10px 20px;}
  .navbar__brand{margin-right:auto;}
  .navbar__nav{display:none;}
  .navbar__cta{display:none;}
  .navbar__toggle{display:flex;}

  /* ---- generic page-padding tweaks ---- */
  .hero{padding-top:88px;}
  .section-inner{padding:0 20px;}
  .about, .why, .programs, .portfolio, .news, .team, .contact,
  .framework, .gov-accordion, .gov-stepper, .courses, .publications,
  .approach, .page-header, .history, .testimonials, .about-teaser,
  .programs-teaser, .portfolio-teaser, .news-teaser, .year-tabs{padding-top:70px; padding-bottom:70px;}
  .page-header{padding-top:150px;}
  .approach--teaser{padding-top:70px; padding-bottom:70px;}
  .cta-banner{padding-top:60px; padding-bottom:60px;}
  .contact{padding-bottom:0;}
  .contact__grid{padding-bottom:60px;}
  .hero__stats{grid-template-columns:1fr 1fr;}

  /* ---- the drawer itself ---- */
  .navbar__nav.open{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(360px, 88vw);
    background:#fff;
    padding:88px 24px 32px;
    box-shadow:-24px 0 60px rgba(20,14,33,.28);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:1001;
    animation:drawerSlide .35s var(--ease) both;
  }
  @keyframes drawerSlide{
    from{transform:translateX(100%); opacity:.4;}
    to{transform:translateX(0); opacity:1;}
  }

  .navbar__nav.open::before{
    content:"Menu";
    position:absolute;
    top:26px; left:24px;
    font-size:13px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--purple-800);
  }

  .navbar__nav.open > ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin-top:8px;
    width:100%;
  }
  .navbar__nav.open > ul > li{
    border-bottom:1px solid var(--line);
    width:100%;
  }
  .navbar__nav.open > ul > li:last-child{border-bottom:none;}

  .navbar__nav.open > ul > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 4px;
    font-size:15.5px;
    font-weight:600;
    color:var(--ink);
    border-radius:0;
    background:transparent;
  }
  .navbar__nav.open > ul > li > a:hover,
  .navbar__nav.open > ul > li > a.active{
    background:transparent;
    color:var(--purple-800);
  }
  .navbar__nav.open > ul > li > a i{
    font-size:11px;
    opacity:.5;
    transition:transform .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
  }
  .navbar__nav.open > ul > li.dropdown-open > a{
    color:var(--purple-800);
  }
  .navbar__nav.open > ul > li.dropdown-open > a i{
    transform:rotate(180deg);
    color:var(--gold-600);
    opacity:1;
  }

  /* dropdowns become inline accordions */
  .navbar__nav.open .dropdown{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:none;
    border-radius:0;
    padding:0 0 10px 14px;
    background:transparent;
    display:none;
    min-width:0;
    width:100%;
  }
  .navbar__nav.open li.dropdown-open .dropdown{
    display:block;
    animation:dropdownFade .25s var(--ease) both;
  }
  @keyframes dropdownFade{
    from{opacity:0; transform:translateY(-4px);}
    to{opacity:1; transform:translateY(0);}
  }
  .navbar__nav.open .dropdown li a{
    display:block;
    padding:11px 14px;
    font-size:14px;
    font-weight:500;
    color:var(--ink-soft);
    border-left:2px solid var(--line);
    border-radius:0;
    transition:background .2s, color .2s, border-color .2s;
  }
  .navbar__nav.open .dropdown li a:hover{
    background:var(--cream);
    color:var(--purple-800);
    border-left-color:var(--gold-500);
  }

  /* mobile-only CTA block inside the drawer */
  .navbar__nav.open .navbar__cta-mobile{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  .navbar__nav.open .navbar__cta-mobile .btn{
    width:100%;
    justify-content:center;
  }

  body.nav-open{overflow:hidden;}
}

/* Desktop-only: neutralize any leftover .open state */
@media (min-width: 1201px){
  .navbar__nav.open{
    display:flex !important;
    position:static;
    width:auto;
    padding:0;
    box-shadow:none;
    background:transparent;
    overflow:visible;
    animation:none;
  }
  .navbar__nav.open::before{display:none;}
  .navbar__cta-mobile{display:none !important;}
  body.nav-open{overflow:auto;}
}

/* ---------- 1080px: tablet / iPad landscape ---------- */
@media (max-width: 1080px){
  .about__grid, .why__grid, .contact__grid, .about-teaser__grid{grid-template-columns:1fr;}
  .about__media, .about-teaser__media{margin-bottom:20px;}
  .programs__panel.active{grid-template-columns:1fr;}
  .programs-teaser__head{grid-template-columns:1fr;}
  .cta-banner__inner{flex-direction:column; align-items:flex-start;}

  .hero__stats{grid-template-columns:1fr 1fr;}
  .values__row{grid-template-columns:1fr 1fr; row-gap:36px;}
  .values__divider{display:none;}

  .news__grid, .news-teaser__grid{grid-template-columns:1fr 1fr;}
  .news__card--feature, .news-card--feature{grid-column:1/-1;}

  .team__grid, .portfolio__grid, .programs__sub-grid,
  .portfolio-teaser__grid, .programs-teaser__grid,
  .testimonials__grid, .approach__grid, .process__steps,
  .framework__grid, .publications__grid, .gallery__grid{grid-template-columns:1fr 1fr;}

  .footer__top{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1/-1;}
}

/* ---------- 860px: iPad portrait / phablet ---------- */
@media (max-width: 860px){
  .stepper-nav__label{display:none;}
  .approach--teaser__grid{flex-direction:column; align-items:flex-start;}
  .timeline{padding-left:26px;}
  .form__row{grid-template-columns:1fr;}
  .about-teaser__media-caption{margin-left:0; max-width:none;}
  .footer__top{padding:60px 24px 40px;}
  .footer__bottom{flex-direction:column; gap:10px; text-align:center;}
}

/* ---------- 620px: phone ---------- */
@media (max-width: 620px){
  .news__grid, .news-teaser__grid,
  .portfolio__grid, .programs__sub-grid, .team__grid,
  .portfolio-teaser__grid, .programs-teaser__grid,
  .testimonials__grid, .approach__grid, .process__steps,
  .framework__grid, .publications__grid,
  .values__row{grid-template-columns:1fr;}
  .hero__stats{grid-template-columns:1fr 1fr;}
  .gallery__grid{grid-template-columns:1fr 1fr; grid-auto-rows:150px;}
  .about__media-caption, .about-teaser__media-caption{margin-left:0; max-width:none;}
  .programs__head{grid-template-columns:1fr;}
  .cta-banner__actions{flex-direction:column; align-items:stretch;}
  .cta-banner__actions .btn{width:100%;}
  .footer__top{grid-template-columns:1fr;}

  /* topbar: two tidy rows — contact line, then social line */
  .topbar__inner{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:8px 16px;
  }
  .topbar__contact{
    gap:16px;
    justify-content:center;
  }
  .topbar__social{
    justify-content:center;
    gap:18px;
    padding-top:2px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .topbar__social a{width:28px; height:28px; font-size:12px;}
}

@media (min-width: 501px) and (max-width: 1201px){
 /* TOPBAR — compact single/double row */
  :root{--topbar-h:64px;}
  .topbar{font-size:11.5px;}
  .topbar__inner{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:4px 10px;
    padding:7px 14px;
  }
  .topbar__contact{
    flex:1 1 auto;
    gap:14px;
    justify-content:flex-start;
    min-width:0;
  }
  /* phone number: keep icon, let text shrink; email hides its text, icon only */
  .topbar__contact li a span{
    max-width:120px;
  }
  .topbar__contact li:nth-child(2) a span{display:none;} /* email icon-only on tiny screens */
  .topbar__social{
    flex:0 0 auto;
    border-top:none;
    padding-top:0;
    gap:8px;
  }
  .topbar__social a{width:26px; height:26px; font-size:11px;}

  /* NAVBAR — logo hard left, hamburger hard right */
  .navbar{top:var(--topbar-h);}
  .navbar.scrolled{top:0;}
  .navbar__inner{
    padding:10px 14px;
    gap:180px;
  }
  .navbar.scrolled .navbar__inner{padding:62px 0px 14px 14px;}
  .navbar__brand{margin-right:auto;}
  .navbar__brand img{height:38px;}
  .navbar.scrolled .navbar__brand img{height:34px;}
  .navbar__toggle{
    width:42px; height:42px;
    padding:9px;
  }

  /* DRAWER — full width on very small screens, no cramped side panel */
  .navbar__nav.open{
    width:90vw;
    max-width:100vw;
    padding:80px 22px 28px;
    height:100vh;
  }


  .navbar__nav.open::before{left:22px;}
  .navbar__nav.open > ul > li > a{font-size:16px; padding:16px 4px;}
  .navbar__nav.open .dropdown li a{font-size:14.5px;}

  /* hero + headers clear the taller topbar */
  .hero{padding-top:calc(var(--topbar-h) + 60px);}
  .page-header{padding-top:calc(var(--topbar-h) + 100px);}

  /* back-to-top shouldn't cover the drawer CTA */
  .back-to-top{right:16px; bottom:16px; width:42px; height:42px;}

}

/* ---------- 500px: small phones — hamburger nav polish ---------- */
@media (max-width: 500px){

  /* TOPBAR — compact single/double row */
  :root{--topbar-h:64px;}
  .topbar{font-size:11.5px;}
  .topbar__inner{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:4px 10px;
    padding:7px 14px;
  }
  .topbar__contact{
    flex:1 1 auto;
    gap:14px;
    justify-content:flex-start;
    min-width:0;
  }
  /* phone number: keep icon, let text shrink; email hides its text, icon only */
  .topbar__contact li a span{
    max-width:120px;
  }
  .topbar__contact li:nth-child(2) a span{display:none;} /* email icon-only on tiny screens */
  .topbar__social{
    flex:0 0 auto;
    border-top:none;
    padding-top:0;
    gap:8px;
  }
  .topbar__social a{width:26px; height:26px; font-size:11px;}

  /* NAVBAR — logo hard left, hamburger hard right */
  .navbar{top:var(--topbar-h);}
  .navbar.scrolled{top:0;}
  .navbar__inner{
    padding:10px 14px;
    gap:180px;
  }
  .navbar.scrolled .navbar__inner{padding:62px 0px 14px 14px;}
  .navbar__brand{margin-right:auto;}
  .navbar__brand img{height:38px;}
  .navbar.scrolled .navbar__brand img{height:34px;}
  .navbar__toggle{
    width:42px; height:42px;
    padding:9px;
  }

  /* DRAWER — full width on very small screens, no cramped side panel */
  .navbar__nav.open{
    width:90vw;
    max-width:100vw;
    padding:80px 22px 28px;
    height:100vh;
  }


  .navbar__nav.open::before{left:22px;}
  .navbar__nav.open > ul > li > a{font-size:16px; padding:16px 4px;}
  .navbar__nav.open .dropdown li a{font-size:14.5px;}

  /* hero + headers clear the taller topbar */
  .hero{padding-top:calc(var(--topbar-h) + 60px);}
  .page-header{padding-top:calc(var(--topbar-h) + 100px);}

  /* back-to-top shouldn't cover the drawer CTA */
  .back-to-top{right:16px; bottom:16px; width:42px; height:42px;}
  
}