/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------- english fonts --------------------------------- */

@font-face{
  font-family:'sitelyregular-en';
  src:url('../fonts/en/SitelyFont-Regular-en.ttf') format('truetype');
  font-weight:500;
}
@font-face{
  font-family:'sitelyregular2-en';
  src:url('../fonts/en/SitelyFont-Regular2-en.ttf') format('truetype');
  font-weight:500;
}
@font-face{
  font-family:'sitelymedium-en';
  src:url('../fonts/en/SitelyFont-Medium-en.ttf') format('truetype');
  font-weight:500;
}

/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------- arabic fonts ---------------------------------- */

@font-face{
  font-family:'SitelyFont-Light-ar';
  src:url('../fonts/ar/SitelyFont-Light-ar.ttf') format('truetype');
  font-weight:500;
}
@font-face{
  font-family:'SitelyFont-Bold-ar';
  src:url('../fonts/ar/SitelyFont-Bold-ar.ttf') format('truetype');
  font-weight:500;
}
@font-face{
  font-family:'SitelyFont-Book-ar';
  src:url('../fonts/ar/SitelyFont-Book-ar.ttf') format('truetype');
  font-weight:500;
}
@font-face{
  font-family:'SitelyFont-Medium-ar';
  src:url('../fonts/ar/SitelyFont-Medium-ar.ttf') format('truetype');
  font-weight:500;
}

/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* -------------------------------------- Base -------------------------------------- */

:root{
  --bg0:#070403;
  --bg1:#0d0705;

  --ink:#f4ede7;
  --muted:rgba(244,237,231,.72);

  --accent:#d2a679;
  --accent2:#8a5a3b;
  --line:rgba(210,166,121,.22);

  --glass:rgba(255,240,230,.06);
  --glass2:rgba(255,240,230,.09);

  --shadow:0 18px 48px rgba(0,0,0,.55);
  --blur:16px;

  --r:22px;
  --wrap:1220px;
}

*{ box-sizing:border-box; }

html,body{ min-height:100%; }

html{
  background: var(--bg0); 
}

body{
  margin:0;
  color:var(--ink);
  font-family:'sitelymedium-en', ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow-x:hidden;

  background: transparent;
  min-height: 100svh;      
  position: relative;
  isolation: isolate;     
}

html[lang="ar"] body{
  font-family:'SitelyFont-Light-ar', ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(1200px 720px at 18% 10%, rgba(210,166,121,.18), transparent 62%),
    radial-gradient(1100px 620px at 84% 18%, rgba(138,90,59,.18), transparent 60%),
    radial-gradient(1200px 880px at 50% 110%, rgba(210,166,121,.12), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));

  background-repeat: no-repeat;
  transform: translateZ(0); /* smoother on some GPUs */
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }

.wrap{
  width:min(var(--wrap), calc(100% - 40px));
  margin:0 auto;
}

.glass{
  background:linear-gradient(180deg,var(--glass2),var(--glass));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}



#bgStars{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;        
  opacity: .55;
}

body::before{ z-index: -3; }


/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* -------------------------------- Navbar ------------------------------- */


.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 0;

  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar{
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform;
}

.topbar.is-hidden{
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}


.topbar .wrap{ display:block; }

.topbar-pill{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;

  padding:10px 12px;
  border-radius:999px;

  border:1px solid rgba(210,166,121,.22);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    rgba(255,240,230,.04);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.05) inset;
}

.nav-center{ justify-content:center; }

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.2px;
}
.brand-dot{
  width:14px;height:14px;border-radius:999px;
  background:radial-gradient(circle at 30% 30%,#fff,var(--accent));
  box-shadow:
    0 0 0 7px rgba(210,166,121,.12),
    0 16px 38px rgba(0,0,0,.35);
}

.brand-logo{
  height:34px;
  width:auto;
  display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;

  border:1px solid rgba(210,166,121,.20);
  background:rgba(0,0,0,.16);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.nav a{
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  color:rgba(244,237,231,.82);
  border:1px solid transparent;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.nav a:hover{
  transform: translateY(-1px);
  background: rgba(255,240,230,.05);
  border-color: rgba(210,166,121,.18);
  color: rgba(244,237,231,.92);
}
.nav a.active{
  background:
    radial-gradient(800px 240px at 30% 0%, rgba(255,255,255,.14), transparent 60%),
    rgba(210,166,121,.16);
  border:1px solid rgba(210,166,121,.30);
  color:rgba(244,237,231,.96);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}
.nav a.muted{ opacity:.85; }

.actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:42px;
  padding:0 14px;

  border-radius:999px;
  font-weight:950;

  border:1px solid rgba(210,166,121,.26);
  background:
    radial-gradient(800px 240px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    rgba(255,240,230,.05);
  color:rgba(244,237,231,.92);

  box-shadow:0 16px 40px rgba(0,0,0,.35);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
html[lang="ar"] .pill{ font-family:'SitelyFont-Light-ar'; }

.pill:hover{
  transform: translateY(-1px);
  background: rgba(210,166,121,.10);
  border-color: rgba(210,166,121,.34);
}
.pill:active{ transform: translateY(0) scale(.99); }

.icon-pill{ width:44px; padding:0; }
.icon-pill i{ font-size:16px; }





/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ----------------------------------- Mobile Nav ----------------------------------- */

.mnav-btn{ display:none; }

@media (max-width: 900px){
  .nav.nav-center{ display:none; }
  .mnav-btn{ display:inline-flex; }
}

.mnav-overlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mnav{
  position: fixed;
  left: 16px;
  right: 16px;
  top: 86px;
  z-index: 9999;

  border-radius: 22px;
  padding: 14px;

  border: 1px solid rgba(210,166,121,.22);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,240,230,.06), rgba(0,0,0,.30));
  box-shadow: 0 30px 120px rgba(0,0,0,.65);

  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.mnav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mnav-title{
  font-weight: 1000;
  color: rgba(244,237,231,.92);
}

.mnav-links{ display:flex; flex-direction:column; gap:10px; }

.mnav-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;

  border: 1px solid rgba(210,166,121,.18);
  background: rgba(0,0,0,.18);
  color: rgba(244,237,231,.90);
  text-decoration:none;

  box-shadow: 0 14px 40px rgba(0,0,0,.38);
}

.mnav-link i{
  width: 22px;
  text-align:center;
  transform: none !important; 
}

.mnav-link.active{
  border-color: rgba(210,166,121,.32);
  background:
    radial-gradient(800px 240px at 30% 0%, rgba(255,255,255,.14), transparent 60%),
    rgba(210,166,121,.16);
}

.mnav-actions{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.mnav-actions .pill{
  justify-content:flex-start;
  gap: 10px;
}
.mnav-actions .pill i{ transform:none !important; }

html[dir="rtl"] .mnav{ direction: rtl; }
html[dir="rtl"] .mnav-link{ justify-content:flex-start; }

body.mnav-open{ overflow:hidden; }






/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* -------------------------------------- Hero -------------------------------------- */

.hero-banner{ padding: 26px 0 10px; }

.banner{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  min-height: clamp(460px, 42vh, 520px);
  display: grid;
  align-items: end;
}

.banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--banner);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.03);
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 360px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.62));
}

.banner-overlay{
  position: relative;
  z-index: 2;
  padding: 22px 22px;
  max-width: 720px;
}

.banner-overlay h1{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
  text-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.banner-overlay p{
  margin: 0 0 16px;
  color: rgba(244,237,231,.78);
  line-height: 1.85;
  max-width: 62ch;
  text-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.banner-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}







/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ------------------------------------ Sections ------------------------------------ */

.section{ padding: 100px 0 40px; }

.section-head{
  display:flex;
  align-items:center;
  justify-content:center;   
  gap: 14px;
  margin: 0 auto 80px;
  text-align:center;
  position: relative;
}


.section-head .link{
  position:absolute;
  inset-inline-end: 0;         
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(210,166,121,.18);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.06) inset;
  color: rgba(210,166,121,.95);
  font-weight: 900;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.section-head .link:hover{
  transform: translateY(-50%) translateY(-2px);
  border-color: rgba(210,166,121,.34);
  background: rgba(255,240,230,.06);
}

.section-head h2{
  margin:0;
  font-size: clamp(38px, 2.2vw, 26px);
  letter-spacing: -.6px;
  font-weight: 1000;
  color: rgba(244,237,231,.95);
  text-shadow: 0 22px 60px rgba(0,0,0,.55);
  position: relative;
  padding-bottom: 10px;
}

.section-head h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: rgba(210,166,121,.55);
  box-shadow: 0 10px 26px rgba(210,166,121,.18);
}

@media (max-width: 640px){
  .section-head{
    flex-direction: column;
    gap: 10px;
  }
  .section-head .link{
    position: static;
    transform: none;
  }
}

.page-title{
  margin:0;
  font-size:26px;
  letter-spacing:-.4px;
}





/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ---------------------------- Project page ----------------------------- */



.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 1080px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  position: relative;
  display:flex;
  flex-direction: column;
  overflow:hidden;
  border-radius: 26px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(210,166,121,.18);

  background:
    radial-gradient(900px 260px at 22% 0%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(700px 220px at 88% 18%, rgba(210,166,121,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,240,230,.05), rgba(0,0,0,.26));

  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.38) inset;

  transform: translateZ(0);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:-60% -55%;
  pointer-events:none;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255,255,255,.10) 49%,
    rgba(210,166,121,.14) 55%,
    transparent 62%
  );
  transform: translateX(-42%) rotate(10deg);
  opacity: .16;
  transition: opacity .25s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

.card::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 20px;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.32) inset;
  opacity: .9;
}

.card:hover{
  transform: translateY(-6px);
  border-color: rgba(210,166,121,.34);
  box-shadow:
    0 42px 120px rgba(0,0,0,.66),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 6px rgba(210,166,121,.06);
  filter: saturate(1.05);
}
.card:hover::after{
  opacity: .22;
  transform: translateX(30%) rotate(10deg);
}

.card:active{
  transform: translateY(-2px) scale(.995);
}

.thumb{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow:hidden;
  margin: 12px 12px 0;
  border: 1px solid rgba(210,166,121,.14);
  background: rgba(0,0,0,.20);
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}

.thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease;
  filter: saturate(1.02) contrast(1.03);
}

.card:hover .thumb img{
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1.05);
}

.thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(820px 240px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.35));
}

.thumb-ph{
  height:100%;
  display:grid;
  place-items:center;
  color: rgba(244,237,231,.72);
  font-weight: 900;
  letter-spacing: .2px;
}

.card-body{
  position: relative;
  z-index: 2;
  padding: 14px 16px 16px;
}

.card-title{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -.2px;
  color: rgba(244,237,231,.96);
  text-shadow: 0 22px 60px rgba(0,0,0,.55);
  margin: 2px 0 6px;
}

.card-sub{
  font-size: 13px;
  line-height: 1.7;
  color: rgba(244,237,231,.72);
  max-width: 60ch;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;

  border: 1px solid rgba(210,166,121,.18);
  background:
    radial-gradient(700px 220px at 30% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(0,0,0,.20);

  color: rgba(244,237,231,.88);
  font-weight: 950;
  font-size: 12px;

  box-shadow:
    0 16px 44px rgba(0,0,0,.40),
    0 1px 0 rgba(255,255,255,.06) inset;
}


.card:hover .card-title::after{
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .card, .thumb img, .card::after, .card-title::after{
    transition: none !important;
  }
}





/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ------------------------- single Project page ------------------------- */

.project-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}

.project-media{ padding: 14px; }


.cover-frame{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(210,166,121,.16);
  background: rgba(0,0,0,.20);
}

.cover{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}


@media (min-width: 981px){
  .cover-frame{ height: 360px; }
}


.gallery{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.gallery .g{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(210,166,121,.14);
  background: rgba(255,240,230,.03);
  padding: 0;
  cursor: pointer;
  display:block;
  line-height: 0;
  outline: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.gallery .g:hover{
  transform: translateY(-2px);
  border-color: rgba(210,166,121,.30);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.gallery .g:active{ transform: translateY(0) scale(.99); }

.gallery img{
  width: 100%;
  height: 90px;
  object-fit: cover;
  display:block;
}

.media-nav{
  display:none; 
  margin-top: 12px;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.m-arrow{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(210,166,121,.18);
  background:
    radial-gradient(700px 220px at 30% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(0,0,0,.32);
  color: rgba(244,237,231,.92);
  cursor:pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
  transition: transform .16s ease, border-color .16s ease;
}
.m-arrow:hover{
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(210,166,121,.34);
}
.m-arrow:active{ transform: translateY(0) scale(.98); }

.m-count{
  min-width: 86px;
  text-align:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(210,166,121,.14);
  background: rgba(0,0,0,.22);
  color: rgba(244,237,231,.88);
  font-weight: 1000;
  font-size: 12px;
}

.project-info{
  padding: 16px;
  position: sticky;
  top: 92px;
}

.info-title{ font-weight: 1000; margin-bottom: 10px; }

.info-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed rgba(210,166,121,.18);
}

.info-row .k{ color: rgba(244,237,231,.72); font-size: 12px; }
.info-row .v{ font-weight: 900; }

.divider{ height:1px; background: rgba(210,166,121,.18); margin: 12px 0; }

.desc{
  color: rgba(244,237,231,.80);
  line-height: 1.9;
  font-size: 14px;
}

@media (max-width: 980px){
  .project-grid{ grid-template-columns: 1fr; }
  .project-info{ position: static; top:auto; }

  .cover-frame{
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .gallery{ display:none; }
  .media-nav{ display:flex; }

  html[dir="rtl"] .media-nav{
    direction: ltr;
    unicode-bidi: isolate;
  }
}

/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ------------------------------- Footer -------------------------------- */

.footer{ padding: 26px 0 44px; }

.footer-pill{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 10px;

  padding: 8px 10px;
  border-radius: 999px;

  border: 1px solid rgba(210,166,121,.16);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,240,230,.05), rgba(0,0,0,.18));
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);

  box-shadow:
    0 20px 55px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;

  direction: ltr;
}

.footer-side{
  display:flex;
  gap: 8px;
  align-items:center;
  direction: ltr; 
}

.footer-left{ justify-content:flex-start; }
.footer-right{ justify-content:flex-end; }

.footer-mid{
  text-align:center;
  font-size: 12px;
  color: rgba(244,237,231,.76);
  white-space: nowrap;
  padding: 0 6px;
}

html[dir="rtl"] .footer-mid{ direction: rtl; }

.footer-ico{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  position: relative;

  border: 1px solid rgba(210,166,121,.16);
  background: rgba(0,0,0,.18);
  color: rgba(244,237,231,.92);

  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.06) inset;

  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.footer-ico:hover{
  transform: translateY(-2px);
  border-color: rgba(210,166,121,.30);
  background: rgba(255,240,230,.06);
}

.footer-ico i{
  font-size: 15px;
  transform: none !important; 
}

.footer-tip{
  position:absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events:none;

  width: max-content;
  max-width: min(320px, 78vw);
  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(210,166,121,.18);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(0,0,0,.38);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);

  box-shadow:
    0 18px 55px rgba(0,0,0,.60),
    0 1px 0 rgba(255,255,255,.06) inset;

  color: rgba(244,237,231,.90);
  font-size: 12px;
  line-height: 1.5;
  text-align:center;
  white-space: normal;

  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}

html[dir="rtl"] .footer-tip{ direction: rtl; }

.footer-ico--web:hover .footer-tip,
.footer-ico--web:focus-visible .footer-tip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.footer-tip::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(0,0,0,.38);
  border-right: 1px solid rgba(210,166,121,.18);
  border-bottom: 1px solid rgba(210,166,121,.18);
}

@media (max-width: 640px){

  .footer-pill{
    display:grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto auto;
    justify-content:center;
    align-items:center;
    column-gap: 10px;
    row-gap: 12px;

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .footer-left,
  .footer-right{
    display: contents;
  }

  .footer-ico{
    grid-row: 1;
  }

  .footer-mid{
    grid-row: 2;
    grid-column: 1 / -1;

    justify-self: center;
    width: min(860px, 100%);
    padding: 14px 36px;
    border-radius: 999px;

    border: 1px solid rgba(210,166,121,.16);
    background:
      radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, rgba(255,240,230,.05), rgba(0,0,0,.18));
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);

    box-shadow:
      0 20px 55px rgba(0,0,0,.55),
      0 1px 0 rgba(255,255,255,.06) inset;

    white-space: normal;
    line-height: 1.4;
  }

  .footer-tip{
    bottom: calc(100% + 8px);
    max-width: 90vw;
  }
}


@media (max-width: 640px){
  .footer-ico--web .footer-tip{ display:none !important; }
}



/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */


.copyright{
  margin-top:14px;
  color:rgba(244,237,231,.55);
  font-size:12px;
}

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .project-grid{ grid-template-columns:1fr; }
  .project-info{ position:static; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .thumb{ height:220px; }
}

@media (max-width:640px){
  .topbar{ padding:10px 0; }
  .topbar-pill{ padding:10px 10px; }
  .nav{ display:none; }
  .grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .banner-overlay{ padding:18px; }
  .hero-copy{ padding:22px; }
  .hero-copy h1{ letter-spacing:-.8px; }
}


/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------- 3 cards details ------------------------- */

.kpisec{ padding: 50px 0 6px; }

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  perspective: 900px;
  
}

.kpi-card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px 16px 14px;

  transform-style: preserve-3d;
  will-change: transform;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.kpi-glass{
  background: linear-gradient(180deg, rgba(7, 4, 3, 0.127), rgba(7,4,3,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(210,166,121,.22);


  box-shadow:
    0 34px 110px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.35) inset;
}

.kpi-card::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events:none;
  
  transform: translateZ(12px);
  opacity: .95;
}

.kpi-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,.10) 45%,
      rgba(210,166,121,.14) 52%,
      transparent 60%);
  transform: translateX(-30%) translateY(-20%) rotate(10deg);
  opacity: .55;
  filter: blur(0.2px);
  animation: kpiSweep 6.5s ease-in-out infinite;
}

@keyframes kpiSweep{
  0%   { transform: translateX(-35%) translateY(-20%) rotate(10deg); opacity:.18; }
  45%  { opacity:.55; }
  70%  { opacity:.25; }
  100% { transform: translateX(35%) translateY(10%) rotate(10deg); opacity:.18; }
}

.kpi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:relative;
  z-index:2;
  transform: translateZ(18px);
}

.kpi-ico{
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 16px;

  border: 1px solid rgba(210,166,121,.24);
  background:
    radial-gradient(500px 180px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    rgba(0,0,0,.22);

  box-shadow:
    0 16px 36px rgba(0,0,0,.38),
    0 1px 0 rgba(255,255,255,.06) inset;

  transform: translateZ(22px);
}

.kpi-ico i{
  font-size: 16px;
  color: rgba(244,237,231,.94);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.kpi-num{
  margin-top: 12px;
  font-weight: 1000;
  font-size: 30px;
  letter-spacing: -0.8px;
  position: relative;
  z-index: 2;
  transform: translateZ(18px);
  text-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.kpi-label{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 1000;
  color: rgba(244,237,231,.94);
  position: relative;
  z-index: 2;
  transform: translateZ(16px);
}

.kpi-sub{
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(244,237,231,.70);
  position: relative;
  z-index: 2;
  transform: translateZ(14px);
}

.kpi-card:hover{
  border-color: rgba(210,166,121,.34);
  box-shadow:
    0 44px 140px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 5px rgba(210,166,121,.08);
}

.kpi-card{
  opacity: 0;
  transform: translateY(10px) scale(.98);
}

.kpi-card.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity .45s ease,
    transform .55s cubic-bezier(.2,.8,.2,1),
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

@media (max-width: 980px){
  .kpi-grid{ grid-template-columns: 1fr; }
}



html.js .kpi-card{
  opacity: 0;
  transform: translateY(18px) scale(.98);
  filter: blur(2px);
  will-change: opacity, transform, filter;

  transition:
    opacity 900ms ease,
    transform 4150ms cubic-bezier(.2,.8,.2,1),
    filter 4150ms cubic-bezier(.2,.8,.2,1),
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;

  transition-delay: calc(var(--i, 0) * 220ms);
}

html.js .kpi-card.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  html.js .kpi-card{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}





/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------- Tape ------------------------------ */

.logo-tape{ padding: 100px 0 26px; }

.logo-tape-shell{
  padding: 12px;
  border-radius: 50px;
  overflow:hidden;
  position: relative;
  background: transparent;
  border: 0px;
}

.logo-tape-shell::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;

}

.logo-tape-marquee{
  position: relative;
  overflow:hidden;
  white-space:nowrap;
  border-radius: 999px;

  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}


.logo-tape-track{
  display:inline-flex;
  align-items:center;
  gap: 16px;
  padding: 10px 8px;
  transform: translate3d(0,0,0);
  will-change: transform;
}


.logo-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 54px;
  min-width: 140px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(210,166,121,.18);
  
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.logo-item:hover{
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(210,166,121,.32);
  box-shadow:
    0 26px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.08) inset;
}

.logo-item img{
  height: 32px;            
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display:block;
  opacity: .94;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.35));
}


.logo-item img.wide{ height: 20px; }
.logo-item img.tall{ height: 26px; }


@media (max-width: 640px){
  .logo-tape-shell{ padding: 10px; }
  .logo-item{
    min-width: 118px;
    height: 50px;
    padding: 10px 14px;
  }
  .logo-item img{ height: 20px; max-width: 120px; }
}
.logo-tape-track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  will-change: transform;
}
.logo-tape-marquee{ overflow:hidden; white-space:nowrap; }
.logo-tape-track{ display:inline-flex; align-items:center; will-change:transform; }

html[dir="rtl"] .logo-tape-marquee,
html[dir="rtl"] .logo-tape-track{
  direction: ltr;
}




/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
/* --------------------------- Latest Projects --------------------------- */

.proj-showcase-sec{
  padding: 228px 0 154px;
}

.proj-showcase{
  display:grid;
  grid-template-columns:
    clamp(280px, 42vw, 520px)
    minmax(280px, 420px);

  gap: 22px;
  align-items:center;
  justify-content:center;   
  margin: 0 auto;
}

.ps-media{
  position: relative;      
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  overflow:hidden;

  border: 1px solid rgba(210,166,121,.22);
  background: rgba(0,0,0,.18);

  box-shadow:
    0 40px 120px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.07) inset;

  transform: translateZ(0);
}

.ps-slide,
.ps-slide img{
  width:100%;
  height:100%;
}

.ps-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .45s ease, transform .9s ease;
}
.ps-slide.active{
  opacity:1;
  transform: scale(1);
}

.ps-slide img{
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.03);
}

.ps-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 360px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.38));
}

.ps-ph{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(244,237,231,.70);
}

.ps-side{
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items: stretch;
  justify-content:center;
}

.ps-pill{
  position: relative;
  overflow: hidden;

  min-height: 56px;
  border-radius: 999px;
  padding: 12px 18px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  color: rgba(244,237,231,.94);
  font-weight: 950;
  letter-spacing: .2px;

  border: 1px solid rgba(210,166,121,.22);
  background:
    radial-gradient(900px 260px at 22% 0%, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(700px 220px at 88% 20%, rgba(210,166,121,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,240,230,.06), rgba(0,0,0,.28));

  backdrop-filter: blur(18px) saturate(1.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.22);

  box-shadow:
    0 26px 72px rgba(0,0,0,.58),
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.35) inset;

  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ps-pill::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 999px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(700px 220px at 30% 0%, rgba(255,255,255,.08), transparent 60%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    0 18px 40px rgba(0,0,0,.34) inset,
    0 0 0 1px rgba(210,166,121,.08);
  opacity:.95;
}

.ps-pill::after{
  content:"";
  position:absolute;
  inset:-70% -60%;
  pointer-events:none;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255,255,255,.10) 49%,
    rgba(210,166,121,.14) 55%,
    transparent 62%
  );
  transform: translateX(-35%) rotate(10deg);
  opacity:.18;
  animation: psSheen 7.5s ease-in-out infinite;
}

@keyframes psSheen{
  0%   { transform: translateX(-40%) rotate(10deg); opacity:.12; }
  40%  { opacity:.22; }
  70%  { opacity:.16; }
  100% { transform: translateX(40%) rotate(10deg); opacity:.12; }
}

.ps-pill:hover{
  transform: translateY(-2px);
  border-color: rgba(210,166,121,.38);
  box-shadow:
    0 34px 96px rgba(0,0,0,.68),
    0 1px 0 rgba(255,255,255,.09) inset,
    0 0 0 5px rgba(210,166,121,.07);
  filter: saturate(1.04);
}

.ps-pill:active{
  transform: translateY(0) scale(.99);
}

.ps-title{ font-size: 14px; }
.ps-tags{ font-size: 13px; color: rgba(244,237,231,.80); }

@media (prefers-reduced-motion: reduce){
  .ps-pill::after{ animation: none; }
  .ps-pill{ transition: none; }
}


.ps-title{ font-size: 14px; }
.ps-tags{ font-size: 13px; color: rgba(244,237,231,.76); }

.ps-cta{
  justify-content:center;
  gap: 10px;
  text-decoration:none;

  border-color: rgba(210,166,121,.30);
  background:
    radial-gradient(900px 260px at 30% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(210,166,121,.26), rgba(0,0,0,.30));

  box-shadow:
    0 28px 90px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.08) inset;

  font-weight: 1000;
}

.ps-cta i{
  font-size: 14px;
  opacity: .95;
  transform: translateY(1px);
}

.ps-cta:hover{
  transform: translateY(-3px);
  border-color: rgba(210,166,121,.42);
}


.ps-arrows{
  margin-top: 2px;
  display:flex;
  gap: 12px;
  justify-content:center;
}

html[dir="rtl"] .ps-arrows,
html[lang^="ar"] .ps-arrows{
  direction: ltr;          
  unicode-bidi: isolate;   
}

.ps-arrow{
  width: 46px;
  height: 46px;
  border-radius: 16px;

  border: 1px solid rgba(210,166,121,.18);
  background:
    radial-gradient(700px 220px at 30% 0%, rgba(255,255,255,.08), transparent 60%),
    rgba(0,0,0,.32);

  color: rgba(244,237,231,.92);
  cursor:pointer;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;

  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.ps-arrow:hover{
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(210,166,121,.34);
  background:
    radial-gradient(700px 220px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    rgba(255,240,230,.06);
}

.ps-arrow:active{ transform: translateY(0) scale(.98); }
.ps-arrow i{ font-size: 16px; }


html[dir="rtl"] .proj-showcase{
  grid-template-columns: minmax(280px, 420px) clamp(280px, 42vw, 520px);
}


@media (max-width: 980px){
  .proj-showcase{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  html[dir="rtl"] .proj-showcase{ grid-template-columns: 1fr; }

  .ps-media{
    width: min(520px, 100%);
    margin: 0 auto;
  }
  .ps-side{
    width: min(520px, 100%);
    margin: 0 auto;
  }
}



html.js .proj-showcase-sec{
  --ps-in-dur: 820ms;
  --ps-in-ease: cubic-bezier(.2,.8,.2,1);
}

html.js .proj-showcase-sec .ps-media,
html.js .proj-showcase-sec .ps-side,
html.js .proj-showcase-sec .ps-pill,
html.js .proj-showcase-sec .ps-arrows{
  opacity: 0;
  will-change: opacity, transform, filter;
}

html.js .proj-showcase-sec .ps-media{
  transform: translateY(18px) scale(.98);
  filter: blur(2px);
  transition:
    opacity var(--ps-in-dur) var(--ps-in-ease),
    transform var(--ps-in-dur) var(--ps-in-ease),
    filter var(--ps-in-dur) var(--ps-in-ease);
  transition-delay: 120ms;
}

html.js .proj-showcase-sec .ps-side{
  transform: translateY(16px);
  transition:
    opacity calc(var(--ps-in-dur) - 80ms) var(--ps-in-ease),
    transform calc(var(--ps-in-dur) - 80ms) var(--ps-in-ease);
  transition-delay: 180ms;
}

html.js .proj-showcase-sec .ps-pill{
  transform: translateY(14px) scale(.995);
  transition:
    opacity 720ms var(--ps-in-ease),
    transform 720ms var(--ps-in-ease);
  transition-delay: calc(240ms + (var(--i,0) * 110ms));
}

html.js .proj-showcase-sec .ps-arrows{
  transform: translateY(10px);
  transition:
    opacity 650ms var(--ps-in-ease),
    transform 650ms var(--ps-in-ease);
  transition-delay: calc(240ms + (var(--ps-n,4) * 110ms) + 80ms);
}

html.js .proj-showcase-sec.is-in .ps-media,
html.js .proj-showcase-sec.is-in .ps-side,
html.js .proj-showcase-sec.is-in .ps-pill,
html.js .proj-showcase-sec.is-in .ps-arrows{
  opacity: 1;
}

html.js .proj-showcase-sec.is-in .ps-media{
  transform: translateY(0) scale(1);
  filter: blur(0);
}
html.js .proj-showcase-sec.is-in .ps-side{
  transform: translateY(0);
}
html.js .proj-showcase-sec.is-in .ps-pill{
  transform: translateY(0) scale(1);
}
html.js .proj-showcase-sec.is-in .ps-arrows{
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html.js .proj-showcase-sec .ps-media,
  html.js .proj-showcase-sec .ps-side,
  html.js .proj-showcase-sec .ps-pill,
  html.js .proj-showcase-sec .ps-arrows{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}




/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------- Helmet ---------------------------- */

.hotspots-sec{ padding: 34px 0 50px; }

.hs-head{
  text-align:center;
  margin: 0 auto 14px;
  max-width: 860px;
}
.hs-head h2{
  margin:0;
  font-size: 18px;
  letter-spacing:-.2px;
}
.hs-head p{
  margin: 8px 0 0;
  color: rgba(244,237,231,.70);
  font-size: 13px;
  line-height: 1.7;
}

.hs-stage{
  position: relative;
  min-height: 420px;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow: visible;
}


.hs-helmet{
  width: min(560px, 92%);
  height: auto;
  display:block;
  filter: drop-shadow(0 30px 90px rgba(0,0,0,.65));
  animation: hsFloat 2.4s ease-in-out infinite;
  transform: translateZ(0);
  z-index: 1;
}
@keyframes hsFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

.hs-item{
  position:absolute;
  inset:0;
  pointer-events:none; 
}


.hs-card{
  position:absolute;
  left: var(--cx);
  top:  var(--cy);
  transform: translate(-50%, -50%);
  width: min(420px, 44vw);
  max-width: 460px;

  display:flex;
  gap: 12px;
  align-items:flex-start;

  padding: 16px 18px;
  border-radius: 18px;

  pointer-events:none;
  z-index: 2;

  border: 1px solid rgba(210,166,121,.22);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,240,230,.08), rgba(0,0,0,.22));
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}


.hs-item[data-side="right"] .hs-card::after,
.hs-item[data-side="left"]  .hs-card::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(210,166,121,.18);
  border-top:  1px solid rgba(210,166,121,.18);
  transform: translateY(-50%) rotate(45deg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hs-item[data-side="right"] .hs-card::after{
  left: -7px;
}
.hs-item[data-side="left"] .hs-card::after{
  right: -7px;
  transform: translateY(-50%) rotate(225deg);
}

.hs-card-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;

  border: 1px solid rgba(210,166,121,.22);
  background: rgba(0,0,0,.22);
  box-shadow: 0 16px 38px rgba(0,0,0,.35);

  flex: 0 0 auto;
}
.hs-card-ico i{
  font-size: 16px;
  color: rgba(244,237,231,.95);
}

.hs-card-title{
  font-weight: 1000;
  color: rgba(244,237,231,.95);
  font-size: 14px;
  letter-spacing: -.2px;
  margin-top: 2px;
}
.hs-card-body{
  margin-top: 6px;
  color: rgba(244,237,231,.72);
  font-size: 13px;
  line-height: 1.7;
}


html[dir="rtl"] .hs-card{ left: calc(100% - var(--cx)); }

@media (max-width: 980px){
  .hs-stage{ min-height: auto; padding-bottom: 10px; }
  .hs-item{ position: static; inset:auto; }

  .hs-card{
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 12px 0 0;
    pointer-events:auto;
    min-height: 104px;         
    align-items: center;     
  }

  .hs-card-txt{ flex: 1; min-width: 0; }

  .hs-card-body{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hs-item[data-side="right"] .hs-card::after,
  .hs-item[data-side="left"]  .hs-card::after{ display:none; }
}


html.js .hotspots-sec{
  --hs-dur: 4760ms;
  --hs-ease: cubic-bezier(.2,.8,.2,1);
}


html.js .hotspots-sec .hs-head,
html.js .hotspots-sec .hs-helmet,
html.js .hotspots-sec .hs-card{
  opacity: 0;
  will-change: opacity, transform, filter;
}


html.js .hotspots-sec .hs-head{
  transform: translateY(14px);
  transition:
    opacity var(--hs-dur) var(--hs-ease),
    transform var(--hs-dur) var(--hs-ease);
}


html.js .hotspots-sec .hs-helmet{
  filter: drop-shadow(0 30px 90px rgba(0,0,0,.65)) blur(2px);
  transition:
    opacity calc(var(--hs-dur) + 120ms) var(--hs-ease),
    filter  calc(var(--hs-dur) + 120ms) var(--hs-ease);
  transition-delay: 120ms;
}

html.js .hotspots-sec .hs-card{
  --in-x: 0px;
  --in-y: 14px;
  transform: translate(-50%, -50%) translate(var(--in-x), var(--in-y)) scale(.98);
  transition:
    opacity 700ms var(--hs-ease),
    transform 700ms var(--hs-ease);
  transition-delay: calc(220ms + (var(--i,0) * 120ms));
}
html.js .hotspots-sec .hs-item[data-side="right"] .hs-card{ --in-x: 18px; }
html.js .hotspots-sec .hs-item[data-side="left"]  .hs-card{ --in-x: -18px; }

html.js .hotspots-sec.is-in .hs-head,
html.js .hotspots-sec.is-in .hs-helmet,
html.js .hotspots-sec.is-in .hs-card{ opacity: 1; }

html.js .hotspots-sec.is-in .hs-head{ transform: translateY(0); }
html.js .hotspots-sec.is-in .hs-helmet{
  filter: drop-shadow(0 30px 90px rgba(0,0,0,.65)) blur(0);
}
html.js .hotspots-sec.is-in .hs-card{
  transform: translate(-50%, -50%) translate(0,0) scale(1);
}

@media (max-width: 980px){
  html.js .hotspots-sec .hs-card{
    transform: translateY(14px) scale(.98);
  }
  html.js .hotspots-sec.is-in .hs-card{
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce){
  html.js .hotspots-sec .hs-head,
  html.js .hotspots-sec .hs-helmet,
  html.js .hotspots-sec .hs-card{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .hs-helmet{ animation: none !important; }
}


/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */

.contact-sec{ padding: 148px 0 120px; }

.contact-head{
  text-align:center;
  max-width: 860px;
  margin: 0 auto 22px;
}

.contact-title{
  margin:0;
  font-size: 34px;
  letter-spacing: -.6px;
  color: rgba(244,237,231,.96);
  text-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.contact-sub{
  margin: 10px auto 0;
  color: rgba(244,237,231,.72);
  line-height: 1.9;
  font-size: 14px;
  max-width: 70ch;
}

.contact-layout{
  display:grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 16px;
  align-items:start;
  max-width: 1100px;
  margin: 0 auto;
}

.contact-left{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.contact-card{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 16px;
  border: 1px solid rgba(210,166,121,.18);
  background:
    radial-gradient(900px 260px at 22% 0%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(700px 220px at 88% 18%, rgba(210,166,121,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,240,230,.05), rgba(0,0,0,.26));
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.38) inset;
}

.cc-top{
  display:flex;
  gap: 12px;
  align-items:center;
}

.cc-ico{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(210,166,121,.22);
  background: rgba(0,0,0,.22);
  box-shadow: 0 16px 38px rgba(0,0,0,.35);
}
.cc-ico i{ font-size: 16px; color: rgba(244,237,231,.95); }

.cc-title{
  font-weight: 1000;
  color: rgba(244,237,231,.92);
  font-size: 13px;
}
.cc-val{
  margin-top: 4px;
  color: rgba(244,237,231,.76);
  font-size: 14px;
  line-height: 1.6;
}

.cc-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration:none;
  cursor:pointer;

  border: 1px solid rgba(210,166,121,.22);
  background:
    radial-gradient(900px 260px at 30% 0%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(210,166,121,.18), rgba(0,0,0,.34));
  color: rgba(244,237,231,.96);
  font-weight: 1000;

  box-shadow:
    0 24px 70px rgba(0,0,0,.58),
    0 1px 0 rgba(255,255,255,.07) inset;

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cc-btn i{ font-size: 14px; opacity: .95; transform: translateY(1px); }
.cc-btn:hover{
  transform: translateY(-3px);
  border-color: rgba(210,166,121,.38);
  box-shadow:
    0 32px 92px rgba(0,0,0,.68),
    0 1px 0 rgba(255,255,255,.09) inset,
    0 0 0 5px rgba(210,166,121,.07);
  filter: saturate(1.04);
}
.cc-btn:active{ transform: translateY(0) scale(.99); }

.cc-btn-soft{
  background:
    radial-gradient(900px 260px at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,240,230,.07), rgba(0,0,0,.30));
}
.cc-btn.copied{
  border-color: rgba(120, 255, 190, .55);
  box-shadow:
    0 28px 90px rgba(0,0,0,.65),
    0 0 0 6px rgba(120, 255, 190, .08);
}

.map-card{
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(210,166,121,.18);
  background: rgba(0,0,0,.18);
  box-shadow:
    0 40px 120px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.07) inset;
}

.map-head{
  padding: 14px 14px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(210,166,121,.14);
  background:
    radial-gradient(900px 260px at 22% 0%, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,240,230,.05), rgba(0,0,0,.26));
}

.map-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(210,166,121,.22);
  background: rgba(0,0,0,.22);
  box-shadow: 0 16px 38px rgba(0,0,0,.35);
  flex: 0 0 auto;
}
.map-ico i{ color: rgba(244,237,231,.95); font-size: 16px; }

.map-txt{ min-width: 0; }
.map-title{ font-weight: 1000; color: rgba(244,237,231,.94); }
.map-sub{ margin-top: 2px; font-size: 12px; color: rgba(244,237,231,.70); }

.map-open{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(244,237,231,.92);
  font-weight: 1000;
  border: 1px solid rgba(210,166,121,.22);
  background: rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.map-open:hover{
  transform: translateY(-2px);
  border-color: rgba(210,166,121,.36);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

.map-frame{
  width: 100%;
  height: clamp(420px, 52vh, 560px);
}
.map-frame iframe{
  width:100%;
  height:100%;
  display:block;
}

@media (max-width: 980px){
  .contact-layout{ grid-template-columns: 1fr; }
  .map-frame{ height: 380px; }
}


/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */