/* الدمياطي للنجارة والديكور الخشبي */
:root{
  --walnut:#3A2517; --walnut-deep:#2A1A10; --walnut-night:#20140C;
  --oak:#C99A63; --linen:#F2E8DA; --sand:#EADBC4; --sand-muted:#D9C6AC;
  --ink:#2B1B10; --ink-soft:#5C4130; --brown:#7A4B24;
  --line-dark:#54382A; --line-light:#CDB797;
  --accent:#C8923E; --accent-text:#E3B26A;
  --display:"Reem Kufi",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic",Tahoma,sans-serif;
  --pad:clamp(20px,6.5vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--walnut);line-height:1.6}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:8px}
h1,h2,h3,p{margin:0}
.container{max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}

/* buttons */
.btn{min-height:52px;padding:0 30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:600;font-size:17px;text-decoration:none;transition:background .2s,border-color .2s}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:#D9A55A}
.btn-ghost{border:1.5px solid #8C6A4F;color:var(--linen);font-weight:500}
.btn-ghost:hover{border-color:var(--oak)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:var(--walnut);border-bottom:1px solid var(--line-dark)}
.site-header .container{height:150px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand svg{width:46px;height:46px}
.brand-name{display:block;font-family:var(--display);font-size:65px;font-weight:700;color:var(--linen);line-height:1.1}
.brand-sub{display:block;font-size:33px;color:var(--sand-muted)}
.nav{display:flex;gap:34px}
.nav a{color:var(--sand);text-decoration:none;font-size:16px}
.nav a:hover{color:var(--accent-text)}

/* hero */
.hero{padding-block:64px 80px}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:26px}
.kicker{font-size:17px;color:var(--accent-text);font-weight:500}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(44px,5.4vw,78px);line-height:1.2;color:var(--linen)}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.8;color:var(--sand-muted);max-width:520px}
.hero-figure{margin:0;border-radius:28px;overflow:hidden;justify-self:end;width:100%;max-width:592px}
.hero-figure svg{width:100%}

/* values band */
.band{background:var(--oak)}
.mash{height:28px;background-color:var(--walnut);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3l11 11-11 11L3 14z' fill='none' stroke='%23C99A63' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%23C99A63'/%3E%3C/svg%3E");}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-block:52px}
.value{display:flex;align-items:center;gap:18px}
.value svg{width:44px;height:44px;flex:none}
.value strong{display:block;font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink)}
.value span{font-size:16px;color:#3E2818}

/* sections */
.section{padding-block:clamp(64px,7vw,104px)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.section-head h2,.process h2{font-family:var(--display);font-size:clamp(36px,3.6vw,52px);font-weight:700;line-height:1.2}
.section-head p{font-size:18px;line-height:1.8;max-width:480px}

/* services */
.services{background:var(--linen)}
.services .section-head p{color:var(--ink-soft)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.service{padding:32px;border-bottom:1px solid var(--line-light);border-inline-start:1px solid var(--line-light);display:flex;flex-direction:column;gap:12px}
.service:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}
.service:nth-child(3n){padding-inline-end:0}
.service:nth-last-child(-n+3){border-bottom:0}
.service svg{width:36px;height:36px}
.service h3{font-size:22px;font-weight:600}
.service p{font-size:16px;line-height:1.7;color:var(--ink-soft)}

/* gallery */
.gallery{background:var(--walnut)}
.gallery h2{color:var(--linen)}
.gallery .section-head p{color:var(--sand-muted)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work{margin:0;display:flex;flex-direction:column;gap:14px}
.work svg,.work img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.work figcaption{display:flex;justify-content:space-between;gap:12px;color:var(--linen);font-size:18px;font-weight:600}
.work figcaption span{color:var(--sand-muted);font-size:15px;font-weight:400}

/* process */
.process{background:var(--sand)}
.process h2{margin-bottom:56px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.steps li{border-top:3px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:14px}
.step-num{font-family:var(--display);font-size:44px;font-weight:700;color:var(--brown);line-height:1}
.steps h3{font-size:22px;font-weight:600}
.steps p{font-size:16px;line-height:1.7;color:#4E3525}

/* contact */
.contact{background:var(--walnut-deep)}
.contact .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-text{display:flex;flex-direction:column;gap:24px}
.contact h2{font-family:var(--display);font-size:clamp(38px,3.9vw,56px);font-weight:700;color:var(--linen);line-height:1.25}
.contact-list{margin:0;border-top:1px solid var(--line-dark)}
.contact-list div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-dark)}
.contact-list dt{font-size:17px;color:var(--sand-muted)}
.contact-list dd{margin:0;font-size:20px;font-weight:600;color:var(--linen);text-align:left;}
.contact-list a{text-decoration:none}

/* footer */
.site-footer{background:var(--walnut-night)}
.site-footer .container{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px}
.site-footer strong{font-family:var(--display);font-size:20px;font-weight:600;color:var(--linen)}
.site-footer span{font-size:15px;color:#BFA98C}

/* responsive */
@media (max-width:1024px){
  .nav{display:none}
  .gallery-grid,.service-grid{grid-template-columns:repeat(2,1fr)}
  .service,.service:nth-child(n){padding:28px 24px;border-inline-start:0;border-bottom:1px solid var(--line-light)}
  .service:nth-child(even){border-inline-start:1px solid var(--line-light)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hero .container,.contact .container{grid-template-columns:1fr;gap:40px}
  .hero-figure{justify-self:stretch;max-width:none}
  .values{grid-template-columns:1fr;gap:24px;padding-block:36px}
}
@media (max-width:560px){
  .site-header .btn{display:none}
  .gallery-grid,.service-grid,.steps{grid-template-columns:1fr}
  .service:nth-child(n){padding-inline:0;border-inline-start:0}
  .service:last-child{border-bottom:0}
  .btn-row .btn{flex:1}
}