:root{
  /* ---------------------------------------------------------------
     COP17 palette.  PRIMARY (structure / surfaces): Sage, Pickle,
     Monetary-policy teal.  SECONDARY (accents / highlights): Lime,
     Chartreuse, Olive.
     --------------------------------------------------------------- */
  --lime:#AEF35A;        /* rgb(174 243 90)  secondary */
  --chartreuse:#D0D767;  /* rgb(208 215 103) secondary */
  --olive:#98BF64;       /* rgb(152 191 100) secondary */
  --sage:#728C69;        /* rgb(114 140 105) primary   */
  --pickle:#597D35;      /* rgb(89 125 53)   primary   */
  --teal:#256166;        /* rgb(37 97 102)   primary — monetary-policy colour */

  /* surfaces: the monetary-policy teal, stepped down for a dark page */
  --ink:#0D2427; --ink-2:#143538; --ink-3:#1B454A;

  /* semantic roles (these are what the components actually use) */
  --green:var(--pickle);      /* deep fills, gradients      */
  --green-lt:var(--olive);    /* interactive accent, borders */
  --green-gl:var(--lime);     /* bright accent, eyebrow text */
  --gold:var(--chartreuse);   /* warm highlight              */
  --paper:#F8F6F0;

  /* chart marks — derived from the brand hues and validated on --ink-2:
     one hue carries magnitude, the teal carries the sector comparison.
     Ramps are single-hue light->dark and ordered by size.            */
  --s1:#009AD0;   /* total green loans, when no category is chosen */
  --s2:#C7D2CB;   /* banking-sector benchmark line (achromatic on purpose) */

  /* Taxonomy category colours — one fixed hue per category, in the order the
     official 2026Q2 dashboard uses them, so a category is the same colour in
     every chart on the page. Snapped from the published values into the dark
     lightness band; validated on --ink-2 (adjacent CVD dE 11.1, normal 16.1,
     contrast >= 3:1 for all eight). Never reorder these: the order is what
     keeps neighbouring bars distinguishable. */
  --c1:#BC8C29;   /* 1 Renewable energy          (published #FDCB6E) */
  --c2:#7366ED;   /* 2 Lower-emission energy     (published #6C5CE7) */
  --c3:#EB6646;   /* 3 Energy efficiency         (published #FF7655) */
  --c4:#11AAAB;   /* 4 Green buildings           (published #00CEC9) */
  --c5:#E96469;   /* 5 Pollution prevention      (published #FF7675) */
  --c6:#6097E0;   /* 6 Sustainable water         (published #74B9FF) */
  --c7:#00AF85;   /* 7 Sustainable agriculture   (published #00B894) */
  --c8:#0083AB;   /* 8 Low-carbon transport      (published #636E72) */
  /* Funding sources — three separate entities, so three hues rather than a
     ramp. Validated all-pairs (any two slices can touch in a donut):
     CVD dE 10.6, normal 17.9, contrast >= 3:1. */
  --f1:#6097E0;   /* international funding */
  --f2:#00AF85;   /* banks' own funding    */
  --f3:#BC8C29;   /* government funding    */

  /* Economic zones — four named regions, so four hues, not a ramp: the colour
     says WHICH zone, the bar length says how much. Validated all-pairs (aimags
     are sorted by size, so any two zones can end up side by side):
     CVD dE 12.2, normal 19.2, contrast >= 3:1.  Order = ZONES in panel-data.js
     (Central, Khangai, Western, Eastern). The four hues sit ~108 deg apart,
     which is why they separate better than any set drawn from --c1..--c8. */
  --r1:#B35E7A;   /* Төвийн бүс  · Central  */
  --r2:#1BB02D;   /* Хангайн бүс · Khangai  */
  --r3:#33A2CD;   /* Баруун бүс  · Western  */
  --r4:#9A57F0;   /* Зүүн бүс    · Eastern  */

  --d1:#79BB19; --d2:#639C08; --d3:#4E7F00;                 /* old donut ramp (unused) */

  --tx:#F8F6F0; --tx-2:rgba(248,246,240,.74); --tx-3:rgba(248,246,240,.52);
  --line:rgba(174,243,90,.16); --line-2:rgba(248,246,240,.12);
  --max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--ink);color:var(--tx);font-family:I,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:I;cursor:pointer}
header,main,footer{position:relative;z-index:2}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
h1,h2,h3,h4,.dsp{font-family:M,sans-serif;letter-spacing:-.02em}
.eyebrow{font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--green-gl)}
.lede{color:var(--tx-2);line-height:1.68}
.chip{display:inline-flex;align-items:center;gap:.6em;border:1px solid rgba(174,243,90,.38);border-radius:999px;
 padding:9px 18px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--green-gl)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green-lt);box-shadow:0 0 0 4px rgba(152,191,100,.18)}
.btn{display:inline-flex;align-items:center;gap:.6em;border-radius:999px;padding:15px 30px;font-weight:600;
 font-size:15px;transition:.22s ease;border:1px solid transparent}
.btn-p{background:var(--green-lt);color:#0D2427}
.btn-p:hover{background:var(--green-gl);transform:translateY(-2px)}
.btn-s{border-color:rgba(248,246,240,.28);color:var(--tx)}
.btn-s:hover{border-color:var(--green-lt);color:var(--green-gl);background:rgba(152,191,100,.07)}

.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg .g{position:absolute;inset:0;background:
 radial-gradient(90% 60% at 8% -6%,rgba(152,191,100,.22),rgba(152,191,100,0) 55%),
 radial-gradient(80% 60% at 100% 6%,rgba(89,125,53,.28),rgba(89,125,53,0) 60%),
 linear-gradient(170deg,#0D2427 0%,#123033 42%,#0B2225 100%)}
.bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.42}
.bg .noise{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.leafield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.leafield .lf{position:absolute;will-change:transform;transition:transform .9s cubic-bezier(.22,.8,.25,1)}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(14px,-22px,0) rotate(12deg)}100%{transform:translate3d(0,0,0) rotate(0)}}
.leafield .lf .inner{animation:drift linear infinite}
.vine{position:fixed;left:0;top:0;height:100vh;width:78px;z-index:0;pointer-events:none;opacity:.5}
.vine path.stem{fill:none;stroke:url(#vineG);stroke-width:2.4;stroke-linecap:round}
.vine .vleaf{opacity:0;transition:opacity .5s}
.vine .vleaf.on{opacity:.9}
@media(max-width:1240px){.vine{display:none}}

/* ===== official logo, green-tinted through a mask ===== */
.lg-mark,.lg-lock{background:linear-gradient(135deg,var(--green-gl) 0%,var(--green-lt) 42%,var(--green) 100%);
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
 -webkit-mask-size:contain;mask-size:contain}
.lg-mark{-webkit-mask-image:var(--mark);mask-image:var(--mark);aspect-ratio:437/448}
.lg-lock{-webkit-mask-image:var(--lock);mask-image:var(--lock);aspect-ratio:1100/297}
.lg-lock.pale{background:linear-gradient(120deg,#fff 0%,#EAFBD8 52%,var(--green-gl) 100%)}
.logohero{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:430px;margin:0 auto}
.logohero .ring{position:absolute;inset:0}
/* green glow behind the white mark: two pulsing layers so the light breathes */
.logohero .halo{position:absolute;inset:9%;border-radius:50%;
 background:radial-gradient(circle,rgba(174,243,90,.30) 0%,rgba(152,191,100,.16) 42%,rgba(152,191,100,0) 66%);
 filter:blur(10px);animation:pulse 6s ease-in-out infinite}
.logohero .halo2{position:absolute;inset:24%;border-radius:50%;
 background:radial-gradient(circle,rgba(174,243,90,.34) 0%,rgba(174,243,90,.10) 46%,rgba(174,243,90,0) 70%);
 filter:blur(16px);animation:pulse 6s ease-in-out infinite reverse}
@keyframes pulse{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.logohero .markbox{position:relative;width:60%;animation:bob 9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
/* the mark itself is plain white; the green comes from the glow around it */
.logohero .mk{width:100%;background:#fff;filter:drop-shadow(0 0 14px rgba(174,243,90,.55)) drop-shadow(0 0 34px rgba(152,191,100,.30));
 animation:glow 7s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 10px rgba(174,243,90,.42)) drop-shadow(0 0 26px rgba(152,191,100,.22))}
 50%{filter:drop-shadow(0 0 20px rgba(174,243,90,.68)) drop-shadow(0 0 46px rgba(152,191,100,.38))}}
.logohero .shine{position:absolute;inset:0;-webkit-mask-image:var(--mark);mask-image:var(--mark);
 -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:center;mask-position:center;
 background:linear-gradient(105deg,transparent 36%,rgba(174,243,90,.85) 50%,transparent 64%);
 mix-blend-mode:multiply;background-size:260% 100%;animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%{background-position:180% 0}45%,100%{background-position:-90% 0}}
.spin{animation:spin 90s linear infinite;transform-origin:50% 50%}
.spin-r{animation:spin 130s linear infinite reverse;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.orb{transform-origin:50% 50%;animation:spin 46s linear infinite}

header{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);background:rgba(13,36,39,.82);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:16px;height:38px;border-bottom:1px solid var(--line-2);font-size:11.5px;color:var(--tx-3)}
.topbar .tl{margin-right:auto;letter-spacing:.13em;text-transform:uppercase}
.lngsw{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.lngsw button{background:none;border:0;color:var(--tx-3);padding:5px 13px;font-size:11.5px;font-weight:600;letter-spacing:.08em;transition:.2s}
.lngsw button.on{background:var(--green-lt);color:#0D2427}
.lngsw button:not(.on):hover{color:var(--green-gl)}
nav{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.brand .lg-lock{width:186px}
.nlinks{display:flex;gap:19px;font-size:13.5px;font-weight:500;color:var(--tx-2)}
.nlinks a{position:relative;padding:6px 0;transition:.2s;white-space:nowrap}
.nlinks a:hover,.nlinks a.act{color:var(--green-gl)}
.nlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--green-lt);transition:right .25s}
.nlinks a:hover::after,.nlinks a.act::after{right:0}
.prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--green-lt);width:0}

.hero{padding:80px 0 74px}
.hero .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(27px,4.1vw,52px);font-weight:900;line-height:1.02;text-transform:uppercase;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--green-lt)}
.hero h1 .gold{color:var(--gold)}
.divname{margin-top:26px;padding-left:20px;border-left:3px solid var(--gold);font-family:M;font-weight:700;font-size:18px;line-height:1.35}
.divname small{display:block;font-family:I;font-weight:500;font-size:13px;color:var(--tx-3);margin-top:8px;letter-spacing:.04em}
.cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.cd{display:flex;gap:11px;margin-top:34px}
.cd div{flex:1;max-width:100px;border:1px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center;background:rgba(255,255,255,.03)}
.cd b{display:block;font-family:M;font-weight:800;font-size:27px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cd span{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-top:7px}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.028)}
.strip .row4{display:grid;grid-template-columns:repeat(4,1fr)}
.strip .f{padding:32px 26px;border-left:1px solid var(--line)}
.strip .f:first-child{border-left:0;padding-left:0}
.strip b{display:block;font-family:M;font-weight:800;font-size:clamp(24px,2.2vw,34px);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.strip b i{font-style:normal;color:var(--green-lt);font-size:.5em}
.strip .f>span{display:block;font-size:12.5px;color:var(--tx-3);margin-top:10px;line-height:1.45}

section{padding:90px 0;position:relative}
.shead{max-width:780px;margin-bottom:44px}
.shead h2{font-size:clamp(25px,3.3vw,42px);font-weight:800;line-height:1.09;margin-top:16px}
.shead h2 em{font-style:normal;color:var(--green-lt)}
.shead p{margin-top:18px;font-size:16.5px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.pol4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);border-radius:20px;padding:30px 26px;
 background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));transition:.28s ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:rgba(152,191,100,.45)}
.card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(152,191,100,.14);border:1px solid rgba(152,191,100,.3);margin-bottom:20px}
.card h3{font-size:18px;font-weight:800;line-height:1.28}
.card p{margin-top:11px;font-size:14.5px;color:var(--tx-2);line-height:1.6}
.card .yr{position:absolute;right:20px;top:16px;font-family:M;font-weight:900;font-size:15px;color:var(--gold);opacity:.85}
.misx{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start}

.grow{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}
.treebox{position:relative;border:1px solid var(--line);border-radius:26px;overflow:hidden;
 background:radial-gradient(120% 90% at 50% 105%,rgba(89,125,53,.30),rgba(13,36,39,.25) 62%),var(--ink-2)}
.treebox svg{width:100%;height:auto;display:block}
.stlabel{position:absolute;left:22px;top:20px}
.stlabel b{display:block;font-family:M;font-weight:900;font-size:33px;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.stlabel span{display:inline-block;margin-top:9px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--gold);border:1px solid rgba(208,215,103,.45);border-radius:999px;padding:5px 12px}
#tree .trunk,#tree .br{fill:none;stroke:url(#barkG);stroke-linecap:round}
#tree .trunk{transition:stroke-dashoffset 1.15s cubic-bezier(.3,.8,.25,1)}
#tree .br{transition:stroke-dashoffset .9s cubic-bezier(.3,.8,.25,1)}
#tree .lg2{opacity:0;transform:scale(.15);transform-origin:0 50%;transition:opacity .5s ease,transform .62s cubic-bezier(.2,1.35,.3,1)}
#tree .lg2.on{opacity:1;transform:scale(1)}
#tree .blob{transform-origin:50% 50%;transform:scale(.45)}
#tree .blob.on{opacity:.2;transform:scale(1)}
#tree .seed{transition:opacity .6s}
#tree .fruit{opacity:0;transform:scale(0);transform-origin:50% 50%;transition:opacity .5s,transform .6s cubic-bezier(.2,1.4,.3,1)}
#tree .fruit.on{opacity:1;transform:scale(1)}
#tree .halo2{transition:r 1s ease,opacity 1s ease}
#tree .root{transition:opacity .6s}
@keyframes sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
#tree .crown{transform-box:fill-box;transform-origin:50% 100%;animation:sway 7s ease-in-out infinite}
@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.9}100%{opacity:0;transform:translate(38px,150px) rotate(220deg)}}
#tree .fl{animation:fall 6s linear infinite;opacity:0}
.growinfo .gyear{font-family:M;font-weight:900;font-size:clamp(42px,4.8vw,60px);line-height:.9;color:var(--green-lt)}
.growinfo h3{font-size:clamp(18px,1.9vw,24px);font-weight:800;margin-top:15px;line-height:1.28}
.growinfo p{margin-top:15px;font-size:15.5px;line-height:1.72;color:var(--tx-2);min-height:150px}
.grail{display:flex;gap:0;margin-top:24px;position:relative;border-top:2px solid var(--line-2)}
.grail .gline{position:absolute;left:0;top:-2px;height:2px;background:var(--green-lt);transition:width .8s cubic-bezier(.3,.8,.25,1)}
.grail button{flex:1;background:none;border:0;color:var(--tx-3);padding:16px 4px 0;text-align:left;position:relative;transition:.25s}
.grail button::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--line-2);transition:.25s}
.grail button:hover{color:var(--tx-2)}
.grail button.on{color:#fff}
.grail button.on::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(208,215,103,.2)}
.grail button.done::before{background:var(--green-lt);border-color:var(--green-lt)}
.grail .gy{display:block;font-family:M;font-weight:800;font-size:15px}
.grail .gs{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px;opacity:.8}
.gplay{margin-top:22px;display:flex;gap:11px;flex-wrap:wrap}

/* .acc / details.fn — accordion styles, kept for reuse if a Q&A-style section returns */
.acc{display:flex;flex-direction:column;gap:12px}
details.fn{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);overflow:hidden;transition:.25s}
details.fn[open]{border-color:rgba(152,191,100,.42);background:rgba(152,191,100,.055)}
details.fn summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:23px 26px}
details.fn summary::-webkit-details-marker{display:none}
details.fn .k{font-family:M;font-weight:900;font-size:21px;color:var(--gold);line-height:1;min-width:32px}
details.fn h4{font-family:M;font-weight:700;font-size:16.5px;line-height:1.4}
details.fn .cv{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:.25s;flex:none}
details.fn[open] .cv{background:var(--green-lt);border-color:var(--green-lt);transform:rotate(45deg)}
details.fn .cv svg{stroke:var(--tx-2)}
details.fn[open] .cv svg{stroke:#0D2427}
details.fn .bd{padding:0 26px 25px 78px;font-size:15px;line-height:1.75;color:var(--tx-2);animation:sd .35s ease}
@keyframes sd{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pbox{border:1px solid var(--line);border-radius:20px;padding:28px;background:rgba(255,255,255,.03)}
.pbox h3{font-size:17px;font-weight:800;display:flex;align-items:center;gap:11px}
.pbox h3 .bd2{width:26px;height:26px;border-radius:8px;background:rgba(152,191,100,.15);border:1px solid rgba(152,191,100,.32);display:grid;place-items:center;flex:none}
.plist{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:13px}
.plist li{font-size:14.5px;line-height:1.62;color:var(--tx-2);padding-left:19px;position:relative}
.plist li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--green-lt);opacity:.75}
.plist li b{color:#fff;font-weight:600}
.plist.numbered{counter-reset:p}
.plist.numbered li{padding-left:32px;counter-increment:p}
.plist.numbered li::before{content:counter(p);width:auto;height:auto;background:none;border-radius:0;top:0;font-family:M;font-weight:800;font-size:13px;color:var(--gold)}
/* align-items:start so that opening one card's deliverables list does not
   stretch the other cards in its row */
.orgs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.org{border:1px solid var(--line);border-radius:16px;padding:20px;background:rgba(255,255,255,.028);transition:.25s}
.org:hover{border-color:rgba(152,191,100,.45);transform:translateY(-3px)}
.org b{font-family:M;font-weight:800;font-size:15px;color:var(--green-gl);display:block}
/* institution logo on a white plate so each brand keeps its own colours */
.org .olg{display:block;background:#fff;border-radius:12px;margin-bottom:14px;padding:9px 14px;
 box-shadow:0 2px 10px rgba(0,0,0,.22)}
.org .olg img{display:block;width:100%;height:auto}
.org b.oname{font-size:13px;letter-spacing:.06em}
.org span.d{display:block;font-size:13px;color:var(--tx-2);margin-top:9px;line-height:1.55}
.org .st{display:inline-block;margin-top:12px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;color:var(--tx-3)}
/* institution with a numbered list of deliverables: folded away until clicked */
.org.dc .d{font-weight:600;color:var(--tx)}
.org.dc .chev{position:static;display:inline-grid;width:20px;height:20px;margin-left:8px;vertical-align:-5px}
.org.dc.on .dcb{max-height:1600px}
.org .dcb .olist{list-style:none;counter-reset:ol;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
 display:flex;flex-direction:column;gap:10px}
.org .dcb .olist li{counter-increment:ol;position:relative;padding-left:26px;font-size:12.5px;
 color:var(--tx-2);line-height:1.55}
.org .dcb .olist li::before{content:counter(ol);position:absolute;left:0;top:1px;width:18px;height:18px;
 border-radius:6px;display:grid;place-items:center;font-family:M;font-weight:800;font-size:10.5px;
 background:rgba(174,243,90,.13);border:1px solid rgba(174,243,90,.26);color:var(--green-gl)}
.res{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
.rcard{border:1px solid var(--line);border-radius:20px;padding:26px 22px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));transition:.28s}
.rcard:hover{transform:translateY(-4px);border-color:rgba(152,191,100,.45)}
.rcard .y{font-family:M;font-weight:900;font-size:13px;color:var(--gold);letter-spacing:.06em}
.rcard h4{font-size:16px;font-weight:800;margin-top:12px;line-height:1.3}
.rcard p{font-size:13.5px;color:var(--tx-2);margin-top:10px;line-height:1.58}
.rcard .en{font-size:11.5px;color:var(--tx-3);margin-top:12px}

/* ===== document card: cover page + description that opens on click ===== */
.dc{cursor:pointer;overflow:hidden}
.dc:focus-visible{outline:2px solid var(--green-gl);outline-offset:3px}
/* research card: cover on the left, title on the right, description below both */
.rcard.dc{padding:18px;display:grid;grid-template-columns:124px 1fr;gap:0 18px;
 grid-template-areas:"cov hd" "body body";align-items:start}
.rcard.dc .cov{grid-area:cov;margin-bottom:0}
.rcard.dc .dch{grid-area:hd}
.rcard.dc .dcb{grid-area:body}
.rcard.dc h4{margin-top:8px;font-size:15.5px}
.card.dc{padding:22px 22px 24px}
.dc .cov{display:block;border-radius:11px;overflow:hidden;background:#fff;margin-bottom:16px;
 box-shadow:0 6px 20px rgba(0,0,0,.30);border:1px solid rgba(248,246,240,.14)}
.dc .cov img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;
 transition:transform .45s cubic-bezier(.22,.85,.25,1)}
.dc:hover .cov img{transform:scale(1.035)}
.dc .dch{position:relative;padding-right:26px}
.dc .dch .y{font-family:M;font-weight:900;font-size:13px;color:var(--gold);letter-spacing:.06em}
.card.dc .dch .y{font-size:14px}
.dc .dch h3,.dc .dch h4{margin-top:9px}
.dc .chev{position:absolute;right:0;top:1px;width:24px;height:24px;border-radius:50%;
 display:grid;place-items:center;color:var(--green-gl);background:rgba(174,243,90,.10);
 border:1px solid rgba(174,243,90,.24);transition:transform .3s ease,background .3s ease}
.dc:hover .chev{background:rgba(174,243,90,.20)}
.dc.on .chev{transform:rotate(180deg)}
/* collapsed by default; the cap is far above the tallest description */
.dc .dcb{max-height:0;opacity:0;overflow:hidden;
 transition:max-height .42s cubic-bezier(.22,.85,.25,1),opacity .3s ease}
.dc.on .dcb{max-height:520px;opacity:1}
.dc .dcbi{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.dc .dcbi p{margin-top:0}
@media (prefers-reduced-motion:reduce){.dc .dcb{transition:none}}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.kpi{border:1px solid var(--line);border-radius:20px;padding:25px 23px;background:var(--ink-2);position:relative;overflow:hidden}
/* page furniture stays brand-green; --s1 is reserved for the chart series */
.kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--green-lt),transparent)}
.kpi .lb{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:600}
.kpi b{display:block;font-family:M;font-weight:800;font-size:clamp(26px,2.6vw,37px);line-height:1.05;margin-top:13px;color:#fff;font-variant-numeric:tabular-nums}
.kpi b i{font-style:normal;font-size:.5em;color:var(--green-lt);margin-left:4px}
.kpi>span{display:block;font-size:12.5px;color:var(--tx-3);margin-top:10px;line-height:1.45}
.viz{border:1px solid var(--line);border-radius:24px;padding:30px 30px 25px;background:var(--ink-2);margin-bottom:22px}
.vh{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.vh h3{font-size:18.5px;font-weight:800}
.sub{font-size:12.5px;color:var(--tx-3);margin-top:7px;line-height:1.55}
.tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.legend{display:flex;gap:17px;font-size:12.5px;color:var(--tx-2);align-items:center;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.tb{background:none;border:1px solid var(--line-2);color:var(--tx-2);border-radius:999px;padding:8px 14px;font-size:12.5px;transition:.2s}
.tb:hover{border-color:var(--green-lt);color:var(--green-gl)}
.tb.on{background:var(--green-lt);border-color:var(--green-lt);color:#0D2427;font-weight:600}
select.sel{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--tx);border-radius:999px;
 padding:8px 14px;font-size:12.5px;font-family:I;max-width:300px}
select.sel option{background:#143538;color:#F8F6F0}
.qbar{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;margin-top:20px;
 border:1px solid var(--line-2);border-radius:16px;padding:14px 18px;background:rgba(255,255,255,.025)}
.qbar .ql{font-family:M;font-weight:800;font-size:20px;color:#fff;font-variant-numeric:tabular-nums;min-width:96px}
.qbar .ql small{display:block;font-family:I;font-weight:500;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx-3);margin-top:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.14);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;
 background:var(--green-lt);border:3px solid var(--ink-2);box-shadow:0 0 0 3px rgba(152,191,100,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--green-lt);border:3px solid var(--ink-2);cursor:pointer}
.hbars{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.hb{display:grid;grid-template-columns:minmax(150px,1.05fr) 3fr auto;gap:16px;align-items:center;cursor:pointer;
 padding:7px 10px;border-radius:12px;transition:background .2s;border:1px solid transparent}
.hb:hover{background:rgba(255,255,255,.045)}
.hb.sel{background:rgba(152,191,100,.10);border-color:rgba(152,191,100,.4)}
.hb .nm{font-size:13.5px;color:var(--tx-2);line-height:1.35}
.hb.sel .nm{color:#fff;font-weight:600}
.track{position:relative;height:26px;display:flex;gap:2px}
.track s{display:block;height:100%;width:0;border-radius:3px;transition:width .8s cubic-bezier(.22,.85,.25,1);text-decoration:none}
.hb .vv{font-family:M;font-weight:800;font-size:14.5px;color:#fff;font-variant-numeric:tabular-nums;min-width:106px;text-align:right}
.drill{margin-top:20px;border:1px dashed rgba(174,243,90,.3);border-radius:18px;padding:22px;background:rgba(13,36,39,.55);animation:sd .35s ease}
.drill .dt{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.drill h4{font-family:M;font-weight:800;font-size:16px}
.sgl{display:flex;flex-direction:column;gap:8px}
.sg{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;transition:.25s;background:rgba(255,255,255,.022)}
.sg.open{border-color:rgba(152,191,100,.45);background:rgba(152,191,100,.06)}
/* tint the open sub-group in the category's own colour where supported */
@supports (color:color-mix(in oklab,red,blue)){
 .drill .sg.open{border-color:color-mix(in oklab,var(--cc,var(--green-lt)) 46%,transparent);
  background:color-mix(in oklab,var(--cc,var(--green-lt)) 9%,transparent)}
 .drill .sg.open .sghd .ar{background:var(--cc,var(--green-lt));border-color:var(--cc,var(--green-lt))}
}
.sghd{display:grid;grid-template-columns:auto 1fr 150px auto auto;gap:14px;align-items:center;padding:13px 16px;cursor:pointer;width:100%;background:none;border:0;color:inherit;text-align:left}
.sghd .ar{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:.3s;flex:none}
.sg.open .sghd .ar{background:var(--green-lt);border-color:var(--green-lt);transform:rotate(90deg)}
.sghd .ar svg{stroke:var(--tx-2)}
.sg.open .sghd .ar svg{stroke:#0D2427}
.sghd .sn{font-size:13.5px;color:var(--tx-2);line-height:1.4}
.sg.open .sghd .sn{color:#fff;font-weight:600}
.sghd .mb{height:9px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.sghd .mb i{display:block;height:100%;width:0;background:var(--cc,var(--s1));border-radius:5px;transition:width .8s cubic-bezier(.22,.85,.25,1)}
.sghd .sv{font-family:M;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;min-width:96px;text-align:right;font-size:13.5px}
.sghd .cnt{font-size:11px;color:var(--tx-3);min-width:78px;text-align:right}
.tw{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.3,.8,.25,1)}
.sg.open .tw{max-height:760px}
.tl2{padding:4px 16px 16px 52px;display:flex;flex-direction:column;gap:7px;border-top:1px dashed rgba(174,243,90,.18);margin-top:2px}
.tl2 .tr2{display:grid;grid-template-columns:1fr 110px auto;gap:12px;align-items:center;font-size:12.5px;color:var(--tx-2)}
.tl2 .mb2{height:7px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.tl2 .mb2 i{display:block;height:100%;width:0;background:var(--cc,var(--green-lt));opacity:.72;border-radius:4px;transition:width .7s cubic-bezier(.22,.85,.25,1)}
.tl2 .tv{font-family:M;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;min-width:86px;text-align:right;font-size:12.5px}
.tl2 .zero{opacity:.42}
.lc{margin-top:20px;position:relative}
.lc svg{width:100%;height:330px;overflow:visible}
.lc .grid line{stroke:rgba(248,246,240,.10);stroke-dasharray:3 5}
.lc .axl{fill:var(--tx-3);font-size:11px;font-family:I}
.lc path.ln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* the banking-sector benchmark: thinner and dashed, so it reads as a yardstick */
.lc path.ln.bm{stroke-width:1.8;stroke-dasharray:7 5;opacity:.9}
.legend i.bm{border-radius:2px;height:4px;width:15px;
 background:repeating-linear-gradient(90deg,var(--s2) 0 5px,transparent 5px 8px)!important}
/* the area fill is set per render (gradient gA2, in the series colour), so this
   rule must NOT declare fill — a CSS declaration would override the attribute */
.lc .cross{stroke:rgba(174,243,90,.5);stroke-width:1}
.lc circle.mk{r:5;stroke:var(--ink-2);stroke-width:2}
.hit{fill:transparent}
.figwrap{margin-top:16px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#fff}
.dnrow{display:grid;grid-template-columns:206px 1fr;gap:26px;align-items:center;margin-top:22px}
.dn{position:relative}
.dn svg{width:100%;height:auto}
.dn .ctr{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dn .ctr b{display:block;font-family:M;font-weight:800;font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.dn .ctr span{font-size:10.5px;color:var(--tx-3);letter-spacing:.09em;text-transform:uppercase}
.srcs{display:flex;flex-direction:column;gap:13px}
.srcs .src{display:grid;grid-template-columns:12px 1fr auto;gap:13px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.srcs .src:last-child{border-bottom:0;padding-bottom:0}
.srcs .sw{width:12px;height:12px;border-radius:4px}
.srcs .nm{font-size:13.5px;color:#fff;font-weight:500;line-height:1.3}
.srcs .n2{display:block;font-size:11.5px;color:var(--tx-3);margin-top:5px}
.srcs .rt{text-align:right;white-space:nowrap}
.srcs .vl{font-family:M;font-weight:800;font-size:15px;color:#fff;font-variant-numeric:tabular-nums;display:block}
.srcs .pc{font-size:12px;color:var(--green-gl);font-variant-numeric:tabular-nums}
.rbars{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(11,auto);grid-auto-flow:column;gap:7px 34px}
.rb{display:grid;grid-template-columns:94px 1fr auto;gap:12px;align-items:center;padding:5px 0;transition:opacity .3s}
.rb.dim{opacity:.18}
.rb .nm{font-size:12.5px;color:var(--tx-2);text-align:right}
.rb .tr{height:16px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden;position:relative}
.rb .tr i{display:block;height:100%;width:0;border-radius:4px;transition:width .85s cubic-bezier(.22,.85,.25,1)}
.rb.over .tr::after{content:"";position:absolute;right:16px;top:-3px;bottom:-3px;width:12px;background:repeating-linear-gradient(115deg,var(--ink-2) 0 3px,transparent 3px 6px)}
.rb .vv{font-family:M;font-weight:700;font-size:12.5px;color:#fff;font-variant-numeric:tabular-nums;min-width:76px;text-align:right}
table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line-2)}
th{font-weight:600;color:var(--tx-3);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
td{color:var(--tx-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.tip{position:fixed;z-index:90;pointer-events:none;opacity:0;transition:opacity .13s;background:#071A1C;
 border:1px solid rgba(174,243,90,.32);border-radius:11px;padding:11px 14px;font-size:12.5px;line-height:1.5;
 box-shadow:0 14px 38px rgba(0,0,0,.55);max-width:290px}
.tip b{font-family:M;font-weight:800}

.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mod{border:1px solid var(--line);border-radius:22px;padding:27px 25px;background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
 transition:.28s;position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;width:100%;color:inherit}
.mod:hover{transform:translateY(-5px);border-color:rgba(152,191,100,.5);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.mod .bignum{position:absolute;right:20px;top:10px;font-family:M;font-weight:900;font-size:62px;color:rgba(248,246,240,.055);line-height:1}
.mod .tagm{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-gl);font-weight:600}
.mod h3{font-size:17px;font-weight:800;line-height:1.32;margin-top:13px}
.mod ul{list-style:none;margin-top:15px;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--tx-3)}
.mod ul li{padding-left:14px;position:relative;line-height:1.4}
.mod ul li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:var(--green-lt);opacity:.65}
.mod .open{margin-top:auto;padding-top:19px;font-size:13.5px;font-weight:600;color:var(--green-lt);display:flex;align-items:center;gap:8px}
.ov{position:fixed;inset:0;z-index:100;background:rgba(5,16,17,.93);backdrop-filter:blur(6px);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .3s}
.ov.on{opacity:1;pointer-events:auto}
.ovbar{display:flex;align-items:center;gap:13px;padding:13px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ovbar .t{font-family:M;font-weight:800;font-size:14.5px;margin-right:auto}
.ov iframe{flex:1;width:100%;border:0;background:#fff}
.stage{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;position:relative;aspect-ratio:16/9}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.015);transition:opacity .5s ease,transform .6s ease}
.stage img.on{opacity:1;transform:none}
.sbar{display:flex;align-items:center;gap:13px;margin-top:17px;flex-wrap:wrap}
.rnd{width:43px;height:43px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--tx);display:grid;place-items:center;transition:.2s;flex:none}
.rnd:hover{border-color:var(--green-lt);background:rgba(152,191,100,.12);color:var(--green-gl)}
.scount{font-family:M;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
.sttl{font-size:13px;color:var(--tx-3);margin-right:auto;line-height:1.4}
.pbar{height:3px;background:rgba(255,255,255,.09);border-radius:2px;margin-top:15px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--green-lt);width:0;transition:width .4s ease}
.thumbs{display:flex;gap:9px;overflow-x:auto;padding:15px 2px 6px}
.thumbs button{flex:none;width:102px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;border:2px solid transparent;opacity:.5;transition:.2s;background:#fff;padding:0}
.thumbs button:hover{opacity:.85}
.thumbs button.on{opacity:1;border-color:var(--green-lt)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.band{border:1px solid rgba(174,243,90,.26);border-radius:28px;padding:54px 46px;
 background:linear-gradient(130deg,rgba(89,125,53,.42),rgba(13,36,39,.5));display:flex;justify-content:space-between;
 align-items:center;gap:34px;flex-wrap:wrap;position:relative;overflow:hidden}
.band h2{font-size:clamp(23px,3vw,36px);font-weight:800;line-height:1.14;max-width:600px}
.band p{margin-top:14px;color:var(--tx-2);max-width:520px;font-size:15.5px}
footer{border-top:1px solid var(--line);padding:56px 0 38px;margin-top:34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
footer h5{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);font-weight:600;margin-bottom:15px;font-family:I}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--tx-2)}
footer ul a:hover{color:var(--green-gl)}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:46px;padding-top:23px;border-top:1px solid var(--line);font-size:12.5px;color:var(--tx-3)}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.is-rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}
 .spin,.spin-r,.orb,#tree .crown,#tree .fl,.leafield .lf .inner,.logohero .halo,.logohero .halo2,.logohero .markbox,.logohero .mk,.logohero .shine{animation:none}
 .track s,.sghd .mb i,.rb .tr i,.tl2 .mb2 i{transition:none}}

@media(max-width:1080px){
  .nlinks{display:none}
  .hero .grid{grid-template-columns:1fr;gap:38px}
  .logohero{max-width:330px}
  .grow,.misx{grid-template-columns:1fr;gap:28px}
  .treebox{max-width:460px;margin:0 auto;width:100%}
  .cards,.cards.pol4,.mods,.pgrid,.orgs,.res{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .twocol{grid-template-columns:1fr}
  .dnrow{grid-template-columns:1fr;gap:22px}
  .dn{max-width:280px;margin:0 auto}
  .rbars{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .fgrid{grid-template-columns:1fr 1fr}
  .sghd{grid-template-columns:auto 1fr auto;gap:12px}
  .sghd .mb,.sghd .cnt{display:none}
  table{font-size:12px}
}
@media(max-width:680px){
  .wrap{padding:0 18px}
  section{padding:60px 0}
  .cards,.cards.pol4,.mods,.res,.pgrid,.orgs{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .strip .row4{grid-template-columns:1fr}
  .strip .f{padding:21px 0;border-left:0;border-top:1px solid var(--line)}
  .strip .f:first-child{border-top:0}
  .cd{gap:7px}.cd div{max-width:none;padding:11px 3px}.cd b{font-size:21px}.cd span{font-size:8.5px;letter-spacing:.04em}
  .viz{padding:22px 15px 19px}
  .qbar{grid-template-columns:1fr auto auto;gap:10px;padding:12px 14px}
  .qbar .ql{grid-column:1/-1}
  .qbar input[type=range]{grid-column:1/-1}
  .hb{grid-template-columns:1fr;gap:7px}
  .hb .vv{text-align:left;min-width:0}
  .grail{flex-wrap:wrap;gap:2px}
  .grail button{flex:0 0 33.33%;padding-top:14px}
  .growinfo p{min-height:0}
  .tl2{padding-left:20px}
  .tl2 .tr2{grid-template-columns:1fr auto}
  .tl2 .mb2{display:none}
  details.fn .bd{padding:0 19px 21px 19px}
  details.fn summary{padding:17px 18px;gap:13px}
  .band{padding:32px 22px}
  .fgrid{grid-template-columns:1fr}
  .lc svg{height:250px}
  .brand .lg-lock{width:150px}
  select.sel{max-width:210px}
}