:root{--bg:#e3e1dc;--fg:#222;--muted:#6e6e6e;--cream:#e3e1dc;--gold:#caa451;--line:#e7e3da}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(251,248,242,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:40px;height:40px;border-radius:999px;overflow:hidden}
a{text-decoration:none;color:inherit}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--gold);background:#fff}
.btn.primary{background:var(--gold);color:#fff}
.hero{background:var(--bg);padding:54px 0}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:980px){.hero .wrap{grid-template-columns:1.1fr .9fr}}
.hero .image{border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:300px;background:#fff}
.hero .image img{width:100%;height:100%;object-fit:cover;display:block}
.section{padding:64px 0}
.grid-3{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.card .media{position:relative;padding-top:62.5%; /* 16:10 */ overflow:hidden}
.card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:14px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
footer{background:var(--bg);border-top:1px solid var(--line);padding:18px 0;margin-top:40px}


/* ===== RNO Header (clean, sticky) ===== */
.rno-header{position:sticky;top:0;z-index:1000;background:rgba(227,225,220,.92);backdrop-filter:blur(8px);border-bottom:1px solid #d9d6cf}
.rno-nav{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.rno-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.rno-logo{display:block;width:40px;height:40px;border-radius:999px;object-fit:cover}
.rno-title{font-weight:800;letter-spacing:.2px}
.rno-links{display:flex;gap:18px}
.rno-links a{text-decoration:none;color:#2a2a2a}
.rno-links a:hover{color:#0a3b2e}
.rno-cta{padding:10px 14px;border-radius:12px;border:1px solid #caa451;background:#caa451;color:#fff;text-decoration:none}
.rno-cta:hover{filter:brightness(.96)}
.rno-links a.is-active{color:#0a3b2e;font-weight:800}
@media(max-width:860px){
  .rno-links{display:none}
  .rno-title{display:none}
}


/* ===== RNO Typographic Refinement (sleek & classy) ===== */
:root{
  --bg:#e3e1dc; --fg:#222; --muted:#6e6e6e; --cream:#e3e1dc; --gold:#caa451; --line:#d9d6cf;
  --radius:16px; --shadow:0 6px 18px rgba(0,0,0,.06);
}
html,body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial,
               Noto Naskh Arabic, Noto Sans Arabic, Tahoma, "Geeza Pro", "Dubai", sans-serif;
  font-weight: 400;
  letter-spacing: .1px;
  line-height: 1.6;
}
h1,h2,h3{letter-spacing:.2px}
h1{font-weight:800}
h2{font-weight:700}
h3{font-weight:700}
.card{border-radius:var(--radius); box-shadow:var(--shadow)}
.btn{border-radius:12px}
.rno-map-embed{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}


/* ===== RNO Premium Polish: borders, shadows, hover ===== */
:root{
  --line:#dcd8d0;
  --shadow: 0 4px 14px rgba(0,0,0,.05);
  --shadow-hover: 0 10px 24px rgba(0,0,0,.08);
}
.card{border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.btn{transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; box-shadow:0 2px 8px rgba(0,0,0,.04)}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10); filter:brightness(.98)}
.kpi{border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.04)}
footer{border-top:1px solid var(--line)}
.rno-map-embed{box-shadow:0 6px 18px rgba(0,0,0,.06)}
/* Reduce image jitter on hover */
.card .media img{will-change:transform}


/* ===== RNO Animations (premium, subtle) ===== */
:root{
  --reveal-distance: 22px;
  --shine: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
}
/* Initial hidden state for revealables */
.reveal{opacity:0; transform:translateY(var(--reveal-distance)); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}
/* Directional variants */
.reveal.left{transform:translateX(-var(--reveal-distance))}
.reveal.left.in{transform:translateX(0)}
.reveal.right{transform:translateX(var(--reveal-distance))}
.reveal.right.in{transform:translateX(0)}
.reveal.zoom{transform:scale(.98); filter:saturate(.96);}
.reveal.zoom.in{transform:scale(1); filter:saturate(1)}

/* Card hover shine */
.card{position:relative; overflow:hidden}
.card::before{
  content:""; position:absolute; top:-100%; left:-150%; width:120%; height:300%;
  background:var(--shine); transform:rotate(10deg); opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.card:hover::before{animation:rnoShine 1.2s ease; opacity:1}
@keyframes rnoShine{
  0%{left:-150%}
  100%{left:150%}
}

/* Hero fade-in on load */
.hero{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s ease}
.hero.in{opacity:1; transform:translateY(0)}

/* Sticky header blur depth on scroll */
.rno-header{transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease}
.rno-header.scrolled{background:rgba(227,225,220,.82); box-shadow:0 6px 22px rgba(0,0,0,.08); backdrop-filter:blur(10px)}

/* Button subtle pulse on hover (very light) */
.btn:hover{transform:translateY(-2px) scale(1.01)}


/* ===== RNO Brand Intro (once per session) ===== */
.rno-intro{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:opacity 2s ease, transform 2s ease; opacity:1;
}
.rno-intro.out{opacity:0; pointer-events:none; transform:scale(1.01)}
.rno-intro .box{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 34px; border-radius:20px; background:#fff; border:1px solid var(--line);
  box-shadow:0 18px 48px rgba(0,0,0,.12);
  animation:rnoPop .6s ease both;
}
.rno-intro .logo{width:84px; height:84px; border-radius:999px; overflow:hidden}
.rno-intro .logo img{width:100%; height:100%; object-fit:cover; display:block}
.rno-intro .brand{font-weight:900; letter-spacing:.3px}
@keyframes rnoPop{
  0%{transform:translateY(10px) scale(.96); opacity:.0; filter:blur(2px)}
  100%{transform:translateY(0) scale(1); opacity:1; filter:none}
}


/* ===== RNO Golden Tagline styling ===== */
.rno-intro .tagline{
  font-style: italic;
  color: var(--gold);
  opacity: .95;
  letter-spacing: .2px;
}
footer .rno-tagline{
  color:#6e6e6e;
  font-size:.95rem;
  line-height:1.6;
}


/* ===== RNO Display Typeface (Nastaliq for FA/AR headlines) ===== */
@font-face{
  font-family: 'RNO-Nastaliq';
  src: url('assets/fonts/NotoNastaliqUrdu.woff2') format('woff2'),
       url('assets/fonts/NotoNastaliqUrdu.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Hero headline uses Nastaliq in FA/AR; EN remains existing display font */
.hero-title{
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}
[data-lang="fa"] .hero-title,
[data-lang="ar"] .hero-title{
  font-family: 'RNO-Nastaliq', 'Noto Nastaliq Urdu', 'IranNastaliq', serif;
  font-feature-settings: "liga" 1, "rlig" 1, "calt" 1;
}
/* Classy italics for section headings, not body */
h2, h3{ font-style: italic; }
/* Optional subtle italic accent for small lead paragraphs under titles */
.lead-italic{ font-style: italic; opacity:.95 }
/* Keep body readable (no global italics) */