/* SDG site — plain CSS. Design tokens follow the Framer project's styles. */
:root{
  --black:#080a07; --black-56:rgba(9,9,9,.56); --black-40:rgba(9,9,9,.4); --black-8:rgba(9,9,9,.08);
  --white:#fff; --white-64:rgba(255,255,255,.64);
  --blue:#009edb; --navy:#0a2c61; --red:#e5243b;
  --max:1320px; --pad:32px;
  --font-head:"Host Grotesk","Inter",system-ui,sans-serif;
  --font-body:"Geist","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}

/* ---- text styles ---- */
.h1{font:800 clamp(56px,10.6vw,128px)/.8 var(--font-head);letter-spacing:-.04em;text-transform:uppercase;text-align:center;margin:0}
.h2{font:800 clamp(30px,4.4vw,53px)/1.1 var(--font-head);letter-spacing:-.03em;text-transform:uppercase;margin:0}
.h3{font:800 clamp(32px,5.3vw,64px)/.8 var(--font-head);letter-spacing:-.04em;text-transform:uppercase;margin:0}
.h4{font:500 32px/.9 var(--font-head);letter-spacing:-.03em;text-transform:uppercase;margin:0}
.h5{font:800 20px/1 var(--font-head);letter-spacing:-.04em;text-transform:uppercase;margin:0}
.body-56{font:700 clamp(28px,4.6vw,56px)/1.1 var(--font-body);letter-spacing:-.04em;margin:0}
.body-32{font:700 clamp(20px,2.7vw,32px)/1 var(--font-body);letter-spacing:-.04em;margin:0}
.body-24{font:700 24px/1.1 var(--font-body);letter-spacing:-.04em;margin:0;text-align:center}
.pill-20{font:700 20px/1 var(--font-head);letter-spacing:-.04em;margin:0}
.pill-14{font:700 14px/1.25 var(--font-head);letter-spacing:-.04em;margin:0}
.cms{font:600 20px/1.2 var(--font-body);letter-spacing:-.04em}
.cms h4{font:800 32px/.9 var(--font-head);letter-spacing:-.03em;text-transform:uppercase;margin:32px 0 12px}
.cms p{margin:0 0 16px}

.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid currentColor;border-radius:80px}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:96px 0}
.divider{height:1px;background:var(--black-8);border:0;margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- floating nav ---- */
.nav{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;gap:8px;align-items:center;
  background:rgba(133,133,133,.54);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:28px;padding:8px 10px;
  transition:transform .35s ease,opacity .35s ease}
.nav.hide{transform:translate(-50%,140%);opacity:0}
.nav a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;color:#fff;text-decoration:none;
  font:700 16px var(--font-head);letter-spacing:-.02em;transition:background .2s}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(255,255,255,.22)}
.nav .brand{padding:0 14px}

/* ---- SDG floating button + wheel popover ---- */
.sdg-fab{position:fixed;right:28px;bottom:28px;z-index:60}
.sdg-fab button.toggle{width:84px;height:84px;border-radius:50%;border:0;background:#fff url("media/kF4OY4yJJConof15nyiHGYO9M.png") center/80% no-repeat;
  box-shadow:0 8px 28px rgba(0,0,0,.28);cursor:pointer;transition:transform .2s}
.sdg-fab button.toggle:hover{transform:scale(1.06)}
.sdg-pop{position:absolute;right:0;bottom:100px;width:min(86vw,360px);aspect-ratio:1;background:rgba(10,44,97,.96);border-radius:50%;
  transform:scale(.6);transform-origin:100% 100%;opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease;padding:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.4)}
.sdg-fab.open .sdg-pop{transform:scale(1);opacity:1;pointer-events:auto}
.wheel-links svg{width:100%;height:100%;display:block}
.wheel-links a{cursor:pointer;outline:0}
.wheel-links .slice{fill:var(--c);transition:transform .15s ease,opacity .15s}
.wheel-links:hover .slice{opacity:.78}
.wheel-links a:hover .slice,.wheel-links a:focus-visible .slice{opacity:1;transform:scale(1.04);transform-origin:160px 160px}
.wheel-links text{fill:#fff;font:800 17px var(--font-head);pointer-events:none;text-anchor:middle;dominant-baseline:central}

/* ---- home hero ---- */
.home-hero{position:relative;min-height:100vh;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 24px 80px}
.mosaic{position:absolute;inset:0;pointer-events:none}
.mosaic img{position:absolute;width:clamp(56px,7.2vw,98px);height:auto;border-radius:6px;animation:float 9s ease-in-out infinite;opacity:.95}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(2deg)}}
.hero-copy{position:relative;z-index:2;text-align:center;max-width:900px}
.hero-copy .kicker{font:700 20px var(--font-head);letter-spacing:-.04em;margin:0 0 18px}
.hero-copy .h1{margin:0 0 28px}
.un-mark{display:inline-flex;align-items:center;gap:10px;font:700 12px var(--font-head);letter-spacing:.04em;text-transform:uppercase;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 28px;border-radius:999px;background:var(--black);color:#fff;text-decoration:none;font:700 20px var(--font-head);letter-spacing:-.04em;border:0;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}

/* ---- home: wheel + scroll text ---- */
.wheel-section{position:relative;padding:120px 0 80px;background:#fff;overflow:hidden}
.wheel-wrap{width:min(92vw,560px);margin:0 auto 64px}
.scroll-text{max-width:954px;margin:0 auto;padding:0 24px;font:700 clamp(23px,2.6vw,30px)/1.25 var(--font-body);letter-spacing:-.04em;text-align:center}
.scroll-text .w{display:inline-block;white-space:nowrap}
.scroll-text .l{display:inline-block;opacity:.2}

/* ---- year wheel ---- */
.years-section{background:#fff center/cover no-repeat;padding:96px 16px 64px;position:relative;overflow:hidden}
.years-section .h2{text-align:center;margin-bottom:24px;color:#fff}
.yw{position:relative;width:min(100%,900px);aspect-ratio:1;margin:0 auto;touch-action:none;user-select:none;cursor:grab;overflow:hidden}
.yw.drag{cursor:grabbing}
.yw-stage{position:absolute;left:0;top:0;width:1080px;height:1080px;transform-origin:0 0}
.yw .yr{position:absolute;transform:translate(-50%,-50%);font:600 30px var(--font-body);color:#f2f2f2;padding:12px;white-space:nowrap;cursor:pointer;transition:left .3s ease,top .3s ease,transform .3s ease,opacity .3s}
.yw.drag .yr{transition:none}
.yw .tiles{position:absolute;pointer-events:none}
.yw .tile{position:absolute;width:80px;height:80px;color:#fff;overflow:hidden}
.yw .tile b{position:absolute;left:0;top:0;width:22px;height:25px;line-height:25px;text-align:center;font:700 14px/25px var(--font-body)}
.yw .tile i{position:absolute;top:6px;font:700 5.5px/6.5px var(--font-body);text-align:left;font-style:normal}
.yw .tile u{position:absolute;left:0;bottom:0;width:80px;height:25px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font:700 14px var(--font-body);text-decoration:none}
.years-section .hint{color:#fff}.hint{text-align:center;font:700 20px var(--font-head);letter-spacing:-.04em;margin-top:12px}

/* ---- map ---- */
.map-section{padding:96px 16px;background:#fff}
.map-section .h2{text-align:center;margin-bottom:24px}
.kiosk{position:relative;width:100%;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;container-type:inline-size;touch-action:manipulation;user-select:none}
.kiosk .mapwrap{position:relative;width:70%;aspect-ratio:914.55/603}
.kiosk .mapwrap svg{width:100%;height:100%;display:block}
.kiosk path{stroke:#fff;stroke-width:.5;cursor:pointer;transition:fill .4s ease}
.kiosk path.sel{stroke:#111;stroke-width:1.6}
.kiosk .info{position:absolute;left:0;bottom:0;background:rgba(20,20,20,.92);color:#fff;padding:.9cqw 1.4cqw;border-radius:14px;pointer-events:none;max-width:80%;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.kiosk .info .c{font:700 clamp(16px,1.8cqw,32px) var(--font-body);margin-bottom:4px}
.kiosk .info .s{display:flex;align-items:center;gap:.6em;font:400 clamp(12px,1.3cqw,24px) var(--font-body);opacity:.92}
.kiosk .info .dot{width:.8em;height:.8em;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.5)}
.kiosk .prompt{margin:1cqw 0;text-align:center;font:600 clamp(14px,1.6cqw,30px) var(--font-body);letter-spacing:-.02em;color:var(--blue)}
.kiosk .goalrow{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:.4cqw;width:78%}
.kiosk .goalrow button{aspect-ratio:1;width:100%;min-width:0;border:0;padding:0;cursor:pointer;background:transparent;border-radius:6px;overflow:hidden;transition:transform .15s,box-shadow .15s,opacity .15s;position:relative}
.kiosk .goalrow button img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.kiosk .goalrow button.active{outline:3px solid #111;box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translateY(-4px) scale(1.08);z-index:2}
.kiosk .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.6cqw 1.6cqw;margin-top:1.4cqw}
.kiosk .legend span{display:flex;align-items:center;gap:.6em;font:400 clamp(11px,1.05cqw,18px) var(--font-body);color:#555}
.kiosk .legend i{width:clamp(8px,.9cqw,16px);height:clamp(8px,.9cqw,16px);border-radius:50%}

/* ---- news carousel ---- */
.news{background:var(--navy);color:#fff;border-radius:20px;padding:24px;overflow:hidden;max-width:1136px;margin:0 auto}
.news-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.news-head h2{margin:0;font:600 32px/1 var(--font-body);letter-spacing:-.03em}
.news-arrows{display:flex;gap:8px}
.news-arrows button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:var(--red);color:#fff;cursor:pointer}
.news-arrows button:disabled{opacity:.45;cursor:default}
.news-view{overflow:hidden;touch-action:pan-y}
.news-track{display:flex;gap:14px;transition:transform .35s ease}
.news-card{flex:0 0 calc((100% - 3*14px)/4);min-width:0;display:flex;flex-direction:column;text-decoration:none;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;min-height:320px}
.news-card .bar{height:4px}
.news-card img,.news-card .ph{width:100%;height:148px;object-fit:cover;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05))}
.news-card .b{padding:12px;display:flex;flex-direction:column;gap:8px}
.news-card .m{margin:0;opacity:.82;font:600 14px var(--font-body)}
.news-card h3{margin:0;font:500 15px/1.2 var(--font-body)}
.news-card p{margin:0;opacity:.9;font:500 15px/1.3 var(--font-body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-msg{background:rgba(255,255,255,.12);border-radius:14px;padding:16px;margin:0}
@media(max-width:1199px){.news-card{flex-basis:calc((100% - 2*14px)/3)}}
@media(max-width:899px){.news-card{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:599px){.news-card{flex-basis:100%}}

/* ---- quiz ---- */
.quiz{position:relative;width:100%;max-width:1100px;min-height:650px;margin:0 auto;border-radius:16px;overflow:hidden;background:#f4f4f4;box-shadow:0 10px 50px rgba(0,0,0,.12);font-family:Inter,system-ui,sans-serif;display:flex;flex-direction:column}
.quiz .bgL,.quiz .bgR{position:absolute;inset:0;opacity:0;transition:opacity .15s}
.quiz .qhead{position:relative;z-index:2;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.95);border-bottom:1px solid #ddd}
.quiz .qhead h4{margin:0;font-size:20px}
.quiz .stage{position:relative;z-index:2;flex:1;display:flex;justify-content:center;align-items:center;padding:20px}
.quiz .card{width:90%;max-width:900px;min-height:420px;background:#fff;border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;cursor:grab;position:relative;touch-action:pan-y}
.quiz .card h2{font:800 clamp(24px,3.4vw,36px)/1.2 Inter,sans-serif;text-align:center;margin:0 0 40px;max-width:800px}
.quiz .choices{width:100%;max-width:850px;height:200px;display:flex;align-items:center;position:relative}
.quiz .choice{flex:1;height:100%;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:20px;padding:20px 40px;font:800 22px Inter,sans-serif;text-align:center;box-shadow:inset 0 0 40px rgba(0,0,0,.2);border:0;cursor:pointer}
.quiz .sep{position:absolute;left:calc(50% - 30px);width:60px;height:60px;background:#fff;border:4px solid #eee;border-radius:50%;display:flex;justify-content:center;align-items:center;font:800 20px Inter;z-index:3;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.quiz .help{font:600 15px Inter;color:#999;text-transform:uppercase;letter-spacing:1px;margin-top:30px}
.quiz .results{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.quiz .rt{width:200px;height:200px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);color:#fff;padding:20px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.quiz .rt b{font-size:36px;font-weight:900;line-height:1}
.quiz .rt span{font-size:18px;font-weight:800;line-height:1.1}
.quiz .retake{padding:16px 36px;background:#111;color:#fff;border:0;border-radius:12px;font:800 16px Inter;cursor:pointer}

/* ---- goals list ---- */
.page-hero{background:#080a07 center/cover no-repeat;color:#fff;min-height:80vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:48px;padding:140px 32px 32px}
.page-hero .container{display:flex;flex-direction:column;gap:32px;padding:0}
.page-hero .h2{color:#fff}
.page-hero hr{border:0;height:1px;background:rgba(255,255,255,.5);width:100%}
.plus{display:flex;gap:8px;color:#fff;opacity:.75;font:400 28px/1 var(--font-body)}
.goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:41px}
.goal-card{display:block;text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;background:#f5f5f5;transition:transform .25s ease,box-shadow .25s ease}
.goal-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.16)}
.goal-card .img{aspect-ratio:933/359;background:#ddd center/cover no-repeat}
.goal-card .t{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font:700 20px var(--font-head);letter-spacing:-.03em}
.goal-card .t i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.faq-card{border-top:1px solid var(--black-8);padding:28px 0;cursor:pointer}
.faq-card .q{display:flex;gap:28px;align-items:flex-start}
.faq-card .n{font:700 20px var(--font-head);opacity:.5;width:36px;flex:none}
.faq-card h3{margin:0;flex:1;font:800 clamp(20px,2.4vw,28px)/1.1 var(--font-head);letter-spacing:-.03em;text-transform:uppercase}
.faq-card .x{font:400 32px/1 var(--font-body);transition:transform .25s}
.faq-card.open .x{transform:rotate(45deg)}
.faq-card .a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding-left:64px}
.faq-card .a p{margin:16px 0 0;font:600 18px/1.3 var(--font-body);letter-spacing:-.03em;max-width:720px;color:var(--black-56)}

/* ---- goal page ---- */
.banner{position:relative;height:640px;overflow:hidden;background:var(--goal)}
.banner .art{position:absolute;inset:0}
.banner .Hero-bg{display:block;width:100%;height:100%;position:absolute;left:0;bottom:0;overflow:hidden;pointer-events:none;user-select:none}
.banner .titles{position:absolute;inset:0;z-index:2;color:#fff}
.banner .titles h1{position:absolute;left:50%;transform:translateX(-50%);width:88%;top:95px;text-align:left;margin:0}
.banner .titles .gn{position:absolute;left:50%;transform:translateX(-50%);width:min(1034px,90%);bottom:317px}
.intro{padding:32px 32px 96px;background:#fff;position:relative;z-index:2}
.intro .container{padding:0;display:flex;flex-direction:column;gap:38px}
.metrics{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:96px 32px;position:relative;z-index:3;background:#fff}
.metrics .inner{width:100%;max-width:1136px;min-height:608px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.metrics .row{display:flex;gap:16px}
.metric{flex:1}
.metric .num{font:800 clamp(48px,7vw,96px)/1 var(--font-head);letter-spacing:-.04em}
.metric .lab{font:700 20px var(--font-head);letter-spacing:-.04em;opacity:.6;margin-top:8px}
.targets{padding:25px;background:#fff;position:relative;z-index:3}
.targets .h2{text-align:center;margin:48px 0}
.t-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 56px;max-width:var(--max);margin:0 auto}
.t-card{display:flex;gap:25px;justify-content:space-between;align-items:center;border-top:1px solid var(--black-8);padding:24px 1px;min-height:210px}
.t-card .n{font:700 32px var(--font-body);letter-spacing:-.04em;width:6%;min-width:44px;align-self:flex-start}
.t-card .ti{width:179px;align-self:flex-start}
.t-card .de{max-width:221px;align-self:flex-start;font-weight:500}
.t-card img{width:120px;height:120px;object-fit:contain;flex:none;background:var(--goal,#080a07);border-radius:14px;padding:14px}
.contribute{padding:25px;background:#fff;position:relative;z-index:3;max-width:var(--max);margin:0 auto}
.contribute .h2{margin:48px 0 24px}
.todo-wrap{display:flex;flex-wrap:wrap;gap:16px 38px;justify-content:center;margin-top:32px}
.todo{width:251px;min-height:349px;background:var(--goal);color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;overflow:hidden}
.todo img{width:194px;height:191px;object-fit:contain}
.todo p{margin:0;font:500 15px/1.3 Inter,sans-serif;text-align:center}
.related{padding:96px 32px;background:#fff;position:relative;z-index:3}
.related .container{padding:0;display:flex;flex-direction:column;gap:32px}
.related .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.related-news{margin-top:64px}
footer.site{background:var(--black);color:#fff;padding:80px 32px 120px}
footer.site .row{max-width:var(--max);margin:0 auto;display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap}
footer.site a{color:#fff;text-decoration:none;opacity:.8;font:700 16px var(--font-head)}
footer.site a:hover{opacity:1}
footer.site .copy{max-width:var(--max);margin:48px auto 0;opacity:.5;font:500 14px var(--font-body)}

/* ---- legal ---- */
.legal{max-width:820px;margin:0 auto;padding:180px 24px 120px}
.legal .date{opacity:.6;font:700 16px var(--font-head);margin:16px 0 40px}

@media(max-width:1000px){
  .goal-grid,.related .grid{grid-template-columns:repeat(2,1fr)}
  .t-grid{grid-template-columns:1fr}
  .metrics .row{flex-wrap:wrap}.metric{flex:1 1 40%}
  .kiosk .mapwrap{width:96%}.kiosk .goalrow{width:96%}
  .nav a{padding:0 12px;font-size:14px}
}
@media(max-width:600px){
  .goal-grid,.related .grid{grid-template-columns:1fr}
  .t-card{flex-wrap:wrap}.t-card .ti,.t-card .de{width:100%;max-width:none}
  .banner{height:520px}.banner .titles .gn{bottom:220px}
  .sdg-fab{right:14px;bottom:84px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- home hero: Figma "Sustainable Development Goals- 1.0" (1440 x 820 canvas, scaled to fit) ---- */
.fh{position:relative;height:max(56.944vw,560px);overflow:hidden;background:#fff}
.fh-canvas{position:absolute;left:50%;top:50%;width:1440px;height:820px;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:50% 50%}
.fh .t{position:absolute;display:block;width:80px;height:80px}
.fh a.t{transition:transform .2s ease,box-shadow .2s ease}
.fh a.t:hover,.fh a.t:focus-visible{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.28);z-index:3;outline:0}
.fh a.t img{display:block;width:100%;height:100%;object-fit:cover}
.fh-un{position:absolute;inset:0;pointer-events:none}
.fh-un .un-p{position:absolute;display:block}
.fh-un-t{position:absolute;left:720px;top:155.46px;transform:translateX(-50%);font:500 10px Inter,sans-serif;letter-spacing:-.3px;color:#009edb;white-space:nowrap}
.fh-title{position:absolute;left:calc(50% - .5px);top:calc(50% - 169px);transform:translateX(-50%);margin:0;font:700 60px/56.333px Inter,sans-serif;letter-spacing:-1.8px;color:#000;text-align:center;white-space:pre;z-index:2}
.fh-title span{display:block}
.fh-sub1,.fh-sub2{position:absolute;top:calc(50% + 192px);transform:translateX(-50%);margin:0;font:400 15px Inter,sans-serif;letter-spacing:-.45px;color:#009edb;white-space:nowrap;z-index:2}
.fh-sub1{left:calc(50% - .5px)}
.fh-sub2{left:calc(50% - 1px);top:calc(50% + 210px);font-weight:600}

.chrome-off{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease}
.nav,.sdg-fab{transition:opacity .3s ease}

/* ---- big home wheel (Framer SDG Wheel style) ---- */
.wheel-wrap{width:min(92vw,769px)!important}
.wheel-links.big .slice{stroke:#fff;stroke-width:2;transition:filter .2s ease}
.wheel-links.big:hover .slice{opacity:1}
.wheel-links.big a:hover .slice,.wheel-links.big a:focus-visible .slice{filter:brightness(1.1);transform:none}
.wheel-links.big text.n{fill:#fff;font:700 30px Inter,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.wheel-links.big text.nm{fill:#fff;font:700 11px Inter,sans-serif;letter-spacing:-.01em;text-anchor:middle;pointer-events:none}

.wheel-links.big svg{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.wheel-links.big svg.grab{cursor:grabbing}
.wheel-links.big svg.grab a{pointer-events:none}

.yw .yr.off{cursor:default;pointer-events:none}

/* goals popup (round button): same wheel style, larger so petal text is readable */
.sdg-pop{width:min(92vw,480px,calc(100vh - 150px));padding:12px}
.sdg-pop .wheel-links.big svg{cursor:grab}

/* page colour wipe: one colour layer, bottom to top */
#wipe{position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden}
#wipe i{position:absolute;inset:0;display:block;background:var(--wipe,#009edb);transform:translateY(101%);will-change:transform;transition:transform .65s cubic-bezier(.76,0,.24,1)}
#wipe.go i{transform:translateY(0)}
/* arriving: covered, then the colour lifts off upward */
.wipe-in #wipe i{transform:translateY(0);transition:none}
.wipe-in #wipe.out i{transform:translateY(-101%);transition:transform .65s cubic-bezier(.76,0,.24,1)}
@media (prefers-reduced-motion:reduce){#wipe{display:none}}

/* ---- home section laid out like the Framer canvas (1734 x 1787); stacks on small screens ---- */
.wheel-section{padding:0}
.ws{position:relative;width:100%;height:calc(2073px * var(--s,.6));overflow:hidden}
.ws-c{position:absolute;left:0;top:0;width:1734px;height:2073px;transform:scale(var(--s,.6));transform-origin:0 0}
.ws-t{position:absolute;display:block;border:0;object-fit:cover}
.ws .wheel-wrap{position:absolute;left:517px;top:1234px;width:700px!important;margin:0}
.ws .scroll-text{position:absolute;left:387px;top:429px;width:954px;max-width:none;padding:0;transform:translateY(-50%);font-size:30px}
@media (max-width:700px){
  .wheel-section{padding:64px 0 40px}
  .ws{height:auto;overflow:visible}
  .ws-c{position:static;width:auto;height:auto;transform:none}
  .ws-t{display:none}
  .ws .wheel-wrap{position:static;width:min(92vw,560px)!important;margin:0 auto 48px}
  .ws .ws-title{position:static;width:auto;font-size:clamp(26px,7vw,36px);margin:0 auto 44px;padding:0 20px}
  .ws .scroll-text{position:static;width:auto;max-width:954px;padding:0 24px;transform:none;font-size:clamp(23px,6vw,32px)}
}

/* ---- home news: same look as the rest of the home page (white, square tiles in the goal colours) ---- */
.news{background:transparent;color:var(--ink,#080a07);border-radius:0;padding:0;max-width:1240px;overflow:visible}
.news .news-head{align-items:flex-end;margin-bottom:32px}
.news .news-head h2{font:800 clamp(30px,4.4vw,53px)/1.1 var(--font-head);letter-spacing:-.03em;text-transform:uppercase}
.news .news-arrows{gap:0}
.news .news-arrows button{width:56px;height:56px;border-radius:0;border:0;background:var(--blue);font-size:22px;transition:background .2s}
.news .news-arrows button+button{background:var(--navy)}
.news .news-arrows button:hover:not(:disabled){filter:brightness(1.15)}
.news .news-view{overflow:hidden}
.news .news-track{gap:0}
.news .news-card{flex:0 0 calc(100%/4);background:#fff;color:#080a07;border:0;border-radius:0;min-height:0;box-shadow:inset 0 0 0 1px #e6e6e6;transition:transform .25s ease,box-shadow .25s ease}
.news .news-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(8,10,7,.18);z-index:1}
.news .news-card .bar{display:none}
.news .news-card img,.news .news-card .ph{height:auto;aspect-ratio:560/340;background:#e9eef2}
.news .news-card .gt{display:flex;align-items:center;gap:10px;color:#fff;padding:0 12px;height:48px}
.news .news-card .gt b{font:800 26px/1 var(--font-body)}
.news .news-card .gt span{font:700 9px/1.15 var(--font-body);letter-spacing:.02em;text-transform:uppercase}
.news .news-card .b{padding:16px 16px 22px;gap:10px}
.news .news-card .m{opacity:.6;font:600 12px var(--font-body);text-transform:uppercase;letter-spacing:.04em}
.news .news-card h3{font:700 19px/1.2 var(--font-head);letter-spacing:-.02em}
.news .news-card p:not(.m){opacity:.75;font:500 14px/1.4 var(--font-body)}
.news .news-msg{background:#f3f5f7;border-radius:0}
@media(max-width:1199px){.news .news-card{flex-basis:calc(100%/3)}}
@media(max-width:899px){.news .news-card{flex-basis:calc(100%/2)}}
@media(max-width:599px){.news .news-card{flex-basis:100%}}
/* home news sits on a navy band */
.news-band{background:var(--navy)}
.news .news-head h2{color:#fff}
.news .news-arrows button,.news .news-arrows button+button{background:var(--blue)}
.news .news-loading{color:#fff}
.news .news-card{box-shadow:none}
.news .news-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.4)}
/* gaps between the home news cards */
.news{--g:20px}
.news .news-track{gap:var(--g)}
.news .news-card{flex:0 0 calc((100% - 3*var(--g))/4)}
@media(max-width:1199px){.news .news-card{flex-basis:calc((100% - 2*var(--g))/3)}}
@media(max-width:899px){.news .news-card{flex-basis:calc((100% - var(--g))/2)}}
@media(max-width:599px){.news .news-card{flex-basis:100%}}
.news .news-card img.tile{object-fit:cover;background:#fff}
.news .news-card img.tile{aspect-ratio:1/1;object-fit:cover}
.news .news-card.has-tile .gt,.news .news-card.has-tile .bar{display:none}

/* ---- goal page numbers: text on the left, square tiles in the goal colours on the right (same tile look as the home page) ---- */
.metrics{min-height:0;padding:120px 32px}
.metrics .inner{max-width:1240px;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;column-gap:80px;row-gap:28px;align-items:center}
.metrics .divider{grid-column:1;grid-row:1;align-self:end;width:96px;height:8px;background:var(--goal,var(--blue))}
.metrics .body-32{grid-column:1;grid-row:2;align-self:start;max-width:none!important;font-size:clamp(22px,2.4vw,34px);line-height:1.15}
.metrics .row{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;gap:0}
.metrics .metric{aspect-ratio:1;flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2vw,28px);color:#fff;background:var(--goal,var(--blue))}
.metrics .metric:nth-child(2){background:var(--navy)}
.metrics .metric:nth-child(3){background:var(--blue)}
.metrics .metric:nth-child(4){background:color-mix(in srgb,var(--goal,#009edb) 78%,#000)}
.metrics .metric .num{font:800 clamp(40px,5.2vw,76px)/1 var(--font-head);letter-spacing:-.04em}
.metrics .metric .lab{font:700 clamp(12px,1.1vw,15px) var(--font-body);letter-spacing:.06em;text-transform:uppercase;opacity:.9;margin-top:10px}
@media(max-width:900px){
  .metrics{padding:72px 24px}
  .metrics .inner{grid-template-columns:1fr;column-gap:0}
  .metrics .divider,.metrics .body-32,.metrics .row{grid-column:1}
  .metrics .divider{grid-row:1}.metrics .body-32{grid-row:2}.metrics .row{grid-row:3;margin-top:24px}
}
.metrics .metric .ic{width:clamp(48px,6vw,88px);height:clamp(48px,6vw,88px);margin-bottom:auto;opacity:.95}
.metrics .metric{position:relative}

/* ---- goal page targets: square goal-colour tiles with the target number and icon, text underneath ---- */
.targets{padding:110px 32px 120px;background:#f3f5f7}
.targets .h2{margin:0 0 56px}
.t-grid{grid-template-columns:repeat(3,1fr);gap:24px;max-width:1240px}
.t-card{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;border:0;padding:0;min-height:0;background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.t-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(8,10,7,.14)}
.t-card img{order:-1;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:13% 28%;border-radius:0;background:var(--goal,#080a07)}
.t-card .n{position:absolute;top:16px;left:20px;width:auto;min-width:0;color:#fff;font:800 clamp(28px,2.6vw,38px)/1 var(--font-head);letter-spacing:-.04em;z-index:1}
.t-card .ti{width:auto;align-self:stretch;padding:22px 22px 0;font:800 18px/1.15 var(--font-head);letter-spacing:-.02em}
.t-card .de{max-width:none;align-self:stretch;padding:12px 22px 26px;font:500 15px/1.4 var(--font-body);letter-spacing:0;opacity:.8}
@media(max-width:1100px){.t-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.targets{padding:72px 20px 80px}.t-grid{grid-template-columns:1fr}.t-card .ti,.t-card .de{width:auto;max-width:none}}
.t-card img{aspect-ratio:1/1;object-fit:cover;padding:0;background:transparent}
.t-card .n{position:static;order:0;padding:20px 22px 0;color:var(--goal,#080a07);font-size:clamp(30px,2.8vw,40px)}
.t-card .ti{padding-top:10px}
/* targets: five small cards per row on wide screens */
.t-grid{grid-template-columns:repeat(5,1fr);gap:16px;max-width:1360px}
.t-card .n{padding:14px 16px 0;font-size:clamp(24px,2vw,30px)}
.t-card .ti{padding:8px 16px 0;font-size:14px;line-height:1.15}
.t-card .de{padding:10px 16px 20px;font-size:12.5px;line-height:1.4}
@media(max-width:1250px){.t-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.t-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.t-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.t-grid{grid-template-columns:1fr}}
/* goal banner: title and "Goal N" centred */
.banner .titles h1,.banner .titles .gn{text-align:center}
/* goal banner: title and "Goal N" stack with a fixed gap, so long titles never overlap the label */
.banner{height:auto;min-height:640px}
.banner .titles{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:40px;padding:95px 6% 300px;box-sizing:border-box}
.banner .titles h1,.banner .titles .gn{position:static;transform:none;left:auto;bottom:auto;width:min(1034px,100%);text-align:center;margin:0}
@media(max-width:760px){.banner{min-height:520px}.banner .titles{padding:80px 6% 220px;gap:28px}.banner .titles .gn{bottom:auto}}

/* ---- "Scan to read more" QR popup ---- */
.qr-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,10,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.qr-modal[hidden]{display:none}
.qr-open{overflow:hidden}
.qr-card{position:relative;width:min(100%,520px);background:#fff;border-radius:32px;padding:48px 40px 40px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:qr-in .25s ease}
@keyframes qr-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.qr-close{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;border:0;background:#ececec;color:#1a1a1a;display:grid;place-items:center;cursor:pointer}
.qr-close svg{width:22px;height:22px}
.qr-close:hover{background:#dcdcdc}
.qr-card h2{margin:0 0 12px;font:800 clamp(26px,3vw,34px)/1.1 var(--font-body);letter-spacing:-.02em;color:#161616}
.qr-sub{margin:0 auto 28px;max-width:380px;font:400 clamp(16px,1.6vw,19px)/1.45 var(--font-body);color:#666}
.qr-ring{display:inline-block;padding:14px;border-radius:44px;background:#f4f4f4}
.qr-box{width:min(62vw,280px);aspect-ratio:1;padding:20px;border-radius:30px;background:#fff;border:2px solid #e3e3e3;box-sizing:content-box}
.qr-box svg{display:block;width:100%;height:100%}
.qr-title{margin:20px auto 0;max-width:380px;font:600 14px/1.35 var(--font-body);color:#888;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:520px){.qr-card{padding:56px 22px 28px;border-radius:26px}}

/* QR popup, restyled to the site theme: square tiles, goal colour band, navy frame, uppercase headings */
.qr-modal{background:rgba(10,44,97,.82)}
.qr-card{--qc:#0a2c61;width:min(100%,500px);border-radius:0;padding:0 0 36px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.qr-top{display:flex;align-items:center;gap:14px;height:72px;padding:0 84px 0 24px;background:var(--qc);color:#fff;text-align:left}
.qr-top b{font:800 40px/1 var(--font-head);letter-spacing:-.04em}
.qr-top b:empty{display:none}
.qr-top span{font:700 12px/1.2 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
.qr-close{top:0;right:0;width:72px;height:72px;border-radius:0;background:#0a2c61;color:#fff}
.qr-close:hover{background:#009edb}
.qr-card h2{margin:36px 28px 12px;font:800 clamp(28px,3.4vw,40px)/1.05 var(--font-head);letter-spacing:-.03em;text-transform:uppercase;color:#080a07}
.qr-sub{margin:0 auto 28px;max-width:360px;padding:0 20px;font:500 16px/1.45 var(--font-body);color:#555}
.qr-ring{padding:0;border-radius:0;background:transparent;position:relative}
.qr-ring::before,.qr-ring::after{content:"";position:absolute;width:44px;height:44px;border:6px solid var(--qc)}
.qr-ring::before{left:-14px;top:-14px;border-right:0;border-bottom:0}
.qr-ring::after{right:-14px;bottom:-14px;border-left:0;border-top:0}
.qr-box{width:min(58vw,264px);padding:16px;border-radius:0;border:0;background:#fff;box-shadow:0 0 0 2px #e6e9ee}
.qr-title{margin:28px auto 0;max-width:380px;padding:0 24px;font:700 13px/1.35 var(--font-body);letter-spacing:.02em;text-transform:uppercase;color:#0a2c61}
@media(max-width:520px){.qr-card{padding:0 0 28px;border-radius:0}.qr-top{height:60px}.qr-close{width:60px;height:60px}}
/* QR close button: one shade lighter than the goal colour */
.qr-close{background:color-mix(in srgb,var(--qc) 80%,#fff)}
.qr-close:hover{background:color-mix(in srgb,var(--qc) 65%,#fff)}

/* ---- map section in the site theme: heading + goal tiles + legend on the left, framed map on the right ---- */
.map-section{padding:110px 32px 120px;background:#fff}
.map-section .h2{max-width:1280px;margin:0 auto 48px;text-align:left}
.kiosk{max-width:1280px;display:grid;grid-template-columns:minmax(300px,400px) 1fr;grid-template-rows:auto auto 1fr;column-gap:48px;row-gap:0;align-items:start;justify-items:stretch}
.kiosk .mapwrap{grid-column:2;grid-row:1/4;width:100%;box-sizing:border-box;padding:3%;background:#fff;border:2px solid var(--navy)}
.kiosk .prompt{grid-column:1;grid-row:1;margin:0 0 20px;text-align:left;font:800 20px/1.2 var(--font-head);letter-spacing:-.02em;text-transform:uppercase;color:var(--navy)}
.kiosk .goalrow{grid-column:1;grid-row:2;width:100%;grid-template-columns:repeat(4,1fr);gap:0}
.kiosk .goalrow button{border-radius:0;outline:0}
.kiosk .goalrow button.active{outline:4px solid var(--navy);outline-offset:-4px;box-shadow:0 10px 26px rgba(0,0,0,.35);transform:scale(1.06);z-index:2}
.kiosk .legend{grid-column:1;grid-row:3;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid #e3e6ea}
.kiosk .legend span{font:600 15px var(--font-body);color:#222}
.kiosk .legend i{width:16px;height:16px;border-radius:0}
.kiosk .info{left:3%;bottom:3%;border-radius:0;background:var(--navy);padding:14px 20px;max-width:70%;box-shadow:0 12px 30px rgba(10,44,97,.4)}
.kiosk .info .c{font:800 clamp(16px,1.6cqw,26px) var(--font-head);text-transform:uppercase;letter-spacing:-.01em}
@media(max-width:900px){
  .map-section{padding:72px 20px 80px}
  .map-section .h2{margin-bottom:28px}
  .kiosk{grid-template-columns:1fr}
  .kiosk .mapwrap{grid-column:1;grid-row:1;padding:2%}
  .kiosk .prompt{grid-column:1;grid-row:2;margin:24px 0 14px}
  .kiosk .goalrow{grid-column:1;grid-row:3;grid-template-columns:repeat(6,1fr)}
  .kiosk .legend{grid-column:1;grid-row:4}
}
.kiosk{grid-template-columns:minmax(300px,440px) 1fr}
.kiosk .mapwrap{align-self:start}
.kiosk .goalrow{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.kiosk{grid-template-columns:1fr}}
/* bigger, borderless map */
.map-section{padding-left:24px;padding-right:24px}
.map-section .h2,.kiosk{max-width:1440px}
.kiosk{grid-template-columns:minmax(280px,340px) 1fr;column-gap:24px}
.kiosk .mapwrap{border:0;padding:0;background:transparent}
.kiosk .info{left:0;bottom:4%}
@media(max-width:900px){.kiosk{grid-template-columns:1fr}.map-section{padding-left:20px;padding-right:20px}}
/* map a little smaller */
.kiosk .mapwrap{width:88%;justify-self:center}
@media(max-width:900px){.kiosk .mapwrap{width:100%}}
.kiosk .mapwrap{width:74%}
@media(max-width:900px){.kiosk .mapwrap{width:100%}}
.kiosk .mapwrap{margin-top:-56px}
@media(max-width:900px){.kiosk .mapwrap{margin-top:0}}

/* ---- country kiosk (A-Z picker, outline, score and rank, goal trends) ---- */
.cx-section{padding:110px 24px 120px;background:#f3f5f7}
.cx-section .h2{max-width:1280px;margin:0 auto 48px;text-align:left}
.cx{max-width:1280px;margin:0 auto}
.cx-pick{position:relative}
.cx-az{display:flex;flex-wrap:wrap;gap:0;justify-content:flex-start}
.cx-az button{width:clamp(30px,3.6vw,46px);aspect-ratio:1;border:0;background:#fff;color:#080a07;font:800 clamp(14px,1.3vw,18px) var(--font-head);cursor:pointer;transition:background .15s,color .15s}
.cx-az button:hover:not(:disabled){background:var(--blue);color:#fff}
.cx-az button.on{background:var(--navy);color:#fff}
.cx-az button:disabled{color:#c9ced4;cursor:default;background:#eef0f3}
.cx-drop{position:absolute;left:0;top:100%;z-index:20;width:min(100%,640px);background:#fff;border-top:4px solid var(--navy);box-shadow:0 18px 40px rgba(10,44,97,.22);padding:14px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.cx-drop[hidden]{display:none}
.cx-drop button{border:0;background:transparent;text-align:left;padding:8px 12px;font:500 15px var(--font-body);color:#080a07;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-drop button:hover{background:rgba(0,158,219,.12);color:var(--blue)}
.cx-drop button.sel{color:var(--blue);font-weight:700}
.cx-main{display:grid;grid-template-columns:1fr 340px;gap:0;margin-top:24px;background:#fff}
.cx-left{padding:32px 32px 24px;text-align:center;min-width:0}
.cx-name{margin:0;font:800 clamp(28px,3.4vw,44px)/1.1 var(--font-head);letter-spacing:-.03em;text-transform:uppercase}
.cx-region{margin:6px 0 10px;color:var(--blue);font:600 15px var(--font-body);min-height:1.3em}
.cx-map{max-width:640px;margin:0 auto}
.cx-map svg{display:block;width:100%;height:auto;aspect-ratio:7/5}
.cx-stats{display:grid;grid-template-rows:1fr 1fr}
.cx-stat{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px;color:#fff;min-height:200px}
.cx-stat.navy{background:var(--navy)}.cx-stat.blue{background:var(--blue)}
.cx-stat b{font:800 clamp(56px,6vw,92px)/1 var(--font-head);letter-spacing:-.05em;display:flex;align-items:baseline;gap:10px}
.cx-stat b i{font-style:normal}.cx-stat b em{font:700 20px var(--font-body);font-style:normal;letter-spacing:0;opacity:.85}
.cx-stat span{margin-top:12px;font:700 14px var(--font-body);letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.cx-stat .pop{animation:cxpop .4s ease}
@keyframes cxpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cx-h3{margin:56px 0 24px;font:800 clamp(24px,2.6vw,34px)/1.1 var(--font-head);letter-spacing:-.03em;text-transform:uppercase}
.cx-goals{display:grid;grid-template-columns:repeat(9,1fr);gap:20px 14px}
.cx-g{display:flex;align-items:center;gap:8px;min-width:0}
.cx-g img{width:100%;aspect-ratio:1;object-fit:cover;display:block;min-width:0;flex:1 1 auto}
.cx-g .tr{flex:none;font:800 22px/1 var(--font-body);width:22px;text-align:center;color:#939598}
.cx-legend{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:36px}
.cx-legend span{display:flex;align-items:center;gap:10px;font:600 14px var(--font-body)}
.cx-legend b{font:800 26px/1 var(--font-body)}
@media(max-width:1000px){.cx-main{grid-template-columns:1fr}.cx-stats{grid-template-rows:none;grid-template-columns:1fr 1fr}.cx-goals{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.cx-section{padding:72px 16px 80px}.cx-goals{grid-template-columns:repeat(3,1fr)}.cx-drop{grid-template-columns:repeat(2,1fr)}.cx-stats{grid-template-columns:1fr}.cx-left{padding:24px 12px}}

/* ---- country kiosk redesigned: navy band, goal-colour squares in the corners, coloured letter tiles, tile stats ---- */
.cx-section{--sq:clamp(44px,6.6vw,96px);position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(110px,12vw,170px) 24px clamp(120px,12vw,170px)}
.cx-d{position:absolute;display:block;width:var(--sq);height:var(--sq);pointer-events:none}
.cx-section .h2,.cx{position:relative;z-index:2}
.cx-section .h2{color:#fff;text-align:center;margin-bottom:44px}
.cx-az{justify-content:center;gap:6px}
.cx-az button{width:clamp(34px,3.7vw,50px);color:#fff;background:#009edb;border-radius:0}
.cx-az button:nth-child(17n+1){background:#E5243B}.cx-az button:nth-child(17n+2){background:#DDA63A}.cx-az button:nth-child(17n+3){background:#4C9F38}.cx-az button:nth-child(17n+4){background:#C5192D}.cx-az button:nth-child(17n+5){background:#FF3A21}.cx-az button:nth-child(17n+6){background:#26BDE2}.cx-az button:nth-child(17n+7){background:#FCC30B;color:#0a2c61}.cx-az button:nth-child(17n+8){background:#A21942}.cx-az button:nth-child(17n+9){background:#FD6925}.cx-az button:nth-child(17n+10){background:#DD1367}.cx-az button:nth-child(17n+11){background:#FD9D24}.cx-az button:nth-child(17n+12){background:#BF8B2E}.cx-az button:nth-child(17n+13){background:#3F7E44}.cx-az button:nth-child(17n+14){background:#0A97D9}.cx-az button:nth-child(17n+15){background:#56C02B}.cx-az button:nth-child(17n+16){background:#00689D}.cx-az button:nth-child(17n+17){background:#19486A}
.cx-az button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-3px);color:#fff}
.cx-az button:nth-child(17n+7):hover:not(:disabled){color:#0a2c61}
.cx-az button{transition:transform .15s,filter .15s}
.cx-az button.on{background:#fff!important;color:var(--navy)!important;transform:translateY(-3px)}
.cx-az button:disabled{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.3)!important}
.cx-drop{left:50%;transform:translateX(-50%);top:calc(100% + 8px);border-top:6px solid #FCC30B}
.cx-main{margin-top:40px;background:transparent;grid-template-columns:1fr 360px;gap:0}
.cx-left{background:#fff;color:var(--navy);padding:36px 32px 28px}
.cx-region{color:#009edb}
.cx-map path{fill:#009edb}
.cx-stats{grid-template-rows:1fr 1fr}
.cx-stat{padding:30px 32px}
.cx-stat.navy{background:#009edb}
.cx-stat.blue{background:#4C9F38}
.cx-h3{color:#fff;text-align:center;margin:72px 0 28px}
.cx-goals{gap:24px 16px;grid-template-columns:repeat(9,1fr)}
.cx-g{flex-direction:column;align-items:stretch;gap:0}
.cx-g img{width:100%;flex:none}
.cx-g .tr{width:auto;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;font:800 20px/1 var(--font-body)}
.cx-g .tr::after{content:attr(data-l);font:700 9.5px/1.1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:#0a2c61}
.cx-legend{justify-content:center;margin-top:44px;color:#fff}
.cx-legend span{color:#fff}
@media(max-width:1000px){.cx-main{grid-template-columns:1fr}.cx-stats{grid-template-columns:1fr 1fr;grid-template-rows:none}.cx-goals{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.cx-section{padding:96px 16px 100px}.cx-goals{grid-template-columns:repeat(3,1fr)}.cx-stats{grid-template-columns:1fr}.cx-az{gap:4px}.cx-az button{width:11.5vw;max-width:46px}.cx-g .tr::after{font-size:8.5px}}
@media(min-width:1100px){.cx-az{display:grid;grid-template-columns:repeat(26,1fr);gap:5px}.cx-az button{width:100%}}
/* country panel: more compact */
.cx-main{grid-template-columns:1fr 280px;margin-top:32px}
.cx-left{padding:24px 24px 18px}
.cx-name{font-size:clamp(24px,2.6vw,34px)}
.cx-region{margin:4px 0 4px;font-size:14px}
.cx-map{max-width:380px}
.cx-stat{padding:20px 24px;min-height:0}
.cx-stat b{font-size:clamp(44px,4.6vw,68px)}
.cx-stat span{margin-top:8px;font-size:12px}
@media(max-width:1000px){.cx-main{grid-template-columns:1fr}.cx-map{max-width:340px}}
/* country section on white */
.cx-section{background:#fff;color:#080a07}
.cx-section .h2,.cx-h3,.cx-legend,.cx-legend span{color:#080a07}
.cx-az button.on{background:var(--navy)!important;color:#fff!important}
.cx-az button:disabled{background:#eef0f3!important;color:#c3c9d0!important}
.cx-left{background:#f3f5f7}
.cx-g .tr{background:#f3f5f7}
.cx-drop{box-shadow:0 18px 40px rgba(10,44,97,.22),0 0 0 1px #e6e9ee}
/* dashboard: smaller tiles, arrow only (no label text) */
.cx-goals{max-width:880px;margin:0 auto;grid-template-columns:repeat(9,1fr);gap:16px 12px}
.cx-g .tr{height:30px;font-size:19px}
.cx-g .tr::after{display:none}
.cx-legend{max-width:880px;margin-left:auto;margin-right:auto}
@media(max-width:1000px){.cx-goals{max-width:560px;grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.cx-goals{grid-template-columns:repeat(4,1fr)}}
/* all 17 goal tiles on one line */
.cx-goals{max-width:1280px;grid-template-columns:repeat(17,minmax(0,1fr));gap:0 8px}
.cx-g .tr{height:26px;font-size:16px}
.cx-legend{max-width:1280px}
@media(max-width:1000px){.cx-goals{max-width:none;overflow-x:auto;grid-template-columns:repeat(17,64px);padding-bottom:8px;-webkit-overflow-scrolling:touch}}
/* A-Z picker: simple white buttons */
.cx-az button,.cx-az button:nth-child(n){background:#fff!important;color:#080a07!important;box-shadow:inset 0 0 0 1px #d6dbe1;filter:none;transform:none}
.cx-az button:hover:not(:disabled){background:#eaf5fb!important;color:var(--blue)!important;box-shadow:inset 0 0 0 1px var(--blue);transform:none;filter:none}
.cx-az button.on{background:var(--navy)!important;color:#fff!important;box-shadow:none;transform:none}
.cx-az button:disabled{background:#fff!important;color:#c9ced4!important;box-shadow:inset 0 0 0 1px #eceff2}
.cx-left{background:#fff}

/* targets carousel: single line */
.targets .t-wrap{margin:0 -32px;overflow:hidden;padding:12px 0 18px}
.t-grid{display:flex;flex-wrap:nowrap;gap:0;max-width:none;width:max-content;margin:0}
.t-grid .t-card{flex:0 0 260px;width:260px;margin-right:16px}
.t-grid.run{will-change:transform}
.t-wrap{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.t-wrap.grab{cursor:grabbing}
.t-wrap img{-webkit-user-drag:none}
@keyframes tmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.targets{overflow:hidden}.t-grid{overflow-x:auto;width:auto;max-width:100%;padding-bottom:12px}}
@media(max-width:640px){.t-grid .t-card{flex-basis:220px;width:220px}.targets .t-wrap{margin:0 -20px}}
/* contribute cards: one line (scrolls sideways if there are too many to fit) */
.todo-wrap{flex-wrap:nowrap;gap:16px;justify-content:safe center;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.todo{flex:1 1 190px;min-width:190px;max-width:251px;width:auto}
.todo img{width:min(194px,80%);height:auto;aspect-ratio:194/191}

/* ---- map section: the Framer SDG Kiosk layout (centred column: map 64%, prompt, 17 goals in one row at 72%, legend row) ---- */
.map-section{padding:96px 16px 100px;background:#fff}
.map-section .h2{max-width:none;margin:0 0 24px;text-align:center}
.kiosk{display:flex;flex-direction:column;align-items:center;max-width:1156px;margin:0 auto;gap:0}
.kiosk .mapwrap{grid-column:auto;grid-row:auto;align-self:auto;justify-self:auto;width:64%;margin:0;padding:0;border:0;background:transparent}
.kiosk .prompt{grid-column:auto;grid-row:auto;margin:1cqw 0;text-align:center;font:600 clamp(14px,1.6cqw,30px) var(--font-body);letter-spacing:-.02em;text-transform:none;color:var(--blue)}
.kiosk .goalrow{grid-column:auto;grid-row:auto;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:.4cqw;width:72%}
.kiosk .goalrow button{border-radius:6px;outline:0}
.kiosk .goalrow button.active{outline:3px solid #111;outline-offset:0;box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translateY(-4px) scale(1.08);z-index:2}
.kiosk .legend{grid-column:auto;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6cqw 1.6cqw;margin-top:1.4cqw;padding-top:0;border-top:0}
.kiosk .legend span{font:400 clamp(11px,1.05cqw,18px) var(--font-body);color:#555}
.kiosk .legend i{width:clamp(8px,.9cqw,16px);height:clamp(8px,.9cqw,16px);border-radius:50%}
.kiosk .info{left:0;bottom:0;border-radius:14px;background:rgba(20,20,20,.92);padding:.9cqw 1.4cqw;max-width:80%;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.kiosk .info .c{font:700 clamp(16px,1.8cqw,32px) var(--font-body);text-transform:none;letter-spacing:0}
@media(max-width:900px){.map-section{padding:72px 12px 80px}.kiosk{max-width:none}.kiosk .mapwrap{width:100%}.kiosk .goalrow{width:100%}.kiosk .prompt{font-size:15px;margin:14px 0}.kiosk .legend span{font-size:12px}}
/* goal boxes: flat square tiles, a bit bigger */
.kiosk .goalrow{width:90%;gap:.3cqw}
.kiosk .goalrow button{border-radius:0;box-shadow:none}
.kiosk .goalrow button.active{box-shadow:none;transform:none;outline:3px solid #111;outline-offset:-3px}
.kiosk .info{border-radius:0;box-shadow:none}
@media(max-width:900px){.kiosk .goalrow{width:100%}}
/* goal row full width; map keeps its size */
.kiosk{max-width:1280px}
.kiosk .mapwrap{width:58%}
.kiosk .goalrow{width:100%;gap:.35cqw}
@media(max-width:900px){.kiosk .mapwrap{width:100%}}
.kiosk .goalrow{gap:0}
/* country dashboard tiles: no gaps */
.cx-goals{gap:0}
@media(max-width:1000px){.cx-goals{gap:0}}
/* country score and rank: no box, text in the box colour */
.cx-stat.navy,.cx-stat.blue{background:transparent}
.cx-stat.navy{color:#009edb}
.cx-stat.blue{color:#4C9F38}
.cx-stat span{opacity:1}

/* tile pattern strips (squares and goal tiles) on the top and bottom edge of the map and country sections */
.map-section,.cx-section{--sq:clamp(44px,6.6vw,96px);position:relative;overflow:hidden}
.map-section{padding-top:calc(2 * var(--sq) + 64px);padding-bottom:calc(2 * var(--sq) + 64px)}
.cx-section{padding-top:calc(2 * var(--sq) + 64px);padding-bottom:calc(2 * var(--sq) + 64px)}
.map-section .h2,.map-section .kiosk,.cx-section .h2,.cx-section .cx{position:relative;z-index:2}
.mo{position:absolute;left:0;right:0;height:calc(2 * var(--sq));display:grid;grid-template-columns:repeat(auto-fill,var(--sq));grid-auto-rows:var(--sq);justify-content:center;overflow:hidden;pointer-events:none;z-index:1}
.mo.top{top:0}.mo.bottom{bottom:0}
.mo b,.mo i,.mo img{display:block;width:var(--sq);height:var(--sq);object-fit:cover}
.cx-d{display:none}
/* pattern strips run edge to edge: columns stretch to fill the width, tiles stay square, two rows only */
.mo{height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sq),1fr));grid-template-rows:repeat(2,auto);grid-auto-rows:0;justify-content:stretch;overflow:hidden}
.mo b,.mo i,.mo img{width:100%;height:auto;aspect-ratio:1/1}

/* goal tiles inside the background patterns are links to their goal page */
.mo-g{display:block;pointer-events:auto;overflow:hidden;transition:transform .2s ease,filter .2s ease}
.mo-g img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.mo-g:hover,.mo-g:focus-visible{transform:scale(1.06);filter:brightness(1.08);position:relative;z-index:3}
.ws-g{display:block;overflow:visible}
.ws-g img{display:block;width:100%;height:100%;object-fit:cover}
.ws-g:hover,.ws-g:focus-visible{filter:brightness(1.08);transform:scale(1.04);z-index:3}

/* related goals: flat square cards, goal-colour label bar */
.related .h3{color:var(--navy);text-transform:uppercase;font-weight:800;letter-spacing:-.02em}
.related .divider{height:6px;width:96px;background:var(--blue)}
.related .grid{gap:0}
.related .goal-card{border-radius:0;box-shadow:none;background:var(--c);transition:transform .25s ease,filter .25s ease}
.related .goal-card:hover{transform:none;box-shadow:none;filter:brightness(1.08)}
.related .goal-card .img{transition:transform .5s ease}
.related .goal-card{position:relative}
.related .goal-card .img{overflow:hidden}
.related .goal-card:hover .img{transform:scale(1.04)}
.related .goal-card .t{background:var(--c);color:#fff;padding:14px 18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:18px;position:relative;z-index:1}
.related .goal-card .t i{width:auto;height:auto;border-radius:0;background:none;font-style:normal;font-size:22px;line-height:1}
.related .goal-card .t i::before{content:"\2192"}
.related .grid{gap:20px}

/* goals index: same flat goal-colour cards as "explore other goals" */
.goal-grid{gap:20px}
.goal-grid .goal-card{border-radius:0;box-shadow:none;background:var(--c);position:relative;transition:filter .25s ease}
.goal-grid .goal-card:hover{transform:none;box-shadow:none;filter:brightness(1.08)}
.goal-grid .goal-card .img{overflow:hidden;transition:transform .5s ease}
.goal-grid .goal-card:hover .img{transform:scale(1.04)}
.goal-grid .goal-card .t{background:var(--c);color:#fff;padding:14px 18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:18px;position:relative;z-index:1}
.goal-grid .goal-card .t i{width:auto;height:auto;border-radius:0;background:none;font-style:normal;font-size:22px;line-height:1}
.goal-grid .goal-card .t i::before{content:"\2192"}

.ws .ws-title{font-family:var(--font-head);font-weight:800;line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;color:var(--navy);text-align:center}
@media(min-width:701px){.ws .ws-title{position:absolute;left:267px;top:1098px;width:1200px;white-space:nowrap;margin:0;font-size:calc(clamp(30px,4.4vw,53px) / var(--s,.6));line-height:1.1}}

/* quiz: flat white and navy, square, goal-colour choices */
.quiz{border-radius:0;box-shadow:none;background:#fff;border:0;font-family:var(--font-head)}
.quiz .qhead{background:var(--navy);border-bottom:0;padding:18px 32px;color:#fff}
.quiz .qhead h4{font:800 18px var(--font-head);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.quiz .qhead .qcount{background:var(--blue);color:#fff;padding:6px 14px;font:800 14px var(--font-head)!important;text-transform:uppercase;letter-spacing:.04em}
.quiz .stage{padding:0}
.quiz .card{width:100%;max-width:none;min-height:480px;border-radius:0;box-shadow:none;background:transparent;padding:48px 32px 40px}
.quiz .card h2{font:800 clamp(24px,3.4vw,40px)/1.12 var(--font-head);text-transform:uppercase;letter-spacing:-.02em;color:var(--navy)}
.quiz .choices{max-width:900px;height:220px;gap:0}
.quiz .choice{border-radius:0;box-shadow:none;font:800 clamp(18px,2.2vw,26px) var(--font-head);text-transform:uppercase;letter-spacing:.01em;transition:filter .2s ease}
.quiz .choice:hover{filter:brightness(1.08)}
.quiz .sep{border-radius:0;width:56px;height:56px;left:calc(50% - 28px);background:#fff;color:var(--navy);border:0;box-shadow:none}
.quiz .help{font:800 13px var(--font-head);color:var(--blue);letter-spacing:.14em}
.quiz .rt{border-radius:0;box-shadow:none}
.quiz .retake{border-radius:0;background:var(--navy);text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-head)}

/* goals popup grows out of the floating button, from the same corner */
.sdg-pop{right:0;bottom:0;transform-origin:100% 100%;transform:scale(.17);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.sdg-fab.open .sdg-pop{transform:scale(1)}
.sdg-fab .toggle{transition:transform .2s,opacity .2s}
.sdg-fab.open .toggle{opacity:0;pointer-events:none}
.sdg-pop .pop-x{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font:400 24px/1 var(--font-head);cursor:pointer;z-index:2}
.sdg-pop .pop-x:hover{background:rgba(255,255,255,.32)}

/* smooth grow-out from the button centre */
.sdg-pop{transform:scale(.17) rotate(-40deg);transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.sdg-fab.open .sdg-pop{transform:scale(1) rotate(0)}
.sdg-fab .toggle{transition:transform .2s,opacity .3s ease}
@media(prefers-reduced-motion:reduce){.sdg-pop{transition:opacity .2s;transform:none}.sdg-fab.open .sdg-pop{transform:none}}

.yw-note{margin:18px auto 0;max-width:640px;padding:0 20px;text-align:center;font:500 13px/1.5 var(--font-body);color:rgba(255,255,255,.72)}

/* contribute: full-width cards that stack as you scroll (each pins to the top and the next slides over it) */
.contribute{overflow-x:clip}
.todo-stack{width:100vw;margin:40px 0 0 calc(50% - 50vw);display:block}
.todo-stack .todo{position:sticky;top:0;width:100%;max-width:none;min-width:0;height:max(62vh,440px);min-height:0;flex:none;padding:0;gap:0;
  display:grid;grid-template-columns:1fr minmax(200px,34%);grid-template-rows:auto 1fr auto;grid-template-areas:"n img" "body img" "bar bar";align-items:stretch;justify-items:stretch;
  background:color-mix(in srgb,var(--goal) calc(100% - var(--i) * 7%),#000);color:#fff;overflow:hidden}
.todo-stack .todo .td-n{grid-area:n;padding:26px 32px 0;font:800 14px var(--font-head);text-transform:uppercase;letter-spacing:.16em;opacity:.85}
.todo-stack .todo img{grid-area:img;width:min(280px,72%);height:auto;aspect-ratio:1;object-fit:contain;align-self:center;justify-self:center}
.todo-stack .todo .td-body{grid-area:body;align-self:end;padding:0 32px 26px;max-width:820px}
.todo-stack .todo .td-t{margin:0;font:800 clamp(26px,3.8vw,52px)/1.04 var(--font-head);letter-spacing:-.02em;text-transform:uppercase}
.todo-stack .todo .cms p{margin:14px 0 0;font:500 clamp(15px,1.4vw,19px)/1.45 var(--font-body);text-align:left;opacity:.94}
.todo-stack .todo .cms a{color:#fff;text-decoration:underline}
.todo-stack .todo .td-bar{grid-area:bar;margin:0 16px 16px;height:56px;padding:0 24px;background:#fff;color:var(--navy);display:flex;justify-content:space-between;align-items:center;
  font:800 14px var(--font-head);text-transform:uppercase;letter-spacing:.08em;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
@media(max-width:700px){
  .todo-stack .todo{height:max(76vh,520px);grid-template-columns:1fr 112px;grid-template-areas:"n img" "body body" "bar bar";grid-template-rows:auto 1fr auto}
  .todo-stack .todo img{width:96px;align-self:start;justify-self:end;margin:18px 18px 0 0}
  .todo-stack .todo .td-body{align-self:end;padding:0 20px 20px}
  .todo-stack .todo .td-n{padding:22px 20px 0}
}

/* ---- intro / load animations ---- */
#pre{display:none;position:fixed;inset:0;z-index:100000;background:var(--blue);color:#fff;align-items:center;justify-content:center;text-align:center;transition:transform .9s cubic-bezier(.76,0,.24,1)}
html.intro #pre{display:flex}
#pre.out{transform:translateY(-100%)}
.pre-in{opacity:0;transform:translateY(14px);filter:blur(10px);transition:opacity .8s ease,transform .8s ease,filter .8s ease}
#pre.in .pre-in{opacity:1;transform:none;filter:blur(0)}
#pre.out .pre-in{opacity:0;transition-duration:.4s}
.pre-logo{font:800 clamp(34px,7vw,76px)/.98 var(--font-head);text-transform:uppercase;letter-spacing:-.03em}
.pre-tag{margin-top:22px;font:600 clamp(10px,1.2vw,13px) var(--font-head);text-transform:uppercase;letter-spacing:.38em;opacity:.85}
html.intro,html.intro body{overflow:hidden}
/* hero: held back until the intro lifts, then each line blurs in */
html.hold .fh-title span,html.hold .fh-sub1,html.hold .fh-sub2,html.hold .fh-un{opacity:0}
html.hold .fh .t{opacity:0}
html.revealed .fh-title span{animation:blurIn 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0) * .14s)}
html.revealed .fh-title span:nth-child(2){--k:1}html.revealed .fh-title span:nth-child(3){--k:2}
html.revealed .fh-sub1,html.revealed .fh-sub2,html.revealed .fh-un{animation:fadeBlur 1s ease both;animation-delay:.6s}
html.revealed .fh-sub2{animation-delay:.75s}
html.revealed .fh .t{animation:tileIn .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d,0) * 1ms + .2s)}
@keyframes blurIn{from{opacity:0;filter:blur(14px);transform:translateY(20px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes fadeBlur{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes tileIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* contribute cards: staggered blur-in when a card arrives */
.todo-stack.rv .todo>*{opacity:0;filter:blur(10px);transform:translateY(18px);transition:opacity .8s ease,filter .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.todo-stack.rv .todo.in>*{opacity:1;filter:blur(0);transform:none}
.todo-stack.rv .todo.in>.td-n{transition-delay:.05s}.todo-stack.rv .todo.in>img{transition-delay:.15s}
.todo-stack.rv .todo.in>.td-body{transition-delay:.25s}.todo-stack.rv .todo.in>.td-bar{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){#pre{display:none!important}}

/* contribute: each card fills the screen */
.todo-stack{background:var(--navy)}
.todo-stack .todo{height:100vh;height:100svh;min-height:480px;transform-origin:50% 0;scale:calc(1 - var(--p,0) * .07);filter:brightness(calc(1 - var(--p,0) * .4));will-change:scale,filter}
.todo-stack .todo .td-n{padding-top:96px}
.todo-stack .todo .td-body{padding-bottom:40px}
.todo-stack .todo img{width:min(340px,76%)}
.todo-stack .todo .td-t{font-size:clamp(30px,5vw,72px)}
@media(max-width:700px){.todo-stack .todo{height:100vh;height:100svh;min-height:520px}.todo-stack .todo .td-n{padding-top:84px}.todo-stack .todo img{width:96px}}

/* contribute, desktop: pinned slider (white text panel on the left, slides arriving from the right) */
.hs{display:none}
@media(min-width:901px){
  .contribute>.h2,.contribute>.divider,.todo-stack{display:none}
  .contribute{padding:0;max-width:none}
  .hs{display:block;position:relative;width:100%;height:calc(100vh * var(--n));height:calc(100svh * var(--n))}
  .hs-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:max(300px,28%) 1fr;background:#fff;overflow:hidden}
  .hs-left{position:relative;z-index:3;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:56px 32px 56px 32px}
  .hs-left .h2{margin:0;color:var(--navy);font-size:clamp(28px,3vw,48px);line-height:1.04}
  .hs-meta{display:flex;align-items:center;gap:16px;font:800 14px var(--font-head);letter-spacing:.14em;color:var(--navy)}
  .hs-line{flex:1;max-width:240px;height:2px;background:rgba(10,44,97,.15);position:relative;overflow:hidden}
  .hs-line b{position:absolute;inset:0;background:var(--goal);transform-origin:0 50%;transform:scaleX(0)}
  .hs-hint{margin:0;font:600 13px var(--font-head);text-transform:uppercase;letter-spacing:.2em;color:rgba(10,44,97,.55)}
  .hs-right{position:relative;overflow:hidden;background:#0a2c61}
  .hs-p{position:absolute;inset:0;z-index:calc(var(--i) + 1);background:color-mix(in srgb,var(--goal) calc(100% - var(--i) * 7%),#000);will-change:transform;box-shadow:-18px 0 40px rgba(0,0,0,.18);overflow:hidden}
  .hs-p::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--dim,0) * .45);pointer-events:none}
  .hs-ghost{position:absolute;top:22px;left:18px;font:800 clamp(28px,3vw,44px) var(--font-head);color:rgba(255,255,255,.55);letter-spacing:.04em}
  .hs-p img{position:absolute;left:50%;top:40%;width:min(46%,380px);aspect-ratio:1;object-fit:contain;transform:translate(calc(-50% + var(--d,0) * -90px),-50%) scale(1.04)}
  .hs-cap{position:absolute;left:28px;bottom:28px;width:min(520px,calc(100% - 100px));padding:26px 90px 28px 28px;background:#fff;color:var(--navy);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
  .hs-cnt{display:flex;align-items:center;gap:14px;font:700 13px var(--font-head);margin-bottom:18px}
  .hs-cnt i{width:110px;height:1px;background:var(--navy);opacity:.6}
  .hs-cap h3{margin:0;font:800 clamp(20px,2.1vw,30px)/1.08 var(--font-head);text-transform:uppercase;letter-spacing:-.01em}
  .hs-cap .cms p{margin:12px 0 0;font:500 clamp(13px,1.1vw,15px)/1.45 var(--font-body);text-align:left;color:rgba(10,44,97,.82)}
  .hs-cap .cms a{color:var(--navy);text-decoration:underline}
  .hs-arr{position:absolute;right:30px;top:50%;width:22px;height:22px;border-top:3px solid var(--navy);border-right:3px solid var(--navy);transform:translateY(-50%) rotate(45deg)}
}

/* contribute: black-and-white photo behind each action, icon in the top-right corner */
.hs-bg,.td-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08) brightness(.9)}
.td-bg{z-index:0}
.todo-stack .todo.has-photo>*:not(.td-bg){position:relative;z-index:1}
.todo-stack .todo.has-photo::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.15) 60%,rgba(0,0,0,.35))}
.todo-stack .todo.has-photo .td-bg{z-index:0}
.hs-edge{position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--goal);z-index:3}
@media(min-width:901px){
  .hs-p .hs-bg{inset:-4%;transform:translate3d(calc(var(--d,0) * -70px),0,0) scale(1.06)}
  .hs-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%),linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0) 30%)}
  .hs-p>*:not(.hs-bg):not(.hs-scrim){z-index:2}
  .hs-p img{left:auto;right:calc(28px + 3 * 64px);top:22px;width:clamp(72px,7vw,104px);transform:translate3d(calc(var(--d,0) * -30px),0,0);filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
}

/* goals popup: white edge */
.sdg-pop{background:#fff}
.sdg-pop .pop-x{background:rgba(10,44,97,.1);color:var(--navy)}
.sdg-pop .pop-x:hover{background:rgba(10,44,97,.2)}
.sdg-pop{padding:4px}

/* photos stay black and white (the blur-in reveal must not override their filter) */
.todo-stack.rv .todo>.td-bg,.todo-stack.rv .todo.in>.td-bg{filter:grayscale(1) contrast(1.08) brightness(.9);opacity:1;transform:none;transition:none}

.td-credit{display:block;margin-top:10px;font:500 10px/1.3 var(--font-body);opacity:.7}
@media(min-width:901px){
  .hs-cap{bottom:48px}
  .hs-credit{position:absolute;left:28px;bottom:16px;max-width:calc(100% - 140px);font:500 10px/1.3 var(--font-body);color:rgba(255,255,255,.8);text-shadow:0 1px 4px rgba(0,0,0,.6);z-index:2}
}

#wipe.instant i{transition:none!important}

/* metrics: "In Numbers" layout - huge headline, then rows of text beside a giant photo-filled number */
.metrics{display:block;min-height:0;padding:clamp(72px,9vw,140px) clamp(20px,3vw,40px) clamp(72px,8vw,120px);background:#fff}
.mx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;max-width:1360px;margin:0 auto}
.mx-title{margin:0;font:800 clamp(52px,10vw,150px)/.9 var(--font-head);letter-spacing:-.05em;color:#000;text-transform:none}
.mx-side{max-width:360px;padding-top:clamp(8px,2vw,28px)}
.mx-side p{margin:0 0 28px;font:500 15px/1.6 var(--font-body);color:rgba(8,10,7,.62)}
.mx-link,.mx-btn{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.mx-link{font:500 clamp(18px,1.8vw,24px) var(--font-head);color:#000;letter-spacing:-.02em}
.mx-link i,.mx-btn i{width:14px;height:14px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .25s ease;margin-left:2px}
.mx-link:hover i,.mx-btn:hover i{transform:translateX(5px) rotate(45deg)}
.mx-list{max-width:1360px;margin:clamp(40px,8vw,120px) auto 0;display:flex;flex-direction:column;gap:clamp(56px,9vw,140px)}
.mx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px}
.mx-txt h3{margin:0 0 20px;font:600 clamp(28px,3.4vw,46px)/1.05 var(--font-head);letter-spacing:-.03em;color:#000}
.mx-txt p{margin:0 0 30px;max-width:460px;font:500 15px/1.65 var(--font-body);color:rgba(8,10,7,.66)}
.mx-btn{background:#000;color:#fff;padding:14px 22px;border-radius:999px;font:500 16px var(--font-head)}
.mx-btn:hover{background:var(--navy)}
.mx-big{justify-self:end;font:800 clamp(150px,26vw,380px)/.82 var(--font-head);letter-spacing:-.07em;white-space:nowrap;
  background-image:linear-gradient(color-mix(in srgb,var(--goal,#009edb) 38%,transparent),color-mix(in srgb,var(--goal,#009edb) 38%,transparent)),var(--ph,linear-gradient(var(--goal,#009edb),var(--goal,#009edb)));
  background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.06em .02em}
.mx-big span{display:inline-block}
@media(max-width:800px){
  .mx-head{flex-direction:column;gap:28px}
  .mx-row{grid-template-columns:1fr;gap:20px}
  .mx-big{justify-self:start;order:-1;font-size:clamp(130px,42vw,260px)}
}

/* events popup */
.ev-modal{position:fixed;inset:0;z-index:99990;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,44,97,.62)}
.ev-modal.on{display:flex}
html.ev-open{overflow:hidden}
.ev-panel{width:min(720px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;background:#fff;color:var(--navy);box-shadow:0 30px 80px rgba(0,0,0,.35);animation:evIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes evIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ev-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 28px;background:var(--goal,var(--blue));color:#fff}
.ev-head span{font:800 12px var(--font-head);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.ev-head h3{margin:6px 0 0;font:800 clamp(22px,3vw,32px)/1.05 var(--font-head);text-transform:uppercase;letter-spacing:-.02em}
.ev-x{width:40px;height:40px;border:0;background:rgba(255,255,255,.2);color:#fff;font:400 26px/1 var(--font-head);cursor:pointer;flex:none}
.ev-x:hover{background:rgba(255,255,255,.34)}
.ev-list{overflow:auto;padding:8px 28px}
.ev-item{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid rgba(10,44,97,.12);color:inherit;text-decoration:none}
.ev-item:last-child{border-bottom:0}
.ev-date{flex:none;width:76px;padding:10px 0;text-align:center;background:var(--goal,var(--blue));color:#fff}
.ev-date b{display:block;font:800 28px/1 var(--font-head)}
.ev-date i{display:block;margin-top:4px;font:700 11px var(--font-head);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.ev-body{flex:1;min-width:0}
.ev-body strong{display:block;font:700 17px/1.25 var(--font-head)}
.ev-body small{display:block;margin-top:6px;font:500 13px var(--font-body);color:rgba(10,44,97,.6)}
.ev-go{flex:none;width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.ev-item:hover .ev-go{transform:translateX(4px) rotate(45deg)}
.ev-item:hover strong{text-decoration:underline}
.ev-empty{padding:28px 0;color:rgba(10,44,97,.6);font:500 15px var(--font-body)}
.ev-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 28px;border-top:1px solid rgba(10,44,97,.12)}
.ev-foot a{font:800 13px var(--font-head);text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
@media(max-width:560px){.ev-item{gap:14px}.ev-date{width:62px}.ev-list{padding:4px 18px}.ev-head,.ev-foot{padding-left:18px;padding-right:18px}}

.ev-cover{flex:none;width:76px;height:96px;background:#e8edf5 center/cover no-repeat;border:1px solid rgba(10,44,97,.12)}

/* metrics, 4 columns: photo-filled numbers on top, black bars between columns, text and pill button below */
.mx-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(40px,7vw,100px);--nh:clamp(84px,11vw,168px)}
.mx-row{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 clamp(14px,2vw,32px)}
.mx-row+.mx-row::before{content:"";position:absolute;left:0;top:calc(var(--nh) * .12);width:clamp(6px,.8vw,10px);height:calc(var(--nh) * 1.5);background:#000}
.mx-big{order:-1;justify-self:auto;align-self:center;text-align:center;font:800 var(--nh)/.86 var(--font-head);letter-spacing:-.06em;height:calc(var(--nh) * 1.8);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(18px,3vw,48px);padding:0}
.mx-txt{display:flex;flex-direction:column;align-items:flex-start}
.mx-txt h3{font-size:clamp(20px,2.3vw,32px);margin-bottom:14px}
.mx-txt p{font-size:13px;line-height:1.6;margin-bottom:22px;max-width:none}
.mx-btn{padding:11px 18px;font-size:14px}
@media(max-width:900px){
  .mx-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px;--nh:clamp(90px,20vw,150px)}
  .mx-row:nth-child(3)::before{display:none}
}
@media(max-width:520px){
  .mx-list{grid-template-columns:1fr;row-gap:48px;--nh:clamp(100px,34vw,150px)}
  .mx-row+.mx-row::before{display:none}
  .mx-row{padding:0}
  .mx-big{justify-content:flex-start}
}

.mx-row{container-type:inline-size}
.mx-big{font-size:min(var(--nh),calc(100cqw / (var(--ch,3) * .6)))}
.mx-big{font-size:min(var(--nh),calc(100cqw / 3))}
.mx-row+.mx-row::before{width:2px;height:calc(var(--nh) * .9);top:calc(var(--nh) * .45)}
.mx-row+.mx-row::before{height:calc(var(--nh) * .45);top:calc(var(--nh) * .675)}
.mx-row+.mx-row::before{width:clamp(5px,.6vw,8px)}
.mx-list{--nh:clamp(90px,14vw,210px)}
.mx-row{padding:0 clamp(10px,1.4vw,22px)}
.mx-big{font-size:min(var(--nh),calc(100cqw / 2.62))}
@media(max-width:900px){.mx-list{--nh:clamp(100px,24vw,180px)}}
@media(max-width:520px){.mx-list{--nh:clamp(110px,40vw,170px)}}
.mx-big{height:calc(var(--nh) * 1.5);align-items:flex-start;padding-top:calc(var(--nh) * .5);margin-bottom:clamp(6px,1vw,14px)}
.mx-list{margin-top:clamp(0px,1vw,12px)}
.mx-big{padding-top:calc(var(--nh) * .22);height:calc(var(--nh) * 1.2)}
.mx-row+.mx-row::before{top:calc(var(--nh) * .4)}

/* header: goal tile on the right; numbers and divider bars share one height */
.mx-head{align-items:flex-start}
.mx-tile{flex:none;width:clamp(110px,19vw,268px);height:auto;aspect-ratio:1;object-fit:cover;display:block;margin-top:clamp(0px,.6vw,8px)}
.mx-list{--fs:min(var(--nh),calc(100cqw / 2.62))}
.mx-row{--fs:min(var(--nh),calc(100cqw / 2.62))}
.mx-big{font-size:var(--fs);line-height:.86;height:calc(var(--fs) * .86);padding:0;align-items:center;margin-bottom:clamp(22px,3vw,44px)}
.mx-row+.mx-row::before{top:0;height:calc(var(--fs) * .86)}
@media(max-width:520px){.mx-tile{width:96px}}
.mx-list{margin-top:clamp(36px,6vw,90px)}

/* smoother wipe: slower, softer easing, curved leading edge that flattens as it reaches the top */
#wipe i{transform:translate3d(0,calc(100% + 14vh),0);border-top-left-radius:50% 14vh;border-top-right-radius:50% 14vh;backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.77,0,.18,1),border-radius .85s cubic-bezier(.77,0,.18,1)}
#wipe.go i{transform:translate3d(0,0,0);border-top-left-radius:0;border-top-right-radius:0}
.wipe-in #wipe i{transform:none;border-radius:0;transition:none}

/* three layers: light, mid, then the full goal colour, each following the one before */
#wipe i:nth-child(1){background:color-mix(in srgb,var(--wipe,#009edb) 38%,#fff)}
#wipe i:nth-child(2){background:color-mix(in srgb,var(--wipe,#009edb) 68%,#fff);transition-delay:.1s,.1s}
#wipe i:nth-child(3){background:var(--wipe,#009edb);transition-delay:.2s,.2s}
.wipe-in #wipe i,#wipe.instant i{transition:none!important}

/* ---- live news: two light panels, text on the left and a masonry of photo tiles on the right ---- */
.news-band{background:var(--navy);padding:24px 0}
.news-band>.container{max-width:none;padding:0 24px}
.news{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;--g:12px}
.news-left,.news-right{background:#f5f5f5;padding:24px;color:#080a07;min-width:0}
.news-left{display:flex;flex-direction:column;min-height:640px}
.news-top,.news-label{display:flex;justify-content:space-between;font:500 14px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.02em}
.news .news-left h2{margin:auto 0 24px;color:#080a07;font:500 clamp(48px,6.4vw,92px)/.95 var(--font-head);letter-spacing:-.04em;text-transform:uppercase}
.news-sub{margin:0 0 28px;max-width:340px;font:500 15px/1.5 var(--font-body);text-transform:uppercase}
.news .news-arrows{gap:0}
.news .news-arrows button,.news .news-arrows button+button{background:var(--navy);color:#fff}
.news-label{margin-bottom:14px;font:500 32px/1 var(--font-head);text-transform:uppercase;letter-spacing:-.02em}
.news .news-loading,.news .news-msg{color:#080a07;background:none;padding:0}
.news .news-view{overflow:hidden}
.news .news-track{gap:0}
.news-page{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,1fr);gap:12px;height:560px}
.news-page .news-card:nth-child(1){grid-column:1;grid-row:1/3}
.news-page .news-card:nth-child(2){grid-column:1;grid-row:3/7}
.news-page .news-card:nth-child(3){grid-column:2;grid-row:1/5}
.news-page .news-card:nth-child(4){grid-column:2;grid-row:5/7}
.news .news-card{position:relative;flex:none;min-height:0;overflow:hidden;background:#cfd3d8;color:#fff;box-shadow:none}
.news .news-card:hover{transform:none;box-shadow:none}
.news .news-card img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:transform .5s ease}
.news .news-card:hover img{transform:scale(1.04)}
.news .news-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,7,.82),rgba(8,10,7,0) 62%)}
.news .news-card .cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px;display:flex;flex-direction:column;gap:6px}
.news .news-card .cap .gt{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:auto;padding:4px 8px;font:700 10px/1.1 var(--font-body);text-transform:uppercase;letter-spacing:.03em}
.news .news-card .cap .gt b{font:800 16px/1 var(--font-body)}
.news .news-card .cap .m{margin:0;opacity:.85;color:#fff;font:600 11px var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.news .news-card .cap h3{margin:0;color:#fff;font:600 clamp(15px,1.5vw,20px)/1.2 var(--font-head);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.news .news-card.has-tile .gt{display:inline-flex}
@media(max-width:899px){.news{grid-template-columns:1fr}.news-left{min-height:0}.news .news-left h2{margin:48px 0 16px}.news-page{height:520px}}
@media(max-width:599px){.news-band>.container{padding:0 12px}.news-left,.news-right{padding:16px}.news-page{height:460px;gap:8px}}
/* news: use the full page width with a slim gutter */
.news-band{padding:12px 0}
.news-band>.container{padding:0 12px}
.news{max-width:none;margin:0}
/* news: more compact title panel */
.news-left,.news-right{padding:20px}
.news .news-left h2{font-size:clamp(36px,4.6vw,68px)}
.news-sub{font-size:13px;margin-bottom:20px}
.news .news-arrows button{width:44px;height:44px;font-size:18px}
@media(max-width:899px){.news .news-left h2{margin:20px 0 12px;font-size:clamp(32px,7vw,48px)}.news-sub{margin-bottom:16px}}
/* news: title panel at half its previous width */
.news{grid-template-columns:minmax(0,2.5fr) minmax(0,7fr)}
.news .news-left h2{font-size:clamp(28px,3.2vw,48px)}
@media(max-width:899px){.news{grid-template-columns:1fr}.news-left{width:50%;min-width:260px}.news .news-left h2{font-size:clamp(26px,5vw,36px)}}
@media(max-width:599px){.news-left{width:100%}}
/* goal pages: no goal tag on news tiles (the whole page is already about one goal); kept on the home page */
section.news#news .news-card .gt{display:none!important}
/* goal pages: title panel in the goal's brand colour */
section.news#news .news-left{background:var(--goal);color:#fff}
section.news#news .news-left h2,section.news#news .news-left .news-sub{color:#fff}
section.news#news .news-arrows button,section.news#news .news-arrows button+button{background:rgba(8,10,7,.28)}
section.news#news .news-arrows button:disabled{background:rgba(255,255,255,.22);opacity:1}
/* goal pages: official goal tile above the news title */
.news-logo{display:block;width:72px;height:72px;margin:28px 0 0;object-fit:cover}
.news-logo+h2{margin-top:16px!important}
/* news: drag to change page */
.news .news-view{cursor:grab;user-select:none;-webkit-user-select:none}
.news .news-view.dragging{cursor:grabbing}
.news .news-card img{-webkit-user-drag:none;pointer-events:none}
.news-logo{width:128px;height:128px}
.news-logo.sdg{width:auto;height:128px;object-fit:contain}
section.news#livenews .news-left{background:#fff}
.news-logo.sdg{align-self:flex-start;width:auto;margin-left:-16px}
/* news title panel: logo, title, text and arrows sit at the bottom of the panel */
.news .news-left .news-logo{margin-top:auto}
.news .news-left .news-logo+h2{margin-top:16px!important}
@media(max-width:899px){.news-left{min-height:480px}}
/* contribute slider: title panel in the goal's brand colour */
.hs-left{background:var(--goal)}
.hs-left .h2,.hs-meta{color:#fff}
.hs-line{background:rgba(255,255,255,.3)}
.hs-line b{background:#fff}
.hs-hint{color:rgba(255,255,255,.8)}
/* goal pages: title panel on the right, content right-aligned */
section.news#news{grid-template-columns:minmax(0,7fr) minmax(0,2.5fr)}
section.news#news .news-left{order:2;align-items:flex-end;text-align:right}
section.news#news .news-left .news-top{align-self:stretch}
section.news#news .news-left .news-sub{margin-left:auto}
section.news#news .news-left .news-logo{align-self:flex-end}
@media(max-width:899px){section.news#news{grid-template-columns:1fr}section.news#news .news-left{margin-left:auto}}
/* goal numbers buttons: flat square, goal colour, uppercase, arrow in a darker square */
.mx-btn{background:var(--goal,var(--navy));color:#fff;border-radius:0;padding:0 0 0 20px;gap:20px;height:48px;font:800 13px var(--font-head);letter-spacing:.06em;text-transform:uppercase;transition:filter .2s}
.mx-btn:hover{background:var(--goal,var(--navy));filter:brightness(1.1)}
.mx-btn i{width:48px;height:48px;margin:0;border:0;transform:none;background:rgba(8,10,7,.28);display:flex;align-items:center;justify-content:center;flex:none}
.mx-btn i::before{content:"";width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);margin-left:-3px;transition:transform .25s ease}
.mx-btn:hover i{transform:none}
.mx-btn:hover i::before{transform:translateX(4px) rotate(45deg)}
/* numbers buttons share one baseline: each column fills the row and its button sits at the bottom */
.mx-txt{flex:1 1 auto}
.mx-txt .mx-btn{margin-top:auto}
/* numbers header: the goal's pictogram alone, in the brand colour */
.mx-tile.icon{width:auto;max-width:clamp(120px,22vw,300px);height:clamp(90px,12vw,170px);aspect-ratio:auto;object-fit:contain;object-position:left center}
.mx-head{flex-direction:column;justify-content:flex-start;gap:28px}
.mx-tile.icon{margin-top:0}
/* numbers header: icon back on the right of the title (stacked on narrow screens) */
.mx-head{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:40px}
.mx-tile.icon{object-position:right center}
@media(max-width:700px){.mx-head{flex-direction:column;gap:28px}.mx-tile.icon{object-position:left center}}
/* goal pages: just the goal pictogram, in white, above the news title */
.news-logo.pict{width:auto;max-width:100%;height:112px;object-fit:contain;object-position:right center;filter:brightness(0) invert(1)}
.news-logo.pict{height:64px;max-width:120px}