/* byJOOM — first static build. Tokens follow docs/visual-system; ground is white, per the owner's Foster + Partners reference. */
@font-face{font-family:"Plex Sans";src:url("../fonts/IBMPlexSans.ttf");font-weight:100 700;font-stretch:85% 100%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Regular.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Bold.ttf");font-weight:700;font-display:swap}
:root{
  --white:#fff; --paper:#F3F3F0; --ink:#111; --ink-2:#4A4A47; --ink-3:#6B6B67;
  --rule:#E2E2DE; --rule-ui:#8A8A85; --signal:#C62F17;
  --margin:clamp(16px,3.2vw,56px); --gut:clamp(12px,1.6vw,24px);
  --sans:"Plex Sans","Plex Sans Arabic",system-ui,sans-serif; --mono:"Plex Mono",ui-monospace,monospace;
  --head:60px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--head)}
body{margin:0;background:var(--white);color:var(--ink);font:400 clamp(15px,.95vw,16.5px)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid rgba(17,17,17,.6);outline-offset:3px;border-radius:0}
.skip{position:absolute;inset-inline-start:var(--margin);top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:20}
.skip:focus{top:8px}
/* header */
body{padding-top:var(--head)}
/* hero */
.hero{position:relative;background:var(--paper)}
.hero img{width:100%;height:clamp(320px,82vh,900px);object-fit:cover}
@media (max-width:700px){
  .hero img{height:clamp(260px,62vh,520px)}
}
.hero .cap{position:absolute;inset:auto var(--margin) var(--margin) var(--margin);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.hero .cap a{text-decoration:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none}
.hero .cap{z-index:2}
.hero .cap h1,.hero .cap h2{margin:0;font:600 clamp(26px,3.2vw,48px)/1.05 var(--sans);letter-spacing:-.015em}
.hero .cap p{margin:6px 0 0;font:500 12px/1.3 var(--mono);letter-spacing:.04em}
.hero .more{font:500 12px var(--mono);white-space:nowrap}
/* page bands */
.band{padding:clamp(32px,4.5vw,72px) var(--margin)}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:20px var(--margin);border-bottom:1px solid var(--rule)}
.bar h1,.bar h2{margin:0;font:500 clamp(17px,1.2vw,20px)/1.2 var(--sans)}
.bar .count{font:400 clamp(15px,1.1vw,18px)/1.2 var(--sans);color:var(--ink-3)}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:16px var(--margin);border-bottom:1px solid var(--rule)}
.filters button{font:500 11.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;min-height:44px;padding:0 18px;border:1px solid var(--rule-ui);background:var(--white);color:var(--ink);border-radius:0;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* project cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,64px) var(--gut);padding:clamp(24px,3vw,48px) var(--margin) clamp(56px,6vw,112px);list-style:none;margin:0}
@media (max-width:700px){
  .cards{grid-template-columns:1fr}
}
.card a{display:block;text-decoration:none}
.card .im{overflow:hidden;background:var(--paper);aspect-ratio:3/2}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card a:hover .im img,.card a:focus-visible .im img{transform:scale(1.03)}
.card .t{padding:16px 0 0}
.card h3{margin:0;font:600 clamp(16px,1.2vw,19px)/1.2 var(--sans);letter-spacing:-.005em}
.card p{margin:4px 0 0;font:500 11.5px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.card[hidden]{display:none}
.more-link{display:inline-block;margin:0 var(--margin) clamp(48px,6vw,96px);font:500 13px var(--mono);letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px}
/* project page */
.full{padding:clamp(8px,2vw,24px) 0}
.full img{width:100%;height:clamp(300px,70vh,820px);object-fit:cover;background:var(--paper)}
@media (max-width:700px){
  .full img{height:auto;aspect-ratio:16/9}
}
.next{display:block;text-decoration:none;border-top:1px solid var(--rule);padding:clamp(28px,4vw,56px) var(--margin) clamp(48px,6vw,96px)}
.next small{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.next b{display:block;font:600 clamp(24px,3.4vw,52px)/1.05 var(--sans);letter-spacing:-.015em}
.next span{display:block;margin-top:8px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.next:hover b,.next:focus-visible b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
/* plain pages */
.text{display:grid;grid-template-columns:3fr 9fr;column-gap:var(--gut);padding:clamp(40px,6vw,96px) var(--margin)}
.text h1{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.text .body p{margin:0 0 1.1em;max-width:56ch;font:400 clamp(16px,1.25vw,19px)/1.6 var(--sans)}
.text .body p.big{font:600 clamp(26px,3vw,44px)/1.08 var(--sans);letter-spacing:-.015em;max-width:18ch;margin-bottom:.6em}
.text .body a{text-underline-offset:4px}
@media (max-width:860px){
  .text{grid-template-columns:1fr;row-gap:16px}
}
.rows{margin:0;padding:0;list-style:none;max-width:60ch}
.rows li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--rule);font:400 clamp(15px,1.1vw,17px)/1.3 var(--sans)}
.rows li span{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* footer */
@media (prefers-reduced-motion:reduce){
  .card .im img{transition:none}
  .card a:hover .im img{transform:none}
}
/* header: language toggle */
.lang{font:500 13px/1 var(--sans);text-decoration:none;border:1px solid var(--rule-ui);border-radius:0;min-height:40px;padding:0 16px;display:inline-flex;align-items:center;margin-inline-start:clamp(14px,2.4vw,28px)}
.lang:hover{border-color:var(--ink)}
@media (max-width:480px){
  :root{--head:92px}
  .lang{order:2;margin-inline-start:0;min-height:36px;padding:0 14px}
}
/* home: range strip, how we work, start a project */
.how{background:var(--paper)}
.how h2{margin:0;font:600 clamp(24px,2.6vw,38px)/1.1 var(--sans);letter-spacing:-.015em}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gut)}
.how li{border-top:2px solid var(--ink);padding-top:14px}
.how .n{font:500 12px var(--mono);color:var(--ink-3)}
.how h3{margin:8px 0 6px;font:600 clamp(16px,1.3vw,19px)/1.15 var(--sans)}
.how li p{margin:0;font-size:clamp(14px,.95vw,15px);line-height:1.5;color:var(--ink-2)}
@media (max-width:1000px){
  .how ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
}
@media (max-width:560px){
  .how ol{grid-template-columns:1fr}
}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;background:var(--ink);color:#fff;text-decoration:none;font:500 13px var(--mono);letter-spacing:.04em;border-radius:0;direction:ltr}
.btn:hover{background:#000;box-shadow:0 0 0 3px var(--rule)}
/* projects page: filter groups */
.filters{align-items:center}
/* Arabic (RTL). Letter-spacing and uppercase break Arabic joining, so they are switched off. */
html[lang="ar"]{--mono:"Plex Mono","Plex Sans Arabic",ui-monospace,monospace}
html[lang="ar"] *{letter-spacing:0!important;text-transform:none!important}
html[lang="ar"] body{line-height:1.85}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .sum,html[lang="ar"] .next b{line-height:1.3}
html[lang="ar"] .hero .cap h2,html[lang="ar"] .text .body p.big{line-height:1.2}
html[lang="ar"] .lang,html[lang="ar"] .filters button,html[lang="ar"] .text h1,html[lang="ar"] .card p,html[lang="ar"] .hero .cap p,html[lang="ar"] .hero .more,html[lang="ar"] .more-link,html[lang="ar"] .next small,html[lang="ar"] .next span,html[lang="ar"] .rows li span{font-size:15px;font-weight:500}
/* footer: four aligned columns and a bottom bar */
.foot{display:block;padding:clamp(36px,4.5vw,64px) var(--margin) 24px;border-top:1px solid var(--rule);font:400 13px/1.5 var(--sans)}
.foot-grid{display:grid;grid-template-columns:1fr 1.3fr 1.3fr 1fr 1fr 1.2fr;column-gap:clamp(16px,2.5vw,40px);row-gap:28px;align-items:start}
.foot .brandcol a{display:inline-block}
.foot .brandcol img{display:block;height:26px;width:auto}
.foot h2{margin:3px 0 14px;font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0}
.foot li a{display:block;padding:5px 0;font:400 13.5px/1.35 var(--sans);letter-spacing:0;color:var(--ink);text-decoration:none}
.foot li a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-bar{margin-top:clamp(28px,3.5vw,48px);padding-top:16px;border-top:1px solid var(--rule)}
.foot-bar p{margin:0;font-size:12.5px;color:var(--ink-3)}
html[lang="ar"] .foot li a.en-link{display:flex;align-items:center;gap:8px}
html[lang="ar"] .foot li a.en-link::after{content:"EN";font:500 9.5px/1.4 var(--mono);color:var(--ink-3);border:1px solid var(--rule-ui);border-radius:0;padding:0 4px}
@media (max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot .brandcol{grid-column:1/-1}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr}
}
/* legal pages */
.legal{padding:clamp(24px,3vw,48px) var(--margin) clamp(40px,5vw,80px)}
.lh{max-width:80ch;margin-bottom:clamp(24px,3vw,40px)}
.lh .eyebrow{margin:0 0 10px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lh .eyebrow a{text-decoration:none}
.lh h1{margin:0;font:600 clamp(24px,2.6vw,38px)/1.12 var(--sans);letter-spacing:-.015em}
.lh .upd{margin:10px 0 0;color:var(--ink-3);font-size:13px}
.lcols{display:grid;grid-template-columns:3fr 9fr;column-gap:var(--gut);align-items:start}
.toc{position:sticky;top:calc(var(--head) + 16px);padding-inline-end:16px}
.toc h2{margin:0 0 10px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t}
.toc li{counter-increment:t;margin:0 0 6px;font-size:13.5px;line-height:1.35}
.toc li a{text-decoration:none;color:var(--ink-2)}
.toc li a::before{content:counter(t) ". ";color:var(--ink-3)}
.toc li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){
  .lcols{grid-template-columns:1fr}
  .toc{position:static;margin-bottom:24px;padding:0 0 16px;border-bottom:1px solid var(--rule)}
}
.prose{max-width:72ch;counter-reset:h}
.prose h2{counter-increment:h;margin:2.2em 0 .6em;font:600 clamp(18px,1.5vw,22px)/1.25 var(--sans);letter-spacing:-.005em;scroll-margin-top:calc(var(--head) + 12px)}
.prose h2:first-child{margin-top:0}
.prose h2::before{content:counter(h) ". ";color:var(--ink-3);font-weight:500}
.prose h3{margin:1.6em 0 .4em;font:600 clamp(15px,1.1vw,17px)/1.3 var(--sans)}
.prose p,.prose li{font-size:clamp(15px,1vw,16px);line-height:1.7;color:var(--ink)}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1.1em;padding-inline-start:1.4em}
.prose li{margin:0 0 .45em}
.prose li>ul{margin:.45em 0 .2em}
.prose a{text-underline-offset:3px}
.prose code{font:500 .92em var(--mono);background:var(--paper);padding:1px 5px;border-radius:0}
.prose em{color:var(--ink-2)}
.tw{overflow-x:auto;margin:0 0 1.4em}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px;line-height:1.5}
.prose th,.prose td{text-align:start;vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule)}
.prose th{font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink)}
.btn-inline{font:500 13px var(--sans);min-height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);cursor:pointer}
.btn-inline:hover{background:var(--ink);color:#fff}
.lindex{list-style:none;margin:0;padding:0;max-width:80ch}
.lindex li a{display:block;padding:16px 0;border-top:1px solid var(--rule);text-decoration:none}
.lindex li:last-child a{border-bottom:1px solid var(--rule)}
.lindex .t{display:block;font:600 clamp(17px,1.3vw,20px)/1.25 var(--sans)}
.lindex .d{display:block;margin-top:4px;color:var(--ink-2);font-size:14px}
.lindex li a:hover .t{text-decoration:underline;text-underline-offset:4px}
@media print{
  .foot,.toc,.skip{display:none}
  body{padding-top:0}
  .prose{max-width:none}
}
/* simple pages: approach, start, questions, 404 */
.page .lh{max-width:60ch}
.page .pg-lead{margin:14px 0 0;font:400 clamp(17px,1.4vw,21px)/1.5 var(--sans);color:var(--ink-2)}
.prose.plain h2::before{content:none}
.page .prose{max-width:60ch}
.page .prose h2{font-size:clamp(17px,1.3vw,20px);margin-top:1.8em}
.pg-cta{margin:clamp(24px,3vw,40px) 0 0}
.faq{max-width:60ch;margin-top:8px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:16px 28px 16px 0;font:600 clamp(16px,1.2vw,18px)/1.35 var(--sans);position:relative}
html[dir="rtl"] .faq summary{padding:16px 0 16px 28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:0;top:14px;font:400 22px/1 var(--mono);color:var(--ink-3)}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 16px}
.faq .ans p{margin:0 0 .8em;font-size:clamp(15px,1vw,16px);line-height:1.7;color:var(--ink-2)}
.nf-ar{margin-top:clamp(32px,4vw,56px);padding-top:24px;border-top:1px solid var(--rule)}
.nf-ar h2{margin:0 0 8px;font:600 20px var(--sans)}
html[dir="rtl"] .foot li a[dir="ltr"]{text-align:right}
/* footer legal row */
.foot-legal{margin-top:clamp(24px,3vw,40px);padding-top:18px;border-top:1px solid var(--rule)}
.foot-legal h2{margin:0 0 8px}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2vw,28px)}
.foot-legal li a{padding:4px 0;font-size:13px}
.foot li a.all{margin-top:6px;font:500 12px var(--mono);letter-spacing:.04em;color:var(--ink-2)}
html[lang="ar"] .foot li a.all{font-size:13px}
/* home: services, sectors, network, journal */
.chips{list-style:none;margin:0 0 var(--s4,16px);padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--rule-ui);border-radius:0;background:var(--white);text-decoration:none;font:500 13.5px var(--sans)}
.chips a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.page .chips{margin:0 0 24px}
.net{border-top:1px solid var(--rule)}
.net h2{margin:0 0 10px;font:600 clamp(24px,2.6vw,38px)/1.1 var(--sans);letter-spacing:-.015em;max-width:20ch}
.net p{margin:0 0 20px;max-width:56ch;font:400 clamp(16px,1.2vw,19px)/1.5 var(--sans);color:var(--ink-2)}
.net .more-link{margin:0}
/* index lists with numbers, wide pages, notes */
.page.wide .lh{max-width:70ch}
.lindex.num li a{display:grid;grid-template-columns:48px minmax(0,2fr) minmax(0,3fr);column-gap:var(--gut);align-items:baseline}
.lindex.num .n{font:500 12px var(--mono);color:var(--ink-3)}
.lindex.num .d{margin-top:0}
@media (max-width:700px){
  .lindex.num li a{grid-template-columns:36px 1fr}
  .lindex.num .d{grid-column:2}
}
.page.wide .lindex{max-width:none}
.svc-note{max-width:60ch;margin:24px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3)}
.noproj{padding:0 var(--margin) 8px;max-width:60ch;color:var(--ink-2)}
.cards.rel{padding-top:clamp(16px,2vw,28px)}
/* company profile (print / PDF) */
.profile{padding:0;background:#fff;color:var(--ink)}
.pf-cover{padding:0}
.pf-cover .pf-logo{display:block;height:42px;width:auto;margin:0 0 20px}
.pf-cover{padding:20px var(--margin) 0}
.pf-t{margin:0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pf-cover h1{margin:6px 0 18px;font:600 40px/1.05 var(--sans);letter-spacing:-.02em}
.pf-hero{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;display:block}
.pf{padding:20px var(--margin)}
.pf h2{margin:18px 0 6px;font:600 17px/1.2 var(--sans)}
.pf p{margin:0 0 8px;font-size:12.5px;line-height:1.55;max-width:none}
.pf ul{margin:0;padding:0;list-style:none;columns:2;column-gap:20px;font-size:12px;line-height:1.7}
.pf2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pf-grid figure{margin:0}
.pf-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pf-grid figcaption{margin-top:4px;font-size:10.5px;line-height:1.3}
.pf-grid figcaption b{display:block;font-size:11px}
.pf-mail{font:500 12px var(--mono)}
.pf-note{margin-top:16px;font-size:10px;color:var(--ink-3)}
html[lang="ar"] .pf-cover h1{line-height:1.3}
@page{size:A4;margin:10mm}
@media print{
  .profile{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pf-cover h1{font-size:34px}
}
/* sitemap and search */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.smgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px var(--gut);margin-top:8px}
.smsec h2{margin:0 0 10px;font:600 17px/1.2 var(--sans)}
.smsec ul{list-style:none;margin:0;padding:0}
.smsec li a{display:block;padding:4px 0;font-size:14px;line-height:1.4;text-decoration:none;color:var(--ink-2)}
.smsec li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .smgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .smgrid{grid-template-columns:1fr}
}
.sform input{width:100%;max-width:640px;min-height:52px;padding:0 20px;border:1px solid var(--rule-ui);border-radius:0;background:var(--white);font:400 16px var(--sans);color:var(--ink)}
.sform input:focus{outline:none;border-color:rgba(17,17,17,.6);box-shadow:0 0 0 4px rgba(17,17,17,.07)}
.sform{margin:0 0 20px}
/* sector hierarchy */
.lindex .subs{list-style:none;margin:0;padding:0 0 16px;display:flex;flex-wrap:wrap;gap:4px 18px}
.lindex li>a{border-top:1px solid var(--rule)}
.lindex .subs a{display:inline;padding:0;border:0;font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.lindex .subs a:hover{color:var(--ink)}
.lindex li:has(.subs)>a{border-bottom:0;padding-bottom:6px}
.lindex .subs li:last-child a,.lindex .subs li a{border:0}
.lindex>li:last-child{border-bottom:1px solid var(--rule)}
/* editorial pages: sections in two columns, larger type */
.page .lh{max-width:none}
.page .lh h1{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.02em}
.page .pg-lead{max-width:52ch;font-size:clamp(19px,1.8vw,26px);line-height:1.4}
.page .prose.secs2{max-width:none;margin-top:clamp(20px,3vw,40px)}
.ps{display:grid;grid-template-columns:3fr 9fr;column-gap:var(--gut);padding:clamp(22px,2.6vw,38px) 0;border-top:1px solid var(--rule)}
.ps h2{margin:0;font:600 clamp(17px,1.4vw,21px)/1.25 var(--sans)}
.ps h2::before{content:none}
.pb{max-width:64ch}
.pb p,.pb li{font-size:clamp(16px,1.2vw,19px);line-height:1.65}
.pb p:first-child{margin-top:0}
.pb ul,.pb ol{margin-top:0}
@media (max-width:860px){
  .ps{grid-template-columns:1fr;row-gap:10px}
}
/* careers */
.cr-hero img{height:clamp(260px,52vh,560px)}
.cr-intro{display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);align-items:end}
.cr-intro h2{margin:0;font:600 clamp(26px,3.2vw,46px)/1.1 var(--sans);letter-spacing:-.02em;max-width:18ch}
.cr-intro p{margin:0;max-width:46ch;font:400 clamp(17px,1.4vw,21px)/1.5 var(--sans);color:var(--ink-2)}
@media (max-width:860px){
  .cr-intro{grid-template-columns:1fr;row-gap:18px}
}
.cr-why{background:var(--paper)}
.cr-why h2,.cr-two h2,.cr-apply h2,.cr-three h2{margin:0 0 20px;font:600 clamp(22px,2.2vw,32px)/1.15 var(--sans);letter-spacing:-.01em}
.cr-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.cr-cards li{border-top:2px solid var(--ink);padding-top:14px}
.cr-cards .n{font:500 12px var(--mono);color:var(--ink-3)}
.cr-cards h3{margin:8px 0;font:600 clamp(18px,1.5vw,22px)/1.2 var(--sans)}
.cr-cards p{margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.6;color:var(--ink-2)}
@media (max-width:860px){
  .cr-cards{grid-template-columns:1fr;gap:28px}
}
.cr-two{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,64px)}
@media (max-width:860px){
  .cr-two{grid-template-columns:1fr;row-gap:36px}
}
.chips.static span{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:1px solid var(--rule-ui);border-radius:0;font:500 13.5px var(--sans)}
.cr-look{list-style:none;margin:0;padding:0}
.cr-look li{display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-top:1px solid var(--rule)}
.cr-look li:last-child{border-bottom:1px solid var(--rule)}
.cr-look .n{font:500 12px var(--mono);color:var(--ink-3);padding-top:4px}
.cr-look p{margin:0;font-size:clamp(16px,1.2vw,19px);line-height:1.5}
.cr-apply{background:var(--ink);color:#fff}
.cr-apply h2,.cr-apply h3{color:#fff}
.cr-apply-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:860px){
  .cr-apply-in{grid-template-columns:1fr}
}
.cr-steps{list-style:none;margin:0;padding:0}
.cr-steps li{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-top:1px solid rgba(255,255,255,.25)}
.cr-steps .n{font:500 12px var(--mono);color:rgba(255,255,255,.6);padding-top:5px}
.cr-steps b{display:block;font:600 clamp(17px,1.4vw,20px)/1.2 var(--sans)}
.cr-steps p{margin:4px 0 0;color:rgba(255,255,255,.8);font-size:15px;line-height:1.5}
.cr-box{background:#fff;color:var(--ink);padding:clamp(22px,2.6vw,36px)}
.cr-box h3{margin:0 0 12px;font:600 20px/1.2 var(--sans);color:var(--ink)}
.cr-box ul{margin:0 0 22px;padding-inline-start:1.2em}
.cr-box li{margin:0 0 6px;font-size:16px;line-height:1.5}
.cr-box .hint{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.cr-box .btn{background:var(--ink);color:#fff}
.cr-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.cr-three p{margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.cr-three .more-link{margin:0}
@media (max-width:860px){
  .cr-three{grid-template-columns:1fr;row-gap:32px}
}
.lindex.num .subs a{display:inline;grid-template-columns:none}
.lindex.num .subs{padding-inline-start:calc(48px + var(--gut))}
@media (max-width:700px){
  .lindex.num .subs{padding-inline-start:36px}
}
.delivery{margin:12px 0 0;font:500 12.5px/1.4 var(--mono);color:var(--ink-3)}
html[lang="ar"] .delivery{font-size:14px}
/* projects navigation: plain bar, simple underlined fields; only the dropdown menu is frosted glass */
.pjbar{position:sticky;top:var(--head);z-index:6;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid rgba(255,255,255,.4);box-shadow:0 1px 0 rgba(17,17,17,.06);padding:clamp(14px,1.6vw,22px) var(--margin) clamp(12px,1.4vw,18px)}
.pjtop{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(10px,1.2vw,16px)}
.pjtop h1{margin:0;font:600 clamp(24px,2.6vw,38px)/1.05 var(--sans);letter-spacing:-.02em}
.pjtop .count{font:500 12.5px var(--mono);letter-spacing:.04em;color:var(--ink-2);text-transform:uppercase}
.pjtop .more-link{margin:0 0 0 auto;border-bottom:0;font-size:12px}
html[dir="rtl"] .pjtop .more-link{margin:0 auto 0 0}
.pjtools{display:grid;grid-template-columns:minmax(200px,1.6fr) minmax(150px,1fr) minmax(150px,1fr) auto auto;gap:clamp(12px,2vw,32px);align-items:end}
.fld{display:flex;flex-direction:column;gap:2px;min-width:0;position:relative}
.fld>span{font:500 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.fld input,.fld select,.dd-btn{width:100%;min-height:40px;padding:6px 22px 6px 0;border:0;border-bottom:1px solid rgba(17,17,17,.4);border-radius:0;background:transparent;color:var(--ink);font:400 15px/1.3 var(--sans);-webkit-appearance:none;appearance:none;transition:border-color .2s ease}
.fld input::placeholder{color:var(--ink-2)}
html[dir="rtl"] .fld input,html[dir="rtl"] .fld select,html[dir="rtl"] .dd-btn{padding:6px 0 6px 22px}
.fld input:hover,.dd-btn:hover{border-bottom-color:var(--ink)}
.fld input:focus,.fld input:focus-visible,.dd-btn:focus,.dd-btn:focus-visible,.dd.open .dd-btn{outline:none;box-shadow:none;border-bottom:2px solid var(--ink);padding-bottom:5px}
.dd{position:relative}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start;cursor:pointer}
.dd-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn svg{flex:none;color:var(--ink);margin-inline-end:-18px;transition:transform .25s ease}
.dd.open .dd-btn svg{transform:rotate(180deg)}
/* the menu: frosted glass, no outline, soft highlight */
.dd-list{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:20;min-width:0;max-height:min(60vh,360px);overflow:auto;margin:0;padding:4px 0;list-style:none;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);border:0;border-radius:0;box-shadow:0 14px 40px rgba(0,0,0,.14),0 1px 0 rgba(17,17,17,.05);animation:ddin .16s ease}
.dd-list[hidden]{display:none}
.dd-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-radius:0;font:400 15px/1.3 var(--sans);color:var(--ink);cursor:pointer;transition:background-color .15s ease}
.dd-list li+li{border-top:1px solid rgba(17,17,17,.06)}
.dd-list li:hover,.dd-list li:focus{background:rgba(17,17,17,.05);outline:none;color:var(--ink)}
.dd-list li[aria-selected="true"]{font-weight:600}
@keyframes ddin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dd-list{background:rgba(255,255,255,.97)}
}
@media (prefers-reduced-transparency:reduce){
  .dd-list{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.srt>div{display:flex;align-items:center;gap:8px;min-height:40px;font:500 14px var(--sans)}
.srt i{font-style:normal;color:var(--ink-3)}
.srt button{padding:6px 0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-2);font:inherit;cursor:pointer}
.srt button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.srt button:hover{color:var(--ink)}
.srt button:focus,.srt button:focus-visible,.clr:focus,.clr:focus-visible{outline:none;box-shadow:none}
.clr{align-self:end;min-height:40px;padding:0 0 0 4px;border:0;background:transparent;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.clr:hover{color:var(--ink)}
.clr[hidden]{display:none}
.pjnone{padding:clamp(32px,5vw,72px) var(--margin);color:var(--ink-2)}
@media (max-width:900px){
  .pjtools{grid-template-columns:1fr 1fr}
  .fld.fq{grid-column:1/-1}
  .pjbar{position:static;background:rgba(255,255,255,.92)}
  .pjtop .more-link{margin-inline-start:auto}
  .srt{grid-column:1/-1}
}
html[lang="ar"] .fld>span,html[lang="ar"] .clr,html[lang="ar"] .pjtop .count{letter-spacing:0;font-size:13px}
@media (prefers-reduced-motion:reduce){
  .dd-list{animation:none}
  .fld input,.dd-btn,.dd-btn svg,.dd-list li{transition:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pjbar{background:rgba(255,255,255,.96)}
}
@media (prefers-reduced-transparency:reduce){
  .pjbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.dd-list{width:100%}
*:not(.lang):not(.sw-k):not(.sw-t),*::before,*::after{border-radius:0!important}
/* language switch: a two-position switch, current language filled */
.lang{padding:0;gap:0;overflow:hidden;border-color:var(--ink)}
/* language switch, final: sliding knob. Off = English (knob left), on = Arabic (knob right). */
.lang{position:relative;display:inline-block;width:78px;height:32px;min-height:0;padding:0;overflow:hidden;border:0;border-radius:16px;background:#d3d4d8;color:#fff;transition:background-color .25s ease}
.lang[aria-checked="true"]{background:var(--ink)}
.sw-k{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .25s ease}
.lang[aria-checked="true"] .sw-k{transform:translateX(46px)}
.lang:hover .sw-k{box-shadow:0 1px 5px rgba(0,0,0,.4)}
@media (max-width:480px){
  .lang{width:72px;height:30px;border-radius:15px}
  .sw-k{width:24px;height:24px}
  .lang[aria-checked="true"] .sw-k{transform:translateX(42px)}
}
@media (prefers-reduced-motion:reduce){
  .lang,.sw-k{transition:none}
}
/* language switch: 40% of the previous size, no inner label (the page language says which is which) */
.lang{width:32px;height:14px;border-radius:7px}
.sw-k{top:2px;left:2px;width:10px;height:10px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.lang[aria-checked="true"] .sw-k{transform:translateX(18px)}
.lang::after{content:"";position:absolute;inset:-14px -8px}
@media (max-width:480px){
  .lang{width:32px;height:14px;border-radius:7px;min-height:0;padding:0}
  .sw-k{width:10px;height:10px}
  .lang[aria-checked="true"] .sw-k{transform:translateX(18px)}
}
/* language switch: 20% larger, with EN and Arabic labels either side of the track */
.lang{width:auto;height:auto;min-height:40px;padding:0;overflow:visible;background:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);position:relative}
.lang[aria-checked="true"]{background:transparent}
.sw-a,.sw-b{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);transition:color .2s ease}
.sw-b{font:500 13.5px/1 var(--sans);letter-spacing:0}
.lang[aria-checked="false"] .sw-a,.lang[aria-checked="true"] .sw-b{color:var(--ink)}
.sw-t{position:relative;flex:none;width:38px;height:17px;border-radius:9px;background:#c9cacf;transition:background-color .25s ease}
.lang[aria-checked="true"] .sw-t{background:var(--ink)}
.sw-k{top:2px;left:2px;width:13px;height:13px}
.lang[aria-checked="true"] .sw-k{transform:translateX(21px)}
.lang::after{inset:0 -6px}
.lang:hover .sw-a,.lang:hover .sw-b{color:var(--ink)}
@media (max-width:480px){
  .lang{width:auto;height:auto;min-height:36px;padding:0}
  .sw-k{width:13px;height:13px}
  .lang[aria-checked="true"] .sw-k{transform:translateX(21px)}
}
/* page hero (text pages): a calm image under the header, not full-screen */
.phero{background:var(--paper)}
.phero img{display:block;width:100%;height:clamp(220px,46vh,520px);object-fit:cover}
@media (max-width:700px){
  .phero img{height:clamp(200px,60vw,340px)}
}
/* journal: previous / next article, frosted like the header */
.jnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin:clamp(32px,4vw,56px) 0 0}
.jn{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 20px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(17,17,17,.1);box-shadow:0 8px 28px rgba(17,17,17,.08);transition:border-color .2s ease,box-shadow .2s ease}
.jn:hover{border-color:rgba(17,17,17,.4);box-shadow:0 10px 32px rgba(17,17,17,.12)}
.jn small{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.jn b{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 16px/1.35 var(--sans)}
.jn.next{grid-column:2;text-align:end}
.jn.prev{grid-column:1}
.jn.prev:only-child{grid-column:1}
html[dir="rtl"] .jn .arr{display:inline-block;transform:scaleX(-1)}
html[lang="ar"] .jn small{letter-spacing:0;text-transform:none;font-size:13px}
@media (max-width:600px){
  .jnav{grid-template-columns:1fr}
  .jn.next,.jn.prev{grid-column:1}
}
@media (prefers-reduced-transparency:reduce){
  .jn{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .jn{background:rgba(255,255,255,.96)}
}
.jn small{white-space:nowrap}
.jn.next small{display:block}
/* journal: cite this article */
.cite{margin:clamp(32px,4vw,56px) 0 0;padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--rule)}
.cite h2{margin:0 0 6px;font:600 clamp(18px,1.6vw,22px)/1.2 var(--sans)}
.cite .cn{margin:0 0 14px;color:var(--ink-2);font-size:14px}
.cite ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cite li{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--rule)}
.cite li b{font:500 11px/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cite .cq{margin:0;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere;text-align:start}
.cite .cc{min-height:32px;padding:0 14px;border:1px solid var(--rule-ui);background:transparent;font:500 12px var(--mono);letter-spacing:.04em;cursor:pointer;color:var(--ink)}
.cite .cc:hover{border-color:var(--ink)}
html[lang="ar"] .cite li b{letter-spacing:0;text-transform:none}
@media (max-width:600px){
  .cite li{grid-template-columns:1fr auto}
  .cite li b{grid-column:1/-1}
}
/* journal articles: justified text, like a printed article */
.jart .pg-lead,.jart .prose p,.jart .prose li{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.jart .prose h2,.jart .cite,.jart .jnav,.jart .lh h1,.jart .upd{text-align:start;-webkit-hyphens:manual;hyphens:manual}
.jart .cite .cq{text-align:start;-webkit-hyphens:manual;hyphens:manual}
html[lang="ar"] .jart .prose p,html[lang="ar"] .jart .prose li,html[lang="ar"] .jart .pg-lead{text-justify:inter-word;hyphens:manual}
/* three in a row */
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
}
/* journal index: faded thumbnails with the title on top */
.jcards{gap:clamp(14px,1.6vw,24px) var(--gut)}
.jc{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff}
.jc[hidden]{display:none}
.jc a{position:absolute;inset:0;display:flex;align-items:flex-end;text-decoration:none;color:var(--ink)}
.jc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;transition:opacity .3s ease,transform .5s ease}
.jc:hover img,.jc a:focus-visible img{opacity:.6;transform:scale(1.03)}
.jc .jt{position:relative;z-index:1;display:block;width:100%;padding:clamp(14px,1.6vw,22px);font:600 clamp(18px,1.55vw,24px)/1.2 var(--sans);letter-spacing:-.01em;text-wrap:balance}
html[lang="ar"] .jc .jt{letter-spacing:0}
@media (prefers-reduced-motion:reduce){
  .jc img{transition:none}
  .jc:hover img{transform:none}
}
.jtools{grid-template-columns:minmax(220px,1.6fr) auto auto}
@media (max-width:900px){
  .jtools{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .cards{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .jc .jt{font-size:clamp(15px,2.2vw,19px)}
}
/* burger and full navigation menu */
.jc img{opacity:.2}
.jc:hover img,.jc a:focus-visible img{opacity:.42}
/* journal cards: title at the top, short description, Read more */
.jc a{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:clamp(16px,1.8vw,24px);gap:10px}
.jc .jt{padding:0;width:auto;font:600 clamp(19px,1.6vw,25px)/1.18 var(--sans);text-wrap:balance}
.jc .jd{position:relative;z-index:1;display:block;max-width:44ch;font:400 14.5px/1.45 var(--sans);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jc .jm{position:relative;z-index:1;margin-top:auto;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:4px}
.jc .jm .arr{display:inline-block;transition:transform .2s ease}
.jc:hover .jm .arr{transform:translateX(4px)}
html[dir="rtl"] .jc .jm .arr{transform:scaleX(-1)}
html[dir="rtl"] .jc:hover .jm .arr{transform:scaleX(-1) translateX(4px)}
html[lang="ar"] .jc .jm{letter-spacing:0;text-transform:none;font-size:14px}
@media (max-width:1000px){
  .jc .jt{font-size:clamp(16px,2.2vw,20px)}
  .jc .jd{font-size:13px;-webkit-line-clamp:2}
}
@media (max-width:460px){
  .jc{aspect-ratio:auto;min-height:220px}
  .jc a{position:relative;min-height:220px}
}
/* journal cards v3: clear photograph, frosted text panel */
.jc{background:var(--paper)}
.jc img{opacity:1;filter:saturate(.95)}
.jc:hover img,.jc a:focus-visible img{opacity:1;transform:scale(1.04)}
.jc a{padding:12px;gap:0;justify-content:space-between}
.jc .jp{position:relative;z-index:1;display:block;padding:14px 16px 15px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.6);box-shadow:0 6px 24px rgba(17,17,17,.08)}
.jc .jt{margin:0 0 6px;color:var(--ink);font:600 clamp(18px,1.5vw,23px)/1.2 var(--sans)}
.jc .jd{color:var(--ink-2);-webkit-line-clamp:2}
.jc .jm{margin-top:0;align-self:flex-start;padding:9px 12px;border-bottom:0;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);color:var(--ink)}
.jc:hover .jm{background:#fff}
@media (max-width:1000px){
  .jc .jt{font-size:clamp(15px,2vw,18px)}
  .jc .jp{padding:11px 12px}
  .jc .jd{-webkit-line-clamp:2}
}
@media (prefers-reduced-transparency:reduce){
  .jc .jp,.jc .jm{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .jc .jp,.jc .jm{background:rgba(255,255,255,.95)}
}
/* journal: general-information notice */
.disc{margin:clamp(28px,3.4vw,48px) 0 0;padding:16px 18px;border:1px solid var(--rule-ui);background:rgba(17,17,17,.03)}
.disc h2{margin:0 0 6px;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.disc p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);text-align:start;hyphens:manual}
html[lang="ar"] .disc h2{letter-spacing:0;text-transform:none;font-size:13px}