/* =====================================================================
   RANEEN RENT A CAR — Interactive Company Profile
   Brand palette is derived from the Raneen mark: royal blue + orange.
   ===================================================================== */

:root{
  /* sampled from the official logo: assets/img/logo.svg */
  --blue:#3761AA;
  --blue-700:#2B4E8A;
  --blue-900:#0E2C52;
  --blue-950:#08192F;
  --orange:#EE7E23;
  --orange-600:#D46A16;

  --ink:#16202C;
  --ink-2:#3A4756;
  --muted:#6B7A8C;
  --line:#E4E8EE;
  --line-2:#EFF2F6;
  --paper:#FEFEFC;
  --paper-2:#F7F5F0;

  --app-bg:#101A26;
  --app-bg-2:#1B2836;
  --bar:rgba(12,20,30,.86);
  --bar-line:rgba(255,255,255,.10);
  --on-dark:#EAF0F7;
  --on-dark-mute:#9BAABB;

  --r-sm:6px; --r:10px; --r-lg:16px;
  --shadow-1:0 1px 2px rgba(8,20,35,.14), 0 6px 18px rgba(8,20,35,.16);
  --shadow-2:0 24px 70px rgba(0,0,0,.45);
  --ff:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-ar:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,Segoe UI,Tahoma,sans-serif;
  /* display face for the covers — geometric, wide, automotive */
  --ff-display:"Jost","IBM Plex Sans",system-ui,Segoe UI,sans-serif;
  --ff-display-ar:"Tajawal","IBM Plex Sans Arabic",system-ui,Segoe UI,Tahoma,sans-serif;
}
html[lang="ar"]{ --ff:var(--ff-ar); --ff-display:var(--ff-display-ar); }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--ff); color:var(--on-dark);
  background:
    radial-gradient(1100px 700px at 20% -10%, #24384C 0%, transparent 60%),
    radial-gradient(900px 640px at 92% 108%, #1E3350 0%, transparent 62%),
    linear-gradient(170deg,var(--app-bg) 0%, #0B131C 100%);
  background-attachment:fixed;
  overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.ic{ width:1.25em; height:1.25em; flex:none; }
.live,.seo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ==================================================================== *
   SHELL
 * ==================================================================== */
.viewer{
  position:fixed; inset:0; display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:minmax(0,1fr);   /* never let a wide bar stretch the stage */
  background:transparent; overflow:hidden;
}
.bar{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--bar); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); position:relative; z-index:40;
}
.bar--top{ border-bottom:1px solid var(--bar-line); }
.bar--bot{ border-top:1px solid var(--bar-line); justify-content:center;
  padding-bottom:max(9px, env(safe-area-inset-bottom)); }
.bar__l{ flex:1 1 auto; min-width:0; }
.bar__r{ display:flex; align-items:center; gap:6px; }

.brandmark{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.brandmark img{ width:34px; height:34px; flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.brandmark__t{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brandmark__t b{ font-size:13.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.brandmark__t i{ font-size:10.5px; font-style:normal; color:var(--on-dark-mute);
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; }
html[lang="ar"] .brandmark__t i{ letter-spacing:.02em; text-transform:none; }

.tb{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  border-radius:99px; color:var(--on-dark); font-size:12.5px; font-weight:500;
  border:1px solid transparent; transition:background .18s, border-color .18s, color .18s;
}
.tb:hover{ background:rgba(255,255,255,.09); }
.tb:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.tb--icon{ width:36px; padding:0; justify-content:center; }
.tb--lang{ border-color:rgba(255,255,255,.22); font-weight:600; letter-spacing:.04em; padding:0 14px; }
.tb--lang:hover{ border-color:var(--orange); color:#fff; background:rgba(240,138,38,.16); }
.tb__t{ display:inline; }

.nav{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:var(--on-dark);
  transition:background .18s, border-color .18s, opacity .18s, transform .18s;
}
.nav:hover:not(:disabled){ background:var(--orange); border-color:var(--orange); color:#12202F; }
.nav:disabled{ opacity:.26; cursor:default; }
.nav:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
html[dir="rtl"] .nav .ic{ transform:scaleX(-1); }

.pager{ display:flex; align-items:baseline; gap:6px; margin:0 12px;
  font-variant-numeric:tabular-nums; position:relative; }
.pager__in{
  position:absolute; inset-inline-start:-6px; top:-4px; width:52px; height:28px;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  text-align:center; opacity:0; z-index:2; -moz-appearance:textfield;
}
.pager__in::-webkit-outer-spin-button,.pager__in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pager__in:focus{ opacity:1; background:#0C1620; border-color:var(--orange); outline:none; }
.pager__now{ font-size:16px; font-weight:600; letter-spacing:.04em; }
/* the page range is a number pair, so it always reads left-to-right */
.pager{ direction:ltr; }
.pager__sep{ color:var(--on-dark-mute); }
.pager__tot{ font-size:12.5px; color:var(--on-dark-mute); letter-spacing:.06em; }

.tools{ display:flex; align-items:center; gap:4px; margin-inline-start:14px;
  padding-inline-start:14px; border-inline-start:1px solid var(--bar-line); }
.zlabel{ font-size:11.5px; color:var(--on-dark-mute); min-width:44px; text-align:center;
  letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.zlabel:hover{ color:var(--orange); }

/* ==================================================================== *
   STAGE + BOOK 3D
 * ==================================================================== */
.stage{
  position:relative; display:grid; place-items:center; min-height:0;
  perspective:var(--persp,1600px); perspective-origin:50% 44%;
  padding:14px; touch-action:pan-y;
}
.stage__shadow{
  position:absolute; bottom:5%; left:50%; transform:translateX(-50%);
  width:min(74%,900px); height:60px; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
  filter:blur(10px);
}
.book{
  position:relative; transform-style:preserve-3d; touch-action:none;
  transform:translate(var(--panx,0),var(--pany,0)) scale(var(--zoom,1)) translateX(var(--shift,0));
  transition:transform .55s cubic-bezier(.3,.1,.2,1);
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.42));
}
.book.is-zoomed{ transition:none; cursor:grab; }
.book.is-zoomed:active{ cursor:grabbing; }

.leaf{
  position:absolute; top:0; width:var(--pw); height:var(--ph);
  transform-style:preserve-3d; will-change:transform;
}
.book--spread.book--ltr .leaf{ left:var(--pw); transform-origin:left center; }
.book--spread.book--rtl .leaf{ left:0;         transform-origin:right center; }
.book--single .leaf{ left:0; }
.book--single.book--ltr .leaf{ transform-origin:left center; }
.book--single.book--rtl .leaf{ transform-origin:right center; }

.face{
  position:absolute; inset:0; overflow:hidden; background:var(--paper);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:2px;
}
.face--b{ transform:rotateY(180deg); }
.book--ltr .face--f{ border-radius:2px 4px 4px 2px; }
.book--ltr .face--b{ border-radius:2px 4px 4px 2px; }
.face__in{ position:absolute; inset:0; }

/* gutter — the soft shadow along the spine edge of each page */
.face__gutter{ position:absolute; top:0; bottom:0; width:9%; pointer-events:none; }
.book--ltr .face--f .face__gutter{ left:0;
  background:linear-gradient(90deg, rgba(10,20,35,.24), rgba(10,20,35,.05) 45%, transparent); }
.book--ltr .face--b .face__gutter{ right:0;
  background:linear-gradient(270deg, rgba(10,20,35,.24), rgba(10,20,35,.05) 45%, transparent); }
.book--rtl .face--f .face__gutter{ right:0;
  background:linear-gradient(270deg, rgba(10,20,35,.24), rgba(10,20,35,.05) 45%, transparent); }
.book--rtl .face--b .face__gutter{ left:0;
  background:linear-gradient(90deg, rgba(10,20,35,.24), rgba(10,20,35,.05) 45%, transparent); }
.book--single .face__gutter{ width:5%; opacity:.5; }

/* single-page mode: a turned sheet leaves the screen instead of stacking up */
.book--single .leaf.is-flipped{ visibility:hidden; }
.book--single .leaf.is-moving{ visibility:visible; }
/* …and the blank reverse of a turning sheet still reads as paper */
.book--single .face--b{ background:linear-gradient(150deg,#F6F4EF,#E9E6DF); }
.book--single .face--b .face__in::after{
  content:""; position:absolute; inset:0; background:url(../img/logo-mark.svg) center/30% no-repeat;
  opacity:.05; }

/* turning shade — deepens as the sheet lifts away from the light */
.face__shade{ position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .06s linear; }
.book--ltr .face--f .face__shade{
  background:linear-gradient(90deg, rgba(6,14,24,.62), rgba(6,14,24,.16) 55%, rgba(255,255,255,.06)); }
.book--ltr .face--b .face__shade{
  background:linear-gradient(270deg, rgba(6,14,24,.62), rgba(6,14,24,.16) 55%, rgba(255,255,255,.06)); }
.book--rtl .face--f .face__shade{
  background:linear-gradient(270deg, rgba(6,14,24,.62), rgba(6,14,24,.16) 55%, rgba(255,255,255,.06)); }
.book--rtl .face--b .face__shade{
  background:linear-gradient(90deg, rgba(6,14,24,.62), rgba(6,14,24,.16) 55%, rgba(255,255,255,.06)); }
.face--f .face__shade{ opacity:calc(var(--t,0) * .92); }
.face--b .face__shade{ opacity:calc((1 - var(--t,0)) * .92); }

.hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.62); pointer-events:none;
  transition:opacity .5s; white-space:nowrap;
  padding:5px 12px; border-radius:99px; background:rgba(8,16,26,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
html[lang="ar"] .hint{ letter-spacing:.02em; text-transform:none; font-size:12.5px; }
.hint.is-gone{ opacity:0; }

/* ==================================================================== *
   PAGE — shared chrome and type scale
 * ==================================================================== */
.pg{
  /* --type-scale: smaller divisor = larger text. Phones get a bigger
     step because the whole A4 page has to fit one small screen. */
  --fs:calc(var(--pw,420px) / var(--type-scale,25));
  --pad:6.4%;
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink); font-size:var(--fs);
  overflow:hidden;
}
.pg::after{ /* barely-there paper tone */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(140deg, rgba(0,0,0,.012), transparent 42%, rgba(0,0,0,.02));
}
.pg--blank{ background:var(--paper-2); }
.pg.is-dark{ background:var(--blue-900); color:var(--on-dark); }

.pg__head{ display:flex; align-items:center; gap:.7em; padding:calc(var(--pad) * .5) var(--pad) 0; }
.pg__sec{ font-size:calc(var(--fs)*.58); letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; }
.is-dark .pg__sec{ color:rgba(255,255,255,.55); }
html[lang="ar"] .pg__sec{ letter-spacing:.04em; text-transform:none; font-size:calc(var(--fs)*.6); }
.pg__rule{ flex:1; height:1px; background:var(--line); }
.is-dark .pg__rule{ background:rgba(255,255,255,.16); }

.pg__body{ flex:1; min-height:0; padding:calc(var(--pad)*.55) var(--pad); display:flex;
  flex-direction:column; position:relative; }
.pg__foot{ display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad) calc(var(--pad)*.5); font-size:calc(var(--fs)*.56);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.pg__foot--inv,.is-dark .pg__foot{ color:rgba(255,255,255,.5); position:relative; z-index:3; }
html[lang="ar"] .pg__foot{ letter-spacing:.02em; }
.pg__no{ font-weight:600; color:var(--blue); letter-spacing:.08em; }
.pg__foot--inv .pg__no,.is-dark .pg__no{ color:var(--orange); }

.kicker{ margin:0 0 .5em; font-size:calc(var(--fs)*.6); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--orange); }
html[lang="ar"] .kicker{ letter-spacing:.05em; text-transform:none; font-size:calc(var(--fs)*.66); }
.kicker--inv{ color:var(--orange); }

.h1{ margin:0; font-size:calc(var(--fs)*2.02); line-height:1.06; font-weight:600;
  letter-spacing:-.02em; color:var(--blue-900); }
.is-dark .h1{ color:#fff; }
.h1--tight{ font-size:calc(var(--fs)*1.78); }
.h2{ margin:0; font-size:calc(var(--fs)*1.62); line-height:1.1; font-weight:600;
  letter-spacing:-.015em; color:var(--blue-900); }
.is-dark .h2{ color:#fff; }
.h3{ margin:0 0 .28em; font-size:calc(var(--fs)*1.02); font-weight:600; color:var(--blue-900); }
.is-dark .h3{ color:#fff; }
.h4{ margin:0 0 .26em; font-size:calc(var(--fs)*.9); font-weight:600; color:var(--blue-900);
  letter-spacing:-.005em; }
.is-dark .h4{ color:#fff; }
.ln{ display:block; }

.rule{ display:block; width:calc(var(--fs)*2.3); height:3px; margin:.5em 0 .55em;
  background:var(--blue); border-radius:2px; }
.rule--o{ background:linear-gradient(90deg,var(--orange),var(--orange-600)); }

.lead{ margin:0 0 .62em; font-size:calc(var(--fs)*.88); line-height:1.62; color:var(--ink-2);
  font-weight:400; }
.lead--sm{ font-size:calc(var(--fs)*.82); }
.is-dark .lead{ color:rgba(255,255,255,.8); }
.body{ margin:0 0 .65em; font-size:calc(var(--fs)*.74); line-height:1.68; color:var(--ink-2); }
.body--sm{ font-size:calc(var(--fs)*.7); }
.body--xs{ font-size:calc(var(--fs)*.68); line-height:1.55; }
.is-dark .body{ color:rgba(255,255,255,.72); }

.mark{ width:calc(var(--fs)*3); height:auto; }
.mark--sm{ width:calc(var(--fs)*1.6); }
.mark--md{ width:calc(var(--fs)*3.4); }
.mark--lg{ width:calc(var(--fs)*5.6); }
.veh{ width:100%; height:auto; color:var(--blue); opacity:.9; }
/* vehicles face the direction of reading */
html[dir="rtl"] .veh,html[dir="rtl"] .cov__car{ transform:scaleX(-1); }
.is-dark .veh{ color:rgba(255,255,255,.62); }

.chips{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4em; }
.chip{ font-size:calc(var(--fs)*.6); letter-spacing:.03em; padding:.4em .75em;
  border:1px solid var(--line); border-radius:99px; color:var(--ink-2); background:var(--paper-2); }
.is-dark .chip{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82); }

/* ---------- 01 cover ------------------------------------------------ */
.pg--cover{ background:var(--blue-900); color:#fff; }
.cov__bg{ position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 12% 0%, #1E4B85 0%, transparent 58%),
    radial-gradient(90% 70% at 100% 100%, #123765 0%, transparent 60%),
    linear-gradient(160deg,#123A6B 0%, #0B2143 55%, #071729 100%); }
.cov__glow{ position:absolute; inset:auto -20% -25% -20%; height:62%;
  background:radial-gradient(50% 60% at 62% 100%, rgba(240,138,38,.30), transparent 70%); }
.cov__car{ position:absolute; bottom:14%; inset-inline-start:-8%; width:118%;
  color:rgba(255,255,255,.11); opacity:.9; }

/* keeps the mark and the wordmark legible over any photograph */
.cov__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% 44%, rgba(6,16,30,.72), transparent 72%),
    linear-gradient(180deg, rgba(6,16,30,.55) 0%, rgba(6,16,30,.12) 34%,
                    rgba(6,16,30,.30) 66%, rgba(5,13,25,.86) 100%); }

.cov__in{ position:absolute; inset:0; display:grid; place-items:center;
  padding:calc(var(--pad)*1.15) var(--pad); text-align:center; }

/* the whole lock-up sits on the vertical centre of the page */
.cov__mid{ display:flex; flex-direction:column; align-items:center; }

.cov__logo{ position:relative; display:inline-grid; place-items:center;
  margin-bottom:calc(var(--fs)*1.15); }
.cov__logo::before{ content:""; position:absolute; width:200%; height:200%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.26) 0%,
             rgba(255,255,255,.09) 44%, transparent 70%); }
.mark--cover{ position:relative; width:calc(var(--fs)*8.6); height:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)) drop-shadow(0 14px 34px rgba(0,0,0,.5)); }

.cov__brand{ margin:0; font-family:var(--ff-display); font-weight:500;
  font-size:calc(var(--fs)*3.15); line-height:.98; letter-spacing:.06em;
  text-shadow:0 2px 26px rgba(4,12,24,.6); }
.cov__brand em{ display:block; font-style:normal; font-weight:300;
  font-size:calc(var(--fs)*1.02); letter-spacing:.44em; margin-top:.75em;
  padding-inline-start:.44em;            /* balances the trailing tracking */
  color:rgba(255,255,255,.9); }
html[lang="ar"] .cov__brand{ font-size:calc(var(--fs)*3.5); font-weight:700;
  letter-spacing:0; }
html[lang="ar"] .cov__brand em{ letter-spacing:.06em; padding-inline-start:0;
  font-size:calc(var(--fs)*1.18); font-weight:300; }

.cov__bar{ display:flex; align-items:center; justify-content:center;
  gap:calc(var(--fs)*.55); margin:calc(var(--fs)*1.25) 0 calc(var(--fs)*1.05); }
.cov__bar::before,.cov__bar::after{ content:""; width:calc(var(--fs)*2.4); height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45)); }
.cov__bar::after{ background:linear-gradient(90deg, rgba(255,255,255,.45), transparent); }
.cov__bar i{ width:calc(var(--fs)*.42); height:calc(var(--fs)*.42); flex:none;
  transform:rotate(45deg); background:var(--orange);
  box-shadow:0 0 14px rgba(240,138,38,.65); }

.cov__kicker{ margin:0; font-family:var(--ff-display); font-weight:300;
  font-size:calc(var(--fs)*.8); letter-spacing:.42em; text-transform:uppercase;
  padding-inline-start:.42em; color:rgba(255,255,255,.82); }
html[lang="ar"] .cov__kicker{ letter-spacing:.06em; text-transform:none;
  padding-inline-start:0; font-size:calc(var(--fs)*.92); font-weight:500; }

.cov__bot{ position:absolute; inset-inline:var(--pad);
  bottom:calc(var(--pad)*.95); text-align:center; }
.cov__slogan{ margin:0 auto .85em; font-size:calc(var(--fs)*.62); line-height:1.65;
  color:rgba(255,255,255,.66); max-width:26em; }
.cov__meta{ display:flex; align-items:center; justify-content:center; gap:.9em;
  font-family:var(--ff-display); font-size:calc(var(--fs)*.56); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--orange); }
html[lang="ar"] .cov__meta{ letter-spacing:.05em; text-transform:none;
  font-size:calc(var(--fs)*.62); }
.cov__meta i{ width:calc(var(--fs)*1.7); height:1px; background:rgba(255,255,255,.28); }

/* ---------- 02 statement -------------------------------------------- */
.pg--stmt{ background:var(--blue-950); color:#fff; }
.stmt__grid{ position:absolute; inset:0; background-image:url(../img/pattern-grid.svg);
  background-size:44px; opacity:.5; }
.stmt__in{ margin:auto 0; }
.stmt__q{ margin:.7em 0 0; font-size:calc(var(--fs)*2.1); line-height:1.14; font-weight:300;
  letter-spacing:-.01em; color:#fff; }
.stmt__p{ margin:0; font-size:calc(var(--fs)*.76); line-height:1.75; color:rgba(255,255,255,.68);
  max-width:30em; }
.stmt__sign{ margin:2.2em 0 0; font-size:calc(var(--fs)*.55); letter-spacing:.24em;
  text-transform:uppercase; color:var(--orange); }
html[lang="ar"] .stmt__sign{ letter-spacing:.04em; text-transform:none; }

/* ---------- 03 contents --------------------------------------------- */
.toc{ list-style:none; margin:.4em 0 0; padding:0; }
.toc__row{ border-bottom:1px solid var(--line-2); }
.toc__btn{ display:flex; align-items:baseline; gap:.7em; width:100%; padding:.42em 0;
  text-align:start; transition:color .18s; }
.toc__btn:hover{ color:var(--orange); }
.toc__n{ font-size:calc(var(--fs)*.6); color:var(--orange); font-weight:600;
  letter-spacing:.06em; width:2.2em; flex:none; }
.toc__t{ font-size:calc(var(--fs)*.84); color:var(--blue-900); font-weight:500; }
.toc__btn:hover .toc__t{ color:var(--orange); }
.toc__dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-.25em); }
.toc__p{ font-size:calc(var(--fs)*.66); color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- 04 intro ------------------------------------------------- */
.ministats{ display:flex; gap:calc(var(--fs)*1.4); margin-top:auto;
  padding-top:calc(var(--fs)*.7); border-top:1px solid var(--line); }
.ministat b{ display:block; font-size:calc(var(--fs)*1.75); font-weight:600; color:var(--blue);
  letter-spacing:-.02em; line-height:1; }
.ministat span{ display:block; margin-top:.4em; font-size:calc(var(--fs)*.58);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
html[lang="ar"] .ministat span{ letter-spacing:.02em; text-transform:none; font-size:calc(var(--fs)*.58); }

/* ---------- 05 about -------------------------------------------------- */
.plist{ list-style:none; margin:.1em 0 0; padding:0; display:flex; flex-direction:column;
  gap:calc(var(--fs)*.38); }
.plist__i{ display:flex; gap:.7em; padding-top:calc(var(--fs)*.4);
  border-top:1px solid var(--line-2); }
.plist__n{ font-size:calc(var(--fs)*.62); font-weight:600; color:var(--orange);
  letter-spacing:.06em; flex:none; padding-top:.15em; }

/* ---------- 06 glance ------------------------------------------------- */
.facts{ margin:.2em 0 0; }
.facts__r{ display:flex; gap:.8em; padding:.34em 0; border-bottom:1px solid var(--line-2);
  align-items:baseline; }
.facts__r dt{ flex:0 0 36%; font-size:calc(var(--fs)*.6); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
html[lang="ar"] .facts__r dt{ letter-spacing:.02em; text-transform:none; font-size:calc(var(--fs)*.62); }
.facts__r dd{ margin:0; flex:1; font-size:calc(var(--fs)*.72); color:var(--ink); font-weight:500; }
.slogans{ margin-top:auto; padding-top:calc(var(--fs)*.6); }
.slogans__l{ margin:0 0 .5em; font-size:calc(var(--fs)*.5); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); }
html[lang="ar"] .slogans__l{ letter-spacing:.02em; text-transform:none; }
.slogans__1,.slogans__2{ margin:0 0 .32em; font-size:calc(var(--fs)*.74); line-height:1.5;
  color:var(--blue-900); font-weight:500; padding-inline-start:.8em;
  border-inline-start:3px solid var(--orange); }
.slogans__2{ border-inline-start-color:var(--blue); color:var(--blue); }

/* ---------- 07 vision & mission --------------------------------------- */
.vm{ display:flex; flex-direction:column; gap:calc(var(--fs)*.85); margin-top:.5em; flex:1; min-height:0; }
.vm__c{ position:relative; padding:calc(var(--fs)*1.05) calc(var(--fs)*1.1);
  border-radius:var(--r); overflow:hidden; flex:1; display:flex;
  flex-direction:column; justify-content:center; }
.vm__c--v{ background:linear-gradient(145deg,var(--blue-900),var(--blue-700)); color:#fff; }
.vm__c--m{ background:var(--paper-2); border:1px solid var(--line); }
.vm__c--v .h3{ color:#fff; }
.vm__ix{ position:absolute; inset-inline-end:.5em; top:.1em; font-size:calc(var(--fs)*2.4);
  font-weight:600; opacity:.13; letter-spacing:-.04em; }
.vm__p{ margin:0; font-size:calc(var(--fs)*.76); line-height:1.7; }
.vm__c--v .vm__p{ color:rgba(255,255,255,.85); }
.vm__c--m .vm__p{ color:var(--ink-2); }
.vm__seal{ margin-top:auto; padding-top:calc(var(--fs)*.7); display:flex; align-items:center;
  gap:.7em; font-size:calc(var(--fs)*.55); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid var(--line); }
html[lang="ar"] .vm__seal{ letter-spacing:.02em; text-transform:none; }

/* ---------- 08 values -------------------------------------------------- */
.vals{ list-style:none; margin:.15em 0 0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:calc(var(--fs)*.5); grid-auto-rows:1fr; }
.vals__i{ position:relative; padding:calc(var(--fs)*.62) calc(var(--fs)*.6);
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2);
  display:flex; flex-direction:column; }
.vals__ic{ color:var(--blue); font-size:calc(var(--fs)*.9); margin-bottom:.32em; }
.vals__n{ position:absolute; inset-inline-end:.7em; top:.55em; font-size:calc(var(--fs)*.55);
  font-weight:600; color:var(--orange); letter-spacing:.08em; }

/* ---------- 09 stats ---------------------------------------------------- */
.stats{ list-style:none; margin:.3em 0 0; padding:0; display:flex; flex-direction:column;
  flex:1; min-height:0; justify-content:space-around; }
.stats__i{ padding:calc(var(--fs)*.34) 0; border-bottom:1px solid var(--line-2); }
.stats__i:last-child{ border-bottom:0; }
.stats__v{ margin:0 0 .05em; font-size:calc(var(--fs)*1.75); font-weight:600; line-height:1;
  color:var(--blue); letter-spacing:-.035em; }
.stats__v em{ font-style:normal; font-size:calc(var(--fs)*.6); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
  margin-inline-start:.4em; vertical-align:.35em; }
html[lang="ar"] .stats__v em{ letter-spacing:.02em; text-transform:none; }

/* ---------- 10 / 16 section dividers ------------------------------------ */
.pg--div{ background:var(--blue-950); color:#fff; }
.div__scene{ position:absolute; inset:0; background-size:cover; background-position:center; }
.div__veil{ position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(6,18,34,.34) 0%, rgba(6,18,34,.72) 52%, rgba(4,12,24,.94) 100%); }
.div__in{ margin-top:auto; position:relative; z-index:2; }
.div__num{ margin:0 0 .5em; font-size:calc(var(--fs)*4.6); font-weight:600; line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.35); letter-spacing:-.04em; }
.div__t{ margin:.1em 0 0; font-size:calc(var(--fs)*2.3); line-height:1.08; font-weight:600;
  letter-spacing:-.02em; color:#fff; }
.div__s{ margin:0; font-size:calc(var(--fs)*.78); line-height:1.65; color:rgba(255,255,255,.72);
  max-width:24em; }

/* ---------- 11 services grid --------------------------------------------- */
.svc{ list-style:none; margin:.15em 0 0; padding:0; display:flex; flex-direction:column;
  gap:calc(var(--fs)*.34); }
.svc__i{ position:relative; display:flex; align-items:flex-start; gap:.7em;
  padding:calc(var(--fs)*.5) calc(var(--fs)*.6); border-radius:var(--r);
  border:1px solid var(--line); background:var(--paper-2); }
.svc__ic{ color:var(--blue); font-size:calc(var(--fs)*1.05); flex:none;
  width:calc(var(--fs)*2); height:calc(var(--fs)*2); display:grid; place-items:center;
  border-radius:8px; background:rgba(34,85,155,.09); }
.svc__n{ position:absolute; inset-inline-end:.7em; bottom:.5em; font-size:calc(var(--fs)*.56);
  font-weight:600; color:var(--orange); letter-spacing:.1em; }

/* ---------- 12–14 feature pages ------------------------------------------ */
.pg--feat.is-dark{ background:linear-gradient(155deg,var(--blue-900),#071B33); }
.feat__art{ margin:.4em 0 .6em; padding:calc(var(--fs)*.3) 0; }
.pg--feat .veh{ opacity:.92; }

/* ---------- 15 support ---------------------------------------------------- */
.sup{ list-style:none; margin:.4em 0 0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:calc(var(--fs)*.55); }
.sup__i{ padding:calc(var(--fs)*.6) calc(var(--fs)*.45); border-radius:var(--r);
  background:linear-gradient(160deg,var(--blue-900),var(--blue-700)); color:#fff; text-align:center; }
.sup__i b{ display:block; font-size:calc(var(--fs)*1.15); font-weight:600; letter-spacing:-.01em; }
.sup__i p{ margin:.4em 0 0; font-size:calc(var(--fs)*.6); line-height:1.5;
  color:rgba(255,255,255,.74); }
.sup__pulse{ margin-top:auto; padding-top:calc(var(--fs)*1); display:flex; gap:.4em;
  align-items:center; }
.sup__pulse span{ height:3px; border-radius:2px; background:var(--orange); opacity:.85; }
.sup__pulse span:nth-child(1){ width:28%; }
.sup__pulse span:nth-child(2){ width:14%; opacity:.5; }
.sup__pulse span:nth-child(3){ width:7%; opacity:.28; }

/* ---------- 17–20 fleet --------------------------------------------------- */
.veh__stage{ position:relative; margin:.35em 0 .6em; padding:calc(var(--fs)*.75) 0 calc(var(--fs)*.6);
  border-radius:var(--r); background:linear-gradient(170deg,#F4F6FA,#EBEFF5); overflow:hidden; }
.veh__idx{ position:absolute; inset-inline-start:.5em; top:.05em; font-size:calc(var(--fs)*3.2);
  font-weight:600; color:#fff; letter-spacing:-.05em; line-height:1; }
.veh--hero{ position:relative; z-index:2; width:88%; margin:0 auto; }
.veh--alt{ position:relative; z-index:2; width:60%; margin:-6% auto 0; opacity:.55; }
.veh__ground{ position:absolute; left:6%; right:6%; bottom:calc(var(--fs)*.75); height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,85,155,.35),transparent); }

/* ---- photography ---------------------------------------------------
   A photo is laid out from the start (so lazy-loading actually fetches
   it) but painted transparent, sitting exactly over its illustration.
   app.js adds `has-shot` once the browser has decoded the file, which
   fades the photo in and hides the drawing underneath. An empty slot or
   a wrong filename therefore leaves the illustration untouched. */
.shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none; transition:opacity .35s ease; }
[data-art].has-shot .shot{ opacity:1; }
[data-art].has-shot .veh{ visibility:hidden; }

.feat__art{ position:relative; }
.feat__art .shot{ border-radius:var(--r); }

.veh__stage .shot{ border-radius:var(--r); }
.veh__stage .veh__idx{ z-index:2; }
.veh__stage.has-shot .veh__idx{ color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.55); }
.veh__stage.has-shot .veh__ground{ display:none; }
.veh__stage.has-shot .veh--alt{ display:none; }

.cov__art{ position:absolute; inset:0; }
.cov__art.has-shot .cov__shot{ opacity:.55; mix-blend-mode:luminosity; }
.cov__art.has-shot .cov__car{ visibility:hidden; }

/* ---------- 21 partners --------------------------------------------------- */
.ptn{ list-style:none; margin:.15em 0 0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:calc(var(--fs)*.45); align-content:start;
  grid-auto-rows:1fr; }
.ptn__i{ padding:calc(var(--fs)*.5) calc(var(--fs)*.5); border-radius:var(--r);
  border:1px solid var(--line); background:var(--paper-2); }
.ptn__ic{ display:grid; place-items:center; width:calc(var(--fs)*1.8); height:calc(var(--fs)*1.8);
  border-radius:50%; background:var(--blue-900); color:var(--orange);
  font-size:calc(var(--fs)*.9); margin-bottom:.45em; }

/* ---------- 22 timeline --------------------------------------------------- */
.tl{ list-style:none; margin:.4em 0 0; padding:0 0 0 0; }
.tl__i{ position:relative; padding-inline-start:calc(var(--fs)*1.4);
  padding-bottom:calc(var(--fs)*.6); }
.tl__i::before{ content:""; position:absolute; inset-inline-start:calc(var(--fs)*.36); top:.55em;
  bottom:-.4em; width:1px; background:var(--line); }
.tl__i.is-last::before{ display:none; }
.tl__dot{ position:absolute; inset-inline-start:0; top:.28em; width:calc(var(--fs)*.75);
  height:calc(var(--fs)*.75); border-radius:50%; background:var(--paper);
  border:2px solid var(--orange); }
.tl__y{ margin:0 0 .08em; font-size:calc(var(--fs)*.95); font-weight:600; color:var(--blue);
  letter-spacing:-.01em; }

/* ---------- 23 why -------------------------------------------------------- */
.pg--why{ background:linear-gradient(160deg,#0E2C52 0%, #0A1E3A 60%, #071628 100%); }
.why__grid{ position:absolute; inset:0; background-image:url(../img/pattern-grid.svg);
  background-size:40px; opacity:.45; }
.why{ list-style:none; margin:.3em 0 0; padding:0; display:flex; flex-direction:column;
  gap:calc(var(--fs)*.45); }
.why__i{ display:flex; gap:.8em; padding-top:calc(var(--fs)*.45);
  border-top:1px solid rgba(255,255,255,.13); }
.why__n{ font-size:calc(var(--fs)*.65); font-weight:600; color:var(--orange); flex:none;
  padding-top:.1em; letter-spacing:.06em; }
.why__foot{ margin:auto 0 0; padding-top:calc(var(--fs)*.9); font-size:calc(var(--fs)*.68);
  color:rgba(255,255,255,.55); font-style:italic; }
html[lang="ar"] .why__foot{ font-style:normal; }

/* ---------- 24 cta -------------------------------------------------------- */
.pg--cta{ background:var(--blue-950); color:#fff; }
.cta__scene{ position:absolute; inset:0; background-size:cover; background-position:center bottom; }
.cta__veil{ position:absolute; inset:0;
  background:linear-gradient(190deg, rgba(5,14,28,.55), rgba(5,14,28,.82) 60%, rgba(4,10,20,.95)); }
.cta__in{ margin:auto 0; position:relative; z-index:2; }
.cta__t{ margin:0; font-size:calc(var(--fs)*2.6); line-height:1.02; font-weight:600;
  letter-spacing:-.03em; color:#fff; }
html[lang="ar"] .cta__t{ font-size:calc(var(--fs)*2.9); letter-spacing:0; }
.cta__p{ margin:0 0 .75em; font-size:calc(var(--fs)*.76); line-height:1.7;
  color:rgba(255,255,255,.78); max-width:26em; }
.cta__sub{ margin:0 0 1.4em; font-size:calc(var(--fs)*.62); letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange); }
html[lang="ar"] .cta__sub{ letter-spacing:.02em; text-transform:none; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  height:2.9em; padding:0 1.35em; border-radius:99px; font-size:calc(var(--fs)*.66);
  font-weight:600; letter-spacing:.04em; transition:transform .18s, box-shadow .18s, background .18s; }
.btn--o{ background:linear-gradient(135deg,var(--orange),var(--orange-600)); color:#12202F;
  box-shadow:0 6px 20px rgba(240,138,38,.34); }
.btn--o:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(240,138,38,.44); }
.ic--btn{ width:1.05em; height:1.05em; }
html[dir="rtl"] .ic--btn{ transform:scaleX(-1); }

/* ---------- 25 contact ---------------------------------------------------- */
.ct{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--fs)*.42); margin-top:.3em;
  align-content:start; grid-auto-rows:auto; }
.ct__i--wide{ grid-column:1 / -1; }
.ct__i{ display:flex; flex-direction:column; gap:.12em; padding:calc(var(--fs)*.46);
  border-radius:var(--r); border:1px solid var(--line); background:var(--paper-2);
  transition:border-color .18s, background .18s, transform .18s; }
a.ct__i:hover{ border-color:var(--orange); background:#fff; transform:translateY(-2px); }
.ct__ic{ color:var(--blue); font-size:calc(var(--fs)*.82); }
a.ct__i:hover .ct__ic{ color:var(--orange); }
.ct__l{ font-size:calc(var(--fs)*.56); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); }
html[lang="ar"] .ct__l{ letter-spacing:.02em; text-transform:none; font-size:calc(var(--fs)*.58); }
.ct__v{ font-size:calc(var(--fs)*.66); font-weight:500; color:var(--blue-900);
  overflow-wrap:anywhere; line-height:1.4; }

/* ---------- 26 back cover ------------------------------------------------- */
.pg--back{ background:linear-gradient(165deg,#0E2C52,#071628); color:#fff; }
.back__glow{ position:absolute; inset:0;
  background:radial-gradient(60% 45% at 50% 38%, rgba(34,85,155,.55), transparent 68%); }
.back__in{ margin:auto 0; text-align:center; display:flex; flex-direction:column;
  align-items:center; position:relative; z-index:2; }
.back__b{ margin:.9em 0 0; font-family:var(--ff-display); font-size:calc(var(--fs)*1.4);
  font-weight:400; letter-spacing:.2em; padding-inline-start:.2em; }
html[lang="ar"] .back__b{ letter-spacing:0; padding-inline-start:0;
  font-size:calc(var(--fs)*1.6); font-weight:700; }
.back__s{ margin:0 0 1.5em; font-size:calc(var(--fs)*.6); color:var(--orange);
  letter-spacing:.16em; text-transform:uppercase; }
html[lang="ar"] .back__s{ letter-spacing:.02em; text-transform:none; }
.back__c{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4em; }
.back__c li{ font-size:calc(var(--fs)*.68); color:rgba(255,255,255,.78); }
.back__l{ margin:2em 0 0; font-size:calc(var(--fs)*.48); letter-spacing:.1em;
  color:rgba(255,255,255,.42); }
.pg--back .rule{ margin-inline:auto; }

/* ==================================================================== *
   PANELS / MODALS / FAB
 * ==================================================================== */
.scrim{ position:fixed; inset:0; background:rgba(6,12,20,.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .28s; z-index:60; }
body.panel-open .scrim,body.modal-open .scrim{ opacity:1; pointer-events:auto; }

.panel{
  position:fixed; top:0; bottom:0; inset-inline-start:0; width:min(360px,86vw);
  background:#0F1A26; border-inline-end:1px solid rgba(255,255,255,.09);
  z-index:70; display:flex; flex-direction:column;
  transform:translateX(-102%); transition:transform .32s cubic-bezier(.3,.1,.2,1);
  box-shadow:var(--shadow-2);
}
html[dir="rtl"] .panel{ transform:translateX(102%); }
.panel.is-open,html[dir="rtl"] .panel.is-open{ transform:none; }
.panel--thumbs{ width:min(420px,92vw); }
.panel__head{ display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.09); }
.panel__head h2{ margin:0; font-size:13px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark-mute); }
html[lang="ar"] .panel__head h2{ letter-spacing:.02em; text-transform:none; font-size:15px; }
.x{ width:32px; height:32px; border-radius:50%; font-size:22px; line-height:1;
  color:var(--on-dark-mute); display:grid; place-items:center; }
.x:hover{ background:rgba(255,255,255,.1); color:#fff; }
.panel__foot{ margin-top:auto; padding:16px 18px;
  border-top:1px solid rgba(255,255,255,.09); font-size:15px; }
.panel__foot .btn{ font-size:14px; height:44px; }

.toc-list{ list-style:none; margin:0; padding:10px 12px; overflow-y:auto; flex:1; }
.toc-link{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 12px;
  border-radius:var(--r); text-align:start; transition:background .16s, color .16s; }
.toc-link:hover{ background:rgba(255,255,255,.07); }
.toc-link.is-on{ background:rgba(240,138,38,.14); }
.toc-link.is-on .toc-link__t{ color:var(--orange); }
.toc-link__n{ font-size:11px; font-weight:600; color:var(--orange); letter-spacing:.08em;
  width:22px; flex:none; }
.toc-link__t{ flex:1; font-size:14.5px; font-weight:500; }
.toc-link__p{ font-size:11.5px; color:var(--on-dark-mute); font-variant-numeric:tabular-nums; }

.thumbs{ flex:1; overflow-y:auto; padding:14px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; align-content:start; }
.thumb{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.thumb:focus-visible{ outline:none; }
.thumb:focus-visible .thumb__paper{ outline-color:var(--orange); }
.thumb__paper{ position:relative; display:block; width:100%; aspect-ratio:210/297;
  overflow:hidden; border-radius:3px; background:#fff; box-shadow:var(--shadow-1);
  outline:2px solid transparent; transition:outline-color .16s, transform .16s; }
.thumb:hover .thumb__paper{ transform:translateY(-2px); outline-color:rgba(255,255,255,.35); }
.thumb.is-on .thumb__paper{ outline-color:var(--orange); }
.thumb__mini{ position:absolute; top:0; inset-inline-start:0; width:210px; height:297px;
  --pw:210px; transform-origin:top left; pointer-events:none;
  transform:scale(var(--s,.46)); }
html[dir="rtl"] .thumb__mini{ transform-origin:top right; }
.thumb__n{ font-size:10.5px; color:var(--on-dark-mute); font-variant-numeric:tabular-nums;
  letter-spacing:.08em; }
.thumb.is-on .thumb__n{ color:var(--orange); }

.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px;
  opacity:0; transition:opacity .24s; pointer-events:none; }
.modal.is-open{ opacity:1; pointer-events:auto; }
.modal__box{ width:min(620px,100%); max-height:90vh; overflow:hidden; display:flex;
  flex-direction:column; background:#101C29; border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  transform:translateY(14px) scale(.985); transition:transform .28s cubic-bezier(.3,.1,.2,1); }
.modal.is-open .modal__box{ transform:none; }
.modal--sm .modal__box{ width:min(400px,100%); }
.modal__head{ display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.09); }
.modal__head h2{ margin:0; font-size:16px; font-weight:600; }
.modal__body{ padding:18px; overflow-y:auto; }
.modal__intro{ margin:0 0 16px; font-size:13.5px; line-height:1.6; color:var(--on-dark-mute); }

.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fld{ display:flex; flex-direction:column; gap:5px; }
.fld--full{ grid-column:1 / -1; }
.fld span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mute); }
html[lang="ar"] .fld span{ letter-spacing:.02em; text-transform:none; font-size:12.5px; }
.fld input,.fld select,.fld textarea{
  background:#0A131C; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  padding:10px 12px; font-size:14px; color:#fff; width:100%; transition:border-color .16s; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--orange); }
.fld textarea{ resize:vertical; }
.fld select{ appearance:none; background-image:
  linear-gradient(45deg,transparent 50%,var(--on-dark-mute) 50%),
  linear-gradient(135deg,var(--on-dark-mute) 50%,transparent 50%);
  background-position:calc(100% - 17px) 19px, calc(100% - 12px) 19px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
html[dir="rtl"] .fld select{ background-position:17px 19px, 12px 19px; }

.modal__body .btn{ font-size:14px; height:46px; }
.btn--wide{ width:100%; margin-top:16px; }
.fstore{ margin:14px 0 0; padding:11px 13px; border-radius:var(--r);
  font-size:13px; line-height:1.55; background:rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.35); color:#8CE8B0; }
.fstore.is-bad{ background:rgba(240,138,38,.12); border-color:rgba(240,138,38,.4);
  color:#F5C083; }
.fsend{ margin-top:16px; padding:14px; border-radius:var(--r);
  background:rgba(240,138,38,.09); border:1px solid rgba(240,138,38,.28); }
.fsend__t{ margin:0 0 12px; font-size:13.5px; color:#fff; }
.fsend__b{ display:flex; gap:10px; flex-wrap:wrap; }
.fsend__b .btn{ flex:1 1 160px; }
.btn--wa{ background:#25D366; color:#08210F; }
.btn--gh{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }

.share{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.share__i{ display:flex; align-items:center; justify-content:center; height:48px;
  border-radius:var(--r); border:1px solid rgba(255,255,255,.14); font-size:13.5px;
  font-weight:500; transition:background .16s, border-color .16s; }
.share__i:hover{ background:rgba(255,255,255,.08); border-color:var(--orange); }
.share__i--copy{ grid-column:1 / -1; background:rgba(240,138,38,.14);
  border-color:rgba(240,138,38,.4); color:var(--orange); }

.fab{
  position:fixed; inset-inline-end:20px; bottom:76px; z-index:50;
  display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 20px;
  border-radius:99px; font-size:14px; font-weight:600; letter-spacing:.02em;
  background:linear-gradient(135deg,var(--orange),var(--orange-600)); color:#12202F;
  box-shadow:0 8px 26px rgba(240,138,38,.4), 0 2px 6px rgba(0,0,0,.3);
  transition:transform .2s, box-shadow .2s;
}
.fab:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(240,138,38,.5); }
.fab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
body.modal-open .fab,body.panel-open .fab{ opacity:0; pointer-events:none; }

/* ==================================================================== *
   RESPONSIVE
 * ==================================================================== */
@media (max-width:900px){
  /* one page fills the screen here, so the type can be proportionally larger */
  .book{ --type-scale:23.5; }
  .veh__stage{ padding:calc(var(--fs)*.55) 0 calc(var(--fs)*.45); }
  .veh--hero{ width:78%; }
  .feat__art{ margin:.3em 0 .45em; }
  .tb__t{ display:none; }
  .tb{ width:36px; padding:0; justify-content:center; }
  .tb--lang{ width:auto; padding:0 12px; }
  .tools{ margin-inline-start:8px; padding-inline-start:8px; }
  .zlabel{ display:none; }
  .brandmark__t i{ display:none; }
  .fab{ bottom:70px; inset-inline-end:14px; height:46px; padding:0 16px; font-size:13px; }
  .fgrid{ grid-template-columns:1fr; }
  .stage{ padding:6px; }
  .hint{ bottom:4px; }
}
@media (max-width:520px){
  /* every pixel taken back from the bars makes the page (and its text) bigger */
  .bar{ padding:5px 8px; gap:4px; }
  .bar--bot{ padding-bottom:max(5px, env(safe-area-inset-bottom)); }
  .nav{ width:34px; height:34px; }
  .tb, .tb--icon{ height:32px; }
  .brandmark img{ width:28px; height:28px; }
  .brandmark__t b{ font-size:12px; }
  .fab span{ display:none; }
  .fab{ width:48px; height:48px; padding:0; justify-content:center; border-radius:50%; }
  .pager{ margin:0 4px; }
  .bar{ padding:7px 8px; gap:4px; }
  .bar__r{ gap:2px; }
  .tb--icon{ width:32px; }
  .tb--lang{ padding:0 10px; font-size:12px; }
  .nav{ width:38px; height:38px; }
  .tools{ gap:2px; margin-inline-start:6px; padding-inline-start:6px; }
  .pager__now{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .book,.leaf,.panel,.modal__box,.btn,.fab{ transition-duration:.01ms !important; }
}

/* ==================================================================== *
   PRINT — every page, A4, one per sheet
 * ==================================================================== */
.print{ display:none; }
@media print{
  @page{ size:A4 portrait; margin:0; }
  html,body{ height:auto; overflow:visible; background:#fff; }
  .viewer{ display:none !important; }
  .print{ display:block; }
  /* a hair under A4 so rounding never spills a page onto a second sheet */
  .pp{ position:relative; width:210mm; height:296.6mm; overflow:hidden;
    page-break-after:always; break-after:page; break-inside:avoid; }
  .pp:last-child{ page-break-after:auto; break-after:auto; }
  /* same type scale as the desktop spread, which is the verified layout */
  .pp .pg{ --pw:210mm; --type-scale:25; position:absolute; inset:0; }
  .seo{ display:none; }
}

/* ---- photo areas fill the page ------------------------------------
   Service and fleet pages used to leave a gap under a fixed-size art box.
   The box now takes whatever height the text leaves, so a photograph is
   shown as large as the page allows (and still shrinks on small screens). */
.feat__art,
.veh__stage{ flex:1 1 auto; min-height:calc(var(--fs)*6.5);
  display:flex; align-items:center; justify-content:center; }
.feat__art .veh,
.veh__stage .veh--hero{ max-height:100%; width:auto; max-width:92%; }
.veh__stage.has-shot{ aspect-ratio:auto; }
.pg--feat .chips,
.pg--veh .chips{ margin-top:.2em; }

/* support page: optional photo band under the three cards */
.sup__art{ position:relative; flex:1 1 auto; min-height:calc(var(--fs)*5);
  margin-top:calc(var(--fs)*.7); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(160deg,#EEF1F6,#E3E8EF); }
.sup__art .shot{ border-radius:var(--r); }

/* closing page: a photograph behind the headline */
.cta__scene .shot{ position:absolute; inset:0; }
.veh__stage{ flex-direction:column; }
.veh__stage .veh--alt{ max-height:40%; width:auto; margin-top:-4%; }

/* ==================================================================== *
   TYPE SYSTEM — one modular scale for every page
   ---------------------------------------------------------------------
   International corporate profiles keep few sizes and let weight,
   tracking and leading carry the hierarchy: large headings in a lighter
   weight with tight tracking, a calm body size with generous leading,
   and small tracked labels. Every size below is a step of that scale.
 * ==================================================================== */
.pg{
  --t-label:.6;    /* eyebrows, section tabs, footers */
  --t-caption:.66; /* card copy, captions */
  --t-body:.75;    /* running text */
  --t-lead:.9;     /* intro paragraph */
  --t-h4:.9;       /* card titles */
  --t-h3:1.05;     /* sub-heads */
  --t-h2:1.62;     /* page titles */
  --t-h1:2.02;     /* opening titles */
}

.kicker{ font-size:calc(var(--fs)*var(--t-label)); font-weight:600; letter-spacing:.2em; }
html[lang="ar"] .kicker{ font-size:calc(var(--fs)*(var(--t-label) + .06)); letter-spacing:.02em; }

.h1{ font-size:calc(var(--fs)*var(--t-h1)); font-weight:500; line-height:1.08; letter-spacing:-.028em; }
.h1--tight{ font-size:calc(var(--fs)*(var(--t-h1) - .24)); }
.h2{ font-size:calc(var(--fs)*var(--t-h2)); font-weight:500; line-height:1.12; letter-spacing:-.022em; }
.h3{ font-size:calc(var(--fs)*var(--t-h3)); font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.h4{ font-size:calc(var(--fs)*var(--t-h4)); font-weight:600; line-height:1.28; letter-spacing:-.005em; }
/* Arabic letterforms read thin at 500 and must never be tracked */
html[lang="ar"] .h1, html[lang="ar"] .h2{ font-weight:600; letter-spacing:0; line-height:1.28; }
html[lang="ar"] .h3, html[lang="ar"] .h4{ letter-spacing:0; line-height:1.4; }

.lead{ font-size:calc(var(--fs)*var(--t-lead)); line-height:1.55; font-weight:400; color:var(--ink); }
.lead--sm{ font-size:calc(var(--fs)*(var(--t-lead) - .06)); }
.is-dark .lead{ color:rgba(255,255,255,.86); }
.body{ font-size:calc(var(--fs)*var(--t-body)); line-height:1.68; }
.body--sm{ font-size:calc(var(--fs)*(var(--t-body) - .04)); }
.body--xs{ font-size:calc(var(--fs)*var(--t-caption)); line-height:1.55; }
html[lang="ar"] .body, html[lang="ar"] .lead{ line-height:1.8; }

.pg__sec, .pg__foot{ font-size:calc(var(--fs)*(var(--t-label) - .04)); }
.rule{ height:2px; width:calc(var(--fs)*2); }

/* ---- feature list with icons (replaces the pill tags) --------------- */
.feats{ list-style:none; margin:auto 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; column-gap:calc(var(--fs)*.9); }
.feat{ display:flex; align-items:center; gap:calc(var(--fs)*.5);
  padding:calc(var(--fs)*.42) 0; border-top:1px solid var(--line); min-width:0; }
.feat__ic{ flex:none; display:grid; place-items:center;
  width:calc(var(--fs)*1.6); height:calc(var(--fs)*1.6); border-radius:calc(var(--fs)*.42);
  background:rgba(55,97,170,.09); color:var(--blue);
  font-size:calc(var(--fs)*.9); }
.feat__ic .ic{ width:1.05em; height:1.05em; stroke-width:1.7; }
.feat__t{ font-size:calc(var(--fs)*var(--t-caption)); font-weight:500; line-height:1.3;
  color:var(--ink); min-width:0; }
html[lang="ar"] .feat__t{ font-size:calc(var(--fs)*(var(--t-caption) + .04)); line-height:1.45; }

.is-dark .feat{ border-top-color:rgba(255,255,255,.14); }
.is-dark .feat__ic{ background:rgba(238,126,35,.14); color:var(--orange); }
.is-dark .feat__t{ color:rgba(255,255,255,.9); }
/* "About" carries the most Arabic text per page — slightly tighter leading keeps it on the page */
html[lang="ar"] .pg--about .lead{ line-height:1.66; }
html[lang="ar"] .pg--about .body--sm{ line-height:1.62; }

/* ==================================================================== *
   ARABIC TYPOGRAPHY
   ---------------------------------------------------------------------
   Arabic letters join, so tracking must never be applied to them: it
   pulls the joins apart and is the single most common mistake in
   Arabic corporate documents. Arabic also sits on a smaller x-height
   than Latin at the same point size, so the scale is nudged up and the
   leading opened out. Headings stay at 600 — 500 reads too thin.
 * ==================================================================== */
html[lang="ar"] .pg,
html[lang="ar"] .pg *{ letter-spacing:0; }

html[lang="ar"] .pg{
  --t-label:.66;
  --t-caption:.7;
  --t-body:.79;
  --t-lead:.94;
  --t-h4:.94;
  --t-h3:1.08;
  --t-h2:1.6;
  --t-h1:1.98;
  /* Arabic never uses capitals, so every uppercase label must be undone */
  text-transform:none;
}
html[lang="ar"] .pg .kicker,
html[lang="ar"] .pg .pg__sec,
html[lang="ar"] .pg .pg__foot,
html[lang="ar"] .pg .ct__l,
html[lang="ar"] .pg .facts__r dt,
html[lang="ar"] .pg .slogans__l,
html[lang="ar"] .pg .ministat span,
html[lang="ar"] .pg .vm__seal,
html[lang="ar"] .pg .stats__v em,
html[lang="ar"] .pg .cta__sub,
html[lang="ar"] .pg .back__s,
html[lang="ar"] .pg .stmt__sign,
html[lang="ar"] .pg .cov__kicker,
html[lang="ar"] .pg .cov__meta{ text-transform:none; }

/* headings: weight carries the hierarchy, never tracking */
html[lang="ar"] .h1,
html[lang="ar"] .h2{ font-weight:600; line-height:1.3; }
html[lang="ar"] .h3,
html[lang="ar"] .h4{ font-weight:600; line-height:1.45; }
html[lang="ar"] .lead{ line-height:1.75; }
html[lang="ar"] .body{ line-height:1.8; }
html[lang="ar"] .body--xs,
html[lang="ar"] .feat__t{ line-height:1.65; }

/* no stretched words, no broken words, no orphaned headings */
html[lang="ar"] .pg{ text-align:start; word-spacing:normal; }
html[lang="ar"] .pg p,
html[lang="ar"] .pg li,
html[lang="ar"] .pg dd{ hyphens:none; -webkit-hyphens:none; overflow-wrap:break-word; }
html[lang="ar"] .h1,
html[lang="ar"] .h2,
html[lang="ar"] .h3{ text-wrap:balance; }
/* Latin fragments inside Arabic (ICV, 24/7, 3–5) keep their own direction */
html[lang="ar"] .pg{ font-variant-numeric:normal; }

/* On a phone the whole A4 page is already scaled down, so the Arabic
   uplift is eased back a step to keep every page within its margins. */
@media (max-width:900px){
  html[lang="ar"] .pg{
    --t-label:.63; --t-caption:.67; --t-body:.76;
    --t-lead:.9;   --t-h4:.9;       --t-h3:1.04;
  }
  html[lang="ar"] .body{ line-height:1.72; }
  html[lang="ar"] .lead{ line-height:1.68; }
}
/* the contact page carries six tiles, the tightest grid in the profile */
@media (max-width:900px){
  html[lang="ar"] .pg--ct .ct{ gap:calc(var(--fs)*.36); }
  html[lang="ar"] .pg--ct .ct__i{ padding:calc(var(--fs)*.4); }
}

/* ==================================================================== *
   TYPOGRAPHIC REFINEMENT  —  presentation only, no content changes
   ---------------------------------------------------------------------
   1. a mirrored page grid, as a printed profile has
   2. one vertical rhythm shared by every page
   3. wrapping rules that stop orphans and ragged headings
   4. lining, tabular figures so numbers align down a column
 * ==================================================================== */

/* ---- 1. mirrored margins ------------------------------------------
   In a spread the page touching the spine needs a wider inner margin,
   or the text crowds the gutter shadow. In both reading directions the
   front face sits against the spine on its start edge and the back
   face on its end edge, so one pair of rules serves Arabic and English.
   The two margins always sum to the same total, so the measure — and
   therefore every verified line break — is unchanged. */
.pg{
  --pad-out:calc(var(--pad) * .82);
  --pad-in:calc(var(--pad) * 1.18);
  --p-start:var(--pad);
  --p-end:var(--pad);
}
.book--spread .face--f .pg{ --p-start:var(--pad-in);  --p-end:var(--pad-out); }
.book--spread .face--b .pg{ --p-start:var(--pad-out); --p-end:var(--pad-in); }

.pg__head{ padding-inline:var(--p-start) var(--p-end); }
.pg__body{ padding-inline:var(--p-start) var(--p-end); }
.pg__foot{ padding-inline:var(--p-start) var(--p-end); }
.cov__in,
.cta__in{ padding-inline:var(--p-start) var(--p-end); }
.cov__bot{ inset-inline:var(--p-start) var(--p-end); }

/* ---- 2. one vertical rhythm ---------------------------------------- */
.pg{
  --sp-1:calc(var(--fs) * .34);   /* label to heading      */
  --sp-2:calc(var(--fs) * .62);   /* between text blocks   */
  --sp-3:calc(var(--fs) * .95);   /* between sections      */
}
.kicker{ margin:0 0 var(--sp-1); }
.h1, .h2{ margin:0; }
.rule{ margin:var(--sp-2) 0; }
.lead{ margin:0 0 var(--sp-2); }
.body{ margin:0 0 var(--sp-2); }
.body:last-of-type{ margin-bottom:0; }
.h3, .h4{ margin-block:0 calc(var(--fs) * .22); }

/* a comfortable measure: long lines tire the eye even on a wide page */
.lead, .body{ max-width:38em; }

/* ---- 3. wrapping --------------------------------------------------- */
.pg p, .pg li, .pg dd{ text-wrap:pretty; }        /* no single-word last lines */
.h1, .h2, .h3, .h4,
.div__t, .cta__t, .stmt__q, .cov__brand,
.back__b, .toc__t, .feat__t{ text-wrap:balance; } /* even ragged edges */
.pg{ hanging-punctuation:first last; }

/* ---- 4. figures ---------------------------------------------------- */
.stats__v, .tl__y, .ministat b, .pg__no, .toc__p, .toc__n,
.vals__n, .why__n, .plist__n, .svc__n, .veh__idx, .div__num{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}
/* Latin strings on Arabic pages take the Latin face, which sets them
   at the right weight and width instead of the Arabic fallback */
html[lang="ar"] .pg__brand,
html[lang="ar"] .pg__no,
html[lang="ar"] .stats__v,
html[lang="ar"] .tl__y,
html[lang="ar"] .ministat b{ font-family:"IBM Plex Sans", var(--ff); }

/* ---- 5. label tracking, tuned once for the whole profile ----------- */
.pg__sec{ letter-spacing:.18em; }
.pg__foot{ letter-spacing:.14em; }
.pg__brand{ letter-spacing:.14em; }
html[lang="ar"] .pg__sec,
html[lang="ar"] .pg__foot{ letter-spacing:0; }
html[lang="ar"] .pg__brand{ letter-spacing:.1em; }
/* six contact tiles are the tightest grid in the profile, in both languages */
@media (max-width:900px){
  .pg--ct .ct{ gap:calc(var(--fs)*.36); }
  .pg--ct .ct__i{ padding:calc(var(--fs)*.42); }
}

/* ==================================================================== *
   22–25  CLIENTS & SUPPLIERS — card grid
   ---------------------------------------------------------------------
   Three cards to a row. Each card centres its mark, then the name in the
   reading language, then the same name in the other language. Client
   cards carry their sector on a tag that sits on the top edge; supplier
   cards carry the marques they represent at the foot, aligned across the
   row. Rows share the height of their tallest card, so the grid stays
   square however long a name runs.
 * ==================================================================== */
.cls{
  list-style:none; padding:0;
  margin:calc(var(--sp-2) + var(--fs)*.42) 0 0;     /* room for the tag on the card edge */
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  grid-auto-rows:auto; gap:calc(var(--fs)*.72) calc(var(--fs)*.4);
}
.cls--sup{ margin-top:var(--sp-2); row-gap:calc(var(--fs)*.4); }

.cls__i{
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:calc(var(--fs)*.08);
  padding:calc(var(--fs)*.58) calc(var(--fs)*.3) calc(var(--fs)*.42);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 1px 2px rgba(14,44,82,.05), 0 8px 18px -14px rgba(14,44,82,.45);
}
.cls--sup .cls__i{ padding-top:calc(var(--fs)*.44); }

/* ---- mark: sector icon or initials; a logo file, when present, covers it */
.cls__badge{
  position:relative; flex:none; display:grid; place-items:center; overflow:hidden;
  width:calc(var(--fs)*1.62); height:calc(var(--fs)*1.62); border-radius:50%;
  font-size:calc(var(--fs)*.84); margin-bottom:calc(var(--fs)*.06);
}
.cls__badge .ic{ width:1.15em; height:1.15em; stroke-width:1.6; transition:opacity .2s ease; }
.cls__logo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0; transition:opacity .25s ease;
}
/* a real logo carries its own colour, so the sector plate steps away */
.cls__badge.has-logo{ background:none; }
.cls__badge.has-logo .cls__logo{ opacity:1; }
.cls__badge.has-logo .ic{ opacity:0; }

/* ---- names ---------------------------------------------------------- */
.cls__txt{ display:flex; flex-direction:column; gap:calc(var(--fs)*.1); width:100%; min-width:0; }
.cls__n{
  display:block; font-size:calc(var(--fs)*(var(--t-caption) - .02)); font-weight:600;
  line-height:1.28; letter-spacing:-.005em; color:var(--blue-900);
  text-align:center; text-wrap:balance; overflow-wrap:anywhere;
}
.cls__n2{
  display:block; font-size:calc(var(--fs)*(var(--t-label) - .06)); font-weight:400;
  line-height:1.28; color:var(--muted); text-align:center; text-wrap:balance;
}
html[lang="ar"] .cls__n{ letter-spacing:0; line-height:1.36;
  font-size:calc(var(--fs)*(var(--t-caption) + .02)); }
/* the secondary line is always the *other* script — give it its own face */
html[lang="ar"] .cls__n2{ font-family:"IBM Plex Sans", var(--ff); letter-spacing:.004em; }
html[lang="en"] .cls__n2{ font-family:"IBM Plex Sans Arabic", var(--ff); letter-spacing:0;
  line-height:1.36; }

/* ---- sector tag, straddling the top edge of the card ---------------- */
.cls__tag{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  white-space:nowrap; padding:calc(var(--fs)*.1) calc(var(--fs)*.46); border-radius:99px;
  font-size:calc(var(--fs)*(var(--t-label) - .12)); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.25;
  box-shadow:0 0 0 2px var(--paper);
}
html[lang="ar"] .cls__tag{
  letter-spacing:0; text-transform:none;
  font-size:calc(var(--fs)*(var(--t-label) - .06));
}

/* ---- sector colours, kept inside the brand palette ------------------
   the tags are opaque so the card border never shows through them */
.cls__badge--gov { color:var(--blue);       background:rgba(55,97,170,.10); }
.cls__badge--auth{ color:var(--blue-900);   background:rgba(14,44,82,.08); }
.cls__badge--edu { color:var(--orange-600); background:rgba(238,126,35,.13); }
.cls__badge--priv{ color:var(--muted);      background:rgba(107,122,140,.13); }
.cls__tag--gov { color:var(--blue);       background:#E9EEF7; }
.cls__tag--auth{ color:var(--blue-900);   background:#E8ECF1; }
.cls__tag--edu { color:var(--orange-600); background:#FDEEE1; }
.cls__tag--priv{ color:var(--muted);      background:#EDEFF2; }

/* ---- continuation header on the second page of each list ------------ */
.cls__cont{
  margin:0; font-size:calc(var(--fs)*var(--t-label)); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
html[lang="ar"] .cls__cont{ letter-spacing:0; text-transform:none;
  font-size:calc(var(--fs)*(var(--t-label) + .06)); }

/* the grid carries the page, so the intro above it sits closer */
.pg--cls .lead{ margin-bottom:var(--sp-1); }

/* ---- supplier cards: initials in the mark, marques at the foot ------ */
.sup__badge{ background:rgba(55,97,170,.10); color:var(--blue-700); }
.sup__m{ font-size:.66em; font-weight:700; letter-spacing:.02em; line-height:1; }
html[lang="ar"] .sup__m{ font-family:"IBM Plex Sans", var(--ff); }
.sup__badge.has-logo .sup__m{ opacity:0; }

.sup__b{
  margin-top:auto; padding-top:calc(var(--fs)*.24); width:100%;
  border-top:1px solid var(--line-2);
  font-size:calc(var(--fs)*(var(--t-label) - .1)); font-weight:600;
  line-height:1.35; letter-spacing:.04em; color:var(--blue);
  text-align:center; text-wrap:balance;
}
html[lang="ar"] .sup__b{ letter-spacing:0; font-size:calc(var(--fs)*(var(--t-label) - .04)); }
.sup__mq{ font-style:normal; white-space:nowrap; }
.sup__mq:not(:last-child)::after{ content:" ·"; }

/* phones: tighter gutters so three cards still breathe */
@media (max-width:900px){
  .cls{ gap:calc(var(--fs)*.62) calc(var(--fs)*.32); }
  .cls__i{ padding:calc(var(--fs)*.5) calc(var(--fs)*.22) calc(var(--fs)*.34); }
  .cls--sup .cls__i{ padding-top:calc(var(--fs)*.4); }
  .cls__n2{ line-height:1.22; }
  html[lang="en"] .cls__n2{ line-height:1.3; }
}

/* the contents list grew with the client and supplier sections; on a phone
   the rows come in slightly so all thirteen still sit on one page */
@media (max-width:900px){
  .pg--contents .toc__btn{ padding:calc(var(--fs)*.3) 0; }
}