
:root{
  --purple:#5a3978;
  --purple-deep:#2b1d37;
  --gold:#c79a61;
  --gold-light:#ddba87;
  --ink:#171417;
  --paper:#f6f2ed;
  --muted:#aaa1aa;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#171417;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body.rtl-page{font-family:'Almarai',Tahoma,Arial,sans-serif}
a{text-decoration:none}
.smart-nav{background:rgba(18,14,20,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);padding:.75rem 0}
.brand-wrap img{width:190px;height:54px;object-fit:cover;object-position:center;background:#201a23;border-radius:2px}
.navbar .nav-link{color:#eee!important;font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.rtl-page .navbar .nav-link{text-transform:none;letter-spacing:0;font-size:.92rem}
.navbar .nav-link:hover,.navbar .nav-link.active,.active-lang{color:var(--gold)!important}
.lang-link{color:#ddd;font-size:.82rem}
.btn-outline-brand{border:1px solid var(--gold);color:#fff;border-radius:0;padding:.68rem 1.35rem}
.btn-outline-brand:hover,.btn-brand{background:var(--gold);border-color:var(--gold);color:#171417}
.btn-brand{border-radius:0;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.9rem 1.25rem}
.rtl-page .btn-brand{text-transform:none;letter-spacing:0}
.hero-section{min-height:100vh;position:relative;background:
radial-gradient(circle at 80% 40%,rgba(90,57,120,.36),transparent 34%),
linear-gradient(120deg,#110e12 0%,#1b1520 49%,#2b1d37 100%);overflow:hidden}
.hero-section:after{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 52%,rgba(0,0,0,.1) 100%),
url('../img/hero.jpg') center/cover no-repeat;opacity:.54;mix-blend-mode:screen}
.rtl-page .hero-section:after{transform:scaleX(-1)}
.hero-content{position:relative;z-index:2}
.hero-inner{min-height:100vh;display:flex;align-items:center;padding-top:92px}
.eyebrow,.section-tag{color:var(--gold);font-weight:800;font-size:.73rem;letter-spacing:.23em;text-transform:uppercase}
.rtl-page .eyebrow,.rtl-page .section-tag{letter-spacing:.04em;text-transform:none}
.display-hero{font-size:clamp(4rem,8vw,8.5rem);line-height:.84;font-weight:900;letter-spacing:-.055em;margin:1.1rem 0}
.display-hero span,.section-title span,.statement-section span,.contact-section h2 span{color:var(--gold)}
.rtl-page .display-hero{font-size:clamp(3.4rem,7vw,7.5rem);letter-spacing:-.03em;line-height:1}
.hero-kicker{color:var(--gold-light);font-weight:700;letter-spacing:.35em;text-transform:uppercase}
.rtl-page .hero-kicker{letter-spacing:.08em;text-transform:none}
.hero-copy{max-width:580px;color:#ded7df;font-size:1.08rem;line-height:1.75}
.hero-brand-card{position:absolute;right:6%;bottom:11%;z-index:3;background:rgba(255,255,255,.95);padding:1.1rem 1.4rem;width:min(420px,38vw);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.rtl-page .hero-brand-card{right:auto;left:6%}
.hero-brand-card img{width:100%;display:block}
.stats-strip{background:var(--purple);border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.stat{padding:1.55rem 1.8rem;display:flex;align-items:center;gap:1rem;border-inline-end:1px solid rgba(255,255,255,.12)}
.stat i{color:var(--gold-light);font-size:1.55rem}.stat strong{display:block;font-size:1.55rem}.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#e4dae8}.rtl-page .stat span{text-transform:none;letter-spacing:0}
.section-pad{padding:110px 0}
.about-section{background:var(--paper);color:var(--ink)}
.section-title{font-size:clamp(3.2rem,7vw,7rem);line-height:.9;font-weight:900;letter-spacing:-.04em}
.section-title.small-title{font-size:clamp(2.5rem,5vw,4.2rem)}
.lead-copy{font-size:1.3rem;line-height:1.8;color:#554e57}
.text-link{display:inline-flex;gap:.6rem;align-items:center;color:var(--purple);font-weight:800;margin-top:1rem}
.services-section{background:#171417}
.service-card{height:100%;min-height:310px;border:1px solid rgba(199,154,97,.28);padding:2rem;position:relative;background:linear-gradient(145deg,rgba(90,57,120,.14),rgba(255,255,255,.01));transition:.35s}
.service-card:hover{transform:translateY(-6px);border-color:var(--gold);background:linear-gradient(145deg,rgba(90,57,120,.28),rgba(199,154,97,.05))}
.service-card>i{font-size:2.2rem;color:var(--gold)}
.service-card h3{font-size:1.25rem;margin:1.7rem 0 .7rem;text-transform:uppercase}.rtl-page .service-card h3{text-transform:none}
.service-card p{color:#afa5b0;line-height:1.65}
.service-card a{position:absolute;bottom:1.8rem;color:var(--gold);font-weight:700}
.projects-section{background:#211824}
.project-card{position:relative;min-height:350px;background-size:cover;background-position:center;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.project-large{min-height:715px}.project-wide{min-height:350px}
.project-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,10,20,.92) 0%,rgba(18,10,20,.05) 70%);transition:.35s}
.project-card:hover:before{background:linear-gradient(0deg,rgba(90,57,120,.92) 0%,rgba(18,10,20,.08) 70%)}
.project-meta{position:absolute;left:24px;bottom:22px;z-index:2}.rtl-page .project-meta{left:auto;right:24px}
.project-meta span{color:var(--gold-light);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.rtl-page .project-meta span{text-transform:none;letter-spacing:0}
.project-meta h3{font-weight:800;margin:.25rem 0 0}
.statement-section{padding:110px 0;background:var(--gold);color:var(--ink)}
.statement-section .section-tag{color:var(--purple)}
.statement-section h2{font-size:clamp(4rem,9vw,9rem);font-weight:900;line-height:.84;letter-spacing:-.05em}
.statement-section h2 span{color:var(--purple)}
.contact-section{background:var(--purple);color:#fff}
.contact-section .section-tag{color:var(--gold-light)}
.contact-section h2{font-size:clamp(3.5rem,8vw,7.5rem);font-weight:900;line-height:.88;letter-spacing:-.05em}
.contact-section h2 span{color:var(--gold-light)}
.contact-line{border-top:1px solid rgba(255,255,255,.18);display:flex;gap:2rem;flex-wrap:wrap;color:#f1e8f5}
.contact-line i{color:var(--gold-light);margin-right:.45rem}.rtl-page .contact-line i{margin-right:0;margin-left:.45rem}
.site-footer{background:#120e14;padding:28px 0}.site-footer img{width:180px;height:48px;object-fit:cover;object-position:center}
.socials{display:flex;gap:.8rem}.socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff}.socials a:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:991.98px){
 .hero-inner{padding-top:120px;padding-bottom:150px}.hero-brand-card{width:70%;right:8%;bottom:5%}.rtl-page .hero-brand-card{left:8%;right:auto}
 .project-large{min-height:500px}.section-pad{padding:80px 0}
}
@media(max-width:575.98px){
 .brand-wrap img{width:155px;height:44px}.hero-brand-card{width:82%}.display-hero{font-size:3.8rem}.stat{padding:1.2rem}.stat strong{font-size:1.2rem}.stat span{font-size:.62rem}
}

/* Branch and contact enhancements */
.contact-line a{transition:.25s ease}
.contact-line a:hover{color:var(--gold-light)!important}
.contact-line .bi-buildings,
.contact-line .bi-pin-map,
.contact-line .bi-linkedin{color:var(--gold-light)}

/* Instagram-powered project portfolio */
.instagram-projects{background:#211824}
.ig-project-card{
  height:100%;
  border:1px solid rgba(199,154,97,.28);
  background:#171417;
  overflow:hidden;
  transition:.3s ease;
}
.ig-project-card:hover{
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.ig-embed-wrap{
  min-height:470px;
  background:linear-gradient(145deg,rgba(90,57,120,.25),rgba(199,154,97,.08));
  overflow:hidden;
}
.ig-embed-wrap .instagram-media{
  min-width:100%!important;
  width:100%!important;
  margin:0!important;
  border:0!important;
}
.ig-project-meta{padding:1.35rem 1.4rem 1.5rem}
.ig-project-meta span{
  color:var(--gold-light);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rtl-page .ig-project-meta span{letter-spacing:0;text-transform:none}
.ig-project-meta h3{font-size:1.1rem;font-weight:800;margin:.45rem 0 .9rem}
.ig-project-meta a{color:var(--gold);font-weight:700;font-size:.86rem}
@media(max-width:767.98px){
  .ig-embed-wrap{min-height:420px}
}

/* English typography */
body:not(.rtl-page){
  font-family:'Inter',Arial,sans-serif;
}
body:not(.rtl-page) .display-hero,
body:not(.rtl-page) .section-title,
body:not(.rtl-page) .statement-section h2,
body:not(.rtl-page) .contact-section h2,
body:not(.rtl-page) h3,
body:not(.rtl-page) .navbar .nav-link,
body:not(.rtl-page) .btn{
  font-family:'Montserrat','Inter',Arial,sans-serif;
}

/* Local projects gallery */
.local-projects{background:#211824}
.projects-intro{color:#bdb3bf;max-width:760px;font-size:1.05rem;line-height:1.8}
.local-project-card{
  position:relative;
  height:100%;
  background:#171417;
  border:1px solid rgba(199,154,97,.22);
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.local-project-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 20px 55px rgba(0,0,0,.32);
}
.project-image-wrap{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#111;
}
.project-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s ease;
}
.local-project-card:hover .project-image-wrap img{transform:scale(1.045)}
.project-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(23,20,23,.35),rgba(23,20,23,0) 55%);
  pointer-events:none;
}
.local-project-meta{padding:1.25rem 1.35rem 1.45rem}
.local-project-meta span{
  color:var(--gold-light);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rtl-page .local-project-meta span{letter-spacing:0;text-transform:none}
.local-project-meta h3{
  margin:.45rem 0 0;
  font-size:1.15rem;
  font-weight:800;
}
@media(max-width:767.98px){
  .project-image-wrap{aspect-ratio:16/11}
}

/* Clients section */
.clients-section{background:var(--paper);color:var(--ink)}
.clients-intro{max-width:760px;color:#665e68;font-size:1.05rem;line-height:1.8}
.client-logo-card{
  background:#fff;
  border:1px solid rgba(90,57,120,.14);
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  transition:.3s ease;
  box-shadow:0 10px 30px rgba(30,20,35,.05);
}
.client-logo-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 18px 40px rgba(30,20,35,.10);
}
.client-logo-card img{
  max-width:100%;
  max-height:130px;
  object-fit:contain;
  mix-blend-mode:multiply;
}

/* All Clients - ordered reference layout */
.clients-section{
  background:var(--paper);
  color:var(--ink);
}
.clients-intro{
  max-width:820px;
  color:#665e68;
  font-size:1.05rem;
  line-height:1.9;
}
.client-logo-card{
  background:#fff;
  border:1px solid rgba(90,57,120,.22);
  border-radius:12px;
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
  box-shadow:0 7px 22px rgba(30,20,35,.045);
}
.client-logo-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 16px 34px rgba(30,20,35,.10);
}
.client-logo-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
@media (max-width:575.98px){
  .client-logo-card{height:108px;padding:10px;border-radius:10px}
}

.project-filter{border:1px solid rgba(199,154,97,.45);background:transparent;color:#fff;padding:.7rem 1.1rem;font-weight:700}
.project-filter:hover,.project-filter.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.project-item.is-hidden{display:none!important}
.hero-brand-card{display:none!important}

/* Full transparent logo display */
.navbar-brand{
  display:flex;
  align-items:center;
  overflow:visible !important;
}
.navbar-brand img,
.footer-brand img,
.brand-logo img,
.site-logo,
.logo img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:72px !important;
  object-fit:contain !important;
  object-position:center !important;
  clip-path:none !important;
  border-radius:0 !important;
  background:transparent !important;
}
@media (max-width: 767.98px){
  .navbar-brand img,
  .site-logo,
  .logo img{
    max-height:56px !important;
    max-width:min(72vw, 330px) !important;
  }
}
