/* ========================================================================== EPISA theme. One stylesheet, written with logical properties so Arabic (rtl) and English (ltr) share every rule. Sections: fonts, tokens, base, header, hero, home blocks, inner pages, forms, footer, motion. ========================================================================== */ /* ---- fonts ---------------------------------------------------------------- */ @font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(../fonts/readex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(../fonts/readex-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/literata-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Literata";font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/literata-latin-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(../fonts/readex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/literata-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Literata";font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/literata-latin-ext-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Noto Naskh Arabic";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/naskh-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} /* ---- tokens --------------------------------------------------------------- */ :root{ --ink:#0f2a44; --ink-2:#173a5e; --blue:#1462a1; --sky:#5094d5; --mist:#9cc8ee; --tint:#eaf2fa; --paper:#f5f8fb; --white:#fff; --sun:#f2b138; --sun-2:#f6c25f; --text:#0f2a44; --muted:#4a6580; --line:rgba(15,42,68,.13); --line-2:rgba(15,42,68,.28); --f-ui:"Readex Pro","Segoe UI",system-ui,-apple-system,Tahoma,sans-serif; --f-read:"Literata","Noto Naskh Arabic",Georgia,"Times New Roman",serif; --t-display:clamp(2.3rem,1.15rem + 4.5vw,4.6rem); --t-h1:clamp(2.1rem,1.3rem + 3.3vw,4.1rem); --t-h2:clamp(1.8rem,1.2rem + 2.1vw,3.1rem); --t-h3:clamp(1.2rem,1.02rem + .8vw,1.55rem); --wrap:1280px; --gut:clamp(20px,4.2vw,60px); --sec:clamp(56px,6.4vw,96px); --r-s:8px; --r-m:16px; --r-l:28px; --ease:cubic-bezier(.22,.8,.24,1); --dir:1; } html[lang="ar"]{--f-read:"Noto Naskh Arabic","Readex Pro",Tahoma,"Times New Roman",serif} /* Arabic pages never load the Latin serif: digits and Latin words use the UI face that is already there */ html[dir="rtl"]{--dir:-1} /* ---- base ----------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px} body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-ui);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} html[lang="ar"] body{line-height:1.9} img,svg{display:block;max-width:100%} img{height:auto} a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.2em} h1,h2,h3,h4{font-family:var(--f-ui);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0;color:var(--ink);text-wrap:balance} html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{line-height:1.32;letter-spacing:0} p{margin:0 0 1em} ul,ol{margin:0;padding:0} button{font:inherit;color:inherit} ::selection{background:var(--sun);color:var(--ink)} :focus{outline:none} :focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px} .wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto} .wrap--read{width:min(100% - 2*var(--gut),760px)} .sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100;background:var(--ink);color:#fff;padding:.7em 1.1em;border-radius:var(--r-s);transform:translateY(-200%);transition:transform .2s} .skip:focus{transform:none} .hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0} .empty{color:var(--muted);padding-block:40px} [hidden]{display:none!important} .sec{padding-block:var(--sec)} .main{display:block;min-height:60vh} /* arrows face the reading direction */ .arr{flex:none;transition:translate .35s var(--ease)} html[dir="rtl"] .arr{scale:-1 1} /* ---- buttons -------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.85em 1.45em;border-radius:999px;border:1.5px solid transparent;font:500 .95rem/1.2 var(--f-ui);text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);position:relative} .btn:hover .arr{translate:calc(4px*var(--dir)) 0} .btn .ico{width:18px;height:18px} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--ink);color:#fff} .btn-sun{background:var(--sun);color:var(--ink)} .btn-sun:hover{background:var(--sun-2);color:var(--ink)} .btn-line{border-color:var(--line-2);color:var(--ink);background:transparent} .btn-line:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn-lg{padding:1.05em 1.8em;font-size:1rem} .btn-sm{padding:.6em 1.1em;font-size:.86rem} .btn:active{transform:scale(.97)} .more{display:inline-flex;align-items:center;gap:.55em;margin-top:1.1rem;font-weight:500;color:var(--blue)} a:hover>.more .arr,a.more:hover .arr{translate:calc(5px*var(--dir)) 0} .back{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:500;color:var(--muted);text-decoration:none;margin-bottom:1.4rem} .back:hover{color:var(--ink)} .back .arr{scale:-1 1} html[dir="rtl"] .back .arr{scale:1 1} .chip{display:inline-block;font-size:.76rem;font-weight:500;padding:.25em .8em;border-radius:999px;background:var(--tint);color:var(--blue)} .pill{display:inline-flex;align-items:center;gap:.55em;font-size:.8rem;font-weight:500;padding:.35em .95em;border-radius:999px;background:var(--tint);color:var(--ink)} .pill i{width:.6em;height:.6em;border-radius:50%;background:var(--sky)} .pill.st-completed i{background:var(--ink)} .pill.st-planned i{background:var(--sun)} .pill.st-ongoing i{background:var(--sky);box-shadow:0 0 0 0 rgba(80,148,213,.6);animation:pulse 2.2s infinite} @keyframes pulse{70%{box-shadow:0 0 0 .6em rgba(80,148,213,0)}100%{box-shadow:0 0 0 0 rgba(80,148,213,0)}} /* ---- ring motif ----------------------------------------------------------- */ .ring{overflow:visible} .rp1{--c:var(--blue)} .rp2{--c:var(--sky)} .rp3{--c:var(--mist)} .ring-arm{fill:none;stroke:var(--c);stroke-width:20;stroke-linecap:round} .ring-dot{fill:var(--c)} .media-fallback{position:absolute;inset:0;display:grid;place-items:center;background:var(--ink)} .media-fallback .fb-ring{width:46%;opacity:.9} .media-fallback .rp{--c:var(--sky)} .media-fallback .rp1{--c:var(--mist)} .media-fallback .rp3{--c:var(--blue)} /* ---- header ---------------------------------------------------------------- */ .site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:transform .55s var(--ease),background .35s,box-shadow .35s} .site-header.is-scrolled{background:rgba(245,248,251,.88);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:0 1px 0 var(--line)} .site-header.is-hidden{transform:translateY(-100%)} .hd-inner{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);height:80px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none} .brand-mark{width:40px;height:auto;transition:transform .8s var(--ease)} .brand:hover .brand-mark{transform:rotate(120deg)} .brand-text{display:grid;line-height:1.15} .brand-text b{font-size:1.35rem;font-weight:700;letter-spacing:.06em} .brand-text small{font-size:.66rem;font-weight:400;color:var(--muted);letter-spacing:.02em;max-width:16em} .nav{margin-inline-start:auto} .nav>ul{display:flex;list-style:none;gap:2px} .nav a{display:block;text-decoration:none;color:var(--ink);font-weight:500;font-size:.93rem;padding:.7em .85em;position:relative} .nav>ul>li>a>span{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;padding-bottom:.25em;transition:background-size .4s var(--ease)} html[dir="rtl"] .nav>ul>li>a>span{background-position:100% 100%} .nav>ul>li:hover>a>span,.nav>ul>li.is-current>a>span,.nav>ul>li>a:focus-visible>span{background-size:100% 1.5px} .nav .has-sub{position:relative} .nav .has-sub>a::after{content:"";display:inline-block;width:.38em;height:.38em;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;rotate:45deg;margin-inline-start:.55em;translate:0 -.15em} .nav .sub{position:absolute;inset-block-start:100%;inset-inline-start:0;min-width:230px;list-style:none;background:var(--white);border-radius:var(--r-m);box-shadow:0 22px 50px -18px rgba(15,42,68,.35),0 0 0 1px var(--line);padding:8px;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .25s,translate .35s var(--ease),visibility .25s} .nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;translate:0 0} .nav .sub a{border-radius:10px;padding:.7em 1em} .nav .sub a:hover{background:var(--tint)} .hd-tools{display:flex;align-items:center;gap:12px} .lang-switch{display:inline-flex;align-items:center;font-size:.85rem;font-weight:500;color:var(--ink);text-decoration:none;border:1.5px solid var(--line-2);border-radius:999px;padding:.4em 1em;transition:background .3s,color .3s,border-color .3s} .lang-switch:hover{background:var(--ink);border-color:var(--ink);color:#fff} .lang{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:.5em;font:inherit;font-size:.85rem;font-weight:500;color:var(--ink);background:transparent;border:1.5px solid var(--line-2);border-radius:999px;padding:.4em .85em;cursor:pointer;transition:background .3s,color .3s,border-color .3s} .lang-btn:hover,.lang-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .lang-chev{display:inline-block;width:.36em;height:.36em;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;rotate:45deg;translate:0 -.1em;transition:rotate .3s var(--ease)} .lang-btn[aria-expanded="true"] .lang-chev{rotate:225deg;translate:0 .1em} .lang-list{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;min-width:176px;list-style:none;margin:0;padding:8px;background:var(--white);border-radius:var(--r-m);box-shadow:0 22px 50px -18px rgba(15,42,68,.35),0 0 0 1px var(--line);z-index:5} .lang-list[hidden]{display:none} .lang-opt{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.65em 1em;border-radius:10px;text-decoration:none;color:var(--ink);font-size:.93rem;font-weight:500} a.lang-opt:hover,a.lang-opt:focus-visible{background:var(--tint)} .lang-opt.is-current{color:var(--blue);background:var(--tint)} .lang-draft{font-style:normal;color:var(--sun);font-size:1.3em;line-height:1} .lang-pills{display:flex;flex-wrap:wrap;gap:10px} .lang-pills .lang-switch.is-current{background:#fff;color:var(--ink);border-color:#fff} html:not(.js) .lang-list[hidden]{display:block;position:static;box-shadow:none} .menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;cursor:pointer;position:relative;padding:0} .menu-btn-bar{position:absolute;inset-inline:13px;height:1.5px;background:var(--ink);transition:translate .4s var(--ease),rotate .4s var(--ease),background .3s} .menu-btn-bar:first-child{inset-block-start:19px} .menu-btn-bar:last-child{inset-block-start:26px} .menu-btn[aria-expanded="true"]{border-color:rgba(255,255,255,.4)} .menu-btn[aria-expanded="true"] .menu-btn-bar{background:#fff} .menu-btn[aria-expanded="true"] .menu-btn-bar:first-child{translate:0 3.5px;rotate:45deg} .menu-btn[aria-expanded="true"] .menu-btn-bar:last-child{translate:0 -3.5px;rotate:-45deg} /* mobile menu */ .menu{position:fixed;inset:0;z-index:40;background:var(--ink);color:#fff;overflow-y:auto;visibility:hidden;clip-path:circle(0 at 90% 40px)} .menu.is-open{visibility:visible} .menu-inner{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-block:110px 36px;gap:32px} .menu-list{list-style:none} .menu-list li{border-bottom:1px solid rgba(255,255,255,.14);overflow:hidden} .menu-list a{display:block;color:#fff;text-decoration:none;font-size:clamp(1.55rem,6.5vw,2.3rem);font-weight:500;padding:.5em 0;letter-spacing:-.01em;transition:color .25s,padding .35s var(--ease)} .menu-list a:hover{color:var(--sun);padding-inline-start:.4em} .menu-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px} .menu-foot .lang-switch{color:#fff;border-color:rgba(255,255,255,.35)} .menu-foot .lang-switch:hover{background:#fff;color:var(--ink)} .menu-mail{color:var(--mist);margin-inline-start:auto;text-decoration:none} /* without scripts the main navigation is simply shown */ html:not(.js) .nav{display:block} @media (max-width:1060px){ .nav{display:none} .menu-btn{display:block} .hd-tools{margin-inline-start:auto} .hd-donate,.hd-cta{display:none} } @media (max-width:520px){ .brand-text small{display:none} } /* ---- hero ------------------------------------------------------------------ */ .hero{position:relative;overflow:clip;min-height:min(84svh,800px);display:flex;align-items:center;padding-block:clamp(110px,15vh,148px) clamp(40px,7vh,80px)} .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,90px);align-items:center} html[lang="tr"] .hero-title{font-size:calc(var(--t-display)*.88)} .hero-title{font-size:var(--t-display);font-weight:600;line-height:1.05;letter-spacing:-.035em;margin:0 0 .4em;max-width:13em} html[lang="ar"] .hero-title{line-height:1.25;letter-spacing:0} .hero-sub{font-family:var(--f-read);font-size:clamp(1.08rem,.98rem + .5vw,1.34rem);line-height:1.6;color:var(--muted);max-width:33em;margin:0 0 2.1rem} html[lang="ar"] .hero-sub{font-size:clamp(1.15rem,1.02rem + .55vw,1.4rem);line-height:1.95} .hero-cta{display:flex;flex-wrap:wrap;gap:12px} .hero-art{position:relative;width:min(100%,580px);aspect-ratio:1;justify-self:end} .hero-art::before{content:"";position:absolute;inset:3%;border-radius:50%;background:var(--tint)} .hero-photo{position:absolute;inset:21.5%;border-radius:50%;overflow:hidden;background:var(--mist)} .hero-photo img{width:100%;height:100%;object-fit:cover} .hero-ring{position:absolute;inset:0;width:100%;height:100%;z-index:2} /* small photo circles that travel around the ring and grow into the main circle (see initHero) */ .orb{position:absolute;inset:21.5%;border-radius:50%;overflow:hidden;background:var(--mist);display:none;z-index:3} .orb img{width:100%;height:100%;object-fit:cover} .has-orbs .orb{display:block} .has-orbs .hero-photo,.has-orbs .orb{z-index:3;will-change:transform;box-shadow:0 0 0 var(--bw,0px) var(--bc,var(--blue))} .hero-ripple{position:absolute;inset:21.5%;border-radius:50%;border:2px solid var(--sky);opacity:0;pointer-events:none;z-index:1} .has-orbs .orb{visibility:hidden} .has-orbs .orb.is-on{visibility:visible} @media (max-width:900px){ .hero{min-height:0;padding-top:118px} .hero-grid{grid-template-columns:1fr} .hero-art{order:-1;width:min(62vw,300px);justify-self:center;margin-bottom:4px} .hero-title{max-width:none} } /* the manifesto: one large sentence among small photo circles */ .statement{position:relative;background:var(--tint);color:var(--ink);overflow:clip} .st-pin{position:relative;min-height:min(88svh,860px);display:grid;place-items:center;overflow:hidden;padding-block:clamp(110px,12vw,170px)} .st-ring{position:absolute;inset:0;margin:auto;width:min(130vw,1180px);height:min(130vw,1180px);opacity:.3;pointer-events:none} .st-copy{position:relative;z-index:2} .st-text{font-size:clamp(1.3rem,.9rem + 1.45vw,2rem);line-height:1.38;font-weight:500;letter-spacing:-.018em;max-width:24.5em;margin-inline:auto;text-align:center;text-wrap:balance} html[lang="ar"] .st-text{line-height:1.8;letter-spacing:0;font-size:clamp(1.3rem,.9rem + 1.3vw,1.9rem)} .st-lead{color:var(--blue)} .st-orb{position:absolute;z-index:1;width:var(--sz);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--mist);box-shadow:0 0 0 clamp(3px,.35vw,5px) var(--bc),0 26px 40px -22px rgba(15,42,68,.45)} .st-orb img{width:100%;height:100%;object-fit:cover} .st-orb--1{--sz:clamp(64px,9vw,136px);--bc:var(--blue);inset-inline-start:5%;inset-block-start:15%} .st-orb--2{--sz:clamp(50px,6.4vw,100px);--bc:var(--sky);inset-inline-end:9%;inset-block-start:11%} .st-orb--3{--sz:clamp(54px,7.2vw,112px);--bc:var(--mist);inset-inline-start:11%;inset-block-end:11%} .st-orb--4{--sz:clamp(68px,9.6vw,150px);--bc:var(--sun);inset-inline-end:5%;inset-block-end:14%} @media (max-width:760px){ .st-orb--1{inset-inline-start:4%;inset-block-start:7%} .st-orb--2{inset-inline-end:5%;inset-block-start:5%} .st-orb--3{inset-inline-start:6%;inset-block-end:5%} .st-orb--4{inset-inline-end:3%;inset-block-end:6%} .st-text{max-width:none} .st-ring{width:min(170vw,760px);height:min(170vw,760px);opacity:.2} .st-orb--1{inset-block-start:16%} .st-orb--2{inset-block-start:12%} .st-orb--3{inset-block-end:14%} .st-orb--4{inset-block-end:12%} } .anim .statement{height:190vh} .anim .st-pin{position:sticky;top:0;height:100svh;min-height:0;padding:0} .anim .sw{opacity:.2} /* ---- section headings ----------------------------------------------------- */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,64px)} .sec-title{font-size:var(--t-h2);font-weight:600;letter-spacing:-.025em;max-width:16em} .sec-sub{max-width:40em;color:var(--muted);margin:1em 0 0;font-size:1.04rem} /* ---- programs index ------------------------------------------------------- */ .idx{list-style:none;border-top:1px solid var(--line)} .idx-item{border-bottom:1px solid var(--line)} .idx-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(18px,2.4vw,30px) clamp(6px,1.5vw,22px);color:var(--ink);text-decoration:none;isolation:isolate} .idx-row::before{content:"";position:absolute;inset:0;background:var(--tint);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease);z-index:-1} html[dir="rtl"] .idx-row::before{transform-origin:100% 50%} .idx-row:hover::before,.idx-row:focus-visible::before{transform:scaleX(1)} .idx-ico{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;color:var(--blue);transition:background .4s,color .4s,border-color .4s,rotate .7s var(--ease)} .idx-ico .ico{width:26px;height:26px} .idx-ico--lg{width:72px;height:72px} .idx-ico--lg .ico{width:32px;height:32px} .idx-ico--xl{width:112px;height:112px} .idx-ico--xl .ico{width:48px;height:48px} .idx-row:hover .idx-ico{background:var(--blue);border-color:var(--blue);color:#fff} .idx-main{display:grid;gap:.3em;min-width:0} .idx-title{font-size:clamp(1.25rem,1rem + 1.25vw,2.05rem);font-weight:500;letter-spacing:-.015em;transition:translate .55s var(--ease)} html[lang="ar"] .idx-title{letter-spacing:0} .idx-row:hover .idx-title{translate:calc(10px*var(--dir)) 0} .idx-ex{color:var(--muted);max-width:46em;font-size:.97rem;line-height:1.6} .idx-go{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);color:var(--ink);transition:background .35s,color .35s,border-color .35s} .idx-row:hover .idx-go{background:var(--ink);color:#fff;border-color:var(--ink)} .idx-row:hover .idx-go .arr{translate:calc(3px*var(--dir)) 0} .idx--compact .idx-row{padding-block:16px} /* programs page: one block per program */ .pblocks{border-top:1px solid var(--line)} .pblock{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,6vw,100px);padding-block:clamp(36px,5vw,72px);border-bottom:1px solid var(--line);align-items:start} .pblock-head{display:flex;align-items:center;gap:clamp(16px,2vw,26px);position:sticky;inset-block-start:110px} .pblock-title{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.5rem);font-weight:500;letter-spacing:-.02em} html[lang="ar"] .pblock-title{letter-spacing:0} .pblock-title a{color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease)} html[dir="rtl"] .pblock-title a{background-position:100% 100%} .pblock:hover .pblock-title a{background-size:100% 1.5px} .pblock:hover .idx-ico{background:var(--blue);border-color:var(--blue);color:#fff} .pblock-ex{font-family:var(--f-read);font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.7;color:var(--ink);margin:0 0 1.4rem;max-width:34em} html[lang="ar"] .pblock-ex{line-height:2} .pblock .ticks{margin-bottom:1.8rem;color:var(--muted)} @media (max-width:820px){ .pblock{grid-template-columns:1fr;gap:20px} .pblock-head{position:static} } @media (max-width:700px){ .idx-ex{display:none} .idx-ico{width:46px;height:46px} .idx-go{width:38px;height:38px} } /* ---- stats ---------------------------------------------------------------- */ .stats{background:var(--white);padding-block:clamp(56px,8vw,110px);border-block:1px solid var(--line)} .stats-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px 0} .stat{padding-inline:clamp(14px,2.6vw,40px);border-inline-start:1px solid var(--line)} .stat:first-child{border-inline-start:0;padding-inline-start:0} .stat-num{font-size:clamp(2.7rem,1.4rem + 5vw,6rem);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;unicode-bidi:isolate} html[dir="rtl"] .stat-num{text-align:right} .stat-suf{color:var(--sky);letter-spacing:0} .stat-label{color:var(--muted);margin:.9em 0 0;max-width:15em;font-size:.97rem;line-height:1.5} @media (max-width:760px){ .stats-grid{grid-template-columns:repeat(2,1fr)} .stat:nth-child(odd){border-inline-start:0;padding-inline-start:0} } .stats-lic{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(34px,5vw,60px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--line)} .stats-lic-ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:var(--tint)} .stats-lic-ico .ico{width:22px;height:22px} .stats-lic-text{flex:1 1 280px;min-width:0;margin:0;font-family:var(--f-read);font-size:1.02rem;line-height:1.6;color:var(--muted)} html[lang="ar"] .stats-lic-text{line-height:1.9} .stats-lic-link{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;color:var(--blue);text-decoration:none} .stats-lic-link:hover{color:var(--ink)} /* ---- project cards -------------------------------------------------------- */ .pgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px)} .pgrid-side{display:grid;gap:clamp(20px,2.4vw,32px);align-content:start} .pgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(24px,3.4vw,52px)} .pcard-link{display:block;color:inherit;text-decoration:none} .pcard-media{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--tint);aspect-ratio:4/3} .pcard--big .pcard-media{aspect-ratio:4/3.15} .pcard-media img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;scale:1.2;transform-origin:50% 6%;transition:transform 1s var(--ease)} .pcard-media::after,.acard-media::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(to top,rgba(15,42,68,.3),rgba(15,42,68,0));pointer-events:none} .pcard-link:hover .pcard-media img{transform:scale(1.05)} .pcard-body{padding-top:1.3rem} .pcard-body .pill{margin-bottom:.9rem} .pcard-title{font-size:var(--t-h3);font-weight:600;margin-bottom:.5rem} .pcard--big .pcard-title{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem)} .pcard-ex{color:var(--muted);margin:0 0 .6rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pcard-meta{font-size:.86rem;color:var(--muted);margin:0} .pcard--compact .pcard-link{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:clamp(16px,2vw,26px);align-items:center} .pcard--compact .pcard-media{aspect-ratio:1;border-radius:var(--r-m)} .pcard--compact .pcard-body{padding-top:0} .pcard--compact .pcard-title{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem)} .pcard--compact .more{margin-top:.6rem;font-size:.9rem} @media (max-width:900px){ .pgrid{grid-template-columns:1fr} .pgrid2{grid-template-columns:1fr} } @media (max-width:480px){ .pcard--compact .pcard-link{grid-template-columns:1fr} .pcard--compact .pcard-media{aspect-ratio:16/10} } /* ---- activity rail and grid ----------------------------------------------- */ .rail{position:relative} .rail-track{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-inline:max(var(--gut),calc((100% - var(--wrap))/2));scroll-padding-inline:max(var(--gut),calc((100% - var(--wrap))/2));padding-block:4px 8px;cursor:grab} .rail-track::-webkit-scrollbar{display:none} .rail-track.is-drag{cursor:grabbing;scroll-snap-type:none} .rail-track.is-drag a{pointer-events:none} .rail-track .acard{flex:0 0 clamp(260px,29vw,390px);scroll-snap-align:start} .rail-ctl{display:flex;align-items:center;gap:28px;margin-top:30px} .rail-bar{flex:1;height:2px;background:var(--line);position:relative;border-radius:2px} .rail-bar i{position:absolute;inset-block:-1px;height:4px;border-radius:4px;background:var(--ink);inset-inline-start:0;width:30%} .rail-btns{display:flex;gap:10px} .rail-btn{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .3s,color .3s,border-color .3s,opacity .3s} .rail-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .rail-btn[data-dir="-1"] .arr{scale:-1 1} html[dir="rtl"] .rail-btn[data-dir="-1"] .arr{scale:1 1} .rail-btn[disabled]{opacity:.3;pointer-events:none} .agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(32px,3.4vw,52px) clamp(20px,2.6vw,36px)} .acard-link{display:block;color:inherit;text-decoration:none} .acard-media{position:relative;overflow:hidden;border-radius:var(--r-m);aspect-ratio:4/3;background:var(--tint)} .acard-media img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;scale:1.2;transform-origin:50% 6%;transition:transform 1s var(--ease)} .acard-link:hover .acard-media img{transform:scale(1.06)} .acard-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:1.1rem 0 .55rem;font-size:.84rem;color:var(--muted)} .acard-title{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);font-weight:600;line-height:1.3;margin-bottom:.5rem;text-wrap:pretty} .acard-loc{display:flex;align-items:center;gap:.4em;font-size:.86rem;color:var(--muted);margin:0} .acard-loc .ico{width:16px;height:16px;flex:none} .acard-link:hover .acard-title{color:var(--blue)} /* ---- research rows -------------------------------------------------------- */ .rlist{border-top:1px solid var(--line)} .rrow{display:grid;grid-template-columns:clamp(72px,10vw,150px) minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);align-items:center;padding:clamp(22px,3vw,36px) clamp(4px,1.2vw,18px);border-bottom:1px solid var(--line);transition:background .4s} .rrow:hover{background:var(--white)} .rrow-year{font-size:clamp(1.8rem,1.1rem + 2.2vw,3.2rem);font-weight:300;letter-spacing:-.04em;color:var(--sky);font-variant-numeric:tabular-nums;line-height:1} .rrow-main{min-width:0} .rrow-main .chip{margin-bottom:.7rem} .rrow-title{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);font-weight:600;line-height:1.3;text-wrap:pretty} .rrow-title a{color:var(--ink);text-decoration:none} .rrow-title a:hover{color:var(--blue)} .rrow-by{margin:.5rem 0 0;color:var(--muted);font-size:.93rem} .rrow-act{display:flex;align-items:center;gap:14px} .rrow-open{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s,border-color .3s} .rrow-open:hover{background:var(--ink);border-color:var(--ink);color:#fff} @media (max-width:760px){ .rrow{grid-template-columns:1fr} .rrow-act{justify-content:space-between} } /* ---- partner logos -------------------------------------------------------- */ .sec-partners{padding-bottom:calc(var(--sec)*.8)} .marq{direction:ltr;overflow:hidden;padding-block:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .marq-track{display:flex;width:max-content;animation:marq 48s linear infinite} .marq:hover .marq-track{animation-play-state:paused} .marq-list{display:flex;align-items:center;list-style:none;gap:clamp(48px,7vw,104px);padding-inline-end:clamp(48px,7vw,104px)} .marq-list a,.marq-list span{display:block} .marq-list .logo{height:clamp(42px,5vw,66px);width:auto;max-width:230px;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .4s,opacity .4s} .marq-list a:hover .logo,.marq-list a:focus-visible .logo{filter:none;opacity:1} @keyframes marq{to{transform:translateX(-50%)}} .pgroup{margin-bottom:clamp(48px,7vw,96px)} .pgroup:last-child{margin-bottom:0} .pgroup-title{font-size:var(--t-h3);margin-bottom:1.6rem;color:var(--muted);font-weight:500} .plogos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(14px,2vw,24px)} .plogo-card{display:flex;flex-direction:column;gap:18px;height:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(24px,3vw,36px);text-decoration:none;color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s} .plogo a.plogo-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(15,42,68,.35);border-color:transparent} .plogo-img{display:grid;place-items:center;height:92px} .plogo-img img{max-height:92px;width:auto;max-width:100%;object-fit:contain} .plogo-name{font-size:.9rem;color:var(--muted);text-align:center;line-height:1.4;margin-top:auto} /* ---- closing call --------------------------------------------------------- */ .cta{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding-block:clamp(84px,12vw,170px)} .cta-ring{position:absolute;inset-inline-end:-10%;inset-block-start:50%;translate:0 -50%;width:min(76vw,760px);opacity:.3;pointer-events:none} html[dir="rtl"] .cta-ring{translate:0 -50%} .cta .rp1,.cta .rp2,.cta .rp3{--c:#fff} .cta .rp2{opacity:.7} .cta .rp3{opacity:.45} .cta-inner{position:relative} .cta-title{color:#fff;font-size:var(--t-h1);max-width:13em;margin-bottom:.5em} .cta-text{font-family:var(--f-read);font-size:clamp(1.08rem,1rem + .5vw,1.3rem);line-height:1.65;max-width:34em;color:rgba(255,255,255,.88);margin-bottom:2rem} html[lang="ar"] .cta-text{line-height:1.95} /* ---- inner page heading --------------------------------------------------- */ .ph{position:relative;padding-block:clamp(130px,18vw,200px) clamp(44px,6vw,84px);overflow:hidden;background:linear-gradient(180deg,var(--tint),rgba(234,242,250,0))} .ph-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;position:relative} .ph-title{font-size:var(--t-h1);font-weight:600;letter-spacing:-.035em;line-height:1.05;max-width:15em} html[lang="ar"] .ph-title{letter-spacing:0;line-height:1.28} .ph-lead{font-family:var(--f-read);font-size:clamp(1.1rem,1rem + .55vw,1.38rem);line-height:1.6;color:var(--muted);max-width:36em;margin:1.2rem 0 0} html[lang="ar"] .ph-lead{line-height:1.95} .ph .pill{margin-bottom:1.1rem} .ph + .sec,.ph + section{padding-top:clamp(28px,4vw,64px)} .ph-art{width:clamp(150px,21vw,300px);opacity:.95} .ph-ring{width:100%} .ph--single .ph-art{display:none} .ph--single .ph-inner{grid-template-columns:1fr} .ph--single .ph-title{max-width:18em;font-size:clamp(2rem,1.3rem + 2.8vw,3.6rem)} @media (max-width:760px){ .ph-inner{grid-template-columns:1fr} .ph-art{position:absolute;inset-inline-end:-30px;inset-block-start:-70px;width:150px;opacity:.2} } /* ---- article pages -------------------------------------------------------- */ .feature{position:relative;overflow:hidden;border-radius:var(--r-l);aspect-ratio:21/9;background:var(--tint);margin:0} .feature img{width:100%;height:100%;object-fit:cover} @media (max-width:700px){.feature{aspect-ratio:4/3;border-radius:var(--r-m)}} .hls{padding-block:clamp(40px,6vw,80px) 0} .hls-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;border-block:1px solid var(--line)} .hl{display:flex;flex-direction:column;gap:.6rem;padding:clamp(22px,3vw,36px) clamp(14px,2vw,28px);border-inline-start:1px solid var(--line)} .hl:first-child{border-inline-start:0;padding-inline-start:0} .hl-num{font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums;unicode-bidi:isolate} html[dir="rtl"] .hl-num{text-align:right} .hl-text{color:var(--ink);line-height:1.45;font-size:.98rem} .hl:not(.has-num){justify-content:center} .hl:not(.has-num) .hl-text{font-weight:500;font-size:1.05rem} @media (max-width:640px){ .hl{border-inline-start:0;border-top:1px solid var(--line);padding-inline:0} .hl:first-child{border-top:0} } .art-wrap{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start} .art-wrap--narrow{grid-template-columns:minmax(120px,200px) minmax(0,1fr)} .facts{position:sticky;top:110px;display:grid;gap:1.5rem} .facts-h{font-size:1rem;color:var(--muted);font-weight:500} .facts dl{margin:0;border-top:1px solid var(--line)} .facts dl>div{padding:.95rem 0;border-bottom:1px solid var(--line)} .facts dt{font-size:.8rem;color:var(--muted);margin-bottom:.2rem} .facts dd{margin:0;font-weight:500;line-height:1.45} .facts dd a{color:var(--blue)} .facts .btn{justify-self:start} .facts--icon{position:static} .doc-cover{position:relative;overflow:hidden;border-radius:var(--r-m);aspect-ratio:3/4;background:var(--tint)} .doc-cover img{width:100%;height:100%;object-fit:cover} .doc-cover--typo{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;padding:clamp(20px,2.4vw,30px);isolation:isolate} .doc-cover--typo .doc-ring{position:absolute;inset-block-start:-14%;inset-inline-end:-22%;width:78%;height:auto;z-index:-1;opacity:.6} .doc-cover--typo .rp{--c:var(--sky)} .doc-cover-type{font-size:.82rem;color:var(--mist);letter-spacing:.02em} .doc-cover-title{font-size:clamp(1.15rem,.9rem + .9vw,1.55rem);font-weight:600;line-height:1.2;letter-spacing:-.015em;text-wrap:balance} html[lang="ar"] .doc-cover-title{line-height:1.4;letter-spacing:0} .doc-cover-year{font-size:2.2rem;font-weight:300;letter-spacing:-.03em;color:var(--sun);line-height:1;margin-top:.5rem} .art{min-width:0} .art-h{font-size:var(--t-h3);margin:2.4rem 0 1.2rem} @media (max-width:900px){ .art-wrap,.art-wrap--narrow{grid-template-columns:1fr} .facts{position:static} .art{order:-1} .facts--icon{display:none} } /* ---- where we work (map) ---------------------------------------------------- */ .sec-map{background:var(--ink);color:#fff;position:relative;overflow:hidden} .sec-map::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 78% 40%,rgba(80,148,213,.22),transparent 70%);pointer-events:none} .sec-map .sec-title{color:#fff;margin:0 0 1.1rem} .map-grid{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);grid-template-areas:"copy stage" "list stage";grid-template-rows:auto 1fr;column-gap:clamp(28px,4.4vw,80px);align-items:start} .map-copy{grid-area:copy} .map-list{grid-area:list} .map-stage{grid-area:stage;align-self:center} .map-lead{font-family:var(--f-read);font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);line-height:1.7;color:rgba(255,255,255,.8);margin:0;max-width:30em} .map-list{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;gap:.55rem;max-width:30rem;align-content:start} .map-item{display:flex;align-items:center;gap:.9rem;width:100%;text-align:start;padding:.9rem 1.05rem;border-radius:14px;border:1px solid rgba(156,200,238,.24);background:transparent;color:#fff;font:500 1rem/1.25 var(--f-ui);cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease)} .map-item:hover{background:rgba(156,200,238,.1);border-color:rgba(156,200,238,.5)} .map-item:focus-visible{outline:2px solid var(--sun);outline-offset:2px} .map-item.is-active{background:rgba(242,177,56,.12);border-color:var(--sun)} .map-item-kind{margin-inline-start:auto;font-size:.82rem;font-weight:400;color:var(--mist)} .map-dot{flex:none;width:12px;height:12px;border-radius:50%;display:inline-block;box-sizing:border-box} .map-dot--office{background:var(--sun)} .map-dot--field{background:#fff;box-shadow:0 0 0 3px rgba(242,177,56,.55)} .map-dot--event{background:transparent;border:2.5px solid var(--sun)} .map-dot--license{background:var(--sun);box-shadow:0 0 0 2px var(--ink),0 0 0 4px #fff} .map-stage{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid rgba(156,200,238,.2);background:#0a2037;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)} .map-svg{display:block;width:100%;height:auto;touch-action:manipulation;direction:ltr} /* a map is not mirrored: label sides stay left/right on Arabic pages */ .map-sea{fill:#0a2037} .map-land{stroke:rgba(156,200,238,.42);stroke-width:.9;stroke-linejoin:round} .map-land--ot{fill:#13314f} .map-land--tr{fill:#1c4a77} .map-land--sy{fill:#1462a1;stroke:rgba(255,255,255,.55);stroke-width:1.1} .map-s{transform:scale(var(--u,1));transform-origin:0 0} .map-country{font:500 12px/1 var(--f-ui);letter-spacing:.14em;fill:rgba(255,255,255,.5)} html[lang="ar"] .map-country{letter-spacing:0;font-size:14px} .pin{cursor:pointer} .pin-s{transform:scale(var(--u,1));transform-origin:0 0} .pin-hit{fill:transparent} .pin-core{fill:var(--sun);stroke:var(--ink);stroke-width:2;transition:r .3s var(--ease),fill .3s} .pin-pulse{fill:var(--sun);opacity:.5;transform-box:fill-box;transform-origin:center;animation:pin-pulse 2.8s var(--ease) infinite} .pin--field .pin-core{fill:#fff} .pin--event .pin-core{fill:var(--ink);stroke:var(--sun);stroke-width:3} .pin--license .pin-core{fill:var(--sun);stroke:#fff;stroke-width:3} .pin--event .pin-pulse{display:none} .pin:nth-of-type(2n) .pin-pulse{animation-delay:-1.1s} .pin:nth-of-type(3n) .pin-pulse{animation-delay:-1.9s} .pin-name{font:600 13px/1 var(--f-ui);fill:#fff;paint-order:stroke;stroke:#0a2037;stroke-width:4px;stroke-linejoin:round;pointer-events:none} html[lang="ar"] .pin-name{font-size:15px} .pin:hover .pin-core,.pin.is-active .pin-core{r:8} .pin.is-active .pin-name{fill:var(--sun)} @media (max-width:700px){.map-svg.is-full .pin--office .pin-name,.map-svg.is-full .pin--license .pin-name,.map-svg.is-full .pin--field .pin-name{display:none}} @keyframes pin-pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.4);opacity:0}} .map-reset{position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:2;padding:.5em 1em;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(10,32,55,.82);color:#fff;font:500 .85rem/1.2 var(--f-ui);cursor:pointer;backdrop-filter:blur(6px);transition:background .25s} .map-reset:hover{background:rgba(10,32,55,.98)} .map-info{position:absolute;inset-inline:14px;inset-block-end:14px;z-index:2;pointer-events:none} .map-hint{margin:0;display:inline-block;padding:.5em 1em;border-radius:999px;background:rgba(10,32,55,.78);color:rgba(255,255,255,.85);font:400 .88rem/1.3 var(--f-ui);backdrop-filter:blur(6px)} .map-card{pointer-events:auto;max-width:min(26rem,100%);padding:1.1rem 1.25rem 1.2rem;border-radius:var(--r-m);background:rgba(10,32,55,.94);border:1px solid rgba(242,177,56,.55);backdrop-filter:blur(8px);animation:map-card-in .45s var(--ease)} .map-card[hidden]{display:none} .map-card-kind{display:flex;align-items:center;gap:.6em;margin:0 0 .5rem;font:500 .82rem/1 var(--f-ui);color:var(--mist)} .map-card-name{margin:0;font:600 1.35rem/1.2 var(--f-ui);color:#fff;letter-spacing:-.01em} .map-card-text{margin:.55rem 0 0;font-family:var(--f-read);font-size:1rem;line-height:1.6;color:rgba(255,255,255,.85)} html[lang="ar"] .map-card-text{line-height:1.85} .map-card-link{display:inline-flex;align-items:center;gap:.45em;margin-top:.85rem;font:600 .92rem/1 var(--f-ui);color:var(--sun)} .map-card-link .arr{width:16px;height:16px} @keyframes map-card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (max-width:900px){ .map-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stage" "list";grid-template-rows:none;row-gap:clamp(20px,5vw,32px)} .map-list{margin-top:0;max-width:none} .map-info{position:static;padding:14px;pointer-events:auto} .map-hint{background:none;padding:0;backdrop-filter:none} .map-card{max-width:none;backdrop-filter:none} } /* ---- accountability page ---------------------------------------------------- */ .ac-h{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em;margin:0 0 1.2rem;text-wrap:balance} html[lang="ar"] .ac-h{line-height:1.35;letter-spacing:0} .ac-lead{font-family:var(--f-read);font-size:clamp(1.08rem,1rem + .4vw,1.28rem);line-height:1.7;color:var(--muted);margin:0 0 2rem;max-width:36em} html[lang="ar"] .ac-lead{line-height:1.95} .sec-facts{background:var(--white);border-block:1px solid var(--line)} .acf{list-style:none;margin:clamp(24px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,22px)} .acf-card{grid-column:span var(--span,4)} @media (max-width:1000px){.acf-card{grid-column:span 6}.acf-card:last-child:nth-child(odd){grid-column:span 12}} @media (max-width:620px){.acf-card,.acf-card:last-child:nth-child(odd){grid-column:span 12}} .acf-card{padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);display:flex;flex-direction:column;gap:.35rem;transition:border-color .3s,transform .4s var(--ease),box-shadow .4s} .acf-card:hover{border-color:var(--sky);transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(15,42,68,.45)} .acf-ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:var(--tint);margin-bottom:.8rem} .acf-ico .ico{width:24px;height:24px} .acf-title{font:600 1.12rem/1.3 var(--f-ui);margin:0;color:var(--ink)} .acf-text{font-family:var(--f-read);font-size:1.02rem;line-height:1.65;color:var(--muted);margin:0} html[lang="ar"] .acf-text{line-height:1.9} .sec-license{background:var(--tint);border-bottom:1px solid var(--line)} .lic{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,3.6vw,48px);border:1px solid var(--line);border-radius:var(--r-l,22px);background:var(--white);box-shadow:0 30px 60px -44px rgba(15,42,68,.5)} .lic.has-doc{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} .lic-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem} .lic-ico{width:56px;height:56px;margin-bottom:1rem;background:var(--ink);color:var(--sun)} .lic-ico .ico{width:28px;height:28px} .lic-title{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em;margin:0 0 .6rem;text-wrap:balance} html[lang="ar"] .lic-title{line-height:1.35;letter-spacing:0} .lic-text{font-family:var(--f-read);font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.7;color:var(--muted);margin:0 0 1.4rem;max-width:32em} html[lang="ar"] .lic-text{line-height:1.95} .lic-doc{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 50px -26px rgba(15,42,68,.55);transition:transform .5s var(--ease),box-shadow .5s;background:var(--paper)} .lic-doc:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 34px 60px -26px rgba(15,42,68,.6)} .lic-doc img{display:block;width:100%;height:auto} @media (max-width:800px){.lic.has-doc{grid-template-columns:1fr}} .docgroup{margin-top:clamp(28px,4vw,44px)} .docgroup-h{font:600 1.05rem/1.3 var(--f-ui);color:var(--blue);margin:0 0 .4rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink)} .doclist{list-style:none;margin:0;padding:0} .docrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:1.3rem 0;border-bottom:1px solid var(--line)} .docrow-main{flex:1 1 320px;min-width:0} .docrow-title{font:600 1.15rem/1.35 var(--f-ui);margin:0;color:var(--ink)} .docrow-meta{font:500 .85rem/1.4 var(--f-ui);color:var(--muted);margin:.25rem 0 0} .docrow-sum{font-family:var(--f-read);font-size:1rem;line-height:1.6;color:var(--muted);margin:.5rem 0 0} .docrow-files{display:flex;flex-wrap:wrap;gap:.5rem} .docrow-files .btn{padding:.6em 1.1em;font-size:.9rem} .ac-empty{display:flex;gap:1.1rem;align-items:flex-start;padding:clamp(22px,3vw,32px);border:1.5px dashed var(--line-2);border-radius:var(--r-m);background:var(--white)} .ac-empty p{font-family:var(--f-read);font-size:1.08rem;line-height:1.7;color:var(--muted);margin:0} .ac-empty-ico{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:var(--tint)} .ac-empty-ico .ico{width:22px;height:22px} .sec-ask{background:var(--ink);color:#fff} .sec-ask .ac-h{color:#fff} .sec-ask .ac-lead{color:rgba(255,255,255,.82)} .ac-ask-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px} .ac-mail{color:var(--mist);font-weight:500;text-decoration:underline;text-underline-offset:4px} .ac-mail:hover{color:#fff} .duo-more{margin-top:1.4rem!important} /* share row */ .share{margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)} .share-h{font:600 1rem/1.3 var(--f-ui);color:var(--ink);margin:0 0 1rem;letter-spacing:0} .share-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem} .share-btn{display:inline-flex;align-items:center;gap:.55em;padding:.62em 1.05em;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;color:var(--ink);font:500 .9rem/1.2 var(--f-ui);text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s} .share-btn .ico{width:18px;height:18px;color:var(--blue);transition:color .25s} .share-btn:hover,.share-btn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff} .share-btn:hover .ico,.share-btn:focus-visible .ico{color:var(--sun)} .share-msg{min-height:1.5em;margin:.9rem 0 0;font:500 .9rem/1.5 var(--f-ui);color:var(--blue);opacity:0;transition:opacity .25s} .share-msg.is-on{opacity:1} @media (max-width:520px){.share-btn span{font-size:.85rem}.share-list{gap:.5rem}} /* long-form text */ .prose{font-family:var(--f-read);font-size:1.12rem;line-height:1.78;color:#1b3652} html[lang="ar"] .prose{font-size:1.25rem;line-height:2.05} .prose>*+*{margin-top:1.15em} .prose p{margin-bottom:0} .prose h2,.prose h3,.prose h4{font-family:var(--f-ui);margin-top:2.2em;margin-bottom:.2em;letter-spacing:-.01em} .prose h2{font-size:var(--t-h2)} .prose h3{font-size:var(--t-h3)} .prose ul,.prose ol{padding-inline-start:1.3em} .prose li{margin-bottom:.6em;padding-inline-start:.2em} .prose li::marker{color:var(--sky)} .prose a{color:var(--blue)} .prose img{border-radius:var(--r-m);margin-block:1.5em} .prose strong{font-weight:700;color:var(--ink)} .prose blockquote{margin-inline:0;padding-inline-start:1.4em;border-inline-start:3px solid var(--sun);font-style:italic} .prose-lg{font-size:1.18rem} .lead-p{font-size:1.35em;line-height:1.55;color:var(--ink);font-family:var(--f-ui);font-weight:400;letter-spacing:-.01em} html[lang="ar"] .lead-p{line-height:1.9;letter-spacing:0} .ticks{list-style:none;display:grid;gap:.85rem} .ticks li{position:relative;padding-inline-start:1.7em;line-height:1.55} .ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;width:.75em;height:.75em;border-radius:50%;border:2px solid var(--sky);background:var(--paper);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 20px var(--sky)} .ticks--lg li{font-size:1.1rem;padding-block:.85rem;border-bottom:1px solid var(--line);padding-inline-start:2em} .ticks--lg li::before{inset-block-start:1.35em} .gal{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(10px,1.4vw,18px)} .gal-item a{display:block;overflow:hidden;border-radius:var(--r-m);aspect-ratio:4/3;background:var(--tint);cursor:zoom-in} .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .gal-item a:hover img{transform:scale(1.06)} .nextlink{display:block;background:var(--ink);color:#fff;text-decoration:none;padding-block:clamp(48px,7vw,96px);overflow:hidden} .nextlink .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .nextlink-k{flex-basis:100%;color:var(--mist);font-size:.9rem} .nextlink-t{font-size:clamp(1.5rem,1rem + 2.6vw,3.3rem);font-weight:600;letter-spacing:-.025em;line-height:1.15;max-width:18em;transition:translate .6s var(--ease)} .nextlink .arr{width:clamp(32px,4vw,56px);height:auto;color:var(--sun);transition:translate .6s var(--ease)} .nextlink:hover .nextlink-t{translate:calc(14px*var(--dir)) 0} .nextlink:hover .arr{translate:calc(14px*var(--dir)) 0} /* ---- about ---------------------------------------------------------------- */ .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,100px);align-items:start} .split-media{margin:0;position:sticky;top:110px;overflow:hidden;border-radius:var(--r-l);aspect-ratio:4/5;background:var(--tint)} .split-media img{width:100%;height:100%;object-fit:cover} @media (max-width:900px){.split{grid-template-columns:1fr}.split-media{position:relative;top:0;aspect-ratio:4/3}} .vm-grid{display:grid;grid-template-columns:1fr 1fr} .vm-box{padding:clamp(56px,8vw,120px) var(--gut);display:flex} .vm-vision{background:var(--ink);color:#fff;justify-content:flex-end} .vm-mission{background:var(--blue);color:#fff} .vm-box .wrap-half{width:min(100%,600px)} .vm-title{color:#fff;font-size:var(--t-h2);margin-bottom:.7em} .vm-box p{font-family:var(--f-read);font-size:clamp(1.05rem,.98rem + .35vw,1.24rem);line-height:1.75;color:rgba(255,255,255,.9);margin:0} html[lang="ar"] .vm-box p{font-size:clamp(1.15rem,1.05rem + .4vw,1.34rem);line-height:2} @media (max-width:900px){.vm-grid{grid-template-columns:1fr}.vm-vision{justify-content:flex-start}} .values{list-style:none;border-top:1px solid var(--line)} .value{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,5vw,80px);padding:clamp(24px,3.4vw,44px) 0;border-bottom:1px solid var(--line)} .value-title{font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);font-weight:500} .value-text{color:var(--muted);margin:0;max-width:34em} @media (max-width:760px){.value{grid-template-columns:1fr;gap:10px}} .sec-duo{background:var(--white);border-block:1px solid var(--line)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px)} .duo-title{font-size:var(--t-h3);margin-bottom:1rem} .duo-box p{font-family:var(--f-read);font-size:1.1rem;line-height:1.8;margin:0} html[lang="ar"] .duo-box p{font-size:1.2rem;line-height:2} @media (max-width:760px){.duo{grid-template-columns:1fr}} .links2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)} @media (max-width:760px){.links2{grid-template-columns:1fr}} .biglink{display:grid;gap:.5rem;position:relative;padding:clamp(28px,4vw,48px);padding-inline-end:clamp(70px,8vw,110px);border:1.5px solid var(--line-2);border-radius:var(--r-l);text-decoration:none;color:var(--ink);transition:background .4s,color .4s,border-color .4s} .biglink-t{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);font-weight:600} .biglink-s{color:var(--muted);transition:color .4s;max-width:26em} .biglink .arr{position:absolute;inset-inline-end:clamp(24px,3vw,40px);inset-block-start:50%;margin-top:-12px;width:28px;height:28px} .biglink:hover{background:var(--ink);border-color:var(--ink);color:#fff} .biglink:hover .biglink-t{color:#fff} .biglink:hover .biglink-s{color:var(--mist)} .biglink:hover .arr{translate:calc(6px*var(--dir)) 0} /* sequences: milestones and theory of change (these really are ordered) */ .seq{list-style:none;position:relative;padding-inline-start:clamp(36px,5vw,64px);--p:0} .seq::before,.seq::after{content:"";position:absolute;inset-inline-start:11px;inset-block:10px;width:2px;background:var(--line);transform-origin:50% 0} .seq::after{background:var(--blue);transform:scaleY(var(--p))} .seq-item{position:relative;padding-bottom:clamp(36px,5vw,64px)} .seq-item:last-child{padding-bottom:0} .seq-node{position:absolute;inset-inline-start:calc(-1*clamp(36px,5vw,64px) + 2px);inset-block-start:.35em;width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);transition:background .4s,border-color .4s,scale .5s var(--ease)} .seq-item.is-on .seq-node{background:var(--blue);border-color:var(--blue);scale:1.15} .seq--time .seq-year{font-size:clamp(2.4rem,1.5rem + 3.4vw,4.6rem);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--blue);margin-bottom:.35em} .seq-text{max-width:32em;margin:0;font-size:1.1rem} .toc{background:var(--ink);color:#fff;padding-block:var(--sec)} .toc-title{color:#fff;margin-bottom:clamp(32px,5vw,64px)} .toc .seq::before{background:rgba(255,255,255,.18)} .toc .seq::after{background:var(--sun)} .toc .seq-node{background:var(--ink);border-color:rgba(255,255,255,.35)} .toc .seq-item.is-on .seq-node{background:var(--sun);border-color:var(--sun)} .seq-stage{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);color:#fff;margin-bottom:.8rem;font-weight:600} .seq-points{list-style:none;display:grid;gap:.7rem;max-width:46em} .seq-points li{position:relative;padding-inline-start:1.3em;color:rgba(255,255,255,.86);line-height:1.6} .seq-points li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.7em;width:.5em;height:.5em;border-radius:50%;background:var(--mist)} .strat-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,100px);align-items:start} .strat-head{position:sticky;top:120px} .strat-list{display:grid;gap:clamp(14px,1.8vw,22px)} .strat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(24px,3vw,40px)} .strat-title{font-size:var(--t-h3);margin-bottom:1.1rem} @media (max-width:900px){.strat-wrap{grid-template-columns:1fr}.strat-head{position:static}} .changes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(28px,5vw,80px)} .change{border-top:2px solid var(--ink);padding-top:1.4rem} .change-title{font-size:var(--t-h3);margin-bottom:.8rem} .change p{color:var(--muted);margin:0} @media (max-width:760px){.changes{grid-template-columns:1fr}} /* ---- filters --------------------------------------------------------------- */ .toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-bottom:clamp(24px,3vw,40px)} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)} .toolbar .chips{margin-bottom:0} .chip-btn{border:1.5px solid var(--line-2);background:transparent;border-radius:999px;padding:.5em 1.15em;font-size:.88rem;font-weight:500;cursor:pointer;color:var(--ink);transition:background .3s,color .3s,border-color .3s} .chip-btn:hover{border-color:var(--ink)} .chip-btn.is-on{background:var(--ink);border-color:var(--ink);color:#fff} .search input{width:min(100%,320px);border:1.5px solid var(--line-2);background:var(--white);border-radius:999px;padding:.7em 1.3em;font:inherit;font-size:.92rem;color:var(--ink)} .search input:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 4px rgba(20,98,161,.15)} /* ---- contact ---------------------------------------------------------------- */ .contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,120px);align-items:start} .contact-info{display:grid;gap:clamp(22px,3vw,36px)} .ci{display:flex;gap:18px;align-items:flex-start} .ci-ico{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--blue);display:grid;place-items:center;flex:none} .ci-ico .ico{width:24px;height:24px} .ci-h{font-size:.85rem;font-weight:500;color:var(--muted);margin-bottom:.25rem;letter-spacing:0} .ci a{color:var(--ink);font-size:1.1rem;font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px} .ci a:hover{color:var(--blue)} .ci a.ci-line{display:block;width:fit-content;margin-block:.18rem} .ci-offices{list-style:none;display:grid;gap:.9rem} .ci-addr{display:block;color:var(--muted);font-size:.95rem;line-height:1.6;margin-top:.15rem;max-width:26em} .ci-social{list-style:none;display:flex;gap:10px} .ci-social a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-2);background:none} .ci-social a:hover{background:var(--ink);color:#fff;border-color:var(--ink)} @media (max-width:900px){.contact-grid{grid-template-columns:1fr}} .cform{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(24px,4vw,52px)} .fld{position:relative} .fld-wide,.cform-foot{grid-column:1/-1} .fld input,.fld textarea{width:100%;border:0;border-bottom:1.5px solid var(--line-2);background:transparent;padding:1.5em 0 .55em;font:inherit;font-size:1.02rem;color:var(--ink);border-radius:0;resize:vertical;transition:border-color .3s} .fld label{position:absolute;inset-inline-start:0;inset-block-start:1.3em;color:var(--muted);pointer-events:none;transition:translate .3s var(--ease),scale .3s var(--ease),color .3s;transform-origin:0 0} html[dir="rtl"] .fld label{transform-origin:100% 0} .fld input:focus,.fld textarea:focus{outline:0;border-color:var(--blue)} .fld input:focus+label,.fld textarea:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:not(:placeholder-shown)+label{translate:0 -1.25em;scale:.8;color:var(--blue)} .fld.is-bad input,.fld.is-bad textarea{border-color:#b3341f} .cform-foot{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin-top:8px} .form-msg{margin:0;font-size:.95rem;min-height:1.5em} .form-msg.is-ok{color:#14764a;font-weight:500} .form-msg.is-err{color:#b3341f} @media (max-width:640px){.cform{grid-template-columns:1fr}} /* ---- footer --------------------------------------------------------------- */ .site-footer{background:var(--ink);color:rgba(255,255,255,.82);padding-block:clamp(56px,8vw,110px) 28px} .ft-grid{display:grid;grid-template-columns:1.2fr .8fr 1.1fr 1.3fr;gap:clamp(28px,4vw,64px)} .ft-logo{display:inline-flex;align-items:center;gap:16px;color:#fff;text-decoration:none} .ft-logo b{font-size:2rem;letter-spacing:.06em;font-weight:700} .ft-logo img{width:64px;height:auto} .ft-tag{margin:1.2rem 0 1.4rem;color:var(--mist);max-width:18em} .ft-social,.ft-col ul{list-style:none} .ft-social{display:flex;gap:10px} .ft-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);color:#fff;transition:background .3s,color .3s,border-color .3s} .ft-social a:hover{background:#fff;color:var(--ink);border-color:#fff} .ft-h{font-size:.95rem;font-weight:500;color:#fff;margin-bottom:1.1rem;letter-spacing:0} .ft-col li{margin-bottom:.55rem} .ft-col a{color:rgba(255,255,255,.82);text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .35s var(--ease),color .25s} html[dir="rtl"] .ft-col a{background-position:100% 100%} .ft-col a:hover{color:#fff;background-size:100% 1px} .ft-news p{margin-bottom:1rem;max-width:22em} .nl-row{display:flex;gap:8px;max-width:420px} .nl input{flex:1;min-width:0;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:.75em 1.2em;font:inherit;font-size:.92rem} .nl input::placeholder{color:rgba(255,255,255,.55)} .nl input:focus{outline:0;border-color:var(--sun)} .nl .form-msg{margin-top:.7rem;color:var(--mist)} .nl .form-msg.is-ok{color:#8fe0b4} .nl .form-msg.is-err{color:#ffb4a6} .ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(40px,6vw,80px);padding-top:24px;border-top:1px solid rgba(255,255,255,.16);font-size:.86rem;color:rgba(255,255,255,.6)} .ft-bottom p{margin:0;max-width:60em} .ft-top{color:#fff;text-decoration:none;font-weight:500} @media (max-width:1000px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand,.ft-news{grid-column:1/-1}} @media (max-width:560px){.ft-grid{grid-template-columns:1fr}} /* ---- lightbox -------------------------------------------------------------- */ .lightbox{position:fixed;inset:0;z-index:90;background:rgba(8,22,38,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s} .lightbox.is-open{opacity:1;visibility:visible} .lb-fig{margin:0;max-width:min(94vw,1500px);max-height:88vh;display:grid;gap:12px;justify-items:center} .lb-fig img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:var(--r-s);box-shadow:0 30px 80px rgba(0,0,0,.5)} .lb-fig figcaption{color:rgba(255,255,255,.7);font-size:.9rem} .lb-close,.lb-nav{position:absolute;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s} .lb-close:hover,.lb-nav:hover{background:#fff;color:var(--ink)} .lb-close{inset-block-start:20px;inset-inline-end:20px;font-size:1.8rem;line-height:1} .lb-nav{inset-block-start:50%;margin-top:-26px} .lb-prev{inset-inline-start:20px} .lb-next{inset-inline-end:20px} .lb-prev .arr{scale:-1 1} html[dir="rtl"] .lb-prev .arr{scale:1 1} @media (max-width:640px){.lb-nav{inset-block-start:auto;inset-block-end:20px;margin:0}} /* ---- 404 and search -------------------------------------------------------- */ .nf{padding-block:clamp(150px,22vw,260px) var(--sec)} .nf-inner{display:grid;justify-items:start;gap:1.3rem} .nf-ring{width:clamp(110px,16vw,190px)} .nf-title{font-size:var(--t-h1);max-width:14em} .nf-text{color:var(--muted)} .nf-links{display:flex;flex-wrap:wrap;gap:12px} .search-list{list-style:none;display:grid;gap:28px} .search-list a{font-size:1.3rem;font-weight:600;color:var(--ink);text-decoration:none} .search-list a:hover{color:var(--blue)} .navigation.pagination{margin-top:48px} .nav-links{display:flex;gap:8px;flex-wrap:wrap} .nav-links .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-2);text-decoration:none;color:var(--ink)} .nav-links .current{background:var(--ink);color:#fff;border-color:var(--ink)} /* ---- credentials band under the hero ------------------------------------------ */ .trust{background:var(--white);border-block:1px solid var(--line);padding-block:clamp(18px,2.4vw,28px)} .trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px clamp(28px,5vw,72px)} .trust-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.4vw,34px);margin:0} .trust-list li{display:inline-flex;align-items:center;gap:.65em;font-weight:500;font-size:.92rem;color:var(--ink)} .trust-ico{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--blue)} .trust-ico .ico{width:13px;height:13px} .trust-logos{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(18px,2.2vw,32px);margin:0} .trust-logos .logo{height:28px;width:auto;max-width:112px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s} .trust-logos li:hover .logo{filter:none;opacity:1} @media (max-width:700px){.trust-logos{gap:10px 22px}.trust-logos .logo{height:24px;max-width:96px}.trust-logos li:nth-child(n+4){display:none}} /* ---- programs as cards ---------------------------------------------------------- */ .pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(12px,1.5vw,20px);perspective:1500px} .pc{position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);padding:clamp(20px,2vw,28px);border-radius:22px;background:var(--white);border:1px solid var(--line);color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),rotate .35s var(--ease),box-shadow .5s var(--ease),background .4s,border-color .4s,color .4s} .pc:hover,.pc:focus-visible{transform:translateY(-6px);background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 30px 46px -30px rgba(15,42,68,.55)} .pc-ico{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--blue);transition:background .4s,color .4s,rotate .7s var(--ease)} .pc-ico .ico{width:26px;height:26px} .pc:hover .pc-ico{background:rgba(255,255,255,.16);color:#fff;rotate:-8deg} .pc-main{display:grid;gap:.5rem;flex:1;align-content:start;min-width:0} .pc-title{font-size:clamp(1.12rem,1rem + .45vw,1.32rem);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:inherit} html[lang="ar"] .pc-title{letter-spacing:0;line-height:1.45} .pc-ex{font-size:.94rem;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;transition:color .4s} html[lang="ar"] .pc-ex{line-height:1.85} .pc:hover .pc-ex{color:rgba(255,255,255,.88)} .pc-go{display:inline-flex;align-items:center;gap:.7em;align-self:flex-start;margin-top:auto;min-width:42px;height:42px;border-radius:999px;justify-content:center;border:1.5px solid var(--line-2);color:var(--ink);transition:background .35s,color .35s,border-color .35s,padding .35s} .pc:hover .pc-go{background:#fff;border-color:#fff;color:var(--blue)} .pc:hover .pc-go .arr{translate:calc(3px*var(--dir)) 0} .pc-go-t{display:none} .pc--lead{grid-column:span 2;grid-row:span 2;background:var(--ink);border-color:var(--ink);color:#fff;padding:clamp(26px,3vw,44px);justify-content:flex-start} .pc--lead .pc-main{flex:none;margin-top:auto} .pc--lead .pc-go{margin-top:clamp(18px,2vw,28px)} .pc--lead:hover,.pc--lead:focus-visible{background:var(--ink-2);border-color:var(--ink-2)} .pc--lead .pc-ico{width:76px;height:76px;background:rgba(242,177,56,.16);color:var(--sun)} .pc--lead .pc-ico .ico{width:34px;height:34px} .pc--lead:hover .pc-ico{background:rgba(242,177,56,.26);color:var(--sun)} .pc--lead .pc-title{font-size:clamp(1.6rem,1.1rem + 1.7vw,2.4rem);line-height:1.12} html[lang="ar"] .pc--lead .pc-title{line-height:1.35} .pc--lead .pc-ex{font-family:var(--f-read);font-size:clamp(1.02rem,.96rem + .3vw,1.16rem);line-height:1.7;color:rgba(255,255,255,.82);-webkit-line-clamp:6;max-width:26em} html[lang="ar"] .pc--lead .pc-ex{line-height:2} .pc--lead:hover .pc-ex{color:#fff} .pc--lead .pc-go{padding-inline:1.2em;background:var(--sun);border-color:var(--sun);color:var(--ink);font-weight:600;font-size:.93rem} .pc--lead .pc-go-t{display:inline} .pc--lead:hover .pc-go{background:var(--sun-2);border-color:var(--sun-2);color:var(--ink)} .pc-ring{position:absolute;z-index:-1;inset-inline-end:-18%;inset-block-end:-22%;width:76%;opacity:.12;pointer-events:none} .pc-ring .rp1,.pc-ring .rp2,.pc-ring .rp3{--c:#fff} .pc--w2{grid-column:span 2} .pc--w4{grid-column:span 4} .pc--w2,.pc--w4{flex-direction:row;align-items:center} .pc--w2 .pc-go,.pc--w4 .pc-go{margin-top:0;margin-inline-start:auto;align-self:center} .pcards--flat{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))} @media (max-width:1000px){ .pcards{grid-template-columns:repeat(2,minmax(0,1fr))} .pc--lead{grid-column:1/-1;grid-row:auto} .pc--w2,.pc--w4{grid-column:auto;flex-direction:column;align-items:stretch} .pc--w2 .pc-go,.pc--w4 .pc-go{margin-top:auto;margin-inline-start:0;align-self:flex-start} .pc:last-child:nth-child(even){grid-column:1/-1} } @media (max-width:620px){ .pcards{grid-template-columns:1fr} .pc:not(.pc--lead){flex-direction:row;align-items:flex-start;gap:16px} .pc:not(.pc--lead) .pc-ico{width:48px;height:48px} .pc:not(.pc--lead) .pc-go{display:none} .pc:not(.pc--lead) .pc-ex{-webkit-line-clamp:3} } /* ---- story and impact ------------------------------------------------------------ */ .sec-story{background:var(--white);border-block:1px solid var(--line)} .story{margin:0;display:grid;gap:clamp(26px,5vw,80px);align-items:center} .story.has-photo{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)} .story-photo{position:relative;aspect-ratio:1;width:100%;max-width:420px;border-radius:50%;box-shadow:0 0 0 10px var(--tint),0 0 0 12px var(--mist);overflow:hidden;justify-self:center} .story-photo img{width:100%;height:100%;object-fit:cover} .story-body{min-width:0} .story-quote{margin:0;font-family:var(--f-read);font-size:clamp(1.45rem,1rem + 1.9vw,2.5rem);line-height:1.4;color:var(--ink);text-wrap:balance} html[lang="ar"] .story-quote{line-height:1.75} .story-quote::before{content:"\201C";display:block;font:700 5.5rem/.7 Georgia,serif;color:var(--sun);margin-bottom:.15em} .story-by{display:grid;gap:.1em;margin-top:1.4rem} .story-by b{font-weight:600;color:var(--ink)} .story-by span{color:var(--muted);font-size:.95rem} .impact{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:26px clamp(18px,3vw,44px)} .story+.impact{margin-top:clamp(34px,5vw,64px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)} .impact-num{font-size:clamp(2.3rem,1.4rem + 3.2vw,4rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;unicode-bidi:isolate} html[dir="rtl"] .impact-num{text-align:right} .impact-label{margin:.7em 0 0;color:var(--muted);font-size:.96rem;line-height:1.5;max-width:16em} @media (max-width:820px){.story.has-photo{grid-template-columns:1fr}.story-photo{max-width:260px}} /* ---- rhythm between the home sections ---------------------------------------------- */ .sec-activities{background:var(--tint)} .sec-partners{background:var(--white)} .sec-deco{position:relative;overflow:hidden} .sec-deco::before{content:"";position:absolute;inset-inline-end:-7%;inset-block-start:-190px;width:min(46vw,500px);aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 420 420'%3E%3Cpath d='M81.8 107.65A150 150 0 0 1 156.14 56.55' fill='none' stroke='%231462a1' stroke-width='20' stroke-linecap='round'/%3E%3Cpath d='M243.86 56.55A150 150 0 0 1 318.2 107.65' fill='none' stroke='%231462a1' stroke-width='20' stroke-linecap='round'/%3E%3Ccircle cx='200.0' cy='50.0' r='25' fill='%231462a1'/%3E%3Cpath d='M339.08 143.81A150 150 0 0 1 346.16 233.74' fill='none' stroke='%231462a1' stroke-width='20' stroke-linecap='round'/%3E%3Cpath d='M302.3 309.7A150 150 0 0 1 220.88 348.54' fill='none' stroke='%231462a1' stroke-width='20' stroke-linecap='round'/%3E%3Ccircle cx='329.9' cy='275.0' r='25' fill='%231462a1'/%3E%3Cpath d='M179.12 348.54A150 150 0 0 1 97.7 309.7' fill='none' stroke='%231462a1' stroke-width='20' stroke-linecap='round'/%3E%3Cpath d='M53.84 233.74A150 150 0 0 1 60.92 143.81' fill='none' stroke='%231462a1' stroke-width='20' stroke-linecap='round'/%3E%3Ccircle cx='70.1' cy='275.0' r='25' fill='%231462a1'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.055;pointer-events:none} .sec-deco>.wrap{position:relative} /* ---- motion --------------------------------------------------------------- */ /* Every hidden starting state below only exists once the page has promised to animate it (html.anim). */ html.anim [data-split]{visibility:hidden;animation:ep-show 0s 2.6s forwards} @keyframes ep-show{to{visibility:visible}} .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.2em;margin-block:-.2em} .wi{display:inline-block;will-change:transform} .anim .rv-img:not(.is-in){clip-path:inset(0 0 100% 0)} .anim .rv-img:not(.is-in) img{transform:scale(1.18)} .anim [data-card]:not(.is-in){opacity:0} .anim .marq,.anim .rail-ctl{opacity:0} .anim .hero-ring,.anim .ph-ring,.anim .nf-ring,.anim .hero-photo,.anim .hero-sub,.anim .hero-cta .btn,.anim .ph-lead,.anim .ph .back,.anim .ph .pill{visibility:hidden} /* sequences without motion are simply drawn in full */ html:not(.anim) .seq{--p:1} html:not(.anim) .seq-item .seq-node{background:var(--blue);border-color:var(--blue)} html:not(.anim) .toc .seq-item .seq-node{background:var(--sun);border-color:var(--sun)} html:not(.anim) .menu{clip-path:none;opacity:0;transition:opacity .25s,visibility .25s} html:not(.anim) .menu.is-open{opacity:1} .is-locked body{overflow:hidden} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .marq-track{animation:none} .marq{overflow-x:auto} .pin-pulse{animation:none;opacity:0} } /* Data saver or a very slow connection: the page shows at once, without the motion libraries or looping effects. */ .lite *,.lite *::before,.lite *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .lite .marq-track{animation:none} .lite .pin-pulse{animation:none;opacity:0} .lite .marq{overflow-x:auto} /* The Arabic name of the language link uses the visitor's own Arabic font, so English and Turkish pages never download ours just for one word. */ html:not([lang="ar"]) [lang="ar"]{font-family:Tahoma,"Segoe UI","Noto Sans Arabic",system-ui,sans-serif} /* Activities: the newest item leads the list */ .agrid .acard--lead{grid-column:1/-1} .acard--lead .acard-link{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.6vw,64px);align-items:center} .acard--lead .acard-media{aspect-ratio:16/10} .acard--lead .acard-meta{margin-top:0} .acard--lead .acard-title{font-size:clamp(1.55rem,1.05rem + 1.8vw,2.5rem);line-height:1.2;letter-spacing:-.02em} html[lang="ar"] .acard--lead .acard-title{line-height:1.45;letter-spacing:0} .acard-ex{font-family:var(--f-read);font-size:1.08rem;line-height:1.75;color:var(--muted);margin:0 0 1rem;max-width:34em} .acard-more{display:inline-flex;align-items:center;gap:.5em;margin-top:1.2rem;font-weight:600;color:var(--blue)} .acard-more .arr{width:18px;height:18px} @media (max-width:820px){.acard--lead .acard-link{display:block}.acard--lead .acard-meta{margin-top:1.1rem}} /* Papers and studies: document cards */ .rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr));gap:clamp(18px,2.4vw,32px)} .rcard{display:grid;grid-template-columns:clamp(110px,13vw,160px) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start;padding:clamp(16px,2vw,26px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);transition:box-shadow .45s var(--ease),transform .45s var(--ease),border-color .45s} .rcard:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 26px 40px -30px rgba(15,42,68,.45)} .rcard-cover{display:block;text-decoration:none} .rcard .doc-cover{border-radius:var(--r-s,10px)} .rcard .doc-cover--typo{padding:12px;gap:.35rem} .rcard .doc-cover-type{font-size:.66rem} .rcard .doc-cover-title{font-size:.86rem;line-height:1.25} .rcard .doc-cover-year{font-size:1.2rem;margin-top:.2rem} .rcard-body{min-width:0;display:flex;flex-direction:column;gap:.1rem} .rcard-tags{display:flex;align-items:center;gap:10px;margin-bottom:.7rem} .rcard-year{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums} .rcard-title{font-size:clamp(1.15rem,1rem + .55vw,1.45rem);font-weight:600;line-height:1.3;text-wrap:pretty} .rcard-title a{color:var(--ink);text-decoration:none} .rcard-title a:hover{color:var(--blue)} .rcard-by{margin:.45rem 0 0;color:var(--blue);font-size:.9rem;font-weight:500} .rcard-ex{margin:.8rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.7} .rcard-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:1.2rem} .rcard-size{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums} @media (max-width:520px){.rcard{grid-template-columns:84px minmax(0,1fr);gap:14px}.rcard .doc-cover-title{display:none}} /* ================================================================ design and motion, round two ================================================================ */ /* hero: soft light behind the picture, a slow orbit around it, and a little depth when the pointer moves */ .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0} .hero::before{inset-inline-end:-14%;inset-block-start:-26%;width:min(70vw,860px);aspect-ratio:1;background:radial-gradient(circle,rgba(80,148,213,.2),rgba(80,148,213,0) 64%);translate:calc(var(--px,0)*-26px) calc(var(--py,0)*-18px)} .hero::after{inset-inline-start:-10%;inset-block-end:-34%;width:min(44vw,520px);aspect-ratio:1;background:radial-gradient(circle,rgba(242,177,56,.16),rgba(242,177,56,0) 66%);translate:calc(var(--px,0)*18px) calc(var(--py,0)*12px)} .hero>.wrap{position:relative;z-index:1} .hero-art::before{translate:calc(var(--px,0)*-12px) calc(var(--py,0)*-9px)} .hero-art::after{content:"";position:absolute;inset:-8.5%;border-radius:50%;border:1.5px dashed rgba(20,98,161,.28);pointer-events:none;animation:ep-spin 110s linear infinite,ep-fade 1.6s 1.2s both} @keyframes ep-spin{to{rotate:360deg}} @keyframes ep-fade{from{opacity:0}to{opacity:1}} @media (max-width:900px){.hero-art::after{inset:-7%}} /* programs: a spotlight follows the pointer, the ring in the lead card turns slowly */ .pc::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),rgba(255,255,255,0) 62%)} .pc:hover::after{opacity:1} .pc--lead .pc-ring{animation:ep-spin 120s linear infinite} /* a band of programme names that slides sideways as you scroll past */ .band{position:relative;overflow:hidden;background:var(--paper);padding-block:clamp(28px,4.4vw,64px);display:grid;gap:clamp(4px,1vw,14px)} .band-row{overflow:hidden;white-space:nowrap} .band-track{display:flex;align-items:center;gap:clamp(22px,3.2vw,52px);width:max-content;padding-inline:clamp(16px,3vw,40px)} .band-item{font-size:clamp(2.7rem,1.1rem + 6.6vw,7.4rem);font-weight:600;letter-spacing:-.045em;line-height:1.12;color:var(--ink)} .band-row--2 .band-item{color:var(--sky)} html[lang="ar"] .band-item{letter-spacing:0;line-height:1.5} .band-dot{flex:none;width:clamp(12px,1.5vw,22px);aspect-ratio:1;border-radius:50%;background:var(--sun)} .band-row--2 .band-dot{background:var(--sky)} /* stats: each figure arrives on its own */ .stat-num{white-space:nowrap} /* inner pages: a soft glow behind the heading */ .ph::before{content:"";position:absolute;inset-inline-end:-8%;inset-block-start:-34%;width:min(56vw,680px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(80,148,213,.2),rgba(80,148,213,0) 66%);pointer-events:none} /* footer: the name, large, rising into place */ .ft-giant{margin-top:clamp(40px,6vw,84px);font-size:clamp(4.6rem,23.5vw,22rem);font-weight:700;letter-spacing:.015em;line-height:.8;padding-top:.06em;overflow:hidden;white-space:nowrap;text-align:center;user-select:none;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.015) 88%);-webkit-background-clip:text;background-clip:text;color:transparent} .ft-giant.is-split{background:none} .ft-giant .ch{display:inline-block;line-height:.8;padding-top:.06em;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.015) 88%);-webkit-background-clip:text;background-clip:text;color:transparent} .ft-giant + .ft-bottom{margin-top:clamp(18px,2.4vw,32px)} /* reading progress and the pointer bubble (both only exist when the page is animated) */ .progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none} .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--sun));transform:scaleX(0);transform-origin:0 50%} [dir="rtl"] .progress i{transform-origin:100% 50%} .cursor{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:70} .cursor-b{position:absolute;left:-39px;top:-39px;width:78px;height:78px;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;scale:0;opacity:0;transition:scale .4s var(--ease),opacity .25s;box-shadow:0 18px 30px -14px rgba(15,42,68,.5)} .cursor.is-on .cursor-b{scale:1;opacity:1} .cursor-b svg{width:26px;height:26px} html.cursor-on .pcard-media,html.cursor-on .acard-media,html.cursor-on .pcard-media *,html.cursor-on .acard-media *{cursor:none} /* buttons lean a little toward the pointer */ html.anim .btn{transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),translate .35s var(--ease)} .lite .hero-art::after{display:none} @media (prefers-reduced-motion:reduce){.hero-art::after{display:none}} /* privacy notice and small legal links */ .ft-links{display:flex;flex-wrap:wrap;gap:8px 26px} .cform-note{grid-column:1/-1;margin:0;font-size:.88rem;line-height:1.6;color:var(--muted)} .cform-note a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .legal-updated{margin:0 0 clamp(18px,2.4vw,30px);font-size:.92rem;color:var(--muted)} .legal-sec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(10px,3vw,48px);padding-block:clamp(22px,3vw,36px);border-top:1px solid var(--line)} .legal-h{font-size:clamp(1.15rem,1rem + .55vw,1.45rem);font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0} html[lang="ar"] .legal-h{letter-spacing:0;line-height:1.5} .legal-t{margin:0;max-width:40em;font-family:var(--f-read);font-size:clamp(1.02rem,.97rem + .25vw,1.14rem);line-height:1.75;color:var(--ink-2)} html[lang="ar"] .legal-t{line-height:2} .legal-t a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere} @media (max-width:760px){.legal-sec{grid-template-columns:1fr}} /* the curtain between pages: a dark panel with the ring and the mark slides over the page and away again */ .wipe{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:var(--ink);visibility:hidden;transform:translateY(100%);pointer-events:none} .wipe-ring{position:absolute;width:min(54vw,220px);opacity:.55} .wipe-ring .rp1,.wipe-ring .rp2,.wipe-ring .rp3{--c:#fff} .wipe-mark{position:relative;width:64px;height:auto} html.wipe-in .wipe{visibility:visible;transform:none;animation:ep-wipe-out .85s cubic-bezier(.77,0,.18,1) .12s forwards} html.wipe-intro .wipe{animation-delay:1.35s;animation-duration:.95s} @keyframes ep-wipe-out{to{transform:translateY(-100%);visibility:hidden}} html.wipe-intro .wipe-ring .ring-arm{stroke-dasharray:100;stroke-dashoffset:100;animation:ep-draw 1.05s .15s cubic-bezier(.65,0,.35,1) forwards} html.wipe-intro .wipe-ring .ring-dot{transform-box:fill-box;transform-origin:center;scale:0;animation:ep-pop .6s .85s cubic-bezier(.34,1.56,.64,1) forwards} html.wipe-intro .wipe-mark{opacity:0;animation:ep-fade .6s .35s forwards} @keyframes ep-draw{to{stroke-dashoffset:0}} @keyframes ep-pop{to{scale:1}} /* faint rings behind sections drift as you scroll past */ .sec-deco::before{translate:0 calc(var(--sy,0)*80px);rotate:calc(var(--sy,0)*34deg)} /* the closing band: soft light moves slowly behind the text */ .cta{overflow:hidden} .cta::before,.cta::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(8px)} .cta::before{width:min(52vw,640px);aspect-ratio:1;inset-inline-start:-12%;inset-block-start:-46%;background:radial-gradient(circle,rgba(156,200,238,.34),rgba(156,200,238,0) 66%);animation:ep-drift 16s ease-in-out infinite alternate} .cta::after{width:min(40vw,480px);aspect-ratio:1;inset-inline-end:18%;inset-block-end:-50%;background:radial-gradient(circle,rgba(242,177,56,.22),rgba(242,177,56,0) 66%);animation:ep-drift 20s ease-in-out -6s infinite alternate-reverse} @keyframes ep-drift{from{translate:0 0;scale:1}to{translate:60px -34px;scale:1.18}} .lite .wipe,.lite .cta::before,.lite .cta::after{display:none} @media (prefers-reduced-motion:reduce){.wipe,.cta::before,.cta::after{display:none}} .cta-inner{z-index:1}