@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(../fonts/plex-arabic-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(../fonts/plex-arabic-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --navy:#12294a; --navy-2:#1d3a66; --blue:#1f5fa8; --sun:#ffd400;
  --ink:#1b2636; --muted:#4f5d70; --line:#d9e0e9; --paper:#fff; --tint:#f3f6fa;
  --gutter:clamp(16px,4vw,40px); --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 "Plex",system-ui,"Segoe UI",Tahoma,sans-serif}
html[lang="ar"] body{line-height:1.85}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-weight:600;line-height:1.2;margin:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.4}
p{margin:0}
a{color:var(--blue);text-underline-offset:.18em}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.hero :focus-visible{outline-color:#fff}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;inset-inline-start:16px;top:-60px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:4px;z-index:10}
.skip:focus{top:8px;color:#fff}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--paper);border-block-end:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none;font-weight:600;line-height:1.2}
.brand img{width:64px;height:auto}
.nav{display:flex;align-items:center;gap:4px 22px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0;font-size:1rem}
.nav a:hover{color:var(--blue);text-decoration:underline}
.nav .lang{border:1px solid var(--line);border-radius:4px;padding:5px 12px;font-weight:600}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.hero .rays{position:absolute;inset-inline-end:-140px;bottom:-4px;width:min(760px,92vw);max-width:none;pointer-events:none}
html[dir="rtl"] .hero .rays{transform:scaleX(-1)}
.hero .wrap{position:relative;padding-block:clamp(64px,10vw,124px) clamp(190px,16vw,124px)}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:13em}
.hero p{margin-block-start:20px;max-width:30em;font-size:clamp(1.0625rem,2vw,1.25rem);color:#dbe5f2}
.btn{display:inline-block;margin-block-start:32px;background:var(--sun);color:var(--navy);font:inherit;font-weight:600;border:0;border-radius:4px;padding:12px 26px;text-decoration:none;cursor:pointer}
.btn:hover{background:#ffe352;color:var(--navy)}

/* sections */
section{padding-block:clamp(56px,8vw,96px)}
.eyebrow{color:var(--blue);font-weight:600;font-size:.95rem;margin-block-end:10px}
h2{font-size:clamp(1.7rem,3.4vw,2.35rem);color:var(--navy);max-width:20em}

.svc{list-style:none;margin:40px 0 0;padding:0;counter-reset:s}
.svc li{counter-increment:s;display:grid;grid-template-columns:72px 1fr 1.5fr;gap:8px 24px;padding-block:28px;border-block-start:1px solid var(--line)}
.svc li:last-child{border-block-end:1px solid var(--line)}
.svc li::before{content:counter(s,decimal-leading-zero);color:var(--blue);font-weight:600;font-size:1.25rem;line-height:1.3}
.svc h3{font-size:1.25rem;color:var(--navy);line-height:1.35}
.svc p{color:var(--muted)}

.creds{background:var(--tint)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px}
.split p+p{margin-block-start:16px}
.split .body{color:var(--muted)}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;margin-block-start:48px;padding-block-start:32px;border-block-start:1px solid var(--line)}
.vm h3{font-size:1.125rem;color:var(--navy);margin-block-end:8px}
.vm p{color:var(--muted)}

/* projects */
.projects{background:var(--tint)}
.work{list-style:none;margin:32px 0 0;padding:0}
.work li{display:grid;grid-template-columns:136px 1fr;gap:6px 24px;padding-block:24px;border-block-start:1px solid var(--line)}
.work li:last-child{border-block-end:1px solid var(--line)}
.year{color:var(--blue);font-weight:600}
.now{display:block;width:fit-content;background:var(--navy);color:#fff;font-size:.85rem;border-radius:3px;padding:1px 8px;margin-block-end:6px}
.now.done{background:none;color:var(--muted);box-shadow:inset 0 0 0 1px #8795a8}
.work-more{margin:20px 0 0;color:var(--muted)}
.work h3{font-size:1.125rem;color:var(--navy);line-height:1.35;margin:0}
.client{font-weight:600;font-size:.95rem;color:var(--muted);margin-block-end:6px}
.work li div p:last-child{color:var(--muted);max-width:46em}

/* credentials */
.cred-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 32px;margin:32px 0 0}
.cred-list div{border-block-start:3px solid var(--sun);padding-block-start:12px}
.cred-list dt{font-weight:600;color:var(--navy)}
.cred-list dd{margin:4px 0 0;color:var(--muted);font-size:1.125rem;text-align:start;unicode-bidi:plaintext}
html[dir="rtl"] .cred-list dd{text-align:right}
.cred-list .cred-sub{color:var(--muted);font-size:.95rem;margin-block-start:4px}
.cred-note{color:var(--muted);max-width:46em;margin-block-start:28px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px 72px;margin-block-start:36px}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:grid;gap:6px;min-width:0}
.field.full,.form-foot{grid-column:1/-1}
label{font-weight:600;font-size:1rem}
label span{font-weight:400;color:var(--muted)}
input,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #8795a8;border-radius:4px;padding:10px 12px}
textarea{min-height:150px;resize:vertical}
html[dir="rtl"] input[dir="ltr"]{text-align:right}
.form-foot .btn{margin-block-start:0;background:var(--navy);color:#fff}
.form-foot .btn:hover{background:var(--navy-2)}
.hp{position:absolute;inset-inline-start:-9999px;height:1px;width:1px;overflow:hidden}
.status{margin-block-start:12px;font-weight:600;color:var(--navy)}
.status:empty{display:none}
.details{margin:0}
.details dt{font-weight:600;color:var(--navy);margin-block-start:18px}
.details dt:first-child{margin-block-start:0}
.details dd{margin:0;color:var(--muted)}
.details a{overflow-wrap:anywhere}

/* footer */
.foot{background:var(--navy);color:#dbe5f2;padding-block:36px;font-size:.95rem}
.foot strong{color:#fff;font-weight:600}
.foot p+p{margin-block-start:10px;max-width:46em}

@media (max-width:820px){
  .svc li{grid-template-columns:56px 1fr}
  .svc li p{grid-column:2}
  .split,.vm,.contact-grid{grid-template-columns:1fr}
  .cred-list{grid-template-columns:1fr}
  .work li{grid-template-columns:1fr}
}
@media (max-width:520px){
  form{grid-template-columns:1fr}
  .brand img{width:52px}
}
@media (max-width:640px){
  html{scroll-padding-top:12px}
  .top{position:static}
  .nav{gap:2px 16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}