:root{
  --bg:#0a0a09;
  --bg-alt:#121110;
  --bg-card:#161513;
  --gold:#c9a13c;
  --gold-light:#e8cd8a;
  --gold-dim:#7a6526;
  --text:#f3ede0;
  --text-muted:#9c968a;
  --line: rgba(201,161,60,0.22);
  --font-display-en:'Playfair Display', serif;
  --font-body-en:'Inter', sans-serif;
  --font-ar:'Tajawal', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body-en);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.lang-ar{ font-family:var(--font-ar); }
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar .disp{ font-family:var(--font-ar); }
h1,h2,h3,.disp{ font-family:var(--font-display-en); font-weight:700; letter-spacing:0.01em; }
::selection{ background:var(--gold); color:#0a0a09; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- corner-frame signature element ---------- */
.frame-corners{ position:relative; }
.frame-corners::before,
.frame-corners::after,
.frame-corners .fc-tr,
.frame-corners .fc-bl{
  content:""; position:absolute; width:22px; height:22px;
  border:1.5px solid var(--gold);
  opacity:0.85;
}
.frame-corners::before{ top:-10px; left:-10px; border-right:none; border-bottom:none; }
.frame-corners::after{ bottom:-10px; right:-10px; border-left:none; border-top:none; }
.frame-corners .fc-tr{ top:-10px; right:-10px; border-left:none; border-bottom:none; }
.frame-corners .fc-bl{ bottom:-10px; left:-10px; border-right:none; border-top:none; }

/* ---------- top nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 5vw;
  background:rgba(10,10,9,0.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.logo-wrap{ display:flex; align-items:center; gap:12px; }
.logo-wrap img{ height:64px; width:64px; object-fit:contain; }
.brand-name{ font-family:var(--font-display-en); font-size:1.35rem; letter-spacing:0.08em; color:var(--text); }
body.lang-ar .brand-name{ font-family:var(--font-ar); font-weight:800; }

nav.main-nav{ display:flex; align-items:center; gap:38px; }
nav.main-nav a{
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted);
  position:relative; padding-bottom:4px; transition:color .25s ease;
}
body.lang-ar nav.main-nav a{ letter-spacing:0.02em; text-transform:none; font-weight:500; }
nav.main-nav a:hover{ color:var(--gold-light); }
nav.main-nav a.active{ color:var(--gold); }
nav.main-nav a.active::after{
  content:""; position:absolute; bottom:-2px; left:0; right:0; height:1px; background:var(--gold);
}

.nav-right{ display:flex; align-items:center; gap:22px; }
.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
  font-size:0.75rem; letter-spacing:0.06em;
}
.lang-toggle button{
  background:transparent; border:none; color:var(--text);
  padding:7px 15px; cursor:pointer; font-family:var(--font-body-en); font-weight:500;
  transition:all .25s ease;
}
.lang-toggle button:not(.active):hover{ color:var(--gold-light); }
.lang-toggle button.active{ background:var(--gold); color:#0a0a09; }

.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.burger span{ width:24px; height:1.5px; background:var(--gold); display:block; }

@media (max-width: 860px){
  nav.main-nav{
    position:fixed; top:73px; left:0; right:0; background:var(--bg);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  nav.main-nav.open{ max-height:400px; }
  nav.main-nav a{ padding:16px 6vw; width:100%; border-bottom:1px solid var(--line); }
  .burger{ display:flex; }
}

/* ---------- layout ---------- */
main{ padding-top:88px; }
section{ padding:110px 5vw; position:relative; }
section.tight{ padding:80px 5vw; }
.container{ max-width:1080px; margin:0 auto; }

.section-tag{
  font-size:0.75rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:16px; display:block;
}
body.lang-ar .section-tag{ letter-spacing:0.04em; }
.section-title{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:28px; }
.divider{ width:64px; height:2px; background:var(--gold); margin:0 0 40px; }

/* ---------- hero (home page, full) ---------- */
#hero{
  min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; padding-top:88px; overflow:hidden;
  background:var(--bg);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
#hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(10,10,9,0.35), rgba(10,10,9,0.75) 70%),
    linear-gradient(to bottom, rgba(10,10,9,0.55) 0%, rgba(10,10,9,0.3) 30%, rgba(10,10,9,0.75) 100%);
}
#hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.12;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 75%);
}
.hero-inner{ position:relative; z-index:2; padding:40px 60px; }
.hero-logo{ height:120px; width:120px; object-fit:contain; margin:0 auto 32px; }
@media (max-width: 520px){ .hero-logo{ height:80px; width:80px; margin-bottom:20px; } }
.eyebrow{
  font-size:0.78rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:22px; display:inline-block;
}
body.lang-ar .eyebrow{ letter-spacing:0.05em; }
#hero h1{
  font-size:clamp(2.2rem, 5.6vw, 4.8rem); line-height:1.08; color:var(--text);
  margin-bottom:26px;
}
#hero h1 .accent{ color:var(--gold); font-style:italic; }
body.lang-ar #hero h1 .accent{ font-style:normal; }
#hero p.sub{
  color:var(--text-muted); font-size:1.05rem; max-width:520px; margin:0 auto 44px;
  line-height:1.8; font-weight:300;
}
body.lang-ar #hero p.sub{ font-weight:400; }

/* ---------- page hero (inner pages, shorter) ---------- */
.page-hero{
  padding:150px 5vw 60px; text-align:center;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(201,161,60,0.08), transparent 65%);
}
.page-hero .section-tag{ display:block; }
.page-hero h1{ font-size:clamp(2rem, 4.4vw, 3.2rem); }

.btn-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.btn{
  padding:15px 34px; border-radius:2px; font-size:0.85rem; letter-spacing:0.1em;
  text-transform:uppercase; font-weight:500; cursor:pointer; transition:all .3s ease;
  border:1px solid var(--gold); display:inline-block;
}
body.lang-ar .btn{ letter-spacing:0.02em; text-transform:none; font-weight:700; }
.btn-solid{ background:var(--gold); color:#0a0a09; }
.btn-solid:hover{ background:var(--gold-light); border-color:var(--gold-light); }
.btn-outline{ background:transparent; color:var(--gold); }
.btn-outline:hover{ background:rgba(201,161,60,0.1); }

/* ---------- home quick links ---------- */
.quick-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; margin-top:20px; }
.quick-card{
  background:var(--bg-card); border:1px solid var(--line); padding:38px 30px;
  transition:transform .3s ease, border-color .3s ease;
}
.quick-card:hover{ transform:translateY(-6px); border-color:var(--gold); }
.quick-card h3{ font-size:1.2rem; color:var(--gold-light); margin-bottom:12px; }
.quick-card p{ color:var(--text-muted); font-size:0.92rem; line-height:1.8; font-weight:300; margin-bottom:18px; }
body.lang-ar .quick-card p{ font-weight:400; }
.quick-card a{ color:var(--gold); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; }
body.lang-ar .quick-card a{ letter-spacing:0.02em; text-transform:none; font-weight:600; }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-grid p{ color:var(--text-muted); font-size:1.05rem; line-height:2; font-weight:300; }
body.lang-ar .about-grid p{ font-weight:400; line-height:2.2; }
.about-visual{
  aspect-ratio:1/1; border:1px solid var(--line); position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(201,161,60,0.06), transparent 60%);
}
.about-visual .center-mark{ width:70%; height:70%; border:1px solid var(--gold-dim); position:relative; }
.about-visual .center-mark img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38%; opacity:0.9;
}

/* ---------- services ---------- */
.services-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:20px; }
.service-card{
  background:var(--bg-card); border:1px solid var(--line); padding:48px 40px;
  transition:transform .35s ease, border-color .35s ease;
}
.service-card:hover{ transform:translateY(-6px); border-color:var(--gold); }
.service-num{ color:var(--gold-dim); font-family:var(--font-display-en); font-size:0.9rem; letter-spacing:0.15em; margin-bottom:22px; display:block; }
.service-card h3{ font-size:1.5rem; margin-bottom:18px; color:var(--gold-light); }
.service-card p{ color:var(--text-muted); line-height:1.9; font-weight:300; font-size:0.98rem; }
body.lang-ar .service-card p{ font-weight:400; }

/* ---------- portfolio ---------- */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:20px; }
.portfolio-item{
  aspect-ratio:16/10; border:1px solid var(--line); background:var(--bg-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  position:relative; overflow:hidden;
}
.portfolio-item .play-mark{
  width:46px; height:46px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.portfolio-item .play-mark svg{ width:14px; height:14px; fill:var(--gold); margin-left:2px; }
.portfolio-item span{ color:var(--text-muted); font-size:0.8rem; letter-spacing:0.08em; }
.portfolio-note{
  margin-top:30px; color:var(--text-muted); font-size:0.9rem; font-weight:300;
  border-left:2px solid var(--gold-dim); padding-left:16px;
}
body.lang-ar .portfolio-note{ border-left:none; border-right:2px solid var(--gold-dim); padding-left:0; padding-right:16px; font-weight:400; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contact-list{ list-style:none; margin-top:10px; }
.contact-list li{ padding:20px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; }
.contact-list .ic{ width:20px; height:20px; fill:var(--gold); flex-shrink:0; }
.contact-list a{ color:var(--text); font-size:1.05rem; transition:color .25s ease; }
.contact-list a:hover{ color:var(--gold); }
.contact-label{ display:block; font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
body.lang-ar .contact-label{ letter-spacing:0.03em; }
.whatsapp-btn{
  display:inline-flex; align-items:center; gap:12px; margin-top:36px;
  background:var(--gold); color:#0a0a09; padding:16px 32px; border-radius:2px;
  font-weight:600; font-size:0.9rem; letter-spacing:0.06em;
}
.whatsapp-btn:hover{ background:var(--gold-light); }
.whatsapp-btn svg{ width:18px; height:18px; fill:#0a0a09; }
.contact-intro{ color:var(--text-muted); font-size:1rem; line-height:1.9; font-weight:300; margin-bottom:10px; max-width:480px; }
body.lang-ar .contact-intro{ font-weight:400; }

/* ---------- footer ---------- */
footer{
  padding:38px 5vw; text-align:center; border-top:1px solid var(--line);
  color:var(--text-muted); font-size:0.8rem; letter-spacing:0.04em;
}
footer .f-logo{ height:26px; width:26px; object-fit:contain; margin:0 auto 14px; opacity:0.85; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.show{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}

@media (max-width: 860px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .services-grid{ grid-template-columns:1fr; }
  .quick-grid{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr 1fr; }
  section{ padding:90px 6vw; }
}
@media (max-width: 520px){
  .portfolio-grid{ grid-template-columns:1fr; }
  .hero-inner{ padding:40px 12px; }
}