@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --black:#090806;
  --black2:#110e0b;
  --gold:#b88b4d;
  --gold-light:#dfb56d;
  --ivory:#f5efe5;
  --ink:#1d1915;
  --muted:#bdaf9e;
  --line:rgba(190,145,77,.42);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:var(--black);color:#fff;font-family:"Cairo",Arial,sans-serif}
html[lang=en] body{font-family:"Montserrat",Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
img{display:block}
.container{width:min(var(--max),calc(100% - 38px));margin:auto}

/* HEADER */
.site-header{
  height:88px;
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  background:rgba(7,6,5,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(189,142,72,.25)
}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand img{width:115px;height:76px;object-fit:cover;object-position:left top}
.desktop-nav{display:flex;align-items:center;gap:40px}
.desktop-nav a{color:#ddcfbd;font-size:.9rem;position:relative;padding:31px 0 25px}
.desktop-nav a.active::after{content:"";position:absolute;bottom:13px;left:14%;right:14%;height:1px;background:var(--gold-light)}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang-btn,.menu-btn{background:transparent;border:0;color:#e7d8c4}
.lang-btn{font-family:"Montserrat";font-size:.78rem;letter-spacing:.14em}
.menu-btn{display:none;width:42px;height:42px;padding:9px}
.menu-btn span{display:block;width:22px;height:1px;background:var(--gold);margin:5px 0}
.mobile-menu{display:none;position:absolute;top:88px;left:0;right:0;background:#090806;border-top:1px solid var(--line);padding:12px 22px 22px}
.mobile-menu.open{display:grid}
.mobile-menu a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#e4d6c4}

/* HERO */
.hero{height:720px;margin-top:88px;position:relative;overflow:hidden}
.hero-photo{position:absolute;inset:0 0 0 35%;background:url("assets/hero-venue.webp") center/cover no-repeat}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.04))}
html[dir=rtl] .hero-photo::after{background:linear-gradient(270deg,rgba(0,0,0,.38),rgba(0,0,0,.04))}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#070605 0%,rgba(7,6,5,.94) 25%,rgba(7,6,5,.54) 48%,rgba(7,6,5,.05) 72%)}
html[dir=rtl] .hero-shade{background:linear-gradient(270deg,#070605 0%,rgba(7,6,5,.94) 25%,rgba(7,6,5,.54) 48%,rgba(7,6,5,.05) 72%)}
.hero-inner{height:100%;position:relative;display:flex;align-items:center}
.hero-copy{width:48%;max-width:560px}
.hero-logo{width:210px;height:155px;object-fit:cover;object-position:left top;margin-bottom:8px}
.hero h1{font-size:clamp(2.4rem,4vw,4.3rem);font-weight:500;line-height:1.25;margin:0 0 14px}
.hero p{color:#d3c5b4;line-height:2;font-size:1rem;margin:0 0 30px;max-width:520px}
.outline-btn{height:48px;min-width:160px;padding:0 18px;border:1px solid #a27b48;color:#e4d3bc;background:transparent;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;cursor:pointer;transition:.25s}
.outline-btn:hover{background:var(--gold);color:#0d0a07}
.outline-btn b{font-weight:400}

/* SERVICES */
.services-strip{background:var(--ivory);color:#2b241d}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);min-height:205px}
.service-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.service-item:not(:last-child){border-inline-end:1px solid #d7c9b6}
.icon svg{width:54px;height:54px;fill:none;stroke:#987243;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service-item h3{margin:12px 0 4px;font-size:1rem;font-weight:600}
.service-item span{font-family:"Montserrat";font-size:.56rem;letter-spacing:.16em;color:#75695c}
.service-item::after{content:"";width:34px;height:1px;background:#a87d48;margin-top:14px}

/* ABOUT */
.about{height:530px;position:relative;overflow:hidden}
.about-photo{position:absolute;inset:0 0 0 46%;background:url("assets/about-table.webp") center/cover no-repeat}
.about-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080706 0%,rgba(8,7,6,.98) 34%,rgba(8,7,6,.67) 55%,rgba(8,7,6,.08) 78%)}
html[dir=rtl] .about-shade{background:linear-gradient(270deg,#080706 0%,rgba(8,7,6,.98) 34%,rgba(8,7,6,.67) 55%,rgba(8,7,6,.08) 78%)}
.about-inner{height:100%;display:flex;align-items:center;position:relative}
.about-copy{max-width:560px;width:48%}
.kicker{font-family:"Montserrat";font-size:.63rem;letter-spacing:.38em;color:#c69a5d;margin:0 0 14px}
.about h2{font-size:2.35rem;font-weight:500;margin:0 0 16px}
.about-copy>p:not(.kicker){color:#c9bbab;line-height:2;font-size:.96rem;margin:0 0 26px}

/* PORTFOLIO */
.portfolio{background:var(--ivory);color:var(--ink);padding:55px 0 48px}
.portfolio-title{display:flex;align-items:center;justify-content:center;gap:22px;text-align:center;margin-bottom:30px}
.portfolio-title i{width:70px;height:1px;background:#a7855a}
.portfolio-title h2{font-size:1.95rem;margin:0;font-weight:600}
.portfolio-title p{font-size:.82rem;color:#7d7163;margin:4px 0 0}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.work-grid figure{margin:0;height:190px;overflow:hidden;position:relative;background:#111}
.work-grid img{width:100%;height:100%;object-fit:cover;transition:.35s}
.work-grid figure:hover img{transform:scale(1.04)}
.work-grid figcaption{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;padding:28px 12px 10px;font-size:.75rem;opacity:0;transition:.25s}
.work-grid figure:hover figcaption{opacity:1}
.more-btn{height:44px;min-width:185px;margin:30px auto 0;border:1px solid #8f7b64;background:transparent;color:#2b241d;display:flex;align-items:center;justify-content:center;gap:22px;cursor:pointer}

/* CTA */
.cta{min-height:180px;position:relative;overflow:hidden;border-top:1px solid #3f2d1d;border-bottom:1px solid #4b3420;background:#080706}
.cta-art{position:absolute;inset:0 0 0 43%;background:url("assets/cta-planet.webp") center/cover no-repeat;opacity:.95}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090806 0%,rgba(9,8,6,.94) 43%,rgba(9,8,6,.18) 70%)}
html[dir=rtl] .cta::after{background:linear-gradient(270deg,#090806 0%,rgba(9,8,6,.94) 43%,rgba(9,8,6,.18) 70%)}
.cta-inner{min-height:180px;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:25px}
.cta h2{font-size:1.75rem;font-weight:400;color:#dbcdbb;margin:0}

/* FOOTER */
.footer{background:#060504;border-top:1px solid rgba(184,139,77,.32)}
.footer-inner{min-height:100px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-family:"Montserrat";font-size:.62rem;color:#a99986}
.socials{display:flex;gap:18px}
.socials a{font-size:.9rem;color:#be9156}
.footer-brand{letter-spacing:.45em;color:#aa8a63}
.copyright{text-align:end}

/* DIALOG */
.contact-dialog{width:min(92vw,510px);border:1px solid rgba(184,139,77,.55);background:#0a0806;color:#eee3d4;padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.contact-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
.contact-dialog img{width:135px;height:95px;object-fit:cover;object-position:left top;margin:0 auto}
.contact-dialog h3{text-align:center;font-size:1.6rem;margin:5px 0 8px}
.contact-dialog>p{text-align:center;color:#bfb09f;line-height:1.8}
.close-btn{position:absolute;left:12px;top:7px;background:none;border:0;color:#c59a60;font-size:28px;cursor:pointer}
#contactForm{display:grid;gap:11px;margin-top:20px}
#contactForm input,#contactForm textarea{width:100%;border:1px solid rgba(184,139,77,.35);background:#100d0a;color:#eee;padding:12px 13px;outline:none}
#contactForm button{height:46px;border:1px solid #a27b48;background:#b88b4d;color:#100d09;cursor:pointer;font-weight:600}
.contact-dialog small{display:block;text-align:center;color:#8f8274;margin-top:12px;line-height:1.6}
.toast{position:fixed;z-index:300;left:50%;bottom:24px;transform:translate(-50%,18px);background:#17120d;color:#eadbc8;border:1px solid rgba(184,139,77,.55);padding:11px 16px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* MOBILE */
@media(max-width:900px){
  .desktop-nav{display:none}
  .menu-btn{display:block}
  .hero{height:690px}
  .hero-photo{inset:0;background-position:center}
  .hero-shade,html[dir=rtl] .hero-shade{background:linear-gradient(to top,#060504 0%,rgba(6,5,4,.88) 42%,rgba(6,5,4,.18) 75%)}
  .hero-inner{align-items:flex-end;padding-bottom:45px}
  .hero-copy{width:100%;max-width:590px}
  .hero-logo{width:175px;height:130px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .service-item{min-height:170px}
  .service-item:nth-child(-n+2){border-bottom:1px solid #d7c9b6}
  .service-item:nth-child(2){border-inline-end:0}
  .about{height:590px}
  .about-photo{inset:0;background-position:center}
  .about-shade,html[dir=rtl] .about-shade{background:linear-gradient(to top,#070605 0%,rgba(7,6,5,.96) 48%,rgba(7,6,5,.28) 82%)}
  .about-inner{align-items:flex-end;padding-bottom:45px}
  .about-copy{width:100%;max-width:620px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr;gap:14px;text-align:center;padding:24px 0}
  .copyright{text-align:center}
}
@media(max-width:560px){
  .site-header{height:72px}
  .nav-wrap{height:72px}
  .brand img{width:92px;height:60px}
  .mobile-menu{top:72px}
  .hero{margin-top:72px;height:640px}
  .hero h1{font-size:2.15rem}
  .hero p{font-size:.9rem}
  .hero-logo{width:145px;height:105px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .service-item h3{font-size:.85rem}
  .service-item span{font-size:.48rem}
  .icon svg{width:45px;height:45px}
  .about h2{font-size:1.9rem}
  .work-grid{gap:9px}
  .work-grid figure{height:135px}
  .cta-inner{flex-direction:column;justify-content:center;text-align:center;padding:25px 0}
  .cta h2{font-size:1.4rem}
}