/* ─── SHARED STYLES — afnan-careers ─────────────────────────────── */
/* Included by index.html, careers.html, job.html                    */

/* ─── DESIGN TOKENS ─────────────────────────────────── */
:root{
  --navy:#0A0F2E; --navy2:#141C4A;
  --gold:#C4A05A;
  --sage:#EBEBEB;
  --white:#FFFFFF; --ink:#0E1118;
  --body:#44464F; --muted:#888A96;
  --rule:rgba(0,0,0,.09);
  --pad:clamp(24px,5.5vw,88px); --max:1280px;
  --f:'Noto Serif Display',serif;
  --ff:'Figtree',sans-serif;
}

/* ─── RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff);background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}

/* ─── NAV — dark full-width bar ─────────────────────────── */
.nw {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

nav {
  pointer-events: all;
  background: rgba(10, 15, 46, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 clamp(20px, 4vw, 60px);
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 68px;
  gap: 0;
  transition: background 0.3s, box-shadow 0.3s;
}

nav.scrolled {
  background: rgba(10, 15, 46, 0.97);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}

.nl {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 40px;
}

.nl img {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.nlinks {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  height: 100%;
}

.nlinks a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
  padding: 0 14px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
  white-space: nowrap;
}

.nlinks a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.2s, transform 0.2s;
}

.nlinks a:hover {
  color: #fff;
}

.nlinks a:hover::after {
  opacity: 0.6;
  transform: scaleX(1);
}

.nlinks a.here {
  color: #fff;
}

.nlinks a.here::after {
  opacity: 1;
  transform: scaleX(1);
}

.nbtn {
  flex-shrink: 0;
  margin-left: 24px;
  padding: 10px 22px;
  border-radius: 100px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ff);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  letter-spacing: 0.01em;
}

.nbtn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* ─── Mobile hamburger ───────────────────────────────────── */
.n-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  border: none;
  background: none;
}

.n-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.n-mobile-menu {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: rgba(10, 15, 46, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding: 16px 24px 24px;
  z-index: 499;
  flex-direction: column;
  gap: 4px;
}

.n-mobile-menu.open {
  display: flex;
}

.n-mobile-menu a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: block;
  transition: color 0.2s;
}

.n-mobile-menu a:last-child {
  border-bottom: none;
}

.n-mobile-menu a.here,
.n-mobile-menu a:hover {
  color: #fff;
}

.n-mobile-menu .nbtn {
  margin: 14px 0 0;
  width: 100%;
  justify-content: center;
}

@media (max-width: 700px) {
  .nlinks { display: none; }
  .nbtn.desktop-only { display: none; }
  .n-hamburger { display: flex; }
}


/* ─── FOOTER ──────────────────────────────────────────── */
.fw{background:var(--navy);padding:0 var(--pad);}
.fcard{background:#fff;border-radius:22px;padding:48px 52px;max-width:var(--max);margin:0 auto;}
.ftop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.fbrand img{height:26px;margin-bottom:14px;}
.fbrand p{font-size:13px;color:var(--body);line-height:1.7;max-width:240px;margin-bottom:14px;}
.femail{font-size:13px;color:var(--navy);font-weight:500;display:inline-flex;align-items:center;gap:5px;}
.femail:hover{opacity:.75;}
.fcol h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:14px;}
.fcol a{display:block;font-size:13px;color:var(--body);margin-bottom:8px;transition:color .2s;}
.fcol a:hover{color:var(--navy);}
.fbot{border-top:1px solid var(--rule);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.fcopy{font-size:12px;color:var(--muted);}
.fleg{display:flex;gap:16px;}
.fleg a{font-size:12px;color:var(--muted);transition:color .2s;}
.fleg a:hover{color:var(--navy);}
.fpad{background:var(--navy);height:36px;}
@media(max-width:900px){.ftop{grid-template-columns:1fr 1fr;gap:32px;}.fcard{padding:36px 28px;}}
@media(max-width:500px){.ftop{grid-template-columns:1fr;}}

/* ─── CTA BAND ────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;display:flex;align-items:center;background:var(--navy);}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.cta-dim{position:absolute;inset:0;background:rgba(10,15,46,.72);}
.cta-in{position:relative;z-index:2;text-align:center;padding:72px var(--pad);max-width:var(--max);margin:0 auto;width:100%;}
.cta-tag{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px;}
.cta-h{font-size:clamp(28px,5vw,60px);font-weight:700;color:#fff;line-height:1.02;letter-spacing:-.03em;margin-bottom:28px;}
.cta-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:100px;background:#fff;color:var(--navy);font-size:14px;font-weight:600;font-family:var(--ff);border:none;cursor:pointer;transition:opacity .2s;}
.cta-btn:hover{opacity:.88;}

/* ─── COMMON UTILITIES ───────────────────────────────── */
.err{background:#FEE2E2;border:1px solid #FECACA;color:#991B1B;font-size:13px;padding:11px 14px;border-radius:8px;margin-bottom:12px;display:none;}
.req{color:#C0392B;margin-left:2px;}
.slbl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.spin{width:22px;height:22px;border:2px solid var(--rule);border-top-color:var(--navy);border-radius:50%;animation:spin .65s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}