:root{
  --primary:#1f2937;     /* slate-800 */
  --accent:#f59e0b;      /* amber-500 */
  --text:#0f172a;        /* slate-900 */
  --muted:#475569;       /* slate-600 */
  --border:#e5e7eb;      /* gray-200 */
  --surface:#ffffff;
  --bg:#f8fafc;          /* slate-50 */
}

/* Reset & base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Layout wrappers */
.container{max-width:1100px;margin:auto;padding:16px}

/* Header / Nav */
header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:10px 0}
.logo img{height:44px;width:auto}
nav a{
  color:var(--text);
  text-decoration:none;
  margin:0 8px;
  padding:8px;
  border-radius:10px
}
nav a:hover, nav a[aria-current="page"]{
  background:#fff7ed;               /* amber-50 */
  outline:1px solid #fed7aa;        /* amber-200 */
}

/* Headings */
h1{font-size:clamp(28px,3vw,36px);margin:16px 0 8px}
h2{font-size:clamp(20px,2.2vw,26px);margin:24px 0 8px}

/* Cards & hero */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  padding:24px;
  border-radius:16px;
  box-shadow:0 1px 0 rgba(0,0,0,.04)
}
.hero-small{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:24px;
  align-items:center;
  padding:24px 0
}
@media (max-width:900px){.hero-small{grid-template-columns:1fr}}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none
}
.btn:hover{opacity:.92}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.btn-lg{padding:12px 18px; border-radius:14px}

/* Spinner داخل الزر */
.spinner{
  width:16px; height:16px; margin-left:8px; border-radius:50%;
  border:2px solid rgba(0,0,0,.15); border-top-color:#fff; display:inline-block;
  visibility:hidden; vertical-align:-3px;
}
.btn[disabled] .spinner{border-top-color:rgba(0,0,0,.65)}
.spinner.on{visibility:visible; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Generic grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

/* Footer */
footer{margin-top:40px;border-top:1px solid var(--border);padding:20px 0;color:var(--muted)}

/* Images */
img{max-width:100%;height:auto}

/* Notice (optional helper) */
.notice{background:#ecfeff;border:1px solid #a5f3fc;padding:12px;border-radius:12px}

/* ---------- Elegant equal-size tiles (Homepage & Referenzen) ---------- */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px
}
.tile{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff
}
.tile .ratio{
  aspect-ratio:4/3;
  width:100%;
  overflow:hidden;
  background:#f1f5f9
}
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  color:#fff; padding:10px 12px; font-size:14px
}

/* Section headings / actions */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 0 12px}
.section-head h2{margin:0}
.section-desc{color:var(--muted);margin:0 0 12px}
.actions a{font-size:14px}

/* Skeleton placeholders */
.ph{position:relative;overflow:hidden;background:#e5e7eb}
.ph::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation:shimmer 1.4s infinite
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* KPI list */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.kpi{display:flex;gap:12px;align-items:flex-start}
.kpi i{font-style:normal;font-size:22px}

/* ---------- Contact HERO (راقٍ) ---------- */
.contact-hero{
  display:grid; gap:18px; align-items:center;
  grid-template-columns:1.1fr 0.9fr;
  margin-bottom:18px;
}
.contact-hero .lead{color:var(--muted); margin:.2rem 0 0}
.pill-list{list-style:none; padding:0; margin:10px 0 0; display:flex; gap:8px; flex-wrap:wrap}
.pill-list li{border:1px solid var(--border); background:#fff; border-radius:999px; padding:6px 10px; font-size:14px; color:var(--muted)}
.hero-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.hero-stats .stat{border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:#fff}
.hero-stats .stat strong{display:block; font-size:18px}

/* ---------- Contact page layout ---------- */
.contact{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px}
@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  .contact-hero{grid-template-columns:1fr}
}

/* Form grid */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1 / -1}

.label{display:block;font-size:14px;color:var(--muted);margin:6px 0}
.input,.textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font:inherit
}
.input:focus,.textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px #fef3c7          /* amber-100 focus */
}
.checkbox-line{display:flex;gap:10px;align-items:flex-start}
.help{font-size:12px;color:var(--muted)}
.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px;border-radius:12px}
.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px;border-radius:12px}

/* Sidebar */
.contact-aside .row{display:flex;gap:12px;align-items:flex-start; margin:6px 0}
.contact-aside .hours{margin-top:10px}
.contact-aside .hours ul{list-style:none; padding:0; margin:6px 0 0; color:var(--muted)}

/* Map box */
.map-box{
  aspect-ratio:4/3;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#f1f5f9;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  margin-top:12px
}

/* ---------- (اختياري) نمط المعرض القديم Masonry ---------- */
.gallery{columns: 3 260px; column-gap:12px}
.gallery img{
  width:100%;
  margin-bottom:12px;
  border-radius:12px;
  border:1px solid var(--border)
}
/* --- Contact form: clean, consistent controls --- */
.contact-form{--ctl-h:48px}
.contact-form .grid{
  display:grid;
  grid-template-columns:1fr;       /* single-column by default (best for usability) */
  gap:14px;
}
@media (min-width:900px){
  .contact-form .grid-2{           /* only these two go side-by-side on wide screens */
    grid-template-columns:1fr 1fr;
  }
}
.contact-form .field{display:block}
.contact-form .field label{
  display:block; margin:0 0 6px;
  font-size:14px; color:var(--muted)
}
.contact-form .control{
  appearance:none; -webkit-appearance:none;
  width:100%; height:var(--ctl-h);
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font:inherit; font-size:16px; line-height:1.4;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
.contact-form textarea.control{
  min-height:140px; height:auto; resize:vertical;
}
.contact-form .control::placeholder{color:#94a3b8}
.contact-form .control:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px #fef3c7;   /* soft focus */
}
.contact-form .checkbox{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color:var(--muted)
}
.contact-form .hint{font-size:12px; color:var(--muted)}
.contact-form .msg{margin-top:8px}
.contact-form .msg.success{
  background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px;border-radius:12px
}
.contact-form .msg.error{
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px;border-radius:12px
}