/* ===== Design tokens ===== */
:root{
  --bg: #F7F3EC;
  --bg-alt: #EFE8D9;
  --ink: #241F1A;
  --ink-soft: #5B564C;
  --olive: #4A5940;
  --olive-dark: #38402F;
  --copper: #C08A4E;
  --copper-soft: #E7CEA6;
  --stone: #8A8477;
  --card: #FFFFFF;
  --radius: 18px;
  --shadow: 0 10px 30px -12px rgba(36,31,26,0.18);
  --maxw: 1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Tajawal',sans-serif;}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:88px 0}
@media(max-width:768px){section{padding:56px 0}}

/* ===== Utility ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;
  color:var(--olive);text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--copper);display:inline-block}
h2.section-title{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:900;color:var(--ink);margin-bottom:14px}
.section-sub{color:var(--ink-soft);max-width:640px;font-size:1.02rem}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:100px;
  font-weight:700;font-size:.98rem;
  transition:transform .25s ease, box-shadow .25s ease;
  border:none;cursor:pointer;
}
.btn-primary{background:var(--olive);color:#fff;box-shadow:0 8px 20px -6px rgba(74,89,64,.5)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 26px -6px rgba(74,89,64,.55)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(36,31,26,.18)}
.btn-ghost:hover{border-color:var(--olive);color:var(--olive)}
.btn-copper{background:var(--copper);color:#fff;box-shadow:0 8px 20px -6px rgba(192,138,78,.55)}
.btn-copper:hover{transform:translateY(-3px)}

/* ===== Header ===== */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,243,236,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(36,31,26,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-family:'Tajawal',sans-serif;font-weight:900;font-size:1.15rem}
.logo-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--olive),var(--olive-dark));
  display:flex;align-items:center;justify-content:center;
  color:var(--copper-soft);font-size:1.1rem;flex-shrink:0;
}
.nav-links{display:flex;gap:30px;font-weight:600;font-size:.95rem}
.nav-links a{opacity:.85;transition:opacity .2s}
.nav-links a:hover{opacity:1;color:var(--olive)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-phone{display:none}
@media(min-width:900px){.nav-phone{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--olive)}}
.burger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}
@media(max-width:900px){
  .nav-links{
    position:fixed;top:0;right:0;left:0;bottom:0;
    background:var(--bg);
    flex-direction:column;padding:100px 24px 32px;gap:22px;
    font-size:1.1rem;transform:translateX(100%);
    transition:transform .35s ease;z-index:150;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0)}
  .burger{display:block;position:relative;z-index:160}
}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:70px 0 90px;
  overflow:hidden;
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 15% 20%, rgba(192,138,78,.16), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(74,89,64,.12), transparent 45%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media(max-width:920px){.hero-inner{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:900;line-height:1.18;margin-bottom:22px}
.hero h1 span{color:var(--olive);position:relative}
.hero-desc{font-size:1.08rem;color:var(--ink-soft);max-width:520px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap}
.stat b{font-family:'Tajawal',sans-serif;font-size:1.7rem;font-weight:900;color:var(--olive-dark);display:block}
.stat span{font-size:.85rem;color:var(--ink-soft)}

/* color swatch stack — signature element */
.swatch-stack{position:relative;display:flex;flex-direction:column;gap:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:460px}
.swatch{flex:1;position:relative;display:flex;align-items:flex-end;padding:18px 20px;transition:flex .4s ease}
.swatch:hover{flex:1.6}
.swatch span{color:#fff;font-weight:700;font-size:.92rem;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.sw1{background:linear-gradient(135deg,#4A5940,#38402F)}
.sw2{background:linear-gradient(135deg,#C08A4E,#9C6C36)}
.sw3{background:linear-gradient(135deg,#8A8477,#6C6659)}
.sw4{background:linear-gradient(135deg,#D8C4A0,#B79A6C)}
@media(max-width:920px){.swatch-stack{height:280px}}

/* ===== Services grid ===== */
.services-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:44px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{
  background:var(--card);border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 12px -4px rgba(36,31,26,.08);
  border:1px solid rgba(36,31,26,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-img{width:100%;height:190px;object-fit:cover;background:var(--bg-alt);display:block}
.svc-visual{width:100%;height:190px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.svc-visual svg{width:72px;height:72px;position:relative;z-index:1}
.v1{background:linear-gradient(150deg,#EAD9BC,#D8C4A0)}
.v2{background:linear-gradient(150deg,#C9D6C0,#A9BC9C)}
.v3{background:linear-gradient(150deg,#E8E2D6,#D2C9B8)}
.v4{background:linear-gradient(150deg,#DCD3C4,#BFB09A)}
.v5{background:linear-gradient(150deg,#E3D2B8,#C9AE84)}
.v6{background:linear-gradient(150deg,#D9C7DA,#B79FBA)}
.v7{background:linear-gradient(150deg,#BFD4DC,#93B4C0)}
.v8{background:linear-gradient(150deg,#E7C9A9,#CDA476)}
.card-body{padding:24px 24px 28px}
.card-num{font-family:'Tajawal',sans-serif;font-weight:900;font-size:.8rem;color:var(--copper);margin-bottom:10px;letter-spacing:.05em}
.card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;font-family:'Tajawal',sans-serif}
.card p{color:var(--ink-soft);font-size:.94rem}
.card .kw{font-size:.78rem;color:var(--stone);margin-top:12px}
.mini-gal{display:flex;gap:8px;margin-top:14px}
.mini-gal img{width:100%;height:64px;object-fit:cover;border-radius:8px;flex:1}
.ph-visual{
  width:100%;height:190px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--bg-alt),var(--bg-alt) 10px,#E4DBC7 10px,#E4DBC7 20px);
  color:var(--stone);font-weight:700;font-size:.95rem;font-family:'Tajawal',sans-serif;
  border:2px dashed rgba(138,132,119,.4);border-radius:0;
}

/* ===== Before/After ===== */
.bg-alt{background:var(--bg-alt)}
.ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
@media(max-width:768px){.ba-wrap{grid-template-columns:1fr}}
.ba-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.ba-visual{
  width:100%;height:260px;object-fit:cover;display:block;cursor:zoom-in;
}
.ba-visual::after{
  content:"قبل → بعد";position:absolute;bottom:14px;
  background:rgba(255,255,255,.9);padding:6px 16px;border-radius:100px;
  font-size:.8rem;font-weight:700;color:var(--ink);
}
.ba-body{padding:22px 24px}
.ba-body h4{font-family:'Tajawal',sans-serif;font-weight:700;margin-bottom:6px}
.ba-body p{color:var(--ink-soft);font-size:.92rem}

/* ===== Why us ===== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
.why-item{text-align:center;padding:20px}
.why-icon{
  width:64px;height:64px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  margin:0 auto 16px;box-shadow:0 6px 18px -6px rgba(36,31,26,.15);
  color:var(--olive);
}
.why-item h4{font-family:'Tajawal',sans-serif;font-weight:700;margin-bottom:8px;font-size:1.02rem}
.why-item p{color:var(--ink-soft);font-size:.88rem}

/* ===== Gallery ===== */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
@media(max-width:768px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
.gal-item{
  aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;
  display:flex;align-items:flex-end;padding:14px;color:#fff;font-weight:700;font-size:.85rem;
  font-family:'Tajawal',sans-serif;
}
.gal-item::before{content:"";position:absolute;inset:0;opacity:.92;z-index:0}
.gal-item span{position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.g1::before{background:linear-gradient(160deg,#4A5940,#2E3527)}
.g2::before{background:linear-gradient(160deg,#C08A4E,#8C6032)}
.g3::before{background:linear-gradient(160deg,#8A8477,#5C5749)}
.g4::before{background:linear-gradient(160deg,#B79A6C,#7A6440)}
.g5::before{background:linear-gradient(160deg,#38402F,#1F241A)}
.g6::before{background:linear-gradient(160deg,#D8C4A0,#A9895C)}
.g7::before{background:linear-gradient(160deg,#6C6659,#443F35)}
.g8::before{background:linear-gradient(160deg,#9C6C36,#68481F)}

/* ===== Testimonials ===== */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:900px){.t-grid{grid-template-columns:1fr}}
.t-card{background:var(--card);border-radius:var(--radius);padding:28px;box-shadow:0 2px 12px -4px rgba(36,31,26,.08)}
.t-stars{color:var(--copper);letter-spacing:2px;margin-bottom:14px;font-size:1rem}
.t-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:18px}
.t-name{font-weight:700;font-family:'Tajawal',sans-serif;font-size:.92rem}

/* ===== Reviews summary ===== */
.rv-summary{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--card);border-radius:var(--radius);
  padding:26px 30px;box-shadow:0 2px 12px -4px rgba(36,31,26,.08);
  margin-top:32px;
}
.rv-score{font-family:'Tajawal',sans-serif;font-weight:900;font-size:2.6rem;color:var(--ink);line-height:1}
.rv-score-col{text-align:center}
.rv-score-stars{color:var(--copper);letter-spacing:2px;font-size:1.1rem;margin-top:4px}
.rv-score-count{color:var(--ink-soft);font-size:.82rem;margin-top:4px}
.rv-divider{width:1px;align-self:stretch;background:rgba(36,31,26,.12)}
@media(max-width:640px){.rv-divider{display:none}}
.rv-note{color:var(--ink-soft);font-size:.95rem;flex:1;min-width:220px}

/* ===== Review form ===== */
.rv-form-wrap{
  background:var(--card);border-radius:var(--radius);
  padding:32px;box-shadow:0 2px 12px -4px rgba(36,31,26,.08);
  margin-top:22px;
}
.rv-form-title{font-family:'Tajawal',sans-serif;font-weight:800;font-size:1.15rem;margin-bottom:6px}
.rv-form-sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:20px}
.rv-star-picker{display:flex;gap:6px;font-size:1.9rem;margin-bottom:20px;direction:ltr;justify-content:flex-end}
.rv-star-picker span{cursor:pointer;color:rgba(36,31,26,.2);transition:color .15s ease,transform .15s ease}
.rv-star-picker span.active{color:var(--copper)}
.rv-star-picker span:hover{transform:scale(1.15)}
.rv-field{margin-bottom:16px}
.rv-field label{display:block;font-size:.88rem;font-weight:700;margin-bottom:8px;color:var(--ink)}
.rv-field input,.rv-field textarea{
  width:100%;padding:13px 16px;border-radius:12px;
  border:1.5px solid rgba(36,31,26,.15);font-family:'Cairo',sans-serif;
  font-size:.95rem;background:var(--bg);color:var(--ink);resize:vertical;
}
.rv-field input:focus,.rv-field textarea:focus{outline:none;border-color:var(--olive)}
.rv-submit{width:100%;justify-content:center;margin-top:6px}
.rv-hint{color:var(--ink-soft);font-size:.8rem;margin-top:12px;text-align:center}

/* ===== CTA band ===== */
.cta-band{
  background:linear-gradient(135deg,var(--olive-dark),var(--olive));
  border-radius:28px;padding:56px 40px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(192,138,78,.35), transparent 50%);
}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;margin-bottom:14px;position:relative}
.cta-band p{opacity:.85;margin-bottom:28px;position:relative}
.cta-band .hero-cta{justify-content:center;position:relative}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid rgba(36,31,26,.1);padding:22px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-family:'Tajawal',sans-serif;font-size:1.02rem}
.faq-q .plus{font-size:1.3rem;color:var(--copper);transition:transform .3s}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{color:var(--ink-soft);padding-top:14px;font-size:.94rem}

/* ===== Footer ===== */
footer{background:var(--ink);color:#EFE8D9;padding:56px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:30px}}
footer h5{font-family:'Tajawal',sans-serif;font-weight:700;margin-bottom:16px;color:#fff}
footer a{opacity:.75;display:block;margin-bottom:10px;font-size:.92rem;transition:opacity .2s}
footer a:hover{opacity:1}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;text-align:center;font-size:.82rem;opacity:.6}

/* ===== Floating action buttons ===== */
.fab-stack{
  position:fixed;bottom:22px;left:22px;z-index:200;
  display:flex;flex-direction:column;gap:14px;
}
.fab{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;
}
.fab-wa{
  background:#25D366;
  box-shadow:0 8px 22px -4px rgba(37,211,102,.6);
  animation:pulse 2.4s infinite;
}
.fab-call{
  background:var(--olive);
  box-shadow:0 8px 22px -4px rgba(74,89,64,.6);
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===== Service page specific ===== */
.card-link{display:block;cursor:pointer}
.card-link:hover .card-num{color:var(--olive)}

.svc-hero{padding:36px 0 20px}
.svc-back{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink-soft);font-weight:600;font-size:.92rem;
  margin-bottom:20px;
}
.svc-back:hover{color:var(--olive)}
.svc-breadcrumb{font-size:.82rem;color:var(--stone);margin-bottom:10px}
.svc-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:16px}
.svc-lead{color:var(--ink-soft);font-size:1.05rem;max-width:680px;margin-bottom:24px}
.svc-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.svc-kw{font-size:.82rem;color:var(--stone);margin-top:18px}

.svc-article{max-width:760px;margin:0 auto;padding:10px 0 30px}
.svc-article h2{font-family:'Tajawal',sans-serif;font-weight:800;font-size:1.4rem;margin:30px 0 14px}
.svc-article p{color:var(--ink-soft);margin-bottom:16px;font-size:1rem}
.svc-article ul{color:var(--ink-soft);margin:0 0 16px 0;padding-inline-start:22px}
.svc-article li{margin-bottom:8px}

.svc-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:30px 0}
.svc-gal img{width:100%;height:230px;object-fit:cover;border-radius:16px;box-shadow:0 4px 16px -6px rgba(36,31,26,.15);cursor:zoom-in;transition:transform .3s ease}
.svc-gal img:hover{transform:scale(1.02)}
.svc-gal .svc-visual{height:230px;border-radius:16px}

.other-services{margin-top:20px}
.os-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}
.os-item{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border-radius:14px;padding:14px 16px;
  border:1px solid rgba(36,31,26,.06);transition:transform .25s ease;
}
.os-item:hover{transform:translateX(-4px);border-color:var(--olive)}
[dir="rtl"] .os-item:hover{transform:translateX(4px)}
.os-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.os-item span{font-size:.9rem;font-weight:600}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;inset:0;background:rgba(20,17,13,.92);
  display:none;align-items:center;justify-content:center;
  z-index:999;padding:24px;cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute;top:22px;left:22px;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;border:none;cursor:pointer;
}
[dir="rtl"] .lightbox-close{left:auto;right:22px}
.gal-item{cursor:zoom-in}