/* ============================================================
   ANDIJAN INVESTMENT PORTFOLIO
   Navy · gold · cream — cinematic editorial
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --navy-900:#060d1c;
  --navy-850:#08122a;
  --navy-800:#0a1733;
  --navy-700:#0d1f44;
  --navy-600:#142a55;
  --navy-500:#1d3a6e;
  --cream:#f4eddf;
  --cream-soft:#e7dcc6;
  --paper:#f6f1e7;
  --ink:#0b1322;
  --ink-soft:#33405a;
  --gold:#c8a24c;
  --gold-2:#dab86a;
  --gold-soft:#e7d3a0;
  --line-gold:rgba(231,211,160,0.20);
  --line-cream:rgba(11,19,34,0.12);
  --on-navy:#efe7d6;
  --muted-navy:rgba(239,231,214,0.60);
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(0.16,0.84,0.34,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  background:var(--navy-900);
  color:var(--on-navy);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:var(--navy-900); }

.mono{ font-family:var(--mono); }
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-2);
  font-weight:500;
}

/* ---------- film grain + vignette overlays ---------- */
.fx-grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  z-index:120; box-shadow:0 0 12px rgba(218,184,106,.6);
}

/* ---------- top brand bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.topbar.shrink{
  padding-top:14px; padding-bottom:14px;
  background:rgba(6,13,28,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-gold);
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand .logo{
  height:42px; width:auto; flex:none;
  filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.4));
}
.topbar.shrink .brand .logo{ height:36px; }
.brand .mark{
  width:30px; height:30px; flex:none; position:relative;
}
.brand .mark::before,.brand .mark::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--gold);
}
.brand .mark::after{ inset:8px; background:var(--gold); border:none; }
.brand .name{
  font-family:var(--serif); font-size:1.12rem; font-weight:600;
  letter-spacing:.01em; color:var(--cream);
}
.brand .name span{ color:var(--gold-2); font-style:italic; font-weight:500; }
.topbar-right{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.topbar .loc{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-navy);
}
@media (max-width:760px){ .topbar .loc{ display:none; } }

/* language switcher */
.langsw{ display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line-gold); border-radius:30px; background:rgba(6,13,28,.35); backdrop-filter:blur(6px); }
.langsw button{
  cursor:pointer; border:none; background:transparent; color:var(--muted-navy);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; font-weight:500;
  padding:6px 11px; border-radius:24px; line-height:1; transition:all .35s var(--ease); white-space:nowrap;
}
.langsw button:hover{ color:var(--gold-soft); }
.langsw button.active{ background:var(--gold); color:var(--navy-900); }
@media (max-width:420px){ .langsw button{ padding:6px 8px; font-size:.62rem; } }

/* ---------- side dot nav ---------- */
.dotnav{
  position:fixed; right:clamp(14px,2.2vw,30px); top:50%;
  transform:translateY(-50%); z-index:110;
  display:flex; flex-direction:column; gap:13px; align-items:flex-end;
}
.dotnav button{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; color:var(--muted-navy);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
}
.dotnav .dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  border:1.5px solid rgba(231,211,160,.45); background:transparent;
  transition:all .4s var(--ease);
}
.dotnav .lab{
  opacity:0; transform:translateX(6px); transition:all .35s var(--ease);
  white-space:nowrap; text-transform:uppercase;
}
.dotnav button:hover .lab{ opacity:1; transform:translateX(0); color:var(--gold-soft); }
.dotnav button:hover .dot{ border-color:var(--gold); }
.dotnav button.active .dot{ background:var(--gold); border-color:var(--gold); transform:scale(1.35); box-shadow:0 0 0 4px rgba(200,162,76,.18); }
.dotnav button.active .lab{ opacity:1; transform:translateX(0); color:var(--gold-soft); }
@media (max-width:880px){ .dotnav{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.02);
}
.hero-bg .slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transform:scale(1.12); transition:opacity 1.6s var(--ease);
  will-change:opacity,transform;
}
.hero-bg .slide.on{ opacity:1; animation:kenburns 9s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.18); } }
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 110% at 80% 28%, rgba(6,13,28,.04), rgba(6,13,28,.46) 72%),
    linear-gradient(180deg, rgba(6,13,28,.55) 0%, rgba(6,13,28,.12) 40%, rgba(6,13,28,.68) 100%);
}
.hero-veil::after{
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 200px 40px rgba(6,13,28,.55);
}
.hero-inner{
  position:relative; width:100%;
  max-width:1280px; margin:0 auto; padding:0 clamp(22px,5vw,64px);
}
.hero h1{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(3.1rem,9.2vw,8.4rem); line-height:.96;
  letter-spacing:-.015em; margin:.18em 0 .26em;
  text-shadow:0 4px 40px rgba(6,13,28,.85), 0 2px 10px rgba(6,13,28,.7), 0 1px 3px rgba(6,13,28,.6);
}
.hero h1 .it{ font-style:italic; color:var(--gold-soft); font-weight:400; }
.hero .lead{
  max-width:46ch; font-size:clamp(1rem,1.5vw,1.22rem);
  color:rgba(239,231,214,.92); font-weight:300; line-height:1.62;
  text-shadow:0 1px 18px rgba(6,13,28,.6);
}
.hero .rule{
  width:0; height:1px; background:linear-gradient(90deg,var(--gold),transparent);
  margin:30px 0; max-width:340px;
}
.hero-meta{
  display:flex; gap:clamp(26px,4vw,58px); flex-wrap:wrap; margin-top:46px;
}
.hero-meta .m .n{
  font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.6rem);
  color:var(--gold-2); line-height:1; font-weight:600;
}
.hero-meta .m .l{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-navy); margin-top:9px;
}
.scrollcue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; z-index:5;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted-navy);
}
.scrollcue .bar{ width:1px; height:42px; background:linear-gradient(180deg,var(--gold),transparent); position:relative; overflow:hidden; }
.scrollcue .bar::after{ content:''; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold-soft); animation:cue 1.9s var(--ease) infinite; }
@keyframes cue{ 0%{ top:-55%; } 60%,100%{ top:105%; } }

/* hero reveal animation */
.reveal-line{ overflow:hidden; }
.reveal-line > *{ display:block; transform:translateY(110%); opacity:0; }
.hero.ready .reveal-line > *{ animation:lineUp 1.1s var(--ease-out) forwards; }
.hero.ready .reveal-line.d1>*{ animation-delay:.15s; }
.hero.ready .reveal-line.d2>*{ animation-delay:.30s; }
.hero.ready .reveal-line.d3>*{ animation-delay:.46s; }
@keyframes lineUp{ to{ transform:translateY(0); opacity:1; } }
.hero.ready .rule{ animation:ruleGrow 1.1s var(--ease-out) .6s forwards; }
@keyframes ruleGrow{ to{ width:340px; } }
.hero.ready .fade-up{ animation:fadeUp 1s var(--ease-out) .72s both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:translateY(0);} }

/* =========================================================
   OVERVIEW (cream break)
   ========================================================= */
.overview{
  background:var(--paper); color:var(--ink);
  padding:clamp(80px,11vw,150px) 0; position:relative;
}
.overview .wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(22px,5vw,64px); }
.overview .ov-head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end;
  margin-bottom:clamp(48px,7vw,90px);
}
.overview h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,4.4vw,3.7rem); line-height:1.04; letter-spacing:-.01em;
}
.overview h2 .it{ font-style:italic; color:var(--gold); }
.overview .ov-lead{ color:var(--ink-soft); font-size:1.05rem; font-weight:300; max-width:42ch; }
.ov-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-cream);
}
.ov-stats .s{ padding:36px 26px 8px 0; border-right:1px solid var(--line-cream); }
.ov-stats .s:last-child{ border-right:none; }
.ov-stats .s .n{
  font-family:var(--serif); font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:1; color:var(--ink); font-weight:600; letter-spacing:-.02em;
}
.ov-stats .s .n .u{ color:var(--gold); }
.ov-stats .s .l{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:14px;
}
@media (max-width:820px){
  .overview .ov-head{ grid-template-columns:1fr; gap:22px; }
  .ov-stats{ grid-template-columns:1fr 1fr; }
  .ov-stats .s:nth-child(2){ border-right:none; }
  .ov-stats .s{ border-bottom:1px solid var(--line-cream); padding-right:20px; }
}

/* project index list */
.ov-index{ margin-top:clamp(48px,7vw,84px); border-top:1px solid var(--line-cream); }
.ov-row{
  display:grid; grid-template-columns:64px 1.4fr 1fr auto;
  align-items:center; gap:20px; padding:22px 6px;
  border-bottom:1px solid var(--line-cream); cursor:pointer;
  position:relative; color:var(--ink); transition:color .4s var(--ease);
}
.ov-row .idx{ font-family:var(--mono); font-size:.8rem; color:var(--gold); }
.ov-row .nm{ font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.7rem); font-weight:500; transition:transform .45s var(--ease); }
.ov-row .sc{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.ov-row .go{ font-size:1.1rem; color:var(--ink-soft); transition:transform .45s var(--ease), color .4s; justify-self:end; }
.ov-row::after{ content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--gold); transition:width .5s var(--ease); }
.ov-row:hover{ color:var(--navy-700); }
.ov-row:hover .nm{ transform:translateX(12px); }
.ov-row:hover .go{ transform:translateX(8px); color:var(--gold); }
.ov-row:hover::after{ width:100%; }
@media (max-width:680px){
  .ov-row{ grid-template-columns:42px 1fr auto; }
  .ov-row .sc{ display:none; }
}

/* =========================================================
   PROJECT SECTIONS (cinematic full-bleed)
   ========================================================= */
.project{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; isolation:isolate; padding:120px 0;
}
.project .pbg{ position:absolute; inset:-8% 0 -8% 0; z-index:-2; will-change:transform; }
.project .pbg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 1.4s var(--ease);
}
.project.in-view .pbg img{ transform:scale(1.12); transition:transform 7s linear; }
.project .pveil{ position:absolute; inset:0; z-index:-1; }
.project.left .pveil{
  background:linear-gradient(100deg, rgba(6,13,28,.93) 0%, rgba(6,13,28,.80) 34%, rgba(6,13,28,.30) 64%, rgba(6,13,28,.55) 100%);
}
.project.right .pveil{
  background:linear-gradient(260deg, rgba(6,13,28,.93) 0%, rgba(6,13,28,.80) 34%, rgba(6,13,28,.30) 64%, rgba(6,13,28,.55) 100%);
}
.project .pveil::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 200px 40px rgba(6,13,28,.7); background:linear-gradient(180deg, rgba(6,13,28,.5), transparent 18%, transparent 82%, rgba(6,13,28,.6)); }

.project .pwrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(22px,5vw,64px); }
.project.right .pwrap{ display:flex; justify-content:flex-end; }
.pcard{ max-width:600px; position:relative; }

.pcard .ghost{
  position:absolute; top:-.36em; left:-.06em; z-index:-1;
  font-family:var(--serif); font-weight:700; line-height:.8;
  font-size:clamp(8rem,20vw,17rem); color:transparent;
  -webkit-text-stroke:1px rgba(231,211,160,.13);
  pointer-events:none; user-select:none;
}
.pcard .ptag{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.pcard .ptag .sec{ font-family:var(--mono); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2); }
.pcard .ptag .sdot{ width:7px; height:7px; border-radius:50%; background:var(--accent,#c8a24c); box-shadow:0 0 0 4px rgba(255,255,255,.05); }
.pcard .ptag .loc{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-navy); margin-left:auto; }
.pcard h3{
  font-family:var(--serif); font-weight:500; color:var(--cream);
  font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1.0; letter-spacing:-.018em;
}
.pcard .tline{ font-size:clamp(1.05rem,1.7vw,1.35rem); color:rgba(239,231,214,.84); font-weight:300; margin-top:18px; max-width:40ch; line-height:1.5; }

.pstats{ display:grid; grid-template-columns:repeat(4,auto); gap:clamp(18px,3vw,42px); margin:38px 0 36px; }
.pstats .st .n{ font-family:var(--serif); font-size:clamp(1.5rem,2.8vw,2.5rem); font-weight:600; color:var(--cream); line-height:1; white-space:nowrap; }
.pstats .st .n .u{ color:var(--gold-2); font-size:.62em; }
.pstats .st .n .p{ color:var(--gold-2); }
.pstats .st .l{ font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-navy); margin-top:10px; max-width:13ch; }
@media (max-width:560px){ .pstats{ grid-template-columns:1fr 1fr; gap:22px; } }

.btn-explore{
  display:inline-flex; align-items:center; gap:13px; cursor:pointer;
  background:transparent; border:1px solid var(--line-gold);
  color:var(--cream); font-family:var(--mono); font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; padding:15px 26px;
  border-radius:40px; transition:all .45s var(--ease); position:relative; overflow:hidden;
}
.btn-explore .arr{ transition:transform .45s var(--ease); }
.btn-explore::before{ content:''; position:absolute; inset:0; background:var(--gold); transform:translateX(-101%); transition:transform .5s var(--ease); z-index:-1; }
.btn-explore:hover{ color:var(--navy-900); border-color:var(--gold); }
.btn-explore:hover::before{ transform:translateX(0); }
.btn-explore:hover .arr{ transform:translateX(5px); }

/* reveal mechanics for sections */
.r-up{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.in-view .r-up{ opacity:1; transform:translateY(0); }
.in-view .r-up.s1{ transition-delay:.08s; }
.in-view .r-up.s2{ transition-delay:.18s; }
.in-view .r-up.s3{ transition-delay:.28s; }
.in-view .r-up.s4{ transition-delay:.40s; }
.in-view .r-up.s5{ transition-delay:.52s; }
@media (prefers-reduced-motion: reduce){
  .r-up{ opacity:1 !important; transform:none !important; }
  .reveal-line>*{ transform:none !important; opacity:1 !important; animation:none !important; }
  .hero-bg .slide.on{ animation:none; }
  .pcard .ghost{ display:none; }
}

/* =========================================================
   CLOSING
   ========================================================= */
.closing{
  position:relative; background:var(--navy-850); padding:clamp(90px,12vw,150px) 0 0;
  overflow:hidden;
}
.closing .cwrap{ max-width:1180px; margin:0 auto; padding:0 clamp(22px,5vw,64px); text-align:center; }
.closing .orn{ color:var(--gold); font-size:1.4rem; letter-spacing:.5em; margin-bottom:26px; }
.closing h2{ font-family:var(--serif); font-weight:500; color:var(--cream); font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.015em; }
.closing h2 .it{ font-style:italic; color:var(--gold-soft); }
.closing .clead{ max-width:50ch; margin:26px auto 0; color:rgba(239,231,214,.7); font-weight:300; font-size:1.08rem; }
.recap{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:clamp(48px,7vw,80px); }
.recap .rc{ position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer; border-radius:3px; }
.recap .rc img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); filter:grayscale(.35) brightness(.78); }
.recap .rc::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(6,13,28,.9)); }
.recap .rc .rl{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:13px 12px; text-align:left; }
.recap .rc .rl .ri{ font-family:var(--mono); font-size:.6rem; color:var(--gold-2); letter-spacing:.1em; }
.recap .rc .rl .rn{ font-family:var(--serif); font-size:.94rem; color:var(--cream); line-height:1.1; margin-top:3px; }
.recap .rc:hover img{ transform:scale(1.08); filter:grayscale(0) brightness(.92); }
@media (max-width:780px){ .recap{ grid-template-columns:repeat(2,1fr); } }

.foot{ margin-top:clamp(70px,9vw,120px); border-top:1px solid var(--line-gold); padding:34px 0 40px; }
.foot .frow{ max-width:1180px; margin:0 auto; padding:0 clamp(22px,5vw,64px); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot .fl{ display:flex; align-items:center; gap:13px; font-family:var(--serif); color:var(--cream); font-size:1.05rem; }
.foot .fl .logo{ height:34px; width:auto; flex:none; filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
.foot .fcontact{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; }
.foot .fcontact a{ color:var(--gold-soft); text-decoration:none; transition:color .3s var(--ease); }
.foot .fcontact a:hover{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.foot .fcontact .fdot{ color:var(--muted-navy); }
.foot .fr{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-navy); }
@media (max-width:720px){ .foot .frow{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* =========================================================
   DETAIL MODAL
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(4,9,20,.6); backdrop-filter:blur(3px);
}
.modal.open{ display:block; }
.modal-card{
  position:absolute; inset:0; background:var(--navy-800);
  display:grid; grid-template-columns:1.05fr .95fr;
  transform:translateY(28px) scale(.985); opacity:0;
  transition:opacity .5s var(--ease), transform .55s var(--ease);
  overflow:hidden;
}
.modal.open .modal-card{ transform:none; opacity:1; }
@media (min-width:1100px){
  .modal-card{ inset:clamp(20px,4vh,52px) clamp(20px,5vw,90px); border-radius:6px; box-shadow:0 50px 130px rgba(0,0,0,.6); }
}

/* left visual column */
.m-visual{ position:relative; background:var(--navy-900); overflow:hidden; min-height:0; }
.m-stage{ position:absolute; inset:0; }
.m-stage img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:opacity .7s var(--ease), transform 5s linear; }
.m-stage img.on{ opacity:1; transform:scale(1.1); }
.m-stage::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,13,28,.4) 0%, transparent 26%, transparent 56%, rgba(6,13,28,.92)); pointer-events:none; }
.m-caption{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(20px,3vw,38px); }
.m-caption .mc-sec{ font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2); }
.m-caption .mc-lab{ font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.6rem); color:var(--cream); margin-top:6px; }
.m-thumbs{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; gap:8px; padding:clamp(14px,2vw,22px); overflow-x:auto; transform:translateY(101%); transition:transform .5s var(--ease); scrollbar-width:none; }
.m-thumbs::-webkit-scrollbar{ display:none; }
.m-visual:hover .m-thumbs, .m-visual.show-thumbs .m-thumbs{ transform:translateY(0); }
.m-visual:hover .m-caption{ opacity:0; transition:opacity .3s; }
.m-thumbs .t{ flex:none; width:74px; height:54px; border-radius:3px; overflow:hidden; cursor:pointer; opacity:.55; border:1.5px solid transparent; transition:all .35s var(--ease); }
.m-thumbs .t img{ width:100%; height:100%; object-fit:cover; }
.m-thumbs .t:hover{ opacity:.85; }
.m-thumbs .t.on{ opacity:1; border-color:var(--gold); }
.m-fullbtn{
  position:absolute; top:clamp(16px,2vw,24px); left:clamp(16px,2vw,24px); z-index:5;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:rgba(6,13,28,.55); backdrop-filter:blur(8px); border:1px solid var(--line-gold);
  color:var(--cream); font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; padding:9px 15px; border-radius:30px; transition:all .35s var(--ease);
}
.m-fullbtn:hover{ background:var(--gold); color:var(--navy-900); border-color:var(--gold); }

/* right content column */
.m-body{ position:relative; overflow-y:auto; padding:clamp(34px,4.5vw,68px) clamp(28px,4vw,60px) clamp(40px,5vw,70px); }
.m-body::-webkit-scrollbar{ width:8px; }
.m-body::-webkit-scrollbar-thumb{ background:rgba(231,211,160,.2); border-radius:4px; }
.m-num{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,4rem); color:transparent; -webkit-text-stroke:1px rgba(231,211,160,.3); line-height:.8; font-weight:700; }
.m-sec{ font-family:var(--mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2); margin:20px 0 12px; display:flex; align-items:center; gap:10px; }
.m-sec .sdot{ width:7px; height:7px; border-radius:50%; background:var(--accent,#c8a24c); }
.m-body h3{ font-family:var(--serif); font-weight:500; color:var(--cream); font-size:clamp(2rem,4vw,3.1rem); line-height:1.02; letter-spacing:-.015em; }
.m-body .m-loc{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-navy); margin-top:14px; }
.m-body .m-desc{ color:rgba(239,231,214,.82); font-weight:300; font-size:1.05rem; line-height:1.62; margin-top:22px; max-width:52ch; }

.m-h{ font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:40px 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line-gold); }

.m-highlights{ list-style:none; display:grid; gap:16px; }
.m-highlights li{ display:flex; gap:14px; align-items:flex-start; color:rgba(239,231,214,.86); font-size:.97rem; font-weight:300; line-height:1.45; }
.m-highlights li .tick{ flex:none; width:16px; height:16px; margin-top:3px; position:relative; }
.m-highlights li .tick::before{ content:''; position:absolute; left:0; top:6px; width:9px; height:9px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg); }

.m-fin{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-gold); border:1px solid var(--line-gold); }
.m-fin .f{ background:var(--navy-800); padding:18px 20px; }
.m-fin .f .fl{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-navy); }
.m-fin .f .fv{ font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.5rem); color:var(--cream); margin-top:7px; font-weight:500; }
.m-fin .f .fv .u{ color:var(--gold-2); }
@media (max-width:520px){ .m-fin{ grid-template-columns:1fr; } }

.m-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:46px; padding-top:26px; border-top:1px solid var(--line-gold); }
.m-nav button{ background:none; border:none; cursor:pointer; color:var(--muted-navy); text-align:left; transition:color .35s; max-width:46%; }
.m-nav button:hover{ color:var(--gold-soft); }
.m-nav button:disabled{ opacity:.25; cursor:default; }
.m-nav .nv-k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; }
.m-nav .nv-n{ font-family:var(--serif); font-size:1.1rem; color:var(--cream); margin-top:5px; }
.m-nav .next{ text-align:right; }

.m-close{
  position:absolute; top:clamp(16px,2vw,26px); right:clamp(16px,2vw,26px); z-index:8;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(6,13,28,.5); backdrop-filter:blur(8px); border:1px solid var(--line-gold);
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:all .4s var(--ease);
}
.m-close:hover{ background:var(--gold); color:var(--navy-900); transform:rotate(90deg); }

@media (max-width:1000px){
  .modal-card{ grid-template-columns:1fr; grid-template-rows:42vh 1fr; }
  .m-visual:hover .m-thumbs{ transform:translateY(0); }
}

/* =========================================================
   LIGHTBOX (full passport)
   ========================================================= */
.lightbox{ position:fixed; inset:0; z-index:300; display:none; background:rgba(4,8,18,.95); }
.lightbox.open{ display:flex; align-items:center; justify-content:center; }
.lightbox .lb-inner{ max-width:96vw; max-height:92vh; overflow:auto; transform:scale(.96); opacity:0; transition:all .5s var(--ease); border-radius:4px; box-shadow:0 40px 120px rgba(0,0,0,.7); }
.lightbox.open .lb-inner{ transform:scale(1); opacity:1; }
.lightbox .lb-inner img{ width:auto; max-width:96vw; }
.lightbox .lb-close{ position:absolute; top:22px; right:24px; width:46px; height:46px; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.08); border:1px solid var(--line-gold); color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:all .4s var(--ease); }
.lightbox .lb-close:hover{ background:var(--gold); color:var(--navy-900); transform:rotate(90deg); }
.lightbox .lb-hint{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-navy); }

/* loader */
.loader{ position:fixed; inset:0; z-index:400; background:var(--navy-900); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px; transition:opacity .8s var(--ease), visibility .8s; }
.loader.hide{ opacity:0; visibility:hidden; }
.loader .lmark{ width:46px; height:46px; position:relative; animation:spinmark 2.4s linear infinite; }
.loader .lmark::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--line-gold); border-top-color:var(--gold); }
.loader .lmark::after{ content:''; position:absolute; inset:16px; border-radius:50%; background:var(--gold); }
@keyframes spinmark{ to{ transform:rotate(360deg); } }
.loader .lt{ font-family:var(--mono); font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted-navy); }

/* =========================================================
   RTL (Arabic)
   ========================================================= */
[dir="rtl"] body{ font-family:var(--sans); }
[dir="rtl"] .project.left .pwrap{ display:flex; justify-content:flex-end; }
[dir="rtl"] .project.right .pwrap{ display:flex; justify-content:flex-start; }
[dir="rtl"] .pcard .ghost{ left:auto; right:-.06em; }
[dir="rtl"] .project.left .pveil{
  background:linear-gradient(260deg, rgba(6,13,28,.93) 0%, rgba(6,13,28,.80) 34%, rgba(6,13,28,.30) 64%, rgba(6,13,28,.55) 100%);
}
[dir="rtl"] .project.right .pveil{
  background:linear-gradient(100deg, rgba(6,13,28,.93) 0%, rgba(6,13,28,.80) 34%, rgba(6,13,28,.30) 64%, rgba(6,13,28,.55) 100%);
}
[dir="rtl"] .ptag .loc{ margin-left:0; margin-right:auto; }
[dir="rtl"] .dotnav{ right:auto; left:clamp(14px,2.2vw,30px); }
[dir="rtl"] .dotnav{ align-items:flex-start; }
[dir="rtl"] .modal-card{ direction:rtl; }
[dir="rtl"] .m-fullbtn{ left:auto; right:clamp(16px,2vw,24px); }
[dir="rtl"] .m-close{ right:auto; left:clamp(16px,2vw,26px); }
[dir="rtl"] .m-nav .next{ text-align:left; }
[dir="rtl"] .hero .rule{ background:linear-gradient(270deg,var(--gold),transparent); }
[dir="rtl"] .ov-row{ direction:rtl; }
[dir="rtl"] .ov-stats .s{ border-right:none; border-left:1px solid var(--line-cream); padding:36px 0 8px 26px; }
[dir="rtl"] .ov-stats .s:last-child{ border-left:none; }