/* ============================================================
   Rebaa — single-project page layer (builds on styles.css tokens)
   One project, its own footage throughout: hero video, a scroll
   scrub walkthrough, a materials feature, specs, and an enquiry CTA.
   ============================================================ */

/* Top bar enquire button */
.topbar__cta{
  pointer-events:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink); background:var(--bronze); padding:10px 18px; border-radius:999px;
  transition:background .25s, transform .2s;
}
.topbar__cta:hover{ background:var(--bronze-soft); transform:translateY(-1px); }
.topbar__back{ pointer-events:auto; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone); opacity:.85; text-shadow:0 1px 8px rgba(0,0,0,.6); }

/* ---------- HERO ---------- */
.p-hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
.p-hero__media{ position:absolute; inset:0; transform:scale(1.06); transform-origin:center; will-change:transform; }
.p-hero__content{
  position:absolute; left:clamp(20px,6vw,88px); bottom:clamp(90px,15vh,160px); right:clamp(20px,6vw,88px);
  max-width:min(94vw,860px); z-index:3;
}
.p-hero__place{ font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bronze-soft); margin:0 0 .9em; }
.p-names{ display:flex; align-items:baseline; gap:clamp(16px,2.5vw,30px); flex-wrap:wrap; }
.p-name{
  font-family:var(--display); font-weight:300; font-size:clamp(3rem,9vw,7rem); line-height:.95;
  letter-spacing:-.02em; margin:0; color:var(--paper);
}
.p-name-ar{ font-family:var(--arab); font-weight:300; font-size:clamp(1.8rem,4vw,3.2rem); color:var(--bronze-soft); line-height:1; }
.p-hero__tag{ font-size:clamp(1.05rem,1.7vw,1.35rem); color:var(--stone); max-width:40ch; margin:.9em 0 1.6em; font-weight:300; }
.p-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- SCRUB WALKTHROUGH ---------- */
.p-scrub{ position:relative; height:320vh; }
.p-scrub__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.p-scrub__media{ position:absolute; inset:0; transform:scale(1.12); transform-origin:center 40%; will-change:transform; }
.p-scrub__cap{
  position:absolute; left:clamp(20px,6vw,96px); bottom:clamp(74px,13vh,140px); right:clamp(20px,6vw,96px);
  max-width:min(92vw,620px); z-index:3;
}
.p-scrub__cap p{ font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.22; color:var(--paper); margin:0; text-wrap:balance; }

/* ---------- FEATURE ---------- */
.p-feature{ background:var(--ink); padding:clamp(80px,14vh,170px) clamp(20px,6vw,88px); }
.p-feature__grid{
  max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
.p-feature__text h2{ font-family:var(--display); font-weight:300; font-size:clamp(2rem,4vw,3.4rem); line-height:1.08; letter-spacing:-.015em; margin:0 0 .6em; color:var(--paper); text-wrap:balance; }
.p-feature__text p{ font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.6; color:var(--stone-dim); max-width:48ch; margin:0; font-weight:300; }
.p-feature__img{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.p-feature__img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- SPECS ---------- */
.p-specs{ background:var(--ink-2); padding:clamp(54px,8vh,90px) clamp(20px,6vw,88px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.p-specs__row{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:14px 16px; justify-content:center; }
.p-specs__row span{
  font-size:.82rem; letter-spacing:.04em; color:var(--stone); border:1px solid var(--line);
  border-radius:999px; padding:11px 20px; background:rgba(255,255,255,.03);
}

/* ---------- CTA BAND ---------- */
.p-cta{
  position:relative; overflow:hidden; min-height:72svh; display:flex; align-items:center; justify-content:center;
  padding:clamp(80px,14vh,150px) clamp(20px,6vw,88px); text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, rgba(187,138,82,.12), transparent 60%), var(--ink);
}
.p-cta__inner{ position:relative; z-index:2; max-width:640px; }
.p-cta h2{ font-family:var(--display); font-weight:300; font-size:clamp(2.2rem,5.4vw,4.4rem); line-height:1.04; letter-spacing:-.02em; margin:.3em 0 .5em; color:var(--paper); text-wrap:balance; }
.p-cta p{ color:var(--stone-dim); font-size:clamp(1rem,1.4vw,1.15rem); margin:0 auto 2em; max-width:44ch; font-weight:300; }
.p-cta__ar{ font-family:var(--arab); color:var(--bronze-soft); font-size:clamp(1.05rem,2vw,1.4rem); margin-bottom:1em; }

/* WhatsApp button */
.wa-btn{
  display:inline-flex; align-items:center; gap:10px; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; background:var(--bronze); color:var(--ink); padding:16px 30px; border-radius:999px;
  transition:background .25s, transform .2s;
}
.wa-btn:hover{ background:var(--bronze-soft); transform:translateY(-2px); }
.wa-btn svg{ width:18px; height:18px; fill:currentColor; }
.wa-btn--ghost{ background:transparent; border:1px solid var(--line); color:var(--stone); }
.wa-btn--ghost:hover{ border-color:var(--bronze-soft); color:var(--bronze-soft); background:transparent; }

/* ---------- FOOTER ---------- */
.p-foot{ background:var(--ink); padding:clamp(60px,10vh,110px) clamp(20px,6vw,88px) calc(60px + env(safe-area-inset-bottom,0px)); text-align:center; }
.p-foot__logo{ height:clamp(44px,6vw,58px); width:auto; opacity:.9; margin:0 auto 2em; display:block; }
.p-foot__nav{ display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap; margin-bottom:2em; }
.p-foot__nav a{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-dim); transition:color .25s; }
.p-foot__nav a:hover{ color:var(--bronze-soft); }
.p-foot__nav a.is-here{ color:var(--bronze-soft); }
.p-foot__meta{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; padding-top:1.8em; border-top:1px solid var(--line); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-faint); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .p-feature__grid{ grid-template-columns:1fr; gap:30px; }
  .p-feature__img{ order:-1; }
  .p-scrub{ height:260vh; }
  .topbar__back{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .p-hero__media,.p-scrub__media{ transform:none !important; }
  .reveal{ opacity:1; transform:none; }
}