:root{
  --bg: #0B0C0E;
  --bg-alt: #14161A;
  --bg-alt2: #191C20;
  --gold: #B68D40;
  --gold-bright: #E8C878;
  --ivory: #EDE8DE;
  --muted: #8B8D91;
  --line: #2A2C30;
  --line-soft: rgba(182,141,64,0.18);
  --font-display-en: 'Fraunces', serif;
  --font-display-ar: 'Amiri', serif;
  --font-body-en: 'Inter', sans-serif;
  --font-body-ar: 'Tajawal', sans-serif;
  --display: var(--font-display-en);
  --body: var(--font-body-en);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; overflow-x:hidden; }

body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

body.ar{
  --display: var(--font-display-ar);
  --body: var(--font-body-ar);
}

::selection{ background:var(--gold); color:var(--bg); }

a:focus-visible, button:focus-visible{
  outline:1px solid var(--gold-bright);
  outline-offset:3px;
}

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

.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  margin-inline-end:auto;
}

.wrap{ max-width:1180px; margin-inline:auto; padding-inline:2.5rem; }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow:0 0 8px rgba(232,200,120,0.6);
  z-index:200; transition:width 0.1s linear;
}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 2.5rem;
  background:linear-gradient(to bottom, rgba(11,12,14,0.92), rgba(11,12,14,0));
  backdrop-filter:blur(2px);
}
.brandmark{
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:0.06em;
  font-weight:500;
  color:var(--ivory);
}
.brandmark span{ color:var(--gold); }
.nav-links{ display:flex; align-items:center; gap:2.4rem; }
.nav-links a{
  position:relative;
  font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); transition:color .25s ease;
  padding-bottom:3px;
}
.nav-links a:not(.lang-toggle)::after{
  content:''; position:absolute; inset-inline-start:0; inset-inline-end:100%; bottom:0; height:1px;
  background:var(--gold-bright); box-shadow:0 0 6px rgba(232,200,120,0.7);
  transition:inset-inline-end .3s ease;
}
.nav-links a:not(.lang-toggle):hover::after{ inset-inline-end:0; }
.nav-links a:hover{ color:var(--gold-bright); }
.lang-toggle{
  border:1px solid var(--line);
  border-radius:2px;
  padding:0.4rem 0.85rem;
  font-size:0.72rem; letter-spacing:0.1em;
  color:var(--gold);
  background:transparent;
  cursor:pointer;
  font-family:var(--font-body-en);
  transition:border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.lang-toggle:hover{ border-color:var(--gold-bright); color:var(--gold-bright); box-shadow:0 0 14px rgba(232,200,120,0.35); }
.nav-burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-burger span{ width:22px; height:1px; background:var(--ivory); transition:transform .3s ease, opacity .3s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width: 860px){
  .nav-burger{ display:flex; }
  .nav-links{
    position:fixed; inset-inline-end:0; top:0; height:100vh; width:min(78vw, 320px);
    background:var(--bg-alt); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.8rem; padding-inline:2.5rem;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1);
    border-inline-start:1px solid var(--line);
  }
  html[dir="rtl"] .nav-links{ transform:translateX(-100%); }
  html[dir="rtl"] .nav-links.open{ transform:translateX(0); }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a:not(.lang-toggle){ display:block; font-size:0.95rem; }
  .nav-links .lang-toggle{ margin-top:1rem; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 2rem;
  overflow:hidden;
}
.hero-fade-bottom{
  position:absolute; left:0; right:0; bottom:0; height:220px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  z-index:1; pointer-events:none;
}
.lattice-bg{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.lattice-bg::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 50% at 30% 15%, rgba(232,200,120,0.13), transparent 60%),
    radial-gradient(ellipse 60% 55% at 72% 85%, rgba(182,141,64,0.18), transparent 62%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(94,66,26,0.22), transparent 70%),
    linear-gradient(155deg, #181a1e 0%, #131519 22%, #101216 45%, #0c0d10 68%, #0a0b0d 100%);
}
.hero-glow{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 60% at 50% 30%, rgba(182,141,64,0.14), transparent 68%);
  opacity:0;
  animation:glowIn 2.4s ease 0.3s forwards, glowBreathe 10s ease-in-out 2.8s infinite;
  transition:transform 0.6s ease-out;
}
@keyframes glowIn{ to{ opacity:1; } }
@keyframes glowBreathe{ 0%,100%{ opacity:0.85; } 50%{ opacity:1; } }
#constellation{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; animation:glowIn 2s ease 0.4s forwards;
}
.cursor-spotlight{
  position:absolute; inset:0;
  background:radial-gradient(circle 380px at var(--sx,50%) var(--sy,50%), rgba(232,200,120,0.14), transparent 70%);
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
.hero:hover .cursor-spotlight{ opacity:1; }
.rays{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    100deg,
    rgba(232,200,120,0.06) 0px,
    rgba(232,200,120,0.06) 2px,
    transparent 2px,
    transparent 90px
  );
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 30%, black 75%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, black 30%, black 75%, transparent 100%);
  opacity:0;
  animation:raysIn 2.6s ease 0.5s forwards, raysDrift 34s ease-in-out infinite;
}
.ray-sweep{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    100deg,
    transparent 0px,
    transparent 88px,
    rgba(232,200,120,0.75) 89px,
    rgba(232,200,120,0.75) 90px,
    transparent 91px
  );
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 38%, white 48%, transparent 58%, transparent 100%);
          mask-image:linear-gradient(100deg, transparent 0%, transparent 38%, white 48%, transparent 58%, transparent 100%);
  -webkit-mask-size:300% 100%;
          mask-size:300% 100%;
  opacity:0;
  animation:sweepIn 1s ease 1.6s forwards, sweepMove 7s linear 2.6s infinite;
}
@keyframes sweepIn{ to{ opacity:1; } }
@keyframes sweepMove{
  0%{ -webkit-mask-position:150% 0; mask-position:150% 0; }
  100%{ -webkit-mask-position:-150% 0; mask-position:-150% 0; }
}
@keyframes raysIn{ to{ opacity:1; } }
@keyframes raysDrift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-2%); } }
.lattice-corner{
  position:absolute; bottom:-40px; right:-40px;
  width:340px; opacity:0; transform:scale(0.94);
  animation:latticeIn 2s cubic-bezier(.16,1,.3,1) 0.3s forwards;
}
.lattice-corner.left{ right:auto; left:-40px; bottom:auto; top:-40px; transform:scale(0.94) rotate(180deg); }
.lattice-corner svg{ width:100%; height:auto; opacity:0.14; }
@keyframes latticeIn{ to{ opacity:1; transform:scale(1); } }
html[dir="rtl"] .lattice-corner{ right:auto; left:-40px; }
html[dir="rtl"] .lattice-corner.left{ left:auto; right:-40px; }

.hero-content{ position:relative; z-index:2; }
.hero-eyebrow{
  font-size:0.8rem; letter-spacing:0.5em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem;
  opacity:0; animation:eyebrowIn 1.1s ease 0.5s forwards;
}
@keyframes eyebrowIn{ from{ opacity:0; letter-spacing:0.9em; } to{ opacity:1; letter-spacing:0.32em; } }

body.ar .hero-eyebrow{
  font-size: 0.95rem;
  letter-spacing: normal;
  animation: eyebrowInAr 1.1s ease 0.5s forwards;
}
@keyframes eyebrowInAr{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.0rem, 7.5vw, 5.8rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--ivory);
  min-height:1.1em;
}
.hero h1 .w1{ color:#ffffff; }
.hero h1 em{ font-style:italic; color:var(--gold-bright); }
.type-cursor{
  display:inline-block; width:2px; height:0.85em; background:#ffffff;
  margin-inline-start:4px; vertical-align:middle;
  animation:cursorBlink 0.8s steps(1) infinite;
}
.type-cursor.done{ animation:cursorBlink 0.8s steps(1) 4, fadeOutCursor 0.4s ease 3.6s forwards; }
@keyframes cursorBlink{ 50%{ opacity:0; } }
@keyframes fadeOutCursor{ to{ opacity:0; } }
.hero-sub{
  margin-top:1.6rem;
  font-size:1.05rem;
  color:var(--muted);
  max-width:560px;
  margin-inline:auto;
  opacity:0; animation:fadeUp 1s ease 1.3s forwards;
}
.hero-divider{
  width:1px; height:70px; background:linear-gradient(var(--gold), transparent);
  margin:2.8rem auto 0;
  opacity:0; animation:fadeUp 1s ease 1.55s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.scroll-cue{
  position:absolute; left:50%; bottom:2.6rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  opacity:0; animation:fadeUp 1s ease 1.9s forwards, cueBob 2.6s ease-in-out 2.9s infinite;
  z-index:2;
}
.scroll-cue span{ font-size:0.66rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--muted); }
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--gold), transparent); }
@keyframes cueBob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(8px);} }

/* ---------- SECTION SHELL ---------- */
section{ position:relative; padding:8rem 0; scroll-margin-top:88px; }
.section-head{ margin-bottom:4rem; }
.section-head .eyebrow{ display:block; margin-bottom:1rem; }
.section-head h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  color:var(--ivory);
  max-width:640px;
  position:relative;
  padding-bottom:1.4rem;
}
.section-head h2::after{
  content:''; position:absolute; inset-inline-start:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg, var(--gold), transparent);
  transition:width 1.1s cubic-bezier(.16,1,.3,1) 0.15s;
}
.section-head.in-view h2::after{ width:120px; }

.lattice-rule {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
  width: 100%;
}

.minimal-separator {
  width: 100%;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(182, 141, 64, 0.25) 25%, var(--gold) 50%, rgba(182, 141, 64, 0.25) 75%, transparent 100%);
  position: relative;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.minimal-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 1px;
  background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(232, 200, 120, 0.85);
  transition: width 0.5s ease;
}

.lattice-rule.in-view .minimal-separator {
  opacity: 0.8;
  transform: scaleX(1);
}

.lattice-rule:hover .minimal-separator {
  opacity: 1;
}

.lattice-rule:hover .minimal-separator::after {
  width: 90px;
}

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- STORY ---------- */
.story-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:4.5rem; align-items:start;
}
.portrait-frame{
  position:relative; aspect-ratio:4/5;
  border:1px solid var(--line-soft);
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.portrait-frame:hover {
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(182,141,64,0.15);
  transform: translateY(-4px);
}
.portrait-frame::before{
  content:''; position:absolute; inset:0;
  background:var(--bg-alt);
}
.portrait-inner{
  position:relative; z-index:1; height:100%; width:100%;
  background:linear-gradient(160deg, #1c1f24, #0f1113);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:0.85rem; letter-spacing:0.08em; text-align:center;
  border:1px solid var(--line);
  transition: border-color 0.4s ease;
}
.portrait-frame:hover .portrait-inner {
  border-color: var(--gold);
}
.story-text p{ color:#C9C6BC; margin-bottom:1.3rem; font-size:1.02rem; max-width:52ch; }
.story-text p:first-of-type{ font-size:1.14rem; color:var(--ivory); }

.timeline {
  margin-top: 3.5rem;
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  inset-inline-start: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(182,141,64,0.4) 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(232,200,120,0.3);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.timeline.in-view::before {
  opacity: 1;
  transform: scaleY(1);
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.8rem;
  padding: 1.6rem 1.6rem 1.6rem 2rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  background: rgba(20, 22, 26, 0.45);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
}
html[dir="rtl"] .timeline-item {
  padding: 1.6rem 2rem 1.6rem 1.6rem;
}
.timeline-item.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.timeline-item:nth-child(1) { transition-delay: 0.1s; }
.timeline-item:nth-child(2) { transition-delay: 0.22s; }
.timeline-item:nth-child(3) { transition-delay: 0.34s; }
.timeline-item:nth-child(4) { transition-delay: 0.46s; }

.timeline-item::after {
  content: '';
  position: absolute;
  top: 2.2rem;
  inset-inline-start: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 0 rgba(232, 200, 120, 0);
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  z-index: 2;
}

.timeline-item:hover {
  background: linear-gradient(135deg, rgba(25, 28, 32, 0.85), rgba(20, 22, 26, 0.98));
  border-color: rgba(232, 200, 120, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(182, 141, 64, 0.14);
  transform: translateY(-3px);
}

.timeline-item:hover::after {
  transform: scale(1.25);
  background: var(--gold-bright);
  border-color: #ffffff;
  box-shadow: 0 0 14px rgba(232, 200, 120, 0.85), 0 0 24px rgba(182, 141, 64, 0.6);
}

.timeline-year {
  font-family: 'Fraunces', 'Amiri', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.06em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  background: rgba(182, 141, 64, 0.1);
  border: 1px solid rgba(182, 141, 64, 0.28);
  box-shadow: inset 0 0 10px rgba(182, 141, 64, 0.05);
  height: fit-content;
  align-self: start;
  transition: all 0.35s ease;
}

.timeline-item:hover .timeline-year {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(232, 200, 120, 0.5);
  transform: scale(1.04);
}

.timeline-body h4 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ivory);
  margin-bottom: 0.4rem;
  transition: color 0.3s ease;
}

.timeline-item:hover .timeline-body h4 {
  color: var(--gold-bright);
}

.timeline-body p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 50ch;
}

/* ---------- AMBIENT SECTION GLOWS ---------- */
#ventures::before, #network::before, #projects::before, #contact::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
}
#ventures::before{ background:radial-gradient(ellipse 45% 40% at 12% 8%, rgba(182,141,64,0.07), transparent 65%); }
#network::before{ background:radial-gradient(ellipse 50% 45% at 88% 92%, rgba(182,141,64,0.09), transparent 65%); }
#projects::before{ background:radial-gradient(ellipse 45% 40% at 90% 15%, rgba(182,141,64,0.07), transparent 65%); }
#contact::before{ background:radial-gradient(ellipse 55% 60% at 50% 40%, rgba(182,141,64,0.09), transparent 68%); }
#ventures .wrap, #network .wrap, #projects .wrap, #contact .wrap{ position:relative; z-index:1; }

/* ---------- VENTURES CAROUSEL ---------- */
.ventures-carousel-wrap{ position:relative; }
.ventures-carousel{
  overflow:hidden;
  background:transparent;
  padding:4px 0;
}
.ventures-track{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.25rem;
  transition:transform 0.65s cubic-bezier(0.76,0,0.24,1), opacity 0.4s ease;
  will-change:transform;
}
.venture-card{
  flex:1 1 300px;
  max-width:calc(33.333% - 0.85rem);
  background:var(--bg);
  padding:2.4rem 2rem;
  position:relative;
  border:1px solid var(--line);
  border-radius:10px;
  transition:background .35s ease, box-shadow .35s ease, transform .35s ease, border-color .35s ease;
  cursor:pointer;
}
.venture-card.vc-hidden{ display:none !important; }
.venture-card:hover{
  background:var(--bg-alt);
  border-color:rgba(182,141,64,0.4);
  box-shadow:0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(182,141,64,0.12);
  transform:translateY(-4px);
}
.venture-mark{
  width:38px; height:38px; margin-bottom:1.6rem;
  border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-family:var(--display); font-size:0.95rem;
  transition:box-shadow .35s ease, color .35s ease;
}
.venture-card:hover .venture-mark{ box-shadow:0 0 16px rgba(232,200,120,0.55); color:var(--gold-bright); }
.venture-card h3{ font-family:var(--display); font-size:1.28rem; font-weight:500; margin-bottom:0.5rem; color:var(--ivory); }
.venture-sector{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; display:block; }
.venture-card p{ font-size:0.92rem; color:var(--muted); }
.venture-role{ margin-top:1.4rem; font-size:0.82rem; color:#7a7c80; font-style:italic; }

/* ── Carousel slide animations ────────────── */
@keyframes vc-in-right{
  from{ opacity:0; transform:translateX(56px) scale(0.97); }
  to  { opacity:1; transform:translateX(0)    scale(1);    }
}
@keyframes vc-in-left{
  from{ opacity:0; transform:translateX(-56px) scale(0.97); }
  to  { opacity:1; transform:translateX(0)     scale(1);    }
}
.ventures-carousel.anim-next .ventures-track{
  animation:vc-in-right 0.60s cubic-bezier(0.16,1,0.3,1) both;
}
.ventures-carousel.anim-prev .ventures-track{
  animation:vc-in-left  0.60s cubic-bezier(0.16,1,0.3,1) both;
}

/* Controls */
.ventures-controls{
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  margin-top:2.4rem;
}
.vc-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:transparent; cursor:pointer;
  color:var(--muted); display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, color .25s ease, box-shadow .25s ease, background .25s ease;
}
.vc-btn:hover{ border-color:var(--gold); color:var(--gold-bright); box-shadow:0 0 14px rgba(232,200,120,0.2); }
.vc-btn:disabled{ opacity:0.25; pointer-events:none; }
html[dir="rtl"] .vc-btn svg { transform: scaleX(-1); }
.vc-dots{ display:flex; gap:0.5rem; align-items:center; }
.vc-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(182,141,64,0.28);
  border:none; padding:0; cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.vc-dot:hover{ background:rgba(232,200,120,0.55); transform:scale(1.3); }
.vc-dot.active{
  width:26px; height:26px; border-radius:50%; background:transparent;
  display:flex; align-items:center; justify-content:center;
  transform:none; cursor:default;
}
/* SVG ring inside active dot */
.vc-ring{ display:block; overflow:visible; }
.vc-ring-prog{ transition:stroke-dashoffset 0.1s linear; }

@media (max-width: 960px){
  .venture-card{ max-width:calc(50% - 0.65rem); }
}
@media (max-width: 600px){
  .venture-card{ max-width:100%; flex:1 1 100%; }
}


/* ---------- NETWORK ---------- */
.network-intro{ max-width:640px; color:#C9C6BC; margin-bottom:3.5rem; font-size:1.02rem; }
.network-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid var(--line);
}
.network-item{
  padding:2rem 1.5rem;
  border-bottom:1px solid var(--line);
  border-inline-end:1px solid var(--line);
  text-align:center;
  opacity:0; transform:scale(0.92);
  transition:opacity .6s ease, transform .6s ease;
}
.network-item.in-view{ opacity:1; transform:scale(1); }
.network-item:nth-child(1){ transition-delay:0s; }
.network-item:nth-child(2){ transition-delay:0.08s; }
.network-item:nth-child(3){ transition-delay:0.16s; }
.network-item:nth-child(4){ transition-delay:0.24s; }
.network-item:nth-child(4n){ border-inline-end:none; }
.network-item .name{ font-size:0.95rem; color:var(--ivory); font-weight:500; margin-bottom:0.25rem; }
.network-item .role{ font-size:0.76rem; color:var(--muted); letter-spacing:0.03em; }
@media (max-width: 760px){ .network-grid{ grid-template-columns:repeat(2,1fr); } .network-item:nth-child(4n){ border-inline-end:1px solid var(--line);} .network-item:nth-child(2n){ border-inline-end:none; } }

/* ---------- PROJECTS ---------- */
.project-row{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
  padding:4.5rem 0; border-top:1px solid var(--line);
}
.project-row .project-media{ order:1; }
.project-row .project-copy{ order:2; }
.project-row:nth-child(even) .project-media{ order:2; }
.project-row:nth-child(even) .project-copy{ order:1; }
.project-row:last-child{ border-bottom:1px solid var(--line); }
.project-media{
  aspect-ratio:16/11; background:linear-gradient(160deg,#1c1f24,#0e1012);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:0.85rem; letter-spacing:0.06em;
  transition:box-shadow .35s ease, border-color .35s ease;
}
.project-row:hover .project-media{ box-shadow:0 0 30px rgba(182,141,64,0.12); border-color:var(--line-soft); }
.project-label{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.project-row h3{ font-family:var(--display); font-size:1.7rem; font-weight:500; margin-bottom:1rem; color:var(--ivory); }
.project-row p{ color:#C9C6BC; font-size:0.98rem; margin-bottom:1.4rem; max-width:46ch; }
.project-stats{ display:flex; gap:2.2rem; }
.project-stats div{ font-family:var(--display); color:var(--gold-bright); font-size:1.3rem; }
.project-stats span{ display:block; font-family:var(--body); font-size:0.72rem; color:var(--muted); letter-spacing:0.05em; margin-top:0.2rem; }
@media (max-width: 860px){
  .project-row{ grid-template-columns:1fr; gap:2rem; }
  .project-row .project-media, .project-row:nth-child(even) .project-media{ order:1; }
  .project-row .project-copy, .project-row:nth-child(even) .project-copy{ order:2; }
}


/* ---------- CONTACT ---------- */
.contact{ text-align:center; }
.contact h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 5vw, 3.2rem); max-width:680px; margin-inline:auto;
  color:var(--ivory); margin-bottom:1.5rem;
}
.contact p{ color:var(--muted); max-width:480px; margin-inline:auto; margin-bottom:2.6rem; }
.contact-links{ display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; }
.contact-links a{
  font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid transparent; padding-bottom:4px;
  transition:border-color .25s ease, color .25s ease;
}
.contact-links a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

footer{
  padding:3rem 2.5rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.75rem; color:#6b6d70; flex-wrap:wrap; gap:1rem;
}

.ventures-tabs{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-bottom:2.8rem; justify-content:center; }
.ventures-tab{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font-family:var(--body); font-size:0.78rem; letter-spacing:0.06em;
  padding:0.55rem 1.1rem; border-radius:2px; cursor:pointer;
  transition:border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.ventures-tab:hover{ color:var(--gold-bright); border-color:var(--line-soft); }
.ventures-tab.active{ color:var(--gold-bright); border-color:var(--gold); box-shadow:0 0 12px rgba(232,200,120,0.15); }

@media (max-width: 860px){
  .story-grid{ grid-template-columns:1fr; }
  .portrait-frame{ max-width:320px; margin-inline:auto; }
}

/* Mobile Optimizations */
@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(1.8rem, 6.5vw, 2.5rem);
    line-height: 1.25;
  }
  .hero-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.25em !important;
  }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.2rem 0;
  }
  .timeline-year {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
  }
}

/* ---------- BOTTOM BRANDING ---------- */
.bottom-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4.5rem;
  gap: 1.5rem;
}
.bottom-branding .saudi-logo img {
  height: 64px;
  width: auto;
  opacity: 0.65;
  filter: sepia(1) saturate(1.8) brightness(0.85) hue-rotate(5deg);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.calligraphy-signature {
  display: inline-block;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
  opacity: 0.75;
}
.calligraphy-signature img {
  height: 56px;
  width: auto;
  display: block;
}
.bottom-branding:hover .saudi-logo img {
  opacity: 0.95;
  filter: sepia(1) saturate(2.2) brightness(1.1) hue-rotate(8deg) drop-shadow(0 0 8px rgba(182, 141, 64, 0.4));
}
.bottom-branding:hover .calligraphy-signature {
  opacity: 1;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(182, 141, 64, 0.4));
}

@media (max-width: 480px) {
  .wrap {
    padding-inline: 1.2rem;
  }
}

/* ---------- VENTURE CARD CTA & INTERACTION ---------- */
.venture-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.venture-card-footer {
  margin-top: auto;
  padding-top: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px dashed rgba(182, 141, 64, 0.15);
}
.venture-cta-btn {
  background: rgba(182, 141, 64, 0.08);
  border: 1px solid rgba(182, 141, 64, 0.22);
  color: var(--gold-bright);
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.venture-card:hover .venture-cta-btn {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold-bright);
  box-shadow: 0 0 12px rgba(232, 200, 120, 0.4);
  transform: translateX(-2px);
}
html[dir="ltr"] .venture-card:hover .venture-cta-btn {
  transform: translateX(2px);
}

/* ---------- VENTURE DETAILS & 9:16 VIDEO MODAL ---------- */
.venture-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}
.venture-modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}

.venture-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1;
}

.venture-modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  background: linear-gradient(145deg, rgba(22, 25, 30, 0.95), rgba(12, 14, 17, 0.98));
  border: 1px solid rgba(232, 200, 120, 0.25);
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(182, 141, 64, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.venture-modal-overlay.active .venture-modal-container {
  transform: scale(1) translateY(0);
}

/* Topbar */
.vm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.6rem;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 17, 20, 0.6);
}
.vm-nav-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.vm-nav-btn, .vm-close-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--ivory);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.vm-nav-btn:hover, .vm-close-btn:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: rgba(182, 141, 64, 0.15);
  box-shadow: 0 0 12px rgba(232, 200, 120, 0.3);
}
.vm-counter {
  font-family: var(--font-body-en);
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  background: rgba(182, 141, 64, 0.08);
}

/* Modal Body (2 Columns) */
.vm-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2.2rem;
  padding: 2rem;
  overflow-y: auto;
  max-height: calc(90vh - 65px);
}

/* ---------- 9:16 VERTICAL VIDEO SHOWCASE ---------- */
.vm-video-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.v-reel-frame {
  position: relative;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(232, 200, 120, 0.35);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(182, 141, 64, 0.2);
  background: #000000;
}
.v-reel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-reel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.2rem 1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 2;
}

/* Live badge & company initials tag */
.v-reel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-family: var(--font-body-en);
  letter-spacing: 0.1em;
  color: var(--ivory);
  background: rgba(0, 0, 0, 0.55);
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}
.v-dot-live {
  width: 7px;
  height: 7px;
  background: #ff4757;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff4757;
  animation: pulseLive 1.5s infinite;
}
@keyframes pulseLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.2); }
}
.v-company-tag {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(182, 141, 64, 0.3);
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: bold;
}

/* Coming Soon Placeholder */
.v-coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--gold-bright);
  opacity: 0.6;
  z-index: 3;
}
.v-coming-soon svg {
  opacity: 0.5;
}
.v-coming-soon span {
  font-size: 0.82rem;
  font-family: var(--font-body-en);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Video Footer */
.v-reel-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.v-subtitle {
  font-size: 0.75rem;
  color: var(--ivory);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border-inline-start: 2px solid var(--gold-bright);
}

/* ---------- DETAILS COLUMN ---------- */
.vm-details-col {
  display: flex;
  flex-direction: column;
}
.vm-mark-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.vm-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-bright);
  background: rgba(182, 141, 64, 0.12);
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(232, 200, 120, 0.25);
  flex-shrink: 0;
}
.vm-sector {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.2rem;
}
.vm-title {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.2;
}
.vm-role {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.2rem;
}

.vm-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, rgba(182, 141, 64, 0.3) 50%, var(--line) 100%);
  margin: 1.2rem 0;
}

.vm-section-label {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.vm-description {
  font-size: 0.98rem;
  color: #D6D3CB;
  line-height: 1.7;
  margin-bottom: 1.6rem;
}

.vm-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}
.vm-chip {
  background: rgba(20, 22, 26, 0.8);
  border: 1px solid rgba(182, 141, 64, 0.25);
  color: var(--ivory);
  font-size: 0.8rem;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.vm-chip::before {
  content: '◆';
  color: var(--gold);
  font-size: 0.6rem;
}
.vm-chip:hover {
  border-color: var(--gold-bright);
  background: rgba(182, 141, 64, 0.15);
}

.vm-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.vm-meta-item {
  background: rgba(15, 17, 20, 0.5);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  border-radius: 6px;
}
.vm-meta-item .label {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.vm-meta-item .value {
  display: block;
  font-size: 0.88rem;
  color: var(--gold-bright);
  font-weight: 500;
}

.vm-actions {
  margin-top: auto;
  padding-top: 0.8rem;
}
.vm-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--bg);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(182, 141, 64, 0.35);
  transition: all 0.3s ease;
}
.vm-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(232, 200, 120, 0.5);
}

/* RESPONSIVE MODAL */
@media (max-width: 768px) {
  .vm-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.4rem;
  }
  .vm-video-col {
    order: 1;
  }
  .vm-details-col {
    order: 2;
  }
  .v-reel-frame {
    max-width: 240px;
  }
  .vm-title {
    font-size: 1.3rem;
  }
  .vm-meta-grid {
    grid-template-columns: 1fr;
  }
}