/* Final-site additions on top of styles.css: sub-menus, inner pages, scrollbar, cursor */

/* ---------- nav with sub-menus ---------- */
.site-head{padding:12px 0 0}
.brand img{width:50px;height:50px;object-fit:contain;border-radius:0;background:none;border:0}
.links{align-items:center}
.has-sub{position:relative}
.has-sub>a{display:inline-flex;align-items:center;gap:4px}
.has-sub>a svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.has-sub:hover>a svg,.has-sub:focus-within>a svg{transform:rotate(180deg)}
.links a.is-here{background:rgba(30,138,77,.12);color:var(--green-deep)}
.sub{position:absolute;top:100%;inset-inline-start:0;min-width:230px;padding:8px;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
.sub::before{content:"";position:absolute;inset:-12px 0 100% 0}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sub a{display:flex;justify-content:space-between;gap:18px;padding:9px 14px;border-radius:10px;white-space:nowrap}
.sub a small{color:var(--muted);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- hero slides are links to the city pages ---------- */
a.slide{display:block;color:inherit}
[data-mode="a"] .cap .btn{pointer-events:none}
[data-mode="a"] .slide.is-active{cursor:pointer}

/* ---------- inner pages ---------- */
.page-hero{padding:56px 0 20px}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;line-height:1.3}
.page-hero p{color:var(--muted);font-size:1.1rem;max-width:720px;margin-top:12px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:16px}
.crumbs a:hover{color:var(--green-deep)}
.crumbs span::before{content:"\2039";margin-inline-end:8px}
.block{padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(20px,4vw,64px);scroll-margin-top:110px}
.block:first-of-type{border-top:0}
.block>h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;line-height:1.4;position:sticky;top:120px;align-self:start}
.prose p{margin-bottom:14px;color:#2c423d}
.prose p:last-child{margin-bottom:0}
.prose h3{font-size:1.1rem;font-weight:600;margin:22px 0 10px}
.prose h3:first-child{margin-top:0}
.ticks{list-style:none;padding:0;display:grid;gap:10px;counter-reset:tick}
.ticks li{position:relative;padding:14px 18px;padding-inline-start:52px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.8);border-radius:var(--r-sm);color:#2c423d}
.ticks li::before{content:counter(tick,decimal-leading-zero);counter-increment:tick;position:absolute;inset-inline-start:16px;top:15px;font-size:.78rem;font-weight:600;color:var(--green)}
.ticks.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.chips li{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.92rem}
.soon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0}
.soon li{padding:22px;border-radius:var(--r-md);background:rgba(255,255,255,.6);border:1px dashed rgba(14,38,34,.22)}
.soon b{display:block;font-weight:600;margin-bottom:4px}
.soon span{font-size:.85rem;color:var(--muted)}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;list-style:none;padding:0}
.logo-grid li{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 12px;text-align:center}
.logo-grid img{height:68px;width:auto;margin:0 auto 10px;object-fit:contain}
.logo-grid span{font-size:.78rem;color:var(--muted);line-height:1.5;display:block}
.goal p{color:#2c423d}

/* city page */
.city-hero{position:relative;width:min(1400px,100% - 40px);margin:18px auto 0;height:clamp(340px,62vh,640px);border-radius:var(--r-lg);overflow:hidden}
.city-hero img{width:100%;height:100%;object-fit:cover;animation:drift 16s ease-out both}
@keyframes drift{from{transform:scale(1.14)}to{transform:scale(1)}}
.city-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,24,20,.78),transparent 62%)}
.city-title{position:absolute;z-index:1;inset-inline:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,48px);color:#fff}
.city-title .year{font-size:1rem;padding:4px 18px;background:rgba(255,255,255,.2)}
.city-title h1{font-size:clamp(2.2rem,6vw,4.6rem);font-weight:600;line-height:1.2;margin-top:10px}
.city-title p{font-size:1.1rem;opacity:.85}
.city-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:48px 0 0}
.city-nav a{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;display:block}
.city-nav img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.city-nav a:hover img{transform:scale(1.08)}
.city-nav a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,24,20,.8),transparent 65%)}
.city-nav span{position:absolute;z-index:1;inset-inline:14px;bottom:10px;color:#fff;font-weight:500;display:flex;justify-content:space-between}
.city-nav a[aria-current]{outline:3px solid var(--green);outline-offset:3px}
a.city{color:#fff}

/* activities page */
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:96px;z-index:20;padding:10px 0}
.cat-nav a{padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid var(--line);font-size:.9rem;display:inline-flex;gap:8px;box-shadow:0 6px 16px -12px rgba(11,60,45,.5);transition:background .2s,color .2s}
.cat-nav a:hover{background:var(--ink);color:#fff}
.cat-nav small{opacity:.6;font-variant-numeric:tabular-nums}
.cat{padding:clamp(36px,5vw,64px) 0 0;scroll-margin-top:150px}
.cat>h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:600;margin-bottom:20px}
.act{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);border-radius:var(--r-md);padding:22px 24px;margin-bottom:12px;box-shadow:0 14px 30px -26px rgba(11,60,45,.5)}
.act h3{font-size:1.08rem;font-weight:600;line-height:1.6}
.act-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.act-meta span{font-size:.82rem;padding:3px 12px;border-radius:999px;background:rgba(30,138,77,.1);color:var(--green-deep)}
.act-meta span:nth-child(2){background:rgba(21,96,196,.1);color:var(--blue)}
.act-meta span:nth-child(3){background:rgba(14,38,34,.06);color:#2c423d}
.act details{margin-top:12px}
.act summary{cursor:pointer;font-size:.88rem;color:var(--green-deep);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px}
.act summary::-webkit-details-marker{display:none}
.act summary::after{content:"+";font-size:1.1rem;line-height:1}
.act details[open] summary::after{content:"\2212"}
.act dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:8px 20px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.92rem}
.act dt{color:var(--muted)}
.act dd{margin:0;color:#2c423d}
.act dd span{display:block}
.more{display:inline-flex;margin-top:18px;color:var(--green-deep);font-weight:500;border-bottom:1px solid currentColor}
.event{grid-template-columns:230px 1fr auto}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.contact-card{border-radius:var(--r-md);padding:28px}
.contact-card svg{width:28px;height:28px;color:var(--green);margin-bottom:14px}
.contact-card h2{font-size:1.1rem;font-weight:600;margin-bottom:6px}
.contact-card a,.contact-card p{display:block;color:#2c423d}
.contact-card a:hover{color:var(--green-deep)}
.ltr{direction:ltr;unicode-bidi:isolate;text-align:right}
.foot-brand img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:18px;padding:6px}
.foot .ltr{display:block}

/* ---------- custom scrollbar ---------- */
html::-webkit-scrollbar{width:14px}
html::-webkit-scrollbar-track{background:var(--bg)}
html::-webkit-scrollbar-thumb{background:linear-gradient(var(--green),var(--blue));border-radius:999px;border:4px solid var(--bg)}
html::-webkit-scrollbar-thumb:hover{border-width:3px}
@supports not selector(::-webkit-scrollbar){html{scrollbar-color:var(--green-deep) var(--bg);scrollbar-width:thin}}

/* ---------- custom cursor (mouse only) ---------- */
.has-cursor,.has-cursor *{cursor:none!important}
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--green-deep)}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--green-deep);display:grid;place-items:center;font-size:.78rem;font-weight:500;color:#fff;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.cur-ring::after{content:"";opacity:0;transition:opacity .2s}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-link .cur-ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(30,138,77,.14)}
.cur-view .cur-ring{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--green-deep);border-color:transparent}
.cur-view .cur-ring::after{content:"\0627\0641\062A\062D";opacity:1}
.cur-view .cur-dot{opacity:0}
.cur-down .cur-ring{width:30px;height:30px;margin:-15px 0 0 -15px}

@media (max-width:1080px){
  .links{align-items:stretch;max-height:calc(100vh - 110px);overflow:auto}
  .has-sub>a svg{display:none}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;margin:0;padding:0 14px 6px;min-width:0;background:none}
  .sub a{padding:6px 14px;font-size:.85rem;color:var(--muted)}
  .block{grid-template-columns:minmax(0,1fr)}
  .block>h2{position:static}
  .soon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .cat-nav{position:static}
}
@media (max-width:760px){
  .ticks.cols,.act dl,.event{grid-template-columns:minmax(0,1fr)}
  .city-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act dt{font-weight:500}
}
@media (prefers-reduced-motion:reduce){.city-hero img{animation:none}}

/* ================= proportions for the real, longer content ================= */
.num{font-variant-numeric:tabular-nums}

/* homepage: about */
.split{align-items:start;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
#about .title{font-size:clamp(1.45rem,2.3vw,2rem);line-height:1.5;max-width:22ch}
#about .lead{font-size:1.05rem;line-height:1.9;margin-top:18px}
.split p+p{font-size:.96rem;line-height:1.9;margin-top:16px}
.split .btn{margin-top:30px}
.stats{gap:18px;margin-top:8px}
.stat{padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.stat span{line-height:1.6}

/* homepage: about — text card + photo beside the organisation's timeline */
.about-mix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.about-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;margin-bottom:clamp(48px,6vw,88px)}
.about-main{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(28px,3.6vw,46px);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.about-main::before{content:"";position:absolute;inset-inline-end:-80px;bottom:-90px;width:300px;height:300px;background:url(assets/logo-160.webp) center/contain no-repeat;opacity:.08;pointer-events:none}
.about-main .eyebrow{margin:0}
#about .about-main .lead{margin-top:0}
.about-motto{display:flex;flex-wrap:wrap;gap:8px}
.about-motto span{padding:7px 16px;border-radius:999px;border:1px solid rgba(30,138,77,.35);color:var(--green-deep);font-size:.88rem;font-weight:500;background:rgba(255,255,255,.6)}
.about-photo{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;min-height:220px}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform 1.2s var(--ease)}
.about-photo:hover img{transform:scale(1.06)}
.about-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,24,20,.78),transparent 62%)}
.about-photo figcaption{position:absolute;z-index:1;inset-inline:24px;bottom:18px;color:#fff;font-size:.9rem;display:flex;justify-content:space-between;gap:16px;align-items:end}
.about-photo figcaption b{font-weight:500;font-size:1.05rem}
.about-line{position:relative;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.about-line::before{content:"";position:absolute;inset-block:28px;inset-inline-start:27px;width:2px;background:linear-gradient(var(--green),var(--blue));border-radius:2px;opacity:.35}
.about-line li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:center}
.about-line .node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid rgba(30,138,77,.4);transition:border-color .3s,box-shadow .3s}
.about-line .node::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--green-deep)}
.about-line li:hover .node{border-color:var(--green-deep);box-shadow:0 0 0 6px rgba(30,138,77,.1)}
.about-line li.key .node{background:var(--green-deep);border-color:var(--green-deep);box-shadow:0 0 0 8px rgba(30,138,77,.12)}
.about-line li.key .node::after{background:#fff}
.about-line .step{display:grid;grid-template-columns:minmax(0,7.2rem) minmax(0,1fr);gap:4px 22px;align-items:center;padding:20px 26px;border-radius:var(--r-md);background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow);transition:transform .35s var(--ease)}
.about-line li:hover .step{transform:translateX(-6px)}
.about-line .step b{grid-row:span 2;font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px var(--green-deep);transition:color .4s}
.about-line li:nth-child(even) .step b{-webkit-text-stroke-color:var(--blue)}
.about-line li:hover .step b{color:var(--green-deep)}
.about-line li:nth-child(even):hover .step b{color:var(--blue)}
.about-line li.key .step{background:linear-gradient(150deg,#0b4a33,#0a3a4a);border-color:transparent;color:#fff}
.about-line li.key .step b,.about-line li.key:hover .step b{color:#fff;-webkit-text-stroke-color:#fff}
.about-line li.key .step p{color:rgba(255,255,255,.75)}
.about-line .step h3{font-size:1.05rem;font-weight:600;line-height:1.6}
.about-line .step p{color:var(--muted);font-size:.9rem;line-height:1.7}
@media (max-width:1000px){.about-mix,.about-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.about-line .step{grid-template-columns:minmax(0,1fr)}.about-line .step b{grid-row:auto}.about-line li{grid-template-columns:40px minmax(0,1fr);gap:12px}.about-line .node{width:40px;height:40px}.about-line::before{inset-inline-start:19px}}

/* homepage: about — detail panel that follows the hovered year */
.about-photo{min-height:260px}
.about-detail{position:sticky;top:110px;display:grid;border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);overflow:hidden}
.about-detail .detail{grid-area:1/1;display:flex;flex-direction:column;gap:16px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.about-detail .detail.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.d-img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/8;background:rgba(14,38,34,.05)}
.d-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.detail.is-on .d-img img{transform:scale(1)}
.d-img.is-logo{display:grid;place-items:center;background:linear-gradient(150deg,rgba(30,138,77,.1),rgba(21,96,196,.08))}
.d-img.is-logo img{width:auto;height:72%;object-fit:contain}
.d-head{display:flex;align-items:center;gap:18px}
.d-head b{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px var(--green-deep)}
.d-head h3{font-size:clamp(1.1rem,1.6vw,1.3rem);font-weight:600;line-height:1.5}
.d-quote{padding-inline-start:16px;border-inline-start:3px solid var(--green);color:var(--green-deep);font-weight:500;line-height:1.8}
.d-body{color:#2c423d;line-height:1.95;font-size:.97rem}
.d-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0;padding:16px 0;border-block:1px solid var(--line);font-size:.93rem;line-height:1.7}
.d-facts dt{color:var(--muted)}
.d-facts dd{margin:0;color:var(--ink);font-weight:500}
.d-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.d-list li{position:relative;padding-inline-start:20px;color:#2c423d;font-size:.93rem;line-height:1.8}
.d-list li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.d-cities{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.d-cities a{display:inline-flex;gap:8px;align-items:baseline;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:500;transition:background .25s,color .25s}
.d-cities a:hover{background:var(--green-deep);color:#fff}
.d-cities small{color:var(--muted);font-variant-numeric:tabular-nums}
.d-cities a:hover small{color:rgba(255,255,255,.75)}
.about-hint{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:.88rem;color:var(--muted)}
.about-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(30,138,77,.15)}
.about-line li{cursor:pointer;outline:none}
.about-line li.is-active .node{border-color:var(--green-deep);box-shadow:0 0 0 6px rgba(30,138,77,.12)}
.about-line li.is-active:not(.key) .step{border-color:rgba(30,138,77,.45);transform:translateX(-6px)}
.about-line li.is-active:not(.key) .step b{color:var(--green-deep)}
.about-line li.is-active:not(.key):nth-child(even) .step b{color:var(--blue)}
.about-line li:focus-visible .step{outline:2px solid var(--blue);outline-offset:3px}
@media (max-width:1000px){
  .about-detail{position:static;order:2}
  .about-timeline{order:1}
  .about-hint{display:none}
}

/* homepage: goals — a rail of tall cards that drifts sideways on its own */
.goals-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.goals-head .eyebrow{margin-bottom:14px}
.goals-ctrl{display:flex;gap:10px}
.goals-ctrl button{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:background .25s,color .25s,transform .25s var(--ease)}
.goals-ctrl button:hover{background:var(--green-deep);color:#fff;transform:scale(1.06)}
.goals-rail{--edge:max(20px,calc((100% - 1200px)/2));display:flex;gap:20px;overflow-x:auto;padding:10px var(--edge) 34px;scrollbar-width:none;user-select:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.goals-rail::-webkit-scrollbar{display:none}
.goals-rail.is-drag{cursor:grabbing}
.goal-card{position:relative;flex:0 0 min(360px,82vw);min-height:400px;border-radius:var(--r-lg);overflow:hidden;padding:34px 30px 30px;display:flex;flex-direction:column;gap:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);transition:transform .45s var(--ease)}
.goal-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--green),var(--blue))}
.goal-card:hover{transform:translateY(-8px)}
.goal-card .badge{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(30,138,77,.4);color:var(--green-deep)}
.goal-card .badge svg{width:26px;height:26px;stroke-width:1.5}
.goal-card p{line-height:1.95;color:#2c423d;font-size:1.02rem;position:relative;z-index:1}
.goal-card b{margin-top:auto;align-self:flex-end;font-size:6.5rem;font-weight:700;line-height:.8;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px rgba(11,82,55,.28);transition:-webkit-text-stroke-color .4s,color .4s}
.goal-card.alt b{-webkit-text-stroke-color:rgba(21,96,196,.3)}
.goal-card:hover b{color:rgba(30,138,77,.12);-webkit-text-stroke-color:var(--green-deep)}
.goal-card.all{background:linear-gradient(150deg,#0b4a33,#0a3a4a);border-color:transparent;color:#fff;justify-content:space-between}
.goal-card.all::before{display:none}
.goal-card.all h3{font-size:1.5rem;font-weight:600;line-height:1.5}
.goal-card.all b,.goal-card.all:hover b{color:#fff;-webkit-text-stroke:0;font-size:5rem;align-self:flex-start;margin:0}
.goal-card.all span{display:flex;justify-content:space-between;align-items:center;font-weight:500}
.goal-card.all svg{width:22px;height:22px}
.goals-bar{width:min(1200px,100% - 40px);margin:0 auto;height:3px;border-radius:3px;background:rgba(14,38,34,.1);overflow:hidden}
.goals-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--blue));transform-origin:right;transform:scaleX(0)}
#goals .more{display:none}

/* homepage: goals (old card grid, still used nowhere else) */
.sec-head{margin-bottom:clamp(32px,4vw,52px)}
.goals{gap:20px}
.goal{padding:30px 28px 32px;display:flex;flex-direction:column;gap:14px}
.goal i{font-size:.85rem}
.goal p{font-size:.98rem;line-height:1.9}
.more{margin-top:32px}

/* homepage: capitals band */
.band .lead{max-width:62ch;line-height:1.9;margin-top:18px}
.cities{gap:14px;grid-template-columns:repeat(6,minmax(0,1fr))}
.city div{inset-inline:22px;bottom:22px}
.city h3{margin-top:10px;line-height:1.3}
.city p{margin-top:4px;line-height:1.6;min-height:1.6em}
.program{margin-top:48px;padding:clamp(26px,3.4vw,44px)}
.program h3{margin-bottom:22px}
.program ul{gap:16px 48px}
.program li{line-height:1.8}
.program .more{margin-top:28px}

/* homepage: activities */
.tabs{margin-bottom:30px;gap:10px}
.event{grid-template-columns:minmax(0,250px) minmax(0,1fr) auto;gap:20px 36px;padding:28px 4px;align-items:center}
.when{display:flex;flex-direction:column;gap:2px;font-size:.9rem;color:var(--muted);line-height:1.6}
.when span:last-child{color:var(--green-deep);font-weight:600;font-size:1rem}
.event h3{font-size:1.05rem;line-height:1.75;font-weight:500}
.tag{align-self:center;max-width:22ch;white-space:normal;text-align:center;line-height:1.5;padding:4px 14px}
.panel .more{margin-top:28px}
.gallery{margin-top:64px;gap:14px}
.note{margin-top:16px}

/* homepage: partners + membership */
.marquee figure{width:200px;padding:22px 16px}
.marquee figcaption{margin-top:4px}
.cta{gap:36px}
.cta h2{margin-bottom:10px}
.cta p{max-width:52ch;line-height:1.9}

/* inner pages */
.page-hero{padding:64px 0 28px}
.page-hero p{line-height:1.8;margin-top:16px}
.block{padding:clamp(44px,5.5vw,76px) 0;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr)}
.prose p{font-size:1.02rem;line-height:2;margin-bottom:18px;max-width:72ch}
.prose h3{margin:34px 0 14px}
.ticks{gap:12px}
.ticks li{padding:18px 22px;padding-inline-start:58px;line-height:1.85}
.ticks li::before{top:20px;inset-inline-start:20px}
.ticks.cols{gap:14px}
.chips{gap:10px}
.chips li{padding:10px 18px;line-height:1.5}
.prose>p+.ticks,.prose>p+.chips{margin-top:6px}
.role{padding:22px 24px;line-height:1.6}
.role small{margin-top:6px;line-height:1.6}
.city-nav{margin-top:64px;gap:12px;grid-template-columns:repeat(6,minmax(0,1fr))}
.act{padding:26px 28px;margin-bottom:16px}
.act h3{line-height:1.8}
.act-meta{margin-top:14px;gap:10px}
.act-meta span{padding:5px 14px;line-height:1.5}
.act details{margin-top:16px}
.act dl{gap:12px 24px;line-height:1.8}
.cat>h2{margin-bottom:26px}
.foot-grid{gap:56px}
.foot-grid a,.foot-grid p{padding:4px 0;line-height:1.7}
.foot h4{margin-bottom:14px}

@media (max-width:1080px){
  .split{grid-template-columns:minmax(0,1fr);gap:36px}
  #about .title{max-width:none}
  .event{grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
  .tag{justify-self:start;max-width:none}
  .program ul{grid-template-columns:minmax(0,1fr)}
  .goals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{margin-top:44px}
}
@media (max-width:760px){
  .goals,.stats{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticks li{padding:16px 18px;padding-inline-start:50px}
  .ticks li::before{inset-inline-start:16px;top:18px}
  .act{padding:22px 20px}
  .cta{padding:32px 24px}
}

/* six capitals: keep the grids readable on smaller screens */
@media (max-width:1080px){.cities{grid-template-columns:repeat(3,minmax(0,1fr))}.city-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cities,.city-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* activities page: the organisation's own international conferences */
.cat-nav a.is-lead{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.cat-nav a.is-lead small{opacity:.75}
.confs{padding:clamp(36px,5vw,64px) 0 clamp(20px,3vw,40px);scroll-margin-top:150px}
.confs-head{margin-bottom:28px}
.confs-head h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:600}
.confs-head p{color:var(--muted);margin-top:6px}
.conf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,52px);align-items:start;padding:clamp(22px,3vw,36px);margin-bottom:22px;border-radius:var(--r-lg);background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);scroll-margin-top:150px}
.conf:nth-of-type(even) .conf-media{order:2}
.conf-main{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:rgba(14,38,34,.06)}
.conf-main img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.conf-main img.is-swap{opacity:0}
.conf-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}
.conf-thumbs button{padding:0;border-radius:10px;overflow:hidden;aspect-ratio:1;border:2px solid transparent;opacity:.6;transition:opacity .25s,border-color .25s,transform .25s var(--ease)}
.conf-thumbs button:hover{opacity:1;transform:translateY(-2px)}
.conf-thumbs button.is-on{opacity:1;border-color:var(--green)}
.conf-thumbs img{width:100%;height:100%;object-fit:cover}
.conf-text{display:flex;flex-direction:column;gap:16px}
.conf-top{display:flex;align-items:center;gap:16px}
.conf-top b{font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px var(--green-deep)}
.conf:nth-of-type(even) .conf-top b{-webkit-text-stroke-color:var(--blue)}
.conf-top span{padding:5px 14px;border-radius:999px;background:rgba(30,138,77,.12);color:var(--green-deep);font-size:.85rem;font-weight:600}
.conf h3{font-size:clamp(1.15rem,1.9vw,1.45rem);font-weight:600;line-height:1.65;color:var(--green-deep)}
.conf-sub{color:var(--muted);font-size:.93rem;margin-top:-8px}
.conf details summary{cursor:pointer;font-size:.9rem;font-weight:500;color:var(--green-deep);list-style:none;display:inline-flex;gap:6px;align-items:center}
.conf details summary::-webkit-details-marker{display:none}
.conf details summary::after{content:"+"}
.conf details[open] summary::after{content:"\2212"}
.conf details .chips{margin-top:12px}
.conf details .chips li{font-size:.85rem;padding:7px 14px}
@media (max-width:1000px){.conf{grid-template-columns:minmax(0,1fr)}.conf:nth-of-type(even) .conf-media{order:0}}

/* homepage photo strip: eight photos */
.gallery{grid-template-columns:repeat(8,minmax(0,1fr))}
@media (max-width:1080px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* nav: members area link with a small lock */
.links a.nav-members{display:inline-flex;align-items:center;gap:6px}
.links a.nav-members svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 8 menu items need room: the full bar from 1361px (logo = home, so «الرئيسية» hides there), the burger menu below */
.links a,.has-sub>a{white-space:nowrap}
@media (min-width:1361px){
  .links{gap:0}.links a{padding:8px 10px;font-size:.88rem}
  .links>a.nav-home{padding:8px 9px}.links>a.nav-home span{display:none}
}
@media (min-width:1361px) and (max-width:1560px){.brand small{display:none}}
@media (max-width:1360px) and (min-width:1081px){
  .links{position:absolute;top:calc(100% + 8px);inset-inline:20px;flex-direction:column;background:#fff;border-radius:var(--r-md);padding:10px;box-shadow:var(--shadow);display:none;align-items:stretch;max-height:calc(100vh - 110px);overflow:auto}
  .links.open{display:flex}
  .burger{display:flex}
  .nav{position:relative}
  .nav-cta{margin-inline-start:auto}
  .has-sub>a svg{display:none}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;margin:0;padding:0 14px 6px;min-width:0;background:none}
  .sub a{padding:6px 14px;font-size:.85rem;color:var(--muted)}
}
@media (min-width:1361px){.fes-spot .links>a,.fes-spot .has-sub>a{padding:8px 6px;font-size:.84rem}.fes-spot .links>a.nav-home{padding:8px 7px}.fes-spot .brand small{display:none}.fes-spot .cta-long{display:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* home: a house icon at the start of the menu (the word shows in the phone menu); the logo shows it's a link too */
.links a.nav-home{display:inline-flex;align-items:center;gap:8px}
.links a.nav-home svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.brand{border-radius:999px;padding:4px 4px 4px 14px;margin:-4px;transition:background .2s}
.brand:hover{background:rgba(30,138,77,.1)}
.brand:hover b{color:var(--green-deep)}
@media (min-width:1361px){.fes-spot .nm-long{display:none}html .fes-spot .nav{gap:8px}.fes-spot .nav-fes{padding:6px 10px;font-size:.82rem;gap:6px}}
@media (min-width:1361px){.brand{flex-shrink:0}.cta-long{display:none}}