/* ==========================================================================
   شركة طاقة النبراس — Al-Nibras Energy
   Design system. RTL-first, logical properties throughout so the English
   (LTR) mode mirrors without a second stylesheet.
   ========================================================================== */

:root{
  /* Palette taken from the company mark: navy blue + the sun's amber */
  --ink:      #0E2244;   /* navy — body text, dark ground */
  --pine:     #14315F;   /* mid navy — dark sections */
  --dusk:     #081831;   /* deepest navy — hero, footer */
  --paper:    #F3F4F7;   /* page ground, cool cast */
  --sand:     #E4E7ED;   /* raised surfaces */
  --line:     #C6CCD8;   /* hairlines */
  --gold:     #F0A81E;   /* the sun's amber */
  --gold-dp:  #8A5600;   /* amber, darkened enough to read as small text on light */
  --leaf:     #6E9BD6;   /* light-navy accent for dark grounds */
  --leaf-dp:  #2C5AA0;   /* the same accent, for text on light */
  --muted:    #56627A;

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --fs-display: clamp(2.5rem, 6.2vw, 5.1rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.6rem);
  --fs-h3:      clamp(1.18rem, 1.7vw, 1.42rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.09rem);
  --fs-sm:      .92rem;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-block-start:100px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{line-height:1.7}

h1,h2,h3,h4,.display{
  font-family:"Rubik","IBM Plex Sans Arabic",system-ui,sans-serif;
  font-weight:600;
  line-height:1.24;
  letter-spacing:-.01em;
  margin:0 0 .6em;
  text-wrap:balance;
}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.42}

p{margin:0 0 1.1em;max-width:68ch}
a{color:inherit}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

.shell{
  width:100%;
  max-inline-size:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(64px,9vw,124px)}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.section--dark{background:var(--pine);color:#E9EEF7}
.section--dark p{color:#B9C8DF}
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:16px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
}
.skip:focus{inset-block-start:0}

/* ---------- Section heading ------------------------------------------- */
.head{margin-block-end:clamp(32px,4vw,56px);max-inline-size:60ch}
.head__k{
  display:flex;align-items:center;gap:12px;
  font-size:var(--fs-sm);font-weight:600;color:var(--leaf-dp);
  margin-block-end:14px;
}
.head__k::before{
  content:"";inline-size:34px;block-size:2px;background:var(--gold);flex:none;
}
.section--dark .head__k{color:var(--leaf)}
.head h2{font-size:var(--fs-h2)}
.head p{color:var(--muted);font-size:1.04em}
.section--dark .head p{color:#AFC1DC}

/* ---------- Buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;border:1.5px solid transparent;border-radius:100px;
  font-family:"Rubik","IBM Plex Sans Arabic",sans-serif;
  font-size:1rem;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),transform .28s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#2A1B02}
.btn--gold:hover{background:#FFBE45}
.btn--ink{background:var(--ink);color:#F1F3EC}
.btn--ink:hover{background:#1E3A2C}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.section--dark .btn--ghost:hover{background:#E9EEF7;color:var(--pine);border-color:#E9EEF7}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:30px}

/* ---------- Header ----------------------------------------------------- */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  /* over the dark hero the bar is light-on-dark; it inverts once stuck */
  --hdr-fg:#F1F3EC;
  --hdr-dim:#B0C1DC;
  --hdr-edge:rgba(241,243,236,.34);
  color:var(--hdr-fg);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),
             border-color .35s var(--ease);
  border-block-end:1px solid transparent;
}
.hdr__in{
  /* three tracks so the menu sits dead centre in the bar no matter how wide
     the mark or the buttons are; the bar is always left-to-right so the mark
     stays on the left, while the menu keeps Arabic reading order inside it */
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;
  min-block-size:80px;
  direction:ltr;
}
.brand{justify-self:start}
.hdr__act{justify-self:end}
html[lang="ar"] .nav{direction:rtl}
.hdr.is-stuck{
  --hdr-fg:var(--ink);
  --hdr-dim:var(--muted);
  --hdr-edge:var(--line);
  background:rgba(241,243,236,.93);
  backdrop-filter:blur(14px) saturate(140%);
  border-block-end-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(14,34,68,.6);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{inline-size:50px;block-size:auto}

/* the mark is navy, so it needs the reverse version over a dark ground.
   The header starts over the dark hero and inverts once it sticks. */
.brand__mark{display:block;flex:none;line-height:0}
.brand__dark{display:none}
.brand__light{display:block}
.hdr.is-stuck .brand__dark,
body.nav-open .brand__dark{display:block}
.hdr.is-stuck .brand__light,
body.nav-open .brand__light{display:none}
.brand b{
  font-family:"Rubik",sans-serif;font-weight:600;font-size:1.16rem;
  line-height:1.15;display:block;color:var(--hdr-fg);
}
.brand > span{display:block}
.brand > span > span{display:block;font-size:.72rem;color:var(--hdr-dim);letter-spacing:.02em}

.nav{justify-self:center;display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:9px 15px;text-decoration:none;border-radius:8px;
  font-size:.99rem;color:var(--hdr-fg);transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;inset-block-end:2px;inset-inline:15px;
  block-size:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:var(--o,right);
  transition:transform .3s var(--ease);
}
html[lang="en"] .nav a::after{--o:left}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:600}

.hdr__act{display:flex;align-items:center;gap:10px;flex:none}
.lang{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1.5px solid var(--hdr-edge);border-radius:100px;
  padding:8px 16px;font-family:"Rubik",sans-serif;font-size:.9rem;font-weight:500;
  color:var(--hdr-fg);cursor:pointer;transition:.25s var(--ease);
}
.lang:hover{border-color:var(--gold);background:var(--gold);color:#2A1B02}
.lang svg{inline-size:15px;block-size:15px}
.hdr .btn{padding:11px 22px;font-size:.94rem}

.burger{
  display:none;inline-size:46px;block-size:46px;border:1.5px solid var(--hdr-edge);
  background:transparent;border-radius:12px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger i{
  display:block;inline-size:19px;block-size:1.8px;background:var(--hdr-fg);
  position:relative;transition:.3s var(--ease);
}
.burger i::before,.burger i::after{
  content:"";position:absolute;inset-inline-start:0;inline-size:19px;block-size:1.8px;
  background:var(--hdr-fg);transition:.3s var(--ease);
}
.burger i::before{inset-block-start:-6px}
.burger i::after{inset-block-start:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{inset-block-start:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{inset-block-start:0;transform:rotate(-45deg)}

@media (max-width:1180px) and (min-width:901px){
  .hdr__in{gap:12px}
  .nav a{padding-inline:10px;font-size:.95rem}
  .brand > span > span{display:none}
  .hdr .btn{padding:11px 16px;font-size:.9rem}
  .lang{padding:8px 12px}
}

/* ---------- Hero ------------------------------------------------------- */
.hero{
  position:relative;
  min-block-size:min(100vh,900px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding-block:150px 110px;
  background:var(--dusk);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg img{
  inline-size:100%;block-size:100%;object-fit:cover;
  object-position:50% 72%;
  opacity:.62;
  animation:heroDrift 30s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(1.5%,-1.5%,0)}
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(8,24,49,.78),rgba(8,24,49,.3) 40%,rgba(8,24,49,.9)),
    radial-gradient(70% 60% at 50% 48%,rgba(8,24,49,.6),transparent 75%);
}

/* moving light: a slow gold bloom on the left, and a sweep across the frame */
.hero__fx{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.fx-glow{
  position:absolute;inset-block-start:50%;left:6%;
  inline-size:min(720px,72vw);block-size:min(720px,72vw);
  translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(240,168,30,.34),rgba(240,168,30,.09) 42%,transparent 68%);
  animation:bloom 11s ease-in-out infinite;
}
@keyframes bloom{
  0%,100%{opacity:.55;scale:1}
  50%{opacity:1;scale:1.13}
}
.fx-sweep{
  position:absolute;inset-block:-40%;inline-size:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.055) 45%,transparent);
  transform:rotate(12deg);
  animation:sweep 15s ease-in-out infinite;
}
@keyframes sweep{
  0%{left:-45%;opacity:0}
  12%{opacity:1}
  75%{opacity:1}
  100%{left:118%;opacity:0}
}

/* the sun: sits on the left in both languages, rays turning slowly */
.hero__sun{
  position:absolute;inset-block-start:50%;left:min(-140px,-10vw);
  translate:0 -50%;
  inline-size:min(470px,42vw);block-size:auto;
  color:var(--gold);z-index:-1;pointer-events:none;
  opacity:0;
  animation:sunRise 2.2s var(--ease) .25s forwards;
}
@keyframes sunRise{
  from{opacity:0;translate:0 -30%}
  to{opacity:.5;translate:0 -50%}
}
.sun-rays{transform-origin:210px 210px;animation:turn 90s linear infinite;opacity:.85}
@keyframes turn{to{transform:rotate(360deg)}}
.sun-core{fill:currentColor;animation:core 7s ease-in-out infinite}
.sun-core{opacity:.78}
@keyframes core{0%,100%{opacity:.78}50%{opacity:.5}}
.sun-ring{
  fill:none;stroke:currentColor;stroke-width:1.6;opacity:.4;
  transform-origin:210px 210px;animation:ring 9s ease-in-out infinite;
}
@keyframes ring{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.09);opacity:.16}}

.hero__in{position:relative;inline-size:100%}
.hero h1{
  font-size:var(--fs-display);font-weight:700;color:#fff;
  letter-spacing:-.025em;margin:0 auto .5em;max-inline-size:19ch;
  text-shadow:0 2px 40px rgba(8,24,49,.45);
}
html[lang="ar"] .hero h1{letter-spacing:0;line-height:1.32}
.hero__lede{
  color:#C9D6EA;font-size:clamp(1.04rem,1.5vw,1.24rem);
  max-inline-size:62ch;margin:0 auto;
}
.hero .btn-row{justify-content:center;margin-block-start:34px}
.hero__note{
  display:inline-flex;align-items:center;gap:18px;text-align:start;
  margin-block-start:44px;padding:14px 28px;border-radius:100px;
  border:1px solid rgba(240,168,30,.4);background:rgba(8,24,49,.42);
  backdrop-filter:blur(6px);
  color:#D2DCEE;font-size:.92rem;max-inline-size:min(560px,92vw);
}
.hero__note svg{
  inline-size:22px;block-size:22px;flex:none;
  fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.hero__note span{line-height:1.55}

.hero__rise>*{opacity:0;transform:translateY(28px);animation:rise .9s var(--ease) forwards}
.hero__rise>*:nth-child(1){animation-delay:.15s}
.hero__rise>*:nth-child(2){animation-delay:.3s}
.hero__rise>*:nth-child(3){animation-delay:.45s}
.hero__rise>*:nth-child(4){animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}

/* page banner (inner pages) */
.pbanner{
  position:relative;padding-block:170px 72px;background:var(--dusk);
  color:#fff;overflow:hidden;isolation:isolate;
}
.pbanner__bg{position:absolute;inset:0;z-index:-1}
.pbanner__bg img{inline-size:100%;block-size:100%;object-fit:cover;opacity:.36}
.pbanner__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,24,49,.8),rgba(8,24,49,.55));
}
.pbanner h1{font-size:var(--fs-h1);color:#fff;margin-block-end:.3em}
.pbanner p{color:#B9C8DF;max-inline-size:56ch;margin:0}
.crumb{display:flex;gap:9px;font-size:.86rem;color:#94A6C4;margin-block-end:18px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* ---------- Marquee strip --------------------------------------------- */
.strip{background:var(--gold);color:#2A1B02;overflow:hidden;padding-block:13px}
.strip__track{display:flex;gap:0;inline-size:max-content;animation:slide 34s linear infinite}
html[lang="en"] .strip__track{animation-direction:reverse}
.strip:hover .strip__track{animation-play-state:paused}
.strip span{
  padding-inline:26px;font-family:"Rubik",sans-serif;font-weight:500;font-size:.95rem;
  white-space:nowrap;display:flex;align-items:center;gap:26px;
}
.strip span::after{content:"";inline-size:6px;block-size:6px;background:#2A1B02;border-radius:50%;opacity:.5}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Intro split ------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split--wide{grid-template-columns:1.15fr .85fr}
.split__media{position:relative}
.split__media img{border-radius:var(--r-lg);inline-size:100%;object-fit:cover;aspect-ratio:4/3}
.split__media--tall img{aspect-ratio:3/4}
.split__badge{
  position:absolute;inset-block-end:-26px;inset-inline-start:-18px;
  background:var(--ink);color:#F1F3EC;border-radius:var(--r-md);
  padding:20px 26px;max-inline-size:230px;box-shadow:0 24px 50px -30px rgba(14,34,68,.9);
}
.split__badge b{
  display:block;font-family:"Rubik",sans-serif;font-size:1.9rem;font-weight:600;
  color:var(--gold);line-height:1.1;
}
.split__badge span{font-size:.85rem;color:#AEC0DB;line-height:1.5;display:block;margin-block-start:4px}

.ticks{margin-block-start:26px;display:grid;gap:13px}
.ticks li{display:flex;gap:13px;align-items:flex-start;line-height:1.65}
.ticks li::before{
  content:"";flex:none;inline-size:22px;block-size:22px;border-radius:50%;
  margin-block-start:4px;
  background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2244' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- Services --------------------------------------------------- */
.svcs{border-block-start:1px solid var(--line)}
.svc{
  display:grid;grid-template-columns:auto 1.1fr 1fr;gap:clamp(20px,4vw,54px);
  align-items:center;padding-block:clamp(28px,4vw,44px);
  border-block-end:1px solid var(--line);
}
.svc__ico{
  inline-size:64px;block-size:64px;border-radius:18px;flex:none;
  display:grid;place-items:center;background:var(--sand);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.svc__ico svg{inline-size:29px;block-size:29px;stroke:var(--ink);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease)}
.svc:hover .svc__ico{background:var(--ink);transform:rotate(-6deg)}
.svc:hover .svc__ico svg{stroke:var(--gold)}
.svc h3{margin:0;font-size:var(--fs-h3)}
.svc p{margin:0;color:var(--muted);font-size:.99rem}
.section--dark .svc{border-block-end-color:rgba(233,238,247,.16)}
.section--dark .svcs{border-block-start-color:rgba(233,238,247,.16)}
.section--dark .svc__ico{background:rgba(233,238,247,.09)}
.section--dark .svc__ico svg{stroke:var(--leaf)}
.section--dark .svc:hover .svc__ico{background:var(--gold)}
.section--dark .svc:hover .svc__ico svg{stroke:#2A1B02}
.section--dark .svc p{color:#A7BBD8}

/* ---------- Process (a real sequence → numbering is warranted) --------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.steps::before{
  content:"";position:absolute;inset-block-start:26px;inset-inline:8%;
  block-size:1px;background:var(--line);
}
.section--dark .steps::before{background:rgba(233,238,247,.2)}
.step{padding-inline:14px;position:relative}
.step__n{
  inline-size:54px;block-size:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1.5px solid var(--line);position:relative;z-index:1;
  font-family:"Rubik",sans-serif;font-weight:600;font-size:1.1rem;margin-block-end:18px;
  transition:.35s var(--ease);
}
.section--dark .step__n{background:var(--pine);border-color:rgba(233,238,247,.28);color:#E9EEF7}
.step:hover .step__n{background:var(--gold);border-color:var(--gold);color:#2A1B02;transform:scale(1.08)}
.step h3{font-size:1.05rem;margin-block-end:.4em}
.step p{font-size:.93rem;color:var(--muted);margin:0}
.section--dark .step p{color:#A0B5D4}

/* ---------- Stats ------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(18px,3vw,34px)}
.stat{border-inline-start:2px solid var(--gold);padding-inline-start:22px}
.stat b{
  display:block;font-family:"Rubik",sans-serif;font-size:clamp(2.1rem,4vw,3.1rem);
  font-weight:600;line-height:1;letter-spacing:-.02em;
}
.stat span{display:block;font-size:.93rem;color:var(--muted);margin-block-start:9px}
.section--dark .stat span{color:#A7BBD8}

/* ---------- Sector band ------------------------------------------------ */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.band__item{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4}
.band__item img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .9s var(--ease)}
.band__item:hover img{transform:scale(1.07)}
.band__cap{
  position:absolute;inset-block-end:0;inset-inline:0;padding:22px;
  background:linear-gradient(transparent,rgba(8,24,49,.55) 35%,rgba(8,24,49,.94));
  color:#fff;
}
.band__cap b{
  display:block;font-family:"Rubik","IBM Plex Sans Arabic",sans-serif;
  font-weight:500;font-size:1.02rem;line-height:1.35;
}
.band__cap span{display:block;font-size:.85rem;color:#B4C6E0;margin-block-start:4px}

/* ---------- Cards (values / sectors) ----------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,26px)}
.card{
  background:var(--sand);border-radius:var(--r-md);padding:clamp(24px,3vw,34px);
  border:1px solid transparent;transition:border-color .35s var(--ease),background .35s var(--ease);
}
.card:hover{background:var(--paper);border-color:var(--line)}
.card h3{font-size:1.12rem}
.card p{margin:0;color:var(--muted);font-size:.97rem}
.card__ico{inline-size:34px;block-size:34px;stroke:var(--leaf-dp);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-block-end:16px}
.section--dark .card{background:rgba(233,238,247,.07)}
.section--dark .card:hover{background:rgba(233,238,247,.12);border-color:rgba(233,238,247,.2)}
.section--dark .card p{color:#A7BBD8}
.section--dark .card__ico{stroke:var(--leaf)}

/* ---------- Component cards -------------------------------------------- */
.comps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.comp{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--sand);border:1px solid transparent;border-radius:var(--r-md);
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.comp:hover{border-color:var(--line);transform:translateY(-4px)}
.comp__pic{aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.comp__pic img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .8s var(--ease)}
.comp:hover .comp__pic img{transform:scale(1.06)}
.comp__body{padding:20px 22px 24px}
.comp__body h3{font-size:1.06rem;margin-block-end:.45em}
.comp__body p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.7}
.section--dark .comp{background:rgba(233,238,247,.07)}
.section--dark .comp:hover{border-color:rgba(233,238,247,.22)}
.section--dark .comp__body p{color:#A7BBD8}

/* ---------- Catalogue -------------------------------------------------- */
.cat__top{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,66px);align-items:center}
.cat__cover img{
  inline-size:100%;border-radius:var(--r-md);
  box-shadow:0 40px 70px -40px rgba(8,24,49,.75);
}
.cat__facts{
  display:grid;grid-template-columns:repeat(4,auto);gap:clamp(16px,3vw,34px);
  justify-content:start;margin-block:26px 4px;
}
.cat__facts li{border-inline-start:2px solid var(--gold);padding-inline-start:14px}
.cat__facts b{
  display:block;font-family:"Rubik",sans-serif;font-size:1.5rem;font-weight:600;
  line-height:1.1;letter-spacing:-.01em;
}
.cat__facts span{display:block;font-size:.85rem;color:var(--muted);margin-block-start:3px}
.cat__note{font-size:.88rem;color:var(--muted);margin-block-start:14px}

/* reader */
.reader{max-inline-size:900px;margin-inline:auto}
.reader__stage{display:flex;align-items:center;gap:clamp(8px,2vw,20px)}
.reader__page{
  flex:1;min-inline-size:0;border-radius:var(--r-sm);overflow:hidden;
  background:rgba(233,238,247,.08);aspect-ratio:595/841;
}
.reader__page img{inline-size:100%;block-size:100%;object-fit:contain;display:block}
.reader__nav{
  flex:none;inline-size:52px;block-size:52px;border-radius:50%;cursor:pointer;
  background:rgba(233,238,247,.1);border:1px solid rgba(233,238,247,.28);
  color:#E9EEF7;display:grid;place-items:center;transition:.25s var(--ease);
}
.reader__nav svg{inline-size:24px;block-size:24px}
.reader__nav:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#2A1B02}
.reader__nav:disabled{opacity:.3;cursor:not-allowed}
html[lang="ar"] .reader__nav svg{transform:scaleX(-1)}

.reader__bar{
  display:flex;align-items:center;gap:clamp(12px,2.5vw,22px);
  margin-block-start:22px;padding-block-start:20px;
  border-block-start:1px solid rgba(233,238,247,.18);
}
.reader__count{display:flex;align-items:center;gap:6px;color:#AFC1DC;font-size:.92rem;flex:none}
.reader__count b{font-family:"Rubik",sans-serif;color:var(--gold);font-size:1.15rem;font-weight:600}
#reader-range{
  flex:1;min-inline-size:0;appearance:none;-webkit-appearance:none;
  block-size:4px;border-radius:4px;background:rgba(233,238,247,.25);cursor:pointer;
}
#reader-range::-webkit-slider-thumb{
  -webkit-appearance:none;inline-size:18px;block-size:18px;border-radius:50%;
  background:var(--gold);border:0;cursor:pointer;
}
#reader-range::-moz-range-thumb{
  inline-size:18px;block-size:18px;border-radius:50%;background:var(--gold);
  border:0;cursor:pointer;
}
.reader__dl{flex:none;padding:11px 22px;font-size:.92rem}

/* contents list */
.toc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toc__b{
  inline-size:100%;display:flex;align-items:center;gap:12px;text-align:start;
  background:var(--sand);border:1px solid transparent;border-radius:10px;
  padding:13px 15px;cursor:pointer;font-family:inherit;font-size:.95rem;
  color:var(--ink);transition:.25s var(--ease);
}
.toc__b:hover{background:var(--paper);border-color:var(--gold)}
.toc__n{
  font-family:"Rubik",sans-serif;font-size:.8rem;font-weight:600;
  color:var(--gold-dp);flex:none;
}

/* ---------- Accordion (FAQ) -------------------------------------------- */
.acc{border-block-start:1px solid var(--line)}
.acc__item{border-block-end:1px solid var(--line)}
.acc__q{
  inline-size:100%;background:none;border:0;padding:22px 0;cursor:pointer;
  display:flex;align-items:center;gap:18px;text-align:start;
  font-family:"Rubik","IBM Plex Sans Arabic",sans-serif;font-size:1.06rem;font-weight:500;
  color:var(--ink);
}
.acc__q::after{
  content:"";margin-inline-start:auto;flex:none;inline-size:15px;block-size:15px;
  background:currentColor;transition:transform .35s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.acc__q[aria-expanded="true"]::after{transform:rotate(135deg)}
.acc__q:hover{color:var(--gold-dp)}
.acc__q[aria-expanded="true"]{color:var(--gold-dp)}
.acc__a{overflow:hidden;block-size:0;transition:block-size .4s var(--ease)}
.acc__a p{padding-block-end:22px;margin:0;color:var(--muted)}

/* on a dark ground the question text and rules have to invert */
.section--dark .acc{border-block-start-color:rgba(233,238,247,.22)}
.section--dark .acc__item{border-block-end-color:rgba(233,238,247,.22)}
.section--dark .acc__q{color:#E9EEF7}
.section--dark .acc__q:hover,
.section--dark .acc__q[aria-expanded="true"]{color:var(--gold)}
.section--dark .acc__a p{color:#AFC1DC}

/* ---------- Contact ---------------------------------------------------- */
.cbox{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,58px);align-items:start}
.cline{display:flex;gap:16px;padding-block:20px;border-block-end:1px solid var(--line)}
.cline:first-child{border-block-start:1px solid var(--line)}
.cline svg{inline-size:21px;block-size:21px;stroke:var(--gold-dp);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-block-start:5px}
.cline b{display:block;font-family:"Rubik",sans-serif;font-weight:500;font-size:.86rem;color:var(--muted)}
.cline a,.cline p{margin:0;text-decoration:none;font-size:1.04rem}
.cline a{display:inline-block}
.cline__who{
  margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  font-size:.9rem;color:var(--muted);
}
.cline__role{
  font-size:.78rem;color:var(--gold-dp);
  border:1px solid var(--line);border-radius:100px;padding:2px 9px;
}
.cline a:hover{color:var(--gold-dp)}

/* ---------- Direct contact panel --------------------------------------- */
.reach{background:var(--sand);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,42px)}
.reach h2{font-size:1.45rem;margin-block-end:.35em}
.reach>p{color:var(--muted);font-size:.98rem;margin-block-end:26px}
.reach__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.reach__card{
  display:block;text-decoration:none;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:22px;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.reach__card:hover{border-color:var(--gold);transform:translateY(-3px);background:#fff}
.reach__ico{
  inline-size:26px;block-size:26px;margin-block-end:12px;
  fill:none;color:var(--gold-dp);
}
.reach__ico--solid{fill:var(--gold-dp)}
.reach__card b{
  display:block;font-family:"Rubik","IBM Plex Sans Arabic",sans-serif;
  font-weight:500;font-size:1.04rem;margin-block-end:5px;
}
.reach__card span{display:block;font-size:.9rem;color:var(--muted);line-height:1.6}
.reach__note{margin-block-start:28px;border-block-start:1px solid var(--line);padding-block-start:24px}
.reach__note b{display:block;font-family:"Rubik",sans-serif;font-weight:500;margin-block-end:6px}
.reach__note .ticks li{font-size:.94rem}

.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);block-size:380px}
.map iframe{inline-size:100%;block-size:100%;border:0;display:block;filter:grayscale(.3)}

/* ---------- CTA band --------------------------------------------------- */
.cta{position:relative;background:var(--ink);color:#F1F3EC;overflow:hidden;isolation:isolate}
.cta::before{
  content:"";position:absolute;inset-block-start:-60%;inset-inline-end:-8%;
  inline-size:520px;block-size:520px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(240,168,30,.28),transparent 66%);
}
.cta__in{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.cta h2{font-size:var(--fs-h2);margin:0;max-inline-size:20ch}
.cta p{color:#AEC0DB;margin:10px 0 0;max-inline-size:46ch}

/* ---------- Footer ----------------------------------------------------- */
.ftr{background:var(--dusk);color:#A0B5D4;padding-block:clamp(52px,6vw,80px) 0;font-size:.95rem}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px)}
.ftr h4{color:#E9EEF7;font-size:.98rem;margin-block-end:18px;font-weight:500}
.ftr a{text-decoration:none;transition:color .22s var(--ease)}
.ftr a:hover{color:var(--gold)}
.ftr li{margin-block-end:11px}
.ftr .brand b{color:#E9EEF7}
.ftr .brand > span > span{color:#74869F}
.ftr__about{max-inline-size:38ch;margin-block:18px 0;color:#8A9CBC}
.social{display:flex;gap:10px;margin-block-start:20px}
.social a{
  inline-size:40px;block-size:40px;border:1px solid rgba(233,238,247,.2);border-radius:50%;
  display:grid;place-items:center;transition:.25s var(--ease);
}
.social a:hover{background:var(--gold);border-color:var(--gold)}
.social svg{inline-size:17px;block-size:17px;fill:currentColor}
.social a:hover svg{fill:#2A1B02}
.ftr__bar{
  margin-block-start:clamp(38px,4vw,56px);border-block-start:1px solid rgba(233,238,247,.14);
  padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 24px;
  align-items:center;justify-content:space-between;font-size:.88rem;
}
.iwt{display:inline-flex;align-items:center;gap:7px}
.iwt a{color:var(--gold);font-weight:500}
.iwt a:hover{color:var(--leaf);text-decoration:underline}

/* ---------- Reveal on scroll ------------------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Language visibility ---------------------------------------- */
html[lang="ar"] .en-only{display:none !important}
html[lang="en"] .ar-only{display:none !important}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width:1020px){
  .comps{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .steps::before{display:none}
}
@media (max-width:900px){
  .nav{
    position:fixed;top:0;right:0;left:auto;
    inline-size:min(320px,84vw);block-size:100dvh;
    background:var(--paper);border-left:1px solid var(--line);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;padding:104px 22px 30px;margin:0;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .42s var(--ease),visibility 0s linear .42s;
    box-shadow:0 0 60px -30px rgba(14,34,68,.85);
    overflow-y:auto;
  }
  .nav.open{transform:translateX(0);visibility:visible;transition:transform .42s var(--ease),visibility 0s}
  .nav a{padding:15px 12px;font-size:1.08rem;border-block-end:1px solid var(--line)}
  .nav a::after{display:none}
  .hdr__in{display:flex}
  .burger{display:inline-flex;order:3}
  /* the brand yields space so the toggles never push past the gutter */
  .hdr__in{gap:12px}
  .brand{flex:0 1 auto;min-inline-size:0}
  .brand > span{min-inline-size:0;overflow:hidden}
  .brand b,.brand > span > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* keep the toggles above the drawer, and darken them against its light surface */
  .hdr__act{margin-left:auto;position:relative;z-index:3}
  .nav{z-index:2}
  body.nav-open .hdr{--hdr-fg:var(--ink);--hdr-dim:var(--muted);--hdr-edge:var(--line)}
  .hdr .btn{display:none}
  .backdrop{
    position:fixed;inset:0;background:rgba(8,24,49,.5);z-index:99;
    opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  }
  .backdrop.on{opacity:1;pointer-events:auto}

  .split,.split--wide,.cbox,.grid-3,.reach__grid,.cat__top{grid-template-columns:1fr}
  .cat__cover{max-inline-size:340px}
  .comps{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:repeat(2,1fr)}
  .hero{min-block-size:auto;padding-block:132px 84px}
  .hero__sun{inline-size:min(400px,86vw);left:-32vw;opacity:.5}
  .hero__note{flex-direction:column;align-items:flex-start;gap:8px;border-radius:var(--r-md);text-align:start}
  .svc{grid-template-columns:auto 1fr;gap:18px 20px}
  .svc p{grid-column:1/-1}
  .split__badge{position:static;margin-block-start:16px;max-inline-size:none}
}
@media (max-width:620px){
  .grid-2,.ftr__grid,.reach__grid,.comps,.toc{grid-template-columns:1fr}
  .cat__facts{grid-template-columns:repeat(2,1fr);gap:18px}
  /* float the arrows over the plate so it gets the full width */
  .reader__stage{position:relative;gap:0}
  .reader__nav{
    position:absolute;inset-block-start:50%;translate:0 -50%;z-index:2;
    inline-size:40px;block-size:40px;
    background:rgba(8,24,49,.72);border-color:rgba(233,238,247,.4);
    backdrop-filter:blur(4px);
  }
  .reader__nav svg{inline-size:18px;block-size:18px}
  .reader__nav--prev{inset-inline-end:8px}
  .reader__nav--next{inset-inline-start:8px}
  html[lang="en"] .reader__nav--prev{inset-inline-end:auto;inset-inline-start:8px}
  html[lang="en"] .reader__nav--next{inset-inline-start:auto;inset-inline-end:8px}
  .reader__bar{flex-wrap:wrap}
  #reader-range{order:3;flex-basis:100%}
  .reader__dl{margin-inline-start:auto}
  .steps{grid-template-columns:1fr}
  .brand img{inline-size:42px}
  .brand > span > span{display:none}
  .btn{inline-size:100%}
  .btn-row{gap:11px}
  .cta__in .btn-row{inline-size:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  .hero__rise>*{opacity:1;transform:none}
  .hero__sun{opacity:.55;translate:0 -50%}
  .fx-glow{opacity:.7}
  .fx-sweep{display:none}
}

@media print{
  .hdr,.ftr,.strip{display:none}
  body{background:#fff}
}

/* mobile drawer sits on the light surface, so links use ink regardless of header state */
@media (max-width:900px){
  .nav a{color:var(--ink)}
}

/* Latin headlines run longer than Arabic, so the hero display size steps down */
html[lang="en"] .hero h1{font-size:clamp(2.35rem,4.8vw,4.15rem)}

/* Latin-only values stay LTR internally but align with the surrounding text */
html[lang="ar"] .reach__card span[dir="ltr"]{text-align:right}
html[lang="en"] .reach__card span[dir="ltr"]{text-align:left}