:root{
  --accent:#BE9B4E;
  --bg:#121110;
  --fg:#F2EEE7;
  /* Static fallbacks first, color-mix after — an older WebView that does not
     support color-mix would otherwise render invisible text on the dark bg. */
  --fg-70:#afaca7;
  --fg-45:#777471;
  --fg-20:#3f3d3b;
  --fg-10:#282726;
  --surface:#1f1e1d;
  --fg-70:color-mix(in srgb,var(--fg) 70%,var(--bg));
  --fg-45:color-mix(in srgb,var(--fg) 45%,var(--bg));
  --fg-20:color-mix(in srgb,var(--fg) 20%,var(--bg));
  --fg-10:color-mix(in srgb,var(--fg) 10%,var(--bg));
  --surface:color-mix(in srgb,var(--fg) 6%,var(--bg));
  --display:"Amiri",'Segoe UI',serif;
  --body:"IBM Plex Sans Arabic",'Segoe UI',system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --max:78rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.8;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.2;margin:0}
h1{font-size:clamp(2.75rem,1.6rem + 5.5vw,6.5rem);line-height:1.05}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.5rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem)}
p{margin:0 0 1.1em}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* Thin brass rule used as a section marker. */
.mark{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.mark::after{content:"";flex:1;height:1px;background:var(--fg-20)}
.mark span{font-size:.72rem;letter-spacing:.3em;color:var(--accent);
  text-transform:uppercase;font-weight:600}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1rem;
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--fg-10);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.brand img{width:42px;height:42px;object-fit:contain;flex:none}
.brand-mark{
  width:42px;height:42px;flex:none;border:1px solid var(--accent);
  color:var(--accent);display:grid;place-items:center;
  font-family:var(--display);font-size:1.3rem;line-height:1;
}
.brand-name{font-family:var(--display);font-size:1.2rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:clamp(.9rem,2.2vw,1.75rem);font-size:.9rem}
.nav a{text-decoration:none;color:var(--fg-45);transition:color .25s}
.nav a:hover,.nav a[aria-current=page]{color:var(--accent)}
@media(max-width:34rem){.nav{display:none}}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:min(84vh,44rem);display:flex;align-items:flex-end;
  padding-block:clamp(4rem,14vw,9rem) clamp(2.5rem,7vw,4.5rem);overflow:hidden}
/* Without a photograph the tall hero is just an empty first screen. Collapse
   it so the visitor lands on the name and the WhatsApp button instead. */
.hero.no-photo{min-height:auto;padding-block:clamp(2.5rem,9vw,5rem) clamp(2rem,6vw,4rem)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 4%,transparent 70%),
             linear-gradient(to left,transparent 40%,var(--bg) 105%)}
/* No photograph yet: a brass field instead of an empty grey box. */
.hero-bg.empty{background:
  radial-gradient(120% 90% at 85% 15%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
  var(--bg)}
.hero-inner{position:relative;z-index:1;width:100%}
.hero-kicker{font-family:var(--body);font-size:.78rem;letter-spacing:.28em;
  color:var(--accent);text-transform:uppercase;margin:0 0 1.75rem;font-weight:600}
.hero h1{max-width:14ch}
.hero-tag{color:var(--fg-70);max-width:46ch;margin-top:1.75rem;
  font-size:clamp(1.02rem,.98rem + .4vw,1.25rem)}

/* --------------------------------------------------------------- actions */
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.5rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.75rem;
  text-decoration:none;font-size:.95rem;font-weight:600;
  border:1px solid var(--fg-20);transition:background .25s,color .25s,border-color .25s}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-primary:hover{background:transparent;color:var(--accent)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* -------------------------------------------------------------- sections */
.section{padding-block:clamp(3.5rem,9vw,7rem)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vw,3.5rem)}
.section-head p{color:var(--fg-45);margin:0;font-size:.9rem}

/* Services as plates, not a list. Two up even on a phone: nine short trade
   names in one column reads as a receipt. */
/* Borders live on the cells, not as gaps over a coloured container: an odd
   number of services would otherwise leave a phantom tile in the last row. */
.services{display:grid;grid-template-columns:repeat(2,1fr);
  border-block-start:1px solid var(--fg-10);border-inline-start:1px solid var(--fg-10)}
@media(min-width:52rem){.services{grid-template-columns:repeat(3,1fr)}}
.svc{background:var(--bg);padding:clamp(1.1rem,3vw,2rem);
  border-block-end:1px solid var(--fg-10);border-inline-end:1px solid var(--fg-10);
  transition:background .3s;position:relative}
.svc:hover{background:var(--surface)}
.svc .n{font-family:var(--display);font-size:.85rem;color:var(--accent);
  display:block;margin-bottom:.6rem}
.svc h3{font-size:clamp(1rem,2.6vw,1.3rem);margin-bottom:.4rem;line-height:1.35}
.svc p{margin:0;color:var(--fg-45);font-size:.88rem;line-height:1.65}
@media(max-width:34rem){.svc p{display:none}}

/* Works: full-bleed tiles, caption over the image. */
.works{display:grid;gap:clamp(.6rem,1.5vw,1.25rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:52rem){.works{grid-template-columns:repeat(3,1fr)}}
.work{position:relative;display:block;text-decoration:none;overflow:hidden;
  aspect-ratio:4/5;background:var(--surface)}
.work img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);opacity:.9}
.work:hover img{transform:scale(1.06);opacity:1}
.work-ph{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:clamp(2rem,7vw,3.5rem);color:var(--fg-20)}
.work-cap{position:absolute;inset-inline:0;inset-block-end:0;
  padding:clamp(.8rem,2.5vw,1.4rem);
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent),transparent);
  z-index:1}
.work-cap .n{font-family:var(--display);font-size:.75rem;color:var(--accent);
  display:block;margin-bottom:.2rem}
.work-cap h3{font-size:clamp(.9rem,2.4vw,1.15rem);line-height:1.3}

/* ---------------------------------------------------------------- detail */
.detail-img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--surface)}
.detail-body{max-width:60ch;margin-top:2rem;color:var(--fg-70)}
.back{display:inline-block;text-decoration:none;color:var(--fg-45);
  font-size:.88rem;margin-bottom:1.5rem}
.back:hover{color:var(--accent)}

/* --------------------------------------------------------------- contact */
.contact-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  border-block-start:1px solid var(--fg-10);border-inline-start:1px solid var(--fg-10)}
.field{background:var(--bg);padding:clamp(1.1rem,3vw,1.9rem);margin:0;
  border-block-end:1px solid var(--fg-10);border-inline-end:1px solid var(--fg-10)}
.field dt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.6rem;font-weight:600}
.field dd{margin:0;font-size:1.02rem}
.field a{text-decoration:none;border-bottom:1px solid var(--fg-20)}
.field a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.hours{list-style:none;margin:0;padding:0;font-size:.95rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding-block:.3rem}
.hours .t{font-variant-numeric:tabular-nums;color:var(--fg-45)}

/* ---------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--fg-10);padding-block:2.5rem 7rem;
  margin-top:clamp(3rem,8vw,6rem);font-size:.86rem;color:var(--fg-45)}
.foot-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center}
.social{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.social a{text-decoration:none;color:var(--fg-45)}
.social a:hover{color:var(--accent)}

.wa-bar{position:fixed;inset-inline:0;inset-block-end:0;z-index:40;
  padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--fg-10);display:flex;gap:.55rem}
.wa-bar .btn{flex:1;justify-content:center;padding-block:.8rem}
@media(min-width:48rem){.wa-bar{display:none}.site-foot{padding-bottom:2.5rem}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}