/*
 * CYEI Gen Z Visual Advancement
 * Version 2.0.0
 * Preserves the original CYEI content, colours, routes and public systems.
 */

:root{
  --v2-green:#0b8f57;
  --v2-green-bright:#12b76a;
  --v2-green-deep:#064d33;
  --v2-blue:#2467d7;
  --v2-blue-bright:#4b86ef;
  --v2-blue-deep:#102f62;
  --v2-yellow:#f4b82d;
  --v2-coral:#ef5148;
  --v2-ink:#0c1f39;
  --v2-ink-soft:#263d5a;
  --v2-paper:#fffdf8;
  --v2-cloud:#f2f7fb;
  --v2-line:rgba(12,31,57,.11);
  --v2-glass:rgba(255,255,255,.78);
  --v2-shadow-soft:0 14px 36px rgba(12,31,57,.10);
  --v2-shadow-card:0 22px 55px rgba(12,31,57,.13),0 5px 0 rgba(12,31,57,.045);
  --v2-shadow-lift:0 34px 80px rgba(12,31,57,.18),0 10px 0 rgba(12,31,57,.05);
  --v2-radius-xl:34px;
  --v2-radius-lg:26px;
  --v2-radius-md:18px;
}

html{scroll-padding-top:150px}
body.cyei-v2{
  background:
    radial-gradient(circle at 7% 8%,rgba(11,143,87,.055),transparent 23rem),
    radial-gradient(circle at 94% 22%,rgba(36,103,215,.055),transparent 26rem),
    var(--v2-paper);
  color:var(--v2-ink);
  overflow-x:hidden;
}
body.cyei-v2::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.34;
  background-image:radial-gradient(rgba(12,31,57,.12) .75px,transparent .75px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 68%);
}
main{position:relative;isolation:isolate}
::selection{background:rgba(244,184,45,.52);color:var(--v2-ink)}

.cyei-scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  z-index:10020;
  pointer-events:none;
}
.cyei-scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg,var(--v2-green),var(--v2-blue),var(--v2-yellow),var(--v2-coral));
  box-shadow:0 0 16px rgba(36,103,215,.45);
}

/* Header and navigation */
.site-header{
  top:0;
  background:rgba(255,253,248,.78);
  backdrop-filter:blur(24px) saturate(1.35);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);
  border-bottom:1px solid rgba(12,31,57,.075);
}
.site-header::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:min(94%,1320px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(11,143,87,.38),rgba(36,103,215,.34),transparent);
}
.site-header.scrolled{
  background:rgba(255,255,255,.91);
  box-shadow:0 15px 42px rgba(12,31,57,.10);
}
.header-inner{height:88px;max-width:1320px}
.brand{position:relative;gap:13px;transition:transform .3s ease}
.brand:hover{transform:translateY(-2px)}
.brand img{
  width:61px;
  height:61px;
  filter:drop-shadow(0 8px 12px rgba(12,31,57,.14));
}
.brand-copy strong{font-size:1.58rem;color:var(--v2-ink);text-shadow:0 1px #fff}
.brand-copy small{color:var(--v2-green);font-size:.72rem;letter-spacing:.11em}
.site-nav{gap:3px}
.site-nav>a:not(.button){
  padding:12px 10px;
  border-radius:14px;
  font-size:.84rem;
  letter-spacing:-.01em;
  transition:color .24s ease,background .24s ease,transform .24s ease,box-shadow .24s ease;
}
.site-nav>a:not(.button)::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:-1;
  border-radius:11px;
  background:linear-gradient(135deg,rgba(11,143,87,.11),rgba(36,103,215,.09));
  transform:scale(.72);
  opacity:0;
  transition:.25s ease;
}
.site-nav>a:not(.button)::after{
  left:15px;
  right:15px;
  bottom:3px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--v2-green),var(--v2-blue));
}
.site-nav>a:not(.button):hover,
.site-nav>a:not(.button).active{transform:translateY(-2px);color:var(--v2-ink)}
.site-nav>a:not(.button):hover::before,
.site-nav>a:not(.button).active::before{opacity:1;transform:scale(1)}
.nav-search{font-size:0!important;width:42px;height:42px;padding:0!important;display:grid;place-items:center}
.nav-search::before{content:"⌕"!important;position:static!important;opacity:1!important;transform:none!important;background:none!important;font-size:1.5rem;color:var(--v2-ink)}
.nav-search::after{display:none}
.nav-support{
  margin-left:8px;
  min-height:47px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,#ff6159,var(--v2-coral) 52%,#d93642);
  box-shadow:0 12px 28px rgba(239,81,72,.25),inset 0 1px rgba(255,255,255,.38),0 4px 0 #b92c34;
  transform:translateY(-2px);
  position:relative;
  overflow:hidden;
}
.nav-support::before{
  content:"";
  position:absolute;
  inset:-60% auto -60% -35%;
  width:35%;
  background:rgba(255,255,255,.35);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
.nav-support:hover::before{left:125%}
.nav-support:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(239,81,72,.31),0 5px 0 #b92c34}

/* Global updates ticker */
.cyei-updates-ticker{
  position:relative;
  z-index:920;
  background:linear-gradient(90deg,#071c33 0%,#0a3153 44%,#073e34 100%);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(7,28,51,.14);
  overflow:hidden;
}
.cyei-updates-ticker::before,
.cyei-updates-ticker::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:86px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,#071c33,transparent);
}
.cyei-updates-ticker::after{left:auto;right:0;background:linear-gradient(270deg,#073e34,transparent)}
.cyei-ticker-shell{
  min-height:76px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  width:min(calc(100% - 36px),1320px);
  margin:auto;
}
.cyei-ticker-heading{
  position:relative;
  z-index:6;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  white-space:nowrap;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.cyei-live-dot{width:9px;height:9px;border-radius:50%;background:#43e58e;box-shadow:0 0 0 5px rgba(67,229,142,.13),0 0 14px #43e58e;animation:cyeiPulse 1.8s ease-in-out infinite}
.cyei-ticker-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent)}
.cyei-ticker-track{display:flex;width:max-content;will-change:transform;animation:cyeiTicker 48s linear infinite}
.cyei-updates-ticker:hover .cyei-ticker-track,
.cyei-updates-ticker:focus-within .cyei-ticker-track{animation-play-state:paused}
.cyei-ticker-set{display:flex;align-items:center;gap:14px;padding-right:14px}
.cyei-ticker-item{
  width:max-content;
  max-width:440px;
  min-height:54px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:7px 12px 7px 7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:17px;
  background:rgba(255,255,255,.075);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.cyei-ticker-item:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.34);transform:translateY(-2px)}
.cyei-ticker-item.is-featured{background:linear-gradient(135deg,rgba(244,184,45,.18),rgba(255,255,255,.08));border-color:rgba(244,184,45,.38)}
.cyei-ticker-thumb{width:48px;height:42px;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.2);background:#fff}
.cyei-ticker-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cyei-ticker-item:hover .cyei-ticker-thumb img{transform:scale(1.1)}
.cyei-ticker-copy{min-width:0;display:grid;gap:1px;line-height:1.2}
.cyei-ticker-label{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:#83efb8;font-weight:900}
.cyei-ticker-item.is-featured .cyei-ticker-label{color:#ffd76e}
.cyei-ticker-copy strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}
.cyei-ticker-arrow{font-size:1.1rem;color:var(--v2-yellow);transition:transform .2s ease}
.cyei-ticker-item:hover .cyei-ticker-arrow{transform:translate(3px,-3px)}
.cyei-ticker-all{position:relative;z-index:6;display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:.76rem;font-weight:900;white-space:nowrap;padding:10px 0}
.cyei-ticker-all span{color:var(--v2-yellow);font-size:1rem;transition:transform .2s}.cyei-ticker-all:hover span{transform:translateX(4px)}

/* Buttons and links */
.button{
  min-height:48px;
  padding:13px 21px;
  border-radius:15px;
  border-color:var(--v2-ink);
  background:linear-gradient(145deg,#173456,var(--v2-ink));
  box-shadow:0 13px 28px rgba(12,31,57,.16),0 5px 0 rgba(12,31,57,.20),inset 0 1px rgba(255,255,255,.18);
  transform:translateY(-1px);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.button::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));
  transition:opacity .3s ease;
}
.button:hover{transform:translateY(-5px);box-shadow:0 20px 38px rgba(12,31,57,.22),0 6px 0 rgba(12,31,57,.18);background:var(--v2-ink);border-color:transparent}
.button:hover::before{opacity:1}
.button:active{transform:translateY(1px);box-shadow:0 7px 16px rgba(12,31,57,.16),0 2px 0 rgba(12,31,57,.18)}
.button-outline{background:rgba(255,255,255,.62);color:var(--v2-ink);border-color:rgba(12,31,57,.55);box-shadow:0 11px 25px rgba(12,31,57,.08),0 4px 0 rgba(12,31,57,.10)}
.button-outline::before{background:linear-gradient(135deg,var(--v2-green),var(--v2-blue))}
.button-light{box-shadow:0 13px 30px rgba(0,0,0,.18),0 5px 0 rgba(255,255,255,.23)}
.button-ghost-light{background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.text-link{position:relative;color:var(--v2-green-deep)}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:linear-gradient(90deg,var(--v2-green),var(--v2-blue));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.text-link:hover::after{transform:scaleX(1)}

/* Typography and section rhythm */
h1,h2,h3,h4{color:var(--v2-ink);text-wrap:balance}
p{color:var(--v2-ink-soft)}
.eyebrow{font-size:.71rem;letter-spacing:.14em}
.eyebrow::before{height:5px;width:34px;box-shadow:0 0 12px rgba(239,81,72,.18)}
.section{padding:clamp(82px,9vw,128px) 0;position:relative;overflow:hidden}
.section::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;border:38px solid rgba(36,103,215,.035);right:-150px;top:8%;pointer-events:none}
.section:nth-of-type(3n)::before{right:auto;left:-155px;border-color:rgba(11,143,87,.04)}
.section-surface{
  background:
    linear-gradient(135deg,rgba(235,244,251,.94),rgba(247,251,253,.96)),
    radial-gradient(circle at 85% 20%,rgba(36,103,215,.08),transparent 25rem);
  border-block:1px solid rgba(12,31,57,.045);
}
.section-surface::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:linear-gradient(rgba(12,31,57,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(12,31,57,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent,black 20%,black 80%,transparent);
}
.section>.container,.section-surface>.container{position:relative;z-index:2}
.section-head{align-items:end;margin-bottom:44px;gap:32px}
.section-head>div:first-child{max-width:820px}
.section-head h2{margin-top:.2em}
.section-head p{max-width:720px;font-size:1.02rem}
.section-head-center{max-width:900px;margin-left:auto;margin-right:auto}

/* Homepage hero */
.hero{
  min-height:clamp(760px,84vh,940px);
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 32%,rgba(36,103,215,.10),transparent 27rem),
    radial-gradient(circle at 20% 70%,rgba(11,143,87,.08),transparent 24rem),
    linear-gradient(115deg,#fffefa 0%,#f8fff9 46%,#f7faff 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.58;
  background-image:radial-gradient(rgba(11,143,87,.18) 1.2px,transparent 1.2px);
  background-size:31px 31px;
  mask-image:linear-gradient(90deg,black,rgba(0,0,0,.72),transparent 82%);
}
.hero::after{
  content:"";
  position:absolute;
  width:640px;
  height:640px;
  border-radius:50%;
  right:-260px;
  bottom:-340px;
  border:84px solid rgba(11,143,87,.055);
  box-shadow:0 0 0 42px rgba(36,103,215,.025);
}
.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr);gap:clamp(58px,8vw,116px);align-items:center;padding-block:70px;position:relative;z-index:2}
.hero-copy{max-width:760px}
.hero-copy h1{font-size:clamp(3.25rem,6.1vw,6.25rem);line-height:.96;letter-spacing:-.052em;margin:.28em 0 .28em;text-shadow:0 2px #fff}
.hero-copy h1 em{display:block;color:var(--v2-green);font-style:normal;position:relative;filter:drop-shadow(0 7px 14px rgba(11,143,87,.13))}
.hero-copy h1 em::after{content:"";position:absolute;left:2px;bottom:-10px;width:48%;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--v2-yellow),transparent);opacity:.82;transform:rotate(-1deg)}
.hero-copy>p{font-size:clamp(1rem,1.45vw,1.18rem);max-width:690px}
.hero-actions{gap:14px;margin-top:28px}
.hero-trust{gap:12px;margin-top:30px}
.hero-trust span{
  padding:7px 11px 7px 31px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(11,143,87,.14);
  box-shadow:0 6px 18px rgba(12,31,57,.055);
  position:relative;
}
.hero-trust span::before{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;display:grid;place-items:center;font-size:.64rem;box-shadow:0 0 0 4px rgba(11,143,87,.08)}
.hero-media{min-height:570px;perspective:1200px;filter:drop-shadow(0 35px 48px rgba(12,31,57,.17))}
.hero-main-image{
  inset:58px 28px 38px 34px;
  border-radius:42px 110px 42px 42px;
  transform:rotateY(-4deg) rotateZ(-1deg);
  box-shadow:0 28px 70px rgba(12,31,57,.25),0 8px 0 rgba(12,31,57,.07);
  border:8px solid rgba(255,255,255,.92);
}
.hero-main-image::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);pointer-events:none}
.hero-main-image img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(1.06) contrast(1.02)}
.hero-media:hover .hero-main-image img{transform:scale(1.045)}
.hero-mini{border-width:7px;box-shadow:0 22px 45px rgba(12,31,57,.24),0 6px 0 rgba(12,31,57,.08);transition:transform .45s ease}
.hero-mini.one{right:-9px;top:10px;transform:rotate(4deg)}
.hero-mini.two{left:-10px;bottom:18px;transform:rotate(-4deg)}
.hero-media:hover .hero-mini.one{transform:translateY(-10px) rotate(2deg)}
.hero-media:hover .hero-mini.two{transform:translateY(7px) rotate(-2deg)}
.hero-badge{width:132px;height:132px;right:4px;bottom:33px;background:linear-gradient(145deg,#ffd04d,var(--v2-yellow));box-shadow:0 18px 38px rgba(244,184,45,.31),0 7px 0 #cb8d0b;animation:cyeiFloat 4.5s ease-in-out infinite}
.path-line{border-width:3px;opacity:.8;animation:cyeiOrbit 12s linear infinite}

/* Homepage promise */
.belong-grid{gap:clamp(55px,8vw,110px);align-items:center}
.belong-photo{border-radius:36px 90px 36px 36px;box-shadow:var(--v2-shadow-lift);transform:rotate(-1.2deg);border:8px solid #fff;position:relative;overflow:visible}
.belong-photo::before{content:"";position:absolute;inset:24px -25px -25px 24px;border:3px solid var(--v2-yellow);border-radius:inherit;z-index:-1}
.belong-photo::after{content:"BELONG";position:absolute;left:-24px;bottom:34px;padding:10px 16px;border-radius:999px;background:var(--v2-green);color:#fff;font-weight:950;font-size:.76rem;letter-spacing:.12em;box-shadow:var(--v2-shadow-soft)}
.belong-photo img{border-radius:inherit;transition:transform .7s ease}
.belong-photo:hover img{transform:scale(1.04)}
.belong-cards{gap:12px;margin-top:28px}
.belong-card{
  min-height:64px;
  display:flex;
  align-items:center;
  padding:14px 17px 14px 48px;
  border-radius:17px;
  background:linear-gradient(145deg,#fff,#f5faf8);
  border:1px solid var(--v2-line);
  box-shadow:0 9px 22px rgba(12,31,57,.07),0 3px 0 rgba(12,31,57,.04);
  position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.belong-card::before{content:"✓";position:absolute;left:16px;width:23px;height:23px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));color:#fff;font-size:.72rem;box-shadow:0 6px 14px rgba(11,143,87,.23)}
.belong-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--v2-shadow-card);border-color:rgba(11,143,87,.25)}

/* Shared 3D cards */
.programme-card,.project-card,.story-card,.resource-card,.team-card,.detail-panel,.sidebar-card,.search-result,.contact-item,.form-card,.video-card,.approach-step{
  --rx:0deg;
  --ry:0deg;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.programme-grid{gap:27px}
.programme-card{
  min-height:330px;
  border-radius:var(--v2-radius-lg);
  border:1px solid rgba(12,31,57,.10);
  background:#fff;
  box-shadow:var(--v2-shadow-card);
  overflow:hidden;
  isolation:isolate;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .3s;
}
.programme-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.36),transparent 34%,transparent 64%,rgba(255,255,255,.14));opacity:.6}
.programme-card::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-92px;bottom:-92px;border:25px solid rgba(255,255,255,.16);z-index:2}
.programme-card:hover{transform:perspective(1100px) translateY(-12px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--v2-shadow-lift);border-color:rgba(36,103,215,.24)}
.programme-card>img{width:45%;height:100%;object-fit:cover;transition:transform .65s ease,filter .4s;filter:saturate(1.02)}
.programme-card:hover>img{transform:scale(1.06);filter:saturate(1.12)}
.programme-card-content{padding:34px;position:relative;z-index:3}
.programme-card-number{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));color:#fff;font-weight:950;box-shadow:0 13px 25px rgba(36,103,215,.22),0 4px 0 rgba(12,31,57,.12)}
.programme-card h3{font-size:clamp(1.45rem,2.3vw,2rem);margin-top:18px}

.project-grid{gap:27px}
.project-card{
  border-radius:var(--v2-radius-lg);
  border:1px solid rgba(12,31,57,.10);
  box-shadow:var(--v2-shadow-card);
  overflow:hidden;
  background:linear-gradient(150deg,#fff,#fbfdfd);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .3s;
  position:relative;
}
.project-card::after{content:"";position:absolute;inset:auto 18px 0 18px;height:5px;border-radius:9px 9px 0 0;background:linear-gradient(90deg,var(--v2-green),var(--v2-blue),var(--v2-yellow));opacity:.75;transform:scaleX(.35);transition:transform .35s ease}
.project-card:hover{transform:perspective(1100px) translateY(-12px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--v2-shadow-lift);border-color:rgba(11,143,87,.24)}
.project-card:hover::after{transform:scaleX(1)}
.project-card-image{height:265px;position:relative;overflow:hidden}
.project-card-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,31,57,.3),transparent 58%);opacity:.55;transition:opacity .3s}
.project-card-image img{transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .4s}
.project-card:hover .project-card-image img{transform:scale(1.08);filter:saturate(1.12)}
.project-card-body{padding:28px 27px 31px}
.status{z-index:2;box-shadow:0 8px 22px rgba(12,31,57,.18);backdrop-filter:blur(8px)}
.meta-line{font-size:.72rem;letter-spacing:.04em}

.story-card{
  border-radius:var(--v2-radius-lg);
  border:1px solid rgba(12,31,57,.10);
  box-shadow:var(--v2-shadow-card);
  overflow:hidden;
  background:#fff;
  transition:transform .36s cubic-bezier(.2,.8,.2,1),box-shadow .36s ease;
}
.story-card:hover{transform:perspective(1100px) translateY(-10px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--v2-shadow-lift)}
.story-image{position:relative;overflow:hidden}
.story-image::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 48%,rgba(36,103,215,.18));opacity:0;transition:opacity .35s}
.story-card:hover .story-image::after{opacity:1}
.story-image img{transition:transform .7s ease,filter .4s}
.story-card:hover .story-image img{transform:scale(1.07);filter:saturate(1.12)}
.story-body{padding:26px}
.story-card-large .story-body{padding:32px}
.story-stack{gap:18px}

.resource-card{
  border-radius:var(--v2-radius-lg);
  border:1px solid rgba(12,31,57,.10);
  box-shadow:var(--v2-shadow-card);
  background:linear-gradient(145deg,#fff,#f7fbff);
  transition:transform .36s ease,box-shadow .36s ease;
  overflow:hidden;
}
.resource-card:hover{transform:perspective(1100px) translateY(-10px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--v2-shadow-lift)}
.resource-cover{padding:18px;background:linear-gradient(145deg,#eaf3ff,#f7fafc)}
.resource-cover img{border-radius:15px;box-shadow:0 18px 36px rgba(12,31,57,.17);transition:transform .45s ease}
.resource-card:hover .resource-cover img{transform:translateY(-6px) rotate(-1deg) scale(1.02)}
.resource-body{padding:28px}
.resource-category{background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));color:#fff;box-shadow:0 7px 18px rgba(36,103,215,.18)}

.detail-panel{
  border-radius:var(--v2-radius-lg);
  border:1px solid rgba(12,31,57,.105);
  box-shadow:0 13px 34px rgba(12,31,57,.075),0 4px 0 rgba(12,31,57,.035);
  position:relative;
  overflow:hidden;
  transition:transform .32s ease,box-shadow .32s ease,border-color .3s;
}
.detail-panel::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-58px;bottom:-58px;border:17px solid rgba(36,103,215,.055);pointer-events:none}
.detail-panel:hover{transform:perspective(1100px) translateY(-7px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--v2-shadow-card);border-color:rgba(36,103,215,.2)}
.detail-panel.tint-green{background:linear-gradient(145deg,#effcf5,#e1f7ec)}
.detail-panel.tint-yellow{background:linear-gradient(145deg,#fffaf0,#fff1bd)}
.detail-panel.tint-blue{background:linear-gradient(145deg,#f4f8ff,#e4efff)}

/* Page heroes */
.page-hero{
  min-height:560px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 79% 35%,rgba(36,103,215,.14),transparent 24rem),
    radial-gradient(circle at 13% 90%,rgba(11,143,87,.09),transparent 22rem),
    linear-gradient(125deg,#fffdf8,#f3faf7 50%,#eef5ff);
  border-bottom:1px solid rgba(12,31,57,.06);
}
.page-hero::before{content:"";position:absolute;inset:0;opacity:.42;background-image:radial-gradient(rgba(11,143,87,.17) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(90deg,black,transparent 76%)}
.page-hero::after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-220px;border-radius:50%;border:62px solid rgba(36,103,215,.05);box-shadow:0 0 0 30px rgba(244,184,45,.025)}
.page-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);gap:70px;align-items:center;padding-block:72px;position:relative;z-index:2}
.page-hero-copy h1{font-size:clamp(3rem,5.6vw,5.45rem);letter-spacing:-.05em;max-width:820px;margin-top:.25em}
.page-hero-copy p{font-size:1.08rem;max-width:740px}
.page-hero-media{position:relative;perspective:1100px;padding:28px}
.page-hero-media::before{content:"";position:absolute;inset:54px -4px -3px 56px;border-radius:35px 95px 35px 35px;background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));opacity:.16;transform:rotate(3deg)}
.page-hero-media img{
  position:relative;
  z-index:2;
  width:100%;
  height:390px;
  object-fit:cover;
  border-radius:36px 100px 36px 36px;
  border:8px solid rgba(255,255,255,.92);
  box-shadow:0 30px 65px rgba(12,31,57,.22),0 8px 0 rgba(12,31,57,.06);
  transform:rotateY(-4deg) rotateZ(1deg);
  transition:transform .6s ease,filter .4s;
  filter:saturate(1.05);
}
.page-hero-media:hover img{transform:rotateY(0) rotateZ(0) translateY(-7px) scale(1.015);filter:saturate(1.14)}
.media-accent{z-index:3;width:96px;height:96px;background:linear-gradient(145deg,var(--v2-yellow),#ffd75f);box-shadow:0 18px 34px rgba(244,184,45,.25),0 6px 0 #c88e12;animation:cyeiFloat 4s ease-in-out infinite}

/* Detail-page hero */
.detail-hero{min-height:clamp(650px,82vh,840px);isolation:isolate}
.detail-hero::after{content:"";position:absolute;inset:auto 0 0;height:38%;z-index:1;background:linear-gradient(0deg,rgba(5,19,37,.95),transparent);pointer-events:none}
.detail-hero-media img{filter:saturate(1.05);transform:scale(1.01);transition:transform 1.2s ease,filter .5s}
.detail-hero:hover .detail-hero-media img{transform:scale(1.045);filter:saturate(1.13)}
.detail-hero-media::after{background:linear-gradient(90deg,rgba(7,26,49,.96) 0%,rgba(7,26,49,.68) 48%,rgba(7,26,49,.18) 100%),linear-gradient(0deg,rgba(7,26,49,.94),transparent 58%)}
.detail-hero-copy{z-index:3;padding-bottom:86px}
.detail-hero h1{letter-spacing:-.045em;text-shadow:0 8px 28px rgba(0,0,0,.36)}
.detail-hero p{font-size:1.12rem}
.detail-tags{gap:10px}
.detail-tag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);backdrop-filter:blur(12px);box-shadow:0 9px 22px rgba(0,0,0,.12)}
.detail-section{padding:clamp(78px,8vw,116px) 0;position:relative}
.detail-section:nth-child(even){background:linear-gradient(135deg,#f5f9fc,#edf5f9)}
.content-grid{gap:clamp(42px,6vw,78px)}
.prose{font-size:1.02rem}
.prose h2{margin-top:1.45em}
.prose ul,.detail-list{padding-left:0;list-style:none}
.prose li,.detail-list li{position:relative;padding:11px 12px 11px 34px;border-bottom:1px solid rgba(12,31,57,.08)}
.prose li::before,.detail-list li::before{content:"";position:absolute;left:6px;top:18px;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));transform:rotate(45deg);box-shadow:0 4px 9px rgba(36,103,215,.18)}
.sidebar-card{border-radius:22px;box-shadow:var(--v2-shadow-card);border-color:rgba(12,31,57,.09);background:linear-gradient(145deg,#fff,#f8fbfd)}
.sidebar-card:first-child{border-top:5px solid var(--v2-green)}
.sticky{top:182px}

/* Gallery and media */
.gallery-grid{gap:18px}
.gallery-grid a{border-radius:22px;border:6px solid #fff;box-shadow:var(--v2-shadow-card);position:relative;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.gallery-grid a::after{content:"↗";position:absolute;right:13px;bottom:13px;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:rgba(12,31,57,.82);color:#fff;backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:.3s}
.gallery-grid a:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:var(--v2-shadow-lift)}
.gallery-grid a:hover::after{opacity:1;transform:none}
.gallery-grid img{transition:transform .7s ease,filter .4s}
.gallery-grid a:hover img{transform:scale(1.09);filter:saturate(1.12)}
.video-grid{gap:28px}
.video-card{border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-card);border-color:rgba(12,31,57,.09);transition:transform .35s ease,box-shadow .35s ease}
.video-card:hover{transform:translateY(-8px);box-shadow:var(--v2-shadow-lift)}
.video-card video{background:linear-gradient(135deg,#071c33,#102f62)}

/* Team, process and data panels */
.team-grid{gap:30px}
.team-card{border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-card);padding:34px 27px;background:linear-gradient(145deg,#fff,#f7fbfa);position:relative;overflow:hidden}
.team-card::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,var(--v2-green),var(--v2-blue),var(--v2-yellow),var(--v2-coral))}
.team-card:hover{transform:perspective(1100px) translateY(-11px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--v2-shadow-lift)}
.team-photo{width:184px;height:184px;padding:9px;box-shadow:0 18px 40px rgba(12,31,57,.18);transition:transform .45s ease}
.team-card:hover .team-photo{transform:translateY(-6px) rotate(2deg)}
.approach-steps{gap:20px}
.approach-step{min-height:220px;border-radius:22px;box-shadow:var(--v2-shadow-card);border-color:rgba(12,31,57,.09);transition:transform .35s ease,box-shadow .35s ease}
.approach-step::after{content:"";position:absolute;left:22px;right:22px;bottom:17px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--v2-green),var(--v2-blue));opacity:.45}
.approach-step:hover{transform:translateY(-9px)!important;box-shadow:var(--v2-shadow-lift)}
.approach-step::before{font-size:2.35rem;text-shadow:0 8px 20px rgba(244,184,45,.2)}

/* Filters, search and forms */
.filter-bar{gap:11px;padding:10px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid var(--v2-line);box-shadow:var(--v2-shadow-soft);width:fit-content;max-width:100%}
.filter-button{border-radius:13px;padding:11px 16px;transition:transform .2s ease,background .2s,color .2s,box-shadow .2s}
.filter-button.active,.filter-button:hover{background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));border-color:transparent;transform:translateY(-2px);box-shadow:0 9px 20px rgba(36,103,215,.18)}
.form-card{border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-card);border-color:rgba(12,31,57,.09);padding:clamp(25px,4vw,42px);background:linear-gradient(145deg,#fff,#fbfdfd)}
.field input,.field textarea,.field select,.search-form input{
  border-radius:14px;
  border:1px solid rgba(12,31,57,.17);
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 2px 4px rgba(12,31,57,.035),0 4px 12px rgba(12,31,57,.035);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus,.search-form input:focus{outline:none;border-color:var(--v2-blue);box-shadow:0 0 0 4px rgba(36,103,215,.12),0 10px 25px rgba(12,31,57,.07);transform:translateY(-1px)}
.contact-grid{gap:clamp(40px,7vw,86px)}
.contact-item{border-radius:18px;box-shadow:0 10px 25px rgba(12,31,57,.07);transition:transform .25s ease,box-shadow .25s ease}
.contact-item:hover{transform:translateX(7px);box-shadow:var(--v2-shadow-card)}
.search-form{max-width:820px;padding:10px;border-radius:20px;background:#fff;border:1px solid var(--v2-line);box-shadow:var(--v2-shadow-card)}
.search-form input{border:0;box-shadow:none}
.search-result{border-radius:20px;box-shadow:var(--v2-shadow-soft);transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.search-result:hover{transform:translateY(-6px);box-shadow:var(--v2-shadow-card);border-color:rgba(36,103,215,.24)}
.empty-state{border-radius:var(--v2-radius-lg);border:2px dashed rgba(36,103,215,.22);background:linear-gradient(145deg,#fff,#f5f9fd);box-shadow:var(--v2-shadow-soft)}
.share-row a,.share-row button{box-shadow:0 7px 18px rgba(12,31,57,.06);transition:.25s}
.share-row a:hover,.share-row button:hover{background:linear-gradient(135deg,var(--v2-green),var(--v2-blue));transform:translateY(-3px);box-shadow:0 11px 25px rgba(36,103,215,.2)}

/* Support pages */
.support-home-section{background:linear-gradient(125deg,#fff8df,#effaf4 48%,#edf5ff);isolation:isolate}
.support-home-media>img{box-shadow:var(--v2-shadow-lift);border:8px solid #fff}
.support-home-stamp{box-shadow:0 20px 45px rgba(12,31,57,.23),0 7px 0 rgba(12,31,57,.12);animation:cyeiFloat 4.5s ease-in-out infinite}
.support-assurance-row span{box-shadow:0 7px 17px rgba(12,31,57,.055)}
.payment-method-card{border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-card);transition:transform .35s ease,box-shadow .35s ease}
.payment-method-card:hover{transform:translateY(-10px);box-shadow:var(--v2-shadow-lift)}
.support-safety-card{border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-lift)}

/* Footer */
.footer-cta{padding:74px 0;background:linear-gradient(120deg,#064d33 0%,#08705a 42%,#123568 100%)}
.footer-cta::before{content:"";position:absolute;inset:0;opacity:.22;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(90deg,black,transparent 75%)}
.footer-cta::after{width:430px;height:430px;border-width:62px;right:-150px;top:-175px;box-shadow:0 0 0 34px rgba(255,255,255,.025)}
.site-footer{background:linear-gradient(135deg,#061426,#091c32 55%,#08253b)}
.footer-grid{padding-top:78px}
.footer-grid>div>a{transition:color .2s ease,transform .2s ease}
.footer-grid>div>a:hover{transform:translateX(5px)}
.social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.social-links a{display:inline-flex!important;margin:0!important;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.social-links a:hover{background:rgba(255,255,255,.13)}
.floating-whatsapp{width:60px;height:60px;background:linear-gradient(145deg,#22c879,#0b9b59);box-shadow:0 17px 35px rgba(11,143,87,.28),0 6px 0 #087a48;transition:transform .25s ease,box-shadow .25s ease}
.floating-whatsapp:hover{transform:translateY(-7px) rotate(4deg);box-shadow:0 23px 42px rgba(11,143,87,.34),0 7px 0 #087a48}

/* Reveal and live effects */
[data-reveal]{transform:translateY(34px) scale(.985);transition:opacity .78s cubic-bezier(.2,.7,.2,1),transform .78s cubic-bezier(.2,.7,.2,1)}
[data-reveal].visible{transform:none}
.cyei-v2 .cyei-reveal-delay-1{transition-delay:.07s}.cyei-v2 .cyei-reveal-delay-2{transition-delay:.14s}.cyei-v2 .cyei-reveal-delay-3{transition-delay:.21s}.cyei-v2 .cyei-reveal-delay-4{transition-delay:.28s}
.cyei-pointer-glow{position:absolute;width:320px;height:320px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(36,103,215,.13),transparent 68%);transform:translate(-50%,-50%);opacity:0;transition:opacity .35s ease}
.hero:hover .cyei-pointer-glow,.page-hero:hover .cyei-pointer-glow{opacity:1}

@keyframes cyeiTicker{to{transform:translateX(-50%)}}
@keyframes cyeiPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.68}}
@keyframes cyeiFloat{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-12px) rotate(-2deg)}}
@keyframes cyeiOrbit{to{transform:rotate(360deg)}}

@media(max-width:1240px){
  .header-inner{height:84px}
  .brand-copy strong{font-size:1.4rem}.brand-copy small{font-size:.66rem}.brand img{width:56px;height:56px}
  .site-nav>a:not(.button){padding-inline:8px;font-size:.79rem}.nav-support{font-size:.78rem;padding-inline:13px}
  .hero-grid{gap:55px}.hero-copy h1{font-size:clamp(3.2rem,5.7vw,5.45rem)}
}

@media(max-width:1080px){
  html{scroll-padding-top:145px}
  .site-nav{inset:84px 18px auto;background:rgba(255,255,255,.96);backdrop-filter:blur(24px);border-radius:24px;padding:20px;box-shadow:0 28px 70px rgba(12,31,57,.22);gap:5px;max-height:calc(100vh - 110px);overflow:auto}
  .site-nav>a:not(.button){padding:13px 15px;font-size:.92rem}.nav-search{width:auto;height:auto;display:block;font-size:.92rem!important}.nav-search::before{display:none}.nav-support{margin-top:8px;transform:none}
  .nav-toggle{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#fff,#f1f6f8);border:1px solid var(--v2-line);box-shadow:0 8px 20px rgba(12,31,57,.08)}
  .cyei-ticker-shell{grid-template-columns:auto minmax(0,1fr);min-height:72px}.cyei-ticker-all{display:none}.cyei-ticker-copy strong{max-width:270px}
  .hero{min-height:auto}.hero-grid{grid-template-columns:1fr;padding-block:80px;gap:58px}.hero-copy{max-width:850px}.hero-media{max-width:780px;width:100%;margin:auto;min-height:590px}
  .page-hero{min-height:auto}.page-hero-grid{grid-template-columns:1fr;gap:40px;padding-block:70px}.page-hero-media{max-width:780px;width:100%;margin:auto}.page-hero-media img{height:420px}
  .programme-card>img{width:40%}
  .sticky{position:static}
}

@media(max-width:760px){
  body.cyei-v2{background:var(--v2-paper)}
  .container{width:min(calc(100% - 28px),var(--container))}
  .header-inner{height:76px}.brand img{width:50px;height:50px}.brand-copy strong{font-size:1.28rem}.brand-copy small{font-size:.59rem;letter-spacing:.08em}.site-nav{inset:76px 12px auto}
  .cyei-ticker-shell{width:100%;display:block;min-height:67px;padding:7px 0}.cyei-ticker-heading{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:7;padding:9px 10px;background:rgba(7,28,51,.94);font-size:.64rem}.cyei-ticker-heading strong{display:none}.cyei-ticker-window{padding-left:52px}.cyei-ticker-track{animation-duration:42s}.cyei-ticker-item{max-width:310px;min-height:51px;border-radius:15px}.cyei-ticker-thumb{width:43px;height:39px}.cyei-ticker-copy strong{max-width:220px;font-size:.76rem}.cyei-ticker-label{font-size:.58rem}
  .section{padding:76px 0}.section-head{display:block;margin-bottom:32px}.section-head .button{margin-top:20px}.section::before{display:none}
  .hero-grid{padding-block:58px}.hero-copy h1{font-size:clamp(2.9rem,13vw,4.45rem);line-height:.98}.hero-copy>p{font-size:1rem}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .button{width:100%}.hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-trust span:last-child{grid-column:1/-1}.hero-media{min-height:430px}.hero-main-image{inset:42px 13px 30px 23px;border-radius:30px 72px 30px 30px;border-width:6px;transform:none}.hero-mini{border-width:5px}.hero-mini.one{width:132px;right:-3px}.hero-mini.two{width:130px;left:-2px}.hero-badge{width:94px;height:94px;font-size:.69rem;right:3px;bottom:25px;box-shadow:0 13px 28px rgba(244,184,45,.28),0 5px 0 #cb8d0b}.path-line{width:150px;height:150px;right:-22px;bottom:8px}
  .belong-grid{gap:52px}.belong-photo{border-radius:27px 65px 27px 27px;border-width:6px}.belong-photo::before{inset:16px -14px -15px 16px}.belong-photo::after{left:8px;bottom:-19px}.belong-cards{grid-template-columns:1fr}.belong-card{min-height:58px}
  .programme-card{display:block;min-height:0}.programme-card>img{width:100%;height:235px}.programme-card-content{padding:27px}.programme-card-number{width:46px;height:46px}
  .project-grid,.resource-grid,.team-grid{grid-template-columns:1fr}.project-card-image{height:245px}
  .story-layout{grid-template-columns:1fr}.story-card-large{display:block}.story-card-large .story-image{height:260px}.story-stack{margin-top:20px}
  .page-hero-grid{padding-block:58px}.page-hero-copy h1{font-size:clamp(2.65rem,12vw,4.25rem)}.page-hero-copy p{font-size:1rem}.page-hero-media{padding:16px}.page-hero-media img{height:300px;border-radius:28px 67px 28px 28px;border-width:6px;transform:none}.page-hero-media::before{inset:37px -1px -2px 35px}.media-accent{width:72px;height:72px}
  .detail-hero{min-height:630px}.detail-hero-copy{padding:120px 0 52px}.detail-hero h1{font-size:clamp(2.55rem,12vw,4.2rem)}.detail-hero p{font-size:1rem}.detail-section{padding:72px 0}
  .detail-two-col,.video-grid{grid-template-columns:1fr}.detail-panel{padding:25px}.gallery-grid{grid-template-columns:1fr 1fr;gap:12px}.gallery-grid a{border-width:4px;border-radius:17px}
  .approach-steps{grid-template-columns:1fr}.approach-step:nth-child(2n){transform:none}
  .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.search-form{display:grid;padding:9px}.search-form .button{width:100%}
  .footer-cta-inner{display:block}.footer-cta-actions{margin-top:26px}.footer-grid{gap:30px}.floating-whatsapp{width:56px;height:56px}
}

@media(max-width:480px){
  .header-inner{gap:10px}.brand{gap:8px}.brand img{width:45px;height:45px}.brand-copy strong{font-size:1.15rem}.brand-copy small{font-size:.52rem}.nav-toggle{width:45px;height:45px;padding:7px}
  .hero-copy h1{font-size:2.86rem}.hero-media{min-height:390px}.hero-main-image{inset:40px 9px 24px 15px}.hero-mini.one{width:112px}.hero-mini.two{width:106px}.hero-badge{width:82px;height:82px;font-size:.61rem}
  .hero-trust{grid-template-columns:1fr}.hero-trust span:last-child{grid-column:auto}
  .cyei-ticker-copy strong{max-width:180px}.cyei-ticker-item{max-width:265px}
  .gallery-grid{grid-template-columns:1fr}.gallery-grid a{aspect-ratio:4/3}
  .page-hero-media img{height:250px}.detail-panel,.form-card{padding:22px}
}

@media(prefers-reduced-motion:reduce){
  .cyei-ticker-track{animation:none;transform:none}.cyei-ticker-window{overflow-x:auto;scrollbar-width:thin;mask-image:none}.cyei-ticker-set[aria-hidden="true"]{display:none}.cyei-live-dot,.hero-badge,.media-accent,.path-line{animation:none!important}.cyei-pointer-glow{display:none}
  .programme-card,.project-card,.story-card,.resource-card,.team-card,.detail-panel,.sidebar-card,.search-result,.contact-item,.form-card,.video-card,.approach-step{transform:none!important}
}

/* Final contrast and mobile-utility corrections */
.detail-hero h1,.detail-hero h2,.detail-hero h3,
.section-dark h1,.section-dark h2,.section-dark h3,
.footer-cta h1,.footer-cta h2,.footer-cta h3,
.support-accountability-strip h1,.support-accountability-strip h2,.support-accountability-strip h3{color:#fff}
.detail-hero p,.section-dark p,.footer-cta p,.support-accountability-strip p{color:#dce8f4}
.site-nav .nav-support{background:linear-gradient(135deg,#ff625a,var(--v2-coral) 54%,#d93642);border-color:transparent;color:#fff;box-shadow:0 12px 28px rgba(239,81,72,.27),0 4px 0 #b92c34}
.site-nav .nav-support::before{display:none}
.site-nav .nav-support:hover{background:linear-gradient(135deg,#ff746d,#e4424d);border-color:transparent;box-shadow:0 18px 36px rgba(239,81,72,.32),0 5px 0 #b92c34}
@media(max-width:760px){
  .cyei-ticker-heading{left:8px;padding:8px 9px;gap:6px;font-size:.58rem;letter-spacing:.065em}
  .cyei-ticker-heading strong{display:block}
  .cyei-ticker-window{padding-left:102px}
  .cyei-live-dot{width:7px;height:7px}
  .floating-support{opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
  .floating-support.is-visible{opacity:1;transform:none;pointer-events:auto}
}

/* ======================================================================
   CYEI Visual Advancement 2.1 — balance, movement and precision upgrade
   ====================================================================== */

:root{
  --v21-shadow:0 18px 46px rgba(12,31,57,.11),0 3px 0 rgba(12,31,57,.035);
  --v21-shadow-hover:0 28px 66px rgba(12,31,57,.17),0 7px 0 rgba(12,31,57,.045);
}

/* More deliberate page rhythm: spacious, never empty. */
.section{padding:clamp(64px,6.2vw,88px) 0}
.detail-section{padding:clamp(62px,6vw,86px) 0}
.section-head{margin-bottom:34px;gap:28px}
.section-head p{font-size:1rem}
.detail-two-col{align-items:start}
.detail-panel{min-height:0;padding:clamp(24px,3vw,31px);box-shadow:var(--v21-shadow)}
.detail-panel h2{font-size:clamp(1.65rem,2.6vw,2.25rem)}
.detail-panel h3{font-size:clamp(1.3rem,2vw,1.65rem)}
.detail-panel:hover{transform:translateY(-6px);box-shadow:var(--v21-shadow-hover)}

/* Header: refined active state without making the menu bulky. */
.header-inner{height:82px}
.site-nav>a:not(.button){padding:11px 10px;border-radius:13px}
.site-nav>a:not(.button).active{background:linear-gradient(135deg,rgba(11,143,87,.09),rgba(36,103,215,.09));box-shadow:inset 0 0 0 1px rgba(12,31,57,.035)}

/* Ticker: no visible scrollbar, no hover-stop, smooth JS motion. */
.cyei-updates-ticker{box-shadow:0 8px 24px rgba(7,28,51,.12)}
.cyei-ticker-shell{min-height:64px;grid-template-columns:auto minmax(0,1fr) auto;gap:14px}
.cyei-ticker-window{overflow:hidden!important;scrollbar-width:none!important;mask-image:linear-gradient(90deg,transparent,black 3.5%,black 96.5%,transparent)}
.cyei-ticker-window::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.cyei-ticker-track{animation:none!important;transform:translate3d(0,0,0);will-change:transform}
.cyei-updates-ticker:hover .cyei-ticker-track,.cyei-updates-ticker:focus-within .cyei-ticker-track{animation-play-state:running}
.cyei-ticker-set{gap:11px;padding-right:11px}
.cyei-ticker-item{min-height:48px;max-width:400px;border-radius:15px;padding:5px 11px 5px 5px;background:rgba(255,255,255,.07)}
.cyei-ticker-thumb{width:45px;height:40px;border-radius:11px}
.cyei-ticker-copy strong{max-width:295px;font-size:.79rem}
.cyei-ticker-actions{position:relative;z-index:6;display:flex;align-items:center;gap:9px}
.cyei-ticker-toggle{width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-weight:900;cursor:pointer;transition:background .2s ease,transform .2s ease}
.cyei-ticker-toggle:hover{background:rgba(255,255,255,.17);transform:scale(1.05)}
.cyei-ticker-toggle:focus-visible{outline:3px solid var(--v2-yellow);outline-offset:3px}
.cyei-ticker-all{padding:8px 0}

/* Homepage hero: impressive but contained within a normal first screen. */
.hero{min-height:auto}
.hero-grid{min-height:680px;padding-block:54px;gap:clamp(48px,6vw,82px)}
.hero-copy h1{font-size:clamp(3.15rem,5.45vw,5.45rem)}
.hero-media{min-height:520px}
.hero-main-image{inset:44px 24px 32px 30px}

/* Main-page heroes: remove oversized blank areas and keep the full message visible. */
.page-hero{min-height:0;display:block}
.page-hero-grid{min-height:440px;padding-block:50px;gap:clamp(42px,5.5vw,70px);grid-template-columns:minmax(0,1.02fr) minmax(360px,.88fr)}
.page-hero-copy h1{font-size:clamp(2.75rem,4.65vw,4.55rem);line-height:1;max-width:780px;margin:.24em 0 .28em}
.page-hero-copy p{font-size:1.02rem;max-width:700px}
.page-hero-media{padding:20px}
.page-hero-media img{height:320px;border-radius:32px 80px 32px 32px;border-width:7px;box-shadow:0 24px 54px rgba(12,31,57,.19),0 6px 0 rgba(12,31,57,.05)}
.page-hero-media::before{inset:43px 0 0 46px;border-radius:30px 78px 30px 30px}
.media-accent{width:78px;height:78px}
.page-hero--text .page-hero-grid{grid-template-columns:minmax(0,850px);min-height:315px;padding-block:56px}
.page-hero--text .page-hero-copy h1{max-width:850px}

/* Detail heroes: cinematic, not oversized. */
.detail-hero{min-height:min(68vh,660px)}
.detail-hero-media{height:min(68vh,660px)}
.detail-hero-copy{padding:58px 0 62px}
.detail-hero h1{font-size:clamp(2.75rem,5vw,4.85rem);max-width:980px}

/* Programme cards: a true split 3D card, never an overlapping photo. */
.programme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.programme-card{
  display:grid!important;
  grid-template-columns:minmax(190px,42%) minmax(0,58%);
  min-height:310px;
  color:var(--v2-ink);
  background:linear-gradient(145deg,#fff,#fbfdfd);
  border:1px solid rgba(12,31,57,.09);
  box-shadow:var(--v21-shadow);
  isolation:isolate;
}
.programme-card::before{z-index:4;opacity:.22;background:linear-gradient(120deg,rgba(255,255,255,.38),transparent 36%,transparent 72%,rgba(36,103,215,.06))}
.programme-card::after{z-index:1;border-color:rgba(36,103,215,.05)}
.programme-card>img{
  position:relative!important;
  inset:auto!important;
  z-index:1;
  width:100%!important;
  height:100%!important;
  min-height:310px;
  object-fit:cover;
  object-position:center;
}
.programme-card-content{
  position:relative!important;
  inset:auto!important;
  z-index:3;
  min-width:0;
  padding:29px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,251,253,.98));
}
.programme-card-number{width:47px;height:47px;border-radius:15px;margin:0}
.programme-card h3{font-size:clamp(1.38rem,2vw,1.75rem);margin:15px 0 10px;line-height:1.08}
.programme-card p{color:var(--v2-ink-soft);font-size:.94rem;line-height:1.55;margin-bottom:18px}
.programme-card .text-link{margin-top:auto;color:var(--v2-green-deep)}
.programme-card:hover{transform:perspective(1100px) translateY(-9px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:var(--v21-shadow-hover)}

/* Project and story cards retain depth with controlled proportions. */
.project-card,.story-card,.resource-card,.team-card{box-shadow:var(--v21-shadow)}
.project-card:hover,.story-card:hover,.resource-card:hover,.team-card:hover{box-shadow:var(--v21-shadow-hover)}
.project-card-image{height:235px}
.project-card-body{padding:25px}
.story-card-large .story-image img{min-height:330px;max-height:410px}

/* Resource cards: compact enough to read in one view. */
.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.resource-card{min-height:300px;grid-template-columns:minmax(190px,40%) minmax(0,60%);align-items:stretch}
.resource-cover{min-height:300px}
.resource-cover img{width:100%;height:100%;max-height:none!important;object-fit:cover;object-position:top}
.resource-body{padding:26px;align-self:center}
.resource-card h3{font-size:clamp(1.35rem,2vw,1.75rem)}
.page-home .resource-grid{grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);grid-template-rows:auto auto}
.page-home .resource-grid>.resource-card{grid-row:1 / span 2;min-height:390px}
.page-home .resource-grid>.resource-card .resource-cover{min-height:390px}
.page-resources .resource-grid{grid-template-columns:minmax(0,850px);justify-content:center}
.page-resources .resource-card{min-height:330px}
.page-resources .resource-cover{min-height:330px}
.page-resources- .resource-grid{grid-template-columns:minmax(0,850px)}
.sidebar-card>img{width:100%;max-height:420px;object-fit:contain;background:#f4f7fa;border-radius:15px}

/* Buttons: strong contrast on every background. */
.button{min-height:46px;padding:12px 19px;border-radius:14px}
.button-light{background:#fff!important;color:var(--v2-ink)!important;border-color:#fff!important;box-shadow:0 13px 30px rgba(0,0,0,.17),0 4px 0 rgba(255,255,255,.23)!important}
.button-light::before{background:linear-gradient(135deg,#fff2bd,#fff)}
.button-light:hover{color:var(--v2-ink)!important;background:#fff!important;border-color:#fff!important}
.button-ghost-light{background:rgba(255,255,255,.06)!important;color:#fff!important;border-color:rgba(255,255,255,.62)!important;box-shadow:none!important}
.button-ghost-light:hover{background:#fff!important;color:var(--v2-ink)!important;border-color:#fff!important}
.footer-cta-actions{align-items:center}

/* A recognisable, premium floating Chat control. */
.floating-whatsapp.floating-chat{
  width:auto;
  height:56px;
  min-width:112px;
  padding:0 18px 0 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  right:20px;
  bottom:20px;
  color:#fff;
  border:2px solid rgba(255,255,255,.92);
  background:linear-gradient(145deg,#27c979,#079552);
  box-shadow:0 17px 36px rgba(8,149,82,.27),0 5px 0 #067c45,0 0 0 7px rgba(39,201,121,.08);
  overflow:visible;
  isolation:isolate;
}
.floating-whatsapp.floating-chat::before,
.floating-whatsapp.floating-chat::after{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border:1px solid rgba(39,201,121,.45);
  border-radius:999px;
  animation:cyeiChatGlow 2.6s ease-out infinite;
}
.floating-whatsapp.floating-chat::after{animation-delay:1.3s}
.floating-chat-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.floating-chat-icon svg{width:21px;height:21px;fill:currentColor}
.floating-chat-label{font-size:.92rem;font-weight:900;letter-spacing:.01em}
.floating-whatsapp.floating-chat:hover{transform:translateY(-6px);box-shadow:0 24px 45px rgba(8,149,82,.34),0 6px 0 #067c45,0 0 0 9px rgba(39,201,121,.1)}
@keyframes cyeiChatGlow{0%{opacity:.65;transform:scale(.96)}75%,100%{opacity:0;transform:scale(1.16)}}

/* Keep the secondary floating support action unobtrusive. */
.floating-support{border-radius:999px;padding:11px 16px;font-size:.76rem;box-shadow:0 12px 28px rgba(12,31,57,.16)}

@media(max-width:1080px){
  .hero-grid{min-height:0;padding-block:64px}
  .page-hero-grid{min-height:0;padding-block:56px;grid-template-columns:1fr;gap:32px}
  .page-hero-media{max-width:690px;margin-inline:auto}
  .page-hero-media img{height:360px}
  .programme-grid{grid-template-columns:1fr}
  .programme-card{grid-template-columns:minmax(230px,38%) minmax(0,62%)}
  .resource-grid{grid-template-columns:1fr}
  .page-home .resource-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .page-home .resource-grid>.resource-card{grid-row:auto;min-height:320px}
  .page-home .resource-grid>.resource-card .resource-cover{min-height:320px}
}

@media(max-width:760px){
  .header-inner{height:74px}
  .section{padding:54px 0}
  .detail-section{padding:54px 0}
  .section-head{margin-bottom:27px}

  .cyei-ticker-shell{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr);min-height:61px;padding:6px 0;gap:8px}
  .cyei-ticker-heading{position:relative;left:auto;top:auto;transform:none;margin-left:8px;padding:8px 9px}
  .cyei-ticker-window{padding-left:0}
  .cyei-ticker-actions{display:none}
  .cyei-ticker-item{max-width:280px;min-height:47px}
  .cyei-ticker-copy strong{max-width:185px}

  .hero-grid{padding-block:50px;gap:36px}
  .hero-copy h1{font-size:clamp(2.65rem,12vw,4rem)}
  .hero-media{min-height:400px}

  .page-hero-grid{padding-block:42px;gap:25px}
  .page-hero--text .page-hero-grid{min-height:0;padding-block:46px}
  .page-hero-copy h1{font-size:clamp(2.45rem,11vw,3.65rem)}
  .page-hero-media{padding:10px}
  .page-hero-media img{height:260px;border-radius:25px 58px 25px 25px;border-width:5px}
  .page-hero-media::before{inset:30px 0 0 30px}
  .media-accent{width:58px;height:58px}

  .detail-hero,.detail-hero-media{min-height:540px;height:540px}
  .detail-hero-copy{padding:110px 0 43px}

  .programme-card{display:block!important;min-height:0}
  .programme-card>img{width:100%!important;height:220px!important;min-height:220px}
  .programme-card-content{padding:24px}
  .programme-card h3{font-size:1.48rem}

  .resource-card{grid-template-columns:36% 64%;min-height:280px}
  .resource-cover{min-height:280px}
  .resource-body{padding:22px}
  .page-resources .resource-grid{grid-template-columns:1fr}

  .detail-panel{padding:23px}
  .floating-whatsapp.floating-chat{height:52px;min-width:101px;right:14px;bottom:14px;padding:0 15px 0 10px}
  .floating-chat-icon{width:29px;height:29px}
  .floating-chat-label{font-size:.86rem}
}

@media(max-width:520px){
  .cyei-ticker-shell{grid-template-columns:90px minmax(0,1fr)}
  .cyei-ticker-heading strong{font-size:.55rem}
  .cyei-ticker-item{max-width:252px}
  .cyei-ticker-copy strong{max-width:158px}
  .resource-card{grid-template-columns:1fr;min-height:0}
  .resource-cover{min-height:0;height:280px}
  .resource-body{align-self:auto}
  .page-home .resource-grid>.resource-card,.page-resources .resource-card{min-height:0}
  .page-home .resource-grid>.resource-card .resource-cover,.page-resources .resource-cover{min-height:0}
}

/* Preserve ticker movement even when the operating system reduces decorative animation.
   Visitors can pause it explicitly with the ticker control. */
@media(prefers-reduced-motion:reduce){
  .cyei-ticker-window{overflow:hidden!important;scrollbar-width:none!important;mask-image:linear-gradient(90deg,transparent,black 3.5%,black 96.5%,transparent)!important}
  .cyei-ticker-set[aria-hidden="true"]{display:flex!important}
  .floating-whatsapp.floating-chat::before,.floating-whatsapp.floating-chat::after{animation:none!important;display:none}
}

/* Final 2.1 precision corrections */
.programme-card::after{
  inset:auto -92px -92px auto!important;
  background:transparent!important;
  width:170px!important;
  height:170px!important;
  border:25px solid rgba(36,103,215,.05)!important;
  border-radius:50%!important;
}
.hero-grid{min-height:640px}
.hero-copy h1{font-size:clamp(3rem,5vw,4.95rem)}
@media(max-width:1080px){.hero-grid{min-height:0}}
@media(max-width:760px){
  body.cyei-v2{padding-bottom:0!important}
  .floating-support{display:none!important}
}