/* ثبات — Thabat | Saudi Resilience Platform — site stylesheet */

@font-face{
  font-family:'beIN New Arabic';
  src:url('../fonts/beINNewArabicFont2017-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'beIN New Arabic';
  src:url('../fonts/beINNewArabicFont2017-DemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'beIN New Arabic';
  src:url('../fonts/beINNewArabicFont2017-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --navy:#1F2946;
  --navy-2:#283654;
  --mint:#66BA94;
  --mint-ink:#1D5C41;   /* darkened mint, for text-on-light use */
  --sky:#41B5E6;
  --sky-ink:#0E6F91;
  --cyan:#87CEDB;
  --black:#000000;
  --paper:#F5F9F9;
  --surface:#FFFFFF;
  --line:#DCE6E6;
  --ink:#182231;
  --ink-soft:#4B5A63;
  --muted:#6E7C82;
  --shadow:0 1px 2px rgba(31,41,70,.06), 0 10px 28px -14px rgba(31,41,70,.22);
  --radius:14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
  line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{ font-family:'beIN New Arabic','Segoe UI',Tahoma,sans-serif; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.35; font-weight:700; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:var(--sky-ink); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.shell{ max-width:1120px; margin:0 auto; padding:0 24px; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- nav ---------- */
header.nav{ background:var(--navy); position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.15); }
header.nav .bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; }
header.nav .brand img{ height:30px; width:auto; }
header.nav nav ul{ display:flex; align-items:center; gap:26px; }
header.nav nav a{ color:rgba(255,255,255,.82); font-size:15px; }
header.nav nav a:hover, header.nav nav a.active{ color:#fff; text-decoration:none; }
header.nav nav a.active{ border-bottom:2px solid var(--mint); padding-bottom:4px; }
header.nav .lang-switch{
  border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:20px; padding:5px 14px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
header.nav .lang-switch:hover{ background:rgba(255,255,255,.1); text-decoration:none; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:24px; cursor:pointer; }
@media (max-width:820px){
  header.nav nav.links{
    position:absolute; inset-inline:0; top:100%; background:var(--navy-2);
    flex-direction:column; padding:10px 24px 18px; display:none;
  }
  header.nav nav.links.open{ display:flex; }
  header.nav nav.links ul{ flex-direction:column; align-items:flex-start; gap:14px; padding-top:8px; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{ background:var(--navy); color:#fff; padding:64px 0 78px; }
.hero .eyebrow{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin:0 0 14px; }
.hero h1{ font-size:clamp(30px,4.6vw,46px); max-width:16ch; color:#fff; }
.hero p.lede{ color:rgba(255,255,255,.82); max-width:60ch; font-size:17.5px; margin-top:14px; }
.hero .cta-row{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px;
  font-weight:600; font-size:15px; border:1.5px solid transparent; cursor:pointer;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--mint); color:var(--navy); }
.btn-primary:hover{ background:#7ecaa4; }
.btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }

/* ---------- sections ---------- */
section{ padding:64px 0; }
section.tight{ padding:48px 0; }
.section-head{ max-width:64ch; margin-bottom:34px; }
.section-head .kicker{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-ink); font-weight:700; margin-bottom:8px; }
.section-head h2{ font-size:30px; color:var(--navy); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow);
}
.card .ico{
  width:44px; height:44px; border-radius:10px; background:color-mix(in srgb, var(--mint) 18%, white);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--mint-ink); font-weight:700;
}
.card h3{ font-size:18px; color:var(--navy); }
.card p{ font-size:14.5px; margin-bottom:0; }

.strip{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip .shell{ display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between; padding:26px 24px; }
.strip .stat b{ display:block; font-size:22px; color:var(--navy); }
.strip .stat span{ font-size:13px; color:var(--muted); }

.services-block{ display:grid; gap:16px; margin-top:8px; }
.svc-item{
  display:grid; grid-template-columns:22px 1fr; gap:14px; padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px;
}
.svc-item .dot{ width:10px; height:10px; border-radius:50%; background:var(--mint); margin-top:6px; }
.svc-item b{ color:var(--navy); display:block; margin-bottom:2px; }
.svc-item span{ color:var(--ink-soft); font-size:14.5px; }

.badges{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; }
.badge{ font-size:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); padding:5px 11px; border-radius:20px; }

/* ---------- jobs ---------- */
.job{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:18px; box-shadow:var(--shadow);
}
.job .job-top{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px; }
.job .job-top h3{ margin:0; font-size:19px; color:var(--navy); }
.job .meta{ font-size:12.5px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; }
.job .meta span{ background:color-mix(in srgb, var(--sky) 14%, white); color:var(--sky-ink); padding:3px 10px; border-radius:20px; }
.job p{ font-size:14.5px; margin-bottom:8px; }
.job .apply{ font-size:14px; font-weight:600; }

.job-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px 18px; margin:14px 0;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:700px){ .job-facts{ grid-template-columns:repeat(2,1fr); } }
.job-facts div{ display:flex; flex-direction:column; gap:2px; }
.job-facts dt{ margin:0; font-size:12px; color:var(--muted); }
.job-facts dd{ margin:0; font-size:14px; font-weight:600; color:var(--navy); }

.job-details summary{
  cursor:pointer; font-weight:600; color:var(--sky-ink); list-style:none;
  display:inline-flex; align-items:center; gap:6px; font-size:14.5px;
}
.job-details summary::-webkit-details-marker{ display:none; }
.job-details[open] summary{ margin-bottom:12px; }
.job-details summary:hover{ text-decoration:underline; }

.callout{
  border:1px dashed var(--line); border-radius:12px; padding:16px 18px; background:var(--surface);
  color:var(--ink-soft); font-size:14px; margin-top:26px;
}

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:36px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list li{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.contact-list li:last-child{ border-bottom:none; }
.contact-list b{ display:block; color:var(--navy); font-size:13px; margin-bottom:2px; }
form.contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 13px; font:inherit; color:var(--ink);
  background:var(--paper);
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--mint); outline-offset:1px; border-color:var(--mint); }
.field textarea{ min-height:120px; resize:vertical; }
.hp{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.form-note{ font-size:13px; color:var(--muted); margin-top:10px; }
.form-status{ display:none; padding:12px 14px; border-radius:9px; font-size:14px; margin-bottom:16px; }
.form-status.ok{ display:block; background:color-mix(in srgb, var(--mint) 18%, white); color:var(--mint-ink); }
.form-status.err{ display:block; background:#FCE8E4; color:#9C4A3A; }

/* ---------- footer ---------- */
footer.site{ background:var(--navy); color:rgba(255,255,255,.75); padding:44px 0 30px; margin-top:40px; }
footer.site .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; margin-bottom:28px; }
@media (max-width:700px){ footer.site .cols{ grid-template-columns:1fr; } }
footer.site img{ height:26px; margin-bottom:12px; }
footer.site h4{ color:#fff; font-size:13.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
footer.site a{ color:rgba(255,255,255,.75); }
footer.site a:hover{ color:#fff; }
footer.site .bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

.social-icons{ display:flex; gap:8px; margin-top:14px; }
.social-icons a{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
}
.social-icons a:hover{ background:rgba(255,255,255,.14); text-decoration:none; }
.social-icons svg{ width:12px; height:12px; fill:currentColor; }

.center-page{ padding:110px 0; text-align:center; }
.center-page h1{ color:var(--navy); font-size:30px; }