@font-face { font-family:"Cairo Variable"; font-style:normal; font-display:swap; font-weight:200 1000; src:url("fonts/cairo-arabic-variable.woff2") format("woff2-variations"); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08FF,U+FB50-FDFF,U+FE70-FEFC; }
@font-face { font-family:"Cairo Variable"; font-style:normal; font-display:swap; font-weight:200 1000; src:url("fonts/cairo-latin-ext-variable.woff2") format("woff2-variations"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:"Cairo Variable"; font-style:normal; font-display:swap; font-weight:200 1000; src:url("fonts/cairo-latin-variable.woff2") format("woff2-variations"); unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Montserrat Variable"; font-style:normal; font-display:swap; font-weight:100 900; src:url("fonts/montserrat-latin-ext-variable.woff2") format("woff2-variations"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:"Montserrat Variable"; font-style:normal; font-display:swap; font-weight:100 900; src:url("fonts/montserrat-latin-variable.woff2") format("woff2-variations"); unicode-range:U+0000-00FF,U+2000-206F; }

:root { --navy:#06266f; --blue:#073d9f; --cobalt:#0756d8; --sky:#edf5ff; --ink:#071b42; --muted:#5f6c83; --green:#12a762; --red:#e44348; --line:#dfe6f0; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Cairo Variable","Cairo",sans-serif; font-weight:400; font-optical-sizing:auto; overflow-x:hidden; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }

.site-header { position:sticky; top:0; z-index:50; height:84px; background:rgba(255,255,255,.92); border-bottom:1px solid rgba(9,45,111,.09); backdrop-filter:blur(18px); }
.header-inner { height:84px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; min-width:225px; direction:rtl; }
.brand-logo { display:block; width:218px; height:72px; object-fit:contain; object-position:right center; }
.desktop-nav { flex:1; display:flex; justify-content:center; align-items:center; gap:27px; white-space:nowrap; font-size:13px; font-weight:650; }
.desktop-nav a { position:relative; padding:32px 0; color:#253555; transition:.2s; }
.desktop-nav a:hover,.desktop-nav .active { color:var(--blue); }
.desktop-nav .active:after { content:""; position:absolute; right:0; left:0; bottom:19px; height:3px; background:var(--green); border-radius:8px; }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-button,.language { border:0; background:transparent; color:var(--navy); cursor:pointer; height:42px; display:grid; place-items:center; }
.language { display:flex; gap:6px; padding:0 8px; font-family:"Montserrat Variable",sans-serif; font-weight:700; font-size:12px; }
.primary-cta:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(5,44,121,.25); }
.mobile-menu-button { display:none; }
.mobile-nav { display:none; }
.scroll-top-button { --scroll-progress:0deg; position:fixed; z-index:48; inset-inline-end:24px; bottom:24px; width:56px; height:56px; display:grid; place-items:center; padding:3px; border:0; border-radius:50%; color:#fff; background:conic-gradient(var(--green) var(--scroll-progress),rgba(7,61,159,.16) 0); box-shadow:0 16px 36px rgba(6,38,111,.24); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(16px) scale(.86); transition:opacity .25s ease,transform .35s cubic-bezier(.22,.8,.22,1),box-shadow .25s ease; }
.scroll-top-button::before { content:""; position:absolute; inset:3px; border-radius:inherit; background:linear-gradient(145deg,var(--cobalt),var(--navy)); box-shadow:inset 0 1px 0 rgba(255,255,255,.24); }
.scroll-top-button svg { position:relative; z-index:1; width:21px; height:21px; transition:transform .25s ease; }
.scroll-top-button.is-visible { opacity:1; pointer-events:auto; transform:none; }
.scroll-top-button:hover { box-shadow:0 20px 42px rgba(6,38,111,.32); transform:translateY(-3px); }
.scroll-top-button:hover svg { transform:translateY(-2px); }
.scroll-top-button:focus-visible { outline:3px solid rgba(18,167,98,.42); outline-offset:4px; }

.hero { --pointer-x:25%; --pointer-y:35%; position:relative; min-height:550px; overflow:hidden; background:#f7faff; isolation:isolate; }
.hero-slides { position:absolute; inset:0; z-index:-3; }
.hero-image { position:absolute; inset:0; opacity:0; transform:scale(1.018); background-color:#f8fbff; background-size:auto 100%; background-position:left center; background-repeat:no-repeat; transition:opacity .9s cubic-bezier(.22,.8,.22,1),transform 7s ease; will-change:opacity,transform; }
.hero-image.active { opacity:1; transform:scale(1); }
.hero-image.hero-director,.hero-image.hero-forum { background-position:left center; }
.hero-image:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(270deg,#f8fbff 0%,rgba(248,251,255,.99) 38%,rgba(248,251,255,.92) 48%,rgba(248,251,255,.68) 57%,rgba(248,251,255,.22) 67%,rgba(248,251,255,0) 76%); }
.hero-image:after { content:""; position:absolute; inset:auto 0 0; height:96px; background:linear-gradient(0deg,#fff,transparent); }
.hero-spotlight { pointer-events:none; position:absolute; z-index:-1; inset:0; background:radial-gradient(390px circle at var(--pointer-x) var(--pointer-y),rgba(50,130,255,.14),transparent 72%); mix-blend-mode:multiply; transition:opacity .3s; }
.hero-grid { position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:multiply; background-image:radial-gradient(#0c2d72 .55px,transparent .55px); background-size:5px 5px; background-position:0 0; background-repeat:repeat; -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 46%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.28) 66%,transparent 78%); mask-image:linear-gradient(270deg,#000 0%,#000 46%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.28) 66%,transparent 78%); }
.hero-content { position:relative; z-index:2; min-height:550px; display:flex; align-items:center; justify-content:flex-start; direction:rtl; padding-bottom:38px; }
.hero-copy { width:52%; max-width:590px; margin-right:0; margin-left:auto; text-align:right; }
.hero-copy>* { animation:heroEnter .75s both cubic-bezier(.22,.8,.22,1); }
.hero-copy h1 { animation-delay:.08s; }.hero-copy p { animation-delay:.14s; }.hero-copy .hero-actions { animation-delay:.2s; }
.eyebrow,.kicker { color:var(--blue); font-size:12px; font-weight:700; letter-spacing:0; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; }
.eyebrow i { width:23px; height:3px; background:var(--green); border-radius:6px; }
.hero h1 { margin:0; color:var(--navy); font-size:clamp(39px,3.55vw,54px); line-height:1.34; letter-spacing:0; font-weight:780; }
.hero h1 span { color:var(--cobalt); }
.hero p { max-width:580px; margin:22px 0 27px; color:#45536d; font-size:16px; line-height:2; font-weight:430; }
.hero-actions { display:flex; justify-content:flex-start; direction:rtl; gap:12px; }
.primary-cta,.secondary-cta { display:inline-flex; align-items:center; justify-content:center; direction:rtl; gap:10px; min-height:54px; padding:0 26px; border-radius:8px; font-weight:720; font-size:14px; transition:.25s; }
.primary-cta { color:#fff; background:linear-gradient(135deg,var(--cobalt),var(--navy)); box-shadow:0 12px 28px rgba(5,44,121,.21); }
.secondary-cta { color:var(--navy); background:rgba(255,255,255,.72); border:1px solid #9fb1d4; backdrop-filter:blur(10px); }
.hero-controls { position:absolute; z-index:6; left:0; bottom:52px; direction:ltr; display:flex; align-items:center; gap:17px; color:var(--navy); }
.slide-counter { display:flex; align-items:baseline; gap:5px; font-family:"Montserrat Variable",sans-serif; }.slide-counter b { font-size:19px; font-weight:750; }.slide-counter span { color:#77849a; font-size:10px; }
.slide-dots { display:flex; align-items:center; gap:5px; }.slide-dots button { width:28px; height:22px; padding:0; border:0; background:transparent; cursor:pointer; }.slide-dots i { display:block; width:100%; height:2px; background:#aebad0; overflow:hidden; position:relative; }.slide-dots button.active i:after { content:""; position:absolute; inset:0; background:var(--blue); transform-origin:left; animation:slideProgress 6.5s linear; }
.slide-buttons { display:flex; gap:5px; }.slide-buttons button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid rgba(7,61,159,.2); color:var(--navy); background:rgba(255,255,255,.7); border-radius:50%; backdrop-filter:blur(10px); cursor:pointer; transition:.25s; }.slide-buttons button:hover { color:#fff; background:var(--blue); transform:scale(1.06); }.slide-buttons svg { width:15px; height:15px; }

.impact-wrap { position:relative; z-index:5; margin-top:-42px; }
.impact-bar { display:grid; grid-template-columns:repeat(5,1fr); min-height:112px; background:linear-gradient(105deg,rgba(4,57,143,.97),rgba(6,30,102,.98)); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:16px; padding:16px 14px; box-shadow:0 22px 45px rgba(5,35,98,.24); overflow:hidden; position:relative; backdrop-filter:blur(18px); }
.impact-bar:after { content:""; position:absolute; width:260px; height:260px; left:-50px; bottom:-180px; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.impact-bar article { display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; align-content:center; padding:8px 22px; border-left:1px solid rgba(255,255,255,.19); }
.impact-bar article:last-child { border-left:0; }
.impact-bar svg { grid-row:1/3; width:31px; height:31px; align-self:center; opacity:.9; stroke-width:1.5; }
.impact-bar strong { font-family:"Montserrat Variable",sans-serif; font-size:23px; font-weight:720; direction:ltr; text-align:right; }
.impact-bar span { font-size:11px; opacity:.8; }

.section { padding:74px 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:27px; }
.section-heading>div { max-width:760px; }
.section-heading h2 { margin:8px 0 0; font-size:34px; color:var(--navy); letter-spacing:0; font-weight:750; line-height:1.45; }
.section-lead { max-width:720px; margin:9px 0 0; color:var(--muted); font-size:13px; line-height:1.9; }
.section-heading>a { display:flex; gap:8px; align-items:center; color:var(--blue); font-size:13px; font-weight:800; border-bottom:1px solid #cbd8ee; padding-bottom:5px; }
.section-heading.centered { justify-content:center; text-align:center; }
.section-heading.centered p { margin:13px auto 0; color:var(--muted); }
.programs-section { padding-top:66px; }
.program-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.interactive-card { position:relative; }
.interactive-card:before { content:""; pointer-events:none; position:absolute; z-index:4; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg,transparent 15%,rgba(7,86,216,.5),transparent 58%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.35s; }
.interactive-card:hover:before { opacity:1; }
.program-card { border:1px solid var(--line); border-radius:15px; overflow:hidden; background:#fff; box-shadow:0 5px 20px rgba(22,46,93,.05); transition:transform .4s cubic-bezier(.22,.8,.22,1),box-shadow .4s; transform-style:preserve-3d; }
.program-card:hover { transform:perspective(900px) translateY(-9px) rotateX(1.4deg); box-shadow:0 24px 50px rgba(22,46,93,.14); }
.program-card:hover .card-image { transform:scale(1.035); }.card-image { transition:transform .6s cubic-bezier(.22,.8,.22,1); }
.card-image { height:215px; background-size:cover; background-position:center; position:relative; }
.card-image:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,24,70,.5),transparent 65%); }
.card-number { position:absolute; z-index:1; left:14px; top:12px; color:#fff; font:700 11px Arial; background:rgba(3,34,95,.62); padding:6px 8px; border:1px solid rgba(255,255,255,.3); border-radius:20px; }
.program-icon { position:absolute; z-index:2; right:16px; bottom:-25px; width:52px; height:52px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--cobalt),var(--navy)); border:4px solid white; border-radius:12px; box-shadow:0 8px 18px rgba(3,44,120,.25); }
.card-body { padding:35px 22px 22px; }
.card-body h3 { margin:0 0 9px; color:var(--navy); font-size:18px; font-weight:720; }
.card-body p { margin:0 0 13px; min-height:0; color:var(--muted); font-size:13px; line-height:1.8; }
.program-points { list-style:none; padding:0; margin:0 0 17px; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.program-points li { display:flex; align-items:center; gap:7px; color:#354765; font-size:11px; line-height:1.6; }
.program-points svg { flex:0 0 auto; padding:2px; color:#fff; background:var(--green); border-radius:50%; }
.card-body a { display:flex; gap:6px; align-items:center; color:var(--blue); font-size:12px; font-weight:800; }
.work-method { margin-top:22px; display:grid; grid-template-columns:.72fr 1.55fr; gap:24px; align-items:stretch; padding:28px; border:1px solid #dce6f4; border-radius:16px; background:linear-gradient(135deg,#f8fbff,#edf4ff); box-shadow:0 10px 30px rgba(24,49,97,.06); }
.work-method-intro { padding-left:24px; border-left:1px solid #d8e3f2; }
.work-method-intro h3 { margin:7px 0 8px; color:var(--navy); font-size:23px; line-height:1.45; }
.work-method-intro p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.work-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.work-steps li { display:flex; gap:12px; align-items:flex-start; padding:13px; border:1px solid #dfe7f3; border-radius:11px; background:rgba(255,255,255,.78); }
.work-steps b { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--cobalt),var(--navy)); border-radius:9px; font:700 10px "Montserrat Variable",sans-serif; }
.work-steps div { display:flex; flex-direction:column; gap:3px; }
.work-steps strong { color:var(--navy); font-size:13px; }
.work-steps span { color:var(--muted); font-size:10px; line-height:1.65; }

.about-section { background:linear-gradient(125deg,#041d5c,#073c98); color:#fff; position:relative; overflow:hidden; }
.about-section:before { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-160px; top:-250px; box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.02); }
.about-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:55px; align-items:center; position:relative; }
.kicker.light { color:#8ed9b8; }
.about-copy h2 { margin:9px 0 20px; font-size:42px; line-height:1.45; font-weight:750; }
.about-copy>p { color:#d7e0f2; line-height:2; max-width:660px; }
.about-copy ul { list-style:none; padding:0; margin:26px 0; display:grid; gap:11px; color:#eaf1ff; font-size:14px; }
.about-copy li { display:flex; align-items:center; gap:10px; }
.about-copy li svg { width:21px; height:21px; padding:4px; background:var(--green); border-radius:50%; }
.about-values { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:0 0 24px; }
.about-values span { display:flex; flex-direction:column; gap:4px; min-height:80px; padding:13px; border:1px solid rgba(255,255,255,.15); border-radius:11px; background:rgba(255,255,255,.06); }
.about-values strong { color:#fff; font-size:12px; }
.about-values small { color:#bfd0ec; font-size:9px; line-height:1.65; }
.light-link { display:inline-flex; gap:8px; align-items:center; font-weight:800; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:6px; }
.quote-card { position:relative; padding:46px 38px 35px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.19); border-radius:22px; backdrop-filter:blur(12px); }
.quote-mark { display:block; height:42px; font:80px Georgia; color:#61d59e; line-height:1; }
.quote-card blockquote { margin:16px 0 28px; font-size:21px; font-weight:650; line-height:1.8; }
.quote-card div { display:flex; flex-direction:column; gap:6px; }
.quote-card div span { font-size:11px; color:#adbedf; }

.partners-section { background:#f7f9fd; }
.partner-logos { display:grid; grid-template-columns:repeat(5,1fr); align-items:center; min-height:125px; background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(242,247,255,.92)); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 28px rgba(24,49,97,.05); }
.partner-logos span { min-height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#134687; border-left:1px solid #e5eaf2; text-align:center; }
.partner-logos span:last-child { border-left:0; }
.partner-logos b { font-family:"Montserrat Variable",sans-serif; font-size:21px; font-weight:750; transition:.3s; }.partner-logos span:hover b { transform:translateY(-3px); color:var(--cobalt); }
.partner-logos small { color:#70809a; font-size:8px; }

.news-grid { display:grid; grid-template-columns:1.35fr .95fr; grid-template-rows:repeat(3,minmax(132px,auto)); gap:16px 18px; align-items:stretch; direction:ltr; }
.news-card { display:grid; grid-template-columns:150px minmax(0,1fr); min-height:132px; direction:rtl; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:transform .35s,box-shadow .35s; }.news-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(18,42,91,.1); }
.news-card.featured { grid-row:span 3; display:flex; flex-direction:column; direction:rtl; }
.news-image { position:relative; background-size:cover; background-position:center; min-height:142px; }
.featured .news-image { min-height:286px; }
.news-image span { position:absolute; right:11px; top:11px; color:#fff; background:var(--blue); padding:6px 10px; font-size:10px; border-radius:5px; }
.news-body { position:relative; padding:18px; direction:rtl; text-align:right; }
.news-body time { color:#8591a5; font-size:10px; }
.news-body h3 { color:var(--navy); font-size:14px; line-height:1.7; margin:8px 0 0; }
.featured .news-body h3 { font-size:20px; }
.news-body a { position:absolute; left:13px; bottom:13px; width:30px; height:30px; display:grid; place-items:center; color:var(--blue); background:#edf3ff; border-radius:50%; }
.news-body a svg { width:15px; }

.giving-section { padding:8px 0 74px; display:grid; grid-template-columns:1fr; }
.newsletter { padding:32px 40px; display:flex; align-items:center; justify-content:space-between; gap:40px; border:1px solid var(--line); border-radius:18px; background:#f8fafc; }
.newsletter>div:first-child { display:flex; align-items:center; gap:13px; }
.newsletter>div:first-child>svg { color:var(--blue); width:30px; }
.newsletter span { display:flex; flex-direction:column; gap:5px; }
.newsletter strong { font-size:19px; color:var(--navy); }
.newsletter small { color:var(--muted); line-height:1.5; }
.newsletter-field { flex:0 1 480px; display:flex; background:#fff; border:1px solid #ced8e8; border-radius:8px; overflow:hidden; }
.newsletter-field input { min-width:0; flex:1; border:0; padding:13px; outline:0; text-align:right; }
.newsletter-field button { border:0; background:var(--blue); color:#fff; min-width:110px; min-height:50px; font-weight:750; cursor:pointer; }

footer { background:#031a56; color:#fff; padding-top:60px; }
.footer-grid { display:grid; grid-template-columns:1.45fr 1fr 1fr 1.15fr; gap:50px; padding-bottom:45px; }
.brand-inverse { width:max-content; min-width:0; padding:7px 10px; background:#fff; border-radius:10px; }
.brand-inverse .brand-logo { width:260px; height:auto; }
.footer-brand p { max-width:330px; color:#adbbd7; font-size:12px; line-height:1.8; margin:20px 0; }
.socials { display:flex; gap:8px; direction:ltr; }
.socials a { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:8px; font-family:"Montserrat Variable",sans-serif; font-size:12px; font-weight:700; }
.footer-grid>div:not(:first-child) { display:flex; flex-direction:column; gap:12px; }
.footer-grid h3 { font-size:14px; margin:5px 0 10px; }
.footer-grid>div:not(:first-child) a,.footer-grid>div:not(:first-child) span { color:#aebbd5; font-size:11px; line-height:1.6; }
.footer-grid a:hover { color:#fff; }
.footer-bottom { min-height:54px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); color:#8394b9; font-size:10px; }

@keyframes fade { from { opacity:0; } }
@keyframes heroEnter { from { opacity:0; transform:translateY(25px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes slideProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
[data-reveal] { opacity:0; transform:translateY(34px); transition:opacity .75s cubic-bezier(.22,.8,.22,1),transform .75s cubic-bezier(.22,.8,.22,1); }
[data-reveal].is-visible { opacity:1; transform:none; }

@media (max-width:1050px) {
  .desktop-nav { display:none; }.header-inner { justify-content:space-between; }.mobile-menu-button { display:grid; }.header-actions .search-button { display:none; }
  .mobile-nav { display:flex; position:absolute; top:84px; right:20px; left:20px; flex-direction:column; background:#fff; padding:10px 18px; border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow:0 20px 40px rgba(12,34,78,.15); }
  .mobile-nav a { display:flex; justify-content:space-between; padding:14px 5px; border-bottom:1px solid #edf0f5; font-weight:700; font-size:13px; }
  .impact-bar article { padding:8px 12px; }.program-grid { grid-template-columns:repeat(2,1fr); }.work-method { grid-template-columns:1fr; }.work-method-intro { padding:0 0 18px; border-left:0; border-bottom:1px solid #d8e3f2; }.news-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }.news-card.featured { grid-row:span 1; display:grid; grid-template-columns:150px minmax(0,1fr); direction:ltr; }.featured .news-image { min-height:142px; }.featured .news-body h3 { font-size:15px; }
}

@media (max-width:760px) {
  .container { width:min(100% - 28px, 560px); }.site-header,.header-inner { height:74px; }.mobile-nav { top:74px; }.brand { min-width:0; }.brand-logo { width:160px; height:58px; }.header-actions { gap:2px; }.header-actions .language { display:none; }
  .hero { min-height:700px; }.hero-image { background-position:center top; background-size:auto 46%; background-repeat:no-repeat; }.hero-image.hero-director,.hero-image.hero-forum { background-position:28% top; }.hero-image:before { display:none; }.hero-image:after { height:68%; background:linear-gradient(0deg,#f8fbff 0%,#f8fbff 78%,rgba(248,251,255,.82) 88%,transparent 100%); }.hero-spotlight { display:none; }.hero-grid { display:block; inset:42% 0 0; opacity:.10; background-size:5px 5px; background-position:0 0; -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.96) 76%,transparent 100%); mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.96) 76%,transparent 100%); }.hero-content { min-height:700px; align-items:flex-end; padding-bottom:92px; }.hero-copy { width:100%; margin-right:0; margin-left:0; text-align:right; }.eyebrow { margin-bottom:11px; }.hero h1 { font-size:32px; line-height:1.42; letter-spacing:0; }.hero p { font-size:14px; line-height:1.9; margin:14px 0 19px; }.hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.primary-cta,.secondary-cta { width:100%; min-height:50px; padding-inline:12px; }.hero-controls { right:0; left:0; bottom:45px; justify-content:space-between; }.slide-counter { display:none; }.slide-buttons button { width:32px; height:32px; }
  .impact-wrap { margin-top:-35px; }.impact-bar { grid-template-columns:repeat(2,1fr); border-radius:13px; padding:12px; }.impact-bar article { min-height:82px; border-left:0; border-bottom:1px solid rgba(255,255,255,.14); }.impact-bar article:last-child { grid-column:1/3; border-bottom:0; }.impact-bar strong { font-size:20px; }.impact-bar span { font-size:10px; }
  .section { padding:54px 0; }.section-heading { align-items:flex-start; margin-bottom:23px; }.section-heading h2 { font-size:27px; }.section-lead { font-size:12px; }.section-heading>a { font-size:0; border:0; padding-top:10px; }.section-heading>a svg { width:22px; height:22px; }
  .program-grid { grid-template-columns:1fr; }.card-image { height:205px; }.program-points { grid-template-columns:1fr; }.work-method { padding:22px 18px; }.work-steps { grid-template-columns:1fr; }.about-grid { grid-template-columns:1fr; gap:32px; }.about-copy h2 { font-size:31px; }.about-values { grid-template-columns:1fr; }.about-values span { min-height:0; }.quote-card { padding:35px 26px 25px; }.quote-card blockquote { font-size:17px; }
  .partner-logos { grid-template-columns:1fr 1fr; padding:8px; }.partner-logos span { border-bottom:1px solid #e5eaf2; }.partner-logos span:nth-child(even) { border-left:0; }.partner-logos span:last-child { grid-column:1/3; border-bottom:0; }
  .news-grid { grid-template-columns:1fr; }.news-card,.news-card.featured { display:grid; grid-template-columns:120px 1fr; min-height:130px; }.news-image,.featured .news-image { min-height:130px; }.featured .news-body h3 { font-size:14px; }
  .giving-section { padding-bottom:65px; }.newsletter { padding:24px 20px; flex-direction:column; align-items:stretch; gap:22px; }.newsletter-field { flex:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:35px 20px; }.footer-brand { grid-column:1/3; }.brand-inverse .brand-logo { width:230px; }.footer-bottom { gap:20px; padding:18px 0; flex-direction:column; text-align:center; }
  .scroll-top-button { inset-inline-end:16px; bottom:16px; width:48px; height:48px; }
}

@media (max-width:400px) {
  .brand-logo { width:142px; }.mobile-menu-button { width:38px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; animation:none!important; } [data-reveal] { opacity:1; transform:none; } }


/* Standalone HTML export helpers */
html.no-js [data-reveal] { opacity:1; transform:none; }
.mobile-menu-button[aria-expanded="true"] { font-size:27px; line-height:1; }
.mobile-nav .nav-chevron { direction:ltr; font-size:20px; line-height:1; }


/* ===========================================================================
 * Everything above is the delivered stylesheet, byte for byte.
 * Everything below is generated from assets/css/pages.css.
 * Edit that file, never this one: scripts/build-styles.mjs overwrites it.
 * =========================================================================== */

/* Components the inner pages need, on top of the delivered stylesheet.
 *
 * The delivered styles.css is left untouched as a source; scripts/build-styles.mjs
 * concatenates it with this file. Nothing here overrides an existing rule, so the
 * home page renders exactly as it always did.
 *
 * Horizontal spacing uses logical properties throughout — margin-inline,
 * padding-inline, inset-inline. CLAUDE.md §5 requires it, because the English and
 * French versions will flip the whole axis and left/right would flip with them.
 */

/* --- CLAUDE.md §7: the placeholder convention -------------------------------
 * Anything not yet delivered is marked so it cannot be published by accident.
 * The marks are meant to be seen, and they are removed before handover.
 */
.tmp { border-bottom: 1px dotted var(--red); padding-bottom: 1px; }

.ph {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed var(--red);
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(228, 67, 72, .03) 0 8px, transparent 8px 16px);
  color: #8c3b3e;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}
.ph::before {
  content: attr(data-size) " · " attr(data-ratio);
  display: block;
  margin-bottom: 8px;
  font-family: "Montserrat Variable", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .75;
}

/* --- inner-page hero --------------------------------------------------------
 * The same rhythm as the home page without the slider: §4 asks the typography to
 * carry the weight rather than another band of cards.
 */
.page-hero { min-height: 0; padding-block: 74px 54px; background: #f7faff; }
.page-hero .hero-content { min-height: 0; padding-bottom: 0; }
.page-hero .hero-copy { width: 100%; max-width: 720px; }
.page-hero h1 { font-size: clamp(30px, 2.9vw, 42px); }
.page-hero p { margin-bottom: 0; }

/* --- programme card: the §6 fields ----------------------------------------- */
.program-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0 0 15px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.program-meta dt { color: var(--muted); font-size: 10px; font-weight: 700; }
.program-meta dd { margin: 0; color: var(--navy); font-size: 11px; }

/* --- news listing (§8 component 8: date, title, tag) ----------------------- */
.news-list { display: grid; }
.news-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.news-row time { color: var(--muted); font-size: 12px; }
.news-row h3 { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.7; }
.news-row h3 a { color: var(--navy); }
.news-row h3 a:hover { color: var(--cobalt); }
.news-tag {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--blue);
  font-size: 12px;
  white-space: nowrap;
}

/* --- empty listing ---------------------------------------------------------- */
.empty-state { display: grid; gap: 22px; max-width: 640px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 14px; }

.note { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.source-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }

/* --- contribution (§9) ------------------------------------------------------ */
.contribute-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 34px; align-items: start; }
.contribute-form { display: grid; gap: 26px; }
.contribute-form fieldset { margin: 0; padding: 0; border: 0; }
.contribute-form legend {
  margin-bottom: 12px;
  padding: 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 750;
}
.frequency { display: flex; gap: 10px; }
.frequency label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border: 1px solid #ccd7e8;
  border-radius: 9px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  cursor: pointer;
}
.frequency label:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

.contribute-form .amounts { grid-template-columns: repeat(4, 1fr); margin: 0; }
.amount {
  display: grid;
  gap: 5px;
  padding: 14px 8px;
  border: 1px solid #ccd7e8;
  border-radius: 9px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.amount:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.amount input { position: absolute; opacity: 0; pointer-events: none; }
.amount small { font-size: 9px; font-weight: 500; }

.contribute-form select {
  width: 100%;
  height: 47px;
  padding-inline: 13px;
  border: 1px solid #ccd7e8;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
}
.contribute-aside {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
}
.contribute-aside h2 { margin: 0 0 10px; color: var(--navy); font-size: 17px; }
.contribute-aside p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }

/* --- contact ---------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 34px; align-items: start; }
.contact-form { display: grid; gap: 16px; }
.contact-form label { display: grid; gap: 7px; color: var(--navy); font-size: 12px; font-weight: 700; }
.contact-form input,
.contact-form textarea {
  padding: 12px 13px;
  border: 1px solid #ccd7e8;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 400;
  resize: vertical;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contribute-form select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.contact-form .primary-cta { justify-self: start; border: 0; cursor: pointer; }
.contact-aside {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
}
.contact-aside a { color: var(--blue); font-weight: 700; }

/* --- CLAUDE.md §7: the status badge, removed before handover ---------------- */
.legend {
  position: fixed;
  z-index: 60;
  inset-inline-start: 16px;
  bottom: 16px;
  max-width: 300px;
  padding: 11px 14px;
  border: 1px solid var(--red);
  border-radius: 10px;
  background: rgba(255, 255, 255, .95);
  color: #8c3b3e;
  font-size: 10px;
  line-height: 1.8;
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  .contribute-grid, .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .page-hero { padding-block: 46px 34px; }
  .news-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .news-row time { grid-column: 1 / -1; }
  .contribute-form .amounts { grid-template-columns: 1fr 1fr; }
  .frequency { flex-direction: column; }
  .legend { display: none; }
}

/* --- detail pages (a single programme, a single article) -------------------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.detail-points { grid-template-columns: 1fr 1fr; margin-top: 22px; }
.detail-points li { font-size: 13px; }
.detail-aside {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
}
.detail-aside dl { margin: 0 0 20px; display: grid; gap: 14px; }
.detail-field dt { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.detail-field dd { margin: 0; color: var(--navy); font-size: 13px; }
.detail-aside .primary-cta { width: 100%; }

/* an article: a 680px reading measure, the details rail at the far side */
.article-grid { grid-template-columns: minmax(0, 680px) 280px; justify-content: space-between; }
.detail-article { max-width: 680px; }
.article-meta { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.article-body { color: var(--ink); font-size: 16px; line-height: 1.95; }

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-points { grid-template-columns: 1fr; }
}

/* --- article prose: the roles the editor produces ---------------------------
 * The editor stores `data-tone`, `data-size` and `data-align` rather than inline
 * styles, so the look lives here — one place, and changing the palette changes
 * every article at once instead of none of them.
 */
.article-body h2 { font-size: 25px; color: var(--navy); margin: 30px 0 12px; line-height: 1.5; }
.article-body h3 { font-size: 20px; color: var(--navy); margin: 26px 0 10px; line-height: 1.6; }
.article-body h4 { font-size: 17px; color: var(--navy); margin: 22px 0 9px; }
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-inline-start: 26px; }
.article-body li { margin-bottom: 7px; }
.article-body blockquote {
  margin: 24px 0;
  padding: 16px 22px;
  border-inline-start: 3px solid var(--cobalt);
  background: #f6f9fe;
  color: var(--navy);
  font-size: 16px;
}
.article-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article-body code { padding: 2px 7px; border-radius: 5px; background: #eef2f8; font-family: Consolas, monospace; font-size: .9em; }
.article-body figure { margin: 26px 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.article-body figcaption { margin-top: 9px; color: var(--muted); font-size: 12px; }
.article-body hr { margin: 30px 0; border: 0; border-top: 1px solid var(--line); }
.article-body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14px; }
.article-body th, .article-body td { padding: 11px 14px; border: 1px solid var(--line); text-align: start; }
.article-body th { background: #f4f7fc; color: var(--navy); font-weight: 700; }
.article-body [data-embed] { position: relative; margin: 26px 0; padding-top: 56.25%; }
.article-body [data-embed] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }

.article-body [data-align="center"] { text-align: center; }
.article-body [data-align="end"] { text-align: end; }
.article-body [data-tone="navy"] { color: var(--navy); }
.article-body [data-tone="blue"] { color: var(--cobalt); }
.article-body [data-tone="green"] { color: var(--green); }
.article-body [data-tone="muted"] { color: var(--muted); }
.article-body [data-size="small"] { font-size: .85em; }
.article-body [data-size="large"] { font-size: 1.2em; }


/* ===========================================================================
 * Client review 2026-10-12: inner pages open on a photograph, and every page
 * carries real content. Corners follow the delivered system (16–18px).
 * =========================================================================== */

/* --- page hero with photograph ------------------------------------------- */
.page-hero.has-image { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: center; padding-block: 64px 52px; background: #f7faff; }
.page-hero.has-image .hero-content { position: relative; z-index: 2; }
.page-hero.has-image .hero-copy { max-width: 640px; }
.page-hero-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: var(--hero-focus, left center); animation: heroDrift 18s ease-out both; }
/* 2026-10-13 (client: "the header photo is almost invisible"): the photo stays fully
 * visible on its own side; only a short seam next to the copy fades into the page. */
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, #f7faff 0%, #f7faff 40%, rgba(247,250,255,.88) 47%, rgba(247,250,255,.4) 54%, rgba(247,250,255,0) 62%); }
.page-hero.has-image .hero-grid { z-index: 1; -webkit-mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 60%); mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 60%); }
.page-hero.has-image h1 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.35; }
.page-hero.has-image p { font-size: 15px; line-height: 2; color: var(--muted); }
@keyframes heroDrift { from { transform: scale(1.06); } to { transform: scale(1); } }

/* --- program detail -------------------------------------------------------- */
.detail-heading { margin: 0 0 12px; color: var(--navy); font-size: 22px; }
.detail-lead { margin: 0; color: var(--ink); font-size: 16px; line-height: 2.1; }
.detail-aside { position: sticky; top: 110px; display: grid; gap: 12px; }
.detail-aside .kicker { margin: 0; }
.detail-aside h3 { margin: 0; color: var(--navy); font-size: 18px; }
.detail-aside p { margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.detail-aside .secondary-cta { width: 100%; justify-content: center; }
.related-programs { padding-top: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card { display: grid; grid-template-rows: 170px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--navy); }
.related-image { background-size: cover; background-position: center; transition: transform .5s ease; }
.related-card:hover .related-image { transform: scale(1.04); }
.related-body { display: grid; gap: 6px; padding: 18px 20px 22px; }
.related-body b { color: var(--cobalt); font: 700 12px "Montserrat Variable", sans-serif; }
.related-body strong { font-size: 15px; line-height: 1.7; }

/* --- partnership band -------------------------------------------------------- */
.partnership-band { margin-block: 10px 80px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 48px; color: #fff; border-radius: 18px; background: linear-gradient(120deg, #073a96, #041c5d); position: relative; overflow: hidden; }
.partnership-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(to right, #000, transparent 60%); mask-image: linear-gradient(to right, #000, transparent 60%); }
.partnership-band > * { position: relative; }
.partnership-band h2 { margin: 8px 0 10px; font-size: 28px; }
.partnership-band p { max-width: 640px; margin: 0; color: #d9e4f7; font-size: 14px; line-height: 1.9; }
.partnership-cta { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; color: var(--navy); background: #fff; border-radius: 9px; font-weight: 750; transition: .25s; }
.partnership-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }

/* --- news tiles ----------------------------------------------------------------- */
.news-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* The tile itself does not clip, so a keyboard focus ring drawn outside the link
 * stays visible; the link clips the photograph to the rounded corners instead. */
.news-tile { overflow: visible; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 5px 20px rgba(22,46,93,.05); transition: transform .4s cubic-bezier(.22,.8,.22,1), box-shadow .4s; }
.news-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(22,46,93,.12); }
.news-tile > a { display: grid; grid-template-rows: 220px 1fr; height: 100%; overflow: hidden; border-radius: inherit; color: inherit; }
.news-tile-image { position: relative; background-size: cover; background-position: center; transition: transform .6s cubic-bezier(.22,.8,.22,1); }
.news-tile:hover .news-tile-image { transform: scale(1.035); }
.news-tile-image.is-brand { background-position: 27% center; }
.news-tile-image em { position: absolute; top: 14px; inset-inline-start: 14px; padding: 6px 12px; color: #fff; background: var(--blue); border-radius: 7px; font-style: normal; font-size: 12px; font-weight: 750; }
.news-tile-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 24px; background: #fff; }
.news-tile-body time { color: var(--muted); font-size: 12px; }
.news-tile-body h2 { margin: 0; color: var(--navy); font-size: 17px; font-weight: 700; line-height: 1.7; text-wrap: balance; }
.news-tile-body small { color: var(--muted); font-size: 13px; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-tile-body i { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; color: var(--cobalt); font-style: normal; font-size: 12px; font-weight: 750; }
.news-tile-body i svg { transition: transform .25s; }
.news-tile:hover .news-tile-body i svg { transform: translateX(-4px); }
/* the lead story: photograph and text side by side */
.news-tile.is-featured { grid-column: span 2; }
.news-tile.is-featured > a { grid-template-rows: none; grid-template-columns: 1.15fr 1fr; }
.news-tile.is-featured .news-tile-image { min-height: 320px; }
.news-tile.is-featured .news-tile-body { justify-content: center; gap: 12px; padding: 28px 30px; }
.news-tile.is-featured .news-tile-body h2 { font-size: 22px; line-height: 1.6; }
.news-tile.is-featured .news-tile-body small { -webkit-line-clamp: 4; }
.news-tile.is-featured .news-tile-body i { margin-top: 6px; }

/* --- about ------------------------------------------------------------------------ */
.about-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.about-intro h2 { margin: 10px 0 18px; color: var(--navy); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.5; }
.about-intro p { color: var(--muted); font-size: 15px; line-height: 2.1; }
.about-intro .lead-text { color: var(--ink); font-size: 17px; }
.statement-stack { display: grid; gap: 14px; }
.statement { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.statement svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; color: #fff; background: linear-gradient(145deg, var(--cobalt), var(--navy)); border-radius: 12px; }
.statement h3 { margin: 0; color: var(--navy); font-size: 16px; }
.statement p { margin: 0; font-size: 13.5px; line-height: 1.9; }
.about-values-section { background: #f7faff; }
.values-row { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.values-row li { display: grid; gap: 8px; padding: 26px; border-radius: 16px; background: #fff; border-top: 3px solid var(--cobalt); box-shadow: 0 10px 30px rgba(5,44,121,.06); }
.values-row strong { color: var(--navy); font-size: 18px; }
.values-row span { color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.about-quote { margin: 0; padding: 30px 36px; color: var(--navy); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.9; font-weight: 700; border-inline-start: 4px solid var(--green); background: #fff; border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 16px; border-end-end-radius: 16px; }
.about-quote cite { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; font-style: normal; font-weight: 600; }
.fields-list { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fields-list li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; color: var(--navy); font-size: 13.5px; font-weight: 700; line-height: 1.6; background: #fff; }
.mini-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--cobalt); background: var(--sky); border-radius: 11px; }
.mini-icon svg { width: 20px; height: 20px; }

/* --- reports ------------------------------------------------------------------------ */
.transparency-panel { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 30px; padding: 36px 40px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #073a96, #041c5d); }
.transparency-panel > svg { flex: none; width: 58px; height: 58px; padding: 14px; color: #fff; background: rgba(255,255,255,.12); border-radius: 15px; }
.transparency-panel .kicker { color: #8fd6b0; }
.transparency-panel h2 { margin: 8px 0; font-size: 26px; line-height: 1.6; }
.transparency-panel p { margin: 0; color: #d9e4f7; font-size: 14px; line-height: 1.9; }
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.doc-card { display: grid; align-content: start; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.doc-card > svg { width: 46px; height: 46px; padding: 11px; color: var(--cobalt); background: var(--sky); border-radius: 12px; }
.doc-card h3 { margin: 6px 0 0; color: var(--navy); font-size: 17px; }
.doc-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
/* one shared status for the three kinds, between two hairlines */
.doc-status-line { display: flex; align-items: center; gap: 16px; margin: 22px 0 0; color: var(--navy); font-size: 12px; font-weight: 750; }
.doc-status-line::before, .doc-status-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.doc-status-line span { padding: 7px 14px; background: #eef3fa; border-radius: 999px; }
.request-line { margin: 28px 0 0; padding: 22px 26px; color: var(--muted); font-size: 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: 16px; }
.request-line a { color: var(--blue); font-weight: 750; }

/* --- media library ---------------------------------------------------------------- */
/* A mosaic that closes with no hole at 4, 3 and 2 columns: build-pages.mjs
 * simulates the dense placement and marks each tile b<cols> (2x2) or l<cols>
 * (2x1) for the column counts where it is large. Captions are always shown. */
.media-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 14px; }
.media-tile { position: relative; overflow: hidden; border-radius: 16px; background: #e9eef6; }
.media-tile.b4 { grid-column: span 2; grid-row: span 2; }
.media-tile.l4 { grid-column: span 2; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.media-tile span { position: absolute; inset: auto 0 0 0; padding: 44px 16px 14px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.7; background: linear-gradient(0deg, rgba(4,20,60,.86), rgba(4,20,60,.5) 55%, rgba(4,20,60,0)); text-wrap: balance; }
.media-tile.b4 span { padding: 70px 22px 18px; font-size: 15px; }
.media-tile:hover img { transform: scale(1.05); }

/* --- contact ------------------------------------------------------------------------- */
.contact-form { padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(5,44,121,.06); }
.contact-form h2 { margin: 0 0 6px; color: var(--navy); font-size: 22px; }
.contact-form select { min-height: 48px; padding: 0 12px; border: 1px solid #ccd7e8; border-radius: 8px; background: #fff; color: var(--navy); font: inherit; }
.contact-aside { display: grid; gap: 14px; padding: 0; border: 0; background: none; }
.contact-item { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.contact-item > svg { flex: none; width: 44px; height: 44px; padding: 11px; color: var(--cobalt); background: var(--sky); border-radius: 12px; }
.contact-item small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.contact-item a, .contact-item span { color: var(--navy); font-weight: 750; font-size: 14px; }
.contact-partner { padding: 26px; color: #fff; border-radius: 16px; background: linear-gradient(120deg, #073a96, #041c5d); }
.contact-partner h3 { margin: 8px 0; font-size: 19px; }
.contact-partner p { margin: 0; color: #d9e4f7; font-size: 13px; line-height: 1.9; }

@media (max-width: 1050px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 34px; }
  .fields-list { grid-template-columns: repeat(2, 1fr); }
  .news-tiles, .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .media-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .media-tile.b4, .media-tile.l4 { grid-column: auto; grid-row: auto; }
  .media-tile.b4 span { padding: 44px 16px 14px; font-size: 12px; }
  .media-tile.b3 { grid-column: span 2; grid-row: span 2; }
  .media-tile.l3 { grid-column: span 2; }
  .media-tile.b3 span { padding: 70px 22px 18px; font-size: 15px; }
}
@media (max-width: 760px) {
  .page-hero.has-image { display: block; min-height: 0; padding: 0 0 34px; }
  .page-hero-media { position: relative; height: 210px; inset: auto; animation: none; background-position: center; }
  .page-hero-media::after { background: linear-gradient(0deg, #f7faff 0%, rgba(247,250,255,0) 45%); }
  .page-hero.has-image .hero-grid { display: none; }
  .page-hero.has-image .hero-content { margin-top: -24px; }
  .page-hero.has-image h1 { font-size: 28px; }
  .partnership-band { flex-direction: column; align-items: stretch; padding: 32px 24px; margin-bottom: 60px; }
  .partnership-band h2 { font-size: 23px; }
  .partnership-cta { justify-content: center; }
  .news-tiles, .related-grid, .doc-grid, .values-row, .fields-list { grid-template-columns: 1fr; }
  .news-tile.is-featured { grid-column: auto; }
  .news-tile.is-featured > a, .news-tile > a { grid-template-rows: 210px 1fr; grid-template-columns: none; }
  .news-tile.is-featured .news-tile-image { min-height: 0; }
  .news-tile.is-featured .news-tile-body { padding: 20px 22px 24px; }
  .news-tile.is-featured .news-tile-body h2 { font-size: 19px; }
  .media-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .media-tile.b3, .media-tile.l3 { grid-column: auto; grid-row: auto; }
  .media-tile span, .media-tile.b3 span, .media-tile.b4 span { font-size: 12px; padding: 30px 10px 10px; }
  .media-tile.b2 { grid-column: span 2; grid-row: span 2; }
  .media-tile.l2 { grid-column: span 2; }
  .media-tile.b2 span { padding: 60px 16px 14px; font-size: 14px; }
  .transparency-panel { flex-direction: column; padding: 28px 24px; }
  .transparency-panel h2 { font-size: 21px; }
  .contact-form { padding: 24px 20px; }
  .detail-aside { position: static; }
  .about-quote { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .page-hero-media { animation: none; } }

/* Home hero, a little lower (client, 2026-10-12): 550px -> 480px, 700px -> 640px on phones. */
.hero:not(.page-hero), .hero:not(.page-hero) .hero-content { min-height: 480px; }
@media (max-width: 760px) {
  .hero:not(.page-hero), .hero:not(.page-hero) .hero-content { min-height: 640px; }
}
/* ===========================================================================
 * Inner-page vertical rhythm (client review 2026-10-12: "the gaps between the
 * header and the first block, and between blocks, are not justified").
 *
 * Measured before this block (desktop / phone):
 *   hero copy -> first block   126–165px / 88px   hero padding 52 + .section 74
 *   plain section -> plain     148–153px / 108px  two .section paddings stacked
 *   fields grid -> method      62px               margin 40 + margin 22 stacked
 *   intro -> impact bar        32px / 19px        the home page's -42px overlap
 *   impact bar -> tinted band  0px                the bar sat on the band's edge
 *
 * One scale, one rule each:
 *   --inner-hero-gap     edge of the hero band -> first content
 *   --inner-section-y    content -> content between sections; a plain section
 *                        that follows a plain section drops its top padding so
 *                        the gap is never doubled; tinted bands keep it on both
 *                        sides, so their content sits centred in the band
 *   --inner-heading-gap  section heading -> its content
 *   --inner-stack        between sub-blocks inside one section
 *
 * Everything is scoped to siblings of .page-hero, which only the inner pages
 * render — the home page keeps the delivered spacing untouched.
 * =========================================================================== */
:root {
  --inner-hero-gap: 56px;
  --inner-section-y: 88px;
  --inner-heading-gap: 28px;
  --inner-stack: 32px;
  --inner-tint: #f7faff;
}
@media (max-width: 760px) {
  :root {
    --inner-hero-gap: 32px;
    --inner-section-y: 56px;
    --inner-heading-gap: 24px;
    --inner-stack: 24px;
  }
}

/* the hero band: copy centred, equal space above and below */
.page-hero.has-image { min-height: 340px; padding-block: 56px; }

/* sections */
.page-hero ~ .section { padding-block: var(--inner-section-y); }
.page-hero + .section { padding-top: var(--inner-hero-gap); }
.page-hero ~ .section:not(.about-values-section) + .section:not(.about-values-section) { padding-top: 0; }

/* the impact bar bridges the white intro and the tinted values band: it sits
 * across their boundary, a full step from the content on each side */
.page-hero ~ .impact-wrap { margin-top: 0; background: linear-gradient(to bottom, transparent 50%, var(--inner-tint) 50%); }

/* the partnership band closes the page one step above the footer */
.page-hero ~ .partnership-band { margin-block: 0 var(--inner-section-y); }

/* heading -> content, and sub-blocks inside a section */
.page-hero ~ * .section-heading { margin-bottom: var(--inner-heading-gap); }
.page-hero ~ * .work-method { margin-top: var(--inner-stack); }
.page-hero ~ * .fields-list { margin-bottom: 0; }
.page-hero ~ * .values-row,
.page-hero ~ * .transparency-panel { margin-bottom: var(--inner-stack); }
.page-hero ~ * .request-line { margin-top: var(--inner-stack); }
.page-hero ~ * .about-intro-grid > div > :last-child { margin-bottom: 0; }

@media (max-width: 1050px) {
  .page-hero ~ * .about-intro-grid { gap: var(--inner-stack); }
}
@media (max-width: 760px) {
  .page-hero.has-image { min-height: 0; padding-block: 0 32px; }
}

/* Optical trim: a kicker inherits Cairo's "normal" line box (≈30px for 12px
 * type), which hid ~9px of empty leading above every section heading and made
 * the measured gaps 5px larger than the scale. A tight block line box puts the
 * kicker's ink where the scale says the section starts. */
.page-hero ~ * .kicker { display: block; line-height: 1.6; }
.page-hero ~ * .section-heading h2 { margin-top: 12px; }

/* Inner page header melts into the page (client, 2026-10-13): no visible edge
 * between the photo header and the first block. A transparent-to-white fade sits
 * above the photo and the dot grid, under the copy. */
.page-hero.has-image::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 60%, #fff 100%); }
.page-hero.has-image .hero-grid { -webkit-mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 60%), linear-gradient(0deg, transparent 0%, #000 45%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 60%), linear-gradient(0deg, transparent 0%, #000 45%); mask-composite: intersect; }
@media (max-width: 760px) {
  .page-hero.has-image::after { display: none; }
  .page-hero.has-image { background: linear-gradient(180deg, #f7faff 0%, #fff 100%); }
  .page-hero-media::after { background: linear-gradient(0deg, #f7faff 0%, rgba(247,250,255,0) 45%); }
}
/* With the fade, the bottom of the header already reads as air: tighten the band
 * and the first gap so the eye goes straight from the header copy to the content
 * (client, 2026-10-13). */
.page-hero.has-image { min-height: 300px; padding-block: 52px 28px; }
.page-hero + .section { padding-top: 28px; }
@media (max-width: 760px) {
  .page-hero.has-image { padding-block: 0 8px; }
  .page-hero + .section { padding-top: 20px; }
}
/* ===========================================================================
 * World-class audit of the inner pages (2026-10-13). New components and the
 * cross-cutting rules; fixes to existing components were made in place above.
 * Everything is scoped to the inner pages (.page-hero and what follows it, or
 * classes only they render) — the home page keeps the delivered look.
 * =========================================================================== */

/* --- headings: balanced lines (#12) ------------------------------------------ */
.page-hero h1,
.page-hero ~ * .section-heading h2,
.partnership-band h2,
.transparency-panel h2 { text-wrap: balance; }

/* --- a section label that is a real heading (h2) but reads as a kicker (#18) -- */
.page-hero ~ * .section-heading h2.kicker { margin: 0; color: var(--blue); font-size: 12px; font-weight: 700; line-height: 1.6; text-wrap: initial; }

/* --- the hero's meta line: an article's date sits in the header (#7) --------- */
.page-hero .hero-meta { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.6; }
.page-hero .hero-meta::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--cobalt); }

/* --- typographic hero (#2): a record whose picture is the logo card. The brand
 * construction pattern (§4: rounded squares, radius 6px, 5–8 % opacity) carries
 * the band instead of a photograph, fading out under the copy and into white. -- */
.page-hero.is-typographic { position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: center; padding-block: 56px 32px; background: linear-gradient(180deg, #f7faff 0%, #f7faff 62%, #fff 100%); }
.page-hero.is-typographic::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='10' y='10' width='24' height='24' rx='6' fill='%230C2D72'/%3E%3C/svg%3E"); background-size: 44px 44px; -webkit-mask-image: linear-gradient(to left, transparent 0%, transparent 38%, #000 78%), linear-gradient(0deg, transparent 0%, #000 40%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, transparent 0%, transparent 38%, #000 78%), linear-gradient(0deg, transparent 0%, #000 40%); mask-composite: intersect; }
.page-hero.is-typographic .hero-content { position: relative; z-index: 2; }
.page-hero.is-typographic .hero-copy { max-width: 760px; }
.page-hero.is-typographic h1 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.35; }
.page-hero.is-typographic .hero-grid { -webkit-mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 60%), linear-gradient(0deg, transparent 0%, #000 45%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 0%, #000 40%, transparent 60%), linear-gradient(0deg, transparent 0%, #000 45%); mask-composite: intersect; }

/* --- programme page: the main column (#1) ------------------------------------ */
.program-intro { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 30px; align-items: start; }
.program-index { display: grid; justify-items: center; gap: 16px; padding-top: 2px; }
.program-index::after { content: ""; width: 1px; height: 56px; background: linear-gradient(180deg, var(--line), transparent); }
.program-cube { display: grid; place-items: center; width: 64px; height: 64px; color: #fff; background: linear-gradient(145deg, var(--cobalt), var(--navy)); border-radius: 16px; box-shadow: 0 14px 28px rgba(3, 44, 120, .22); }
.program-cube svg { width: 28px; height: 28px; }
.program-no { display: grid; justify-items: center; gap: 6px; font-family: "Montserrat Variable", sans-serif; line-height: 1; }
.program-no b { color: var(--navy); font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.program-no small { color: var(--muted); font-size: 12px; font-weight: 600; }
.program-intro .detail-heading { font-size: 26px; line-height: 1.5; }
.program-intro .detail-lead { font-size: 18px; line-height: 2.05; }
.detail-context { position: relative; overflow: hidden; margin-top: 40px; margin-inline-start: 106px; padding: 26px 30px 28px; border: 1px solid var(--line); border-radius: 16px; background: #f7faff; }
/* no pattern here: §4 keeps the construction pattern to hero bands */
.detail-context > * { position: relative; z-index: 1; }
.detail-context h3 { margin: 6px 0 8px; color: var(--navy); font-size: 18px; }
.detail-context p { max-width: 560px; margin: 0; color: var(--muted); font-size: 14px; line-height: 2; }
.detail-aside .primary-cta,
.detail-aside .secondary-cta { width: 100%; white-space: nowrap; }
.related-image.is-brand { background-position: 27% center; }

/* --- programmes listing: «مدماك البرنامج», alternating rows (#17) ----------- */
.program-rows { display: grid; gap: 72px; }
.program-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.program-row:nth-child(even) .program-row-media { order: 2; }
.program-row-media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; }
.program-row-image { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background-size: cover; background-position: center; box-shadow: 0 18px 40px rgba(22, 46, 93, .12); }
.program-row-image::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; box-shadow: none; transition: transform .8s cubic-bezier(.22, .8, .22, 1); }
.program-row-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2, 24, 70, .32), rgba(2, 24, 70, 0) 55%); }
.program-row:hover .program-row-image::before { transform: scale(1.04); }
.program-row .program-icon { inset-inline: auto -28px; bottom: 34px; width: 60px; height: 60px; border-width: 5px; border-radius: 15px; }
.program-row:nth-child(even) .program-icon { inset-inline: -28px auto; }
.program-row-body { min-width: 0; }
.program-row-no { display: flex; align-items: baseline; gap: 8px; font-family: "Montserrat Variable", sans-serif; line-height: 1; }
.program-row-no b { font-size: 44px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); background: linear-gradient(145deg, var(--cobalt), var(--navy)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.program-row-no small { color: var(--muted); font-size: 13px; font-weight: 600; }
.program-row h3 { margin: 18px 0 12px; color: var(--navy); font-size: clamp(22px, 1.9vw, 27px); font-weight: 750; line-height: 1.55; text-wrap: balance; }
.program-row h3 a { color: inherit; transition: color .2s; }
.program-row h3 a:hover { color: var(--cobalt); }
.program-row p { margin: 0; color: var(--muted); font-size: 15px; line-height: 2.05; }
.program-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.program-row-field { padding: 6px 12px; color: var(--blue); background: var(--sky); border-radius: 999px; font-size: 12px; font-weight: 700; }
.program-row-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 14px; font-weight: 800; }
.program-row-link svg { transition: transform .25s; }
.program-row:hover .program-row-link svg { transform: translateX(-4px); }
.page-hero ~ * .program-rows + .work-method { margin-top: 80px; }

/* --- 12px floor for Arabic interface text on the inner pages (#15) ------------
 * Montserrat numerals (work-step numbers) may stay smaller. */
.page-hero ~ * .work-steps span,
.page-hero ~ * .impact-bar span { font-size: 12px; }
/* partner subtitles: legible and on the muted ink (#10) */
.page-hero ~ * .partner-logos small { color: var(--muted); font-size: 12px; }

/* --- keyboard focus (#9, CLAUDE.md §10): a 3px cobalt ring on every link that
 * is a card or a call to action. Only :focus-visible, so the resting look —
 * the home page included — does not change. ----------------------------------- */
.news-tile > a:focus-visible,
.media-tile:focus-visible,
.related-card:focus-visible,
.card-body a:focus-visible,
.program-row h3 a:focus-visible,
.program-row-link:focus-visible,
.partnership-cta:focus-visible,
.section-heading > a:focus-visible,
.detail-aside a:focus-visible,
.request-line a:focus-visible,
.contact-item a:focus-visible,
.article-body a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
.news-tile > a:focus-visible,
.media-tile:focus-visible,
.related-card:focus-visible { border-radius: 16px; }
.partnership-cta:focus-visible { outline-color: #fff; }
.desktop-nav a:focus-visible { outline: none; }
.desktop-nav a:focus-visible::before { content: ""; position: absolute; inset: 22px -10px; border: 3px solid var(--cobalt); border-radius: 8px; pointer-events: none; }

/* --- tablet: programme and article pages at 901–1050px (#8) ------------------ */
@media (max-width: 1050px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .article-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .detail-aside .primary-cta,
  .detail-aside .secondary-cta { padding-inline: 14px; font-size: 13px; }
  .program-intro { grid-template-columns: 64px minmax(0, 1fr); gap: 22px; }
  .detail-context { margin-inline-start: 86px; }
  .program-rows { gap: 56px; }
  .program-row { gap: 44px; }
  .program-row-media { aspect-ratio: 4 / 3; }
  .program-row h3 { font-size: 21px; }
  .program-row p { font-size: 14px; line-height: 1.95; }
}
@media (max-width: 900px) {
  .detail-grid, .article-grid { grid-template-columns: 1fr; }
  .detail-article { max-width: none; }
}

/* --- phones: lighter rows and cards, content intact (#21) -------------------- */
@media (max-width: 760px) {
  .page-hero.is-typographic { min-height: 0; padding-block: 40px 20px; }
  .page-hero.is-typographic h1 { font-size: 28px; }
  .program-intro { grid-template-columns: 1fr; gap: 16px; }
  .program-index { grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
  .program-index::after { display: none; }
  .program-cube { width: 52px; height: 52px; border-radius: 14px; }
  .program-cube svg { width: 24px; height: 24px; }
  .program-no { grid-auto-flow: column; align-items: baseline; gap: 6px; }
  .program-no b { font-size: 24px; }
  .program-intro .detail-heading { font-size: 22px; }
  .program-intro .detail-lead { font-size: 16px; line-height: 2; }
  .detail-context { margin-inline-start: 0; margin-top: 26px; padding: 22px 20px; }
  .program-rows { gap: 16px; }
  .program-row { position: relative; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 5px 20px rgba(22, 46, 93, .05); }
  .program-row:nth-child(even) .program-row-media { order: 0; }
  .program-row-media { aspect-ratio: auto; height: 150px; border-radius: 16px 16px 0 0; }
  .program-row-image { box-shadow: none; }
  .program-row .program-icon,
  .program-row:nth-child(even) .program-icon { inset-inline: auto 14px; bottom: -22px; width: 46px; height: 46px; border-width: 4px; border-radius: 12px; }
  .program-row .program-icon svg { width: 20px; height: 20px; }
  /* the number becomes a badge on the photograph, as on the home cards */
  .program-row-no { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; gap: 4px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 20px; background: rgba(3, 34, 95, .62); }
  .program-row-no b { font-size: 13px; letter-spacing: 0; -webkit-text-fill-color: #fff; color: #fff; background: none; }
  .program-row-no small { color: rgba(255, 255, 255, .75); font-size: 11px; }
  .program-row-body { padding: 26px 18px 16px; }
  .program-row h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.6; }
  .program-row p { font-size: 13.5px; line-height: 1.85; }
  .program-row-foot { margin-top: 10px; padding-top: 10px; }
  .program-row-field { padding: 4px 10px; }
  .program-row-link { font-size: 13px; }
  .page-hero ~ * .program-rows + .work-method { margin-top: 40px; }
  .article-aside { position: static; }
}

/* ===========================================================================
 * Inner page header, final form (client, 2026-10-13): the photo owns the left
 * part of the band (so far more of the picture is visible and it keeps its
 * meaning), the copy owns a white right part, and they meet in one soft seam.
 * No bottom fade: the band ends on a clean edge, on the same white as the page.
 * =========================================================================== */
@media (min-width: 761px) {
  .page-hero.has-image { background: #fff; }
  .page-hero.has-image::after { display: none; }
  .page-hero-media { inset: 0 auto 0 0; width: 58%; background-position: var(--hero-focus, center center); }
  .page-hero-media::after { background: linear-gradient(to left, #fff 0%, rgba(255,255,255,.85) 9%, rgba(255,255,255,.35) 20%, rgba(255,255,255,0) 32%); }
  .page-hero.has-image .hero-grid { -webkit-mask-image: linear-gradient(to left, #000 0%, #000 36%, transparent 48%); mask-image: linear-gradient(to left, #000 0%, #000 36%, transparent 48%); -webkit-mask-composite: source-over; mask-composite: add; opacity: .55; }
  .page-hero.has-image .hero-copy { max-width: 560px; }
}
.page-hero-media { background-repeat: no-repeat; }
@media (max-width: 760px) {
  .page-hero.has-image { background: #fff; }
  .page-hero-media { width: 100%; background-position: var(--hero-focus, center center); }
  .page-hero-media::after { background: none; }
  .page-hero.has-image .hero-content { margin-top: 0; padding-top: 22px; }
}
/* No dot pattern behind the copy of inner headers: it vibrated against the text
 * (client, 2026-10-13). The copy sits on plain white. */
@media (min-width: 761px) {
  /* client, 2026-10-13: dot pattern kept, at 5 % (delivered value 12 %) */
  .page-hero.has-image .hero-grid { display: block; opacity: .05; }
}