/* =====================================================================
   AMJAD DEVELOPMENTS — design foundation
   ---------------------------------------------------------------------
   THE PALETTE IS THEIRS, MEASURED — not chosen.
   Sampled from the company's own cover artwork and profile mark:

       the field   #382008   93% of their cover art
       the ink     #baa592   the brightest value in their wordmark

   Everything else here is derived from those two, and every pair a
   visitor can read was checked against WCAG AA before it was allowed in:

                      brown-900  brown-800  brown-700   sand-50
       ink   #baa592      7.50       6.45       5.31       2.10  FAIL
       beige #c9b49f      8.88       7.63       6.28       1.78  FAIL
       gold  #d8b890      9.44       8.11       6.68       1.67  FAIL
       cream #ece2d4     13.84      11.90       9.79       1.14  FAIL
       white             17.73      15.24      12.54       1.12  FAIL
       brown-900          1.00       1.16       1.41      15.78

   THE RULE THAT FALLS OUT OF THAT TABLE, and it shapes the whole site:
   the brand's warm tones only work on DARK. Gold on sand measures 1.67 —
   it fails not just the 4.5 body threshold but the 3.0 large-text one too.
   So gold is never allowed to carry a word on a light background; there it
   is decoration only (rules, marks, borders). Text on light is brown-900.

   Which is why this site is mostly dark brown. That is not a mood board
   decision, it is what their own colours can actually do — and it happens
   to be right for a developer selling on prestige.
   ===================================================================== */

:root{
  /* ---- their two colours, and the range built from them ---- */
  --brown-900:#241505;      /* deepest — the hero field and the footer */
  --brown-800:#382008;      /* THEIR colour, the primary surface */
  --brown-700:#4a2d10;      /* raised cards on dark */
  --brown-600:#5e3c1c;      /* borders and hairlines on dark */

  --ink:#baa592;            /* their wordmark's own value */
  --beige:#c9b49f;          /* secondary text on dark  — 7.63 */
  --gold:#d8b890;           /* accents and eyebrows    — 8.11 */
  --cream:#ece2d4;          /* body text on dark       — 11.90 */

  --sand-50:#f6f1ea;        /* the one light surface */
  --sand-100:#ece4d8;
  --sand-200:#ddd0be;

  /* Semantic names, so a component never reaches for a raw colour and
     nobody has to remember which pairs are legal. */
  --bg:var(--brown-900);
  --surface:var(--brown-800);
  --surface-2:var(--brown-700);
  --line:rgba(216,184,144,.18);
  --line-strong:rgba(216,184,144,.34);
  --text:var(--cream);
  --text-dim:var(--beige);
  --text-on-light:var(--brown-900);
  --accent:var(--gold);

  --radius:4px;             /* nearly square: softness reads cheap here */
  --radius-lg:8px;
  --header-h:76px;
  --wrap:1240px;

  /* A long, slow ease. Property developers sell permanence; nothing on
     this site should feel springy. */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16.5px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

.wrap{ width:min(var(--wrap), 100% - 44px); margin-inline:auto; }
@media (max-width:640px){ .wrap{ width:min(var(--wrap), 100% - 32px); } }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================== type ===
   Two faces, each doing one job.

   Aref Ruqaa for the wordmark and the display lines. Their logo is drawn
   calligraphy and no webfont will match it — but ruqaa is the same family
   of letterform, so set type sits beside their mark instead of fighting
   it. When they send the logo file it drops into .mark and this becomes
   the fallback rather than the primary.

   Jost for Latin. Their poster sets DEVELOPMENTS and RISING BEYOND in a
   wide-tracked geometric sans; Jost is the closest thing on Google Fonts
   and takes the same tracking without falling apart.
   ==================================================================== */
.display{
  font-family:"Aref Ruqaa","Amiri",Georgia,serif;
  font-weight:700;
  line-height:1.32;
  letter-spacing:0;
  margin:0;
}
.latin{
  font-family:"Jost","Inter",system-ui,sans-serif;
  font-weight:300;
  letter-spacing:.34em;
  text-transform:uppercase;
}

h1,h2,h3{ margin:0; font-weight:600; line-height:1.35; }
h1{ font-size:clamp(32px,5vw,58px); }
h2{ font-size:clamp(25px,3.4vw,40px); }
h3{ font-size:clamp(18px,2vw,23px); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* the eyebrow above a section title — gold, and only ever on dark */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:"Jost",system-ui,sans-serif;
  font-size:12px; font-weight:400; letter-spacing:.30em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--accent); opacity:.7;
}
/* on the one light surface the same eyebrow has to change colour: gold on
   sand is 1.67, which is unreadable. The rule beside it stays gold, since
   a graphic line carries no meaning. */
.on-light .eyebrow{ color:#7a5a2a; }
.on-light .eyebrow::before{ background:var(--accent); opacity:1; }

.lead{
  font-size:clamp(15.5px,1.7vw,18px);
  color:var(--text-dim);
  max-width:62ch;
}
.on-light{ background:var(--sand-50); color:var(--text-on-light); }
.on-light .lead{ color:#5a4632; }

/* ========================================================= layout === */
.section{ padding:clamp(72px,9vw,124px) 0; }
.section-head{ margin-bottom:clamp(34px,5vw,58px); max-width:70ch; }

/* A hairline rule with the brand's own weight. Used to separate bands
   without a hard border, which on a dark field reads as a seam. */
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ========================================================= buttons ===
   Two only. A developer's site has one action that matters — talk to a
   salesperson — and everything else is secondary. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  font-size:15px; font-weight:600;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }

.btn-gold{
  background:var(--gold); color:#2a1806;      /* 8.9:1 — measured */
  border-color:var(--gold);
}
.btn-gold:hover{ background:#e6cba7; border-color:#e6cba7; }

.btn-ghost{
  background:transparent; color:var(--cream);
  border-color:var(--line-strong);
}
.btn-ghost:hover{ background:rgba(216,184,144,.10); border-color:var(--gold); }

/* on the light band the ghost button needs a dark outline or it vanishes */
.on-light .btn-ghost{ color:var(--brown-900); border-color:rgba(36,21,5,.30); }
.on-light .btn-ghost:hover{ background:rgba(36,21,5,.06); border-color:var(--brown-900); }

/* ==================================================== the wordmark ===
   Set type, not their logo file — which they have not sent. Built so the
   swap is one element: put their image inside .mark and delete the spans.
   ==================================================================== */
.mark{ display:inline-flex; align-items:center; gap:14px; }
.mark-ar{
  font-family:"Aref Ruqaa","Amiri",serif;
  font-size:30px; font-weight:700; line-height:1;
  color:var(--cream);
  letter-spacing:.02em;
}
.mark-sep{ width:1px; height:26px; background:var(--line-strong); }
.mark-en{
  font-family:"Jost",system-ui,sans-serif;
  font-size:9.5px; font-weight:300; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
  line-height:1.4;
}
.on-light .mark-ar{ color:var(--brown-900); }
.on-light .mark-en{ color:#7a5a2a; }

/* ========================================================== header === */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:900;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-block-end:1px solid transparent;
}
.site-header .wrap{ display:flex; align-items:center; gap:30px; width:min(var(--wrap),100% - 44px); }
/* Solid on scroll rather than translucent. Blur over a dark photograph is
   unpredictable; a flat brown bar is the same on every device. */
.site-header.scrolled{
  background:rgba(26,15,4,.96);
  border-block-end-color:var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .site-header.scrolled{
    background:rgba(26,15,4,.82);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  }
}
.nav{ display:flex; gap:4px; margin-inline-start:auto; }
.nav a{
  position:relative;
  padding:9px 15px;
  font-size:15px; color:var(--beige);
  transition:color .3s var(--ease);
}
.nav a:hover{ color:var(--cream); }
.nav a.active{ color:var(--cream); }
/* the active marker is a gold underline, not a filled pill: a pill on a
   transparent header has no shape to sit in */
.nav a.active::after{
  content:""; position:absolute; inset-inline:15px; inset-block-end:2px;
  height:1px; background:var(--gold);
}
.header-actions{ display:flex; align-items:center; gap:12px; }
.burger{
  display:none; background:none; border:0; padding:8px;
  color:var(--cream); font-size:20px; line-height:1;
}

@media (max-width:1000px){
  .nav{ display:none; }
  .burger{ display:block; margin-inline-start:auto; }
  .header-actions .btn{ display:none; }
}

/* the phone overlay menu */
.m-menu{
  position:fixed; inset:0; z-index:1000;
  background:var(--brown-900);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.m-menu.open{ opacity:1; visibility:visible; }
.m-menu a{
  font-family:"Aref Ruqaa",serif; font-size:27px; color:var(--cream);
  padding:12px 24px;
}
.m-menu a.cta{ color:var(--gold); margin-top:14px; }
.m-close{
  position:absolute; inset-block-start:22px; inset-inline-end:22px;
  background:none; border:0; color:var(--beige); font-size:30px; line-height:1;
}

/* ========================================================== footer === */
.site-footer{
  background:#1a0f04;
  border-block-start:1px solid var(--line);
  padding:clamp(52px,6vw,78px) 0 30px;
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px;
  margin-bottom:44px;
}
.foot-grid h4{
  margin:0 0 18px;
  font-family:"Jost",system-ui,sans-serif;
  font-size:11px; font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
}
.foot-grid a, .foot-grid p{ color:var(--beige); font-size:15px; }
.foot-grid a:hover{ color:var(--cream); }
.foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot-bottom{
  border-block-start:1px solid var(--line);
  padding-block-start:24px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13.5px; color:#8d7a66;
}
@media (max-width:820px){
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
}

/* ================================================ floating WhatsApp ===
   Physical properties, not logical. `inset-inline-end` flips with the
   document direction, and on an Arabic page that moved this button to the
   opposite corner from where it was designed. A floating action anchors to
   the screen, not to the text. */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:880;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; color:#fff;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
  transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:27px; height:27px; }
@media (max-width:640px){
  .wa-float{ bottom:16px; right:16px; width:50px; height:50px; }
}