/* ==========================================================================
   EACB Modern Institutional Theme, design system
   Preserves the EACB identity: navy #172A46, gold #C9A02C, cream #F7F5EF.
   Fonts: Inter (body) + Plus Jakarta Sans (display).
   ========================================================================== */

:root {
  --navy: #172A46;   --navy-50:#EEF1F6; --navy-100:#D6DEEA; --navy-200:#AEBED4;
  --navy-300:#7F94B6; --navy-400:#4E6791; --navy-500:#2C4670; --navy-700:#132339;
  --navy-800:#0F1B2C; --navy-900:#0A1220;
  --gold:#C9A02C;    --gold-50:#FBF6E9; --gold-100:#F4E8C4; --gold-200:#E9D089;
  --gold-300:#DBB84F; --gold-500:#A8831F; --gold-600:#856819; --gold-700:#634D13;
  --ink:#182333;
  --cream:#F7F5EF;
  --surface:#FFFFFF; --surface-muted:#F7F5EF; --surface-sunken:#EFEDE4;
  --focus:#C9A02C;
  --radius:0.875rem; --radius-2xl:1.25rem; --radius-3xl:1.75rem;
  --shadow-card:0 1px 2px rgba(23,42,70,.06), 0 8px 24px rgba(23,42,70,.06);
  --shadow-card-hover:0 2px 6px rgba(23,42,70,.08), 0 16px 40px rgba(23,42,70,.12);
  --shadow-gold:0 8px 24px rgba(201,160,44,.28);
  --ease:cubic-bezier(.25,1,.5,1);
  --container:1320px;
  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:"Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --header-h:5rem;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--surface);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--navy);margin:0 0 .5em;
  line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
/* Fluid, consistent type hierarchy across desktop / tablet / mobile */
h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.75rem);line-height:1.12}
h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2rem);line-height:1.18}
h3{font-size:clamp(1.15rem,1rem + .7vw,1.4rem);line-height:1.28}
h4{font-size:1.05rem;line-height:1.3}
h5{font-size:.95rem;line-height:1.35}
h6{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:var(--navy);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--gold-600)}
ul,ol{margin:0 0 1rem;padding-left:1.25rem}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--gold);color:#1b1400}
hr{border:0;border-top:1px solid var(--navy-100);margin:2rem 0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000}
.skip-link:focus{left:1rem;top:1rem;background:var(--navy);color:#fff;padding:.5rem 1rem;border-radius:.5rem}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:1.25rem}
@media(min-width:640px){.container{padding-inline:1.5rem}}
@media(min-width:1024px){.container{padding-inline:2rem}}
.section{padding-block:3.5rem}
@media(min-width:768px){.section{padding-block:5rem}}
@media(min-width:1200px){.section{padding-block:6rem}}
@media(max-width:520px){.section{padding-block:2.5rem}}
.section-tight{padding-block:2.5rem}
.bg-muted{background:var(--surface-muted)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff}
.grid{display:grid;gap:1.25rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold-500)}
.section-head{max-width:52rem;margin-bottom:2.5rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:.5rem}
.section-head p{color:rgba(24,35,51,.65);font-size:1.05rem;margin-bottom:0}
.rule-gold{height:2px;width:3rem;background:var(--gold);border-radius:2px;margin:.75rem 0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-family:var(--font-sans);border-radius:999px;cursor:pointer;
  border:1px solid transparent;padding:.65rem 1.35rem;font-size:.95rem;line-height:1;
  transition:all .2s var(--ease);text-align:center;white-space:nowrap}
.btn svg{width:1.1em;height:1.1em;flex:0 0 auto}
.btn-gold{background:var(--gold);color:var(--navy-800);box-shadow:var(--shadow-gold)}
.btn-gold:hover{background:var(--gold-300);color:var(--navy-800)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:var(--shadow-card)}
.btn-navy:hover{background:var(--navy-700);color:#fff}
.btn-outline{border-color:rgba(255,255,255,.8);color:#fff;background:transparent}
.btn-outline:hover{background:#fff;color:var(--navy)}
.btn-outline-navy{border-color:var(--navy-200);color:var(--navy);background:#fff}
.btn-outline-navy:hover{border-color:var(--navy-400);background:var(--navy-50);color:var(--navy)}
.btn-ghost{color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy-50)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-lg{padding:.8rem 1.5rem;font-size:.98rem}
.btn-block{width:100%}

/* ---------- Top utility bar (compact) ---------- */
.topbar{background:var(--navy-900);color:rgba(255,255,255,.72);font-size:.78rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:2.1rem;padding-block:.25rem}
.topbar a{color:rgba(255,255,255,.72)}
.topbar a:hover{color:var(--gold-200)}
.topbar-left{display:flex;align-items:center;gap:1.1rem;flex-wrap:nowrap;min-width:0}
.topbar-left span{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.topbar-left svg{width:.85rem;height:.85rem;color:var(--gold-200);flex:0 0 auto}
.topbar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.topbar-portal{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .7rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#fff !important;font-weight:600;font-size:.74rem;line-height:1.4}
.topbar-portal:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff !important}
.topbar-portal svg{width:.82rem;height:.82rem}
.topbar-social{display:inline-flex;align-items:center;gap:.55rem}
.topbar-social a{display:inline-flex}
.topbar-social svg{width:.95rem;height:.95rem}
@media(max-width:900px){.topbar-left span.hide-sm{display:none}}
@media(max-width:600px){.topbar{display:none}}

/* ---------- Notification / News ticker (marquee) ---------- */
.ticker{background:var(--navy-800);color:rgba(255,255,255,.9)}
.ticker-inner{display:flex;align-items:center;gap:1rem;min-height:2.75rem;padding-block:.35rem}
.ticker-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;background:var(--gold);
  color:var(--navy-800);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.32rem .7rem;border-radius:999px;white-space:nowrap}
.ticker-badge:hover{background:var(--gold-300);color:var(--navy-800)}
.ticker-badge-ic{width:.9rem;height:.9rem}
.ticker-viewport{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent)}
.ticker-track{display:inline-flex;white-space:nowrap;animation:eacb-marquee 40s linear infinite;will-change:transform}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-group{display:inline-flex;align-items:center}
.ticker-item{display:inline-flex;align-items:baseline;gap:.5rem;color:rgba(255,255,255,.9);
  font-size:.85rem;padding:0 1.5rem;position:relative}
.ticker-item::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--gold)}
.ticker-item:hover{color:#fff}
.ticker-item-date{font-size:.72rem;color:var(--gold-200);font-weight:600;flex:0 0 auto}
.ticker-item-title{font-weight:500}
.ticker-static{display:inline-block;font-size:.88rem;font-weight:500;padding-left:.25rem}
.ticker-static a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ticker-more{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;color:var(--gold-200);
  font-size:.76rem;font-weight:600;white-space:nowrap}
.ticker-more:hover{color:#fff}
.ticker-more svg{width:.9rem;height:.9rem}
@keyframes eacb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.ticker-more{display:none}.ticker-item{padding:0 1rem}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.ticker-viewport{overflow-x:auto}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:box-shadow .2s,border-color .2s}
.site-header.scrolled{border-color:transparent;box-shadow:var(--shadow-card)}
.header-row{display:flex;align-items:center;gap:.75rem;height:var(--header-h)}

/* Brand lockup */
.brand{display:inline-flex;flex:0 0 auto;align-items:center;gap:.625rem}
.brand-chip{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;
  background:#fff;border-radius:.5rem;padding:4px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.brand-chip img{height:36px;width:auto}
.brand-name{display:none;flex-direction:column;font-family:var(--font-display);font-weight:700;
  line-height:1.15;letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
.brand-name span{font-size:.79rem}
@media(min-width:640px){.brand-name{display:flex}}
@media(min-width:1320px){.brand-name span{font-size:.825rem}}
.brand-name.light{color:#fff}

/* Primary nav */
.primary-nav{display:none;min-width:0;flex:1 1 0%;align-items:center;justify-content:center;gap:2px}
@media(min-width:1280px){.primary-nav{display:flex}}
.primary-nav ul{list-style:none;margin:0;padding:0}
.primary-nav > ul{display:flex;align-items:center;gap:2px}
.primary-nav li{position:relative}
.primary-nav .sub-menu{display:block}
.primary-nav a{position:relative;display:inline-flex;align-items:center;gap:.15rem;white-space:nowrap;
  border-radius:8px;padding:.5rem .4rem;font-size:.78rem;font-weight:500;line-height:1;color:rgba(24,35,51,.78)}
.primary-nav a:hover,.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a,
.primary-nav .current-menu-parent>a,.primary-nav .current-menu-ancestor>a{color:var(--navy)}
.primary-nav .current-menu-item>a::after,.primary-nav .current_page_item>a::after,
.primary-nav .current-menu-parent>a::after,.primary-nav .current-menu-ancestor>a::after{content:"";
  position:absolute;left:.5rem;right:.5rem;bottom:2px;height:2px;border-radius:2px;background:var(--gold)}
.nav-caret{width:12px;height:12px;margin-left:1px;opacity:.65;transition:transform .18s}
.primary-nav li:hover>a .nav-caret,.primary-nav li:focus-within>a .nav-caret{transform:rotate(180deg);opacity:.9}

/* Dropdowns, aligned under the parent, compact and premium */
.primary-nav .sub-menu{position:absolute;left:0;top:calc(100% + 2px);z-index:40;min-width:14.5rem;max-width:20rem;
  margin:0;padding:.4rem;list-style:none;background:#fff;border:1px solid var(--navy-100);border-radius:.9rem;
  box-shadow:0 12px 32px rgba(15,27,44,.14),0 2px 6px rgba(15,27,44,.06);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
.primary-nav li:hover>.sub-menu,.primary-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.primary-nav .sub-menu li{width:100%}
.primary-nav .sub-menu a{display:block;width:100%;white-space:normal;border-radius:.6rem;
  padding:.5rem .7rem;font-size:.82rem;font-weight:500;line-height:1.35;color:var(--navy-700)}
.primary-nav .sub-menu a:hover{background:var(--navy-50);color:var(--navy)}
.primary-nav .sub-menu a::after{display:none!important}

/* Header actions */
.header-actions{display:flex;flex:0 0 auto;align-items:center;gap:.5rem;margin-left:auto}
@media(min-width:1280px){.header-actions{margin-left:0}}
.header-actions .btn{flex:0 0 auto}
.apply-cta{display:none}
@media(min-width:640px){.apply-cta{display:inline-flex}}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  flex:0 0 auto;border:1px solid var(--navy-100);border-radius:.75rem;background:#fff;color:var(--navy);cursor:pointer}
.nav-toggle:hover{background:var(--navy-50)}
@media(min-width:1280px){.nav-toggle{display:none}}
.nav-toggle svg{width:22px;height:22px}

/* ---------- Mobile drawer ---------- */
.mobile-drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;overflow:hidden}
.mobile-drawer.open{visibility:visible;pointer-events:auto}
.mobile-backdrop{position:absolute;inset:0;background:rgba(10,18,32,.5);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s}
.mobile-drawer.open .mobile-backdrop{opacity:1}
.mobile-panel{position:absolute;right:0;top:0;height:100%;width:min(22rem,90vw);background:#fff;
  box-shadow:-8px 0 40px rgba(10,18,32,.25);transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column}
.mobile-drawer.open .mobile-panel{transform:none}
.mobile-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;
  border-bottom:1px solid var(--navy-100)}
.mobile-nav{flex:1;overflow-y:auto;padding:1rem .75rem}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav>ul>li>a,.mobile-nav .menu-item>a{display:block;padding:.75rem 1rem;border-radius:.75rem;
  font-weight:500;color:rgba(24,35,51,.85)}
.mobile-nav a:hover{background:var(--navy-50)}
.mobile-nav .sub-menu{margin:.25rem 0 .25rem 1rem;padding-left:.75rem;border-left:1px solid var(--navy-100)}
.mobile-nav .sub-menu a{font-size:.9rem;padding:.55rem .75rem;color:rgba(24,35,51,.7)}
.mobile-foot{padding:1rem;border-top:1px solid var(--navy-100);display:flex;flex-direction:column;gap:.5rem}
.mobile-close{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;
  border:1px solid var(--navy-100);border-radius:.75rem;background:#fff;color:var(--navy);cursor:pointer}

/* ---------- Hero slider ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy)}
.hero-track{display:flex;transition:transform .7s var(--ease)}
.hero-slide{position:relative;flex:0 0 100%;min-height:clamp(30rem,66vh,42rem);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-slide.accent-navy .hero-bg{background:linear-gradient(120deg,#0F1B2C,#172A46 60%,#2C4670)}
.hero-slide.accent-navy-gold .hero-bg{background:linear-gradient(120deg,#0F1B2C,#172A46 55%,#634D13)}
.hero-slide.accent-deep .hero-bg{background:linear-gradient(120deg,#0A1220,#132339 70%,#172A46)}
.hero-slide.accent-gold .hero-bg{background:linear-gradient(120deg,#132339,#2C4670 55%,#856819)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,18,32,.82) 0%,rgba(10,18,32,.55) 45%,rgba(10,18,32,.25) 100%)}
.hero-inner{position:relative;z-index:1;padding-block:4rem;max-width:44rem}
@media(min-width:1024px){.hero-inner{padding-block:5rem}}
.hero-label{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold-200);font-weight:600;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1rem}
/* hero label reads as clean uppercase text, no decorative rule */
.hero h1{color:#fff;font-size:clamp(2.25rem,4.5vw,3.5rem);line-height:1.08;margin-bottom:1rem}
.hero p{color:rgba(255,255,255,.82);font-size:1.15rem;max-width:36rem;margin-bottom:1.75rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-controls{position:absolute;z-index:2;left:0;right:0;bottom:1.5rem}
.hero-controls .container{display:flex;align-items:center;gap:1rem}
.hero-dots{display:flex;gap:.5rem}
.hero-dot{width:.55rem;height:.55rem;border-radius:999px;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.hero-dot.active{background:var(--gold);width:1.5rem}
.hero-arrows{margin-left:auto;display:flex;gap:.5rem}
.hero-arrow,.hero-play{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.hero-arrow:hover,.hero-play:hover{background:rgba(255,255,255,.2)}
.hero-arrow svg,.hero-play svg{width:18px;height:18px}
@media(max-width:600px){.hero-slide{min-height:30rem}.hero p{font-size:1rem}.hero-inner{padding-block:3rem}
  .hero-cta{gap:.5rem}.hero-cta .btn{padding:.7rem 1.1rem;font-size:.9rem}}

/* ---------- Quick actions ---------- */
.quick-actions{position:relative;z-index:5;margin-top:-2.5rem}
@media(max-width:600px){.quick-actions{margin-top:1.25rem}}
.quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;background:#fff;
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card-hover);padding:.75rem}
.quick-card{display:flex;flex-direction:column;gap:.3rem;padding:.85rem;border-radius:var(--radius);transition:background .2s}
.quick-card:hover{background:var(--navy-50)}
.quick-card .qi{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.7rem;
  background:var(--navy);color:var(--gold);margin-bottom:.35rem}
.quick-card .qi svg{width:1.2rem;height:1.2rem}
.quick-card strong{color:var(--navy);font-family:var(--font-display);font-size:.98rem}
.quick-card span{font-size:.8rem;color:rgba(24,35,51,.6)}
@media(max-width:1023px){.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.quick-grid{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--navy-100);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);overflow:hidden;height:100%;display:flex;flex-direction:column}
.card>.card-media{flex:0 0 auto}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.card-media{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-500));overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.card-media .ph{color:var(--gold);width:2rem;height:2rem}
.card-tag{position:absolute;right:.75rem;top:.75rem;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  color:#fff;font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:999px}
.card-body{padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1 1 auto}
.card-body h3{font-size:1.05rem;margin:0}
.card-body h3 a{color:var(--navy)}
.card-body h3 a:hover{color:var(--gold-600)}
.card-meta{font-size:.78rem;color:rgba(24,35,51,.55);font-weight:500}
.card-excerpt{font-size:.9rem;color:rgba(24,35,51,.65);margin:0}
.card-foot{margin-top:auto;display:flex;align-items:center;gap:.75rem;padding-top:.6rem}
.card-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--navy)}
.card-link:hover{color:var(--gold-600)}
.card-apply{margin-left:auto;font-size:.75rem;font-weight:600;background:var(--gold);color:var(--navy-800);
  padding:.4rem .85rem;border-radius:999px}
.card-apply:hover{background:var(--gold-300);color:var(--navy-800)}

/* Leader card — compact (3–4 per row on desktop) */
.leader-card{text-align:center}
.leaders-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media(max-width:1023px){.leaders-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.leaders-grid{grid-template-columns:1fr;max-width:22rem;margin-inline:auto}}
.leader-portrait{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-800));position:relative}
.leader-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform .3s var(--ease)}
.leader-card:hover .leader-portrait img{transform:scale(1.04)}
.leader-initials{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--gold);
  width:3.3rem;height:3.3rem;border:2px solid rgba(201,160,44,.45);border-radius:999px;display:flex;align-items:center;justify-content:center}
.leader-card .card-body{align-items:center;text-align:center;padding:.75rem .85rem .95rem;gap:.15rem}
.leader-card h3{font-size:.92rem;line-height:1.25}
.leader-role{color:var(--gold-600);font-weight:600;font-size:.76rem}

/* Feature / value tiles */
.tile{position:relative;background:#fff;border:1px solid var(--navy-100);border-radius:var(--radius-2xl);
  padding:1.4rem;box-shadow:var(--shadow-card);height:100%;overflow:hidden;transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.tile-bar{display:none}
.tile-ic{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.7rem;
  background:var(--navy);color:var(--gold);margin-bottom:.85rem}
.tile-ic svg{width:1.25rem;height:1.25rem}
.tile h3{font-size:1.02rem;margin:0 0 .35rem}
.tile p{font-size:.9rem;color:rgba(24,35,51,.65);margin:0}
.stat-value{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--navy);letter-spacing:-.02em;margin:.5rem 0 0}
.stat-label{font-size:.85rem;font-weight:500;color:rgba(24,35,51,.6);margin:.35rem 0 0}

/* ---------- Academic area blocks ---------- */
.area-block{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.area-block.rev{direction:rtl}.area-block.rev>*{direction:ltr}
.area-visual{aspect-ratio:4/3;border-radius:var(--radius-3xl);background:linear-gradient(135deg,var(--navy),var(--navy-800));
  display:flex;align-items:center;justify-content:center;color:var(--gold);box-shadow:var(--shadow-card)}
.area-visual svg{width:4rem;height:4rem}
.area-list{list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;gap:.5rem}
.area-list li{display:flex;gap:.6rem;font-size:.92rem;color:rgba(24,35,51,.75)}
.area-list li::before{content:"";flex:0 0 auto;width:1.1rem;height:1.1rem;margin-top:.15rem;border-radius:999px;
  background:var(--gold-100);box-shadow:inset 0 0 0 2px var(--gold)}
@media(max-width:860px){.area-block,.area-block.rev{grid-template-columns:1fr;direction:ltr}}

/* ---------- Page header / breadcrumbs ---------- */
.page-hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-10%;top:-40%;width:40rem;height:40rem;border-radius:999px;
  background:radial-gradient(circle,rgba(201,160,44,.18),transparent 60%)}
.page-hero .container{position:relative;padding-block:3.5rem}
.page-hero .eyebrow{color:var(--gold-200)}
.page-hero h1{color:#fff;font-size:clamp(2rem,3.5vw,2.75rem);margin:.5rem 0}
.page-hero p{color:rgba(255,255,255,.8);max-width:44rem;margin:0}
.breadcrumbs{font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:.75rem}
.breadcrumbs a{color:rgba(255,255,255,.8)}
.breadcrumbs a:hover{color:var(--gold-200)}
.breadcrumbs span{margin:0 .4rem}

/* ---------- Prose ---------- */
.prose{max-width:68ch}
.prose h2{font-size:1.5rem;margin-top:2rem}
.prose h3{font-size:1.2rem;margin-top:1.5rem}
.prose img{border-radius:var(--radius);margin:1.5rem 0}
.prose ul li{margin-bottom:.4rem}
.info-box{background:var(--navy);color:#fff;border-radius:var(--radius-2xl);padding:1.75rem}
.info-box h3{color:#fff}
.info-box .eyebrow{color:var(--gold-200)}
.aside-card{background:#fff;border:1px solid var(--navy-100);border-radius:var(--radius-2xl);padding:1.5rem;box-shadow:var(--shadow-card)}
.aside-card dl{margin:0}
.aside-card .row{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;font-size:.9rem}
.aside-card .row:last-child{border-bottom:0}
.aside-card dt{color:rgba(24,35,51,.6)}
.aside-card dd{margin:0;font-weight:600;color:var(--navy);text-align:right}

/* ---------- YouTube ---------- */
.video-lead{max-width:56rem;margin:0 auto}
.video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius-2xl);overflow:hidden;
  background:var(--navy-800);box-shadow:var(--shadow-card);cursor:pointer}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:rgba(255,255,255,.85);gap:.75rem;background:linear-gradient(180deg,rgba(10,18,32,.15),rgba(10,18,32,.45))}
.video-play{width:4rem;height:4rem;border-radius:999px;background:var(--gold);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease);box-shadow:var(--shadow-gold)}
.video-embed:hover .video-play,.video-embed:focus-visible .video-play{transform:scale(1.08)}
.video-card .video-embed{border-radius:0;box-shadow:none}
.video-card .video-play{width:3rem;height:3rem}

/* ---------- Partners ---------- */
/* Partner logo carousel (continuous, pauses on hover) */
.logos-marquee{overflow:hidden;position:relative;padding-block:.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent)}
.logos-track{display:inline-flex;align-items:center;gap:1rem;animation:eacb-logos 45s linear infinite;will-change:transform}
.logos-marquee:hover .logos-track,.logos-marquee:focus-within .logos-track{animation-play-state:paused}
.logo-item{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:4.25rem;
  min-width:10.5rem;padding:0 1.25rem;border-radius:var(--radius)}
.logo-item img{max-height:2.75rem;max-width:8.5rem;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
.logo-item:hover img{filter:none;opacity:1}
.logo-item .logo-text{font-family:var(--font-display);font-weight:700;color:var(--navy-400);
  font-size:1.05rem;white-space:nowrap;transition:color .25s}
.logo-item:hover .logo-text{color:var(--navy)}
@keyframes eacb-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logos-track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
@media(max-width:1023px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-item{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--navy-50)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery-item:hover img{transform:scale(1.05)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--navy-800),var(--navy),var(--navy-500));color:#fff;
  border-radius:var(--radius-3xl);padding:2.5rem 2rem;text-align:center;position:relative;overflow:hidden}
@media(max-width:600px){.cta-band{padding:1.75rem 1.25rem}}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3vw,2.25rem)}
.cta-band p{color:rgba(255,255,255,.8);max-width:40rem;margin-inline:auto}
.cta-band .hero-cta{justify-content:center;margin-top:1.5rem}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field label{font-size:.85rem;font-weight:600;color:var(--navy)}
.field input,.field textarea,.field select{width:100%;padding:.7rem .9rem;border:1px solid var(--navy-100);
  border-radius:.75rem;font:inherit;color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);border-color:transparent}

/* ---------- News list ---------- */
.post-list{display:grid;gap:1.5rem}
.post-row{display:grid;grid-template-columns:14rem 1fr;gap:1.5rem;align-items:start}
.post-row .card-media{border-radius:var(--radius);aspect-ratio:16/10}
@media(max-width:640px){.post-row{grid-template-columns:1fr}}
.post-date{font-size:.78rem;color:var(--gold-600);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.5rem}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;
  padding:0 .5rem;border-radius:.6rem;border:1px solid var(--navy-100);color:var(--navy);font-weight:600}
.pagination .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagination a.page-numbers:hover{background:var(--navy-50)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.7);margin-top:0}
.footer-top{padding-block:3.5rem 2.5rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:2rem}
@media(max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .brand-name{display:flex;color:#fff}
.footer-logo{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.footer-logo img{height:44px;width:auto;background:#fff;border-radius:.5rem;padding:4px}
.footer-logo .footer-logo-name{display:flex;flex-direction:column;font-family:var(--font-display);
  font-weight:700;color:#fff;line-height:1.15}
.footer-logo .footer-logo-name span{font-size:.95rem}
.footer-about{font-size:.88rem;margin:.75rem 0 1rem;max-width:26rem}
.footer-col h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer-col a{color:rgba(255,255,255,.7);font-size:.9rem}
.footer-col a:hover{color:var(--gold-200)}
.footer-contact{font-size:.88rem;display:grid;gap:.6rem}
.footer-contact span{display:flex;gap:.5rem;align-items:flex-start}
.footer-contact svg{width:1rem;height:1rem;margin-top:.2rem;color:var(--gold-200);flex:0 0 auto}
.footer-social{display:flex;gap:.6rem;margin-top:1rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.15);color:#fff;background:rgba(255,255,255,.04)}
.footer-social a:hover{background:var(--gold);color:var(--navy-800);border-color:var(--gold)}
.footer-social svg{width:1.05rem;height:1.05rem}
.footer-bottom{padding-block:1.25rem;font-size:.82rem}
.footer-bottom .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:1rem}
.footer-legal a{color:rgba(255,255,255,.65)}

/* ---------- 404 ---------- */
.err-wrap{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:4rem}
.err-code{font-family:var(--font-display);font-weight:800;font-size:5rem;color:var(--gold);line-height:1}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}
.flow>*+*{margin-top:1rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--navy-50);color:var(--navy);
  font-size:.75rem;font-weight:600;padding:.3rem .7rem;border-radius:999px}
.muted{color:rgba(24,35,51,.6)}
.divider{height:0;margin:1.5rem 0}

/* ---------- Reveal animation ---------- */
/* Progressive enhancement: only hide reveal elements when JS is available,
   so content is always visible if JS is disabled, slow, or fails. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-track{transition:none}
}

/* ==========================================================================
   v5 additions: service cards, academics cards, Get Started, forms, alumni,
   language switcher, search, advanced contact.
   ========================================================================== */

/* ---- Service / quick action cards (compact) ---- */
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.service-grid-4{grid-template-columns:repeat(4,1fr)}
.service-card{display:flex;align-items:center;gap:.7rem;padding:.85rem .9rem;border-radius:var(--radius);min-width:0;
  background:#fff;border:1px solid var(--navy-100);box-shadow:var(--shadow-card);min-height:4.5rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.service-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--navy-200)}
.service-ic{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:.6rem;background:var(--navy-50);color:var(--navy);
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.service-ic svg{width:1.2rem;height:1.2rem}
.service-card:hover .service-ic{background:var(--navy);color:var(--gold)}
.service-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.service-text strong{font-family:var(--font-display);font-size:.9rem;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-text span{font-size:.76rem;color:rgba(24,35,51,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-arrow{flex:0 0 auto;color:var(--navy-300);transition:transform .2s,color .2s}
.service-arrow svg{width:1rem;height:1rem}
.service-card:hover .service-arrow{color:var(--gold-600);transform:translateX(2px)}
@media(max-width:1100px){.service-grid,.service-grid-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.service-grid,.service-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.service-grid,.service-grid-4{grid-template-columns:1fr}}

/* ---- Card facts (programme / short course) ---- */
.card-facts{list-style:none;margin:.1rem 0 .35rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.card-facts li{font-size:.8rem;color:var(--navy);font-weight:600;display:flex;flex-direction:column;line-height:1.2}
.card-facts li span{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(24,35,51,.45);font-weight:700}

/* ---- Academic area cards ---- */
.area-card{display:flex;gap:1.1rem;align-items:flex-start;background:#fff;border:1px solid var(--navy-100);
  border-radius:var(--radius-2xl);padding:1.4rem;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}
.area-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.area-card-ic{flex:0 0 auto;width:3rem;height:3rem;border-radius:.8rem;background:var(--navy);color:var(--gold);
  display:flex;align-items:center;justify-content:center}
.area-card-ic svg{width:1.5rem;height:1.5rem}
.area-card-body h3{margin:0 0 .35rem;font-size:1.1rem}
.area-card-body p{font-size:.9rem;color:rgba(24,35,51,.65);margin:0 0 .85rem}

/* ---- Get Started ---- */
.get-started{display:grid;grid-template-columns:1fr 18.5rem;gap:0;align-items:stretch;background:#fff;
  border:1px solid var(--navy-100);border-radius:var(--radius-3xl);box-shadow:var(--shadow-card);overflow:hidden}
.get-started-main{padding:2rem 2.25rem}
.get-started-main h2{margin:.15rem 0 .35rem}
.get-started-main>p{color:rgba(24,35,51,.65);margin-bottom:1.25rem;max-width:44rem}
.get-started-profile{background:linear-gradient(160deg,var(--navy),var(--navy-800));color:#fff;padding:2rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.gs-profile-photo{width:6.5rem;height:6.5rem;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;border:2px solid rgba(201,160,44,.5)}
.gs-profile-photo img{width:100%;height:100%;object-fit:cover}
.gs-profile-ic{color:var(--gold)}.gs-profile-ic svg{width:2.5rem;height:2.5rem}
.gs-profile-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin:0}
.gs-profile-role{color:var(--gold-200);font-size:.85rem;margin:.15rem 0 1rem}
.gs-profile-contact{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem}
.gs-profile-contact a{color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:.4rem;justify-content:center}
.gs-profile-contact a:hover{color:#fff}
.gs-profile-contact svg{width:.9rem;height:.9rem;color:var(--gold-200)}
@media(max-width:860px){.get-started{grid-template-columns:1fr}}

/* ---- Forms ---- */
.gs-row{display:grid;gap:.75rem;margin-bottom:.75rem}
.gs-row-4{grid-template-columns:repeat(4,1fr)}
.gs-row-3{grid-template-columns:1fr 1fr auto}
.gs-row-2{grid-template-columns:1fr 1fr}
.gs-form .field,.contact-form .field{margin-bottom:0}
/* Proper vertical rhythm so the submit button never touches the textarea (all breakpoints) */
.contact-form,.gs-form{display:flex;flex-direction:column;gap:1.05rem}
.gs-form .gs-row{margin-bottom:0}
.contact-form>.btn,.gs-form>.btn{align-self:flex-start;margin-top:.15rem}
.field textarea{resize:vertical;min-height:120px}
.field-submit{display:flex;align-items:flex-end}
.field-submit .btn{height:2.9rem;white-space:nowrap}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-confirm{display:flex;gap:.9rem;align-items:flex-start;background:var(--navy-50);border-radius:var(--radius);padding:1.1rem 1.25rem}
.form-confirm-ic{flex:0 0 auto;width:2.25rem;height:2.25rem;border-radius:999px;background:#1c8a4a;color:#fff;display:flex;align-items:center;justify-content:center}
.form-confirm-ic svg{width:1.2rem;height:1.2rem}
.form-confirm strong{color:var(--navy);font-family:var(--font-display)}
.form-confirm p{margin:.2rem 0 0;color:rgba(24,35,51,.65);font-size:.9rem}
.form-error{background:#fbeaea;color:#8a1c1c;border-radius:.6rem;padding:.6rem .9rem;font-size:.88rem;margin-bottom:.9rem}
@media(max-width:860px){.gs-row-4{grid-template-columns:1fr 1fr}.gs-row-3{grid-template-columns:1fr}}
@media(max-width:560px){.gs-row-4,.gs-row-2{grid-template-columns:1fr}}

/* ---- Alumni ---- */
.alumni-card{padding:1.2rem}
.alumni-top{display:flex;gap:.9rem;align-items:center}
.alumni-photo{flex:0 0 auto;width:3.5rem;height:3.5rem;border-radius:999px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--navy),var(--navy-800));display:flex;align-items:center;justify-content:center}
.alumni-photo img{width:100%;height:100%;object-fit:cover}
.alumni-initials{color:var(--gold);font-family:var(--font-display);font-weight:800;font-size:1.1rem}
.alumni-card h3{margin:0;font-size:1rem}
.alumni-card h3 a{color:var(--navy)}
.alumni-meta{font-size:.8rem;color:rgba(24,35,51,.6);margin:.1rem 0 0}
.alumni-role{font-size:.82rem;color:var(--gold-600);font-weight:600;margin:.1rem 0 0}
.alumni-quote{display:flex;gap:.5rem;margin:.9rem 0 0;font-size:.9rem;color:rgba(24,35,51,.75);font-style:italic}
.alumni-quote-ic{flex:0 0 auto;color:var(--gold);width:1.1rem;height:1.1rem;margin-top:.15rem}
.pull-quote{border-left:3px solid var(--gold);padding-left:1rem;font-size:1.15rem;color:var(--navy);font-style:italic;margin:0 0 1.25rem}

/* ---- Language switcher ---- */
.lang-switch{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:700}
.lang-switch .lang-opt{display:inline-flex;align-items:center;gap:.28rem;color:rgba(255,255,255,.62);padding:.15rem .3rem;border-radius:6px;line-height:1}
.lang-switch .lang-opt .lang-flag{width:18px;height:12px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lang-switch .lang-opt.is-active{color:#fff}
.lang-switch .lang-opt.is-active .lang-flag{box-shadow:0 0 0 1.5px var(--gold)}
.lang-switch .lang-opt:hover{color:var(--gold-200)}
.lang-switch .lang-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang-switch .lang-sep{color:rgba(255,255,255,.3)}
.lang-switch-mobile{justify-content:center;font-size:.95rem;gap:.6rem;margin-top:.25rem}
.lang-switch-mobile .lang-opt{color:var(--navy)}
.lang-switch-mobile .lang-opt.is-active{color:var(--gold-600)}
.lang-switch-mobile .lang-opt .lang-flag{width:22px;height:15px;box-shadow:0 0 0 1px var(--navy-100)}
.lang-switch-mobile .lang-sep{color:var(--navy-200)}
@media(max-width:420px){.lang-switch .lang-opt span{display:none}}

/* Stronger header search button */
.search-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent;transition:background .15s,border-color .15s}
.search-toggle:hover,.search-toggle[aria-expanded="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy-800)}
.search-toggle svg{width:1.05rem;height:1.05rem}

/* Key Links */
.key-links{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1023px){.key-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.key-links{grid-template-columns:1fr}}
.key-link{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--navy-100);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:1.25rem 1.3rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease);min-width:0}
.key-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.key-link-ic{width:2.7rem;height:2.7rem;border-radius:12px;background:rgba(23,42,70,.06);color:var(--navy);display:grid;place-items:center}
.key-link-ic svg{width:1.4rem;height:1.4rem}
.key-link:hover .key-link-ic{background:var(--gold);color:var(--navy-800)}
.key-link-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.key-link-body strong{color:var(--navy);font-size:1rem}
.key-link-body span{color:rgba(24,35,51,.6);font-size:.86rem}
.key-link-go{display:inline-flex;align-items:center;gap:.3rem;color:var(--gold-600);font-weight:600;font-size:.82rem;margin-top:auto}
.key-link-go svg{width:1rem;height:1rem}

/* News + Events view-all row */
.news-events-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* ---- Search toggle + panel ---- */
.search-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.85rem;height:1.85rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:transparent;color:rgba(255,255,255,.8);cursor:pointer;padding:0}
.search-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
.search-toggle svg{width:.95rem;height:.95rem}
.search-panel{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--navy);box-shadow:0 10px 30px rgba(10,18,32,.4);
  transform:translateY(-100%);transition:transform .22s var(--ease)}
.search-panel.open{transform:none}
.search-panel .container{display:flex;align-items:center;gap:1rem;padding-block:1.1rem}
.search-panel .eacb-search{flex:1 1 auto}
.search-panel .field{margin:0}
.search-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer}
.search-close svg{width:1.1rem;height:1.1rem}
.search-panel input[type=search]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.search-panel input[type=search]::placeholder{color:rgba(255,255,255,.6)}
.mobile-search{margin-bottom:.25rem}

/* ---- Search results ---- */
.search-results{display:grid;gap:1rem}
.search-result{display:grid;grid-template-columns:12rem 1fr;gap:0;background:#fff;border:1px solid var(--navy-100);
  border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .2s}
.search-result:hover{box-shadow:var(--shadow-card-hover)}
.search-result-media{position:relative;min-height:8rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--navy-500))}
.search-result-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.search-result-media .ph{color:var(--gold);width:1.75rem;height:1.75rem}
.search-result-body{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.search-result-body h2{font-size:1.1rem;margin:.1rem 0}
@media(max-width:640px){.search-result{grid-template-columns:1fr}.search-result-media{min-height:9rem}}

/* ---- Contact page ---- */
.contact-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.contact-card{background:#fff;border:1px solid var(--navy-100);border-radius:var(--radius-2xl);padding:1.25rem;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}
.contact-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.contact-card-ic{display:inline-flex;width:2.5rem;height:2.5rem;border-radius:.7rem;background:var(--navy-50);color:var(--navy);align-items:center;justify-content:center;margin-bottom:.6rem}
.contact-card-ic svg{width:1.2rem;height:1.2rem}
.contact-card h3{font-size:1rem;margin:0 0 .25rem}
.contact-card p{font-size:.85rem;color:rgba(24,35,51,.6);margin:0 0 .7rem}
.contact-card-links{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem}
.contact-card-links a{display:inline-flex;align-items:center;gap:.4rem;color:var(--navy);word-break:break-word}
.contact-card-links svg{width:.85rem;height:.85rem;color:var(--gold-600);flex:0 0 auto}
@media(max-width:1100px){.contact-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.contact-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.contact-cards{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-form-wrap h2{margin-top:0}
.contact-map{margin-top:1rem;border-radius:var(--radius-2xl);overflow:hidden;aspect-ratio:4/3;background:var(--navy-50);border:1px solid var(--navy-100)}
.contact-map iframe{width:100%;height:100%;border:0;display:block}
.contact-map-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:1.5rem;color:var(--navy)}

/* ==========================================================================
   v6 additions: YouTube carousel, Short Course application form,
   error states, card icon micro-animation.
   ========================================================================== */

/* ---- YouTube 4-up carousel ---- */
.yt-carousel{position:relative}
.yt-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding-bottom:.5rem;scrollbar-width:thin}
.yt-track::-webkit-scrollbar{height:6px}
.yt-track::-webkit-scrollbar-thumb{background:var(--navy-100);border-radius:999px}
.yt-track:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--radius)}
.yt-card{flex:0 0 calc((100% - 3rem) / 4);min-width:0;scroll-snap-align:start}
@media(max-width:1023px){.yt-card{flex-basis:calc((100% - 1rem) / 2)}}
@media(max-width:640px){.yt-card{flex-basis:88%}}
.yt-card .video-embed{border-radius:var(--radius-2xl)}
.yt-card .video-play{width:3rem;height:3rem}
.yt-title{font-size:.92rem;margin:.6rem 0 0;line-height:1.3;color:var(--navy)}
.yt-nav{position:absolute;top:calc(50% - 1.6rem);transform:translateY(-50%);z-index:3;display:inline-flex;
  align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid var(--navy-100);
  background:#fff;color:var(--navy);box-shadow:var(--shadow-card);cursor:pointer}
.yt-nav:hover{background:var(--navy);color:#fff}
.yt-nav svg{width:1.1rem;height:1.1rem}
.yt-prev{left:-.75rem}.yt-next{right:-.75rem}
@media(max-width:640px){.yt-nav{display:none}}

/* ---- Short Course application form ---- */
.sc-block{border:1px solid var(--navy-100);border-radius:var(--radius-2xl);padding:1.5rem;margin:0 0 1.25rem;background:#fff}
.sc-block legend{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.05rem;padding:0 .5rem}
.sc-courses{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(max-width:640px){.sc-courses{grid-template-columns:1fr}}
.sc-course{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--navy-100);border-radius:var(--radius);
  padding:.7rem .8rem;cursor:pointer;transition:border-color .2s,background .2s}
.sc-course:hover{border-color:var(--navy-300);background:var(--navy-50)}
.sc-course input{margin-top:.2rem}
.sc-course span{display:flex;flex-direction:column;line-height:1.3}
.sc-course strong{color:var(--navy);font-size:.92rem}
.sc-course em{font-style:normal;font-size:.78rem;color:rgba(24,35,51,.55)}
.edu-rows{display:grid;gap:.6rem}
.edu-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
@media(max-width:860px){.edu-row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.edu-row{grid-template-columns:1fr}}
.edu-row input{width:100%;padding:.55rem .7rem;border:1px solid var(--navy-100);border-radius:.6rem;font:inherit}
.sc-declaration{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:rgba(24,35,51,.8)}
.sc-declaration input{margin-top:.25rem}
.field.has-error input,.field.has-error select,.field.has-error textarea,
.sc-courses.has-error,.sc-declaration.has-error{outline:2px solid #d64545;outline-offset:1px;border-radius:.6rem}

/* ---- Service card icon micro-animation ---- */
.service-card .service-ic svg{transition:transform .25s var(--ease)}
.service-card:hover .service-ic svg{transform:scale(1.1)}

/* ============================================================ v7 components == */
.container-narrow{max-width:860px;margin-inline:auto}
.eacb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Header: Pay Fees quick link */
.topbar-pay{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold);font-weight:600}
.topbar-pay svg{width:1rem;height:1rem}
.topbar-pay:hover{color:#fff}

/* Fee structure */
.fee-toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.fee-toolbar .fee-year{margin:0;color:var(--navy)}
.fee-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.fee-card{background:#fff;border:1px solid var(--navy-100);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:1.5rem 1.6rem;margin-bottom:1.5rem}
.fee-card h2,.fee-card h3{margin:0 0 1rem;color:var(--navy)}
.fee-table-wrap{overflow-x:auto}
.fee-table{width:100%;border-collapse:collapse;font-size:.95rem}
.fee-table th,.fee-table td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--navy-100)}
.fee-table thead th{background:var(--navy);color:#fff;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.fee-table thead th:first-child{border-top-left-radius:10px}
.fee-table thead th:last-child{border-top-right-radius:10px}
.fee-table .fee-total{font-weight:700;color:var(--navy)}
.fee-table tbody tr:nth-child(even){background:rgba(23,42,70,.03)}
.fee-lines{list-style:none;margin:0;padding:0}
.fee-lines li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--navy-100)}
.fee-lines li span:last-child{font-weight:600;color:var(--navy);white-space:nowrap}
.fee-lines-total{border-bottom:none!important;margin-top:.3rem;border-top:2px solid var(--navy)!important;padding-top:.7rem!important}
.fee-lines-total span{font-weight:800!important;color:var(--navy)}
.fee-note{background:rgba(201,160,44,.1);border-left:4px solid var(--gold);border-radius:8px;padding:1rem 1.2rem;color:var(--navy);font-size:.92rem;margin:1.5rem 0}
.fee-cta{text-align:center;background:linear-gradient(135deg,var(--navy),var(--navy-500));color:#fff;border-radius:var(--radius-2xl);padding:2.4rem 1.5rem;margin-top:2rem}
.fee-cta h2{color:#fff;margin:0 0 .5rem}
.fee-cta p{color:rgba(255,255,255,.82);margin:0 0 1.3rem}

/* Payment page */
.pay-steps{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 2rem;counter-reset:step}
.pay-steps li{flex:1 1 auto;min-width:120px;display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:rgba(24,35,51,.5)}
.pay-steps li span{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:999px;background:var(--navy-100);color:var(--navy);font-size:.8rem;flex:0 0 auto}
.pay-steps li.is-active{color:var(--navy)}
.pay-steps li.is-active span{background:var(--gold);color:var(--navy-800)}
.pay-alert{border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1.5rem;border:1px solid transparent}
.pay-alert strong{display:block;margin-bottom:.25rem}
.pay-alert p{margin:0}
.pay-config{background:#fff8e6;border-color:#e7c14b;color:#6b5310}
.pay-error{background:#fdecec;border-color:#e3a0a0;color:#7a1f1f}
.pay-pending{background:#eef3fb;border-color:#b9cbe8;color:#26456f}
.pay-ok{background:#eaf7ee;border-color:#a6d8b6;color:#1e5b32}
.pay-fieldset{border:1px solid var(--navy-100);border-radius:14px;padding:1.3rem 1.4rem;margin:0 0 1.3rem}
.pay-fieldset legend{font-weight:700;color:var(--navy);padding:0 .5rem}
.field{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.field>span{font-weight:600;color:var(--navy)}
.field input,.field select{padding:.6rem .7rem;border:1px solid var(--navy-100);border-radius:8px;font:inherit;background:#fff}
.field input:focus,.field select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.field-hint{font-size:.85rem;color:rgba(24,35,51,.6);margin:.5rem 0 0}
.pay-secure{display:flex;align-items:center;gap:.6rem;background:rgba(23,42,70,.04);border-radius:10px;padding:.8rem 1rem;color:var(--navy);font-size:.88rem;margin:1rem 0}
.pay-secure svg{width:1.4rem;height:1.4rem;color:var(--gold);flex:0 0 auto}
.pay-submit{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.pay-disabled-note{font-size:.85rem;color:#8a6d10}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.pay-history{margin-top:3rem;border-top:1px solid var(--navy-100);padding-top:2rem}
.pay-history-form{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.2rem}
.pay-badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700}
.pay-badge-paid{background:#eaf7ee;color:#1e5b32}
.pay-badge-pending{background:#eef3fb;color:#26456f}
.pay-badge-failed{background:#fdecec;color:#7a1f1f}
.pay-badge-cancelled{background:#f0f0f0;color:#555}

/* Receipt */
.receipt{border:2px solid var(--navy);border-radius:16px;padding:1.8rem;background:#fff}
.receipt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;border-bottom:2px solid var(--navy-100);padding-bottom:1rem;margin-bottom:1.2rem}
.receipt-head strong{display:block;color:var(--navy);font-size:1.05rem}
.receipt-head span{color:rgba(24,35,51,.6);font-size:.85rem}
.receipt-status{background:#1e5b32;color:#fff;font-weight:800;letter-spacing:.08em;padding:.3rem .9rem;border-radius:999px;font-size:.85rem}
.receipt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.5rem;margin:0}
.receipt-grid dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(24,35,51,.5);font-weight:700}
.receipt-grid dd{margin:.1rem 0 0;color:var(--navy);font-weight:600}
.receipt-amount{color:var(--gold-600)!important}
.receipt-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}

/* Almanac timeline */
.almanac{position:relative}
.almanac-month{margin-bottom:1.8rem}
.almanac-month-head h2{color:var(--navy);border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:.25rem;margin:0 0 1rem}
.almanac-empty{font-size:.9rem;font-style:italic}
.almanac-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.almanac-item{display:grid;grid-template-columns:180px 1fr;gap:1rem;background:#fff;border:1px solid var(--navy-100);border-left:4px solid var(--gold);border-radius:12px;padding:1rem 1.2rem;box-shadow:var(--shadow-card)}
.almanac-date{font-weight:700;color:var(--navy)}
.almanac-activity{margin:0;color:var(--navy);font-weight:600}
.almanac-resp{margin:.3rem 0 0;font-size:.85rem;color:rgba(24,35,51,.6)}
.almanac-resp span{font-weight:700;color:var(--navy)}

/* 404 helpful links */
.err-links{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;margin-top:1.5rem}
.err-links a{color:rgba(255,255,255,.85);font-weight:600;text-decoration:underline}
.err-links a:hover{color:var(--gold)}

@media(max-width:640px){
  .receipt-grid{grid-template-columns:1fr}
  .almanac-item{grid-template-columns:1fr;gap:.3rem}
  /* Responsive tables -> stacked cards */
  .fee-table thead{position:absolute;left:-9999px}
  .fee-table,.fee-table tbody,.fee-table tr,.fee-table td{display:block;width:100%}
  .fee-table tr{margin-bottom:1rem;border:1px solid var(--navy-100);border-radius:10px;overflow:hidden}
  .fee-table td{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--navy-100);text-align:right}
  .fee-table td::before{content:attr(data-label);font-weight:700;color:var(--navy);text-align:left}
}

/* Print: receipt only */
@media print{
  .site-header,.topbar,.site-footer,.news-ticker,.page-hero,.receipt-actions,.no-print,.search-panel,.mobile-drawer{display:none!important}
  body{background:#fff}
  .receipt{border-color:#000}
}

/* v7 small-screen guards: prevent long button labels / cards from overflowing */
.grid>*{min-width:0}
.area-card{min-width:0}
.area-card-body{min-width:0}
@media(max-width:520px){
  .btn-lg{padding:.72rem 1.05rem;font-size:.95rem}
  .area-card .btn,.pay-submit .btn,.fee-actions .btn,.hero-cta .btn{white-space:normal;text-align:center}
  .pay-submit{flex-direction:column;align-items:stretch}
  .pay-submit .btn{width:100%}
}

/* Offline bank payment note (shown when Online Payments master switch is OFF) */
.pay-bank{display:flex;gap:1.1rem;align-items:flex-start;background:#fff;border:1px solid var(--navy-100);border-left:4px solid var(--gold);border-radius:14px;padding:1.4rem 1.5rem;box-shadow:var(--shadow-card);margin-bottom:1.3rem}
.pay-bank-ic{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:12px;background:rgba(201,160,44,.12);display:grid;place-items:center;color:var(--gold-600)}
.pay-bank-ic svg{width:1.5rem;height:1.5rem}
.pay-bank-body{min-width:0}
.pay-bank-body h2{margin:0 0 .4rem;color:var(--navy);font-size:1.15rem}
.pay-bank-note{color:var(--navy);line-height:1.75}
.leader-card .leader-view{white-space:nowrap}
.leader-card .card-excerpt{font-size:.82rem;line-height:1.45}

/* ================================================= Official logo animation == */
/* Animates the EXISTING official EACB logo image (no redraw). Plays once on the
   first page load of a session; static thereafter and under reduced-motion.
   Without JS the logo is simply shown static (never blank). */
.eacb-logo-anim{position:relative;display:inline-flex;line-height:0}
.eacb-logo-anim .brand-logo-img{display:block;height:36px;width:auto}
@keyframes eacb-logo-in{
  0%{opacity:0;transform:scale(.82);clip-path:inset(46% 0 46% 0)}
  55%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}
}
@keyframes eacb-logo-sheen{
  0%{background-position:160% 0;opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{background-position:-60% 0;opacity:0}
}
/* Animation only when JS is present (so no-JS shows the static logo). */
.js .eacb-logo-anim .brand-logo-img{animation:eacb-logo-in 1.35s cubic-bezier(.22,.7,.2,1) both}
.js .eacb-logo-anim.has-sheen::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  -webkit-mask:url(../images/eacb-logo.png) center/contain no-repeat;
  mask:url(../images/eacb-logo.png) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%);
  background-size:220% 100%;background-position:160% 0;opacity:0;
  animation:eacb-logo-sheen 1s ease .75s 1 both;
}
/* Already seen this session, or user prefers reduced motion → no animation. */
.eacb-logo-seen .eacb-logo-anim .brand-logo-img{animation:none!important}
.eacb-logo-seen .eacb-logo-anim.has-sheen::after{display:none!important}
@media(prefers-reduced-motion:reduce){
  .eacb-logo-anim .brand-logo-img{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .eacb-logo-anim.has-sheen::after{display:none!important}
}