/* ---------- TOKEN PALETTE (re-use across site) ----------------------- */
:root{
  --ff-head:"Libre Baskerville",serif;
  --ff-body:"Almarai",sans-serif;

  --bg:#fff;          --fg:#1b1b1b;
  --section:#f6f6f6;  --card:#fff;   --border:#e3e3e3;

  --accent:#043f82;   --accent-hover:#1251b8;
}
[data-theme="dark"]{
  --bg:#121212;       --fg:#f1f1f1;
  --section:#1c1c1c;  --card:#1e1e1e;--border:#333;
  --accent:#5196ff;   --accent-hover:#7cb0ff;
}

/* ---------- BASE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff-body);background:var(--bg);color:var(--fg);line-height:1.65;}
h1,h2,h3{font-family:var(--ff-head);color:var(--fg);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:none;}

.container{width:min(92%,1100px);margin-inline:auto;}

.fade-pre{opacity:0;transform:translateY(24px);}
.fade-in{opacity:1!important;transform:none!important;transition:all .8s ease;}

/* ---------- HERO ----------------------------------------------------- */
.main-content{
  position:relative;
  min-height:60vh;
  background:url("../images/career0.png") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  isolation:isolate;
}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:-1;}
.text-content{
  max-width:620px;color:#fff;padding:0 1rem;
  animation:fade-in-slide 1s ease-out both;
}
.text-content h2{font-size:clamp(2rem,4vw + 1rem,3.3rem);margin-bottom:.8rem;}
.text-content p{font-size:clamp(1rem,1vw + .9rem,1.3rem);margin-bottom:1.7rem;}
.learn-more-btn a{
  display:inline-block;padding:.9rem 1.8rem;
  background:#fff;color:var(--accent);font-weight:700;border-radius:6px;
  transition:background .25s ease;
}
.learn-more-btn a:hover{background:var(--accent-hover);color:#fff;}
@keyframes fade-in-slide{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:none;}
}

/* ---------- MISSION -------------------------------------------------- */
.mission-section{padding:4rem 0;}
.mission-title{font-size:clamp(1.9rem,2vw + 1rem,2.8rem);margin-bottom:1.3rem;}
.mission-text{max-width:760px;margin:0 auto 1rem;font-size:1.05rem;line-height:1.6;}

/* ---------- VALUES GRID (new) --------------------------------------- */
.values-grid{
  background:var(--section);padding:4rem 1rem;
  display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.value-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 4px 12px rgb(0 0 0 / .05);padding:2rem 1.5rem;text-align:center;
  transition:transform .3s ease;
}
.value-card:hover{transform:translateY(-4px);}
.value-card h3{font-size:1.25rem;margin-bottom:.55rem;color:var(--accent);}

/* ---------- BENEFITS BANNER (new) ----------------------------------- */
.benefits-banner{
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;
  background:var(--accent);color:#fff;padding:3rem 1rem;text-align:center;
}
.benefit{flex:1 1 200px;max-width:260px;}
.benefit .icon{font-size:2rem;display:block;margin-bottom:.6rem;}

/* ---------- JOBS LIST ----------------------------------------------- */
.jobs-container{padding:4rem 0;display:grid;gap:3rem;grid-template-columns:2fr 1fr;}
@media(max-width:960px){.jobs-container{grid-template-columns:1fr;}}

.jobs-list{padding:0 1rem;}
.post{font-size:1.6rem;margin-bottom:1.5rem;}
.job-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:1.6rem 1.4rem;margin-bottom:1.5rem;
  box-shadow:0 4px 10px rgb(0 0 0 / .04);transition:transform .3s ease;
}
.job-card:hover{transform:translateY(-4px);}
.job-title{font-size:1.2rem;font-weight:700;color:var(--accent);}
.job-location,.job-posted{margin-top:.4rem;font-size:.95rem;}

.about-section{
  background:var(--section);border-radius:12px;padding:2.5rem 2rem;text-align:center;
}
.about-logo{font-size:3rem;margin:0.5rem 0;color:var(--accent);}

/* ---------- OFFICE INFO --------------------------------------------- */
.more-about-offices{padding:4rem 1rem;background:var(--section);}
.more-about-offices h2{text-align:center;margin-bottom:2.5rem;font-size:1.8rem;}
.office-info-container{
  display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.office-info-column h3{color:var(--accent);margin-bottom:.4rem;}
.link-text{display:inline-block;margin-top:.4rem;}

/* ---------- ANIMATION (fade-in on scroll) --------------------------- */
.fade-target{opacity:0;transform:translateY(22px);}
.fade-visible{opacity:1!important;transform:none!important;transition:all .8s ease;}