:root{
  --bg:#FAFBFD; --surface:#FFFFFF; --ink:#101B3D; --muted:#4A5677; --line:#DCE3F1;
  --blue:#1F4BB5; --blue-deep:#0F2A6B; --tint:#E8EEFB; --red:#C7303B; --red-tint:#FCE9EA; --sand:#F3EEE6;
  --on-blue:#FFFFFF;
  --display:'Bricolage Grotesque','Segoe UI',Arial,sans-serif; --body:'Figtree','Segoe UI',Arial,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0B1226;--surface:#131C38;--ink:#EEF2FF;--muted:#A9B4D4;--line:#26325A;--blue:#7FA1FF;--blue-deep:#0A1330;--tint:#17244A;--red:#FF7D86;--red-tint:#3A1B24;--sand:#1B2340;}
}
:root[data-theme="dark"]{--bg:#0B1226;--surface:#131C38;--ink:#EEF2FF;--muted:#A9B4D4;--line:#26325A;--blue:#7FA1FF;--blue-deep:#0A1330;--tint:#17244A;--red:#FF7D86;--red-tint:#3A1B24;--sand:#1B2340;}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:96px 0}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font:800 1.3rem var(--display);text-decoration:none;letter-spacing:-.02em}
.logo b{color:var(--red);font-weight:800}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--ink);border-color:var(--red)}
.menu{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:8px 16px;font:600 .9rem var(--body)}

/* buttons */
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:15px 28px;border-radius:999px;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:var(--on-blue)}
:root[data-theme="dark"] .btn-primary{color:#0B1226}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{color:#0B1226}}
.btn-ghost{border:2px solid var(--ink)}

/* hero */
.hero{padding:72px 0 88px}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.stack{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:800}
.stack span{display:block}
.stack span:nth-child(2){padding-left:.9em;color:var(--blue)}
.stack span:nth-child(3){padding-left:1.8em;color:var(--red)}
.lede{max-width:34em;margin:28px 0 32px;font-size:1.2rem;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.photo{position:relative;border-radius:200px 200px 28px 28px;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--tint),var(--sand));border:1px solid var(--line);display:grid;place-items:end start}
.photo::before{content:"";position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;background:var(--red-tint)}
.photo p{position:relative;padding:24px;font-size:.9rem;color:var(--muted);max-width:22em}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.stack span{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.stack span:nth-child(2){animation-delay:.18s}
.stack span:nth-child(3){animation-delay:.36s}

/* programmes */
.head{max-width:40em;margin-bottom:44px}
.head h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:14px}
.head p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border-radius:28px;padding:34px 30px 30px;display:flex;flex-direction:column;gap:14px;min-height:340px;text-decoration:none}
.card h3{font-size:1.6rem}
.card p{color:var(--muted);font-size:1rem}
.card .go{margin-top:auto;font-weight:600}
.c1{background:var(--red-tint)}
.c2{background:var(--tint)}
.c3{background:var(--sand)}
.card:hover .go{text-decoration:underline}
.ico{width:52px;height:52px;border-radius:16px;background:var(--surface);display:grid;place-items:center}
.ico svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* journey */
.journey{background:var(--blue-deep);color:#fff}
.journey .head p{color:#B9C6EA}
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:20px}
.path::before{content:"";position:absolute;left:10%;right:10%;top:22px;border-top:2px dashed #5D78C9}
.step{position:relative;text-align:center;padding:0 10px}
.dot{width:46px;height:46px;border-radius:50%;background:#fff;margin:0 auto 18px;display:block;border:8px solid var(--blue-deep);box-shadow:0 0 0 2px #fff}
.step:last-child .dot{background:#FF7D86;box-shadow:0 0 0 2px #FF7D86}
.step h3{font-size:1.2rem;margin-bottom:8px}
.step p{font-size:.95rem;color:#B9C6EA}

/* impact */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)}
.fact{padding:26px 24px 8px 0}
.fact+.fact{padding-left:24px;border-left:1px solid var(--line)}
.fact b{display:block;font:800 clamp(2.6rem,5vw,4rem)/1 var(--display);letter-spacing:-.03em}
.fact span{display:block;margin-top:10px;color:var(--muted);font-size:.98rem}
.note{margin-top:26px;font-size:.92rem;color:var(--muted);max-width:52em;padding:16px 20px;border-radius:16px;background:var(--tint)}
.survey{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.survey div{border:1px solid var(--line);background:var(--surface);border-radius:24px;padding:28px}
.survey b{font:800 3rem/1 var(--display);color:var(--red)}
.survey p{margin-top:8px;color:var(--muted)}

/* stories */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.story .photo{border-radius:28px 200px 28px 28px;aspect-ratio:1}
blockquote{margin:0;font:600 clamp(1.5rem,3vw,2.2rem)/1.25 var(--display);letter-spacing:-.01em}
cite{display:block;margin:18px 0 28px;font-style:normal;color:var(--muted);font-size:.95rem}

/* get involved */
.paths{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.paths a{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:24px 20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;min-height:170px}
.paths a:hover{border-color:var(--blue);background:var(--tint)}
.paths b{font:700 1.15rem/1.2 var(--display)}
.paths span{color:var(--muted);font-size:.92rem}

footer{background:var(--blue-deep);color:#DDE5FB;padding:64px 0 40px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h3{font-size:1rem;margin-bottom:12px;color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.95rem}
footer .logo{color:#fff}
.small{margin-top:40px;font-size:.85rem;color:#9FB0E0;border-top:1px solid #2A3E80;padding-top:20px}

/* responsive */
@media (max-width:960px){
  section{padding:68px 0}
  .hero-grid,.story{grid-template-columns:1fr}
  .photo{aspect-ratio:16/11;border-radius:28px 120px 28px 28px}
  .cards,.survey{grid-template-columns:1fr}
  .card{min-height:0}
  .path{grid-template-columns:1fr;gap:26px;text-align:left}
  .path::before{left:22px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed #5D78C9}
  .step{text-align:left;padding-left:70px}
  .dot{position:absolute;left:0;top:0;margin:0}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){padding-left:0;border-left:0}
  .paths{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .menu{display:block}
  nav ul{display:none;position:absolute;left:0;right:0;top:72px;background:var(--bg);flex-direction:column;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line)}
  nav ul.open{display:flex}
  nav a{display:block;padding:12px 0}
}
@media (max-width:520px){.paths{grid-template-columns:1fr}.stack span:nth-child(n){padding-left:0}}
@media (prefers-reduced-motion:reduce){.stack span{animation:none}.btn{transition:none}html{scroll-behavior:auto}}

.pagehead{padding:72px 0 40px;background:var(--tint)}
.pagehead h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:800;max-width:14em}
.pagehead p{max-width:36em;margin-top:18px;color:var(--muted);font-size:1.15rem}
.prose{max-width:44em}.prose p+p,.prose ul+p,.prose p+ul{margin-top:1em}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:0 0 16px}
.prose ul,.tick{padding-left:1.2em}.prose li{margin:.35em 0}
.block{padding:64px 0;border-top:1px solid var(--line)}
.block:first-of-type{border-top:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
.two div{border:1px solid var(--line);background:var(--surface);border-radius:24px;padding:26px}
.two h3{font-size:1.2rem;margin-bottom:8px}
.two p,.two li{color:var(--muted);font-size:1rem}
.form a.btn{margin-top:10px}
@media (max-width:960px){.two{grid-template-columns:1fr}}

/* Programme photography */
.site-photo{margin:24px 0 30px;min-width:0}
.site-photo img{display:block;width:100%;height:auto;border-radius:24px}
.site-photo figcaption{margin-top:12px;color:var(--muted);font-size:.92rem;line-height:1.5}
.hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
.hero-grid .site-photo{margin:0}
.hero .stack{font-size:clamp(2.5rem,6vw,4.8rem)}
.hero .stack span{padding-left:0}
.hero .lede{max-width:44em}
.hero .site-photo img{border-radius:28px}
.card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.card.c3 img{object-position:center 65%}
.card.c1 img{aspect-ratio:auto;object-fit:contain}
.story .site-photo{margin:0}
.story h2{font-size:clamp(1.8rem,3vw,2.8rem)}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px;align-items:start}
.photo-grid .site-photo{margin:0}
.education-photo{max-width:480px}
@media(max-width:700px){.photo-grid{grid-template-columns:1fr}.hero{padding-top:40px}.hero-grid{gap:28px}.site-photo img{border-radius:18px}}

/* Updated programme and impact presentation */
.intro-accent{display:block;width:66px;height:6px;border-radius:8px;background:var(--red);margin-bottom:30px}
.home-title{font-size:clamp(2.4rem,5.3vw,4.6rem);max-width:19em;line-height:1.08}
.eyebrow{display:flex;align-items:center;gap:18px;text-transform:uppercase;letter-spacing:.2em;font-size:.85rem;font-weight:700;margin-bottom:26px}
.eyebrow::before{content:"";width:54px;height:5px;background:var(--red);border-radius:4px}
.work-head{position:relative;overflow:hidden;background:var(--bg)}
.work-head::after{content:"";position:absolute;width:260px;height:440px;right:-70px;top:20px;border-radius:100% 0 100% 0;background:var(--red-tint);transform:rotate(-25deg);opacity:.65;pointer-events:none}
.work-head .wrap{position:relative;z-index:1}.work-head h1{font-size:clamp(3rem,7vw,5.5rem)}
.work-head p:not(.eyebrow){max-width:46em;font-size:clamp(1.15rem,2vw,1.5rem)}
.pagehead .eyebrow{color:var(--ink);margin-top:0;font-size:.85rem}
.programme{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start;border-bottom:1px solid var(--line);padding:64px 0}
.programme h2{font-size:clamp(1.8rem,3.1vw,2.5rem);margin-bottom:22px}
.programme-copy p{margin:0 0 20px}.programme-copy ul{padding-left:1.3em;margin:0 0 24px}.programme-copy li{margin:8px 0}
.programme-lead{color:var(--blue)}.programme-photo .site-photo{margin:0}.programme-photo{position:sticky;top:100px}
.impact-content .head{max-width:62em}.impact-content .head h2{font-size:clamp(2rem,3.7vw,3rem)}
.impact-content .facts{border-top:0;align-items:stretch;margin-top:42px;gap:0}
.impact-content .fact{padding:0 24px;display:flex;flex-direction:column}.impact-content .fact:first-child{padding-left:0}
.metric-icon{display:grid!important;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--red-tint);color:var(--red)!important;margin:0 0 20px!important}.metric-icon svg{width:44px;height:44px}
.impact-content .fact b{font-size:clamp(2.6rem,4.5vw,3.8rem);color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.impact-content .fact:nth-child(2) b,.impact-content .fact:nth-child(2) .metric-icon{color:var(--blue)!important}.impact-content .fact:nth-child(2) .metric-icon{background:var(--tint)}
.impact-content .fact:nth-child(3) b,.impact-content .fact:nth-child(3) .metric-icon{color:#159569!important}.impact-content .fact:nth-child(3) .metric-icon{background:#dff4e9}
.impact-content .fact:nth-child(4) b,.impact-content .fact:nth-child(4) .metric-icon{color:#9d67e7!important}.impact-content .fact:nth-child(4) .metric-icon{background:#eee6fc}
.impact-content .survey>div{background:var(--red-tint);border:0}.impact-content .survey b{font-size:3.3rem}
.impact-content .note{max-width:none;padding:24px;font-size:1.05rem}
@media(max-width:960px){.programme{grid-template-columns:1fr;gap:28px}.programme-photo{position:static;max-width:640px}.impact-content .facts{row-gap:32px}.impact-content .fact:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:520px){.impact-content .facts{grid-template-columns:1fr 1fr}.impact-content .fact{padding:0 12px}.impact-content .fact b{font-size:2.4rem}.impact-content .fact span{font-size:.9rem}.metric-icon{width:58px;height:58px}.metric-icon svg{width:34px;height:34px}.programme{padding:42px 0}.home-title{font-size:2.4rem}}

/* Give impact text a transformable box for its entrance animation. */
.survey b{display:inline-block}