:root{
  --velvet:#08281e;
  --velvet-deep:#051a14;
  --velvet-lift:#0d3a2b;
  --copper:#c8915e;
  --copper-hi:#ebc391;
  --copper-lo:#9a6338;
  --marble:#ede6da;
  --marble-line:#d5c8b3;
  --ink:#14231c;
  --ink-soft:#44534b;
  --radius:14px;
  --font-latin-display:"Marcellus", "Times New Roman", serif;
  --font-latin-body:"Montserrat", system-ui, sans-serif;
  --font-ar-display:"Amiri", "Times New Roman", serif;
  --font-ar-body:"Tajawal", system-ui, sans-serif;
  --display:var(--font-latin-display);
  --body:var(--font-latin-body);
}
html[lang="ar"]{ --display:var(--font-ar-display); --body:var(--font-ar-body); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{
  margin:0; background:var(--velvet-deep); color:var(--marble);
  font-family:var(--body); font-size:1rem; line-height:1.7;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; }
:focus-visible{ outline:2px solid var(--copper-hi); outline-offset:3px; }

/* header */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem clamp(1rem,4vw,2.5rem);
  background:rgba(5,26,20,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(200,145,94,.28);
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-inline-end:auto; }
.brand img{ border-radius:50%; border:1px solid var(--copper); }
.brand-name{
  font-family:var(--font-latin-display); font-size:1.35rem; letter-spacing:.14em;
  background:linear-gradient(180deg,var(--copper-hi),var(--copper) 55%,var(--copper-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-name small{ font-family:var(--font-latin-body); font-size:.62rem; letter-spacing:.5em; display:block; line-height:1; margin-top:.15rem; }
.nav{ display:none; gap:1.6rem; }
.nav a{ text-decoration:none; font-size:.95rem; color:var(--marble); opacity:.85; }
.nav a:hover{ opacity:1; color:var(--copper-hi); }
.langs{ display:flex; border:1px solid rgba(200,145,94,.5); border-radius:999px; overflow:hidden; }
.langs button{
  font:inherit; font-size:.85rem; color:var(--marble); background:none; border:0;
  padding:.35rem .8rem; cursor:pointer; min-height:36px;
}
.langs button[aria-pressed="true"]{ background:var(--copper); color:var(--velvet-deep); font-weight:600; }
@media (min-width:760px){ .nav{ display:flex; } }

/* hero */
.hero{
  display:grid; gap:2.2rem; align-items:center;
  padding:clamp(1.5rem,5vw,4rem) clamp(1rem,4vw,2.5rem) clamp(2.5rem,6vw,5rem);
  max-width:1180px; margin:0 auto;
  background:radial-gradient(60% 60% at 70% 30%, rgba(13,58,43,.9), transparent 70%);
}
.hero-logo{ justify-self:center; width:min(100%,460px); }
.arch{
  padding:9px; border:1px solid var(--copper);
  border-radius:999px 999px 16px 16px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.arch img{ width:100%; height:auto; border-radius:999px 999px 10px 10px; }
.hero-text h1{ font-size:clamp(2rem,5.2vw,3.4rem); line-height:1.15; color:var(--copper-hi); }
html[lang="ar"] .hero-text h1{ line-height:1.35; }
.hero-text p{ max-width:34rem; margin:1.1rem 0 1.8rem; font-size:1.05rem; opacity:.88; }
.actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.7rem 1.5rem; border-radius:999px;
  text-decoration:none; font-weight:500; font-size:.98rem;
  border:1px solid var(--copper); transition:background .2s,color .2s;
}
.btn-solid{ background:linear-gradient(180deg,var(--copper-hi),var(--copper)); color:var(--velvet-deep); }
.btn-solid:hover{ background:var(--copper-hi); }
.btn-line{ color:var(--copper-hi); }
.btn-line:hover{ background:rgba(200,145,94,.14); }
@media (min-width:900px){
  .hero{ grid-template-columns:1.05fr .95fr; gap:4rem; padding-top:3rem; }
  .hero-text{ order:-1; }
}

/* bands */
.band{ padding:clamp(3rem,7vw,5.5rem) 0; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem); }
.band h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:1.4rem; }
.band h3{ font-size:1.15rem; margin:1.8rem 0 .5rem; }
.marble{ background:var(--marble); color:var(--ink); }
.marble h2,.marble h3{ color:var(--velvet); }
.velvet{ background:linear-gradient(180deg,var(--velvet),var(--velvet-deep)); }
.velvet h2{ color:var(--copper-hi); }

.about{ display:grid; gap:2rem; }
.about p{ max-width:36rem; margin:0; color:var(--ink-soft); }
.about h3{ margin-top:0; }
.makes{ list-style:none; padding:0; margin:0; border-top:1px solid var(--marble-line); }
.makes li{ padding:.65rem 0; border-bottom:1px solid var(--marble-line); }
@media (min-width:860px){ .about{ grid-template-columns:1.1fr .9fr; gap:5rem; } }

/* gallery */
.tabs{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.6rem; margin-bottom:1.4rem; scrollbar-width:thin; }
.tabs button{
  flex:0 0 auto; font:inherit; font-size:.92rem; color:var(--marble);
  background:none; border:1px solid rgba(200,145,94,.45); border-radius:999px;
  padding:.45rem 1.1rem; min-height:40px; cursor:pointer;
}
.tabs button[aria-selected="true"]{ background:var(--copper); color:var(--velvet-deep); border-color:var(--copper); font-weight:600; }
.grid{ columns:2 150px; column-gap:.7rem; }
@media (min-width:760px){ .grid{ columns:3 220px; column-gap:1rem; } }
.grid button{
  display:block; width:100%; padding:0; margin:0 0 .7rem; border:0; background:var(--velvet-lift);
  border-radius:10px; overflow:hidden; cursor:zoom-in; break-inside:avoid;
}
@media (min-width:760px){ .grid button{ margin-bottom:1rem; } }
.grid img{ width:100%; height:auto; transition:transform .4s; }
.grid button:hover img{ transform:scale(1.03); }
.empty{ opacity:.8; }

/* contact */
.contact{ display:grid; gap:2rem; }
.contact-info h3:first-child{ margin-top:0; }
.address{ margin:0 0 .4rem; }
.textlink{ color:var(--copper-lo); font-weight:500; text-underline-offset:4px; word-break:break-all; }
.marble .textlink:hover{ color:var(--velvet); }
.phones{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.phones li{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1rem; background:#f7f2e9; border:1px solid var(--marble-line); border-radius:var(--radius);
}
.phones .label{ display:block; font-size:.8rem; color:var(--ink-soft); }
.phones .num{ font-weight:600; direction:ltr; unicode-bidi:isolate; display:inline-block; }
.phones .btn{ min-height:42px; padding:.4rem 1.1rem; font-size:.9rem; background:var(--velvet); color:var(--copper-hi); border-color:var(--velvet); white-space:nowrap; }
.phones .btn:hover{ background:var(--velvet-lift); }
.map{ min-height:320px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--marble-line); }
.map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }
@media (min-width:900px){ .contact{ grid-template-columns:1fr 1fr; gap:3rem; } .map{ min-height:100%; } }

/* footer + floating */
.foot{ display:flex; align-items:center; justify-content:center; gap:.8rem; padding:1.6rem 1rem 5rem; font-size:.88rem; opacity:.85; background:var(--velvet-deep); }
.foot img{ border-radius:50%; border:1px solid var(--copper); }
.float-wa{
  position:fixed; inset-inline-end:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:30;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--copper-hi),var(--copper)); color:var(--velvet-deep);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

/* lightbox */
.lightbox{
  border:0; padding:0; background:rgba(3,14,10,.96); color:#fff;
  width:100vw; height:100dvh; max-width:none; max-height:none;
}
.lightbox[open]{ display:grid; place-items:center; }
.lightbox::backdrop{ background:rgba(3,14,10,.96); }
#lb-img{ max-width:92vw; max-height:84dvh; width:auto; height:auto; object-fit:contain; border-radius:6px; }
.lb-close,.lb-nav{
  position:absolute; background:rgba(8,40,30,.85); color:var(--copper-hi); border:1px solid var(--copper);
  border-radius:999px; font:inherit; cursor:pointer; min-height:44px; min-width:44px; padding:.4rem 1rem;
}
.lb-close{ top:1rem; inset-inline-end:1rem; }
.lb-nav{ top:50%; transform:translateY(-50%); padding:.4rem .9rem; }
.lb-prev{ left:.6rem; } .lb-next{ right:.6rem; }
.lb-count{ position:absolute; bottom:1rem; margin:0; font-size:.9rem; opacity:.8; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}