/* Ya Modeer — one stylesheet for every page.
   Replaces ten near-identical files of about 20 KB each. Written with logical
   properties (inline-start, padding-inline) so the Arabic pages need no
   separate rules: setting dir="rtl" on <html> flips the whole layout. */

:root {
  /* The brand red is the logo's own ink, sampled from the artwork: #D01317
     covers 32,137 px of assets/Logo.png and dominates the App Store icon
     master too. The site had been using #C40831, a darker, more crimson red
     that never matched the mark it sat beside. Deep and soft are the same
     hue at 76% and 95.5% lightness, so the family holds together.
     --red-on-dark is for the hero and anywhere else red sits on the near
     black ground: the deep shade scored 2.03 against it, which is not
     legible; this scores 5.00. */
  --red: #D01317; --red-deep: #9E0E11; --red-soft: #FCEBEB; --red-on-dark: #EF4D51;
  --slate: #6B7178; --ink: #15171A; --ground: #FFFFFF; --paper: #F4F5F6;
  --rule: #E1E4E7; --muted: #5D646B; --faint: #8B939B;
  --hero-ground: #15171A; --hero-ink: #FFFFFF; --hero-muted: #A9B0B7;
  --shadow: 0 1px 2px rgba(21,23,26,.05), 0 10px 28px -18px rgba(21,23,26,.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* The same hue lifted for a dark ground, so the mark and the interface
       still agree: #F0575A scores 5.60 on the dark page ground. */
    --red: #F0575A; --red-deep: #F37C7F; --red-soft: #2C0E0F; --red-on-dark: #F0575A;
    --slate: #838B93; --ink: #E7EAED; --ground: #0F1113; --paper: #16191C;
    --rule: #262B30; --muted: #A0A8B0; --faint: #737C85;
    --hero-ground: #0A0B0D; --hero-ink: #F5F7F8; --hero-muted: #98A1A9;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Bricolage Grotesque", "IBM Plex Sans Arabic", Georgia, serif;
  margin: 0; font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; letter-spacing: 0;
}
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--red); color: #fff; padding: .7rem 1.1rem; text-decoration: none;
}
.skip:focus { inset-inline-start: 0; }

.shell { max-width: 70rem; margin-inline: auto; padding-inline: 1.5rem; }
@media (max-width: 640px) { .shell { padding-inline: 1.15rem; } }

/* ---------- navigation ---------- */
.site-nav { border-bottom: 1px solid var(--rule); background: var(--ground); position: relative; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--red); flex: none; }
/* The designer's mark, shipped as the original file rather than redrawn. It is
   red on transparency, which reads on both the light and the dark header. */
.brand .mark { width: 39px; height: 34px; object-fit: contain; flex: none; }
.wordmark { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.1rem;
            letter-spacing: -.02em; color: var(--ink); }
[dir="rtl"] .wordmark { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.navlink { text-decoration: none; font-size: .95rem; color: var(--muted); padding-block: .25rem; }
.navlink:hover { color: var(--red); }
.navlink.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
.langswitch {
  text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px; padding: .35rem .8rem;
}
.langswitch:hover { border-color: var(--red); color: var(--red); }
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; }

@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 20;
    flex-direction: column; align-items: flex-start; gap: .2rem;
    background: var(--ground); border-bottom: 1px solid var(--rule);
    padding: .6rem 1.15rem 1rem; box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .navlink { padding-block: .6rem; font-size: 1rem; }
  .langswitch { margin-top: .5rem; }
}

/* ---------- hero ---------- */
.hero { background: var(--hero-ground); color: var(--hero-ink); }
.hero-in { padding-block: 4.5rem 4rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 640px) { .hero-in { padding-block: 3rem 2.75rem; } }
/* On the hero's near-black ground. The deep red scored 2.03 here - present,
   but not readable; this is the same hue lifted until it is. */
.kicker { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red-on-dark); font-weight: 600; }
[dir="rtl"] .kicker { letter-spacing: 0; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1.03; max-width: 15ch; }
.hero-sub { color: var(--hero-muted); font-size: 1.1rem; max-width: 46ch; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.door {
  display: flex; flex-direction: column; gap: .28rem; text-decoration: none;
  padding: 1.2rem 1.3rem; border-radius: 4px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05); transition: background .15s, border-color .15s;
}
.door:hover, .door:focus-visible { background: var(--red); border-color: var(--red); }
.dlabel { font-size: .73rem; letter-spacing: .13em; text-transform: uppercase; color: var(--hero-muted); font-weight: 600; }
[dir="rtl"] .dlabel { letter-spacing: 0; }
.dtitle { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--hero-ink); }
[dir="rtl"] .dtitle { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; }
.dnote { font-size: .93rem; color: var(--hero-muted); }
.door:hover .dnote, .door:hover .dtitle, .door:hover .dlabel { color: #fff; }

/* ---------- bands ---------- */
.band { padding-block: 4rem; border-bottom: 1px solid var(--rule); }
.band:last-of-type { border-bottom: 0; }
@media (max-width: 640px) { .band { padding-block: 2.75rem; } }
.band-head { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.9rem; max-width: 54ch; }
.band-head.no-gap { margin-bottom: 0; }
.eyebrow { font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--red); font-weight: 600; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }
.band-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); line-height: 1.15; }
.band-head p { color: var(--muted); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2.2rem; align-items: start; }

/* ---------- trades ---------- */
/* Cards rather than the hairline table this was: each service is a thing you
   can pick, so each gets its own edge, its own ground and its own lift. The
   icon sits in a medallion, which gives the artwork a consistent size whatever
   shape the glyph is. */
.trades { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .85rem; }
.trade {
  background: var(--ground); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.15rem 1rem 1.05rem; display: flex; flex-direction: column;
  align-items: flex-start; gap: .75rem; min-height: 100%;
  transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.trade:hover, .trade:focus-within {
  border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-2px);
}
.tart {
  width: 3rem; height: 3rem; border-radius: 10px; flex: none;
  background: var(--paper); display: grid; place-items: center;
  transition: background .16s;
}
.trade:hover .tart, .trade:focus-within .tart { background: var(--red-soft); }
.chip { width: .85rem; height: .85rem; border-radius: 3px; background: var(--slate);
        transition: background .16s, transform .16s; }
.trade:hover .chip { background: var(--red); transform: scale(1.18); }

/* The service icons are the app's own artwork: red glyphs on transparency.
   Showing them desaturated until the card is touched reproduces the selected /
   unselected pair the app uses, from one file rather than two. */
.ticon { width: 36px; height: 36px; object-fit: contain;
         filter: grayscale(1) opacity(.5); transition: filter .16s, transform .16s; }
.trade:hover .ticon, .trade:focus-within .ticon { filter: none; transform: scale(1.06); }
/* On a dark ground a dark-red glyph disappears, so lift it rather than mute it. */
@media (prefers-color-scheme: dark) {
  .ticon { filter: grayscale(1) brightness(1.9) opacity(.55); }
  .trade:hover .ticon, .trade:focus-within .ticon { filter: brightness(1.25); }
}
.t1 { font-size: .97rem; font-weight: 600; line-height: 1.3; min-width: 0;
      transition: color .16s; text-wrap: balance; }
.trade:hover .t1, .trade:focus-within .t1 { color: var(--red); }
@media (max-width: 480px) {
  .trades { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .65rem; }
  .trade { padding: .95rem .8rem .9rem; gap: .6rem; }
  .tart { width: 2.6rem; height: 2.6rem; }
  .ticon { width: 30px; height: 30px; }
  .t1 { font-size: .9rem; }
}

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem; counter-reset: s; }
.steps li { display: flex; flex-direction: column; gap: .45rem; padding-top: 1rem; border-top: 3px solid var(--red); }
.steps h2, .steps h3 { font-size: 1.08rem; }
.steps p { color: var(--muted); font-size: .95rem; }
.steps.numbered li { counter-increment: s; }
.steps.numbered li::before {
  content: counter(s, decimal-leading-zero); font-family: "IBM Plex Sans Arabic", monospace;
  font-size: .78rem; letter-spacing: .1em; color: var(--red); font-weight: 600;
}
[dir="rtl"] .steps.numbered li::before { letter-spacing: 0; }

/* ---------- videos ---------- */
/* The film plays here. Until somebody presses play this is a poster and a
   button, which is why the page stays light and why no cookie is set on a
   visitor who never watches. */
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.4rem; }
.vid { display: flex; flex-direction: column; gap: .65rem; }
.vshot {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--rule); background: var(--paper);
  text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s;
}
.vshot:hover, .vshot:focus-visible { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-2px); }
/* hqdefault is 4:3 with letterbox bars baked in; cropping to the middle gives
   back the 16:9 frame without the black edges. */
.vposter { width: 100%; height: 100%; object-fit: cover; display: block;
           transition: transform .3s, filter .16s; filter: saturate(.92); }
.vshot:hover .vposter { transform: scale(1.03); filter: none; }
.play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%); /* RTL-safe: the box is square and centred */
  width: 3.6rem; height: 3.6rem; border-radius: 999px; background: var(--red); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 20px -6px rgba(0,0,0,.5);
  transition: background .16s, transform .16s;
}
[dir="rtl"] .play { transform: translate(50%, -50%); }
.vshot:hover .play { background: var(--red-deep); transform: translate(-50%, -50%) scale(1.08); }
[dir="rtl"] .vshot:hover .play { transform: translate(50%, -50%) scale(1.08); }
.play svg { width: 1.15rem; height: 1.15rem; margin-inline-start: .15rem; }
[dir="rtl"] .play svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: .15rem; }
/* The player takes the poster's place, at the same size, so nothing jumps. */
.vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; background: #000; }
.vt { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem; }
[dir="rtl"] .vt { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; }
.vm { font-size: .87rem; color: var(--faint); }

/* ---------- countries ---------- */
/* The map says where at a glance; the names stay underneath, because a map
   alone is invisible to a screen reader, unreadable on a phone at this size,
   and worth nothing to a search engine. Inlined into the page rather than
   loaded as an image: an <img> cannot take its fill from these tokens, so it
   could neither follow the brand red nor invert for dark mode. */
.map-wrap { margin-bottom: 1.4rem; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--paper); overflow: hidden; }
.memap { display: block; width: 100%; max-height: 26rem; margin-inline: auto; }
.memap .sea { fill: var(--paper); }
.memap path[data-cc] { fill: var(--rule); stroke: var(--paper); stroke-width: 1.1;
  vector-effect: non-scaling-stroke; transition: fill .2s; }
/* Set from the live country list by site.js, so the map cannot drift from the
   platform the way the old site's hard-coded list did. */
.memap path.is-served { fill: var(--red); }
.memap .pin { fill: none; stroke: var(--red); stroke-width: 3; vector-effect: non-scaling-stroke;
  opacity: 0; transition: opacity .2s; }
/* Bahrain is about thirteen pixels wide beside Saudi Arabia at this scale, so
   the ring is how anyone finds it. Shown only when Bahrain is actually served. */
.memap .pin.is-served { opacity: 1; }
@media (max-width: 640px) { .memap { max-height: 19rem; } }

.countries { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.country { background: var(--ground); padding: 1.3rem 1.2rem;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem; }
[dir="rtl"] .country { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; }

/* ---------- stores ---------- */
.store-cols { display: flex; flex-direction: column; gap: 1.4rem; }
.store-h { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
           font-weight: 600; margin: 0 0 .6rem; font-family: inherit; }
[dir="rtl"] .store-h { letter-spacing: 0; }
.stores { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.store { display: inline-block; line-height: 0; transition: opacity .14s, transform .14s; }
.store img { height: 42px; width: auto; }
.store:hover { opacity: .85; transform: translateY(-1px); }
@media (prefers-color-scheme: dark) { .store img { filter: invert(1); } }
.store-soon { font-size: .87rem; color: var(--faint); border: 1px dashed var(--rule);
              border-radius: 4px; padding: .6rem .9rem; }
.cta-block { margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }

/* ---------- article pages ---------- */
.page-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; max-width: 54ch; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.07; }
.lede { color: var(--muted); font-size: 1.08rem; }
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 1rem; }
.prose h2, .prose h3 { font-size: 1.12rem; margin-top: .7rem; }
.prose p { color: var(--muted); }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose.legal { font-size: .96rem; }
.prose.legal h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-bottom: .4rem; }
.prose.legal ul, .prose.legal ol { color: var(--muted); padding-inline-start: 1.4rem;
  display: flex; flex-direction: column; gap: .45rem; }
.muted { color: var(--muted); font-size: .94rem; }
.aside { margin-top: 1.6rem; font-size: .88rem; color: var(--faint);
         border-inline-start: 3px solid var(--rule); padding-inline-start: .9rem; }

.qa { display: flex; flex-direction: column; gap: 1px; background: var(--rule);
      border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; max-width: 68ch; }
.qa-item { background: var(--ground); padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.qa .q { font-size: 1.02rem; }
.qa .a { color: var(--muted); font-size: .96rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; max-width: 60ch; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; color: var(--muted); }
.tick { color: var(--red); font-weight: 700; }

.contact-card { border: 1px solid var(--rule); border-radius: 4px; padding: 1.6rem 1.7rem;
  background: var(--paper); display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; }
.wa, .btn { display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start;
  background: var(--red); color: #fff; text-decoration: none; font-weight: 600;
  padding: .8rem 1.35rem; border-radius: 4px; transition: background .14s; }
.wa:hover, .btn:hover { background: var(--red-deep); }

/* ---------- footer ---------- */
.site-foot { background: var(--paper); padding-block: 2.75rem 2rem; border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.8rem; }
.foot-h { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  font-weight: 600; margin: 0 0 .6rem; font-family: inherit; }
[dir="rtl"] .foot-h { letter-spacing: 0; }
.site-foot a, .site-foot p { color: var(--muted); font-size: .94rem; text-decoration: none;
  display: block; margin-bottom: .3rem; }
.site-foot a:hover { color: var(--red); }
.foot-legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  color: var(--faint); font-size: .84rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }