/* ===================================================================
   AKABER — Design System v2
   Deep Charcoal & Copper | Alternating light/dark rhythm
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

:root{
  /* Core palette */
  --charcoal:#2B2F34;
  --charcoal-2:#353A40;
  --charcoal-3:#454B52;
  --copper:#D89B3C;
  --copper-light:#E8B563;
  --copper-soft:#F0D3A0;
  --cream:#F4F3F0;
  --cream-2:#ECEAE4;
  --paper:#FAF9F7;
  --stone:#C4C1B8;
  --stone-dark:#54524C;
  --ink:#1E2023;
  --white:#FFFFFF;

  --radius:4px;
  --radius-lg:8px;
  --shadow:0 4px 24px rgba(43,47,52,.08);
  --shadow-lg:0 20px 60px rgba(43,47,52,.18);
  --section-pad:clamp(60px, 7vw, 100px);
  --container:1280px;
  --ease:cubic-bezier(.22,.8,.28,1);

  --f-display:'Cairo', sans-serif;
  --f-body:'Cairo', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[dir="rtl"] body{direction:rtl;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; border:none; background:none; cursor:pointer;}
ul{list-style:none;}

.container{max-width:var(--container); margin:0 auto; padding:0 32px;}


section{padding:var(--section-pad) 0; position:relative;}
/* Subtle visual connector between consecutive light sections — replaces empty whitespace */
.section-cream + .section-cream::before,
.section-paper + .section-cream::before,
.section-cream + .section-paper::before{
  content:''; position:absolute; top:0; inset-inline-start:50%; transform:translateX(-50%);
  width:60px; height:2px; background:linear-gradient(90deg, transparent, var(--copper), transparent);
}

/* Alternating background rhythm */
.section-dark{background:var(--charcoal); color:var(--cream);}
.section-dark .stone{color:var(--stone);}
.section-cream{background:var(--cream);}
.section-paper{background:var(--paper);}

/* Typography scale */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; color:var(--ink); line-height:1.15;}
.section-dark h1, .section-dark h2, .section-dark h3{color:var(--cream);}
.title{font-size:clamp(30px, 3.4vw, 46px); font-weight:800; letter-spacing:-.01em;}
p{color:var(--stone-dark);}
.section-dark p{color:var(--stone);}

.eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--copper);
  font-weight:700;
}
.eyebrow .num{
  width:32px; height:32px; border:1px solid var(--copper); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
  font-family:var(--f-display); font-weight:700;
}
.eyebrow .rule{width:44px; height:1px; background:var(--copper);}

.section-lede{font-size:17px; color:var(--stone-dark); max-width:560px; line-height:1.85;}
.section-dark .section-lede{color:var(--stone);}

.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}

.link-arrow{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px; color:var(--copper); white-space:nowrap;}
.link-arrow:hover{color:var(--copper-light);}

/* Buttons */
.btn-primary, .btn-gold{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--copper); color:var(--cream); padding:18px 40px;
  font-size:14.5px; font-weight:700; letter-spacing:.02em; transition:.3s var(--ease);
}
.btn-primary:hover, .btn-gold:hover{background:var(--copper-light); transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--stone-dark); color:var(--ink); padding:17px 38px;
  font-size:14.5px; font-weight:600; transition:.3s var(--ease);
}
.btn-outline:hover{border-color:var(--copper); color:var(--copper);}
.section-dark .btn-outline{border-color:rgba(244,243,240,.3); color:var(--cream);}
.section-dark .btn-outline:hover{border-color:var(--copper-light); color:var(--copper-light);}

/* Strong variant — solid translucent background instead of border-only,
   used where a secondary button must remain clearly visible on dark sections */
.btn-outline-strong{
  background:rgba(244,243,240,.1); border-color:rgba(244,243,240,.5) !important;
}
.btn-outline-strong:hover{ background:rgba(216,155,60,.15); }

/* ===================================================================
   REVEAL SYSTEM v2 — rich, varied scroll-triggered entrance animations
=================================================================== */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .85s var(--ease), transform .85s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}

.reveal-left{opacity:0; transform:translateX(-50px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal-left.in-view{opacity:1; transform:translateX(0);}
.reveal-right{opacity:0; transform:translateX(50px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal-right.in-view{opacity:1; transform:translateX(0);}
html[dir="rtl"] .reveal-left{transform:translateX(50px);}
html[dir="rtl"] .reveal-right{transform:translateX(-50px);}

.reveal-scale{opacity:0; transform:scale(.88); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal-scale.in-view{opacity:1; transform:scale(1);}

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

/* Staggered word-by-word text reveal (for headlines) */
.reveal-words span{display:inline-block; opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-words.in-view span{opacity:1; transform:translateY(0);}

.reveal-d1.in-view{transition-delay:.08s;}
.reveal-d2.in-view{transition-delay:.16s;}
.reveal-d3.in-view{transition-delay:.24s;}
.reveal-d4.in-view{transition-delay:.32s;}
.reveal-d5.in-view{transition-delay:.4s;}
.reveal-d6.in-view{transition-delay:.48s;}

/* Utility */
.num-mono{font-family:var(--f-display); font-variant-numeric:tabular-nums;}

/* ===================================================================
   HEADER
=================================================================== */
.site-header{
  position:fixed; top:0; inset-inline-start:0; width:100%; z-index:500;
  padding:3px 0; transition:.3s var(--ease);
  background:#1E2124; /* fully solid — no transparency, no artifacts from what's behind */
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
body.admin-bar .site-header{top:32px;}
@media(max-width:782px){ body.admin-bar .site-header{top:46px;} }
.site-header.scrolled{
  padding:2px 0; box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.header-row{display:flex; align-items:center; justify-content:space-between;}
.site-header .container{padding-inline-end:18px; padding-inline-start:24px;}
.logo{display:flex; align-items:center; gap:12px;}
.logo-mark{height:44px; width:auto;}
.logo-text strong{display:block; font-family:var(--f-display); font-size:16px; font-weight:900; color:var(--cream); line-height:1.1;}
.logo-text small{display:block; font-size:10px; font-weight:500; color:var(--copper-light); letter-spacing:.02em; margin-top:2px; white-space:nowrap;}

.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{color:var(--cream); font-size:14.5px; font-weight:400; opacity:.8; transition:.3s;}
.nav-links a:hover{opacity:1; color:var(--copper-light);}

.header-actions{display:flex; align-items:center; gap:22px;}
.lang-switch{color:var(--cream); font-size:13px; font-weight:600; border:1px solid rgba(244,243,240,.25); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; transition:.3s;}
.lang-switch:hover{border-color:var(--copper-light); color:var(--copper-light);}
.btn-header{
  font-size:13.5px; color:var(--charcoal); background:var(--copper-light);
  padding:12px 26px; font-weight:700; transition:.3s;
}
.btn-header:hover{background:var(--cream);}

.mobile-toggle{display:none; flex-direction:column; gap:5px; width:26px;}
.mobile-toggle span{height:2px; background:var(--cream); width:100%; transition:.3s;}



.mobile-menu{
  position:fixed; inset:0; background:var(--charcoal); z-index:600;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); transition:transform .5s var(--ease); opacity:0;
}
.mobile-menu.open{transform:translateY(0); opacity:1;}
.mobile-menu a{color:var(--cream); font-size:22px; font-weight:700;}
.mobile-menu-close{position:absolute; top:30px; inset-inline-end:30px; color:var(--cream); font-size:28px;}
.mobile-nav-links{display:flex; flex-direction:column; gap:26px; align-items:center;}

/* ===================================================================
   HERO — rebuilt from scratch, simple and verified layout rules
   Structure: .hero (full viewport) > .hero-bg-video/.hero-bg-image (bg layer,
   z-index:0) > .hero-video-overlay (tint, z-index:1) > .hero-main (flex
   content wrapper, z-index:3) > .stats-bar (z-index:4, bottom of hero)
=================================================================== */
.hero{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#2B2F34;
  color:#F4F3F0;
  overflow:hidden;
}

/* Background layers — video (desktop), fallback image (desktop), mobile image */
.hero-bg-video{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-bg-image{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-size:cover; background-position:center top; z-index:0;
  display:none;
  animation:akaberHeroZoom 24s ease-in-out infinite alternate;
}
@keyframes akaberHeroZoom{ from{transform:scale(1);} to{transform:scale(1.08);} }
.hero.video-fallback .hero-bg-video{ display:none; }
.hero.video-fallback .hero-bg-image-desktop{ display:block; }

@media(max-width:768px){
  /* Mobile always shows the dedicated portrait-crop image — never the
     desktop video — for guaranteed, correctly-framed building visuals. */
  .hero-bg-video{ display:none !important; }
  .hero-bg-image-desktop{ display:none !important; }
  .hero-bg-image-mobile{ display:block; }
}

/* Tint overlay for text legibility — stronger, full-width darkening as recommended */
.hero-video-overlay{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;
  background:linear-gradient(180deg, rgba(28,31,34,.35) 0%, rgba(28,31,34,.55) 50%, rgba(28,31,34,.82) 100%),
             linear-gradient(90deg, rgba(28,31,34,.55) 0%, rgba(28,31,34,.3) 50%, rgba(28,31,34,.55) 100%);
}
@media(max-width:768px){
  .hero-video-overlay{
    background:linear-gradient(180deg, rgba(28,31,34,.3) 0%, rgba(28,31,34,.6) 45%, rgba(28,31,34,.94) 100%) !important;
  }
}

.hero-particles{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; overflow:hidden; pointer-events:none; }
.particle{ position:absolute; border-radius:50%; background:#E8B563; opacity:0; animation:akaberFloat linear infinite; }
@keyframes akaberFloat{
  0%{opacity:0; transform:translateY(0);}
  12%{opacity:.5;}
  88%{opacity:.25;}
  100%{opacity:0; transform:translateY(-380px);}
}
.hero-glow{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .4s;
  background:radial-gradient(circle 300px at var(--gx,50%) var(--gy,50%), rgba(216,155,60,.12), transparent 70%);
}
.hero:hover .hero-glow{ opacity:1; }

/* Main content wrapper — fully centered both vertically and horizontally,
   as recommended for a balanced, professional first impression */
.hero-main{
  position:relative; z-index:3;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:62px;
  padding-bottom:40px;
  text-align:center;
}
.hero-content{ max-width:680px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.hero-mobile-logo{ display:none; }

.hero h1, .hero-eyebrow, .hero-sub{
  text-shadow:0 2px 16px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.85);
}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:28px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:#E8B563; font-weight:700;
  opacity:0; animation:heroFadeUp .9s ease-out forwards; animation-delay:.1s;
  background:rgba(216,155,60,.1); border:1px solid rgba(216,155,60,.35);
  padding:9px 18px; border-radius:30px;
}
.hero-eyebrow .dash{ width:18px; height:1px; background:#D89B3C; flex-shrink:0; }

/* Title enlarged for stronger visual impact */
.hero h1{
  font-size:clamp(30px, 4.6vw, 58px); font-weight:800; line-height:1.28;
  margin-bottom:26px; color:#F4F3F0;
  opacity:0; animation:heroFadeUp .9s ease-out forwards; animation-delay:.25s;
}
.hero h1 em{ font-style:normal; color:#E8B563; font-weight:800; }

.hero-sub{
  font-size:16.5px; font-weight:500; line-height:1.85; color:#FFFFFF; max-width:520px; margin-bottom:38px;
  opacity:0; animation:heroFadeUp .9s ease-out forwards; animation-delay:.4s;
}

.hero-cta{
  display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:heroFadeUp .9s ease-out forwards; animation-delay:.55s;
}
/* Primary button — stronger, more visually dominant as recommended */
.hero-cta .btn-primary{
  padding:19px 42px; font-size:15px; font-weight:800; letter-spacing:.01em;
  box-shadow:0 12px 30px rgba(216,155,60,.3);
}
.hero-cta .btn-primary:hover{ box-shadow:0 16px 40px rgba(216,155,60,.42); }
.hero-cta .btn-outline{
  background:rgba(28,31,34,.55); backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.6); color:#FFFFFF;
  padding:18px 36px; font-weight:700;
}
.hero-cta .btn-outline:hover{ background:rgba(28,31,34,.75); border-color:#E8B563; color:#E8B563; }
.hero-cta .play-circle{
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.7);
  display:inline-flex; align-items:center; justify-content:center; font-size:9px; margin-inline-end:9px;
}
@keyframes heroFadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

/* Stats bar — pinned to the bottom of the hero, translucent strip */
.stats-bar{
  position:relative; z-index:4;
  display:flex;
  background:rgba(18,20,23,.78); backdrop-filter:blur(10px);
  padding:26px 0; border-top:1px solid rgba(244,243,240,.08);
  margin-top:auto; /* always pins to the very bottom of the hero */
}
.stat-box{
  flex:1; display:flex; align-items:center; gap:14px;
  padding:0 20px; border-inline-end:1px solid rgba(244,243,240,.12);
  position:relative; cursor:default;
}
.stat-box:last-child{ border-inline-end:none; }
.stat-box-icon{
  width:38px; height:38px; border:1px solid #D89B3C; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.stat-box-icon::before{ content:''; width:15px; height:15px; background:#E8B563; opacity:.85; }
.icon-sectors::before{ border-radius:3px; }
.icon-legacy::before{ border-radius:50%; }
.icon-countries::before{ clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.icon-building::before{ clip-path:polygon(20% 100%, 20% 30%, 50% 0%, 80% 30%, 80% 100%); }
.stat-box-num{ font-size:22px; font-weight:800; color:#F4F3F0; line-height:1; font-family:'Cairo',sans-serif; }
.stat-box-lbl{ font-size:11px; color:#C4C1B8; margin-top:4px; }

.stat-box::after{
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 12px); inset-inline-start:50%;
  transform:translateX(-50%) translateY(6px); background:#353A40; color:#F4F3F0;
  font-size:12px; padding:9px 16px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:.25s ease; box-shadow:0 20px 60px rgba(0,0,0,.18); z-index:10;
}
html[dir="rtl"] .stat-box::after{ transform:translateX(50%) translateY(6px); }
.stat-box:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
html[dir="rtl"] .stat-box:hover::after{ transform:translateX(50%) translateY(0); }

/* Mobile: 2x2 grid, compact and legible */
@media(max-width:768px){
  .hero-main{
    padding-top:78px;
    padding-bottom:20px;
  }
  .hero-content{ padding:0 18px; }
  .hero-eyebrow{ font-size:9.5px; gap:8px; margin-bottom:12px; letter-spacing:.14em; }
  .hero-eyebrow .dash{ width:24px; }
  .hero h1{ font-size:clamp(22px, 6.4vw, 28px); margin-bottom:12px; line-height:1.3; }
  .hero-sub{ font-size:13.5px; margin-bottom:18px; line-height:1.7; }
  .hero-cta{ gap:8px; }

  .stats-bar{
    flex-wrap:wrap; padding:14px 16px; gap:10px 8px;
  }
  .stat-box{
    flex:1 1 42%; min-width:0; border-inline-end:none; padding:0; gap:8px;
  }
  .stat-box-icon{ width:24px; height:24px; }
  .stat-box-icon::before{ width:9px; height:9px; }
  .stat-box-num{ font-size:15px; }
  .stat-box-lbl{ font-size:9px; line-height:1.25; }
  .stat-box::after{ display:none; } /* tooltips are a hover-only affordance; hidden on touch */
}

/* Scroll cue removed per client request. */

/* ===================================================================
   LOADER
=================================================================== */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#loader.hide{opacity:0; visibility:hidden;}
.loader-inner{text-align:center;}
.loader-logo{width:56px; margin:0 auto 18px;}
.loader-mark{font-family:var(--f-display); font-size:14px; letter-spacing:.4em; color:var(--cream); margin-bottom:18px;}
.loader-line{width:80px; height:1px; background:rgba(244,243,240,.2); margin:0 auto; position:relative; overflow:hidden;}
.loader-line::after{content:''; position:absolute; top:0; inset-inline-start:-100%; width:100%; height:100%; background:var(--copper-light); animation:loaderSlide 1.2s ease-in-out infinite;}
@keyframes loaderSlide{ 0%{inset-inline-start:-100%;} 100%{inset-inline-start:100%;} }

/* ===================================================================
   MOBILE NAV (burger)
=================================================================== */
.burger{display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; z-index:60;}
.burger span{height:2px; background:var(--cream); width:100%; transition:.3s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  position:fixed; inset:0; background:var(--charcoal); z-index:600;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  transform:translateY(-100%); opacity:0; transition:transform .5s var(--ease), opacity .5s;
}
.mobile-nav.open{transform:translateY(0); opacity:1;}
.mobile-nav-close{
  position:absolute; top:24px; inset-inline-end:24px; background:none; border:1px solid rgba(244,243,240,.3);
  color:var(--cream); font-size:24px; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:1; cursor:pointer;
}
.mobile-nav-links a{color:var(--cream); font-size:22px; font-weight:700;}



/* ===================================================================
   STATS BAND
=================================================================== */
.stats-band{background:var(--charcoal); padding:70px 0; border-top:1px solid rgba(244,243,240,.08);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px;}
.stat-item{text-align:center;}
.stat-num{font-family:var(--f-display); font-size:clamp(30px,3.4vw,44px); font-weight:800; color:var(--copper-light); margin-bottom:10px;}
.stat-lbl{font-size:13px; color:var(--stone); font-weight:500;}


/* ===================================================================
   TRUSTED / REGION BAND
=================================================================== */
.trusted-band{background:var(--cream); padding:var(--section-pad) 0;}

/* Markets grid — replaces the geographic map entirely */
.markets-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(24,22,20,.08); margin-top:50px;}
.market-card{
  position:relative; background:var(--paper); padding:36px 28px; overflow:hidden;
  transition:.45s cubic-bezier(.22,.8,.28,1);
}
.market-card::before{
  content:''; position:absolute; top:0; inset-inline-start:0; width:0; height:3px;
  background:var(--copper); transition:width .4s var(--ease);
}
.market-card:hover{background:var(--white); transform:scale(1.04); box-shadow:0 20px 50px rgba(24,22,20,.1); z-index:2;}
.market-card:hover::before{width:100%;}
.market-hq-badge{
  position:absolute; top:20px; inset-inline-end:20px; font-size:9.5px; background:var(--copper);
  color:var(--cream); padding:4px 10px; border-radius:20px; font-weight:800;
}
.market-since{font-size:11.5px; font-weight:700; color:var(--copper); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:14px;}
.market-card h3{font-size:21px; margin-bottom:12px; color:var(--ink); transition:color .3s;}
.market-card:hover h3{color:var(--copper);}
.market-card p{color:var(--stone-dark); font-size:14px; line-height:1.8;}
@media(max-width:900px){.markets-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.markets-grid{grid-template-columns:1fr;}}


/* ===================================================================
   SECTORS (interactive)
=================================================================== */
.sectors-interactive{margin-top:54px; display:grid; grid-template-columns:340px 1fr; gap:0; border:1px solid rgba(24,22,20,.1); overflow:hidden;}
.sectors-tabs{background:var(--cream-2); border-inline-end:1px solid rgba(24,22,20,.1); display:flex; flex-direction:column;}
.sector-tab{display:flex; align-items:center; gap:14px; padding:20px 24px; text-align:start; border-bottom:1px solid rgba(24,22,20,.08); transition:.3s; position:relative;}
.sector-tab:last-child{border-bottom:none;}
.sector-tab-icon{font-size:19px;}
.sector-tab-title{flex:1; font-size:14.5px; font-weight:700; color:var(--ink);}
.sector-tab-num{font-family:var(--f-display); font-size:12px; color:var(--stone); font-weight:700;}
.sector-tab:hover{background:var(--paper);}
.sector-tab.active{background:var(--charcoal);}
.sector-tab.active .sector-tab-title{color:var(--cream);}
.sector-tab.active .sector-tab-num{color:var(--copper-light);}
.sector-tab.active::after{content:''; position:absolute; top:0; bottom:0; inset-inline-start:0; width:3px; background:var(--copper);}
.sectors-display{position:relative; min-height:420px; background:var(--paper);}
.sector-panel{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; opacity:0; pointer-events:none; transition:opacity .5s var(--ease);}
.sector-panel.active{opacity:1; pointer-events:auto;}
.sector-panel-media{overflow:hidden;}
.sector-panel-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 8s ease-out; filter:grayscale(.15) contrast(1.05);}
.sector-panel.active .sector-panel-media img{transform:scale(1);}
.sector-panel-text{padding:50px 46px; display:flex; flex-direction:column; justify-content:center;}
.sector-panel-num{font-family:var(--f-display); font-size:44px; color:rgba(24,22,20,.1); font-weight:800; margin-bottom:16px;}
.sector-panel-text h3{font-size:24px; margin-bottom:16px; color:var(--ink);}
.sector-panel-text p{color:var(--stone-dark); font-size:15.5px; line-height:1.85;}


/* ===================================================================
   PROJECT SLIDE (used on the standalone Projects grid page)
=================================================================== */
.project-slide{aspect-ratio:4/5; overflow:hidden; position:relative; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.project-slide::before{content:''; position:absolute; top:0; bottom:0; inset-inline-start:0; width:0; background:var(--copper); z-index:3; transition:width .35s var(--ease);}
.project-slide:hover{transform:scale(1.03); box-shadow:var(--shadow-lg); z-index:5;}
.project-slide:hover::before{width:5px;}
.project-slide img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); filter:grayscale(.2) contrast(1.05);}
.project-slide:hover img{transform:scale(1.06); filter:grayscale(0) contrast(1);}
.project-overlay{position:absolute; bottom:0; inset-inline-start:0; width:100%; padding:26px 22px; background:linear-gradient(0deg, rgba(43,47,52,.9), transparent); color:var(--cream); font-weight:700; font-size:16px; z-index:2;}
.project-zoom-icon{position:absolute; top:18px; inset-inline-end:18px; width:38px; height:38px; border-radius:50%; background:rgba(244,243,240,.15); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:.35s var(--ease); z-index:4;}
.project-slide:hover .project-zoom-icon{opacity:1; transform:scale(1);}
.project-zoom-icon:hover{background:var(--copper-light); color:var(--charcoal);}

/* ===================================================================
   PARTNERS MARQUEE
=================================================================== */
.marquee-wrap{overflow:hidden; position:relative; padding:30px 0; touch-action:pan-y; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex; gap:70px; width:max-content; will-change:transform;}
.marquee-item{
  display:flex; align-items:center; justify-content:center; height:190px; min-width:320px; flex-shrink:0;
  background:var(--paper); border:1px solid rgba(24,22,20,.07); border-radius:14px; padding:28px;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s, border-color .4s;
}
.marquee-item:hover{transform:scale(1.07) translateY(-6px); box-shadow:0 22px 45px rgba(24,22,20,.12); border-color:rgba(216,155,60,.3);}
.marquee-item img{max-height:100%; max-width:100%; object-fit:contain;}
.partner-placeholder{font-family:var(--f-display); color:var(--stone); font-size:14.5px; font-weight:700; border:1.5px dashed var(--stone); padding:18px 34px; display:flex; align-items:center; justify-content:center; width:220px; height:130px; box-sizing:border-box; flex-shrink:0;}

/* ===================================================================
   ABOUT SECTION
=================================================================== */
.about{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.about-media{position:relative; aspect-ratio:4/5; overflow:hidden;}
.about-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.05);}
.about-badge{position:absolute; bottom:26px; inset-inline-start:26px; background:var(--charcoal); color:var(--cream); padding:18px 26px;}
.about-badge .num{font-family:var(--f-display); font-size:30px; font-weight:800; color:var(--copper-light);}
.about-badge .lbl{font-size:12px; color:var(--stone); margin-top:2px;}
.about-text .lead{font-size:19px; font-weight:600; color:var(--ink); margin-bottom:20px; line-height:1.7;}
.about-highlights{margin-top:24px; display:flex; flex-direction:column; gap:12px;}
.about-highlights li{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--ink);}
.about-highlights li span{color:var(--copper); font-weight:800; flex-shrink:0;}


/* ===================================================================
   WHY GRID
=================================================================== */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(244,243,240,.1); margin-top:54px;}
.why-item{background:var(--charcoal); padding:40px 30px;}
.why-item .icon{width:52px; height:52px; background:rgba(216,155,60,.12); display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--copper-light); font-size:20px; font-family:var(--f-display); font-weight:800;}
.why-item h4{color:var(--cream); font-size:17px; margin-bottom:10px;}
.why-item p{color:var(--stone); font-size:14px; line-height:1.75;}



/* ===================================================================
   LEGACY SECTION — "70+ years"
=================================================================== */
.legacy-section{padding:var(--section-pad) 0; background:var(--cream);}
.legacy-timeline-layout{display:grid; grid-template-columns:290px 1fr; gap:80px; align-items:start; margin-top:54px; direction:ltr;}
.legacy-hero-num{position:sticky; top:130px; direction:ltr; text-align:start;}
.legacy-hero-num-figure{display:flex; align-items:flex-start; line-height:.85; margin-bottom:18px;}
.legacy-hero-num-figure .legacy-num{font-family:var(--f-display); font-weight:900; font-size:clamp(90px,9vw,128px); color:var(--ink); letter-spacing:-.03em;}
.legacy-hero-num-figure .legacy-num-plus{font-family:var(--f-display); font-weight:900; font-size:clamp(38px,4vw,52px); color:var(--copper); margin-top:8px; margin-inline-start:2px;}
.legacy-hero-num-label{font-family:var(--f-display); font-size:15px; font-weight:700; color:var(--ink); line-height:1.4; text-transform:uppercase; letter-spacing:.02em;}
.legacy-hero-num-line{width:52px; height:3px; background:var(--copper); margin:26px 0;}
.legacy-hero-num-meta{display:flex; gap:34px;}
.legacy-meta-item{display:flex; flex-direction:column; gap:4px;}
.legacy-meta-item strong{font-family:var(--f-display); font-size:22px; color:var(--copper); font-weight:800;}
.legacy-meta-item span{font-size:12px; color:var(--stone-dark);}
.legacy-timeline-layout .pyramid-timeline{direction:inherit;}
html[dir="rtl"] .legacy-timeline-layout .pyramid-timeline{direction:rtl;}

.pyramid-timeline{display:flex; flex-direction:column; position:relative; padding-inline-start:8px;}
.pyramid-line{position:absolute; top:30px; bottom:50px; inset-inline-start:31px; width:2px; background:linear-gradient(to bottom, var(--copper) 0%, rgba(24,22,20,.1) 100%); transform-origin:top; transform:scaleY(0); transition:transform 1.4s var(--ease);}
.pyramid-line.in-view{transform:scaleY(1);}
.pyramid-step{display:flex; align-items:flex-start; gap:26px; padding:20px 14px; margin-inline-start:calc(var(--step,0) * 22px); transition:background .35s var(--ease), transform .35s var(--ease); position:relative; z-index:2;}
.pyramid-step:hover{background:var(--paper); transform:scale(1.02);}
.pyramid-icon{flex-shrink:0; width:48px; height:48px; border-radius:50%; background:var(--charcoal); color:var(--copper-light); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:15px; border:3px solid var(--cream); transition:transform .4s var(--ease), background .4s var(--ease);}
.pyramid-step:hover .pyramid-icon{transform:scale(1.15); background:var(--copper);}
.pyramid-body{padding-top:4px;}
.pyramid-body strong{display:block; font-family:var(--f-display); font-size:19px; color:var(--ink); margin-bottom:5px; transition:color .3s;}
.pyramid-step:hover .pyramid-body strong{color:var(--copper);}
.pyramid-body p{color:var(--stone-dark); font-size:14.5px; margin:0; line-height:1.7;}


/* ===================================================================
   BRAND MARK SECTION
=================================================================== */
.brand-mark-section{position:relative; padding:var(--section-pad) 0; text-align:center; background:var(--charcoal); overflow:hidden;}
.brand-mark-glow{position:absolute; top:50%; inset-inline-start:50%; width:600px; height:600px; background:radial-gradient(circle, rgba(216,155,60,.14), transparent 70%); transform:translate(-50%,-50%);}
.brand-mark-img{position:relative; z-index:2; width:80px; height:auto; margin:0 auto 30px; opacity:.9;}
.brand-mark-tagline{position:relative; z-index:2; font-family:var(--f-display); font-size:clamp(19px,2.4vw,26px); color:var(--cream); font-weight:600; max-width:640px; margin:0 auto;}

/* ===================================================================
   FOUNDER QUOTE
=================================================================== */
.founder{background:var(--cream); padding:var(--section-pad) 0;}
.founder-inner{max-width:780px; margin:0 auto; text-align:center;}
.quote-mark{font-family:var(--f-display); font-size:90px; color:var(--copper); opacity:.3; line-height:.5; margin-bottom:20px;}
.founder-inner blockquote{font-family:var(--f-display); font-size:clamp(22px,2.6vw,32px); font-weight:700; color:var(--ink); line-height:1.5; margin-bottom:40px;}
.founder-name{font-weight:800; font-size:16px; color:var(--ink);}
.founder-role{color:var(--copper); font-size:13.5px; margin-top:4px;}

/* ===================================================================
   VMV + VALUES (legacy, used on Investors page)
=================================================================== */
.vmv-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(24,22,20,.08); margin-top:50px;}
.value-card{background:var(--paper); padding:36px; transition:.4s var(--ease); position:relative;}
.value-card::before{content:''; position:absolute; top:0; inset-inline-start:0; width:0; height:3px; background:var(--copper); transition:width .35s var(--ease);}
.value-card:hover::before{width:100%;}
.value-card:hover{background:var(--white); box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.value-card h4{font-size:18px; margin-bottom:12px; color:var(--ink); transition:color .3s;}
.value-card:hover h4{color:var(--copper);}
.value-card p{font-size:14.5px; color:var(--stone-dark); line-height:1.8;}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(24,22,20,.08); margin-top:1px;}


/* ===================================================================
   VMV LIST — auto-revealing rows (no interaction required)
=================================================================== */
.vmv-section{position:relative; overflow:hidden;}
.vmv-list{margin-top:54px; display:flex; flex-direction:column;}
.vmv-row{
  display:grid; grid-template-columns:70px 1fr; gap:26px; padding:32px 4px;
  border-bottom:1px solid rgba(244,243,240,.1); position:relative; transition:.4s var(--ease);
}
.vmv-row:first-child{border-top:1px solid rgba(244,243,240,.1);}
.vmv-row::before{content:''; position:absolute; top:0; bottom:0; inset-inline-start:0; width:0; background:var(--copper); transition:width .4s var(--ease);}
.vmv-row:hover{background:rgba(244,243,240,.02);}
.vmv-row:hover::before{width:3px;}
.vmv-row-num{font-family:var(--f-display); font-size:26px; font-weight:800; color:rgba(216,155,60,.35); transition:color .4s;}
.vmv-row:hover .vmv-row-num{color:var(--copper-light);}
.vmv-row-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px;}
.vmv-row-head h3{color:var(--cream); font-size:21px; margin:0;}
.vmv-row-icon{font-size:20px; color:var(--copper); flex-shrink:0; transition:transform .4s var(--ease);}
.vmv-row:hover .vmv-row-icon{transform:scale(1.25) rotate(10deg);}
.vmv-row-body p{color:var(--stone); font-size:15px; line-height:1.85; max-width:640px; margin:0;}


/* TESTIMONIALS section removed per client request. */

/* ===================================================================
   CTA
=================================================================== */
.cta{background:var(--charcoal); padding:var(--section-pad) 0; text-align:center;}
.cta-inner{max-width:680px; margin:0 auto;}
.cta h2{color:var(--cream); font-size:clamp(28px,3.4vw,42px); margin-bottom:20px;}
.cta p{color:var(--stone); margin-bottom:40px; font-size:16.5px; line-height:1.85;}
.cta-actions{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}

/* ===================================================================
   PAGE HERO (inner pages) — ghost watermark alternates between the
   logo and "+70" from one page to the next, using WordPress' automatic
   page-template-{filename} body class (no per-file edits needed).
=================================================================== */
.page-hero{background:var(--charcoal); color:var(--cream); padding:170px 0 90px; text-align:start; position:relative; overflow:hidden;}

/* Default (fallback): "+70" number watermark */
.page-hero::after{
  content:'+70'; position:absolute; top:50%; inset-inline-end:-2%; transform:translateY(-50%);
  font-family:var(--f-display); font-weight:900; font-size:min(26vw, 300px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(216,155,60,.08); pointer-events:none; z-index:0;
  background-image:none;
}
html[dir="rtl"] .page-hero::after{ content:'٧٠+'; }

/* Odd-numbered pages (alphabetically by template filename): logo watermark instead */
body.page-template-page-contact-php .page-hero::after,
body.page-template-page-investors-php .page-hero::after,
body.page-template-page-news-php .page-hero::after,
body.page-template-page-projects-php .page-hero::after,
body.page-template-page-sectors-php .page-hero::after{
  content:''; width:min(22vw, 260px); height:min(22vw, 260px);
  -webkit-text-stroke:0; background-image:url('../img-v2/logo.webp');
  background-size:contain; background-repeat:no-repeat; opacity:.05;
}

@media(max-width:900px){ .page-hero::after{ display:none; } }
.page-hero h1{color:var(--cream); font-size:clamp(30px,4vw,52px);}
.page-hero-sub{color:var(--stone); font-size:16.5px; max-width:640px; margin-top:20px; line-height:1.9;}
.breadcrumbs{display:flex; gap:10px; align-items:center; font-size:13px; color:rgba(244,243,240,.5); margin-bottom:20px;}
.breadcrumbs a{color:rgba(244,243,240,.75);}
.breadcrumbs a:hover{color:var(--copper-light);}
.breadcrumbs .sep{opacity:.5;}

/* ===================================================================
   ABOUT PAGE
=================================================================== */
.lead{font-size:19px; font-weight:600; color:var(--ink); line-height:1.8; margin-bottom:22px;}

/* ===================================================================
   SECTORS PAGE (detail rows)
=================================================================== */
.sector-detail-list{margin-top:50px;}
.sector-detail-row{display:grid; grid-template-columns:110px 60px 1fr; gap:26px; padding:36px 0; border-bottom:1px solid rgba(24,22,20,.08); transition:.3s; align-items:center;}
.sector-detail-thumb{width:110px; height:110px; overflow:hidden; flex-shrink:0;}
.sector-detail-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter:grayscale(.25);}
.sector-detail-row:hover .sector-detail-thumb img{transform:scale(1.15); filter:grayscale(0);}

.sector-detail-row:hover{background:var(--cream);}
.sector-detail-num{font-family:var(--f-display); font-size:36px; font-weight:800; color:rgba(24,22,20,.15);}
.sector-detail-sub{font-family:var(--f-display); font-size:22px; font-weight:800; margin-bottom:12px;}
.sector-detail-body{color:var(--stone-dark); font-size:15.5px; line-height:1.85; max-width:700px;}

/* ===================================================================
   LEADERSHIP PAGE
=================================================================== */
.leaders-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:50px;}
.leader-card{text-align:center;}
.leader-photo{aspect-ratio:1/1; border-radius:50%; overflow:hidden; margin-bottom:22px; background:var(--cream); max-width:180px; margin-inline:auto;}
.leader-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3);}
.leader-photo-placeholder{width:100%; height:100%; background:var(--charcoal); display:flex; align-items:center; justify-content:center;}
.leader-photo-placeholder::after{content:'A'; font-family:var(--f-display); font-size:48px; color:var(--copper-light); font-weight:800;}
.leader-card h3{font-size:19px; margin-bottom:6px;}
.leader-role{color:var(--copper); font-size:13.5px; font-weight:700;}


/* ===================================================================
   PROJECTS (grid + single)
=================================================================== */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}


.project-hero-media{aspect-ratio:16/8; overflow:hidden; margin-bottom:40px;}
.project-hero-media img{width:100%; height:100%; object-fit:cover;}
.project-meta-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(24,22,20,.08); margin-bottom:50px;}
.project-meta-item{background:var(--cream); padding:24px; text-align:center;}
.pmi-label{display:block; font-size:11.5px; color:var(--stone-dark); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em;}
.pmi-value{display:block; font-family:var(--f-display); font-size:18px; font-weight:800; color:var(--ink);}
.project-content{font-size:16.5px; line-height:1.9; color:var(--ink); max-width:760px;}


/* ===================================================================
   OFFER CHIPS (Quote page)
=================================================================== */
.offer-grid{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}
.offer-chip{padding:14px 20px; border:1px solid rgba(24,22,20,.15); font-size:14.5px; color:var(--ink); display:flex; gap:10px; transition:.3s;}
.offer-chip:hover, .offer-chip.selected{border-color:var(--copper); background:rgba(216,155,60,.06);}

/* ===================================================================
   FORMS (Contact / Quote)
=================================================================== */
.form-group{margin-bottom:22px;}
.form-group label{display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:8px;}
.form-group input, .form-group textarea{
  width:100%; border:1.5px solid rgba(24,22,20,.15); padding:14px 16px; font-family:inherit; font-size:15px;
  background:var(--paper); transition:border-color .3s; resize:vertical;
}
.form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--copper);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}

.form-feedback{margin-top:16px; font-size:14.5px; padding:14px 18px; display:none;}
.form-feedback.success{display:block; background:rgba(76,175,80,.1); color:#2e7d32;}
.form-feedback.error{display:block; background:rgba(244,67,54,.1); color:#c62828;}
.contact-info-card{padding:24px 0; border-bottom:1px solid rgba(244,243,240,.1);}
.ci-label{font-size:12px; color:var(--stone); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; display:block;}
.map-frame{overflow:hidden; margin-top:10px;}

/* ===================================================================
   FAQ
=================================================================== */
.faq-group{margin-bottom:44px;}
.faq-group-title{font-family:var(--f-display); font-size:14px; color:var(--copper); font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid rgba(24,22,20,.1);}
.faq-item{border-bottom:1px solid rgba(24,22,20,.1);}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 4px; font-family:var(--f-display); font-size:16px; color:var(--ink); text-align:start;}
.faq-toggle{color:var(--copper); font-size:20px; flex-shrink:0; margin-inline-start:14px; transition:transform .3s;}
.faq-item.open .faq-toggle{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease);}
.faq-a p{color:var(--stone-dark); padding:0 4px 22px; font-size:15px; max-width:680px;}

.ai-faq-box{background:var(--paper); border:1px solid rgba(24,22,20,.1); padding:26px;}
.ai-faq-thread{max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; margin-bottom:20px;}
.ai-msg{max-width:85%; padding:13px 18px; font-size:15px; line-height:1.75;}
.ai-msg-bot{background:var(--cream); color:var(--ink); align-self:flex-start; border:1px solid rgba(24,22,20,.08);}
.ai-msg-user{background:var(--copper); color:#fff; align-self:flex-end;}
.ai-faq-suggestions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.ai-chip{font-size:13px; padding:9px 16px; border:1px solid rgba(24,22,20,.12); border-radius:30px; color:var(--ink); background:var(--cream); transition:.3s;}
.ai-chip:hover{background:var(--copper); color:#fff; border-color:var(--copper);}
.ai-faq-form{display:flex; gap:10px;}
.ai-faq-form input{flex:1; border:1.5px solid rgba(24,22,20,.12); padding:13px 16px; font-family:inherit; font-size:15px; background:var(--cream);}
.ai-faq-form button{background:var(--copper); color:#fff; padding:13px 26px; font-weight:700; font-size:14px; transition:.3s;}
.ai-faq-form button:hover{background:var(--copper-light);}

/* ===================================================================
   NEWS
=================================================================== */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.news-card{background:var(--paper); border:1px solid rgba(24,22,20,.08); overflow:hidden; transition:.4s var(--ease); display:block; position:relative;}
.news-card::before{content:''; position:absolute; top:0; bottom:0; inset-inline-start:0; width:0; background:var(--copper); z-index:3; transition:width .35s var(--ease);}
.news-card:hover::before{width:5px;}
.news-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.news-card-media{aspect-ratio:4/3; overflow:hidden;}
.news-card-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.2);}
.news-card-body{padding:24px;}
.news-card-date{font-size:12px; color:var(--copper); font-weight:700;}
.news-card-body h3{font-size:18px; margin:10px 0; color:var(--ink);}
.news-card-body p{font-size:14.5px; color:var(--stone-dark); line-height:1.75;}
.news-empty{grid-column:1/-1; text-align:center; padding:60px 0; color:var(--stone-dark);}
.entry-content{font-size:17px; line-height:1.9; color:var(--ink);}



/* ===================================================================
   STORYTELLING JOURNEY PAGE
=================================================================== */
.story-hero{position:relative; min-height:65vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--charcoal); overflow:hidden; padding:150px 0 70px;}
.story-hero-bg{position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 0%, var(--charcoal-2) 0%, var(--charcoal) 65%);}
.story-hero-content{position:relative; z-index:2; max-width:760px;}
.story-hero-content h1{color:var(--cream); font-size:clamp(32px,4.4vw,52px);}
.story-hero-content .breadcrumbs, .story-hero-content .eyebrow{justify-content:center;}
.story-scroll-hint{position:relative; z-index:2; margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:10px;}
.story-scroll-hint span{color:rgba(244,243,240,.5); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;}
.story-scroll-line{width:1px; height:36px; background:rgba(244,243,240,.25); position:relative; overflow:hidden;}
.story-scroll-line::after{content:''; position:absolute; top:0; inset-inline-start:0; width:100%; height:12px; background:var(--copper-light); animation:scrollDrop 2s ease-in-out infinite;}
@keyframes scrollDrop{0%{transform:translateY(-100%);}100%{transform:translateY(300%);}}

.story-rail{position:sticky; top:0; height:3px; background:rgba(24,22,20,.08); z-index:90;}
.story-rail-fill{height:100%; width:0%; background:var(--copper); transition:width .1s linear;}

.story-chapters{padding:40px 0 20px; max-width:1100px; margin:0 auto;}
.story-chapter{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:70px 28px;}
.story-end{direction:ltr;}
html[dir="rtl"] .story-end{direction:rtl;}
.story-end .story-chapter-media{order:2;}
.story-end .story-chapter-text{order:1;}
.story-chapter-media{position:relative; aspect-ratio:4/3; overflow:hidden;}
.story-chapter-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.15); transition:transform 1.4s var(--ease); filter:grayscale(.25);}
.story-chapter.in-view .story-chapter-media img{transform:scale(1);}
.story-chapter-media:hover img{transform:scale(1.06) !important; filter:grayscale(0);}
.story-year-badge{position:absolute; bottom:20px; inset-inline-start:20px; background:var(--charcoal); color:var(--copper-light); font-family:var(--f-display); font-weight:800; font-size:22px; padding:10px 22px;}
.story-chapter-num{font-family:var(--f-display); font-size:46px; font-weight:800; color:rgba(24,22,20,.12); margin-bottom:14px;}
.story-chapter-text h2{font-size:clamp(22px,2.4vw,30px); margin-bottom:18px;}
.story-chapter-text p{color:var(--stone-dark); font-size:16px; line-height:1.9;}


/* Legacy ring (journey page standalone) */
.legacy-number-section{position:relative; background:var(--charcoal); padding:100px 0; overflow:hidden;}
.legacy-number-glow{position:absolute; top:50%; inset-inline-start:50%; width:800px; height:800px; background:radial-gradient(circle, rgba(216,155,60,.12), transparent 65%); transform:translate(-50%,-50%);}
.legacy-number-inner{position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr; gap:70px; align-items:center;}
.legacy-ring-wrap{position:relative; width:220px; height:220px; flex-shrink:0; margin:0 auto;}
.legacy-ring{width:100%; height:100%; transform:rotate(-90deg);}
.legacy-ring-track{fill:none; stroke:rgba(244,243,240,.08); stroke-width:6;}
.legacy-ring-fill{fill:none; stroke:var(--copper-light); stroke-width:6; stroke-linecap:round; stroke-dasharray:628; stroke-dashoffset:628; transition:stroke-dashoffset 2.2s cubic-bezier(.16,.84,.32,1);}
.legacy-ring-content{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.legacy-number-text h2{color:var(--cream); font-size:clamp(22px,3vw,32px); margin-bottom:16px;}
.legacy-number-text p{color:var(--stone); font-size:15.5px; line-height:1.85; max-width:480px;}


/* ===================================================================
   MISC — social icons, back to top, whatsapp, profile pdf
=================================================================== */
.social-icon{width:38px; height:38px; border-radius:50%; background:rgba(244,243,240,.08); display:flex; align-items:center; justify-content:center; color:rgba(244,243,240,.7); transition:.3s;}
.social-icon:hover{background:var(--copper); color:#fff;}
.back-to-top{
  position:fixed; bottom:26px; inset-inline-start:26px; z-index:900; width:48px; height:48px; border-radius:50%;
  background:var(--charcoal); color:var(--copper-light); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(10px); transition:.35s var(--ease);
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--copper);}
.whatsapp-float{position:fixed; bottom:26px; inset-inline-end:26px; z-index:900; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); transition:transform .3s var(--ease);}
.whatsapp-float:hover{transform:scale(1.08);}
.profile-pdf-btn{display:inline-flex; align-items:center; gap:10px;}
#progressBar{position:fixed; top:0; inset-inline-start:0; height:3px; width:0%; background:var(--copper); z-index:1000; transition:width .15s linear;}
#cookieBanner{
  position:fixed; bottom:0; inset-inline-start:0; inset-inline-end:0; z-index:950; background:var(--charcoal); color:rgba(244,243,240,.85);
  padding:18px 26px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
  transform:translateY(100%); transition:transform .5s var(--ease);
}
#cookieBanner.show{transform:translateY(0);}
#cookieBanner p{font-size:13.5px; margin:0; max-width:600px;}
#cookieBanner a{color:var(--copper-light); text-decoration:underline;}

/* ===================================================================
   FOOTER
=================================================================== */
footer{background:var(--charcoal); color:var(--stone); padding:80px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:60px; padding-bottom:60px; border-bottom:1px solid rgba(244,243,240,.08);}
.footer-logo{width:44px; margin-bottom:16px;}
.footer-about p{color:var(--stone); font-size:14.5px; line-height:1.85; margin-top:16px; max-width:340px;}
.footer-col h5{color:var(--cream); font-size:14.5px; font-weight:700; margin-bottom:20px;}
.footer-col ul li{margin-bottom:13px;}
.footer-col ul li a{color:var(--stone); font-size:14.5px; transition:.3s;}
.footer-col ul li a:hover{color:var(--copper-light);}
.footer-bottom{padding:26px 0; text-align:center; font-size:13px; color:var(--stone-dark);}


/* ===================================================================
   LEGACY CORNER MARK — the visual "thread" that follows the visitor
   through the entire homepage, reinforcing the "+70" identity
=================================================================== */
.legacy-corner-mark{
  position:fixed; bottom:26px; inset-inline-start:26px; z-index:850;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:var(--charcoal); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:scale(.6);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.legacy-corner-mark.show{opacity:1; visibility:visible; transform:scale(1);}
.lcm-num{font-family:var(--f-display); font-weight:800; font-size:16px; color:var(--copper-light); line-height:1;}
.lcm-label{font-size:8.5px; color:var(--stone); text-transform:uppercase; letter-spacing:.05em; margin-top:2px;}



/* ===================================================================
   SECTORS — continuous auto-scrolling marquee (matches Projects section)
=================================================================== */
.sectors-scroll-section{padding-bottom:20px; overflow:hidden; position:relative;}
.sectors-marquee-wrap{
  overflow:hidden; margin-top:50px; padding:10px 0; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.sectors-marquee-track{display:flex; gap:28px; width:max-content; will-change:transform;}
.sector-hcard{
  flex:0 0 min(560px, 82vw);
  display:flex; flex-direction:column;
}
.sector-hcard-media{aspect-ratio:16/10; overflow:hidden; margin-bottom:28px; position:relative;}
.sector-hcard-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4) contrast(1.05); transition:filter .6s, transform 1s cubic-bezier(.22,.8,.28,1);}
.sector-hcard:hover .sector-hcard-media img{filter:grayscale(0) contrast(1); transform:scale(1.12) rotate(.5deg);}
.sector-hcard-body{flex:1;}
.sector-hcard-num{font-family:var(--f-display); font-size:14px; color:var(--copper-light); font-weight:700; display:block; margin-bottom:14px;}
.sector-hcard-num small{color:rgba(244,243,240,.35); font-weight:500;}

.sectors-bg-number{
  position:absolute; top:50%; inset-inline-end:4%; transform:translateY(-50%);
  font-family:var(--f-display); font-weight:900; font-size:min(38vw, 460px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(244,243,240,.06); z-index:0; pointer-events:none;
  transition:opacity .4s;
}

.sector-hcard h3{color:var(--cream); font-size:24px; margin-bottom:14px;}
.sector-hcard p{color:var(--stone); font-size:15px; line-height:1.85; max-width:440px;}

.sectors-cta-section{padding-top:30px; padding-bottom:70px;}
.sectors-cta-section h3{color:var(--cream); font-size:clamp(24px,3vw,32px); margin-top:16px;}



/* ===================================================================
   PROJECTS — auto-scrolling marquee with true 3D flip cards
=================================================================== */
.projects-marquee-section{padding-bottom:var(--section-pad);}
.projects-marquee-wrap{
  overflow:hidden; margin-top:60px; padding:10px 0; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.projects-marquee-track{display:flex; gap:28px; width:max-content; will-change:transform;}

.flip-card{flex:0 0 340px; aspect-ratio:4/5; perspective:1600px;}
.flip-card-inner{
  position:relative; width:100%; height:100%; transition:transform .9s cubic-bezier(.25,.8,.3,1);
  transform-style:preserve-3d; display:block; cursor:pointer;
  border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.flip-card:hover .flip-card-inner{transform:rotateY(180deg);}
html[dir="rtl"] .flip-card:hover .flip-card-inner{transform:rotateY(-180deg);}

.flip-card-front, .flip-card-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden; border-radius:14px;
}
.flip-card-front{background:var(--charcoal); border:1px solid rgba(216,155,60,.18);}
.flip-card-front img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25) brightness(.85); transition:transform .6s ease;}
.flip-card:hover .flip-card-front img{transform:scale(1.06);}
.flip-card-front::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,22,25,.92) 0%, rgba(20,22,25,.1) 55%, transparent 75%);}
.flip-card-num{
  position:absolute; top:18px; inset-inline-start:18px; z-index:2; font-family:var(--f-display);
  font-size:12.5px; color:var(--charcoal); font-weight:800; background:var(--copper-light);
  padding:5px 12px; border-radius:20px;
}
.flip-card-title{position:absolute; bottom:24px; inset-inline-start:24px; inset-inline-end:24px; z-index:2; color:var(--cream); font-size:21px; font-weight:800; font-family:var(--f-display); line-height:1.3;}

.flip-card-back{
  background:linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 100%);
  transform:rotateY(180deg);
  padding:36px 32px; display:flex; flex-direction:column; justify-content:center;
  border:1px solid rgba(216,155,60,.28);
}
.flip-card-back-num{font-family:var(--f-display); font-size:38px; font-weight:800; color:rgba(216,155,60,.35); margin-bottom:18px;}
.flip-card-back h3{color:var(--cream); font-size:22px; margin-bottom:16px; font-weight:800;}
.flip-card-back p{color:var(--stone); font-size:14.5px; line-height:1.85; margin-bottom:24px;}
.flip-card-cta{display:inline-flex; align-items:center; gap:8px; color:var(--copper-light); font-weight:700; font-size:13.5px; transition:gap .3s;}
.flip-card:hover .flip-card-cta{gap:12px;}



/* ===================================================================
   COMPREHENSIVE MOBILE REFINEMENT PASS
   (most users will be on mobile — every section double-checked here)
=================================================================== */




/* Prevent horizontal overflow anywhere on the site (a common mobile bug) */
html, body{max-width:100%; overflow-x:hidden;}


/* ===================================================================
   MOBILE REFINEMENT PASS #2 — new sections from this session
=================================================================== */


/* ===================================================================
   SECTION BACKGROUND MARK — subtle "+70" watermark on light sections
=================================================================== */
.section-bg-mark{
  position:absolute; top:50%; inset-inline-end:2%; transform:translateY(-50%);
  font-family:var(--f-display); font-weight:900; font-size:min(30vw, 340px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(43,47,52,.05); z-index:0; pointer-events:none;
}
@media(max-width:900px){.section-bg-mark{display:none;}}


/* ===================================================================================
   RESPONSIVE SYSTEM — rebuilt from scratch with 3 clean, consistent breakpoints:
   > 1024px  = Desktop (default styles above)
   <= 1024px = Tablet
   <= 640px  = Mobile
   Every section is addressed once, in order, with no scattered overrides.
=================================================================================== */

/* ============================= TABLET (<=1024px) ============================= */
@media(max-width:1024px){
  .container{padding:0 28px;}
  .nav-links{display:none;}
  .mobile-toggle, .burger{display:flex;}

  /* Hero */
  .hero-main{padding-top:100px;}
  .hero h1{font-size:clamp(28px,4.6vw,42px);}
  .stats-bar{padding:20px 28px;}

  /* Sections */
  :root{ --section-pad: clamp(56px, 8vw, 80px); }
  .about{grid-template-columns:1fr; gap:36px;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .sectors-interactive{grid-template-columns:1fr;}
  .interactive-map{grid-template-columns:1fr; gap:30px;}
  .legacy-timeline-layout{grid-template-columns:1fr; gap:36px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px;}
}

/* ============================= MOBILE (<=640px) ============================= */
.sectors-swipe-hint{ display:none; }

@media(max-width:768px){
  .container{padding:0 18px;}
  :root{ --section-pad: 52px; }
  .title{font-size:clamp(22px,6vw,28px); line-height:1.35;}
  .section-lede{font-size:14px;}
  .eyebrow{font-size:10.5px; letter-spacing:.15em; margin-bottom:16px;}
  .link-arrow{font-size:13px;}

  /* Native-app feel: disable iOS tap highlight, momentum scrolling everywhere,
     and respect the device's safe areas (notch / home indicator). */
  html{ -webkit-tap-highlight-color:transparent; }
  body{ -webkit-overflow-scrolling:touch; overscroll-behavior-y:none; }
  a, button, .market-card, input, textarea, select{ touch-action:manipulation; }

  /* ===================================================================
     HEADER — app-style top bar, respects the notch/status bar (Safe Area)
  =================================================================== */
  .site-header{
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 0 10px;
  }
  .site-header.scrolled{ padding:calc(env(safe-area-inset-top, 0px) + 8px) 0 8px; }
  .header-row{padding:0;}
  .logo{gap:9px;}
  .logo-mark{height:36px;}
  .logo-text strong{font-size:15px;}
  .logo-text small{
    display:block; font-size:8.5px; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; max-width:52vw;
  }
  .header-actions{display:none;} /* moved into the mobile menu itself, shown there instead */
  .burger{width:44px; height:44px; display:flex; align-items:center; justify-content:center; gap:0; padding:0; position:relative;}
  .burger span{width:22px; height:2.5px; border-radius:2px; position:absolute; transition:.3s var(--ease);}
  .burger span:nth-child(1){transform:translateY(-7px);}
  .burger span:nth-child(2){transform:translateY(0);}
  .burger span:nth-child(3){transform:translateY(7px);}
  .burger.active span:nth-child(1){transform:translateY(0) rotate(45deg);}
  .burger.active span:nth-child(2){opacity:0;}
  .burger.active span:nth-child(3){transform:translateY(0) rotate(-45deg);}

  /* ===================================================================
     HERO — app splash-screen feel: fixed height, fully centered content,
     two-line title, full-width stacked buttons with real tap targets
  =================================================================== */
  .hero{height:100svh; min-height:100svh; max-height:none;}
  .hero-main{
    flex:none; height:100%; padding:calc(env(safe-area-inset-top, 0px) + 64px) 0 0;
    align-items:center; justify-content:center;
  }
  .hero-content{padding:0 24px; width:100%; max-width:100%;}
  .hero-mobile-logo{display:block; width:60px; height:auto; margin:0 auto 26px;}
  .hero-eyebrow{font-size:9.5px; gap:8px; margin-bottom:16px; letter-spacing:.12em; padding:7px 14px;}
  .hero-eyebrow .dash{width:16px;}
  .hero h1{
    font-size:clamp(23px,7vw,29px); line-height:1.32; margin-bottom:14px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hero-sub{
    font-size:13.5px; line-height:1.65; margin-bottom:24px; max-width:340px; margin-inline:auto;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hero-cta{flex-direction:column; gap:11px; width:100%;}
  .hero-cta .btn-primary, .hero-cta .btn-outline{
    width:100%; min-height:50px; padding:0 20px; font-size:14.5px;
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .hero-cta .btn-outline{ position:relative; }
  .hero-cta .btn-outline .play-circle{
    position:absolute; inset-inline-start:20px; margin-inline-end:0;
  }
  .hero-cta .btn-primary:active{ transform:scale(.97); }
  .hero-cta .btn-outline:active{ transform:scale(.97); background:rgba(255,255,255,.12); }
  .hero-cta .play-circle{width:22px; height:22px; margin-inline-end:0;}
  .hero-logo-ghost{display:none;}
  .hero-scroll-cue{display:none;}

  /* Stats bar — bottom "widget" strip, respects home-indicator safe area */
  .stats-bar{
    flex-wrap:wrap; padding:14px 10px calc(env(safe-area-inset-bottom, 0px) + 14px); gap:10px 6px;
    flex-shrink:0; margin-top:0;
  }
  .stat-box{flex:1 1 46%; min-width:0; border-inline-end:none !important; gap:6px; padding-inline-end:0;}
  .stat-box-icon{width:22px; height:22px; flex-shrink:0;}
  .stat-box-num{font-size:15px;}
  .stat-box-lbl{font-size:9px; line-height:1.25;}
  .stat-box::after{display:none;} /* tooltips don't work on touch, hide entirely */

  /* WhatsApp button — moved to bottom-left on mobile as requested, larger and more prominent */
  .whatsapp-float{
    width:54px; height:54px; bottom:18px; inset-inline-end:auto; inset-inline-start:18px;
  }

  /* About section — fully reorganized for mobile clarity */
  .about{gap:28px;}
  .about-media{aspect-ratio:16/11;}
  .about-badge{padding:10px 16px; bottom:16px; inset-inline-start:16px;}
  .about-badge .num{font-size:19px;}
  .about-badge .lbl{font-size:10px;}
  .about-text .eyebrow{margin-bottom:10px;}
  .about-text div[style*="height:28px"]{height:14px !important;}
  .about-text .lead{font-size:16px; margin-bottom:14px; line-height:1.65;}
  .about-text p{font-size:14px; line-height:1.75; margin-bottom:14px;}
  .about-highlights{margin-top:16px; gap:9px;}
  .about-highlights li{font-size:13px;}

  /* Why grid */
  .why-grid{grid-template-columns:1fr 1fr; gap:1px;}
  .why-item{padding:26px 18px;}
  .why-item h3{font-size:15px;}
  .why-item p{font-size:12.5px;}

  /* Interactive map */
  .interactive-map{grid-template-columns:1fr; gap:20px;}
  .interactive-map-visual{aspect-ratio:4/3.6;}
  .map-pin-label{font-size:10px; max-width:70px;}
  .map-detail-panel h3{font-size:19px;}
  .map-detail-panel p{font-size:13.5px;}

  /* Sectors marquee cards */
  .sector-hcard{flex:0 0 80vw;}
  .sectors-marquee-track{gap:18px;}
  .sector-hcard h3{font-size:18px;}
  .sector-hcard p{font-size:13px;}
  .sector-hcard-media{aspect-ratio:4/3;}
  .sectors-cta-section h3{font-size:20px;}

  /* Projects flip cards */
  .flip-card{flex:0 0 78vw;}
  .projects-marquee-track{gap:16px;}
  .flip-card-title{font-size:16px;}
  .flip-card-back{padding:22px 20px;}
  .flip-card-back h3{font-size:16px;}
  .flip-card-back p{font-size:12.5px; margin-bottom:14px;}
  .flip-card-back-num{font-size:22px; margin-bottom:10px;}

  /* Partners marquee — larger, clearer cards while still showing several together */
  .marquee-wrap{padding:18px 0;}
  .marquee-track{gap:16px;}
  .marquee-item{height:88px; min-width:140px; padding:14px; border-radius:10px;}
  .marquee-item img{max-width:100%;}

  /* VMV rows */
  .vmv-row{grid-template-columns:36px 1fr; gap:14px; padding:20px 0;}
  .vmv-row-num{font-size:17px;}
  .vmv-row-head h3{font-size:16px;}
  .vmv-row-icon{font-size:16px;}
  .vmv-row-body p{font-size:13px;}

  /* Legacy / journey */
  .legacy-timeline-layout{grid-template-columns:1fr; gap:30px;}
  .legacy-hero-num{position:static;}
  .legacy-hero-num-figure .legacy-num{font-size:clamp(60px,18vw,90px);}
  .legacy-hero-num-figure .legacy-num-plus{font-size:clamp(28px,8vw,38px);}
  .pyramid-step{margin-inline-start:0 !important;}

  /* Brand mark / founder */
  .brand-mark-img{width:60px;}
  .brand-mark-tagline{font-size:16px;}
  .founder-inner blockquote{font-size:19px;}

  /* CTA */
  .cta h2{font-size:23px;}
  .cta p{font-size:13.5px;}
  .cta-actions{flex-direction:column; width:100%; gap:12px;}
  .cta-actions a{width:100%;}

  /* Footer */
  .footer-grid{grid-template-columns:1fr; gap:30px;}
  .footer-about p{max-width:none;}

  /* Floating elements — WhatsApp is now handled in the hero mobile block above (bottom-left) */
  .back-to-top{width:40px; height:40px; bottom:calc(56px + env(safe-area-inset-bottom, 0px) + 14px); inset-inline-end:14px; inset-inline-start:auto;}

  /* Page hero (inner pages) */
  .page-hero{padding:100px 0 60px;}
  .page-hero h1{font-size:clamp(24px,7vw,32px);}
  .page-hero-sub{font-size:14px;}

  /* News / FAQ / project grids collapse to single column */
  .news-grid, .projects-grid{grid-template-columns:1fr;}
  .leaders-grid{grid-template-columns:1fr;}
  .project-meta-grid{grid-template-columns:1fr 1fr;}
}

/* Prevent horizontal overflow anywhere on the site */
html, body{max-width:100%; overflow-x:hidden;}

/* Custom cursor system removed per client request — using default browser cursor. */

/* ===================================================================
   PAGE FADE TRANSITION — smooth fade instead of an abrupt page jump
=================================================================== */
body{opacity:0; transition:opacity .4s ease;}
body.page-fade-in{opacity:1;}
body.page-fade-out{opacity:0;}

/* ===================================================================
   LEADERSHIP PAGE — achievements grid + timeline
=================================================================== */
.leadership-stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(24,22,20,.08); margin-top:50px;}
.leadership-stat-card{background:var(--paper); padding:40px 24px; text-align:center; transition:.4s var(--ease);}
.leadership-stat-card:hover{background:var(--white); transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.leadership-stat-num{font-family:var(--f-display); font-size:clamp(30px,3.4vw,42px); font-weight:800; color:var(--copper); margin-bottom:10px;}
.leadership-stat-lbl{font-size:13.5px; color:var(--stone-dark); line-height:1.6;}
@media(max-width:900px){.leadership-stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.leadership-stats-grid{grid-template-columns:1fr;}}

.leadership-timeline{position:relative; max-width:760px; margin:50px auto 0; padding-inline-start:8px;}
.leadership-timeline::before{
  content:''; position:absolute; top:8px; bottom:8px; inset-inline-start:31px; width:2px;
  background:linear-gradient(to bottom, var(--copper) 0%, rgba(244,243,240,.1) 100%);
}
.leadership-timeline-item{display:grid; grid-template-columns:64px 1fr; gap:24px; padding:26px 0; position:relative;}
.leadership-timeline-year{font-family:var(--f-display); font-size:13px; font-weight:700; color:var(--copper-light); align-self:start; padding-top:4px;}
.leadership-timeline-dot{
  position:absolute; inset-inline-start:26px; top:30px; width:12px; height:12px; border-radius:50%;
  background:var(--charcoal); border:3px solid var(--copper); z-index:2;
}
.leadership-timeline-body h4{color:var(--cream); font-size:18px; margin-bottom:8px;}
.leadership-timeline-body p{color:var(--stone); font-size:14.5px; line-height:1.8; max-width:560px;}
@media(max-width:600px){
  .leadership-timeline-item{grid-template-columns:40px 1fr; gap:14px;}
  .leadership-timeline-year{font-size:11px;}
  .leadership-timeline-dot{inset-inline-start:14px;}
  .leadership-timeline::before{inset-inline-start:19px;}
}

/* ===================================================================
   CONTACT PAGE — online badge + direct WhatsApp CTA
=================================================================== */
.contact-online-badge{
  display:inline-flex; align-items:center; gap:10px; background:rgba(37,211,102,.08);
  border:1px solid rgba(37,211,102,.3); color:#1a8a4a; padding:11px 18px; border-radius:30px;
  font-size:13.5px; font-weight:700; margin-bottom:32px;
}
.contact-online-dot{width:8px; height:8px; border-radius:50%; background:#25D366; flex-shrink:0; animation:onlinePulse 2s ease-in-out infinite;}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 8px rgba(37,211,102,0);}}
.contact-whatsapp-cta{
  display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff;
  padding:15px 26px; border-radius:8px; font-weight:700; font-size:14.5px; margin-top:12px;
  transition:.3s var(--ease);
}
.contact-whatsapp-cta:hover{background:#1ebe57; transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,211,102,.3);}

/* ===================================================================
   PROJECTS PAGE — filter bar + detailed cards
=================================================================== */
.projects-filter-bar{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px;}
.projects-filter-btn{
  padding:11px 22px; border:1.5px solid rgba(24,22,20,.15); border-radius:30px;
  font-size:13.5px; font-weight:700; color:var(--ink); background:var(--paper);
  transition:.3s var(--ease); cursor:pointer;
}
.projects-filter-btn:hover{border-color:var(--copper);}
.projects-filter-btn.active{background:var(--copper); border-color:var(--copper); color:#fff;}

.project-card-detailed{
  display:block; overflow:hidden; border-radius:12px; box-shadow:0 8px 24px rgba(24,22,20,.06);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .3s, visibility .3s;
}
.project-card-detailed.filtered-out{display:none;}
.project-card-detailed:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(24,22,20,.14);}
.project-card-media{position:relative; aspect-ratio:4/5; overflow:hidden;}
.project-card-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.project-card-detailed:hover .project-card-media img{transform:scale(1.08);}
.project-card-status{
  position:absolute; top:16px; inset-inline-end:16px; background:var(--copper); color:#fff;
  font-size:11px; font-weight:800; padding:6px 14px; border-radius:20px;
}
.project-card-info{padding:20px 22px; background:var(--paper);}
.project-card-info h3{font-size:18px; margin-bottom:8px; color:var(--ink);}
.project-card-meta{display:flex; gap:14px; font-size:12.5px; color:var(--stone-dark);}
.project-card-meta span::before{content:'•'; margin-inline-end:6px; color:var(--copper);}
.project-card-meta span:first-child::before{content:'';}

/* ===================================================================
   AKABER "A" WATERMARK — subtle brand identity element for section backgrounds
=================================================================== */
.a-watermark{
  position:absolute; z-index:0; pointer-events:none; opacity:.04;
  width:min(40vw, 460px); height:auto;
  top:50%; inset-inline-end:-5%; transform:translateY(-50%);
}
.section-dark .a-watermark{filter:brightness(3);}
.section-cream .a-watermark, .a-watermark.on-light{filter:brightness(0);}
.a-watermark.pos-start{inset-inline-end:auto; inset-inline-start:-5%;}
.a-watermark.pos-center{inset-inline-end:50%; transform:translate(50%,-50%);}
@media(max-width:900px){.a-watermark{width:60vw; opacity:.03;}}

/* Divider between sections — small "A" mark as a visual rhythm break */
.a-divider{
  display:flex; align-items:center; justify-content:center; padding:6px 0;
  opacity:.5;
}
.a-divider img{width:22px; height:auto;}

/* ===================================================================
   SECTOR CARDS — 3 flip cards (front: image+title, back: description)
   Correct 3D flip: perspective on wrapper, backface-visibility:hidden on
   both faces, back pre-rotated 180deg so it reads correctly once flipped.
=================================================================== */
/* ===================================================================
   UNIVERSAL FLIP CARD SYSTEM — the correct, standard implementation.
   Verified against W3Schools / MDN / DEV.to reference implementations:
   the back face is ALWAYS rotateY(180deg) with no RTL exception. RTL/LTR
   text direction is handled by the page's own dir attribute, which the
   browser applies correctly to the (already-flipped) back face content
   automatically — no extra CSS transform logic is needed or correct.
=================================================================== */
.flip-universal{ perspective:1600px; }
.flip-universal-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .8s cubic-bezier(.25,.8,.3,1);
}
.flip-universal:hover .flip-universal-inner,
.flip-universal.is-flipped .flip-universal-inner{ transform:rotateY(180deg); }
.flip-universal-front, .flip-universal-back{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:16px; overflow:hidden;
}
.flip-universal-back{ transform:rotateY(180deg); }

/* ===================================================================
   SECTOR CARDS (3 main cards) — built on the universal flip system
=================================================================== */
.sectors-three-wrap{
  overflow:hidden; margin-top:50px; padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.sectors-three-grid{
  display:flex; gap:28px; width:max-content; will-change:transform;
}
.sector-card-premium{ display:block; width:360px; flex:0 0 360px; aspect-ratio:3/4; cursor:pointer; }

@media(min-width:901px){
  /* On desktop only: disable the mobile swipe-snap behavior entirely,
     the JS-driven continuous auto-scroll below takes over instead */
  .sectors-three-grid{ overflow-x:visible; scroll-snap-type:none; }
}

.sector-card-premium .flip-universal-front{
  background:var(--charcoal-2); border:1px solid rgba(216,155,60,.18);
}
.sector-card-premium .flip-universal-front img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(.2) brightness(.75);
}
.sector-card-premium .flip-universal-front::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,22,25,.88) 0%, rgba(20,22,25,.1) 50%, transparent 70%);
}
.sector-card-premium .flip-universal-front h3{
  position:absolute; bottom:20px; inset-inline-start:20px; inset-inline-end:20px; z-index:2;
  color:var(--cream); font-size:20px; font-weight:800; margin:0;
}
.sector-card-premium .flip-universal-front .flip-hint{
  position:absolute; top:16px; inset-inline-end:16px; z-index:2;
  width:32px; height:32px; border-radius:50%; background:rgba(216,155,60,.9);
  display:flex; align-items:center; justify-content:center; color:var(--charcoal);
  font-size:14px;
}

.sector-card-premium .flip-universal-back{
  background:linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 100%);
  border:1px solid rgba(216,155,60,.3);
  padding:28px 26px; display:flex; flex-direction:column; justify-content:center;
}
.sector-card-premium .flip-universal-back h4{ color:var(--cream); font-size:19px; font-weight:800; margin-bottom:12px; }
.sector-card-premium .flip-universal-back p{ color:var(--stone); font-size:14px; line-height:1.8; margin-bottom:18px; }
.sector-card-premium .flip-universal-back .link-arrow{ color:var(--copper-light); font-weight:700; font-size:13px; }

@media(max-width:900px){
  .sectors-three-grid{
    display:flex; overflow-x:auto; gap:16px; margin:50px -18px 0; padding:4px 18px 20px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-padding-inline:18px;
    scrollbar-width:none;
  }
  .sectors-three-grid::-webkit-scrollbar{ display:none; }
  .sector-card-premium{ flex:0 0 70vw; scroll-snap-align:start; scroll-snap-stop:always; aspect-ratio:4/3.4; width:auto; }
  /* The desktop version repeats the 3 cards ×3 for a seamless auto-scroll loop;
     on mobile we only want the original 3 (Scroll Snap doesn't need repetition). */
  .sector-card-premium:nth-child(n+4){ display:none; }

  /* Small dot indicators under the swipe area — pure CSS, no JS state needed
     since the browser handles the actual snapping and scroll position. */
  .sectors-swipe-hint{
    display:flex; justify-content:center; gap:6px; margin-top:2px;
  }
  .sectors-swipe-hint span{
    width:6px; height:6px; border-radius:50%; background:rgba(216,155,60,.3);
  }
  .sector-card-premium{aspect-ratio:4/3;}
}


/* ===================================================================
   FLIP PROJECT CARD — used inside the Real Estate / Trade marquees
=================================================================== */
.flip-project-card{
  flex:0 0 320px; aspect-ratio:4/3.4; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.2); border-radius:14px;
}
.flip-project-card .flip-universal-front{
  background:var(--charcoal);
}
.flip-project-card .flip-universal-front img{
  width:100%; height:100%; object-fit:cover; filter:brightness(.8);
}
.flip-project-card .flip-universal-front::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,22,25,.9) 0%, rgba(20,22,25,.1) 50%, transparent 70%);
}
.flip-project-card .flip-universal-front h3{
  position:absolute; bottom:20px; inset-inline-start:20px; inset-inline-end:20px; z-index:2;
  color:var(--cream); font-size:19px; font-weight:800; margin:0;
}
.flip-project-card .flip-universal-front .flip-hint{
  position:absolute; top:16px; inset-inline-end:16px; z-index:2;
  width:32px; height:32px; border-radius:50%; background:rgba(216,155,60,.9);
  display:flex; align-items:center; justify-content:center; color:var(--charcoal); font-size:14px;
}

.flip-project-card .flip-universal-back{
  background:linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 100%);
  border:1px solid rgba(216,155,60,.28);
  padding:26px 24px; display:flex; flex-direction:column; justify-content:center;
}
.flip-project-card .flip-universal-back p{color:var(--stone); font-size:13.5px; line-height:1.8; margin-bottom:18px;}
.flip-project-card .flip-universal-back .link-arrow{color:var(--copper-light); font-weight:700; font-size:13px;}

@media(max-width:768px){
  .flip-project-card{flex:0 0 78vw;}
}

/* ===================================================================
   MOBILE APP-FEEL — final polish pass (global, applies to all viewports
   under 768px, layered on top of everything above)
=================================================================== */
@media(max-width:768px){
  /* Every tappable element gets a real 44px minimum touch target (Apple HIG / Material Design standard) */
  .btn-primary, .btn-outline, .link-arrow, .lang-switch, .mobile-nav-close{
    min-height:44px;
  }
  .lang-switch{ min-width:44px; display:inline-flex; align-items:center; justify-content:center; }

  /* Subtle press feedback across all cards — reinforces the "app" feel */
  .market-card:active, .marquee-item:active, .why-card-light:active,
  .flip-project-card:active, .sector-card-premium:active{
    transform:scale(.98); transition:transform .15s ease;
  }

  /* Prevent horizontal body scroll from any element overflowing on small screens */
  html, body{ overflow-x:hidden; width:100%; }

  /* Mobile nav (full-screen menu) also respects safe areas */
  .mobile-nav{ padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }
  .mobile-nav-close{
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    top:calc(env(safe-area-inset-top, 0px) + 16px);
  }

  /* Forms: 16px minimum font-size on inputs prevents iOS Safari from
     automatically zooming in when a field is focused — a classic mobile-web bug */
  input, textarea, select{ font-size:16px !important; }
}

/* ===================================================================
   BOTTOM NAVIGATION BAR — mobile only, following official spec:
   Apple HIG tab bar height 83px + 21px home indicator safe area,
   Material Design 3–5 destinations max, icon + label always visible.
=================================================================== */
.bottom-nav{ display:none; }

@media(max-width:768px){
  .bottom-nav{
    display:flex; position:fixed; bottom:0; inset-inline-start:0; width:100%; z-index:600;
    background:rgba(30,33,36,.97); backdrop-filter:blur(16px);
    border-top:1px solid rgba(216,155,60,.15);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
  }
  .bottom-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:10px 4px 8px; min-height:56px;
    background:none; border:none; cursor:pointer;
    color:rgba(244,243,240,.55); transition:color .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .bottom-nav-item:active{ transform:scale(.94); }
  .bottom-nav-item.active{ color:var(--copper-light); }

  .bottom-nav-icon{ width:22px; height:22px; position:relative; }
  .bottom-nav-icon::before{
    content:''; position:absolute; inset:0; background:currentColor;
    -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
  }
  /* Simple, universally recognizable icon shapes drawn with CSS clip-path (no icon font dependency) */
  .icon-home::before{ clip-path:polygon(50% 0%, 100% 38%, 100% 100%, 62% 100%, 62% 65%, 38% 65%, 38% 100%, 0% 100%, 0% 38%); }
  .icon-sectors{ position:relative; }
  .icon-sectors i{ position:absolute; background:currentColor; border-radius:2px; }
  .icon-sectors i:nth-child(1){ inset-inline-start:0; bottom:0; width:45%; height:45%; }
  .icon-sectors i:nth-child(2){ inset-inline-end:0; bottom:0; width:45%; height:45%; opacity:.6; }
  .icon-projects::before{ clip-path:polygon(0 15%, 60% 15%, 60% 0%, 100% 0%, 100% 85%, 40% 85%, 40% 100%, 0 100%); }
  .icon-contact::before{ clip-path:polygon(0 20%, 15% 0, 85% 0, 100% 20%, 100% 100%, 0 100%); }
  .icon-menu::before{
    clip-path:polygon(0 0,100% 0,100% 20%,0 20%,0 40%,100% 40%,100% 60%,0 60%,0 80%,100% 80%,100% 100%,0 100%);
  }
  .bottom-nav-label{ font-size:10px; font-weight:600; line-height:1; white-space:nowrap; }

  /* Push page content up so the fixed bottom bar never overlaps it */
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-float{ bottom:calc(56px + env(safe-area-inset-bottom, 0px) + 14px); }
}

/* ===================================================================
   MARQUEE SWIPE/DISCOVERABILITY HINT — dots shown under auto-scrolling
   marquees on both desktop and mobile, indicating more content exists
=================================================================== */
.marquee-swipe-hint{
  display:flex; justify-content:center; gap:6px; margin-top:18px;
}
.marquee-swipe-hint span{
  width:6px; height:6px; border-radius:50%; background:rgba(216,155,60,.3);
}