/* ==========================================================================
   SHVAN SADIQ CO. FOR CONSTRUCTIONS
   Dark cinematic theme · trilingual (EN / KU-Badini / AR) · RTL aware
   ========================================================================== */

:root{
  --bg:        #08080a;
  --bg-2:      #101013;
  --bg-3:      #17171b;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);
  --text:      #f4f1ec;
  --muted:     rgba(244,241,236,.60);
  --muted-2:   rgba(244,241,236,.40);
  --bronze:    #c0894c;
  --bronze-2:  #e3b982;
  --bronze-3:  #8a5f31;
  --max:       1280px;
  --gut:       clamp(20px, 5vw, 64px);
  --r:         2px;
  --ease:      cubic-bezier(.16,1,.3,1);
  --head:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

/* Arabic-script languages get a different type stack */
html[lang="ku"], html[lang="ar"]{
  --head: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
  --body: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--bronze); color:#000; }

:focus-visible{ outline:2px solid var(--bronze-2); outline-offset:3px; }
.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:var(--gut); z-index:200;
  background:var(--bronze); color:#0a0a0a; padding:.8em 1.4em; font-family:var(--head);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; transition:top .3s var(--ease);
}
.skip:focus{ inset-block-start:12px; }

/* ---------- layout primitives ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px,10vw,150px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,90px); }
.section--alt{ background:var(--bg-2); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--head); font-weight:700; line-height:1.06; margin:0; letter-spacing:-.02em; }
html[lang="ku"] h1, html[lang="ar"] h1,
html[lang="ku"] h2, html[lang="ar"] h2,
html[lang="ku"] h3, html[lang="ar"] h3{ letter-spacing:0; line-height:1.35; }

.display{ font-size:clamp(2.4rem,7.2vw,5.4rem); text-transform:uppercase; }
html[lang="ku"] .display, html[lang="ar"] .display{ text-transform:none; font-size:clamp(2rem,5.6vw,4.2rem); }

.h2{ font-size:clamp(1.9rem,4vw,3.2rem); text-transform:uppercase; }
html[lang="ku"] .h2, html[lang="ar"] .h2{ text-transform:none; font-size:clamp(1.6rem,3.4vw,2.6rem); }

.h3{ font-size:clamp(1.15rem,1.7vw,1.5rem); }

.lede{ font-size:clamp(1.02rem,1.35vw,1.22rem); color:var(--muted); max-width:62ch; }

.eyebrow{
  font-family:var(--head); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--bronze);
  display:flex; align-items:center; gap:.9em; margin-bottom:1.5rem;
}
html[lang="ku"] .eyebrow, html[lang="ar"] .eyebrow{ letter-spacing:.06em; text-transform:none; }
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--bronze); flex:none; }

.bronze{ color:var(--bronze-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 2em; border:1px solid var(--bronze);
  font-family:var(--head); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-2); background:transparent;
  position:relative; overflow:hidden; transition:color .45s var(--ease);
}
html[lang="ku"] .btn, html[lang="ar"] .btn{ letter-spacing:0; text-transform:none; font-size:.92rem; }
.btn::after{
  content:""; position:absolute; inset:0; background:var(--bronze);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); z-index:-1;
}
[dir="rtl"] .btn::after{ transform-origin:right; }
.btn:hover{ color:#0a0a0a; }
.btn:hover::after{ transform:scaleX(1); }
.btn > *{ position:relative; z-index:1; }
.btn--solid{ background:var(--bronze); color:#0a0a0a; border-color:var(--bronze); }
.btn--solid:hover{ color:#0a0a0a; filter:brightness(1.12); }
.btn--ghost{ border-color:var(--line-2); color:var(--text); }

/* ==========================================================================
   HEADER + EXPANDING NAV
   ========================================================================== */
.hdr{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  transition:background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck, .hdr.is-open{
  background:rgba(8,8,10,.90);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
.hdr__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:78px;
}
.brand{ display:flex; align-items:center; gap:.8rem; flex:none; }
.brand svg{ height:38px; width:auto; }
.brand__txt{
  font-family:var(--head); font-weight:700; font-size:.86rem;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.15;
}
.brand__txt small{
  display:block; font-size:.55rem; letter-spacing:.34em;
  color:var(--bronze); font-weight:500;
}

/* nav */
.nav{ display:flex; align-items:center; gap:.35rem; margin-inline-start:auto; }
.nav__btn{
  padding:.65em 1.05em; font-family:var(--head); font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  position:relative; transition:color .3s var(--ease); white-space:nowrap;
}
html[lang="ku"] .nav__btn, html[lang="ar"] .nav__btn{ letter-spacing:0; text-transform:none; font-size:.95rem; }
.nav__btn::after{
  content:""; position:absolute; inset-block-end:.35em; inset-inline-start:1.05em;
  width:0; height:1px; background:var(--bronze); transition:width .4s var(--ease);
}
.nav__btn:hover,.nav__btn.is-active{ color:var(--text); }
.nav__btn.is-active::after{ width:calc(100% - 2.1em); }
.nav__btn[aria-expanded="true"]{ color:var(--bronze-2); }
.nav__btn .chev{ display:inline-block; margin-inline-start:.45em; transition:transform .4s var(--ease); font-size:.7em; }
.nav__btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* the expanding panel — nav opens a list in place instead of navigating */
.panel{
  position:fixed; inset-inline:0; inset-block-start:78px; z-index:99;
  background:rgba(10,10,12,.97); backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line);
  overflow:hidden; max-height:0;
  transition:max-height .6s var(--ease);
}
.panel.is-open{ max-height:78vh; overflow-y:auto; }
.panel__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px);
  padding-block:clamp(28px,4vw,54px);
  opacity:0; transform:translateY(-14px);
  transition:opacity .5s .12s var(--ease), transform .5s .12s var(--ease);
}
.panel.is-open .panel__inner{ opacity:1; transform:none; }
.panel__list{ list-style:none; margin:0; padding:0; }
.panel__list li{ border-bottom:1px solid var(--line); }
.panel__list a{
  display:flex; align-items:baseline; gap:1rem; padding:1.15rem .2rem;
  transition:padding-inline-start .4s var(--ease), background .4s var(--ease);
}
.panel__list a:hover{ padding-inline-start:1.1rem; background:rgba(192,137,76,.06); }
.panel__list .num{
  font-family:var(--head); font-size:.68rem; color:var(--bronze);
  letter-spacing:.1em; flex:none; min-width:2.2em;
}
.panel__list .t{ font-family:var(--head); font-weight:600; font-size:1.02rem; }
.panel__list .d{ display:block; font-size:.85rem; color:var(--muted); font-weight:400; margin-top:.18rem; line-height:1.5; }
.panel__aside{ align-self:start; }
.panel__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.panel__media img{ width:100%; height:100%; object-fit:cover; opacity:.82; }
.panel__note{ font-size:.86rem; color:var(--muted); margin-top:1rem; }

/* language switcher */
.lang{ display:flex; align-items:center; gap:.15rem; flex:none; border:1px solid var(--line); }
.lang button{
  padding:.42em .78em; font-family:var(--head); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; color:var(--muted-2); transition:.3s var(--ease);
}
.lang button:hover{ color:var(--text); }
.lang button.is-active{ background:var(--bronze); color:#0a0a0a; }

.burger{ display:none; width:44px; height:44px; position:relative; flex:none; }
.burger span{
  position:absolute; inset-inline:11px; height:1.5px; background:var(--text);
  transition:.4s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger.is-on span:nth-child(1){ top:22px; transform:rotate(45deg); }
.burger.is-on span:nth-child(2){ opacity:0; }
.burger.is-on span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg video,.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); filter:saturate(.88) contrast(1.06);
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(8,8,10,.97) 0%, rgba(8,8,10,.55) 32%, rgba(8,8,10,.22) 60%, rgba(8,8,10,.62) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(192,137,76,.20), transparent 62%);
}
/* film grain to disguise source compression */
.grain{
  position:absolute; inset:-50%; z-index:2; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  33%{ transform:translate(-3%,2%) }
  66%{ transform:translate(2%,-3%) }
}
/* padding-start keeps the headline clear of the fixed header on short screens */
.hero__inner{ position:relative; z-index:3; width:100%; padding-block:110px clamp(48px,8vw,110px); }
.hero__title span{ display:block; overflow:hidden; }
.hero__title span i{
  display:block; font-style:normal;
  transform:translateY(105%); animation:rise 1.15s var(--ease) forwards;
}
.hero__title span:nth-child(2) i{ animation-delay:.13s; }
.hero__title span:nth-child(3) i{ animation-delay:.26s; }
@keyframes rise{ to{ transform:none } }
.hero__title span:nth-child(2) i{ color:var(--bronze-2); }
.hero__sub{
  margin-top:1.7rem; max-width:46ch; color:var(--muted);
  opacity:0; animation:fadeUp .9s .55s var(--ease) forwards;
}
.hero__cta{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.9rem; opacity:0; animation:fadeUp .9s .72s var(--ease) forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

.scrollcue{
  position:absolute; inset-block-end:28px; inset-inline-end:var(--gut); z-index:4;
  display:flex; align-items:center; gap:.7rem; font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); font-family:var(--head);
}
html[lang="ku"] .scrollcue, html[lang="ar"] .scrollcue{ letter-spacing:0; text-transform:none; }
.scrollcue i{ display:block; width:1px; height:40px; background:linear-gradient(var(--bronze),transparent); }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:1px solid var(--line); }
.stat{ padding:clamp(28px,4vw,52px) clamp(16px,2vw,32px); border-bottom:1px solid var(--line); border-inline-end:1px solid var(--line); }
.stat:last-child{ border-inline-end:0; }
.stat__n{ font-family:var(--head); font-weight:700; font-size:clamp(2.6rem,5.2vw,4.4rem); line-height:1; color:var(--bronze-2); letter-spacing:-.03em; }
.stat__l{ margin-top:.7rem; font-size:.82rem; color:var(--muted); letter-spacing:.06em; }

/* ==========================================================================
   PILLARS
   ========================================================================== */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(24px,3.4vw,56px); }
.pillar{ padding-top:1.8rem; border-top:1px solid var(--bronze-3); }
.pillar__n{ font-family:var(--head); font-size:.7rem; letter-spacing:.2em; color:var(--bronze); }
.pillar h3{ margin:1rem 0 .8rem; }
.pillar p{ color:var(--muted); font-size:.95rem; margin:0; }

/* ==========================================================================
   SHELL -> FINISHED  (drag comparison)
   ========================================================================== */
.compare{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#000; cursor:ew-resize; user-select:none; }
@media (max-width:700px){ .compare{ aspect-ratio:4/5; } }
.compare video, .compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare__b{ clip-path:inset(0 0 0 var(--split,50%)); }
.compare__handle{
  position:absolute; inset-block:0; inset-inline-start:var(--split,50%);
  width:2px; background:var(--bronze); z-index:5; pointer-events:none;
  box-shadow:0 0 26px rgba(192,137,76,.7);
}
.compare__grip{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
  background:var(--bronze); color:#0a0a0a; display:grid; place-items:center;
  font-size:1rem; font-weight:700; font-family:var(--head);
}
.compare__tag{
  position:absolute; inset-block-end:18px; z-index:6;
  font-family:var(--head); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.5em 1em; background:rgba(8,8,10,.75); backdrop-filter:blur(6px); color:var(--text);
}
html[lang="ku"] .compare__tag, html[lang="ar"] .compare__tag{ letter-spacing:0; text-transform:none; }
.compare__tag--a{ inset-inline-start:18px; }
.compare__tag--b{ inset-inline-end:18px; color:var(--bronze-2); }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.proj{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,70px); align-items:center; }
.proj + .proj{ margin-top:clamp(56px,8vw,130px); }
.proj--flip .proj__media{ order:2; }
@media (max-width:860px){ .proj{ grid-template-columns:1fr; } .proj--flip .proj__media{ order:0; } }
.proj__media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--bg-3); }
.proj__media img,.proj__media video{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.proj:hover .proj__media img{ transform:scale(1.05); }
.proj__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,8,10,.5),transparent 55%); }
.proj__meta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin:1.6rem 0; padding-block:1.2rem; border-block:1px solid var(--line); }
.proj__meta div{ min-width:104px; }
.proj__meta dt{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); font-family:var(--head); }
html[lang="ku"] .proj__meta dt, html[lang="ar"] .proj__meta dt{ letter-spacing:0; text-transform:none; }
.proj__meta dd{ margin:.35rem 0 0; font-family:var(--head); font-weight:600; font-size:1.02rem; }

/* ==========================================================================
   FILM
   ========================================================================== */
.film{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.film video{ width:100%; height:100%; object-fit:cover; }
.film__play{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:linear-gradient(rgba(8,8,10,.32),rgba(8,8,10,.62));
  transition:opacity .5s var(--ease);
}
.film__play.is-hidden{ opacity:0; pointer-events:none; }
.film__btn{
  width:clamp(72px,8vw,104px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--bronze); display:grid; place-items:center;
  background:rgba(8,8,10,.42); backdrop-filter:blur(6px);
  transition:.5s var(--ease);
}
.film__btn:hover{ background:var(--bronze); }
.film__btn svg{ width:26px; height:26px; fill:var(--bronze-2); transition:fill .5s var(--ease); margin-inline-start:4px; }
[dir="rtl"] .film__btn svg{ transform:scaleX(-1); margin-inline:0 4px; }
.film__btn:hover svg{ fill:#0a0a0a; }
.film__cap{ position:absolute; inset-block-end:22px; inset-inline-start:22px; z-index:4; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-family:var(--head); }
html[lang="ku"] .film__cap, html[lang="ar"] .film__cap{ letter-spacing:0; text-transform:none; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.gal figure{ margin:0; position:relative; overflow:hidden; aspect-ratio:1; background:var(--bg-3); }
.gal figure:nth-child(3n+1){ aspect-ratio:1/1.25; }
.gal img,.gal video{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s; filter:grayscale(.15) brightness(.92); }
.gal figure:hover img,.gal figure:hover video{ transform:scale(1.06); filter:none; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,70px); }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }
.ctl{ list-style:none; margin:0; padding:0; }
.ctl li{ border-bottom:1px solid var(--line); }
.ctl a,.ctl .row{ display:flex; align-items:center; gap:1.1rem; padding:1.25rem .2rem; transition:.4s var(--ease); }
.ctl a:hover{ padding-inline-start:.9rem; background:rgba(192,137,76,.06); }
.ctl .ic{ width:34px; height:34px; flex:none; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--bronze); }
.ctl .ic svg{ width:16px; height:16px; fill:currentColor; }
.ctl .k{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-family:var(--head); }
html[lang="ku"] .ctl .k, html[lang="ar"] .ctl .k{ letter-spacing:0; text-transform:none; }
.ctl .v{ font-family:var(--head); font-weight:600; font-size:1.02rem; }
.ctl .v[dir="ltr"]{ display:inline-block; }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.55rem; font-family:var(--head); }
html[lang="ku"] .field label, html[lang="ar"] .field label{ letter-spacing:0; text-transform:none; font-size:.85rem; }
.field input,.field textarea{
  width:100%; padding:.95em 1.05em; background:var(--bg-3);
  border:1px solid var(--line); color:var(--text); font:inherit; border-radius:var(--r);
  transition:border-color .35s var(--ease);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--bronze); }
.field textarea{ min-height:120px; resize:vertical; }
.formnote{ font-size:.8rem; color:var(--muted-2); margin-top:.9rem; }

.map{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); }
.map img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.map__pin{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:.4rem; }
.map__pin b{ font-family:var(--head); letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; }
html[lang="ku"] .map__pin b, html[lang="ar"] .map__pin b{ letter-spacing:0; text-transform:none; }
.map__pin span{ font-size:.78rem; color:var(--muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{ border-top:1px solid var(--line); background:var(--bg-2); padding-block:clamp(40px,5vw,72px) 26px; }
.ftr__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,3vw,50px); }
@media (max-width:760px){ .ftr__top{ grid-template-columns:1fr 1fr; } }
.ftr h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin-bottom:1.1rem; }
html[lang="ku"] .ftr h4, html[lang="ar"] .ftr h4{ letter-spacing:0; text-transform:none; font-size:.9rem; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:.6rem; }
.ftr li a{ color:var(--muted); font-size:.9rem; transition:color .3s; }
.ftr li a:hover{ color:var(--bronze-2); }
.ftr__bot{
  margin-top:clamp(32px,4vw,60px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.76rem; color:var(--muted-2);
}

/* ---------- WhatsApp float ---------- */
.wa{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:90;
  width:56px; height:56px; border-radius:50%; background:#25d366;
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .4s var(--ease);
}
.wa:hover{ transform:scale(1.09); }
.wa svg{ width:28px; height:28px; fill:#fff; }

/* ---------- reveal on scroll ---------- */
[data-rv]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-rv].is-in{ opacity:1; transform:none; }

/* ---------- routed pages ---------- */
.page{ display:none; }
.page.is-active{ display:block; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset-block-start:78px; inset-inline:0;
    background:rgba(8,8,10,.98); backdrop-filter:blur(20px);
    flex-direction:column; align-items:stretch; gap:0;
    padding:1rem var(--gut) 2rem; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .55s var(--ease), padding .55s var(--ease);
  }
  .nav.is-open{ max-height:calc(100svh - 78px); overflow-y:auto; }
  .nav:not(.is-open){ padding-block:0; }
  .nav__btn{ padding:1rem .2rem; border-bottom:1px solid var(--line); font-size:1rem; text-align:start; }
  .nav__btn::after{ display:none; }
  .panel{ position:static; max-height:0; background:transparent; border:0; backdrop-filter:none; }
  .panel.is-open{ max-height:1400px; }
  .panel__inner{ grid-template-columns:1fr; padding-block:1rem 1.6rem; }
  .panel__aside{ display:none; }
  .hero{ min-height:88svh; }
  .proj__media{ aspect-ratio:16/11; }
}
/* Small phones: the header row is brand + language + burger, and at 375px
   those together overflowed the viewport far enough to push the burger
   entirely off screen — which left the whole menu unreachable on a phone.
   Everything below exists to keep all three inside the bar. */
@media (max-width:520px){
  .hdr__bar{ height:66px; gap:.6rem; }
  .panel,.nav{ inset-block-start:66px; }

  .brand{ min-width:0; gap:.5rem; }          /* min-width:0 lets it shrink */
  .brand svg{ height:28px; flex:none; }
  .brand__txt{ font-size:.64rem; letter-spacing:.1em; min-width:0; }
  .brand__txt small{ font-size:.48rem; letter-spacing:.18em; }

  .lang{ flex:none; gap:0; }
  .lang button{ padding:.42em .5em; font-size:.64rem; letter-spacing:.06em; }

  .burger{ flex:none; margin-inline-start:0; }

  .stat{ border-inline-end:0; }
}

/* Below ~390px even the shrunken wordmark does not fit. The logo mark alone
   still identifies the company, and keeping the burger reachable matters more. */
@media (max-width:400px){
  .brand__txt{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .grain{ display:none; }
  [data-rv]{ opacity:1; transform:none; }
  .hero__title span i{ transform:none; }
  .hero__sub,.hero__cta{ opacity:1; }
}

/* ==========================================================================
   SALES — property listings for SIB apartments and Ministers Ridge villas
   ========================================================================== */

.sales-head{ max-width:64ch; }

/* ---- filter bar ---- */
.filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,1.6vw,22px);
  padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--line);
  background:var(--bg-2);
  margin-block:clamp(34px,4.5vw,60px) clamp(26px,3vw,40px);
}
.filters__g{ display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.filters__l{
  font-family:var(--head); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
}
.filters select{
  appearance:none; -webkit-appearance:none;
  width:100%; padding:.78em 2.4em .78em .95em;
  font-family:var(--head); font-size:.86rem; font-weight:500;
  color:var(--text); background:var(--bg-3);
  border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-size:5px 5px,5px 5px;
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-repeat:no-repeat;
}
html[dir="rtl"] .filters select{
  padding:.78em .95em .78em 2.4em;
  background-position:18px 52%,23px 52%;
  background-image:linear-gradient(135deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(45deg,var(--muted) 50%,transparent 50%);
}
.filters select:hover{ border-color:var(--line-2); background-color:#1c1c21; }
.filters select:focus-visible{ border-color:var(--bronze); }
.filters option{ background:#17171b; color:var(--text); }

/* ---- results bar ---- */
.sales-bar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.4rem; flex-wrap:wrap;
  padding-bottom:1.1rem; margin-bottom:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.sales-bar__n{
  font-family:var(--head); font-size:.82rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.sales-bar__n b{ color:var(--bronze-2); font-weight:700; }
.sales-reset{
  font-family:var(--head); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.sales-reset:hover{ color:var(--bronze-2); border-bottom-color:var(--bronze-3); }

/* ---- grid ---- */
.units{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(18px,2.2vw,30px);
}

/* ---- card ---- */
.unit{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--bg-2);
  overflow:hidden;
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.unit:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.unit--sold{ opacity:.42; }
.unit--sold:hover{ transform:none; border-color:var(--line); }

.unit__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3); }
.unit__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease); will-change:transform;
}
.unit:not(.unit--sold):hover .unit__media img{ transform:scale(1.05); }
.unit--sold .unit__media img{ filter:grayscale(1); }

.unit__badge{
  position:absolute; inset-block-start:12px; inset-inline-start:12px;
  font-family:var(--head); font-size:.63rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.42em .9em; backdrop-filter:blur(8px);
}
.unit__badge--available{ background:rgba(10,10,12,.72); color:#8fd6a4; border:1px solid rgba(143,214,164,.34); }
.unit__badge--reserved { background:rgba(10,10,12,.72); color:var(--bronze-2); border:1px solid var(--bronze-3); }
.unit__badge--sold     { background:rgba(10,10,12,.78); color:var(--muted); border:1px solid var(--line-2); }

.unit__star{
  position:absolute; inset-block-start:12px; inset-inline-end:12px;
  font-family:var(--head); font-size:.63rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.42em .9em; background:var(--bronze); color:#0a0a0a;
}

.unit__body{ padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; flex:1; }
.unit__code{
  font-family:var(--head); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2);
}
.unit__title{
  font-family:var(--head); font-size:clamp(1.02rem,1.5vw,1.2rem); font-weight:700;
  line-height:1.3; margin-block:.5rem .1rem;
}
.unit__where{ font-size:.85rem; color:var(--muted); }

.unit__specs{
  display:flex; flex-wrap:wrap; gap:.5rem .55rem;
  margin-block:1.1rem 1.2rem; padding-block-start:1.1rem;
  border-block-start:1px solid var(--line);
}
.unit__spec{
  display:inline-flex; align-items:center; gap:.42em;
  font-size:.78rem; color:var(--muted);
  padding:.34em .72em; border:1px solid var(--line); border-radius:var(--r);
}
.unit__spec b{ color:var(--text); font-weight:600; }
.unit__spec svg{ width:13px; height:13px; fill:var(--bronze); flex:none; opacity:.85; }

.unit__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-block-start:auto; padding-block-start:1.1rem;
  border-block-start:1px solid var(--line);
}
.unit__price{
  font-family:var(--head); font-size:.94rem; font-weight:700;
  letter-spacing:.02em; color:var(--bronze-2);
}
.unit__price--poa{
  font-size:.74rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.unit__btn{
  font-family:var(--head); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.72em 1.3em; border:1px solid var(--bronze-3); color:var(--bronze-2);
  background:transparent; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.unit__btn:hover{ background:var(--bronze); color:#0a0a0a; border-color:var(--bronze); }
.unit__btn[disabled]{
  border-color:var(--line); color:var(--muted-2); cursor:not-allowed; background:transparent;
}

/* ---- empty state ---- */
.sales-empty{
  grid-column:1/-1; text-align:center;
  padding:clamp(56px,9vw,110px) clamp(20px,4vw,40px);
  border:1px dashed var(--line-2); background:var(--bg-2);
}
.sales-empty h3{
  font-family:var(--head); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:700; margin:0 0 .9rem;
}
.sales-empty p{ color:var(--muted); max-width:46ch; margin:0 auto; }

/* ---- closing CTA + disclaimer ---- */
.sales-cta{
  margin-block-start:clamp(50px,6.5vw,90px);
  padding:clamp(32px,4.5vw,60px);
  border:1px solid var(--line); background:var(--bg-2); text-align:center;
}
.sales-cta h3{
  font-family:var(--head); font-size:clamp(1.3rem,2.6vw,2rem); font-weight:700; margin:0 0 1rem;
}
.sales-cta p{ color:var(--muted); max-width:52ch; margin:0 auto 2rem; }
.sales-note{
  margin-block-start:clamp(26px,3vw,40px);
  font-size:.78rem; color:var(--muted-2); text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .unit, .unit__media img{ transition:none; }
  .unit:hover{ transform:none; }
  .unit:not(.unit--sold):hover .unit__media img{ transform:none; }
}

/* ==========================================================================
   SCROLL WORLD — scroll-scrubbed camera flight
   The tall .world scrolls; .world__sticky pins the viewport-sized stage and
   the video's currentTime is driven by how far through .world we are.
   ========================================================================== */

.world{
  position:relative;
  /* 100vh of pin + 100vh of travel per scene. Change --scenes to retime. */
  --scenes:5;
  height:calc((var(--scenes) + 1) * 100vh);
  background:var(--bg);
}
.world__sticky{
  position:sticky; inset-block-start:0;
  height:100svh; min-height:100vh;
  overflow:hidden;
  display:flex; align-items:flex-end;
}

.world__vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  /* the browser never plays this — JS seeks it frame by frame */
}

.world__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(8,8,10,.94) 0%, rgba(8,8,10,.55) 34%, rgba(8,8,10,.08) 62%, rgba(8,8,10,.34) 100%),
    linear-gradient(to right, rgba(8,8,10,.62) 0%, transparent 55%);
}
html[dir="rtl"] .world__scrim{
  background:
    linear-gradient(to top, rgba(8,8,10,.94) 0%, rgba(8,8,10,.55) 34%, rgba(8,8,10,.08) 62%, rgba(8,8,10,.34) 100%),
    linear-gradient(to left, rgba(8,8,10,.62) 0%, transparent 55%);
}

/* ---- captions: one per scene, cross-faded by JS ---- */
.world__stage{
  position:relative; z-index:3;
  width:100%;
  padding-block-end:clamp(90px,13vh,150px);
}
.world__cap{
  position:absolute; inset-block-end:0; inset-inline-start:var(--gut);
  inset-inline-end:var(--gut);
  max-width:56ch;
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .9s var(--ease);
  pointer-events:none;
}
.world__cap.is-on{ opacity:1; transform:none; pointer-events:auto; }
.world__h{ font-size:clamp(2rem,5.4vw,4.4rem); line-height:1.02; margin:.5rem 0 0; }

/* ---- the logo mark, stroked on between scenes ---- */
.world__mark{
  position:absolute; z-index:2;
  inset-block-start:50%; inset-inline-start:50%;
  translate:-50% -50%;
  width:clamp(150px,19vw,290px); height:auto;
  color:var(--bronze-2);
  opacity:0;
  filter:drop-shadow(0 0 22px rgba(0,0,0,.6));
  pointer-events:none;
  transition:opacity .45s var(--ease);
}
.world__mark path{
  stroke-dasharray:var(--len,320);
  stroke-dashoffset:var(--len,320);
}
.world__mark.is-on{ opacity:.92; }
.world__mark.is-on path{
  animation:markDraw .85s var(--ease) forwards;
}
.world__mark.is-on path:nth-child(2){ animation-delay:.07s; }
.world__mark.is-on path:nth-child(3){ animation-delay:.14s; }
@keyframes markDraw{ to{ stroke-dashoffset:0; } }

/* ---- scroll cue + progress rail ---- */
.world__cue{
  position:absolute; z-index:4;
  inset-block-end:clamp(20px,3vh,34px); inset-inline-start:50%;
  translate:-50% 0;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--head); font-size:.66rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  transition:opacity .5s var(--ease);
}
.world__cue i{
  display:block; width:1px; height:26px;
  background:linear-gradient(to bottom,var(--bronze-2),transparent);
  animation:cueDrop 1.9s var(--ease) infinite;
}
@keyframes cueDrop{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.5 } 50%{ transform:scaleY(1); opacity:1 } }
.world.is-moving .world__cue{ opacity:0; }

.world__prog{
  position:absolute; z-index:4;
  inset-block-end:0; inset-inline:0;
  height:2px; background:rgba(255,255,255,.08);
}
.world__prog span{
  display:block; height:100%; width:0%;
  background:linear-gradient(to right,var(--bronze-3),var(--bronze-2));
  transition:width .12s linear;
}
html[dir="rtl"] .world__prog span{
  background:linear-gradient(to left,var(--bronze-3),var(--bronze-2));
  margin-inline-start:auto;
}

/* ---- fallback: no scrubbing, just a still frame and the first caption ---- */
.world.is-static{ height:100svh; min-height:100vh; }
.world.is-static .world__vid{ display:none; }
.world.is-static .world__sticky{
  background:url('../scroll/poster-flight.jpg') center/cover no-repeat;
}
.world.is-static .world__cap[data-cap="0"]{ opacity:1; transform:none; pointer-events:auto; }
.world.is-static .world__prog, .world.is-static .world__mark{ display:none; }

@media (prefers-reduced-motion: reduce){
  .world__cap{ transition:none; }
  .world__cue i{ animation:none; }
  .world__mark.is-on path{ animation:none; stroke-dashoffset:0; }
}

/* ==========================================================================
   LUXURY PASS — dimensional buttons, refined type, depth
   Loaded last so it refines the base rules above rather than fighting them.
   ========================================================================== */

/* ---- type: tighter, more optical, more expensive-looking ---- */
.display{
  letter-spacing:-.028em;
  font-weight:800;
  text-wrap:balance;
}
.h2{ letter-spacing:-.02em; text-wrap:balance; }
.lede{ text-wrap:pretty; }
.eyebrow{
  font-size:.68rem; font-weight:700; letter-spacing:.26em;
  color:var(--bronze-2);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; flex:none;
  background:linear-gradient(to right,var(--bronze),transparent);
}
html[dir="rtl"] .eyebrow::before{ background:linear-gradient(to left,var(--bronze),transparent); }
html[lang="ku"] .display, html[lang="ar"] .display{ letter-spacing:0; font-weight:700; }

/* ---- 3D nav buttons ---- */
.nav{ perspective:700px; }
.nav__btn{
  position:relative;
  padding:.62em 1.05em;
  border-radius:3px;
  transform-style:preserve-3d;
  transition:transform .42s var(--ease), color .32s var(--ease), box-shadow .42s var(--ease);
  will-change:transform;
}
/* the raised face */
.nav__btn::before{
  content:"";
  position:absolute; inset:0;
  border-radius:3px;
  background:linear-gradient(160deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 42%, rgba(0,0,0,.30) 100%);
  border:1px solid rgba(255,255,255,.10);
  border-block-start-color:rgba(255,255,255,.22);
  border-block-end-color:rgba(0,0,0,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -2px 0 rgba(0,0,0,.42) inset,
    0 3px 7px rgba(0,0,0,.44);
  opacity:0;
  transition:opacity .38s var(--ease);
  z-index:-1;
}
.nav__btn:hover{
  transform:translateZ(16px) rotateX(9deg) translateY(-1px);
  color:var(--text);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.8);
}
.nav__btn:hover::before{ opacity:1; }
.nav__btn:active{ transform:translateZ(3px) rotateX(3deg) translateY(1px); }
.nav__btn.is-active::before,
.nav__btn[aria-expanded="true"]::before{
  opacity:1;
  border-block-start-color:var(--bronze-3);
  background:linear-gradient(160deg, rgba(192,137,76,.24) 0%, rgba(192,137,76,.07) 45%, rgba(0,0,0,.34) 100%);
}
.nav__btn.is-active{ color:var(--bronze-2); }

/* ---- 3D primary buttons ---- */
.btn{
  position:relative;
  border-radius:3px;
  transform-style:preserve-3d;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             color .32s var(--ease), filter .32s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,.13) inset,
    0 -2px 0 rgba(0,0,0,.34) inset,
    0 6px 16px -8px rgba(0,0,0,.72);
  will-change:transform;
}
.btn:hover{
  transform:translateY(-3px) scale(1.012);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -2px 0 rgba(0,0,0,.34) inset,
    0 16px 30px -12px rgba(0,0,0,.85);
}
.btn:active{
  transform:translateY(0) scale(.996);
  box-shadow:
    0 2px 5px -2px rgba(0,0,0,.7),
    0 -1px 0 rgba(0,0,0,.3) inset;
}
.btn--solid{
  background:linear-gradient(168deg, var(--bronze-2) 0%, var(--bronze) 44%, var(--bronze-3) 100%);
  border-color:var(--bronze-3);
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}
.btn--solid:hover{ filter:brightness(1.07) saturate(1.06); }
/* the sweep of light that crosses a solid button on hover */
.btn--solid::before{
  content:"";
  position:absolute; inset:0;
  border-radius:3px;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.42) 50%, transparent 68%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease);
  pointer-events:none; z-index:2;
}
.btn--solid:hover::before{ transform:translateX(120%); }
.btn--ghost{
  background:linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  backdrop-filter:blur(3px);
}

/* the unit enquire buttons get the same treatment, at a smaller scale */
.unit__btn{
  border-radius:3px;
  transition:transform .34s var(--ease), background .34s var(--ease),
             color .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 3px 9px -6px rgba(0,0,0,.7);
}
.unit__btn:hover{ transform:translateY(-2px); box-shadow:0 9px 18px -9px rgba(0,0,0,.85); }
.unit__btn:active{ transform:translateY(0); }
.unit__btn[disabled]{ box-shadow:none; transform:none; }

/* ---- header: real glass, and a hairline that earns its keep ---- */
.hdr{
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
}
.hdr::after{
  content:"";
  position:absolute; inset-inline:0; inset-block-end:0; height:1px;
  background:linear-gradient(to right, transparent, rgba(192,137,76,.42) 22%, rgba(192,137,76,.42) 78%, transparent);
  opacity:0; transition:opacity .5s var(--ease);
}
.hdr.is-stuck::after{ opacity:1; }

/* ---- cards and media gain a little physical depth ---- */
.unit, .pillar, .filters{
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset, 0 18px 40px -30px rgba(0,0,0,.9);
}
.unit:hover{ box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 30px 56px -32px rgba(0,0,0,1); }
.proj__media, .gal figure, .film{
  box-shadow:0 26px 60px -34px rgba(0,0,0,1);
}

/* ---- stat numbers: bronze gradient fill ---- */
.stat__n{
  background:linear-gradient(170deg, var(--text) 0%, var(--bronze-2) 62%, var(--bronze-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

@media (prefers-reduced-motion: reduce){
  .nav__btn, .btn, .unit__btn{ transition:color .2s linear; }
  .nav__btn:hover, .btn:hover, .unit__btn:hover{ transform:none; }
  .btn--solid::before{ display:none; }
}

/* ==========================================================================
   WHO WE ARE — 3D stage
   Two photographic plates at different depths inside one perspective scene.
   The scene rotates toward the pointer, so the plates separate and slide
   against each other the way real objects at different distances do.
   ========================================================================== */

.about3d__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,90px); align-items:center;
}
@media (max-width:900px){ .about3d__grid{ grid-template-columns:1fr; } }

.about3d__facts{
  margin:clamp(28px,3.5vw,44px) 0 0;
  display:grid; gap:1rem;
  border-block-start:1px solid var(--line); padding-block-start:1.6rem;
}
.about3d__facts div{ display:flex; gap:1rem; align-items:baseline; }
.about3d__facts dt{
  font-family:var(--head); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
  min-width:9em; flex:none;
}
html[lang="ku"] .about3d__facts dt, html[lang="ar"] .about3d__facts dt{
  letter-spacing:0; text-transform:none; font-size:.84rem;
}
.about3d__facts dd{ margin:0; color:var(--bronze-2); font-weight:600; }

/* the perspective viewport */
.about3d__stage{
  perspective:1100px;
  perspective-origin:50% 50%;
  padding:clamp(18px,3vw,40px);
}
.about3d__scene{
  position:relative;
  aspect-ratio:4/3.4;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.about3d__scene.is-live{ transition:transform .12s linear; }

/* every child sits at its own depth */
.about3d__plate,
.about3d__glow,
.about3d__rule{
  position:absolute;
  transform:translateZ(var(--z,0));
  transform-style:preserve-3d;
}

.about3d__plate{
  margin:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:var(--bg-3);
  box-shadow:0 40px 70px -34px rgba(0,0,0,1);
}
.about3d__plate img{ width:100%; height:100%; object-fit:cover; }

.about3d__plate--back{
  inset-block-start:0; inset-inline-end:0;
  width:66%; aspect-ratio:3/4;
}
.about3d__plate--front{
  inset-block-end:0; inset-inline-start:0;
  width:58%; aspect-ratio:3/4;
}

/* a bronze bar floating nearest the viewer — the depth cue that sells it */
.about3d__rule{
  inset-block-end:14%; inset-inline-start:44%;
  width:34%; height:3px;
  background:linear-gradient(to right,var(--bronze-2),var(--bronze-3));
  box-shadow:0 0 26px rgba(192,137,76,.65);
}

/* soft light well behind everything */
.about3d__glow{
  inset:6% 8%;
  background:radial-gradient(60% 60% at 50% 45%, rgba(192,137,76,.30), transparent 72%);
  filter:blur(28px);
}

@media (max-width:900px){
  .about3d__scene{ aspect-ratio:4/3.1; }
  .about3d__plate--back{ width:62%; }
  .about3d__plate--front{ width:55%; }
}

@media (prefers-reduced-motion: reduce){
  .about3d__scene{ transform:none !important; transition:none; }
}

/* ==========================================================================
   CURSOR — a small ring that trails the pointer and reacts to what it is over
   Pointer devices only. Touch and reduced-motion never see it, and the real
   system cursor is left alone so nothing becomes un-clickable if JS fails.
   ========================================================================== */

.cur{
  position:fixed; inset-block-start:0; inset-inline-start:0;
  z-index:9999; pointer-events:none;
  translate:-50% -50%;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.cur.is-on{ opacity:1; }

/* the ring lags slightly behind the dot — that lag is the whole effect */
.cur__ring{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(227,185,130,.62);
  transition:width .32s var(--ease), height .32s var(--ease),
             border-color .32s var(--ease), background .32s var(--ease),
             opacity .32s var(--ease);
  will-change:transform;
}
.cur__dot{
  position:fixed; inset-block-start:0; inset-inline-start:0;
  z-index:9999; pointer-events:none;
  width:5px; height:5px; border-radius:50%;
  background:var(--bronze-2);
  translate:-50% -50%;
  opacity:0;
  transition:opacity .35s var(--ease), width .3s var(--ease), height .3s var(--ease);
  will-change:transform;
}
.cur__dot.is-on{ opacity:1; }

/* over something clickable the ring opens up and fills faintly */
body.cur-link .cur__ring{
  width:56px; height:56px;
  border-color:var(--bronze-2);
  background:rgba(192,137,76,.13);
}
body.cur-link .cur__dot{ width:0; height:0; }

/* over the drag-to-compare slider it becomes a wider, flatter hint */
body.cur-drag .cur__ring{
  width:66px; height:66px;
  border-color:var(--bronze-2);
  background:rgba(192,137,76,.10);
}

/* pressed */
body.cur-down .cur__ring{ width:26px; height:26px; background:rgba(192,137,76,.22); }

/* only for real pointers */
@media (pointer: coarse){ .cur, .cur__dot{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cur, .cur__dot{ display:none; } }

/* ==========================================================================
   AFTER DARK — the night view section
   ========================================================================== */
.night__grid{
  display:grid; grid-template-columns:1.55fr 1fr;
  gap:clamp(14px,1.8vw,24px);
}
@media (max-width:820px){ .night__grid{ grid-template-columns:1fr; } }

.night__fig{
  position:relative; margin:0; overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-3);
  box-shadow:0 30px 64px -38px rgba(0,0,0,1);
}
.night__fig img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:16/10;
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease);
  filter:saturate(1.04);
}
.night__fig:hover img{ transform:scale(1.035); }
.night__fig--wide img{ aspect-ratio:16/9.4; }

.night__fig figcaption{
  position:absolute; inset-inline:0; inset-block-end:0;
  padding:clamp(30px,4vw,50px) clamp(16px,2vw,24px) clamp(14px,1.6vw,20px);
  font-family:var(--head); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
  background:linear-gradient(to top, rgba(8,8,10,.92), transparent);
}
html[lang="ku"] .night__fig figcaption,
html[lang="ar"] .night__fig figcaption{ letter-spacing:0; text-transform:none; font-size:.86rem; }

@media (prefers-reduced-motion: reduce){
  .night__fig img{ transition:none; }
  .night__fig:hover img{ transform:none; }
}