:root{
  --black:#0b0b0d;
  --charcoal:#151519;
  --charcoal2:#1c1c21;
  --gold:#c9a24b;
  --gold-bright:#e8c468;
  --cream:#f0eee8;
  --muted:rgba(240,238,232,0.6);
  --line:rgba(201,162,75,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  font-weight:300;
  line-height:1.65;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* header */
header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6vw;
  background:rgba(11,11,13,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,0.35); border-bottom-color:rgba(201,162,75,0.3);}
header{transition:box-shadow .3s, border-color .3s;}

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index:200; transition:width .1s linear;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:34px; width:auto;}
.brand-text{font-family:'Space Grotesk',sans-serif; font-size:0.98rem; letter-spacing:0.06em; color:var(--cream); font-weight:600;}
nav{display:flex; gap:34px; font-size:0.82rem; letter-spacing:0.04em;}
nav a{opacity:0.65; transition:opacity .25s,color .25s;}
nav a:hover, nav a.active{opacity:1; color:var(--gold-bright);}
.nav-cta{
  border:1px solid var(--gold); color:var(--gold-bright) !important;
  padding:9px 20px; border-radius:2px; opacity:1 !important;
  font-size:0.78rem; letter-spacing:0.06em;
  transition:background .25s,color .25s;
}
.nav-cta:hover{background:var(--gold); color:var(--black) !important;}

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; z-index:200;
}
.nav-toggle span{width:22px; height:2px; background:var(--cream); transition:transform .3s, opacity .3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* generic sections */
section{padding:100px 6vw;}
.eyebrow{
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px; display:block;
}
.section-head{max-width:640px; margin:0 auto 56px;}
.section-head.center{text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem); color:var(--cream);}
.section-head p{margin-top:14px; color:var(--muted); font-size:1rem;}

.btn{
  display:inline-block; padding:14px 30px;
  border:1px solid var(--gold); color:var(--gold-bright);
  font-size:0.85rem; letter-spacing:0.06em; border-radius:2px;
  transition:background .25s,color .25s;
}
.btn:hover{background:var(--gold); color:var(--black);}
.btn.solid{background:var(--gold); color:var(--black);}
.btn.solid:hover{background:var(--gold-bright);}

/* hero (page headers) */
.page-hero{
  padding:160px 6vw 90px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,162,75,0.08), transparent 65%);
  border-bottom:1px solid var(--line);
}
.page-hero .arabic{color:var(--gold); font-size:1rem; letter-spacing:0.08em; margin-bottom:14px;}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4.2rem);}
.page-hero p{max-width:560px; margin:20px auto 0; color:var(--muted);}

footer{
  padding:56px 6vw 40px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;
  max-width:1200px; margin:0 auto 40px;
}
.footer-grid h4{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:16px;}
.footer-grid .brand{margin-bottom:14px;}
.footer-grid p{color:var(--muted); font-size:0.9rem; max-width:320px;}
.footer-links a{display:block; color:var(--muted); font-size:0.9rem; margin-bottom:10px; transition:color .2s;}
.footer-links a:hover{color:var(--gold-bright);}
.footer-bottom{
  max-width:1200px; margin:0 auto; padding-top:24px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.78rem; color:var(--muted);
}

@media (max-width:820px){
  .nav-toggle{display:flex;}
  nav{
    position:fixed; inset:0 0 0 auto; top:0; right:0;
    width:min(78vw,320px); height:100vh;
    background:var(--charcoal); border-left:1px solid var(--line);
    flex-direction:column; gap:0; padding:100px 32px 40px;
    transform:translateX(100%); transition:transform .35s ease;
  }
  nav.open{transform:translateX(0);}
  nav a{padding:14px 0; border-bottom:1px solid var(--line); opacity:0.85; font-size:0.95rem;}
  nav .nav-cta{margin-top:20px; text-align:center; border-bottom:1px solid var(--gold);}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  section{padding:72px 6vw;}
  .page-hero{padding:120px 6vw 60px;}
}
@media (max-width:480px){
  section{padding:56px 5vw;}
  .btn{padding:13px 22px; font-size:0.8rem;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

/* nav backdrop for mobile menu */
.nav-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
  z-index:90; opacity:0; transition:opacity .3s;
}
.nav-backdrop.open{display:block; opacity:1;}

/* scroll reveal */
.reveal{
  opacity:0; transform:translateY(28px) scale(0.98);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}