@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@200;300;400;500&family=Archivo:wght@300;400;500&display=swap');

:root{
  --ink:#5C1A24;
  --ink-deep:#421119;
  --cream:#F0E2CC;
  --copper:#BE7057;
  --copyd:#A85B45;
  --white:#FFFFFF;
  --line:#E7D8C2;
  --pad:clamp(22px,6vw,110px);
  --sans:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --lat:"Archivo",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.95;
  direction:rtl;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.lat{font-family:var(--lat);letter-spacing:.32em;direction:ltr;unicode-bidi:isolate;text-transform:uppercase}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px var(--pad);transition:background .35s,box-shadow .35s;
}
.nav.solid{background:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.nav .logo{font-family:var(--lat);letter-spacing:.3em;font-size:15px;color:var(--white)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:12.5px;color:#EBD9C6;padding-bottom:2px;border-bottom:1px solid transparent}
.nav ul a:hover{border-bottom-color:var(--copper)}
.nav .act{display:flex;align-items:center;gap:12px}
.nav .lang{font-family:var(--lat);font-size:11px;letter-spacing:.2em;color:#EBD9C6}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--copper);color:#3E1119;border:0;
  font-family:var(--sans);font-size:12.5px;font-weight:400;
  padding:12px 22px;cursor:pointer;border-radius:1px;transition:.25s;
}
.btn:hover{background:#CB8168}
.btn.ghost{background:transparent;color:var(--white);border:1px solid #A85B50}
.btn.ghost:hover{background:rgba(190,112,87,.18)}
.btn.small{padding:9px 16px;font-size:11.5px}

/* ---------- sections ---------- */
.pg{padding:calc(var(--pad) * .7) var(--pad);min-height:88vh;display:flex;flex-direction:column;background:var(--white)}
.pg.on-cream{background:var(--cream)}
.pg.on-dark{background:var(--ink);color:var(--white)}
.lbl{font-size:10.5px;letter-spacing:.14em;color:var(--copper)}
.body{margin:auto 0;padding:clamp(30px,7vh,70px) 0;text-align:center}
.body > *{margin-inline:auto}
h2{font-size:clamp(19px,2.6vw,29px);font-weight:300;line-height:1.75;margin:0 auto 22px;max-width:28ch;color:var(--ink)}
.on-dark h2{color:var(--white)}
p{font-size:clamp(12.5px,1.15vw,14.5px);margin:0 auto 16px;max-width:60ch;color:var(--copyd)}
.on-dark p{color:var(--cream)}
.lead{font-size:clamp(14px,1.5vw,17px);font-weight:400;color:var(--ink);max-width:34ch}
.on-dark .lead{color:var(--white)}

/* ---------- cover ---------- */
.cover{background:var(--ink);color:var(--white);min-height:100vh;padding:0 var(--pad) 34px;display:flex;flex-direction:column}
.cover .top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2em;color:var(--copper);padding-top:78px}
.cover .cbody{margin:auto 0;text-align:center;padding:40px 0}
.cover h1{font-family:var(--lat);font-weight:300;font-size:clamp(38px,8vw,80px);letter-spacing:.22em;direction:ltr;line-height:1;margin:0 0 10px;color:var(--white)}
.cover .ar{font-size:clamp(19px,3vw,26px);font-weight:200;letter-spacing:.24em;margin:0 0 20px}
.cover .kick{font-size:11px;letter-spacing:.1em;color:#D0B49C;margin:0}
.cover .tag{font-size:clamp(17px,2.4vw,23px);font-weight:300;margin:34px auto 0;max-width:18ch;color:var(--white)}
.cover .btns{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* ---------- components ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border-top:1px solid #8E4A4E;padding-top:22px;max-width:820px}
.stat b{display:block;font-family:var(--lat);font-weight:300;font-size:clamp(20px,3vw,32px);color:var(--copper);line-height:1.15}
.stat span{font-size:10.5px;color:#E8D6C2;display:block;margin-top:4px;line-height:1.5}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.chip{border:1px solid var(--copper);border-radius:99px;padding:4px 14px;font-size:11.5px;color:var(--copyd)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,5vw,64px);text-align:center;max-width:900px}
.two h3{font-size:12.5px;font-weight:500;color:var(--copper);margin:0 0 8px}
.two p{font-size:12px;margin:0;max-width:100%}

ol.steps{list-style:none;padding:0;margin:0;max-width:760px;counter-reset:s}
ol.steps li{font-size:13px;padding:7px 0;color:var(--copyd);border-top:1px solid var(--line)}
.on-dark ol.steps li{color:var(--cream);border-top-color:#7E3F45}
ol.steps li i{font-family:var(--lat);font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--copper);margin-left:10px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:900px}
.card{border:1px solid var(--line);background:var(--white);padding:18px 16px;text-align:center}
.card h3{font-size:12.5px;font-weight:500;margin:0 0 5px;color:var(--ink)}
.card p{font-size:11.5px;margin:0;max-width:100%}

.works{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:1000px}
.work{position:relative;aspect-ratio:4/3;background:#E3D3BA;overflow:hidden;border:1px solid var(--line)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.work:hover img{transform:scale(1.04)}
.work figcaption{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(66,17,25,.85));color:var(--white);font-size:11px;padding:22px 12px 10px;text-align:right}

.contact{display:grid;gap:10px;max-width:460px;justify-items:stretch}
.contact a{display:flex;align-items:center;justify-content:space-between;border:1px solid #8E4A4E;padding:13px 18px;font-size:13px;color:var(--white);transition:.25s}
.contact a:hover{background:rgba(190,112,87,.2)}
.contact a span:first-child{font-size:10px;letter-spacing:.16em;color:var(--copper)}

footer{background:var(--ink-deep);color:#C6A894;padding:40px var(--pad);font-size:11.5px;line-height:2.1}
footer .sig{font-family:var(--lat);letter-spacing:.34em;font-size:17px;color:var(--copper);direction:ltr;margin-bottom:14px}
footer .cols{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #6B2A32;padding-top:18px}

.wa{position:fixed;inset:auto 22px 22px auto;z-index:60;background:var(--copper);color:#3E1119;border-radius:99px;padding:13px 20px;font-size:12.5px;font-weight:400;box-shadow:0 8px 24px rgba(66,17,25,.28)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .nav ul{display:none}
  .nav{padding:14px 20px}
  .stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .two,.grid,.works{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .pg{min-height:auto}
  .wa{inset:auto 16px 16px auto}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- fixes v1 ---- */
.contact{max-width:400px;width:100%}
.contact a{padding:12px 16px;font-size:12.5px}
footer{padding-bottom:84px}
@media(max-width:820px){
  .body{padding:26px 0}
  .wa{font-size:12px;padding:11px 17px}
  footer{padding-bottom:100px}
}

/* hide netlify badge */
#netlify-badge,iframe#netlify-badge,.netlify-badge,[data-netlify-badge]{display:none!important;visibility:hidden!important}

/* netlify hud */
#nl-badge-frame{display:none!important}
.wa{bottom:34px}