/* =========================================================
   Mozn Al Khaleej — Bilingual Profile Site
   Mobile-first · LTR/RTL aware · Flex/Grid
   ========================================================= */

:root{
  --brand-900:#063525;
  --brand-800:#0b4a35;
  --brand-700:#14614a;

  --accent-500:#a89e81;

  --bg-0:#ffffff;
  --bg-50:#f5f5f6;
  --bg-100:#edf1ee;

  --text-900:#1b2622;
  --text-700:#3f4744;
  --text-600:#5f6664;

  --border:#e2e5e6;

  --shadow: 0 10px 30px rgba(0,0,0,.08);

  --radius-lg: 18px;
  --radius-md: 14px;

  --container: 1120px;

  /* Default = English fonts */
  --font-sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
}

html[lang="ar"]{
  /* Arabic PDF uses Tajawal + Cairo */
  --font-sans: "Tajawal", "Cairo", system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
  --font-display: "Tajawal", "Cairo", system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-900);
  background: var(--bg-50);
  line-height:1.55;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

/* Accessibility */
.skip-link{
  position:absolute;
  top:10px;
  left:10px;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  transform:translateY(-140%);
  transition:.2s transform;
  z-index:9999;
}
.skip-link:focus{ transform:translateY(0); }

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{ display:flex; align-items:center; }
.brand-logo{ height:44px; width:auto; }

.site-nav{
  display:none;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.site-nav a{
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-700);
  padding:10px 10px;
  border-radius:12px;
}
.site-nav a:hover{ background:rgba(6,53,37,.06); }

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.01em;
  transition: .15s transform, .15s filter, .15s background;
}
.btn:active{ transform: translateY(1px); }

.btn-ghost{
  background:transparent;
  border-color:rgba(0,0,0,.10);
}
.btn-ghost:hover{ background:rgba(0,0,0,.04); }

.btn-primary{
  background:var(--accent-500);
  color:#0c221b;
}
.btn-primary:hover{ filter:brightness(1.03); }

.btn-secondary{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.btn-secondary:hover{ background:rgba(255,255,255,.08); }

.btn-icon{ font-size:16px; }

/* Hero */
.hero{
  position:relative;
  min-height: 90vh;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(6,53,37,.92) 0%, rgba(6,53,37,.72) 50%, rgba(6,53,37,.92) 100%),
    url("../assets/hero.jpeg") center/cover no-repeat;
  display:flex;
  align-items:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1000px 400px at 10% 0%, rgba(168,158,129,.25), transparent 55%);
}

.hero-inner{
  position:relative;
  padding: 72px 0 66px;
}

.hero-content{ max-width: 780px; }

.kicker{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}

.hero-title{
  margin:18px 0 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size: clamp(34px, 4vw, 54px);
  line-height:1.06;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 16px 0 14px;
}

.tag{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-sub{
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:14px;
}

.hero-cta{
  margin-top:22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Sections */
.section{ background:var(--bg-50); }
.section-alt{ background:var(--bg-100); }

.section-topbar{
  background:var(--brand-900);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
}

.section-title{
  margin:0;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.section-body{
  padding: 28px 0 56px;
}

.mt-lg{ margin-top:18px; }
.mt-xl{ margin-top:26px; }

.stack{ display:flex; flex-direction:column; }
.gap-md{ gap:12px; }
.gap-lg{ gap:16px; }
.gap-xl{ gap:22px; }

/* Cards */
.card{
  background:var(--bg-0);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 18px;
  box-shadow: var(--shadow);
}

.card-xl{ padding:22px 22px; }

.card-dark{
  background:var(--brand-900);
  border-color: rgba(255,255,255,.12);
  color:#fff;
}
.card-dark .muted{ color: rgba(255,255,255,.78); }

.card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.card-title{
  margin:0;
  font-size:18px;
  font-weight:700;
}

.card-text{
  margin: 0;
  color:var(--text-700);
}
.card-dark .card-text{ color: rgba(255,255,255,.9); }

.display-sm{
  margin: 6px 0 10px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-500);
  font-weight:700;
}
.card-dark .display-sm{ color:rgba(255,255,255,.86); }

.muted{ color:var(--text-600); margin:0; }

.divider{
  border:0;
  border-top:1px solid var(--border);
  margin:16px 0;
}

.icon-circle{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(6,53,37,.08);
  color: var(--brand-900);
  font-weight:700;
}
.icon-circle--dark{
  background: rgba(255,255,255,.12);
  color:#fff;
}

.quote{
  margin:14px 0 0;
  padding:14px 14px;
  border-left:4px solid var(--accent-500);
  background: rgba(168,158,129,.10);
  border-radius: 12px;
  color: var(--text-700);
}
html[dir="rtl"] .quote{ border-left:0; border-right:4px solid var(--accent-500); }

.card-dark .quote{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
}

.bullets{
  margin: 12px 0 0;
  padding-inline-start: 18px;
  color: var(--text-700);
}
.card-dark .bullets{ color: rgba(255,255,255,.90); }

.bullets li{ margin: 8px 0; }

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.pill{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  font-size:13px;
  color:#fff;
}

/* Mini cards */
.mini-card{
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(168,158,129,.10), rgba(255,255,255,0));
}
.mini-card h4{
  margin:0 0 8px;
  font-size:14px;
  font-weight:800;
  color:var(--brand-900);
}
.mini-card p{ margin:0; color:var(--text-700); font-size:13px; }

/* Grid */
.grid{ display:grid; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }

/* Strategy special */
.strategy-balance{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding: 8px 0 4px;
}
.balance-pill{
  padding: 10px 14px;
  border-radius:999px;
  border:1px solid rgba(6,53,37,.18);
  background:#fff;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
}
.balance-divider{
  width:56px;
  height:2px;
  background: var(--accent-500);
  border-radius:999px;
}

.chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.chip{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(6,53,37,.14);
  background: rgba(6,53,37,.04);
  font-size:13px;
  font-weight:700;
  color: var(--brand-900);
}

.stepper{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top:16px;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px dashed rgba(6,53,37,.22);
  border-radius:14px;
  background: rgba(168,158,129,.08);
}
.step-n{
  width:28px; height:28px;
  border-radius:999px;
  display:grid; place-items:center;
  background: var(--brand-900);
  color:#fff;
  font-weight:800;
  font-size:13px;
}

/* Sector cards */
.sector-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
.sector-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: rgba(168,158,129,.20);
  color: var(--brand-900);
  font-size:20px;
}

/* Ecosystem */
.ecosystem-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
.ecosystem-hub{
  position:relative;
  overflow:hidden;
  border-color: rgba(6,53,37,.18);
  background: linear-gradient(180deg, rgba(168,158,129,.18), #fff 60%);
}
.ecosystem-hub::after{
  content:"";
  position:absolute;
  inset: -80px -80px auto auto;
  width:180px;
  height:180px;
  background: rgba(6,53,37,.10);
  border-radius:50%;
  filter: blur(2px);
}

.ecosystem-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.mini-flag h4{ margin:0 0 6px; font-weight:800; color:var(--brand-900); }

/* Projects */
.badge{
  display:inline-flex;
  background: rgba(168,158,129,.22);
  border:1px solid rgba(168,158,129,.45);
  color: var(--brand-900);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.subhead{
  margin:16px 0 0;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-600);
  font-weight:800;
}

.metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:16px;
}
.metrics--dense{ grid-template-columns: repeat(2, 1fr); }
.metric{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 12px;
  background: rgba(6,53,37,.03);
}
.card-dark .metric{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.metric-n{
  font-size:20px;
  font-weight:900;
  color: var(--brand-900);
}
.card-dark .metric-n{ color:#fff; }
.metric-l{
  margin-top:4px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--text-600);
  font-weight:800;
}
.card-dark .metric-l{ color: rgba(255,255,255,.78); }

/* Timeline */
.timeline{
  margin-top:14px;
  padding-left:14px;
  border-left:2px solid rgba(6,53,37,.16);
  display:flex;
  flex-direction:column;
  gap:16px;
}
html[dir="rtl"] .timeline{
  padding-left:0;
  padding-right:14px;
  border-left:0;
  border-right:2px solid rgba(6,53,37,.16);
}
.timeline-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.timeline-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:6px;
  background: var(--accent-500);
  flex:0 0 auto;
}
.timeline-body h4{
  margin:0 0 6px;
  font-size:14px;
  font-weight:800;
  color:var(--brand-900);
}
.timeline-body p{ margin:0; font-size:13px; }

/* Vision card */
.vision-card{
  position:relative;
  overflow:hidden;
}
.vision-badge{
  position:absolute;
  top:18px;
  right:18px;
  font-family:var(--font-display);
  font-size:44px;
  color: rgba(6,53,37,.10);
  font-weight:700;
}
html[dir="rtl"] .vision-badge{ right:auto; left:18px; }

.stamp{
  margin:14px 0 0;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  color: var(--accent-500);
}

/* Contact process */
.process{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.process-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(6,53,37,.03);
}
.card-dark .process-step{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.link{ color: var(--brand-900); text-decoration:underline; }
.card-dark .link{ color: #fff; text-decoration:underline; }

/* Footer */
.footer{ padding-top:30px; }
.footer-inner{
  border-top:1px solid rgba(0,0,0,.06);
  padding:18px 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (min-width: 860px){
  .site-nav{ display:flex; }

  .grid-2{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
  .grid-4{ grid-template-columns: repeat(4, 1fr); }

  .ecosystem-layout{
    grid-template-columns: 320px 1fr;
    align-items:start;
  }
  .ecosystem-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .metrics--dense{ grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px){
  .hero-inner{ padding: 92px 0 84px; }
  .section-body{ padding: 34px 0 70px; }
}


/* =========================================================
   Multi-page UX helpers
   ========================================================= */

/* Mobile nav toggle */
.nav-toggle{ display:inline-flex; }
@media (min-width: 860px){
  .nav-toggle{ display:none; }
}

/* Mobile nav drawer */
@media (max-width: 859px){
  .site-nav{
    position:fixed;
    inset: 64px 12px auto 12px;
    display:none;
    flex-direction:column;
    background: rgba(255,255,255,.96);
    border:1px solid var(--border);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open{ display:flex; }
  .site-nav a{ padding:12px 12px; }
}

/* Active nav item */
.site-nav a.active{
  background: rgba(6,53,37,.08);
  color: var(--brand-900);
  font-weight: 800;
}

/* Explore links */
.grid-5{ grid-template-columns: 1fr; }
.link-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
}
.link-card:hover{ transform: translateY(-1px); }
.link-card-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(168,158,129,.18);
  color: var(--brand-900);
  font-weight:800;
}

@media (min-width: 860px){
  .grid-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .link-card{ height: 100%; }
}

/* Page banner */
.page-banner{
  background:
    linear-gradient(180deg, rgba(6,53,37,.92) 0%, rgba(6,53,37,.78) 100%),
    url("../assets/hero.jpeg") center/cover no-repeat;
  color:#fff;
  padding: 34px 0 28px;
}
.page-banner-title{
  margin:0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
}
.page-banner-sub{
  margin: 8px 0 0;
  color: rgba(255,255,255,.86);
  max-width: 820px;
}


/* ------------------------------------------------------------
   Explore the profile (match PDF card style more closely)
------------------------------------------------------------ */
.explore .section-topbar .topbar-inner{ justify-content:flex-start; }

.explore-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.explore-card{
  display:flex;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;

  align-items:flex-start;
  gap: 14px;
  padding: 22px 22px;
  text-decoration:none;
  color: inherit;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.explore-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.explore-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 18px;
  flex: 0 0 44px;
  background: rgba(6,53,37,.07);
  border: 1px solid rgba(6,53,37,.10);
  color: var(--brand-900);
}

.explore-title{
  margin: 0 0 6px 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.explore-text{
  margin:0;
  color: var(--text-600);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 420px){
  .explore-card{ padding: 18px 18px; }
  .explore-title{ font-size: 18px; }
}

/* ------------------------------------------------------------
   Partner ecosystem (portfolio cards)
------------------------------------------------------------ */
.topbar-stacked{
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
html[dir="rtl"] .topbar-stacked{ align-items:flex-end; }

.section-subtitle{
  margin:0;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.topbar-kicker{
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: none;
  color: rgba(255,255,255,.78);
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
}

.pe-groups{ display:flex; flex-direction:column; gap: 28px; }
.pe-page{ gap: 34px; }

.pe-group-head{
  display:flex;
  align-items:center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 14px;
}

.pe-group-icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(168,158,129,.16);
  border: 1px solid rgba(168,158,129,.30);
  color: var(--brand-900);
  flex: 0 0 38px;
}

.pe-group-title{
  margin:0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 34px);
  color: var(--brand-900);
}

.pe-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.pe-grid-4{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pe-grid-3{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pe-grid-2{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.portfolio-card{
  position:relative;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  text-align: center;
}

.portfolio-pill{
  position:absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  color: rgba(0,0,0,.62);
}

html[dir="rtl"] .portfolio-pill{ left:auto; right:12px; }

.portfolio-name{
  margin: 22px 0 10px 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-900);
}

.portfolio-loc{
  margin:0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
}

.portfolio-loc::before{
  content:"📍";
  margin-inline-end: 6px;
  opacity: .7;
}

.section-actions{
  margin-top: 18px;
  display:flex;
  justify-content:flex-end;
}
html[dir="rtl"] .section-actions{ justify-content:flex-start; }

/* ------------------------------------------------------------
   Strategic partnerships (three-column layout + partner cards)
------------------------------------------------------------ */
.partnerships-columns{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
}

@media (min-width: 980px){
  .partnerships-columns{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
  }
}

.cat-head{
  display:flex;
  align-items:center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 12px;
}

.cat-icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(6,53,37,.07);
  border: 1px solid rgba(6,53,37,.10);
  color: var(--brand-900);
  flex: 0 0 42px;
}

.cat-title{
  margin:0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 32px);
  color: var(--brand-900);
}

.partner-list{ display:flex; flex-direction:column; gap: 14px; }

.partner-card{
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.partner-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

.partner-logo{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  background: rgba(6,53,37,.06);
  border: 1px solid rgba(6,53,37,.10);
  color: var(--brand-900);
  flex: 0 0 44px;
}

.partner-name{
  margin:0;
  font-weight: 900;
  font-size: 16px;
}

.partner-loc{
  margin: 4px 0 0 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.48);
}

.partner-desc{
  margin: 0 0 12px 0;
  color: var(--text-600);
  font-size: 14px;
  line-height: 1.55;
}

.partner-footer{
  display:flex;
  justify-content:flex-start;
}
html[dir="rtl"] .partner-footer{ justify-content:flex-end; }

.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-700);
  background: rgba(20,97,74,.10);
  border: 1px solid rgba(20,97,74,.18);
}

.model-card{
  margin-top: 18px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  max-width: 420px;
  margin-left: auto;
}

html[dir="rtl"] .model-card{ margin-left: 0; margin-right:auto; }

.model-title{
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 10px;
}
.model-title::before{ content:"ℹ️"; opacity:.75; }

.model-text{
  margin:0;
  color: var(--text-600);
  font-size: 14px;
  line-height: 1.55;
}

/* Latest tweak: ensure hero tag text is white */
.hero-tags .tag{ color:#fff !important; }



/* =========================================================
   PDF fidelity helpers
   ========================================================= */
.pdf-frame{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  overflow:hidden;
}
.pdf-frame img{ display:block; width:100%; height:auto; }

/* =========================================================
   Header + Gold lines (PDF accent)
   ========================================================= */
:root{ --header-bg: #d7ddd8; } /* light sage from PDF */

.site-header{
  background: var(--header-bg);
  border-bottom: 1px solid rgba(0,0,0,.10);
  position: sticky;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
}

.brand-logo{
  height: 44px;
  width:auto;
  max-width: 190px;
  object-fit: contain;
}
@media (min-width: 860px){
  .brand-logo{ height: 56px; max-width: 240px; }
}

/* Two-row nav (desktop) */
.site-nav{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.site-nav .nav-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  column-gap: 34px;
  row-gap: 10px;
}
.site-nav a{
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(27,38,34,.72);
}
.site-nav a:hover{ background: rgba(255,255,255,.40); }

@media (min-width: 860px){
  .site-nav{ display:flex; }
  .nav-toggle{ display:none; }
}

/* Gold lines on topbars and titles */
.section-topbar{
  position:relative;
  border-bottom: 0;
}
.section-topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
}
.section-title{
  position:relative;
  padding-bottom: 10px;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 120px;
  height: 2px;
  background: var(--accent-500);
  border-radius: 999px;
}
html[dir="rtl"] .section-title::after{ left:auto; right:0; }

.page-banner-title{
  position:relative;
  padding-bottom: 12px;
}
.page-banner-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 140px;
  height: 2px;
  background: var(--accent-500);
  border-radius: 999px;
}
html[dir="rtl"] .page-banner-title::after{ left:auto; right:0; }

.divider{
  border-top: 1px solid rgba(168,158,129,.55);
}

/* Keep hero pill text white */
.hero-tags .tag{ color:#fff !important; }



/* =========================================================
   Partner Ecosystem — PDF card styling (Technology/Data + Real Estate)
   ========================================================= */
.pe-group-head--pdf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 16px;
}
.pe-group-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.pe-group-icon--gold{
  width: 28px;
  height: 28px;
  color: var(--accent-500);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pe-group-icon--gold svg{ width:28px; height:28px; display:block; }
.pe-group-line{
  flex:1;
  height:1px;
  background: rgba(0,0,0,.10);
  margin-inline-start: 18px;
  border-radius: 999px;
}
.pe-grid--pdf{ margin-top: 10px; }
.portfolio-card--pdf{
  border-radius: 12px;
  padding: 14px 16px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.portfolio-card--pdf .portfolio-pill{
  position:absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,.05);
  color: rgba(0,0,0,.56);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 6px 10px;
  text-transform: none;
}
html[dir="rtl"] .portfolio-card--pdf .portfolio-pill{ left:auto; right:12px; }

.portfolio-logo{
  width: 160px;
  height: 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 18px auto 8px;
}
.portfolio-logo-img{
  max-width: 160px;
  max-height: 52px;
  object-fit: contain;
}
.portfolio-logo--circle{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 18px auto 8px;
  color: rgba(0,0,0,.72);
}
.portfolio-logo--circle svg{ width:28px; height:28px; }

.portfolio-card--pdf .portfolio-name{
  margin: 0;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-900);
}
.portfolio-loc{
  margin:0;
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
}
.portfolio-loc .pin{
  width: 14px;
  height: 14px;
  display:inline-flex;
  color: rgba(0,0,0,.55);
}
.portfolio-loc .pin svg{ width:14px; height:14px; display:block; }

/* =========================================================
   Extra compact header menu (reduce height on Arabic & English)
   ========================================================= */
.header-inner{
  padding: 8px 0 !important;
  gap: 10px !important;
}
@media (min-width: 860px){
  .site-nav{ gap: 8px !important; }
  .site-nav .nav-row{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: center !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    padding: 0 6px !important;
    scrollbar-width: none;
  }
  .site-nav .nav-row::-webkit-scrollbar{ display:none; }
  .site-nav a{
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 7px 9px !important;
    letter-spacing: .08em !important;
  }
  .site-nav .nav-row--secondary a{
    font-size: 11px !important;
  }
}


/* Tablet: show compact two-row nav (avoid tall header) */
@media (min-width: 700px) and (max-width: 859px){
  .site-nav{
    display:flex !important;
    flex-direction:column !important;
    gap: 8px !important;
  }
  .site-nav .nav-row{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: center !important;
    column-gap: 14px !important;
    padding: 0 6px !important;
    scrollbar-width: none;
  }
  .site-nav .nav-row::-webkit-scrollbar{ display:none; }
  .site-nav a{
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 7px 9px !important;
    letter-spacing: .07em !important;
  }
}

/* Slightly smaller logo to match compact header */
.brand-logo{
  height: 40px !important;
  max-width: 200px !important;
}
@media (min-width: 860px){
  .brand-logo{ height: 48px !important; max-width: 240px !important; }
}



/* =========================================================
   Prevent header/nav overflow (keep menu inside border)
   ========================================================= */
.header-inner{ align-items: center; }
.site-nav{ flex: 1 1 auto; min-width: 0; max-width: 100%; }
.site-nav .nav-row{ max-width: 100%; }



/* =========================================================
   Fix: menu text cut off + keep header contained
   ========================================================= */
html, body{ overflow-x: hidden; }

@media (min-width: 700px){
  /* allow nav rows to scroll from start; centered scrolling can clip edges */
  .site-nav .nav-row{
    justify-content: flex-start !important;
    padding-inline: 14px !important;
    scroll-padding-inline: 14px;
  }
}