/* ============================================================
   IFYC Algeria - International Foundation for Youth and Children
   Brand: navy #243084 · sky #48A8CC · white
   Light-committed palette. Logical properties throughout for RTL.
   ============================================================ */

:root{
  --navy-950:#080F2E;
  --navy-900:#0C1436;
  --navy-800:#16225C;
  --navy:#243084;
  --navy-600:#33429E;
  --sky:#25AAE3;
  --sky-600:#1B8CC0;
  --sky-100:#E4F3FB;

  --ink:#111634;
  --ink-70:#3D4467;
  --ink-55:#5E6588;
  --line:#E2E6F0;
  --line-soft:#EDF0F7;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FC;
  --bg-tint:#EFF4FB;

  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow-s:0 1px 2px rgba(16,26,72,.06), 0 2px 6px rgba(16,26,72,.05);
  --shadow:0 4px 12px rgba(16,26,72,.07), 0 14px 34px rgba(16,26,72,.07);
  --shadow-l:0 10px 24px rgba(16,26,72,.10), 0 30px 70px rgba(16,26,72,.12);

  /* Manrope carries the headings (Latin + Cyrillic); IBM Plex Sans and its
     Arabic companion share a skeleton, so the four languages read as one voice. */
  --ff-head:"Manrope","Segoe UI",system-ui,sans-serif;
  --ff-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --ff-ar:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;

  --container:1180px;
  --gutter:clamp(18px,4vw,40px);
  --sec-y:clamp(64px,8vw,112px);
  color-scheme:light;
}

/* Arabic typography swap */
html[lang="ar"]{ --ff-head:var(--ff-ar); --ff-body:var(--ff-ar); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:86px; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[lang="ar"] body{ font-size:18px; line-height:1.9; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{ font-family:var(--ff-head); color:var(--navy-900); line-height:1.18; margin:0; letter-spacing:-.02em; font-weight:800; }
/* Plex Arabic tops out at 700, so Arabic headings ask for the weight that exists. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{ letter-spacing:0; line-height:1.4; font-weight:700; }
p{ margin:0; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Skip link (visually hidden until focused; never widens the page) ---------- */
.skip{
  position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; z-index:200;
}
.skip:focus{
  width:auto; height:auto; clip-path:none; overflow:visible;
  inset-block-start:0; inset-inline-start:12px;
  background:var(--navy); color:#fff; padding:12px 18px;
  border-radius:0 0 var(--radius-s) var(--radius-s);
}

:where(a,button,[tabindex]):focus-visible{ outline:3px solid var(--sky); outline-offset:3px; border-radius:6px; }

/* ============================================================ HEADER */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s ease, background .25s ease;
}
.hdr.is-stuck{ box-shadow:0 6px 24px rgba(16,26,72,.08); background:rgba(255,255,255,.95); }
/* wraps rather than overflows if scripting is unavailable */
.hdr-in{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; min-height:74px; padding-block:8px; }
.hdr--compact .hdr-in{ flex-wrap:nowrap; padding-block:0; height:74px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; }
.brand img{ width:46px; height:auto; flex:0 0 auto; }
.brand-tx{ display:flex; flex-direction:column; line-height:1.2; max-width:230px; }
.brand-tx b,.brand-tx span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-tx b{ font-family:var(--ff-head); font-size:16px; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.brand-tx span{ font-size:11.5px; color:var(--ink-55); font-weight:500; letter-spacing:.02em; }
html[lang="ar"] .brand-tx b{ font-size:17px; }
html[lang="ar"] .brand-tx span{ font-size:12px; }

.nav{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
.nav a{
  text-decoration:none; font-size:14px; font-weight:600; color:var(--ink-70);
  padding:9px 9px; border-radius:9px; white-space:nowrap; transition:color .18s, background .18s;
}
.nav a:hover{ color:var(--navy); background:var(--bg-tint); }
html[lang="ar"] .nav a{ font-size:15px; }

.hdr-act{ display:flex; align-items:center; gap:10px; margin-inline-start:8px; }

/* language switcher */
.lang{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 13px; font-size:14px; font-weight:600; color:var(--ink-70);
  transition:border-color .18s, box-shadow .18s;
}
.lang-btn:hover{ border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-100); }
.lang-btn > svg{ width:15px; height:15px; flex:0 0 auto; }
.lang-btn .chev{ width:11px; height:11px; opacity:.55; transition:transform .2s; }
.lang[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; inset-inline-end:0; top:calc(100% + 8px);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:6px; min-width:190px; z-index:120;
  display:none;
}
.lang[aria-expanded="true"] .lang-menu{ display:block; }
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:none; border:0; cursor:pointer; text-align:start;
  padding:10px 12px; border-radius:9px; font-size:14.5px; font-weight:600; color:var(--ink-70);
}
.lang-menu button:hover{ background:var(--bg-tint); color:var(--navy); }
.lang-menu button[aria-current="true"]{ color:var(--navy); background:var(--sky-100); }
.lang-menu button small{ font-weight:500; color:var(--ink-55); font-size:12px; }
.lang-menu button[aria-current="true"] small{ color:var(--sky-600); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-head); font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:13px 22px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
html[lang="ar"] .btn{ font-size:16px; }
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
html[dir="rtl"] .btn .ico-arrow{ transform:scaleX(-1); }
.btn-primary{ background:var(--navy); color:#fff; box-shadow:0 6px 18px rgba(36,48,132,.28); }
.btn-primary:hover{ background:var(--navy-600); transform:translateY(-2px); box-shadow:0 10px 26px rgba(36,48,132,.34); }
.btn-sky{ background:var(--sky); color:#fff; box-shadow:0 6px 18px rgba(37,170,227,.32); }
.btn-sky:hover{ background:var(--sky-600); transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.34); }
.btn-ghost:hover{ background:rgba(255,255,255,.18); border-color:#fff; transform:translateY(-2px); }
.btn-line{ background:#fff; color:var(--navy); border-color:var(--line); }
.btn-line:hover{ border-color:var(--sky); color:var(--sky-600); transform:translateY(-2px); }
.btn-sm{ padding:10px 17px; font-size:14px; }

/* burger */
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); background:#fff; border-radius:11px; cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:17px; height:1.8px; background:var(--navy); position:relative; border-radius:2px; }
.burger span::before,.burger span::after{ content:""; position:absolute; inset-inline-start:0; width:17px; height:1.8px; background:var(--navy); border-radius:2px; }
.burger span::before{ top:-5.5px; } .burger span::after{ top:5.5px; }

/* Compact header. The script measures the real width of the brand, the nav and
   the actions after each language change and adds .hdr--compact as soon as the
   full nav stops fitting, so the breakpoint follows the language rather than a
   guessed pixel value. */
.hdr--compact .nav{
  position:absolute; inset-block-start:100%; inset-inline:0;
  background:#fff; border-bottom:1px solid var(--line);
  flex-direction:column; align-items:stretch; gap:2px; padding:14px var(--gutter) 22px;
  box-shadow:var(--shadow); display:none; max-height:calc(100dvh - 74px); overflow-y:auto;
}
.hdr--compact .nav.open{ display:flex; }
.hdr--compact .nav a{ padding:13px 12px; font-size:16px; }
.hdr--compact .burger{ display:inline-flex; }
@media (max-width:640px){ .hdr-act .btn-cta{ display:none; } }

/* ============================================================ HERO */
.hero{ position:relative; overflow:hidden; background:var(--navy-950); color:#fff; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-3; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(37,170,227,.36), transparent 58%),
    linear-gradient(160deg, rgba(8,15,46,.93) 8%, rgba(12,20,54,.90) 42%, rgba(22,34,92,.88) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
}
.hero-in{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,72px); align-items:center;
  padding-block:clamp(64px,8vw,104px) clamp(72px,9vw,112px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-head); font-size:12.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--sky); background:rgba(37,170,227,.13);
  border:1px solid rgba(37,170,227,.32); padding:7px 15px; border-radius:999px;
}
html[lang="ar"] .eyebrow{ letter-spacing:0; text-transform:none; font-size:14px; }
html[lang="ru"] .eyebrow{ letter-spacing:.08em; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--sky); flex:0 0 auto; }
.eyebrow--dark{ color:var(--navy); background:var(--sky-100); border-color:rgba(37,170,227,.28); }

.hero h1{
  color:#fff; margin-block:22px 20px;
  font-size:clamp(34px,4.9vw,60px); letter-spacing:-.032em; line-height:1.08;
  text-wrap:balance;
}
html[lang="ar"] .hero h1{ font-size:clamp(31px,4.4vw,54px); line-height:1.34; letter-spacing:0; }
html[lang="ru"] .hero h1{ font-size:clamp(30px,4.2vw,52px); }
.hero .lead{ color:rgba(255,255,255,.80); font-size:clamp(16px,1.35vw,18.5px); max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }

/* hero photo cluster */
.hero-art{ position:relative; }
.hero-card{
  border-radius:var(--radius-l); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.14);
  transform:rotate(-1.4deg);
}
.hero-card img{ width:100%; aspect-ratio:10/9; object-fit:cover; }
.hero-card--sm{
  position:absolute; inset-block-end:-34px; inset-inline-start:-30px; width:44%;
  transform:rotate(3deg); border-radius:var(--radius);
}
.hero-card--sm img{ aspect-ratio:1/1; }
.hero-seal{
  position:absolute; inset-block-start:-26px; inset-inline-end:-18px; width:104px; opacity:.95;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));
}

/* stats strip */
.stats{ border-top:1px solid rgba(255,255,255,.14); background:rgba(6,11,34,.42); }
.stats-in{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:28px 10px; text-align:center; border-inline-end:1px solid rgba(255,255,255,.11); }
.stat:last-child{ border-inline-end:0; }
.stat b{ display:block; font-family:var(--ff-head); font-size:clamp(28px,3.2vw,38px); font-weight:800; color:#fff; line-height:1.1; letter-spacing:-.03em; }
.stat span{ display:block; margin-top:6px; font-size:13.5px; color:rgba(255,255,255,.66); font-weight:500; }
html[lang="ar"] .stat span{ font-size:15px; }

@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr; padding-block:52px 92px; }
  .hero-art{ max-width:520px; margin-inline:auto; width:100%; }
  .hero-card--sm{ width:40%; inset-inline-start:-14px; inset-block-end:-26px; }
  .hero-seal{ width:82px; inset-inline-end:-8px; }
  .stats-in{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-inline-end:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.11); }
}
@media (max-width:520px){ .hero-card--sm{ display:none; } }

/* ============================================================ SECTIONS */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--alt{ background:var(--bg-alt); }
.sec--tint{ background:linear-gradient(180deg,var(--bg-tint),var(--bg)); }
.sec--navy{ background:var(--navy-900); color:#fff; }
.sec--navy h2,.sec--navy h3{ color:#fff; }

.sec-head{ max-width:760px; margin-bottom:clamp(36px,4.6vw,58px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(28px,3.5vw,42px); margin-block:18px 16px; text-wrap:balance; }
html[lang="ar"] .sec-head h2{ font-size:clamp(27px,3.3vw,40px); }
.sec-head .lead{ color:var(--ink-70); font-size:clamp(16px,1.25vw,18px); }
.sec--navy .sec-head .lead{ color:rgba(255,255,255,.74); }

.rule{ width:56px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--sky),var(--navy)); margin-block:0 18px; }
.sec-head.center .rule{ margin-inline:auto; }

/* ---------- generic card grids ---------- */
.grid{ display:grid; gap:clamp(16px,1.8vw,22px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .g-4{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.2vw,26px); box-shadow:var(--shadow-s);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#D3DCEF; }
.card h3{ font-size:18px; margin-bottom:9px; }
html[lang="ar"] .card h3{ font-size:19.5px; }
.card p{ color:var(--ink-70); font-size:15.3px; line-height:1.66; }
html[lang="ar"] .card p{ font-size:16.5px; line-height:1.85; }

.ico{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(145deg,var(--navy),var(--navy-600)); color:#fff; flex:0 0 auto;
  box-shadow:0 6px 16px rgba(36,48,132,.24);
}
.ico svg{ width:23px; height:23px; }
.ico--sky{ background:linear-gradient(145deg,var(--sky),var(--sky-600)); box-shadow:0 6px 16px rgba(37,170,227,.28); }

/* ---------- about ---------- */
.about-top{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4.4vw,64px); align-items:center; margin-bottom:clamp(40px,5vw,64px); }
.about-art{ position:relative; }
.about-art .fr1{ border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-l); }
.about-art .fr1 img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.about-art .fr2{
  position:absolute; inset-block-end:-30px; inset-inline-end:-22px; width:46%;
  border-radius:var(--radius); overflow:hidden; border:5px solid #fff; box-shadow:var(--shadow);
}
.about-art .fr2 img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
@media (max-width:900px){
  .about-top{ grid-template-columns:1fr; }
  .about-art{ margin-bottom:36px; }
  .about-art .fr2{ width:38%; inset-inline-end:-8px; inset-block-end:-20px; }
}

.quote{
  position:relative; background:linear-gradient(135deg,var(--navy-900),var(--navy-800));
  color:#fff; border-radius:var(--radius-l); padding:clamp(28px,3.6vw,44px);
  overflow:hidden; box-shadow:var(--shadow-l);
}
.quote::after{
  content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-8%; width:340px; height:340px;
  background:radial-gradient(circle,rgba(37,170,227,.34),transparent 68%);
}
.quote p{ position:relative; font-family:var(--ff-head); font-size:clamp(18px,2.1vw,25px); font-weight:700; line-height:1.5; letter-spacing:-.015em; max-width:64ch; }
html[lang="ar"] .quote p{ font-size:clamp(19px,2.1vw,26px); line-height:1.75; letter-spacing:0; }
.quote .qm{ font-size:56px; line-height:.6; color:var(--sky); display:block; margin-bottom:14px; font-family:Georgia,serif; }

/* ---------- vision / mission ---------- */
.vm{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px); }
@media (max-width:800px){ .vm{ grid-template-columns:1fr; } }
.vm-card{
  position:relative; overflow:hidden; border-radius:var(--radius-l);
  padding:clamp(26px,3.2vw,40px); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-s);
}
.vm-card::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:4px; background:linear-gradient(90deg,var(--navy),var(--sky)); }
.vm-card h3{ font-size:clamp(21px,2.2vw,26px); margin-block:16px 12px; }
.vm-card p{ color:var(--ink-70); font-size:16px; }
html[lang="ar"] .vm-card p{ font-size:17.5px; }
.vm-card .ico{ width:54px; height:54px; }
.vm-card .ico svg{ width:26px; height:26px; }

/* ---------- values ---------- */
.val{ text-align:center; padding-block:26px; }
.val .ico{ margin-inline:auto; }
.val h3{ font-size:16.5px; margin-bottom:8px; }
html[lang="ar"] .val h3{ font-size:18px; }
.val p{ font-size:14.4px; color:var(--ink-70); line-height:1.62; }
html[lang="ar"] .val p{ font-size:15.8px; line-height:1.82; }

/* ---------- objectives ---------- */
.obj{ display:flex; gap:16px; align-items:flex-start; padding:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-s); transition:transform .22s, box-shadow .22s, border-color .22s; }
.obj:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#D3DCEF; }
.obj .num{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--sky-100); color:var(--navy); font-family:var(--ff-head); font-weight:800; font-size:15px;
  border:1px solid rgba(37,170,227,.24);
}
.obj h3{ font-size:16.5px; margin-bottom:6px; }
html[lang="ar"] .obj h3{ font-size:18px; }
.obj p{ font-size:14.6px; color:var(--ink-70); line-height:1.62; }
html[lang="ar"] .obj p{ font-size:16px; line-height:1.8; }
.note{ margin-top:26px; font-size:14px; color:var(--ink-55); text-align:center; }
html[lang="ar"] .note{ font-size:15.5px; }

/* ---------- fields ---------- */
.field{ display:flex; gap:15px; align-items:flex-start; }
.field .ico{ width:44px; height:44px; border-radius:12px; margin-bottom:0; }
.field .ico svg{ width:21px; height:21px; }
.field h3{ font-size:16.5px; margin-bottom:6px; }
html[lang="ar"] .field h3{ font-size:18px; }
.field p{ font-size:14.6px; color:var(--ink-70); line-height:1.62; }
html[lang="ar"] .field p{ font-size:16px; line-height:1.8; }
.sec--navy .field p{ color:rgba(255,255,255,.7); }
.sec--navy .field .ico{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); box-shadow:none; }

.core{
  grid-column:1/-1; text-align:center; border-radius:var(--radius-l);
  padding:clamp(26px,3.4vw,38px); margin-block:8px 6px;
  background:linear-gradient(135deg,rgba(37,170,227,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
}
.core p{ font-family:var(--ff-head); font-weight:700; font-size:clamp(17px,1.9vw,22px); color:#fff; letter-spacing:-.015em; max-width:40ch; margin-inline:auto; }
html[lang="ar"] .core p{ letter-spacing:0; font-size:clamp(18px,1.9vw,23px); }

.approach{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:clamp(40px,5vw,60px); padding-top:clamp(34px,4vw,46px); border-top:1px solid rgba(255,255,255,.14); }
@media (max-width:980px){ .approach{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .approach{ grid-template-columns:1fr; } }
.appr{ text-align:center; }
.appr .ico{ margin-inline:auto; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); box-shadow:none; width:46px; height:46px; }
.appr h3{ font-size:15.5px; margin-bottom:6px; color:#fff; }
html[lang="ar"] .appr h3{ font-size:17px; }
.appr p{ font-size:13.8px; color:rgba(255,255,255,.66); line-height:1.6; }
html[lang="ar"] .appr p{ font-size:15.2px; line-height:1.8; }

/* ---------- gallery ---------- */
.gal{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.4vw,18px); }
.gi{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--navy-900); box-shadow:var(--shadow-s); margin:0; }
.gi img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.gi:hover img{ transform:scale(1.05); }
.gi figcaption{
  position:absolute; inset-inline:0; inset-block-end:0; padding:34px 18px 15px;
  color:#fff; font-size:13.6px; font-weight:600; line-height:1.45;
  background:linear-gradient(to top, rgba(6,11,34,.90), rgba(6,11,34,.55) 46%, transparent);
}
html[lang="ar"] .gi figcaption{ font-size:15px; }
.gi--a{ grid-column:span 6; aspect-ratio:16/11; }
.gi--b{ grid-column:span 3; aspect-ratio:3/4; }
.gi--c{ grid-column:span 3; aspect-ratio:3/4; }
.gi--d,.gi--e,.gi--f{ grid-column:span 4; aspect-ratio:4/3; }
@media (max-width:860px){
  .gi--a{ grid-column:span 12; } .gi--b,.gi--c{ grid-column:span 6; }
  .gi--d,.gi--e,.gi--f{ grid-column:span 6; aspect-ratio:1/1; }
}
@media (max-width:560px){ .gi{ grid-column:span 12 !important; aspect-ratio:4/3 !important; } }

/* ---------- governance ---------- */
.gov-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,22px); }
@media (max-width:800px){ .gov-grid{ grid-template-columns:1fr; } }
.gov{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-s); }
.gov .ico{ width:44px; height:44px; margin-bottom:0; border-radius:12px; }
.gov .ico svg{ width:21px; height:21px; }
.gov h3{ font-size:16.5px; margin-bottom:6px; }
html[lang="ar"] .gov h3{ font-size:18px; }
.gov p{ font-size:14.6px; color:var(--ink-70); line-height:1.62; }
html[lang="ar"] .gov p{ font-size:16px; line-height:1.8; }

.banner{
  margin-top:clamp(28px,3.4vw,40px); border-radius:var(--radius-l);
  background:linear-gradient(135deg,var(--navy),var(--navy-800)); color:#fff;
  padding:clamp(26px,3.4vw,40px); display:flex; gap:22px; align-items:center;
  box-shadow:var(--shadow-l); position:relative; overflow:hidden;
}
.banner::after{ content:""; position:absolute; inset-block-start:-50%; inset-inline-end:-6%; width:300px; height:300px; background:radial-gradient(circle,rgba(37,170,227,.32),transparent 68%); }
.banner img{ width:76px; flex:0 0 auto; position:relative; }
.banner p{ position:relative; font-size:16px; line-height:1.62; color:rgba(255,255,255,.9); }
html[lang="ar"] .banner p{ font-size:17.5px; line-height:1.85; }
@media (max-width:640px){ .banner{ flex-direction:column; text-align:center; } }

/* ---------- contact ---------- */
.ct{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4.4vw,64px); align-items:start; }
@media (max-width:900px){ .ct{ grid-template-columns:1fr; } }
.ct-list{ display:grid; gap:14px; margin-top:32px; }
.ct-item{ display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-s); }
.ct-item .ico{ width:42px; height:42px; margin-bottom:0; border-radius:11px; }
.ct-item .ico svg{ width:20px; height:20px; }
.ct-item b{ display:block; font-family:var(--ff-head); font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-55); margin-bottom:4px; }
html[lang="ar"] .ct-item b{ letter-spacing:0; text-transform:none; font-size:14px; }
.ct-item span,.ct-item a{ font-size:15.6px; color:var(--ink); font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.ct-item a:hover{ color:var(--sky-600); }
html[lang="ar"] .ct-item span,html[lang="ar"] .ct-item a{ font-size:17px; }

.ct-panel{
  position:relative; overflow:hidden; border-radius:var(--radius-l); color:#fff;
  background:linear-gradient(150deg,var(--navy-900),var(--navy-800) 62%,var(--navy));
  padding:clamp(30px,3.8vw,46px); box-shadow:var(--shadow-l);
}
.ct-panel::after{ content:""; position:absolute; inset-block-start:-28%; inset-inline-end:-14%; width:340px; height:340px; background:radial-gradient(circle,rgba(37,170,227,.34),transparent 68%); }
.ct-panel > *{ position:relative; }
.ct-panel h3{ color:#fff; font-size:clamp(21px,2.3vw,27px); margin-bottom:14px; }
.ct-panel p{ color:rgba(255,255,255,.76); font-size:16px; }
html[lang="ar"] .ct-panel p{ font-size:17.5px; }
.ct-panel .btn{ margin-top:26px; }
.ct-seal{ width:92px; margin-bottom:22px; opacity:.95; }

.social{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.social a{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.17); color:#fff;
  transition:background .2s, transform .2s, border-color .2s;
}
.social a:hover{ background:var(--sky); border-color:var(--sky); transform:translateY(-3px); }
.social svg{ width:19px; height:19px; }

/* ---------- footer ---------- */
.ftr{ background:var(--navy-950); color:rgba(255,255,255,.62); padding-block:clamp(46px,5vw,64px) 26px; }
.ftr-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(26px,3.4vw,52px); padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.11); }
@media (max-width:820px){ .ftr-top{ grid-template-columns:1fr 1fr; } .ftr-brand{ grid-column:1/-1; } }
@media (max-width:520px){ .ftr-top{ grid-template-columns:1fr; } }
.ftr-brand img{ width:180px; margin-bottom:18px; }
.ftr-brand p{ font-size:15px; max-width:42ch; line-height:1.66; }
html[lang="ar"] .ftr-brand p{ font-size:16.5px; }
.ftr h4{ color:#fff; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
html[lang="ar"] .ftr h4{ letter-spacing:0; text-transform:none; font-size:16px; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ftr a{ text-decoration:none; font-size:15px; transition:color .18s; overflow-wrap:anywhere; }
html[lang="ar"] .ftr a{ font-size:16.5px; }
.ftr a:hover{ color:var(--sky); }
.ftr-btm{ padding-top:22px; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center; font-size:13.4px; }
html[lang="ar"] .ftr-btm{ font-size:14.8px; }
.ftr-btm .np{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.5); }

/* ---------- reveal on scroll ---------- */
/* Only hidden when scripting is available, so a no-JS page still shows everything. */
html.js .rv{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
html.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.js .rv{ opacity:1; transform:none; } }

@media print{
  .hdr,.social,.hero-cta,.burger{ display:none; }
  body{ font-size:11pt; }
}