/* ============================================================
   DESIGN TOKENS — edit these to re-theme the entire site
   ============================================================ */
:root{
  --stone:#EDEAE2;       /* page background — warm plaster/travertine */
  --card:#F6F4EF;        /* card background, slightly lighter than stone */
  --ink:#1C1B18;         /* primary text — warm near-black */
  --ink-soft:#5A564C;    /* secondary text */
  --bronze:#8A6D3E;      /* accent — brass/bronze */
  --slate:#3E4842;       /* secondary accent — deep sage */
  --line:#CDC5B4;        /* hairline dividers */
  --line-soft:#DFDACD;

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --maxw: 1240px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}

/* ============================================================
   ARABIC / RTL SUPPORT
   ============================================================ */
html[lang="ar"] body{
  font-family:'Tajawal', 'Inter', sans-serif;
}
html[lang="ar"] :is(.hero h1, .section-head h2, .card-title, .detail-hero h3, .nx-title,
  .service-card h3, .stat b, .contact-lead, .nav-mark){
  font-family:'Tajawal', 'Fraunces', serif;
}
html[lang="ar"] .eyebrow, html[lang="ar"] .spec-label, html[lang="ar"] .filter-pill,
html[lang="ar"] .service-num, html[lang="ar"] .service-tag, html[lang="ar"] .clabel,
html[lang="ar"] .footer-row, html[lang="ar"] .nx-label, html[lang="ar"] .stat span{
  font-family:'Tajawal', 'IBM Plex Mono', monospace;
  text-transform:none;
  letter-spacing:0;
}
html[lang="ar"] .card-title, html[lang="ar"] .detail-hero h3, html[lang="ar"] .nx-title{
  text-transform:none;
}
html[lang="ar"] .nav-mark{
  font-style:normal; text-transform:none; letter-spacing:0;
}
html[dir="rtl"] .spec-strip div, html[dir="rtl"] .detail-spec div,
html[dir="rtl"] .service-card, html[dir="rtl"] .contact-list li{
  border-right:none;
}
html[dir="rtl"] .spec-strip div{border-left:1px solid var(--line);}
html[dir="rtl"] .spec-strip div:last-child{border-left:none;}
html[dir="rtl"] .detail-spec div{border-left:1px solid var(--line);}
html[dir="rtl"] .detail-spec div:last-child{border-left:none;}
html[dir="rtl"] .service-card{border-left:1px solid var(--line); border-right:none;}
html[dir="rtl"] .service-card:last-child{border-left:none;}
html[dir="rtl"] .next-project span[aria-hidden]{transform:scaleX(-1); display:inline-block;}

.lang-toggle{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--line); padding:6px 10px; display:flex; gap:2px;
}
.lang-toggle button{padding:2px 6px; color:var(--ink-soft);}
.lang-toggle button.active{color:var(--ink); font-weight:700;}
.lang-toggle span{color:var(--line);}

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

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bronze);
}

/* ============================================================
   NAV
   ============================================================ */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(237,234,226,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
@media (max-width:640px){
  .nav-inner{padding:16px 20px; flex-wrap:wrap; row-gap:10px;}
  .nav-links{order:3; width:100%; justify-content:center; gap:18px;}
}
.nav-mark{
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-weight:700;
  font-size:18px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.nav-links{display:flex; gap:36px;}
@media (max-width:720px){ .nav-links{gap:20px;} }
.nav-links a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  padding-bottom:3px;
}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--bronze);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  padding:0 0 64px 0;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background: linear-gradient(120deg, #3E4842 0%, #57534A 45%, #8A6D3E 100%);
  background-size:cover; background-position:center;
}
.hero-bg::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,19,17,0.32) 0%, rgba(20,19,17,0.22) 35%, rgba(20,19,17,0.55) 68%, rgba(20,19,17,0.8) 100%);
}
.hero-bg::after{
  content:'PLACEHOLDER PHOTOGRAPHY: replace with hero project image';
  position:absolute; top:24px; right:24px; max-width:220px; text-align:right;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.3); padding:6px 10px;
}
.hero-bg.has-image::after{display:none;}
@media (max-width:640px){ .hero-bg::after{display:none;} }
.hero-content{position:relative; z-index:2; color:#F6F4EF; max-width:820px; padding:0 32px;}
@media (max-width:640px){ .hero-content{padding:0 20px;} }
.hero-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#D9C9A8; margin-bottom:18px;
}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px, 5.4vw, 64px);
  line-height:1.06;
  letter-spacing:-0.01em;
}
.hero h1 em{font-style:italic; font-weight:400; color:#D9C9A8;}
.hero p{
  margin-top:22px; font-size:17px; max-width:52ch; color:rgba(246,244,239,0.82);
}
.hero-actions{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 22px; border:1px solid currentColor;
  transition:background .18s ease, color .18s ease;
}
.btn-solid{background:#F6F4EF; color:var(--ink); border-color:#F6F4EF;}
.btn-solid:hover{background:transparent; color:#F6F4EF;}
.btn-ghost{color:#F6F4EF;}
.btn-ghost:hover{background:#F6F4EF; color:var(--ink);}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{padding:96px 0;}
@media (max-width:640px){ section{padding:64px 0;} }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:48px; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:24px;
}
.section-head h2{
  font-family:var(--display); font-weight:400; font-size:clamp(26px,3.2vw,38px);
  margin-top:8px;
}
.section-head p{color:var(--ink-soft); max-width:46ch; font-size:14.5px;}

/* ============================================================
   PORTFOLIO GRID + FILTER
   ============================================================ */
.filter-row{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px;
}
.filter-pill{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); color:var(--ink-soft);
  transition:all .16s ease;
}
.filter-pill:hover{border-color:var(--bronze); color:var(--ink);}
.filter-pill.active{background:var(--ink); border-color:var(--ink); color:var(--stone);}

.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px 28px;
}
@media (max-width:920px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid{grid-template-columns:1fr;} }

.card{
  display:block;
  background:var(--card);
  border:1px solid var(--line-soft);
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 32px -20px rgba(28,27,24,0.35);}

.card-photo{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.card-photo::before{
  content:'';
  position:absolute; inset:0;
  background:var(--ph-gradient, linear-gradient(150deg,#8A6D3E,#3E4842));
}
.card-photo::after{
  content:'PLACEHOLDER';
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.4); padding:3px 7px;
}
.card-photo.has-image::after{display:none;}
.card-photo .card-title{
  position:relative; z-index:2; padding:20px;
  color:#F6F4EF;
  font-family:var(--display); font-size:18px; line-height:1.25;
  text-shadow:0 2px 12px rgba(0,0,0,0.25);
  text-transform:uppercase; letter-spacing:0.02em;
}
.card-photo::before{background:linear-gradient(180deg, rgba(28,27,24,0) 45%, rgba(28,27,24,0.75) 100%), var(--ph-gradient);}
.card-photo.has-image::before{background:linear-gradient(180deg, rgba(28,27,24,0) 45%, rgba(28,27,24,0.75) 100%);}

.spec-strip{
  display:flex; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  border-top:1px solid var(--line);
}
.spec-strip div{
  flex:1; padding:10px 12px; border-right:1px solid var(--line);
}
.spec-strip div:last-child{border-right:none;}
.spec-strip .spec-label{display:block; color:var(--bronze); font-size:9px; margin-bottom:3px;}
.spec-strip .spec-value{color:var(--ink);}

/* Category tint gradients */
.cat-residential .card-photo::before{--ph-gradient:linear-gradient(150deg,#6E6355,#3E4842);}
.cat-hospitality .card-photo::before{--ph-gradient:linear-gradient(150deg,#8A6D3E,#5A4A2A);}
.cat-commercial .card-photo::before{--ph-gradient:linear-gradient(150deg,#3E4842,#232824);}
.gallery-shot.cat-residential, .detail-hero.cat-residential{--ph-gradient:linear-gradient(150deg,#6E6355,#3E4842);}
.gallery-shot.cat-hospitality, .detail-hero.cat-hospitality{--ph-gradient:linear-gradient(150deg,#8A6D3E,#5A4A2A);}
.gallery-shot.cat-commercial, .detail-hero.cat-commercial{--ph-gradient:linear-gradient(150deg,#3E4842,#232824);}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:0;
  border:1px solid var(--line);
}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr;} }

.service-card{
  padding:36px 32px;
  border-right:1px solid var(--line);
  position:relative;
}
.service-card:last-child{border-right:none;}
@media (max-width:900px){
  .service-card{border-right:none; border-bottom:1px solid var(--line);}
  .service-card:last-child{border-bottom:none;}
}
.service-card.lead{background:var(--card);}

.service-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--bronze);
  display:block; margin-bottom:18px;
}
.service-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); display:inline-block;
  padding:4px 9px; margin-bottom:16px;
}
.service-card.lead .service-tag{color:var(--stone); background:var(--ink); border-color:var(--ink);}

.service-card h3{
  font-family:var(--display); font-weight:400; font-size:24px; margin-bottom:14px; line-height:1.2;
}
.service-card p{color:var(--ink-soft); font-size:14.5px; line-height:1.6;}
.service-deliverables{
  list-style:none; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.service-deliverables li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-soft);
  padding:5px 0; padding-left:14px; position:relative;
}
.service-deliverables li::before{
  content:'-'; position:absolute; left:0; color:var(--bronze);
}

.services-note{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-soft); max-width:70ch;
}
.services-note strong{color:var(--ink); font-weight:600;}

/* ============================================================
   PROCESS
   ============================================================ */
.process-list{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:0;
  border:1px solid var(--line);
}
@media (max-width:900px){ .process-list{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .process-list{grid-template-columns:1fr;} }
.process-step{
  padding:28px 20px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.process-list .process-step:last-child{border-right:none;}
@media (max-width:900px){
  .process-step:nth-child(2n){border-right:none;}
}
@media (max-width:560px){
  .process-step{border-right:none !important;}
}
html[dir="rtl"] .process-step{border-right:none; border-left:1px solid var(--line);}
html[dir="rtl"] .process-list .process-step:last-child{border-left:none;}
.process-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--bronze);
  display:block; margin-bottom:14px;
}
.process-step h4{font-family:var(--display); font-weight:500; font-size:17px; margin-bottom:8px;}
.process-step p{color:var(--ink-soft); font-size:13.5px; line-height:1.55; margin:0;}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;
}
@media (max-width:800px){ .about-grid{grid-template-columns:1fr; gap:32px;} }
.about-portrait{
  aspect-ratio:3/4;
  background:linear-gradient(160deg,#57534A,#3E4842);
  background-size:cover; background-position:center;
  position:relative;
  display:flex; align-items:flex-end; padding:20px;
}
.about-portrait::after{
  content:'PLACEHOLDER PORTRAIT';
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:rgba(255,255,255,.7);
}
.about-portrait.has-image::after{display:none;}
.about-copy p{margin-bottom:20px; color:var(--ink-soft); font-size:16px; max-width:60ch;}
.about-copy p:first-of-type{color:var(--ink); font-size:19px; font-family:var(--display); line-height:1.4;}
.stat-row{display:flex; gap:40px; margin-top:36px; flex-wrap:wrap;}
.stat{border-top:1px solid var(--line); padding-top:12px; min-width:110px;}
.stat b{display:block; font-family:var(--display); font-size:30px; font-weight:400;}
.stat span{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section{background:var(--ink); color:var(--stone);}
.contact-section .eyebrow{color:#D9C9A8;}
.contact-section .section-head{border-color:rgba(237,234,226,0.18);}
.contact-section .section-head p{color:rgba(237,234,226,0.65);}
.contact-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px;}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr;} }
.contact-lead{font-family:var(--display); font-size:clamp(24px,3vw,34px); font-weight:400; line-height:1.35; max-width:20ch;}
.contact-list{list-style:none; margin-top:8px;}
.contact-list li{border-top:1px solid rgba(237,234,226,0.18); padding:16px 0;}
.contact-list a{font-size:16px;}
.contact-list .clabel{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#D9C9A8; margin-bottom:6px;}

footer{padding:28px 0; border-top:1px solid rgba(237,234,226,0.18);}
.footer-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:rgba(237,234,226,0.55); flex-wrap:wrap; gap:8px;}

/* ============================================================
   PROJECT DETAIL OVERLAY
   ============================================================ */
.detail-overlay{
  position:fixed; inset:0; z-index:100;
  background:var(--stone);
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.22,.7,.2,1);
}
.detail-overlay.open{transform:translateY(0);}
.detail-close{
  position:sticky; top:0; z-index:5;
  background:rgba(237,234,226,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:18px 32px; display:flex; justify-content:space-between; align-items:center;
}
.detail-hero{
  aspect-ratio:16/8; position:relative;
  background:var(--ph-gradient, linear-gradient(150deg,#8A6D3E,#3E4842));
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:36px;
  overflow:hidden;
}
.detail-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,27,24,0) 45%, rgba(28,27,24,0.75) 100%);
}
.detail-hero::after{
  content:'PLACEHOLDER: replace with project photography';
  position:absolute; top:20px; right:24px; max-width:200px; text-align:right;
  font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.35); padding:5px 9px;
}
.detail-hero.has-image::after{display:none;}
@media (max-width:640px){ .detail-hero::after{display:none;} }
.detail-hero h3{
  position:relative; z-index:2; color:#F6F4EF; font-family:var(--display); font-weight:400;
  font-size:clamp(26px,3.6vw,42px); text-transform:uppercase; letter-spacing:0.01em;
}
.detail-body{max-width:820px; margin:0 auto; padding:56px 32px 100px;}
.detail-spec{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); margin-bottom:40px;
}
@media (max-width:600px){ .detail-spec{grid-template-columns:repeat(2,1fr);} }
.detail-spec div{padding:16px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.detail-spec div:nth-child(4n){border-right:none;}
.detail-spec div:last-child{border-right:none;}
.detail-body p{color:var(--ink-soft); font-size:16.5px; margin-bottom:20px; max-width:70ch;}
.detail-body h4{font-family:var(--display); font-size:20px; font-weight:500; margin:32px 0 12px;}

.detail-gallery{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
  margin:36px 0;
}
@media (max-width:600px){ .detail-gallery{grid-template-columns:1fr;} }
.gallery-shot{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--ph-gradient, linear-gradient(150deg,#8A6D3E,#3E4842));
  background-size:cover; background-position:center;
}
.gallery-shot::after{
  content:attr(data-label);
  position:absolute; bottom:10px; left:10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.35); padding:4px 8px;
}
.gallery-shot.has-image::after{display:none;}
.gallery-shot.wide{grid-column:1 / -1; aspect-ratio:16/9;}

.next-project{
  border-top:1px solid var(--line); margin-top:40px; padding-top:28px;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; transition:opacity .15s ease;
}
.next-project:hover{opacity:0.7;}
.next-project .nx-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze); display:block; margin-bottom:6px;}
.next-project .nx-title{font-family:var(--display); font-size:20px; text-transform:uppercase; letter-spacing:0.01em;}