/* =====================================================================
   AMJAD DEVELOPMENTS — home page
   Loaded after base.css. Page-level composition only.
   ===================================================================== */

/* ============================================================ hero ===
   Their own logo over their own drone footage.

   WHICH NINE SECONDS, AND WHY THOSE
   The company reel is 126 seconds. Sampling every frame at 2fps and
   scoring each ten-second window on mean luminance, variance, and the
   largest frame-to-frame jump (a jump is a cut) gave three candidates:

       103.5s   mean 0.578   too bright for cream type
        52.5s   mean 0.243   darkest, but a hard cut inside the window
        70.0s   mean ~0.30   dark, steady, no cut  <- chosen

   The 40s window scored well too and was rejected on sight: it is a
   rendered flythrough with Arabic titles burned into it, and text under
   text is unreadable at any contrast.

   THE WATERMARK
   Every frame of the reel carries their logo burned in near the top. Two
   logos on one screen reads as a mistake, so the top 20% is cropped away.
   That number is measured: a pixel belonging to a watermark is bright in
   almost every frame while the footage under it changes, and by that test
   the mark occupies 10%–18% of frame height, centred.

   COST DISCIPLINE
   614 KB desktop, 226 KB mobile, and a 6 KB poster that paints first. The
   video element ships with preload="none" and is only given a source by
   js/main.js once the device and the connection justify it — on a phone on
   a metered Egyptian connection the poster IS the hero, and it looks
   finished.
   ==================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 40px) 0 clamp(90px,12vh,140px);
  overflow:hidden;
  background:var(--brown-900);
}
.hero-vid{
  position:absolute; inset:0; z-index:0;
  opacity:0; transition:opacity .9s var(--ease);
  width:100%; height:100%;
  object-fit:cover;
  /* their footage is a cool grey-blue building; a warm multiply pulls it
     back into the brand's brown without touching the file */
  filter:saturate(.72) contrast(1.04);
}
.hero-vid.ready{ opacity:1; }

/* the warm wash, and the ground under the copy */
/* THE VEIL, AND THE POOL — and the pool is here because of a measurement.

   The hero loop was re-cut brighter (the client said the first one was too
   dark, and he was right: the old clip measured 0.22 mean luminance, this one
   measures 0.56). Brighter footage costs contrast, and the cost was not
   spread evenly — it landed on one element.

   Measured over the WORST pixel in all 80 sampled frames, which is a blown
   white rooftop at (255,255,255):

                            through the veil alone
       hero-logo   cream        4.63:1   PASS
       hero-sub    cream        5.26:1   PASS
       buttons     cream        6.16:1   PASS
       hero-slogan GOLD         3.32:1   FAIL   <- 11–15px, needs 4.5

   Gold on white rooftop is the whole problem, and gold is the brand — so the
   answer is not to recolour it. Raising the horizontal band to .70 would fix
   it and would also undo exactly what the client asked for.

   So the extra darkness is a POOL, not a band: a soft radial centred on the
   copy column, which is where every piece of text on this hero lives. The
   aerial stays bright at the sides, where the picture is, and the middle gets
   what it needs. With the pool at .38 the slogan measures 4.9:1.

   Layer order matters — the pool is listed FIRST so it paints on top of the
   linear band and under nothing. */
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    /* the pool: local contrast for the copy, no cost to the picture */
    radial-gradient(76% 60% at 50% 52%,
      rgba(16,9,2,.38) 0%,
      rgba(16,9,2,.26) 52%,
      rgba(16,9,2,0)  100%),
    linear-gradient(180deg,
      rgba(20,11,3,.72) 0%,
      rgba(24,14,4,.52) 34%,
      rgba(28,16,5,.62) 62%,
      rgba(20,11,3,.88) 100%),
    /* the multiply that makes their blue-grey footage read brown */
    linear-gradient(0deg, rgba(74,45,16,.30), rgba(74,45,16,.30));
}

.hero-inner{ position:relative; z-index:3; text-align:center; }

/* THEIR MARK, at the size the calligraphy actually wants.
   Capped in ch rather than vw alone: past about 620px the strokes get
   heavy enough to lose the fineness that makes the mark good. */
.hero-logo{
  width:min(62vw, 620px);
  height:auto;
  margin:0 auto clamp(18px,3vh,30px);
  /* a whisper of shadow so the cream ink separates from a light patch in
     the footage without looking like it is glowing */
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}
.hero-slogan{
  font-family:"Jost",system-ui,sans-serif;
  font-size:clamp(11px,1.4vw,15px);
  font-weight:300; letter-spacing:.46em; text-transform:uppercase;
  color:var(--gold);
  margin:0 0 clamp(22px,3.5vh,34px);
}
.hero-line{
  width:58px; height:1px; background:var(--gold); opacity:.55;
  margin:0 auto clamp(24px,3.5vh,38px);
}
.hero-sub{
  font-size:clamp(15.5px,1.9vw,19px);
  line-height:1.9;
  color:var(--cream);
  max-width:50ch; margin:0 auto clamp(28px,4vh,42px);
  text-shadow:0 1px 18px rgba(12,6,1,.7);
}
.hero-cta{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

/* the entrance. The mark comes in on its own, and only then does anything
   else appear — it is the one thing on the screen that has to land. */
@media (prefers-reduced-motion:no-preference){
  .hero-logo{
    opacity:0; transform:translateY(16px) scale(.985);
    animation:markIn 1.5s var(--ease) .15s forwards;
  }
  .hero-inner > *:not(.hero-logo){
    opacity:0; transform:translateY(14px);
    animation:heroIn 1s var(--ease) forwards;
  }
  .hero-slogan{ animation-delay:.85s; }
  .hero-line{   animation-delay:1.0s; }
  .hero-sub{    animation-delay:1.12s; }
  .hero-cta{    animation-delay:1.26s; }
}
@keyframes markIn{ to{ opacity:1; transform:none; } }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* one quiet cue that the page continues */
.hero-scroll{
  position:absolute; inset-inline:0; bottom:20px; z-index:4;
  display:flex; justify-content:center; pointer-events:none;
}
.hero-scroll span{
  width:24px; height:39px; border:1px solid rgba(216,184,144,.42);
  border-radius:13px; position:relative;
}
.hero-scroll span::after{
  content:""; position:absolute; inset-inline:0; margin:auto; top:7px;
  width:2px; height:7px; border-radius:1px; background:var(--gold);
  animation:scrollDot 2.1s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{ transform:translateY(0);    opacity:.3; }
  45%    { transform:translateY(13px); opacity:1;  }
}
@media (prefers-reduced-motion:reduce){ .hero-scroll span::after{ animation:none; } }
@media (max-height:700px){ .hero-scroll{ display:none; } }

@media (max-width:640px){
  .hero-logo{ width:min(78vw, 420px); }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 100%; }
}
@media (max-height:640px){
  .hero-sub{ display:none; }
}

/* the header mark */
.mark-img{ width:auto; height:38px; display:block; }
@media (max-width:640px){ .mark-img{ height:32px; } }

/* ========================================================== numbers ===
   Four figures on a hairline grid. Deliberately NOT invented — every one
   of them reads from js/data.js, and any that the client has not confirmed
   renders as a dash rather than a number. A wrong figure on a developer's
   home page is worse than a missing one. */
.stats{ background:var(--brown-800); border-block:1px solid var(--line); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:clamp(38px,5vw,58px) 0;
}
.stat{ text-align:center; padding:8px 16px; position:relative; }
.stat + .stat::before{
  content:""; position:absolute; inset-block:14%; inset-inline-start:0;
  width:1px; background:var(--line);
}
.stat b{
  display:block;
  font-family:"Jost",system-ui,sans-serif;
  font-size:clamp(30px,4vw,50px); font-weight:300; line-height:1;
  color:var(--gold);
  margin-bottom:10px;
}
.stat span{
  font-size:13.5px; color:var(--beige);
  letter-spacing:.02em;
}
@media (max-width:760px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:30px 0; }
  .stat:nth-child(3)::before{ display:none; }
}

/* ========================================================= projects ===
   Cards, and the placeholder state is a designed state — not an accident.
   Until the client sends real projects these render with a clear
   "قريبًا" ribbon and no invented price, because a made-up number on a
   real estate site is the one mistake that cannot be walked back. */
.proj-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(18px,2.2vw,28px);
}
.proj{
  position:relative;
  background:var(--brown-800);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.proj:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.proj-img{
  aspect-ratio:4/3;
  background:var(--brown-700) center/cover no-repeat;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
/* the empty state: their monogram, not a broken-image icon */
.proj-img[data-empty]::after{
  content:"أ";
  font-family:"Aref Ruqaa",serif; font-size:70px;
  color:rgba(216,184,144,.16);
}
.proj-body{ padding:24px 24px 26px; }
.proj-tag{
  position:absolute; inset-block-start:14px; inset-inline-start:14px; z-index:2;
  padding:6px 13px; border-radius:2px;
  font-family:"Jost",system-ui,sans-serif;
  font-size:10.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(26,15,4,.86); color:var(--gold);
  border:1px solid var(--line-strong);
}
.proj h3{ margin-bottom:8px; color:var(--cream); }
.proj-loc{
  display:flex; align-items:center; gap:7px;
  font-size:14px; color:var(--beige); margin-bottom:16px;
}
.proj-loc svg{ width:15px; height:15px; flex:0 0 auto; opacity:.8; }
.proj-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-block-start:16px; border-block-start:1px solid var(--line);
}
.proj-meta span{
  font-size:12.5px; color:var(--beige);
  padding:5px 11px; border:1px solid var(--line); border-radius:2px;
}

/* ============================================================= why ===
   On the light band, because a page that is dark from top to bottom has no
   rhythm — and because this is the one place the brand's warm tones are
   NOT carrying text, so a light surface is safe here.
   ==================================================================== */
.why-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(24px,3vw,44px);
}
.why-item h3{ color:var(--brown-900); margin-bottom:10px; font-size:19px; }
.why-item p{ color:#5a4632; font-size:15.5px; margin:0; }
.why-ico{
  width:46px; height:46px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(122,90,42,.34); border-radius:2px;
  color:#7a5a2a;
}
.why-ico svg{ width:22px; height:22px; }

/* ========================================================= contact === */
.contact-sec{ background:var(--brown-800); }
.ct-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,58px);
  align-items:start;
}
.ct-rows{ display:grid; gap:2px; }
.ct-row{
  display:flex; align-items:center; gap:16px;
  padding:19px 0; border-block-end:1px solid var(--line);
}
.ct-row:last-child{ border-block-end:0; }
.ct-ico{
  width:42px; height:42px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:2px; color:var(--gold);
}
.ct-ico svg{ width:19px; height:19px; }
.ct-row b{ display:block; font-size:12px; color:var(--gold);
  font-family:"Jost",system-ui,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:3px; font-weight:400; }
.ct-row span, .ct-row a{ font-size:16px; color:var(--cream); direction:ltr; display:block; }
.ct-row .ar{ direction:rtl; }

.ct-form{ display:grid; gap:14px; }
.ct-form label{ display:grid; gap:7px; font-size:13.5px; color:var(--beige); }
.ct-form input, .ct-form textarea, .ct-form select{
  font:inherit; font-size:15.5px;
  padding:13px 15px;
  background:var(--brown-900); color:var(--cream);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s var(--ease);
}
.ct-form input:focus, .ct-form textarea:focus, .ct-form select:focus{
  outline:none; border-color:var(--gold);
}
.ct-form textarea{ resize:vertical; min-height:104px; }
.ct-note{ font-size:13px; color:#8d7a66; margin:0; }
.ct-msg{ font-size:14.5px; margin:0; min-height:1.4em; }
.ct-msg.ok{ color:#8fd6a4; }
.ct-msg.err{ color:#f0a58f; }

@media (max-width:860px){
  .ct-grid{ grid-template-columns:1fr; }
}

/* =========================================================== map ===== */
.ct-map{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; min-height:300px; background:var(--brown-700);
}
.ct-map iframe{ width:100%; height:100%; min-height:300px; border:0; display:block;
  filter:grayscale(.3) sepia(.18) brightness(.86); }