/* Al Sahary — shared styles */
:root{
  --navy:#16294d;
  --navy-deep:#0e1c38;
  --gold:#c9a02e;
  --gold-light:#e6c66b;
  --cream:#f6f2e9;
  --cream-dark:#ece5d5;
  --ink:#22304a;
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Almarai',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.9;
  font-size:1.03rem;
}
h1,h2,h3{font-family:'Amiri',serif;color:var(--navy);line-height:1.5;font-weight:700}
a{color:var(--navy);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* language switching */
html[dir="rtl"] .en{display:none}
html[dir="ltr"] .ar{display:none}
html[dir="ltr"] body{font-family:'Almarai','Segoe UI',sans-serif}

/* header */
header{
  background:var(--cream);
  border-bottom:1px solid var(--cream-dark);
  position:sticky;top:0;z-index:50;
}
.topbar{display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:52px;height:auto;border-radius:50%}
.brand .name{font-family:'Amiri',serif;font-weight:700;font-size:1.25rem;color:var(--navy)}
nav{margin-inline-start:auto;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
nav a{font-size:.95rem;padding:.2rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.lang-btn{
  border:1px solid var(--gold);color:var(--navy);background:transparent;
  font-family:inherit;font-size:.85rem;padding:.35rem .9rem;border-radius:2rem;cursor:pointer;
}
.lang-btn:hover{background:var(--gold);color:#fff}

/* hero */
.hero{background:var(--navy-deep);color:var(--cream);position:relative;overflow:hidden}
.hero .wrap{padding:4.5rem 1.25rem 6.5rem;position:relative;z-index:1}
.hero h1{color:var(--gold-light);font-size:clamp(1.9rem,4.5vw,3.1rem);max-width:22ch}
.hero p{max-width:58ch;margin-top:1.2rem;color:#e8e3d5;font-size:1.1rem}
.hero .cta{
  display:inline-block;margin-top:2rem;background:var(--gold);color:var(--navy-deep);
  font-weight:700;padding:.75rem 2.2rem;border-radius:2rem;
}
.hero .cta:hover{background:var(--gold-light)}

/* dune wave divider (echoes the logo) */
.dune{display:block;width:100%;height:70px;margin-top:-1px}
.dune.flip{transform:scaleY(-1)}

/* sections */
section{padding:3.5rem 0}
section h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1.4rem;position:relative;padding-bottom:.6rem}
section h2::after{
  content:"";position:absolute;bottom:0;inset-inline-start:0;width:64px;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;
}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.5rem}
.service{
  background:#fff;border:1px solid var(--cream-dark);border-top:3px solid var(--gold);
  padding:1.4rem 1.3rem;border-radius:.4rem;
}
.service h3{font-size:1.15rem;margin-bottom:.5rem}
.service p{font-size:.95rem;color:#4a5568}

.band{background:var(--navy);color:var(--cream)}
.band h2{color:var(--gold-light)}
.band h2::after{background:var(--gold)}
.band p{color:#dcd6c6}

/* content pages (about / privacy / terms) */
.page-head{background:var(--navy-deep);color:var(--cream);padding:2.8rem 0 3.6rem}
.page-head h1{color:var(--gold-light);font-size:clamp(1.7rem,4vw,2.5rem)}
.prose{max-width:76ch;padding:2.5rem 0 3.5rem}
.prose h2{font-size:1.35rem;margin:2rem 0 .7rem}
.prose h2::after{width:44px}
.prose p,.prose li{margin-bottom:.8rem}
.prose ul{padding-inline-start:1.4rem}
.prose .updated{color:#6b7280;font-size:.9rem;margin-bottom:1.5rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;padding:2.5rem 0 3.5rem}
.contact-card{background:#fff;border:1px solid var(--cream-dark);border-radius:.4rem;padding:1.8rem}
.contact-card dt{font-weight:700;color:var(--navy);margin-top:1rem}
.contact-card dt:first-child{margin-top:0}
.contact-card dd{color:#4a5568}
form label{display:block;font-weight:700;margin:1rem 0 .3rem;color:var(--navy)}
form input,form textarea{
  width:100%;padding:.65rem .8rem;border:1px solid var(--cream-dark);border-radius:.35rem;
  font-family:inherit;font-size:1rem;background:#fff;
}
form input:focus,form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
form button{
  margin-top:1.3rem;background:var(--navy);color:#fff;border:none;font-family:inherit;
  font-weight:700;font-size:1rem;padding:.7rem 2.2rem;border-radius:2rem;cursor:pointer;
}
form button:hover{background:var(--gold);color:var(--navy-deep)}

/* footer */
footer{background:var(--navy-deep);color:#cfc9b8;font-size:.92rem}
.foot{max-width:var(--max);margin:0 auto;padding:2.5rem 1.25rem 2rem;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.foot h3{color:var(--gold-light);font-size:1.05rem;margin-bottom:.7rem}
.foot a{color:#cfc9b8}
.foot a:hover{color:var(--gold-light)}
.foot ul{list-style:none}
.foot li{margin-bottom:.4rem}
.copy{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:1rem;font-size:.85rem}

@media(max-width:760px){
  .topbar{flex-wrap:wrap}
  nav{gap:.9rem;font-size:.9rem}
  .contact-grid,.foot{grid-template-columns:1fr}
  .hero .wrap{padding:3rem 1.25rem 5rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}