:root{
  --navy:#0B1020;
  --navy2:#0F2A33;
  --gold:#C8A85A;
  --gold2:#E6C77A;
  --beige:#F1EAD6;
  --line:rgba(11,16,32,.10);
  --muted:#55607A;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
  color:var(--navy);
  background:#fff;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 14px 46px;}

/* Top bar (web like your reference) */
.topbar{
  margin-top:12px;
  background:linear-gradient(180deg,#F6F0DF, var(--beige));
  border:1px solid rgba(11,16,32,.12);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brandrow{display:flex;align-items:center;gap:10px;min-width:220px}
.logoFull{height:42px;width:auto;max-width:420px;display:block;object-fit:contain}

.navlinks{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;flex:1}
.navlinks a{color:rgba(11,16,32,.85);text-decoration:none;font-weight:800;font-size:14px;padding:6px 4px;border-bottom:2px solid transparent}
.navlinks a.active{border-bottom-color:rgba(200,168,90,.75)}

.ghostBtn{
  border:1px solid rgba(200,168,90,.55);
  color:#6E571F;
  background:rgba(200,168,90,.14);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}

/* Mobile menu */
.burger{display:none;align-items:center;justify-content:center;width:42px;height:38px;border-radius:10px;border:1px solid rgba(11,16,32,.16);background:rgba(255,255,255,.6)}
.burgerLines{width:18px;height:12px;position:relative}
.burgerLines span{position:absolute;left:0;right:0;height:2px;background:rgba(11,16,32,.70);border-radius:99px}
.burgerLines span:nth-child(1){top:0}
.burgerLines span:nth-child(2){top:5px}
.burgerLines span:nth-child(3){top:10px}

.drawerMask{position:fixed;inset:0;background:rgba(11,16,32,.50);display:none;z-index:50}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(340px,86vw);background:#fff;z-index:60;transform:translateX(105%);transition:transform .18s ease;box-shadow:-18px 0 50px rgba(11,16,32,.25);padding:18px}
.drawer.open{transform:translateX(0)}
.drawerMask.open{display:block}
.drawer a{display:block;padding:12px 10px;border-radius:12px;color:var(--navy);text-decoration:none;font-weight:900;border:1px solid rgba(11,16,32,.08);margin:10px 0;background:#fff}
.drawer .sub{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.7}

/* Hero */
.hero{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(11,16,32,.12);
  background:var(--navy2);
}
.heroInner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  min-height:340px;
}
.heroPhoto{background-size:cover;background-position:center;min-height:240px}
.heroOverlay{position:relative;padding:26px 22px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.heroOverlay::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(15,42,51,.92), rgba(15,42,51,.66));}
.heroOverlay > *{position:relative}
.heroKicker{color:rgba(230,199,122,.95);font-weight:900;font-size:18px;letter-spacing:.1px}
.heroTitle{margin:6px 0 0;font-weight:900;font-size:36px;line-height:1.25}
.heroBtnRow{margin-top:16px}
.btnGold{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1A1407;text-decoration:none;font-weight:900;padding:12px 18px;border-radius:999px;box-shadow:0 16px 36px rgba(200,168,90,.25)}

/* Slider placeholder */
.slider{background:#fff;padding:14px;border-top:6px solid rgba(200,168,90,.65)}
.sliderFrame{border-radius:12px;overflow:hidden;border:1px solid rgba(11,16,32,.10)}
.sliderFrame img{width:100%;height:auto;display:block}
.dots{display:flex;gap:7px;justify-content:center;margin-top:10px}
.dot{width:7px;height:7px;border-radius:99px;background:rgba(11,16,32,.22)}
.dot.active{background:rgba(11,16,32,.62)}

/* Services 2x2 with separators */
.servicesBlock{background:#fff;border:1px solid rgba(11,16,32,.10);border-radius:16px;padding:20px;margin-top:14px}
.servicesGrid{display:grid;grid-template-columns:repeat(2,1fr)}
.svcCell{padding:18px 16px;min-height:140px;display:flex;gap:14px;align-items:flex-start}
.svcCell:nth-child(1),.svcCell:nth-child(2){border-bottom:1px solid rgba(11,16,32,.12)}
.svcCell:nth-child(1),.svcCell:nth-child(3){border-left:1px solid rgba(11,16,32,.12)}
.svcIcon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(200,168,90,.95)}
.svcIcon svg{width:34px;height:34px}
.svcTitle{font-weight:900;font-size:18px}
.svcDesc{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.9}

/* Vision section */
.vision{
  margin-top:14px;
  border:1px solid rgba(11,16,32,.10);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.visionInner{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;align-items:stretch}
.visionLeft{padding:18px;border-left:1px solid rgba(11,16,32,.10);display:flex;flex-direction:column;justify-content:center;gap:10px}
.visionRight{padding:18px;position:relative}
.skyline{position:absolute;left:0;right:0;bottom:0;opacity:.9}
.visionRight p{max-width:520px;color:var(--muted);line-height:1.9;margin:10px 0 14px}

/* Footer like reference */
.footer{
  margin-top:14px;
  background:var(--navy2);
  color:#fff;
  border-radius:16px;
  border:1px solid rgba(11,16,32,.12);
  overflow:hidden;
}
.footerInner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:18px 18px 14px}
.footer h3{margin:0 0 10px;font-size:14px;color:rgba(230,199,122,.92)}
.footer a{color:#fff;text-decoration:none}
.footer .item{color:rgba(255,255,255,.85);font-size:13px;line-height:1.9}
.footerBottom{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.65);font-size:12px}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}

/* Simple form */
.form{margin-top:14px;max-width:620px}
.formRow{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.formRow label{font-weight:900;font-size:13px;color:rgba(11,16,32,.75)}
.formRow input,.formRow select,.formRow textarea{
  border:1px solid rgba(11,16,32,.12);
  border-radius:12px;
  padding:12px 12px;
  font:inherit;
  outline:none;
  background:#fff;
}
.formRow input:focus,.formRow select:focus,.formRow textarea:focus{border-color:rgba(200,168,90,.75);box-shadow:0 0 0 3px rgba(200,168,90,.18)}

/* Responsive */
@media(max-width:900px){
  .heroInner{grid-template-columns:1fr}
  .heroTitle{font-size:30px}
  .navlinks{display:none}
  .ghostBtn{display:none}
  .burger{display:flex}
  .visionInner{grid-template-columns:1fr}
  .visionLeft{border-left:none;border-top:1px solid rgba(11,16,32,.10)}
  .footerInner{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .logoFull{height:30px;max-width:240px}
  .servicesGrid{grid-template-columns:1fr}
  .svcCell{border-left:none !important}
  .svcCell:nth-child(1),.svcCell:nth-child(2),.svcCell:nth-child(3){border-bottom:1px solid rgba(11,16,32,.12)}
}