/* ==========================================================
   مُحكَم | Muhkam Lab — design system
   ========================================================== */
:root{
  --g:#0F4A47; --g2:#1B5D59; --g3:#2E716C; --gs:#E4ECEA; --gs2:#CFDDDA;
  --gold:#B8945A; --goldt:#8A6831; --golds:#EFE5D3;
  --iv:#F7F3EA; --iv2:#EFE8DA; --white:#FFFDF8;
  --ink:#1D2B2A; --muted:#46534F; --line:#DCD5C6;
  --r:10px; --r-lg:16px;
  --wrap:1200px; --pad:clamp(20px,4vw,40px);
  --f-ar:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-head:'Amiri',serif;
  --f-en:'Jost',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--f-ar);font-size:18px;line-height:1.9;color:var(--ink);background:var(--iv);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--g);text-decoration-thickness:1px;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
p,li,span,div{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
.en{font-family:var(--f-en);direction:ltr;unicode-bidi:isolate}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--g);color:var(--iv);padding:8px 16px;border-radius:6px;z-index:99}
.skip:focus{inset-inline-start:8px}

/* ---------- type ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--goldt);margin-bottom:14px}
.kicker::before{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none}
.on-dark .kicker{color:#D8BC86}
h1{font-family:var(--f-head);font-weight:700;color:var(--g);font-size:clamp(38px,5vw,60px);line-height:1.3}
h2{font-family:var(--f-head);font-weight:700;color:var(--g);font-size:clamp(30px,3.4vw,42px);line-height:1.35;margin-bottom:18px}
h3{font-size:21px;font-weight:700;color:var(--g);line-height:1.55}
.lead{font-size:20px;line-height:1.85;color:var(--g);font-weight:500}
.muted{color:var(--muted)}
.on-dark{color:#E3ECEA}
.on-dark h2,.on-dark h3,.on-dark h1{color:var(--iv)}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec-sm{padding-block:clamp(40px,5vw,64px)}
.sec-head{max-width:760px;margin-bottom:40px}
.center{text-align:center;margin-inline:auto}
.bg-iv2{background:var(--iv2)} .bg-g{background:var(--g)} .bg-white{background:var(--white)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 17px/1 var(--f-ar);padding:16px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--g);color:var(--iv)} .btn-primary:hover{background:var(--g2)}
.btn-gold{background:var(--gold);color:#13302E} .btn-gold:hover{background:#c8a56a}
.btn-ghost{border-color:var(--g);color:var(--g);background:transparent} .btn-ghost:hover{background:var(--g);color:var(--iv)}
.on-dark .btn-ghost{border-color:#E3ECEA;color:var(--iv)} .on-dark .btn-ghost:hover{background:var(--iv);color:var(--g)}
.btn .arr{font-family:var(--f-en);font-size:18px}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.link{font-weight:600;text-decoration:none;color:var(--g);display:inline-flex;gap:8px;align-items:center}
.link:hover{text-decoration:underline}

/* ---------- tags ---------- */
.tag{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--goldt);background:var(--golds);padding:5px 14px;border-radius:999px;line-height:1.6}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.tag.dark{background:#ffffff1a;color:#E2C58F}

/* ---------- logo lockup (approved proportions) ---------- */
.lockup{display:flex;align-items:center;gap:calc(56*var(--u));--u:.19px;text-decoration:none}
.lockup .mk{width:calc(300*var(--u));height:calc(396*var(--u));color:var(--g);--gm:var(--gold);flex:none}
.lockup .wm{display:flex;flex-direction:column;align-items:flex-start}
.lockup .ar{font-family:var(--f-head);font-weight:700;font-size:calc(170*var(--u));line-height:1.15;color:var(--g)}
.lockup .lat{font-family:var(--f-en);font-weight:500;font-size:calc(40*var(--u));letter-spacing:.32em;color:var(--gold);direction:ltr;margin-top:calc(44*var(--u));padding-right:calc(6*var(--u));text-transform:uppercase;white-space:nowrap}
.lockup.inv .mk,.lockup.inv .ar{color:var(--iv)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:#F7F3EAf2;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.nav{display:flex;gap:4px;list-style:none}
.nav a{display:block;padding:8px 13px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:16.5px;font-weight:500}
.nav a:hover{background:var(--gs)}
.nav a[aria-current=page]{color:var(--g);font-weight:700;background:var(--gs)}
.head-cta{padding:12px 20px;font-size:16px}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:46px;height:46px;cursor:pointer;color:var(--g);align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}

/* ---------- footer ---------- */
.site-foot{background:var(--g);color:#D6E3E0;padding-top:64px}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:44px}
.site-foot h4{color:var(--iv);font-size:17px;margin-bottom:14px}
.site-foot ul{list-style:none;display:grid;gap:6px}
.site-foot a{color:#D6E3E0;text-decoration:none} .site-foot a:hover{color:var(--iv);text-decoration:underline}
.site-foot .tagline{margin-top:18px;font-size:16px;color:#C7D8D4}
.site-foot .bottom{border-top:1px solid #ffffff22;padding-block:20px;font-size:14.5px;color:#B9CCC8;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.contact-list li{display:flex;gap:10px;align-items:baseline}
.contact-list b{color:#D8BC86;font-weight:600;min-width:62px;font-size:15px}

/* ---------- photo ---------- */
.photo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--gs)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .note{position:absolute;inset-inline-start:12px;bottom:12px;font-size:13px;background:#0F4A47cc;color:#F1F5F4;padding:3px 10px;border-radius:999px;backdrop-filter:blur(4px)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--g);color:#E3ECEA;position:relative;overflow:hidden}
.page-hero .wrap{padding-block:72px 64px;position:relative}
.page-hero h1{color:var(--iv);font-size:clamp(36px,4.4vw,54px);margin-bottom:14px}
.page-hero p{max-width:720px;font-size:19.5px;color:#D6E3E0}
.crumbs{font-size:15px;color:#BBD0CC;margin-bottom:18px}
.crumbs a{color:#D8BC86;text-decoration:none}
.deco-rh{position:absolute;pointer-events:none}

/* ---------- generic grids / cards ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.card p{color:var(--muted);font-size:17px}
.num{font-family:var(--f-en);font-weight:500;color:var(--gold);font-size:30px;line-height:1}
.rh-num{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;position:relative;font-family:var(--f-en);font-weight:500;color:var(--iv);font-size:17px}
.rh-num::before{content:"";position:absolute;inset:7px;background:var(--g);transform:rotate(45deg);border-radius:3px}
.rh-num span{position:relative}
.rh-num.gold::before{background:var(--gold)}
.ol-ar{list-style:none;display:grid;gap:14px;counter-reset:n}
.ol-ar li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.ol-ar li::before{counter-increment:n;content:counter(n);font-family:var(--f-en);font-weight:500;color:var(--goldt);font-size:20px;line-height:1.9}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:64px 80px}
.hero p.lead{margin:22px 0 32px;max-width:560px}
.hero .photo{aspect-ratio:4/4.4}
.hero .photo img{object-position:78% 40%}

/* challenge cards */
.ch-card{display:flex;flex-direction:column;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.ch-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.ch-card h3{font-family:var(--f-head);font-size:26px;line-height:1.45}
.ch-card p{color:var(--muted);font-size:17px}
.ch-card .link{margin-top:auto}

/* path (5 steps) */
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;counter-reset:s}
.path::before{content:"";position:absolute;top:22px;inset-inline:10%;height:2px;background:var(--gs2)}
.path li{list-style:none;text-align:center;padding-inline:10px;position:relative}
.path .rh-num{margin-bottom:14px}
.path h3{font-size:19px}
.path p{font-size:15.5px;color:var(--muted);line-height:1.75;margin-top:4px}

/* split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev{direction:ltr} .split.rev>*{direction:rtl}

/* trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.trio>div{padding:28px 0 8px;padding-inline-end:28px}
.trio>div+div{padding-inline-start:28px;border-inline-start:1px solid var(--line)}
.trio .k{font-family:var(--f-head);font-size:30px;color:var(--g);font-weight:700}

/* CTA band */
.cta{background:var(--g);border-radius:24px;padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden}
.cta h2{color:var(--iv);margin:0}
.cta .btns{justify-content:flex-end}

/* quote */
.quote{font-family:var(--f-head);font-size:clamp(22px,2.4vw,28px);line-height:1.7;color:var(--g);border-inline-start:4px solid var(--gold);padding-inline-start:24px}

/* stages (how we work) */
.stages{display:grid;grid-template-columns:380px 1fr;gap:40px;align-items:start}
.st-list{list-style:none;display:grid;gap:6px}
.st-list button{width:100%;display:flex;align-items:center;gap:14px;background:none;border:1px solid transparent;border-radius:12px;padding:8px 12px;font:600 18px var(--f-ar);color:var(--ink);cursor:pointer;text-align:right}
.st-list button:hover{background:var(--gs)}
.st-list button[aria-selected=true]{background:var(--white);border-color:var(--gold);color:var(--g)}
.st-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;position:sticky;top:110px}
.st-panel .big{font-family:var(--f-en);font-size:72px;color:var(--gold);line-height:1;font-weight:400}
.st-panel h3{font-family:var(--f-head);font-size:34px;margin:10px 0 12px}

/* outcomes */
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.outcomes div{border-radius:var(--r-lg);padding:26px;background:var(--white);border:1px solid var(--line);text-align:center}
.outcomes b{display:block;font-size:20px;color:var(--g);margin:8px 0 4px}

/* empty state */
.empty{border:1.5px dashed var(--gs2);border-radius:var(--r-lg);padding:28px;background:#ffffff80}
.empty .lbl{font-size:14.5px;color:var(--muted)}

/* forms */
.opt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.opt{display:flex;flex-direction:column;gap:10px;padding:24px 20px;border-radius:var(--r-lg);background:var(--white);border:1.5px solid var(--line);text-decoration:none;color:inherit}
.opt h3{font-size:19px}
.opt p{font-size:15.5px;color:var(--muted);line-height:1.7}
.opt.on{border-color:var(--g);box-shadow:0 0 0 3px var(--gs2)}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px)}
.field{display:grid;gap:8px;margin-bottom:22px}
.field label,.field legend{font-weight:600;color:var(--g);font-size:17px}
.field .hint{font-size:15px;color:var(--muted);font-weight:400}
.field input[type=text],.field input[type=email],.field textarea,.field select{font:400 17px var(--f-ar);padding:13px 16px;border:1.5px solid var(--gs2);border-radius:10px;background:var(--iv);color:var(--ink);width:100%}
.field textarea{min-height:130px;resize:vertical;line-height:1.8}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--gs2)}
.chips{display:flex;flex-wrap:wrap;gap:10px;border:0}
.chips label{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid var(--gs2);border-radius:999px;font-weight:500;color:var(--ink);cursor:pointer;font-size:16.5px}
.chips input{accent-color:var(--g);width:17px;height:17px}
.chips label.on{border-color:var(--g);background:var(--gs)}
.req{color:#A33}
.notice{display:flex;gap:12px;background:var(--golds);border-radius:12px;padding:14px 18px;font-size:16px;color:#5E4A26}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* contact */
.c-card{display:flex;flex-direction:column;gap:6px;padding:30px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit}
.c-card .lbl{font-size:15px;color:var(--goldt);font-weight:600}
.c-card .val{font-family:var(--f-en);font-size:24px;color:var(--g);direction:ltr;text-align:right}
.c-card:hover{border-color:var(--gold)}

/* disclaimer */
.img-note{font-size:14px;color:var(--muted)}

/* challenge detail + join layouts */
.ch-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.ch-body,.join-body{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.join-body{grid-template-columns:1fr 360px;gap:40px;margin-top:48px}
.side{position:sticky;top:110px;display:grid;gap:18px}
html,body{overflow-x:hidden}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav,.head-cta{display:none}
  .menu-btn{display:inline-flex}
  .opt-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  body{font-size:17.5px}
  .hero .wrap,.split,.cta,.stages,.site-foot .cols{grid-template-columns:1fr}
  .hero .wrap{gap:32px;padding-block:36px 56px}
  .split{gap:24px}
  .hero .photo{aspect-ratio:4/3;order:-1}
  .g2,.g3,.g4,.g5,.outcomes,.form-row{grid-template-columns:1fr}
  .path{grid-template-columns:1fr;gap:18px}
  .path::before{top:0;bottom:0;inset-inline:auto;inset-inline-start:21px;width:2px;height:auto}
  .path li{display:grid;grid-template-columns:44px 1fr;gap:14px;text-align:right;padding:0}
  .path .rh-num{margin:0}
  .trio{grid-template-columns:1fr}
  .trio>div,.trio>div+div{padding:20px 0;border-inline-start:0;border-bottom:1px solid var(--line)}
  .cta .btns{justify-content:flex-start}
  .opt-grid{grid-template-columns:1fr 1fr}
  .site-head .wrap{height:70px}
  .st-panel{position:static}
  .ch-hero,.ch-body,.join-body{grid-template-columns:1fr;gap:32px}
  .side{position:static}
  .ch-hero .photo{max-width:420px}
}

/* ==========================================================
   UNIFIED SYSTEM — identical rules to the brochure
   page title · section title · item title · body · description
   justified paragraphs · one rhombus numbering style
   ========================================================== */
h2{font-size:clamp(30px,3.2vw,40px)!important}
.h-sub{font-family:var(--f-head);font-weight:700;color:var(--g);font-size:28px!important;line-height:1.4;margin:44px 0 16px}
.card h3,.ch-card h3,.opt h3,.empty h3,.c-card h3,.st-list button,.outcomes b{font-size:20px!important}
.ch-card h3{font-family:var(--f-ar)!important;line-height:1.6!important}
.card p,.ch-card p,.opt p,.empty p,.trio p,.path p,.outcomes p,.ol-ar li{font-size:17px!important;line-height:1.85!important}
p,.ol-ar li>span{text-align:justify;text-justify:inter-word}
.center p,.path p,.outcomes p,.c-card span,.notice{text-align:center}
.notice{text-align:right}
.cta h2,h1,h2,h3{text-align:inherit}
/* one numbering style: rhombus badge from the mark */
.num,.ol-ar li::before{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  font:500 16px/1 var(--f-en)!important;color:var(--iv)!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20,5 35,20 20,35 5,20' fill='%230F4A47'/%3E%3C/svg%3E") center/contain no-repeat}
.ol-ar li{grid-template-columns:40px 1fr!important;gap:14px!important;align-items:start}
.ol-ar li::before{margin-top:2px}
.on-dark .ol-ar li::before{color:var(--g)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20,5 35,20 20,35 5,20' fill='%23B8945A'/%3E%3C/svg%3E")}
.rh-num{width:40px!important;height:40px!important;font-size:16px!important}

/* narrow card grids rendered as wide numbered rows (same pattern as the brochure) */
.as-rows{grid-template-columns:1fr!important;gap:0!important;border-top:1px solid var(--line)}
.as-rows .card{display:grid;grid-template-columns:44px 300px 1fr;gap:22px;align-items:center;background:none!important;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:24px 0!important;grid-column:auto!important}
.as-rows.nonum .card{grid-template-columns:220px 1fr}
.as-rows .card h3{margin:0!important;color:var(--g)!important}
.as-rows .card p{margin:0!important;color:var(--muted)!important}
.as-rows .card .rh-num::before{background:var(--g)!important}
.opt{align-items:center;text-align:center}
.opt p{text-align:center!important}
@media (max-width:860px){
  .as-rows .card{grid-template-columns:44px 1fr;gap:6px 14px}
  .as-rows .card p{grid-column:2}
  .as-rows.nonum .card{grid-template-columns:1fr}
  .as-rows.nonum .card p{grid-column:1}
}

/* short intros and narrow side lists: balanced lines of near-equal length (no stretched gaps) */
.page-hero p,.side p,.side li>span,.card .ol-ar li>span{text-align:right!important;text-wrap:balance}

/* ---------- phase 2: behaviour styles ---------- */
[hidden]{display:none!important}
.err{color:#9B2C2C;font-size:15px;min-height:0}
.err:empty{display:none}
[aria-invalid=true]{border-color:#9B2C2C!important;box-shadow:0 0 0 3px #9b2c2c22!important}
.form-status{margin-top:22px;border-radius:12px;padding:16px 20px;font-size:16.5px;line-height:1.8}
.form-status.info{background:var(--gs);color:var(--g)}
.form-status.ok{background:#E3F1E7;color:#1F5130}
.form-status.bad{background:#F7E4E4;color:#7A2222}
.btn[disabled]{opacity:.6;cursor:wait}
.opt{cursor:pointer}
.opt:focus-visible{outline-offset:2px}
/* mobile menu panel */
@media (max-width:1100px){
  .site-head{position:sticky}
  .site-head.open .nav{display:flex;flex-direction:column;gap:2px;position:absolute;top:100%;left:0;right:0;background:var(--iv);border-bottom:1px solid var(--line);padding:12px var(--pad) 18px;box-shadow:0 12px 24px #0f4a4714}
  .site-head.open .nav a{padding:12px 14px;font-size:18px}
}

.nav-cta{display:none}
@media (max-width:1100px){.site-head.open .nav-cta{display:block;margin-top:10px}.site-head.open .nav-cta a{display:inline-flex;color:var(--iv);padding:14px 24px}}

.lib-card{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding:40px!important;border-color:var(--gold)!important}
@media (max-width:860px){.lib-card{grid-template-columns:1fr;gap:18px;padding:28px!important}.lib-card .btn{justify-self:start}}