:root{
  --ground:#0C3A38; --ground-2:#082A29; --line:#1C5450;
  --gold:#C2A14D; --gold-soft:#D8BE7E;
  --paper:#F5F1E8; --paper-2:#EBE5D6; --paper-line:#DAD2BF;
  --ink:#16211F; --muted-dark:#9FB6B2; --muted-light:#5A6B68;
  --maxw:1180px;
  --r:14px;
  --shadow:0 18px 50px -24px rgba(8,42,41,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Tajawal",system-ui,sans-serif; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Reem Kufi","Tajawal",sans-serif; font-weight:600; line-height:1.25; margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.data{font-family:"Space Grotesk",monospace; font-feature-settings:"tnum"; letter-spacing:.02em}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px;
  font-family:"Tajawal"; font-weight:700; font-size:16px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease}
.btn-gold{background:var(--gold); color:#1c160a}
.btn-gold:hover{transform:translateY(-2px); background:var(--gold-soft)}
.btn-ghost{border-color:var(--line); color:var(--muted-dark)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-soft)}
.btn-dark{background:var(--ground); color:#fff}
.btn-dark:hover{transform:translateY(-2px); background:var(--ground-2)}

/* ---- header ---- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(245,241,232,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--paper-line); transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 10px 30px -20px rgba(8,42,41,.4)}
.bar{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--ground); color:var(--gold); font-family:"Reem Kufi"; font-size:22px; font-weight:700}
.brand b{font-family:"Reem Kufi"; font-size:20px; color:var(--ground)}
.brand span{display:block; font-size:11px; color:var(--muted-light); font-family:"Space Grotesk"; letter-spacing:.18em}
.nav{display:flex; gap:6px}
.nav a{padding:9px 14px; border-radius:9px; font-weight:600; color:var(--muted-light); font-size:16px}
.nav a:hover{color:var(--ground); background:var(--paper-2)}
.nav a.active{color:var(--ground); background:var(--paper-2)}
.header-cta{display:flex; align-items:center; gap:10px}
.menu-btn{display:none; background:none; border:1px solid var(--paper-line); border-radius:9px; padding:8px 11px; cursor:pointer; font-size:18px}

/* ---- hero ---- */
.hero{position:relative; background:var(--ground); color:#fff; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px; opacity:.18; mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent)}
.hero-inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center;
  padding-block:84px}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:"Space Grotesk"; font-size:12.5px;
  letter-spacing:.16em; color:var(--gold-soft); border:1px solid var(--line); padding:7px 14px; border-radius:999px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero h1{font-size:clamp(34px,4.6vw,58px); margin:22px 0 0; letter-spacing:-.01em}
.hero h1 .hl{color:var(--gold-soft)}
.hero p.lead{color:var(--muted-dark); font-size:19px; max-width:46ch; margin:18px 0 0}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}

/* spotlight card = signature element */
.spotlight{background:linear-gradient(160deg,#0e4543,#0a302e); border:1px solid var(--line);
  border-radius:18px; padding:26px; box-shadow:var(--shadow)}
.spotlight .tag{font-family:"Space Grotesk"; font-size:11px; letter-spacing:.14em; color:var(--gold)}
.spotlight .pj{font-family:"Reem Kufi"; font-size:21px; margin-top:6px}
.spotlight .pj small{display:block; color:var(--muted-dark); font-family:"Tajawal"; font-size:13px; font-weight:500; margin-top:4px}
.readout{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin-top:20px}
.readout div{background:var(--ground-2); padding:15px 16px}
.readout .k{font-size:12px; color:var(--muted-dark)}
.readout .v{font-family:"Space Grotesk"; font-size:24px; color:var(--gold-soft); margin-top:3px}
.spotlight .note{margin-top:16px; font-size:13.5px; color:var(--muted-dark); border-top:1px dashed var(--line); padding-top:14px}

/* ---- trust strip ---- */
.trust{background:var(--ground-2); border-top:1px solid var(--line)}
.trust .wrap{display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center; padding-block:20px}
.trust .item{display:flex; align-items:center; gap:9px; color:var(--muted-dark); font-size:14px}
.trust .item b{color:#fff; font-family:"Space Grotesk"; font-weight:500}
.trust .item .i{color:var(--gold)}

/* ---- sections ---- */
section.block{padding-block:78px}
.sec-head{max-width:640px; margin-bottom:42px}
.sec-ey{font-family:"Space Grotesk"; font-size:12.5px; letter-spacing:.16em; color:var(--gold-deep,#9C7E33); text-transform:uppercase}
.sec-head h2{font-size:clamp(27px,3.2vw,40px); margin-top:10px}
.sec-head p{color:var(--muted-light); margin-top:12px; font-size:18px}

/* services */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{background:#fff; border:1px solid var(--paper-line); border-radius:var(--r); padding:24px;
  transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .ico{width:46px;height:46px;border-radius:12px; background:var(--paper-2); color:var(--ground);
  display:grid; place-items:center; font-size:22px; margin-bottom:16px}
.card h3{font-size:20px}
.card p{color:var(--muted-light); font-size:15.5px; margin-top:8px}

/* projects */
.dark-block{background:var(--ground); color:#fff}
.dark-block .sec-ey{color:var(--gold-soft)}
.dark-block .sec-head p{color:var(--muted-dark)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pcard{background:var(--ground-2); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .2s, border-color .2s}
.pcard:hover{transform:translateY(-5px); border-color:var(--gold)}
.thumb{height:158px; position:relative; display:grid; place-items:center; overflow:hidden}
.thumb::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px}
.thumb.u-res{background:linear-gradient(150deg,#10504c,#0a302e)}
.thumb.u-com{background:linear-gradient(150deg,#1a4b46,#123a37)}
.thumb.u-fac{background:linear-gradient(150deg,#0f4340,#0c2b2a)}
.thumb .use{position:relative; font-family:"Reem Kufi"; color:var(--gold-soft); font-size:15px;
  border:1px solid var(--line); padding:6px 14px; border-radius:999px; background:rgba(8,42,41,.4)}
.pcard .body{padding:18px 18px 20px}
.pcard h3{font-size:18px; color:#fff}
.pcard .meta{color:var(--muted-dark); font-size:13px; font-family:"Space Grotesk"; margin-top:6px}
.pcard .fin{display:flex; gap:18px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.pcard .fin .k{font-size:11px; color:var(--muted-dark)}
.pcard .fin .v{font-family:"Space Grotesk"; font-size:18px; color:var(--gold-soft)}
.center{display:flex; justify-content:center; margin-top:34px}

/* filter bar (projects.php) */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px}
.filters button{background:#fff; border:1px solid var(--paper-line); color:var(--muted-light);
  padding:9px 18px; border-radius:999px; font-family:"Tajawal"; font-weight:600; cursor:pointer; font-size:15px}
.filters button.active{background:var(--ground); color:#fff; border-color:var(--ground)}
.grid-pub{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pcard.light{background:#fff; border-color:var(--paper-line)}
.pcard.light h3{color:var(--ink)}
.pcard.light .meta{color:var(--muted-light)}
.pcard.light .fin{border-top-color:var(--paper-line)}
.pcard.light .fin .v{color:var(--gold-deep,#9C7E33)}

/* tools */
.tool{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--paper-line);
  border-radius:var(--r); padding:22px; transition:transform .2s, box-shadow .2s}
.tool:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.tool .ti{width:52px;height:52px;border-radius:13px;background:var(--ground); color:var(--gold);
  display:grid;place-items:center; font-size:24px; flex:0 0 auto}
.tool h3{font-size:19px}
.tool p{color:var(--muted-light); font-size:15px; margin:6px 0 12px}

/* project detail */
.detail-hero{background:var(--ground); color:#fff; padding-block:60px}
.detail-hero .use{display:inline-block; font-family:"Reem Kufi"; color:var(--gold-soft); font-size:14px;
  border:1px solid var(--line); padding:5px 14px; border-radius:999px; margin-bottom:16px}
.detail-hero h1{font-size:clamp(28px,4vw,46px)}
.detail-hero .sub{color:var(--muted-dark); font-family:"Space Grotesk"; margin-top:10px}
.detail-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:40px; padding-block:60px}
.fin-panel{background:var(--ground); color:#fff; border-radius:16px; padding:26px; align-self:start; position:sticky; top:90px}
.fin-panel h3{color:var(--gold-soft); font-size:17px; margin-bottom:18px}
.fin-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line)}
.fin-row:last-child{border-bottom:none}
.fin-row .k{color:var(--muted-dark); font-size:14px}
.fin-row .v{font-family:"Space Grotesk"; font-size:18px; color:#fff}

/* CTA */
.cta{background:linear-gradient(160deg,#0e4543,#082A29); color:#fff; border-radius:22px; padding:54px;
  text-align:center; position:relative; overflow:hidden}
.cta h2{font-size:clamp(26px,3.4vw,40px)}
.cta p{color:var(--muted-dark); max-width:50ch; margin:14px auto 26px}
.cta .row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* footer */
.site-footer{background:var(--ground-2); color:var(--muted-dark); padding-block:54px 30px; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.site-footer h4{color:#fff; font-family:"Reem Kufi"; font-size:17px; margin-bottom:14px}
.site-footer a{display:block; color:var(--muted-dark); padding:5px 0; font-size:15px}
.site-footer a:hover{color:var(--gold-soft)}
.foot-brand b{font-family:"Reem Kufi"; font-size:22px; color:#fff}
.foot-brand p{font-size:14.5px; margin-top:10px; max-width:34ch}
.foot-contact .data{color:#fff; display:block; margin-top:4px}
.foot-bottom{margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; font-family:"Space Grotesk"}

/* reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (max-width:920px){
  .hero-inner{grid-template-columns:1fr; gap:34px; padding-block:56px}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3,.grid-pub{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr} .fin-panel{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{display:none} .menu-btn{display:block}
  .nav.open{display:flex; position:absolute; inset-inline:0; top:72px; flex-direction:column;
    background:var(--paper); border-bottom:1px solid var(--paper-line); padding:12px 24px}
  .grid-4,.grid-3,.grid-pub,.foot-grid{grid-template-columns:1fr}
  .readout{grid-template-columns:1fr 1fr}
  .cta{padding:34px 22px}
  .header-cta .btn-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .btn:hover,.card:hover,.pcard:hover,.tool:hover{transform:none}
}