/* ═══════════════════════════════════════════════════════════
   RONAY ISTANBUL · ULTRA LUXURY REDESIGN v3
   Photo-driven · Dark editorial · Investment grade
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Inter:wght@300;400;500;600&family=Noto+Serif+Arabic:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Noto+Kufi+Arabic:wght@100..900&display=swap');
:root {
  /* Palette */
  --obsidian:  #020204;
  --void:      #07070A;
  --deep:      #0D0D12;
  --ink:       #131318;
  --ink2:      #1A1A22;
  --ink3:      #22222C;
  --ink4:      #2C2C38;

  --gold-pale: #F5EDD8;
  --gold-light:#DFB96C;
  --gold:      #C9A55A;
  --gold-mid:  #A67C3C;
  --gold-dark: #6B4E20;
  --gold-glow: rgba(201,165,90,.4);

  --white:  #FDFBF7;
  --silver: #D4D0C8;
  --mist:   #9A9690;
  --smoke:  #5A5854;
  --ash:    #32302E;

  --border:     rgba(201,165,90,.14);
  --border-mid: rgba(201,165,90,.28);
  --border-hi:  rgba(201,165,90,.5);
  --glass:      rgba(13,13,18,.75);
  --glass-lite: rgba(13,13,18,.55);

  --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:   'Alexandria', system-ui, -apple-system, sans-serif;
  --arabic: 'Noto Kufi Arabic', serif;

  --max: 1300px;
  --gap: clamp(1.5rem, 5vw, 3rem);
  --section: clamp(5rem, 10vw, 9rem);

  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body {
  background: var(--obsidian);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[dir=rtl] { font-family: var(--arabic) }
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }
::selection { background:var(--gold); color:var(--obsidian) }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* ── Type ── */
h1,h2,h3,h4 { font-family:var(--serif); line-height:1.06; letter-spacing:-.025em; color:var(--white) }
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3 { font-family:var(--arabic); letter-spacing:0; line-height:1.3 }
p { color:var(--silver); line-height:1.8 }
[dir=rtl] p { font-size:1.05rem }

/* ── Layout ── */
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gap) }
section { position:relative; overflow:hidden }

/* ── Eyebrow ── */
.eyebrow {
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:1.5rem; font-family:var(--sans);
}
[dir=rtl] .eyebrow { letter-spacing:.04em; font-size:.78rem; font-family:var(--arabic) }
.eyebrow i { display:block; width:2rem; height:1px; background:linear-gradient(90deg,var(--gold),transparent) }
[dir=rtl] .eyebrow i { background:linear-gradient(270deg,var(--gold),transparent) }

/* ── Gold rule ── */
.rule { width:3rem; height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:1.5rem 0 }
[dir=rtl] .rule { background:linear-gradient(270deg,var(--gold),transparent) }

/* ═══════════ CURSOR ═══════════ */
#cr,#cd { position:fixed; border-radius:50%; pointer-events:none; z-index:9999; top:0; left:0; transform:translate(-50%,-50%) }
#cr { width:36px; height:36px; border:1.5px solid rgba(201,165,90,.5); transition:transform .07s,width .25s,height .25s,background .25s }
#cd { width:5px; height:5px; background:var(--gold); transition:transform 40ms }
@media(pointer:coarse){#cr,#cd{display:none}}

/* ═══════════ NAV ═══════════ */
#nav {
  position:fixed; inset:0 0 auto; z-index:500;
  padding:1.75rem 0;
  transition: padding .4s var(--ease), background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
#nav.on { padding:1rem 0; background:rgba(2,2,4,.9); border-color:var(--border); backdrop-filter:blur(24px) }
.nav-row { display:flex; align-items:center; justify-content:space-between; gap:2rem }
.logo { font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--gold); letter-spacing:.12em; flex-shrink:0 }
.logo small { font-size:.55em; color:var(--smoke); font-weight:300; margin-inline-start:.35em; vertical-align:baseline; letter-spacing:.06em }
.nav-links { display:flex; align-items:center; gap:2.5rem; list-style:none }
.nav-links a {
  font-size:.7rem; color: #ffffff; font-weight: 600; letter-spacing:.15em; text-transform:uppercase;
  padding:.5rem 0; position:relative;
  transition:color .2s; min-height:44px; display:flex; align-items:center;
}
[dir=rtl] .nav-links a { letter-spacing:.03em; font-size:.78rem }
.nav-links a::after { content:''; position:absolute; bottom:-1px; inset-inline:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:inline-start end; transition:transform .25s var(--ease) }
.nav-links a:hover { color:var(--gold-light) }
.nav-links a:hover::after { transform:scaleX(1) }
li a.nav-cta {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:0 1.5rem; min-height:44px;
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--obsidian); background:var(--gold);
  transition:background .2s, transform .2s var(--spring);
}
li a.nav-cta:hover { background:var(--gold-light); color: #ffffff; transform:translateY(-1px) }
li a.nav-cta:active { transform:scale(.97) }
.lang-pill {
  min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  color:var(--gold); border:1px solid var(--border-mid);
  transition:background .2s, color .2s;
}
.lang-pill:hover { background:var(--gold); color:var(--obsidian) }
.hamburger { display:none; width:44px; height:44px; align-items:center; justify-content:center; color:var(--white); font-size:1.1rem; transition:color .2s; flex-shrink:0 }
.hamburger:hover { color:var(--gold) }

/* ═══════════ HERO — Cinematic Slideshow ═══════════ */
#hero { min-height:100dvh; display:grid; place-items:center; isolation:isolate }

/* Slideshow container */
.hero-slides { position:absolute; inset:0; overflow:hidden }

/* Individual slide */
.hslide {
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.hslide.active { opacity:1; z-index:1 }
.hslide.prev   { opacity:0; z-index:0 }

/* Slide image with Ken Burns */
.hslide-img {
  position:absolute; inset:-8%; /* extra room for zoom */
  background-size:cover; background-position:center;
  will-change:transform;
}
.hslide.active .hslide-img { animation:var(--kb) 18s ease-out forwards }

/* Ken Burns variants — different zoom/pan per slide */
@keyframes kb-zoom-in   { from{transform:scale(1) translate(0,0)} to{transform:scale(1.12) translate(-1%,-1%)} }
@keyframes kb-zoom-left { from{transform:scale(1.06) translate(2%,0)} to{transform:scale(1.14) translate(-1%,-1%)} }
@keyframes kb-zoom-up   { from{transform:scale(1.08) translate(0,2%)} to{transform:scale(1.16) translate(-1%,-2%)} }
@keyframes kb-zoom-right{ from{transform:scale(1.05) translate(-2%,1%)} to{transform:scale(1.13) translate(1%,-1%)} }
@keyframes kb-zoom-slow { from{transform:scale(1.02) translate(0,0)} to{transform:scale(1.10) translate(-1.5%,-1%)} }

/* Slide overlay — gradient layers */
.hslide-over {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(2,2,4,.38) 0%,rgba(2,2,4,.06) 35%,rgba(2,2,4,.42) 72%,rgba(2,2,4,1) 100%),
    linear-gradient(90deg,rgba(2,2,4,.45) 0%,rgba(2,2,4,.08) 45%,rgba(2,2,4,.08) 55%,rgba(2,2,4,.3) 100%);
}

/* Slide caption badge — bottom-left */
.hslide-caption {
  position:absolute; bottom:clamp(7rem,14vh,10rem); inset-inline-start:var(--gap);
  z-index:3; display:flex; flex-direction:column; gap:.35rem;
  opacity:0; transform:translateY(10px);
  transition:opacity .7s .6s ease, transform .7s .6s ease;
}
.hslide.active .hslide-caption { opacity:1; transform:translateY(0) }
.hsc-tag { font-size:.58rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-family:var(--sans) }
[dir=rtl] .hsc-tag { letter-spacing:.04em; font-size:.68rem }
.hsc-name { font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.4rem); color:var(--white); line-height:1.1; text-shadow:0 2px 24px rgba(0,0,0,.5) }
[dir=rtl] .hsc-name { font-family:var(--arabic) }
.hsc-dist { font-size:.72rem; color:var(--gold-light); letter-spacing:.08em }

/* Slide counter & dots — bottom-right */
.hero-dots {
  position:absolute; bottom:clamp(7rem,14vh,10rem); inset-inline-end:var(--gap);
  z-index:10; display:flex; flex-direction:column; align-items:flex-end; gap:.75rem;
}
.hero-counter { font-size:.65rem; color:var(--smoke); letter-spacing:.1em; font-family:var(--sans) }
.dots-row { display:flex; gap:.4rem; align-items:center }
.dot {
  width:20px; height:2px; background:rgba(255,255,255,.25);
  transition:width .4s var(--ease), background .4s;
  cursor:pointer; border:none; padding:0; flex-shrink:0;
}
.dot.on { width:32px; background:var(--gold) }

/* Progress bar — very bottom */
.hero-progress {
  position:absolute; bottom:0; inset-inline-start:0; height:2px; z-index:10;
  background:var(--gold); transform-origin:inline-start;
  transition:none;
}
.hero-progress.run { transition:width var(--slide-dur,4500ms) linear }

/* Grain texture */
.hero-grain {
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.hero-body { position:relative; z-index:5; text-align:center; padding:clamp(7rem,16vh,12rem) var(--gap) clamp(5rem,10vh,8rem); max-width:1080px }

.hero-tag {
  display:inline-flex; align-items:center; gap:1rem;
  font-size:.65rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:2rem;
  opacity:0; animation:up .9s .15s var(--ease) forwards;
  background: #00000050; padding: 10px;
}
[dir=rtl] .hero-tag { letter-spacing:.05em; font-size:.76rem }
.hero-tag-dash { width:2.5rem; height:1px; background:var(--gold-light) }

h1.hero-h1 {
  font-size:clamp(2.8rem,7.5vw,5.8rem); font-weight:300; line-height:1;
  letter-spacing:-.03em; color:var(--white); margin-bottom:1.5rem;
  opacity:0; animation:up 1s .3s var(--ease) forwards;
}
[dir=rtl] h1.hero-h1 { font-family:var(--arabic); line-height:1.2; letter-spacing:0; font-size:clamp(2.2rem,6vw,4.8rem) }
h1.hero-h1 em { display:block; color:var(--gold-light); font-style:italic; font-weight:400 }
[dir=rtl] h1.hero-h1 em { font-style:normal }

.hero-sub {
  font-size:clamp(1rem,1.8vw,1.2rem); color:var(--silver); max-width:680px;
  margin:0 auto 2.5rem; font-weight:300; line-height:1.75;
  opacity:0; animation:up 1s .48s var(--ease) forwards;
}
.hero-btns {
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
  opacity:0; animation:up 1s .64s var(--ease) forwards;
}

.hero-stats {
  position:absolute; bottom:clamp(1.5rem,3vh,3rem); inset-inline-end:var(--gap);
  display:flex; flex-direction:column; gap:.25rem;
  text-align:end; opacity:0; animation:up 1s 1s var(--ease) forwards; z-index:5;
}
.hs-tag { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.hs-num { font-family:var(--serif); font-size:2.6rem; color:var(--white); line-height:1 }
[dir=rtl] .hs-num { font-family:var(--arabic) }
.hs-sub { font-size:.7rem; color:var(--smoke) }

.hero-badge2 {
  position:absolute; bottom:clamp(1.5rem,3vh,3rem); inset-inline-start:var(--gap);
  display:flex; gap:1rem; align-items:center;
  opacity:0; animation:up 1s 1.1s var(--ease) forwards; z-index:5;
}
.hb2-icon { width:40px; height:40px; border:1px solid var(--border-mid); display:grid; place-items:center; color:var(--gold); font-size:1rem; flex-shrink:0 }
.hb2-text { font-size:.72rem; color:var(--mist); line-height:1.5; max-width:160px }
.hb2-text strong { display:block; color:var(--gold-pale); margin-bottom:.1rem }

.hero-scroll {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:fadeIn .8s 1.4s ease forwards; z-index:5;
}
.hs-line { width:1px; height:44px; background:linear-gradient(to bottom,transparent,var(--gold-mid)); position:relative; overflow:hidden }
.hs-line::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,var(--gold),transparent); animation:drip 1.8s ease-in-out infinite }
@keyframes drip { 0%{transform:translateY(-100%)} 100%{transform:translateY(200%)} }
.hs-label { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--smoke) }

/* ═══════════ TICKER ═══════════ */
#ticker {
  background:var(--ink); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:.9rem 0; overflow:hidden; position:relative; z-index:10;
}
.ticker-inner { display:flex; gap:0; width:max-content; animation:roll 32s linear infinite }
.ticker-inner:hover { animation-play-state:paused }
@keyframes roll { to { transform:translateX(-50%) } }
[dir=rtl] .ticker-inner { animation-name:rollR }
@keyframes rollR { to { transform:translateX(50%) } }
.tick { display:inline-flex; align-items:center; gap:.9rem; padding:0 2.5rem; white-space:nowrap; border-inline-end:1px solid var(--border) }
.tick-dot { width:4px; height:4px; border-radius:50%; background:var(--gold-dark); flex-shrink:0 }
.tick-lbl { font-size:.65rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke) }
[dir=rtl] .tick-lbl { letter-spacing:.03em }
.tick-val { font-family:var(--serif); font-size:1.3rem; color:var(--gold); letter-spacing:-.01em }
[dir=rtl] .tick-val { font-family:var(--arabic) }

/* ═══════════ SNAPSHOT — glass cards ═══════════ */
#snap { padding:var(--section) 0; background:var(--void) }
.snap-head { text-align:center; margin-bottom:4rem }
.snap-head h2 { font-size:clamp(2rem,4.5vw,3.6rem); margin-bottom:.75rem }
.snap-head p { max-width:500px; margin:0 auto; font-size:.95rem }
.snap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.sc {
  background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(20px);
  padding:2.5rem 2rem; text-align:center; position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s var(--spring), box-shadow .3s;
}
.sc::before { content:''; position:absolute; inset-inline:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity .3s }
.sc::after { content:''; position:absolute; inset-inline-end:1rem; bottom:1rem; width:1.25rem; height:1.25rem; border-inline-end:1px solid var(--border); border-bottom:1px solid var(--border) }
.sc:hover { border-color:var(--border-mid); transform:translateY(-5px); box-shadow:0 28px 56px -16px rgba(0,0,0,.7),0 0 0 1px var(--border-mid) }
.sc:hover::before { opacity:1 }
.sc:hover .sc-val { color:var(--gold-light) }
.sc-val { font-family:var(--serif); font-size:clamp(2.5rem,4vw,3.5rem); color:var(--gold); line-height:1; margin-bottom:.3rem; letter-spacing:-.02em; transition:color .3s }
[dir=rtl] .sc-val { font-family:var(--arabic) }
.sc-unit { font-size:1rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:.4rem }
[dir=rtl] .sc-unit { letter-spacing:.03em; font-size:.75rem }
.sc-desc { font-size:1rem; color:var(--smoke) }

/* ═══════════ STORY — full photo background ═══════════ */
#story { padding:0 }
.story-photo {
  position:relative; min-height:90vh; display:flex; align-items:flex-end;
  background:url('../images/7a6e5820-eaaa-4f83-93e8-937a926440de-1748248037584-278144.jpg')
    center center/cover no-repeat;
}
.story-photo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(2,2,4,.25) 0%,rgba(2,2,4,.85) 70%,rgba(2,2,4,1) 100%),
             linear-gradient(90deg,rgba(2,2,4,.5) 0%,transparent 60%);
}
.story-photo-content { position:relative; z-index:2; padding:clamp(3rem,6vw,6rem) var(--gap); max-width:780px }
.story-photo-content h2 { font-size:clamp(2.2rem,5vw,4rem); margin-bottom:1.5rem }
.story-photo-content p { font-size:1rem; margin-bottom:1.25rem; max-width:620px }
[dir=rtl] .story-photo-content p { font-size:1.05rem }
.story-badges { display:flex; flex-direction:column; gap:.6rem; margin-top:2rem }
.story-badge {
  display:inline-flex; align-items:center; gap:.75rem; font-size:.82rem;
  color:var(--silver); padding:.6rem 1rem; border:1px solid var(--border);
  background:rgba(7,7,10,.6); backdrop-filter:blur(8px); width:fit-content;
  transition:border-color .2s, background .2s;
}
.story-badge:hover { border-color:var(--gold-dark); background:rgba(7,7,10,.85) }
.story-badge-dot { width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold-glow); flex-shrink:0 }

/* Story split section */
.story-split {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--deep);
}
.story-img {
  position:relative; overflow:hidden; min-height:520px;
}
.story-img img { width:100%; height:100%; object-fit:cover; transition:transform 8s ease-out }
.story-img:hover img { transform:scale(1.05) }
.story-img-over { position:absolute; inset:0; background:linear-gradient(135deg,rgba(2,2,4,.4) 0%,transparent 55%) }
.story-float {
  position:absolute; bottom:2rem; inset-inline-start:2rem;
  background:var(--glass); border:1px solid var(--border-mid);
  backdrop-filter:blur(16px); padding:1.25rem 1.75rem;
}
.sf-val { font-family:var(--serif); font-size:2.4rem; color:var(--gold); line-height:1 }
[dir=rtl] .sf-val { font-family:var(--arabic) }
.sf-lbl { font-size:.65rem; text-transform:uppercase; letter-spacing:.14em; color:var(--smoke) }
[dir=rtl] .sf-lbl { letter-spacing:.03em; font-size:.72rem }
.story-copy {
  padding:clamp(3rem,6vw,6rem) clamp(2rem,5vw,5rem);
  display:flex; flex-direction:column; justify-content:center;
  border-inline-start:1px solid var(--border);
}
.story-copy h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); margin-bottom:1.25rem }
.story-copy p { margin-bottom:1rem }
.story-copy-badges { display:flex; flex-direction:column; gap:.6rem; margin-top:1.5rem }
.scb {
  display:flex; align-items:center; gap:.75rem; font-size:.82rem;
  color:var(--silver); padding:.6rem 1rem; border:1px solid var(--border);
  background:var(--ink); transition:border-color .2s;
}
.scb:hover { border-color:var(--border-mid) }
.scb-dot { width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px var(--gold-glow); flex-shrink:0 }

/* ═══════════ SUITE GALLERY ═══════════ */
#gallery { display:grid; grid-template-columns:1.2fr 1fr; gap:0; height:520px }
.gal-main {
  position:relative; overflow:hidden;
  background:url('https://images.pexels.com/photos/18285946/pexels-photo-18285946.jpeg?auto=compress&cs=tinysrgb&w=1200&h=900&fit=crop')
    center center/cover no-repeat;
  transition:filter .4s;
}
.gal-main::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(2,2,4,.8) 0%,rgba(2,2,4,.1) 50%,transparent 100%) }
.gal-main:hover { filter:brightness(1.08) }
.gal-main-text { position:absolute; bottom:2rem; inset-inline-start:2rem; z-index:2 }
.gal-main-text h3 { font-size:1.6rem; margin-bottom:.25rem }
.gal-main-text p { font-size:.82rem; color:var(--silver) }
.gal-col { display:grid; grid-template-rows:1fr 1fr; gap:0 }
.gal-cell {
  position:relative; overflow:hidden;
  transition:filter .4s;
}
.gal-cell:hover { filter:brightness(1.1) }
.gal-cell::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(2,2,4,.7) 0%,transparent 60%) }
.gal-cell img { width:100%; height:100%; object-fit:cover; transition:transform 6s ease-out }
.gal-cell:hover img { transform:scale(1.06) }
.gal-label { position:absolute; bottom:1.25rem; inset-inline-start:1.25rem; z-index:2; font-size:.7rem; color:var(--gold-light); letter-spacing:.12em; text-transform:uppercase }
[dir=rtl] .gal-label { letter-spacing:.03em }

/* ═══════════ LOCATION ═══════════ */
#location {
  padding:var(--section) 0; position:relative;
  background:url('../images/pexels-photo-34432865.jpeg')
    center 40%/cover no-repeat fixed;
}
#location::before { content:''; position:absolute; inset:0; background:rgba(2,2,4,.82) }
.loc-inner { position:relative; z-index:2 }
.loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.loc-text h2 { font-size:clamp(2rem,4vw,3.4rem); margin-bottom:1rem }
.loc-tag { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; display:block }
[dir=rtl] .loc-tag { letter-spacing:.03em; font-size:.75rem }
.loc-text p { margin-bottom:2rem; font-size:.95rem }
[dir=rtl] .loc-text p { font-size:1.05rem }
.landmarks { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:1.5rem 0 }
.lm {
  padding:1rem 1.25rem; border:1px solid var(--border);
  background:rgba(13,13,18,.7); backdrop-filter:blur(12px);
  transition:border-color .2s, background .2s;
}
.lm:hover { border-color:var(--gold-mid); background:rgba(13,13,18,.9) }
.lm-name { font-size:1.1rem; font-weight:500; color:var(--white); margin-bottom:.2rem }
.lm-dist { font-size:1rem; color:var(--gold); display:flex; align-items:center; gap:.4rem }
.lm-dot { width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 5px var(--gold-glow) }
.loc-view {
  display:inline-flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem;
  border:1px solid var(--gold-dark); background:rgba(201,165,90,.06);
  font-size:.82rem; color:var(--gold-pale);
}

/* SVG Map */
.map-wrap { position:relative; aspect-ratio:1 }
.map-svg { width:100%; height:100% }
.mc { fill:none; stroke:var(--border); stroke-width:.8 }
.mpl { fill:none; stroke:var(--gold); opacity:0; animation:mp 3s ease-out infinite }
.mpl:nth-child(2){animation-delay:1s} .mpl:nth-child(3){animation-delay:2s}
@keyframes mp { 0%{opacity:.6;r:8;stroke-width:2} 100%{opacity:0;r:55;stroke-width:.4} }
.mcd { fill:var(--gold); filter:drop-shadow(0 0 10px rgba(201,165,90,.8)); animation:glow 2s ease-in-out infinite alternate }
@keyframes glow { from{filter:drop-shadow(0 0 6px rgba(201,165,90,.5))} to{filter:drop-shadow(0 0 18px rgba(201,165,90,1))} }
.mld { fill:var(--gold-dark); stroke:var(--gold-mid); stroke-width:1 }
.mlt { font-family:var(--sans); font-size:9px; fill:var(--smoke) }
.mln { stroke:var(--gold-dark); stroke-width:.5; stroke-dasharray:3 2; fill:none; opacity:.45 }

/* ═══════════ MARKET ═══════════ */
#market { padding:var(--section) 0; background:var(--obsidian) }
.mkt-head { text-align:center; margin-bottom:4rem }
.mkt-head h2 { font-size:clamp(2rem,4.5vw,3.6rem); margin-bottom:.75rem }
.mkt-bars { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:3rem }
.mkt-bar {
  padding:3rem 2.5rem 2.5rem; background:var(--ink2); position:relative; overflow:hidden;
  transition:background .3s;
}
.mkt-bar::before { content:''; position:absolute; top:0; inset-inline-start:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-dark)); width:0; transition:width 1.6s var(--ease) }
.mkt-bar.vis::before { width:var(--w,75%) }
.mkt-bar:hover { background:var(--ink3) }
.mkt-bar-val { font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.8rem); color:var(--gold); line-height:1; margin-bottom:.6rem }
[dir=rtl] .mkt-bar-val { font-family:var(--arabic) }
.mkt-bar-lbl { font-size:.85rem; color:var(--smoke); line-height:1.55 }
[dir=rtl] .mkt-bar-lbl { font-size:.95rem }
.mkt-quote {
  max-width:800px; margin:0 auto; padding:3.5rem;
  border:1px solid var(--border-mid); position:relative; text-align:center;
}
.mkt-quote::before { content:'\201C'; font-family:var(--serif); font-size:8rem; color:var(--gold); opacity:.1; position:absolute; top:-1.5rem; inset-inline-start:2rem; line-height:1 }
.mkt-quote p { font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.55rem); color:var(--white); font-style:italic; line-height:1.65 }
[dir=rtl] .mkt-quote p { font-family:var(--arabic); font-style:normal }

/* ═══════════ MECHANICS ═══════════ */
#mechanics {
  padding:var(--section) 0;
  background:var(--ink2); border-top:1px solid var(--border);
}
.mech-head { text-align:center; margin-bottom:4rem }
.mech-head h2 { font-size:clamp(2rem,4.5vw,3.6rem); margin-bottom:.75rem }
.mech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:.75rem }
.mc-card {
  background:var(--ink3); padding:2.5rem 1.75rem; position:relative; overflow:hidden;
  transition:background .25s;
}
.mc-card:hover { background:var(--ink4) }
.mc-n { font-family:var(--serif); font-size:3.8rem; color:var(--ink4); -webkit-text-stroke:1px var(--ash); line-height:1; margin-bottom:1.5rem; transition:color .25s,-webkit-text-stroke .25s }
.mc-card:hover .mc-n { color:var(--ink); -webkit-text-stroke-color:var(--gold-dark) }
.mc-title { font-size:1.4rem; font-family:var(--serif); color:var(--white); margin-bottom:.6rem; line-height:1.15 }
[dir=rtl] .mc-title { font-family:var(--arabic) }
.mc-desc { font-size:1rem; color:var(--smoke); line-height:1.7 }
[dir=rtl] .mc-desc { font-size:.9rem }
.mc-bar { position:absolute; bottom:0; inset-inline:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:inline-start; transition:transform .3s var(--ease) }
.mc-card:hover .mc-bar { transform:scaleX(1) }
.mech-note { text-align:center; font-size:.72rem; color:var(--ash); padding:1rem; border:1px dashed var(--border); border-top:none }

/* ═══════════ RETURNS — photo bg ═══════════ */
#returns { position:relative; padding:var(--section) 0 }
.returns-photo {
  position:absolute; inset:0;
  background:url('../images/pexels-photo-10343928.jpeg')
    center center/cover no-repeat;
  filter:brightness(.35) saturate(.8);
}
.returns-inner { position:relative; z-index:2 }
.ret-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.ret-txt h2 { font-size:clamp(2rem,4vw,3.2rem); margin-bottom:1.25rem }
.ret-txt p { margin-bottom:.75rem; font-size:.95rem }
[dir=rtl] .ret-txt p { font-size:1.05rem }
.ret-cards { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-mid) }
.rc {
  background:var(--glass); border:0; backdrop-filter:blur(24px);
  padding:2.5rem 1.5rem; text-align:center; position:relative; overflow:hidden;
  transition:transform .25s var(--spring);
}
.rc::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 110%,rgba(201,165,90,.07),transparent 60%) }
.rc:hover { transform:translateY(-4px) }
.rc-lbl { font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke); margin-bottom:.75rem; display:block }
[dir=rtl] .rc-lbl { letter-spacing:.03em; font-size:.68rem }
.rc-val { font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.2rem); color:var(--gold-light); line-height:1 }
[dir=rtl] .rc-val { font-family:var(--arabic) }

/* ═══════════ TIMELINE ═══════════ */
#timeline { padding:var(--section) 0; background:var(--void); border-top:1px solid var(--border) }
.tl-head { text-align:center; margin-bottom:4rem }
.tl-head h2 { font-size:clamp(2rem,4.5vw,3.6rem) }
.tl-track { position:relative; max-width:780px; margin:0 auto }
.tl-track::before { content:''; position:absolute; top:0; bottom:0; inset-inline-start:3.5rem; width:1px; background:linear-gradient(to bottom,transparent,var(--gold-dark) 12%,var(--gold-dark) 88%,transparent) }
.tl-step { display:flex; gap:2rem; align-items:flex-start; padding:1.75rem 0; border-bottom:1px solid rgba(255,255,255,.04); position:relative }
.tl-step:last-child { border-bottom:none }
.tl-left { width:3.5rem; flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding-top:.15rem }
.tl-ph { font-size:.56rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; text-align:center }
[dir=rtl] .tl-ph { letter-spacing:.03em; font-size:.64rem }
.tl-dot { width:11px; height:11px; border-radius:50%; background:var(--obsidian); border:2px solid var(--gold-mid); display:grid; place-items:center; position:relative; z-index:1 }
.tl-dot i { width:3px; height:3px; border-radius:50%; background:var(--gold); transition:transform .25s var(--spring),box-shadow .25s }
.tl-step:hover .tl-dot i { transform:scale(1.8); box-shadow:0 0 8px var(--gold-glow) }
.tl-c { flex:1 }
.tl-c h3 { font-size:1.5rem; font-family:var(--serif); color:var(--white); margin-bottom:.3rem }
[dir=rtl] .tl-c h3 { font-family:var(--arabic) }
.tl-c p { font-size:1rem }
[dir=rtl] .tl-c p { font-size:.95rem }

/* ═══════════ EOI FORM ═══════════ */
#contact { padding:var(--section) 0; background:var(--obsidian); position:relative }
#contact::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(201,165,90,.05),transparent 65%); pointer-events:none }
.contact-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; align-items:start }
.contact-lhs h2 { font-size:clamp(2rem,4vw,3.2rem); margin-bottom:1.25rem }
.contact-lhs p { margin-bottom:2rem; font-size:.95rem }
[dir=rtl] .contact-lhs p { font-size:1.05rem }
.co-items { display:flex; flex-direction:column; gap:.75rem }
.co-item { padding:1rem 1.25rem; border:1px solid var(--border); background:var(--ink2) }
.co-lbl { font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--smoke); margin-bottom:.2rem; display:block }
[dir=rtl] .co-lbl { letter-spacing:.03em; font-size:.66rem }
.co-val { font-size:.85rem; color:var(--gold-pale) }
[dir=rtl] .co-val { font-size:.95rem }

/* Form */
.eoi { display:flex; flex-direction:column; gap:1.25rem }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.fg { display:flex; flex-direction:column; gap:.45rem }
.fg label { font-size:.65rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke) }
[dir=rtl] .fg label { letter-spacing:.03em; font-size:.74rem }
.fg input,.fg select,.fg textarea {
  background:var(--ink3); border:1px solid var(--border); color:var(--white);
  font-family:var(--sans); font-size:1rem; padding:.8rem 1rem;
  min-height:44px; outline:none; width:100%;
  transition:border-color .2s, background .2s;
  -webkit-appearance:none; border-radius:0;
}
[dir=rtl] .fg input,[dir=rtl] .fg select,[dir=rtl] .fg textarea { font-family:var(--arabic); font-size:1.05rem }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--gold-mid); background:var(--ink4) }
.fg select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23C9A55A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem }
[dir=rtl] .fg select { background-position:left 1rem center; padding-right:1rem; padding-left:2.5rem }
.fg select option { background:var(--ink3) }
.fg textarea { resize:vertical; min-height:110px }
.req { color:var(--gold-light); margin-inline-start:2px }
.f-privacy { font-size:.72rem; color:var(--ash); line-height:1.6; display:flex; gap:.75rem; align-items:flex-start }
.f-success { display:none; text-align:center; padding:3rem 2rem; border:1px solid var(--gold-dark); background:rgba(201,165,90,.04) }
.f-success-icon { font-size:2rem; margin-bottom:1rem; display:block }
.f-success p { color:var(--gold-pale); font-size:1rem }

/* ═══════════ BUTTONS ═══════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  min-height:44px; padding:0 2rem; cursor:pointer; border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .2s var(--spring);
  position:relative; overflow:hidden; white-space:nowrap; text-decoration:none;
  font-family:var(--sans);
}
[dir=rtl] .btn { letter-spacing:.03em; font-size:.78rem; font-family:var(--arabic) }
.btn:active { transform:scale(.97) }
.btn-gold { background:var(--gold); color:var(--obsidian) }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(201,165,90,.35) }
.btn-ghost { background:transparent; color:var(--silver); border-color:var(--border-mid) }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold-light); transform:translateY(-1px) }
.btn-full { width:100% }

/* ═══════════ COMPANY / LEGAL STRIP ═══════════ */
#company {
  padding:2.5rem 0; background:var(--ink); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border-soft);
}
.company-inner { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; justify-content:space-between }
.company-logo { font-family:var(--serif); font-size:1.1rem; color:var(--gold); letter-spacing:.1em; flex-shrink:0 }
.company-details { display:flex; flex-direction:column; gap:.2rem }
.company-name { font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--silver); text-transform:uppercase }
.company-tax { font-size:.68rem; color:var(--smoke); display:flex; align-items:center; gap:.5rem }
.company-tax span { color:var(--ash) }
.company-tag { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dark) }
[dir=rtl] .company-tag { letter-spacing:.03em }

/* ═══════════ DISCLAIMER ═══════════ */
#disclaimer { padding:2rem 0; background:var(--void) }
.disc { max-width:900px; margin:0 auto; text-align:center }
.disc h4 { font-size:.6rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ash); margin-bottom:.75rem; font-family:var(--sans) }
[dir=rtl] .disc h4 { letter-spacing:.03em; font-size:.7rem }
.disc p { font-size:.72rem; color:var(--ash); line-height:1.85 }
[dir=rtl] .disc p { font-size:.82rem }

/* ═══════════ FOOTER ═══════════ */
footer { padding:2rem 0; background:var(--ink2); border-top:1px solid var(--border) }
.foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem }
.foot-logo { font-family:var(--serif); font-size:1.2rem; color:var(--gold); letter-spacing:.12em }
.foot-mid { text-align:center }
.foot-tag { font-size:.62rem; letter-spacing:.1em; color:var(--ash); display:block }
.foot-conf { font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); display:block; margin-top:.2rem }
.foot-r { text-align:end; display:flex; flex-direction:column; gap:.5rem; align-items:flex-end }
.foot-copy { font-size:.72rem; color:var(--ash) }

/* ═══════════ REVEAL ═══════════ */
.rv { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease),transform .8s var(--ease) }
.rv.in { opacity:1; transform:translateY(0) }
.d1{transition-delay:.08s} .d2{transition-delay:.17s} .d3{transition-delay:.28s} .d4{transition-delay:.42s}

@keyframes up { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1024px){
  .snap-grid{grid-template-columns:repeat(3,1fr)}
  .story-split{grid-template-columns:1fr}
  .story-img{min-height:320px;order:-1}
  #gallery{grid-template-columns:1fr;height:auto}
  .gal-main{height:320px}
  .gal-col{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gal-cell{height:220px}
  .loc-grid,.ret-layout,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .landmarks{grid-template-columns:1fr 1fr}
  .mech-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero-stats,.hero-badge2{display:none}
}
@media(max-width:640px){
  .snap-grid{grid-template-columns:1fr 1fr}
  .mkt-bars{grid-template-columns:1fr}
  .ret-cards{grid-template-columns:1fr 1fr}
  .mech-grid{grid-template-columns:1fr}
  .landmarks{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .foot{flex-direction:column;text-align:center}
  .foot-r{align-items:center;text-align:center}
  .company-inner{flex-direction:column;text-align:center}
  #location{background-attachment:scroll}
  .hero-dots, .hslide-caption { bottom:clamp(1rem,1vh,1rem); }
  .hero-scroll { bottom: 7rem; }
}
#navLinks.open {
  display:flex!important; position:fixed; inset:0;
  background:rgba(2,2,4,.97); backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center;
  gap:2.5rem; z-index:600;
}
#navLinks.open li a { font-size:1.25rem; letter-spacing:.08em; color:var(--mist) }
#navLinks.open li a:hover { color:var(--gold-light) }