/* --- Formatted Light Preloader Styles --- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--navy, #102542);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.preload-logo {
  width: auto;
  height: 120px;
  object-fit: contain;
  animation: pulseLogo 1.2s ease-in-out infinite alternate;
}

@keyframes pulseLogo {
  0% { 
    transform: scale(0.96); 
    opacity: 0.8; 
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1)); 
  }
  100% { 
    transform: scale(1.04); 
    opacity: 1; 
    filter: drop-shadow(0 0 25px rgba(132, 126, 166, 0.6)); 
  }
}

/* --- Subtly Enhance Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f4f6f9;
}
::-webkit-scrollbar-thumb {
  background: var(--navy, #102542);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mid, #0b1a2e);
}

/* --- STRICT TYPOGRAPHY ENFORCEMENT --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

body.ar, body.ar h1, body.ar h2, body.ar h3, body.ar h4, body.ar h5, body.ar h6, body.ar p, body.ar span, body.ar div, body.ar a, body.ar button, body.ar li, body.ar input { 
  font-family: 'FF Shamel Family Sans One', sans-serif !important; 
}
body.ar h1, body.ar h2, body.ar h3, body.ar h4, body.ar h5, body.ar h6, body.ar strong, body.ar b, body.ar .nav-links a { 
  font-family: 'FF Shamel Family Sans One Bold', sans-serif !important; 
}

body.en, body.en h1, body.en h2, body.en h3, body.en h4, body.en h5, body.en h6, body.en p, body.en span, body.en div, body.en a, body.en button, body.en li, body.en input { 
  font-family: 'Outfit', sans-serif !important; 
}

/* --- LUXURY PROFILE PICTURE REDESIGN --- */
.bcard-photo, .tcard-photo, .tcard-ceo-photo { width: 160px !important; height: 160px !important; border-radius: 50% !important; margin: 2rem auto 0.5rem auto !important; overflow: hidden !important; position: relative !important; border: 4px solid var(--off) !important; background: var(--off) !important; box-shadow: 0 10px 30px rgba(16,37,66,0.12) !important; }
.bcard-img, .tcard-img, .tcard-ceo-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 10% !important; border-radius: 50% !important; }
.bcard-accent, .tcard-accent-bar { opacity: 0 !important; height: 0 !important; margin: 0 !important; }

/* GOVERNANCE TABS */
.gov-tabs { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3.5rem; }
.gtab { background: transparent; border: none; font-size: 1.25rem; font-weight: 700; color: var(--lavender); opacity: 0.6; padding: 0.8rem 1.5rem; cursor: pointer; position: relative; transition: all 0.3s ease; }
.gtab.active { color: var(--navy); opacity: 1; }
.gtab::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: var(--navy); transition: 0.3s ease; transform: translateX(-50%); }
.gtab.active::after { width: 100%; }
.gov-panel { display: none; opacity: 0; }
.gov-panel.active { display: block; opacity: 1; animation: proj-fadein 0.6s ease forwards; }


/* TEAM SUB-TABS (inside Company Team panel) */
.team-subtabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 2rem;
}
.stab {
  background: transparent;
  color: var(--navy);
  border: 2px solid rgba(16,37,66,0.25);
  padding: 0.55rem 1.6rem;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}
.stab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.stab:hover:not(.active) {
  border-color: var(--navy);
  background: rgba(16,37,66,0.06);
}
.team-level-content {
  animation: proj-fadein 0.45s ease forwards;
}

/* Placeholder avatar for missing profile photos */
.tcard-placeholder-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8eaf0, #f4f5f9);
}
.tcard-placeholder-img svg {
  width: 55%;
  height: 55%;
  fill: rgba(16,37,66,0.18);
}

/* Team hierarchy section label */
.team-level-label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 3rem auto 1.5rem;
  max-width: 700px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lavender);
  opacity: 0.8;
}
.team-level-label::before,
.team-level-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(16,37,66,0.12);
}

/* ===================================================
   PREMIUM PROFILE CARDS — pcard system  v2
   =================================================== */
@keyframes pcardFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
@keyframes pcardShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%);  }
}

.pteam-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.5rem 0 4rem;
}

/* ─── CEO FEATURED CARD ─────────────────────────── */
.pcard-featured {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3rem;
  background: linear-gradient(135deg, #0d1e38 0%, #102542 55%, #1a3a5c 100%);
  border-radius: 24px;
  padding: 3rem 3.5rem;
  margin-bottom: 3rem;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid rgba(132,126,166,0.2);
  box-shadow: 0 30px 70px rgba(16,37,66,0.35),
              0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: pcardFloat 6s ease-in-out infinite;
  transition: box-shadow 0.4s ease;
}
.pcard-featured:hover {
  box-shadow: 0 40px 90px rgba(16,37,66,0.45),
              0 0 0 1px rgba(132,126,166,0.25) inset;
}
/* Glow orb top-right */
.pcard-featured::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(132,126,166,0.25) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
/* Glow orb bottom-left */
.pcard-featured::after {
  content: '';
  position: absolute;
  bottom: -90px; left: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,140,200,0.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* CEO Photo */
.pcard-featured .pcard-photo-wrap {
  width: 190px;
  height: 225px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45),
              0 0 0 3px rgba(132,126,166,0.4);
}
/* Shimmer sweep on CEO photo */
.pcard-featured .pcard-photo-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  animation: pcardShimmer 4s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

/* CEO Info */
.pcard-featured .pcard-info {
  flex: 1;
  min-width: 210px;
  text-align: right;
  position: relative;
  z-index: 2;
}
/* Vertical accent line (right side in Arabic) */
.pcard-featured .pcard-info::after {
  content: '';
  position: absolute;
  top: 10%; right: -1.4rem;
  width: 3px; height: 80%;
  background: linear-gradient(to bottom, var(--lavender), transparent);
  border-radius: 10px;
}
.pcard-featured .pcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(90deg, var(--lavender), #c4c0f0);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.42rem 1.2rem;
  border-radius: 30px;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 15px rgba(132,126,166,0.35);
}
.pcard-featured .pcard-badge::before { content: '★'; font-size: 0.65rem; }
.pcard-featured .pcard-name {
  font-size: 1.65rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 15px rgba(0,0,0,0.4);
}
.pcard-featured .pcard-sub {
  font-size: 0.9rem;
  color: rgba(180,183,222,0.7);
  font-weight: 500;
}

/* ─── TEAM GRID CARDS ───────────────────────────── */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.pcard {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 28px rgba(16,37,66,0.09),
              0 0 0 1px rgba(16,37,66,0.05);
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.38s ease;
  cursor: default;
}
.pcard:hover {
  transform: translateY(-9px) scale(1.015);
  box-shadow: 0 28px 60px rgba(16,37,66,0.18),
              0 0 0 1px rgba(132,126,166,0.22);
}
/* Left accent bar on hover */
.pcard::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, var(--lavender), var(--navy));
  opacity: 0;
  transition: opacity 0.38s ease;
}
.pcard:hover::after { opacity: 1; }

/* Photo area */
.pcard .pcard-photo-wrap {
  height: 265px;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background: #e8eaf0;
}
/* Dark gradient for name reveal */
.pcard .pcard-photo-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(16,37,66,0.78) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.38s ease;
  z-index: 2;
}
.pcard:hover .pcard-photo-wrap::after { opacity: 1; }

/* Floating name on hover inside photo */
.pcard-hover-name {
  position: absolute;
  bottom: 1.1rem; right: 1.2rem; left: 1.2rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-align: right;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.38s ease;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  line-height: 1.4;
}
.pcard:hover .pcard-hover-name {
  opacity: 1;
  transform: translateY(0);
}

/* Info section */
.pcard-info {
  padding: 1.3rem 1.5rem 1.6rem;
  text-align: right;
  border-top: 1px solid rgba(16,37,66,0.06);
  background: #fff;
}
.pcard-info .pcard-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 0.38rem;
}
.pcard-info .pcard-sub {
  font-size: 0.82rem;
  color: var(--lavender);
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ─── Shared photo styles ────────────────────────── */
.pcard-photo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pcard-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.pcard:hover .pcard-photo-img { transform: scale(1.07); }
.pcard-featured:hover .pcard-photo-img { transform: scale(1.04); }

.pcard-photo-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,0.1) 0%, transparent 55%);
  pointer-events: none;
  z-index: 2;
}

/* ─── Language adjustments ───────────────────────── */
body.en .pcard-featured .pcard-info { text-align: left; }
body.en .pcard-featured .pcard-info::after { right: auto; left: -1.4rem; }
body.en .pcard-info { text-align: left; }
body.en .pcard-hover-name { text-align: left; right: 0; }

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 640px) {
  .pcard-featured {
    flex-direction: column;
    padding: 2.2rem 1.8rem;
    animation: none;
  }
  .pcard-featured .pcard-info { text-align: center; }
  .pcard-featured .pcard-info::after { display: none; }
  .pcard-featured .pcard-photo-wrap { width: 150px; height: 178px; }
  .pcard-grid { grid-template-columns: 1fr; }
}

/* ─── AVATAR PLACEHOLDERS (temporary until photos uploaded) ─── */
.bcard-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e8edf5, #d5dce9);
  border-radius: 50%;
}
.bcard-avatar-placeholder svg {
  width: 55%;
  height: 55%;
  fill: rgba(16,37,66,0.22);
}

.pcard-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e8edf5, #d0d8e8);
}
.pcard-avatar-placeholder svg {
  width: 45%;
  height: 45%;
  fill: rgba(16,37,66,0.2);
}
/* CEO pcard featured placeholder gets darker bg */
.pcard-featured .pcard-avatar-placeholder {
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 18px;
}
.pcard-featured .pcard-avatar-placeholder svg {
  fill: rgba(132,126,166,0.35);
  width: 50%;
  height: 50%;
}