/* ══ العربية — Arabic (RTL) ═════════════════════════════════════
   Generated by _src/mirror_rtl.py, then followed by a handwritten tail.
   Do not edit the generated half; re-run the script instead.          */

/* ── typography ───────────────────────────────────────────────── */

/* 29LT Bukra — the client's Arabic face. Supplied as OTF and converted to
   WOFF2; it is declared here rather than in fonts.css so only the Arabic
   page ever downloads it. The four masters are mapped onto the weights the
   design already uses, so nothing has to be re-tagged in the markup. */
@font-face {
  font-family: 'Bukra';
  src: url('../assets/fonts/Bukra-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bukra';
  src: url('../assets/fonts/Bukra-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bukra';
  src: url('../assets/fonts/Bukra-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bukra';
  src: url('../assets/fonts/Bukra-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Conthrax has no Arabic glyphs; Bukra carries both scripts, so headings and
   body share one family and Latin fragments inside Arabic copy (YCSF, EPC,
   SCADA) stay in the same voice. Cairo stays behind it only as a stand-in
   while Bukra loads on a cold cache. */
:root {
  --f-display: 'Bukra', 'Cairo', 'Noto Naskh Arabic', system-ui, sans-serif;
  --f-body:    'Bukra', 'Cairo', 'Noto Naskh Arabic', system-ui, sans-serif;
  --f-alt:     'Bukra', 'Cairo', 'Noto Naskh Arabic', system-ui, sans-serif;
}

/* uppercase and wide tracking are Latin devices — both are meaningless on
   Arabic and tracking actively breaks the joins between letters */
[dir="rtl"] .h-section,
[dir="rtl"] .hero__title,
[dir="rtl"] .eyebrow,
[dir="rtl"] .zone__t,
[dir="rtl"] .feat__title,
[dir="rtl"] .ftr__head,
[dir="rtl"] .obj__t,
[dir="rtl"] .pillar-cap h3,
[dir="rtl"] .spk__name,
[dir="rtl"] .cd__label,
[dir="rtl"] .nums__cap,
[dir="rtl"] .aud-cap,
[dir="rtl"] .hall__cap {
  text-transform: none;
  letter-spacing: 0;
}
[dir="rtl"] body { line-height: 1.7; }
[dir="rtl"] p, [dir="rtl"] li { line-height: 1.9; }

/* ── generated mirror ─────────────────────────────────────────── */


[dir="rtl"] .theme-toggle {
  right: auto;
  left: clamp(14px, 1.8vw, 26px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .32);
}
[dir="rtl"] html[data-theme="light"] .theme-toggle {
  box-shadow: 0 6px 20px rgba(31, 77, 58, .16);
}
[dir="rtl"] html[data-theme="light"] .band-dark {
  box-shadow: 0 0 0 1px rgba(22, 38, 29, .06);
}
[dir="rtl"] html[data-theme="light"] .band-dark .ftr__map {
  box-shadow: none;
}
[dir="rtl"] html[data-theme="light"] {
  box-shadow: var(--card-shadow);
  box-shadow: var(--card-shadow);
  box-shadow: var(--card-shadow);
  box-shadow: var(--card-shadow);
}
[dir="rtl"] html[data-theme="light"] .band-dark .zone, [dir="rtl"] html[data-theme="light"] .band-dark .nums__cell, [dir="rtl"] html[data-theme="light"] .band-dark .aud-item, [dir="rtl"] html[data-theme="light"] .band-dark .goal, [dir="rtl"] html[data-theme="light"] .band-dark .pat-card {
  box-shadow: none;
}
[dir="rtl"] .hero__bg {
  inset: 0 0 auto 0;
}
[dir="rtl"] .hero__yasref {
  right: auto;
  left: calc(-1 * min(48px, var(--gutter) * .45));
}
[dir="rtl"] .hero__lockup {
  left: auto;
  right: 0;
}
[dir="rtl"] .hero__title {
  left: auto;
  right: 0;
  text-shadow: 0 2px 18px var(--shadow);
}
[dir="rtl"] .hero__meta {
  left: auto;
  right: 6px;
}
[dir="rtl"] .hero__cta {
  right: auto;
  left: 4px;
}
[dir="rtl"] .btn {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .48), 0 2px 6px rgba(0, 0, 0, .34);
}
[dir="rtl"] .pat-card__portrait {
  left: auto;
  right: -7.15%;
}
[dir="rtl"] .pat-card__copy {
  left: auto;
  right: 35.6%;
}
[dir="rtl"] .nums__cell + .nums__cell::before {
  left: auto;
  right: -0.5px;
}
[dir="rtl"] .pillar {
  left: auto;
  right: 50%;
  margin-left: 0;
  margin-right: calc(var(--pcard) / -2);
}
[dir="rtl"] .pillar__tab {
  left: auto;
  right: 50%;
  margin-left: 0;
  margin-right: -44.1px;
}
[dir="rtl"] .pillar.is-centre {
  box-shadow: 0 22px 55px var(--shadow-strong);
}
[dir="rtl"] .pillar.is-centre .pillar__tab {
  box-shadow: 0 0 12px 2px rgba(243, 238, 226, .28);
}
[dir="rtl"] .pillars__arrow--prev {
  left: auto;
  right: -29.7px;
}
[dir="rtl"] .pillars__arrow--next {
  right: auto;
  left: -29.7px;
}
[dir="rtl"] .pillar-cap {
  inset: 0 0 auto 0;
}
[dir="rtl"] .goal__n {
  float: right;
}
[dir="rtl"] .goal__t {
  margin: 2.9px 87.3px 0 0;
}
[dir="rtl"] .hall::before {
  left: auto;
  right: 50%;
  margin-left: 0;
  margin-right: -595px;
}
[dir="rtl"] .zone {
  padding: 70px 21.7px 26px 22.4px;
}
[dir="rtl"] .zone__head {
  left: auto;
  right: 0;
  border-radius: 10px 10px 0 0;
  padding-left: 0;
  padding-right: 21.8px;
}
[dir="rtl"] .zone__head span {
  margin-left: 0;
  margin-right: 18.3px;
}
[dir="rtl"] .spk--1 .spk__frame img {
  left: auto;
  right: -18.86%;
}
[dir="rtl"] .spk--2 .spk__frame img {
  left: auto;
  right: -40.79%;
}
[dir="rtl"] .spk--3 .spk__frame img {
  left: auto;
  right: -17.11%;
}
[dir="rtl"] .spk--4 .spk__frame img {
  left: auto;
  right: -16%;
}
[dir="rtl"] .spk__arrow {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
}
[dir="rtl"] .spk__arrow--prev {
  left: auto;
  right: calc(-1 * (clamp(46px, 3.6vw, 58px) + 16px));
}
[dir="rtl"] .spk__arrow--next {
  right: auto;
  left: calc(-1 * (clamp(46px, 3.6vw, 58px) + 16px));
}
[dir="rtl"] .ftr__col--b::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .ftr__col--b::after {
  right: auto;
  left: -2px;
}
[dir="rtl"] .ftr__col--a {
  padding-left: 0;
  padding-right: 0;
}
[dir="rtl"] .ftr__col--links {
  padding-left: 0;
  padding-right: clamp(24px, 4.5%, 46px);
}
[dir="rtl"] .ftr__col--links::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .ftr__col--b {
  padding-left: 0;
  padding-right: clamp(24px, 4.5%, 46px);
}
[dir="rtl"] .ftr__col--c {
  padding-left: 0;
  padding-right: clamp(24px, 4.5%, 46px);
}
[dir="rtl"] .ftr__col--c::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .ftr__head--contact {
  margin-left: 0;
  margin-right: 0;
}
[dir="rtl"] .ftr__head--contact .ftr__ico {
  margin-right: 0;
  margin-left: 19px;
}
[dir="rtl"] .ftr__head--links {
  margin-left: 0;
  margin-right: 0;
}
[dir="rtl"] .ftr__head--links .ftr__ico {
  margin-right: 0;
  margin-left: 17.22px;
}
[dir="rtl"] .ftr__col--b .ftr__ico {
  margin-right: 0;
  margin-left: 11.07px;
}
[dir="rtl"] .ftr__col--c .ftr__ico {
  margin-right: 0;
  margin-left: 11.42px;
}
[dir="rtl"] .ftr__table th + th, [dir="rtl"] .ftr__table td + td {
  border-right: 1px solid #152836;
}
[dir="rtl"] .feats__arrow {
  box-shadow: 0 6px 18px var(--shadow);
}
[dir="rtl"] .feats__arrow--prev {
  left: auto;
  right: calc(-1 * (clamp(44px, 3.4vw, 54px) + 14px));
}
[dir="rtl"] .feats__arrow--next {
  right: auto;
  left: calc(-1 * (clamp(44px, 3.4vw, 54px) + 14px));
}
[dir="rtl"] .ftr__map-link:hover .ftr__map {
  box-shadow: 0 12px 28px var(--shadow-strong);
}
[dir="rtl"] .fld input:focus-visible, [dir="rtl"] .fld select:focus-visible, [dir="rtl"] .fld textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(45, 161, 94, .22);
}
[dir="rtl"] .lang {
  left: auto;
  right: 0;
}
[dir="rtl"] .ay {
  left: auto;
  right: 50%;
  margin-left: 0;
  margin-right: calc(var(--ay-w) / -2);
}
[dir="rtl"] .ay__tab {
  left: auto;
  right: 50%;
  margin-left: 0;
  margin-right: -31px;
}
[dir="rtl"] .ay__stack::before {
  inset: 4% 12% 4% -6%;
}
[dir="rtl"] .ay__pic {
  box-shadow: 0 8px 20px rgba(8, 18, 12, .38);
}
[dir="rtl"] .ay__meta {
  padding: 4px 12px 2px 0;
}
[dir="rtl"] .ay__arrow--prev {
  left: auto;
  right: -6px;
}
[dir="rtl"] .ay__arrow--next {
  right: auto;
  left: -6px;
}


@media (min-width: 1100px) {
  [dir="rtl"] html[data-theme="light"] .hero__lockup {
    left: auto;
    right: 0;
  }
  [dir="rtl"] html[data-theme="light"] .countdown {
    justify-content: flex-end;
  }
  [dir="rtl"] html[data-theme="light"] .cd__label {
    text-shadow: 0 1px 6px rgba(9, 16, 12, .75);
  }
}


@media (max-width: 599px) {
  [dir="rtl"] .pillar {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  [dir="rtl"] .pillar__tab {
    margin-left: 0;
    margin-right: -31px;
  }
  [dir="rtl"] .pillars__arrow--prev {
    left: auto;
    right: 20px;
  }
  [dir="rtl"] .obj__grid {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .goal__t {
    margin-left: 0;
    margin-right: 64px;
  }
  [dir="rtl"] .ftr__col--a, [dir="rtl"] .ftr__col--b, [dir="rtl"] .ftr__col--c {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .ftr__head--contact {
    margin-left: 0;
    margin-right: 0;
  }
  [dir="rtl"] .ftr__head--links {
    margin-left: 0;
    margin-right: 0;
  }
  [dir="rtl"] .ftr__head--times {
    margin-left: 0;
    margin-right: 0;
  }
  [dir="rtl"] .ay__arrow--prev {
    left: auto;
    right: -14px;
  }
  [dir="rtl"] .ay__arrow--next {
    right: auto;
    left: -14px;
  }
  [dir="rtl"] .zone {
    padding-left: 0;
    padding-right: 16px;
    padding-right: 0;
    padding-left: 16px;
  }
}


@media (max-width: 1099px) {
  [dir="rtl"] .hero__yasref {
    right: auto;
    left: 0;
  }
  [dir="rtl"] .ftr__head--contact, [dir="rtl"] .ftr__head--links {
    margin-left: 0;
    margin-right: 0;
  }
  [dir="rtl"] .ftr__col--links, [dir="rtl"] .ftr__col--c {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] html[data-theme="light"] .cd__label {
    text-shadow: 0 1px 6px rgba(9, 16, 12, .75);
  }
  [dir="rtl"] .hero__meta {
    left: auto;
    right: 0;
  }
}


@media (min-width: 600px) and (max-width: 1099px) {
  [dir="rtl"] .ftr__col--a {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .ftr__col--links {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .ftr__col--c {
    padding-left: 0;
    padding-right: clamp(24px, 4vw, 56px);
  }
}



/* ── handwritten tail ─────────────────────────────────────────────
   Things the mirror cannot know about. */

/* The features and speakers tracks lay out right-to-left with the page, so
   the first card sits at the right edge and the run advances leftwards. The
   JS multiplies every translateX by its DIR sign to match, so the arrows,
   the layout and the motion all agree. Only the sponsor wall stays LTR —
   see below. */
[dir="rtl"] .spons__rail,
[dir="rtl"] .spons__track { direction: ltr; }

[dir="rtl"] .spons__cell { direction: rtl; }

/* The coverflow is positioned, not laid out: the side slides are placed by a
   translate, which no amount of `direction` will mirror. Swapping the two
   transforms puts the previous slide on the right and the next on the left,
   so the run reads the same way as the page. */
[dir="rtl"] .pillar.is-prev { transform: translate(var(--ppeek), -5.3px) scale(.693); }
[dir="rtl"] .pillar.is-next { transform: translate(calc(var(--ppeek) * -1), -5.3px) scale(.693); }

/* Around Yanbu is the same kind of coverflow, positioned by a transform that
   no `direction` will mirror — the previous card belongs on the right of the
   run in Arabic, and the arrows swap with it. */
[dir="rtl"] .ay.is-prev { transform: translateX(var(--ay-peek)) scale(.78); }
[dir="rtl"] .ay.is-next { transform: translateX(calc(var(--ay-peek) * -1)) scale(.78); }
[dir="rtl"] .ay__arrow--prev .i { --m: url('../assets/icons/spk-arrow-right.svg'); }
[dir="rtl"] .ay__arrow--next .i { --m: url('../assets/icons/spk-arrow-left.svg'); }
[dir="rtl"] .ay__cta .i--plane { transform: scaleX(-1); }

/* The countdown needs NO flex override. A flex row already lays out
   right-to-left under dir="rtl", so row-reverse flipped it a second time and
   put "Days" back on the left. Left alone, the run reads أيام first, on the
   right, like the rest of the line. */

/* Latin runs inside Arabic sentences — YCSF, EPC, MCC, UPS, BESS, SCADA —
   need an explicit embedding or the trailing punctuation jumps sides */
[dir="rtl"] .lat { unicode-bidi: isolate; }

/* Same problem, and the one place it is actually visible: "130+" and "7,000+"
   are a Latin number followed by a bidi-NEUTRAL plus. At the end of an RTL
   line the algorithm resolves that plus to the paragraph direction and paints
   it on the LEFT — "+130". Isolating each figure as its own LTR run keeps the
   sign where it belongs, on the right, without touching the markup the
   count-up script writes into. */
[dir="rtl"] .nums__val,
[dir="rtl"] .stat-val { direction: ltr; unicode-bidi: isolate; }

/* The figures keep the leading css/sections.css gives them. .stat-num is a
   <p>, so the blanket 1.9 leading a few rules up applied to it — and it is
   the halo image's positioned ancestor, so its line box grew from 48px to
   82px and dropped the numeral 18px inside it while the halo stayed put.
   That is the ghost-behind-the-number this section had in Arabic. */
[dir="rtl"] .nums__fig,
[dir="rtl"] .nums__val,
[dir="rtl"] .stat-num,
[dir="rtl"] .stat-fig,
[dir="rtl"] .stat-val { line-height: 1.1; }

/* the switch sits opposite the host mark, so it moves to the left edge */
[dir="rtl"] .lang { left: auto; right: 0; }

/* The paper plane on the Around Yanbu buttons flies toward the reader's
   next word, so it turns around with the page. Unlike the carousel arrows
   this one does take a transform — .i is inline-block, and those arrows
   only resisted because the selector was misspelt, not because of the mask. */
[dir="rtl"] .ay__cta .i--plane { transform: scaleX(-1); }

/* The sponsor wall reads the same way in every edition — the marks are brand
   artwork in a fixed order, not a sentence — so the rail keeps running from
   the left and is not reversed with the page. */
[dir="rtl"] .spons__rail,
[dir="rtl"] .spons__track,
[dir="rtl"] .spons__cell { direction: ltr; }


/* The buttons swapped sides with the mirror, so their glyphs swap too —
   "previous" now sits on the right and has to point right. The mask is
   exchanged for the opposite glyph rather than scaleX(-1): a transform does
   not take on these mask-painted <i> elements, and swapping the artwork
   gives a true mirrored triangle with no scaling artefacts.
   Note the class is feats__arrow, plural. */
[dir="rtl"] .spk__arrow--prev .i,
[dir="rtl"] .feats__arrow--prev .i { --m: url('../assets/icons/tri-right.svg'); }
[dir="rtl"] .spk__arrow--next .i,
[dir="rtl"] .feats__arrow--next .i { --m: url('../assets/icons/tri-left.svg'); }
[dir="rtl"] .pillars__arrow--prev .i { --m: url('../assets/icons/arrow-right.svg'); }
[dir="rtl"] .pillars__arrow--next .i { --m: url('../assets/icons/arrow-left.svg'); }

/* the sponsor rail travels the other way in Arabic */
[dir="rtl"] .spons__track { animation-direction: reverse; }

/* Arabic sits smaller on the line than Latin at the same size. The running
   copy is raised at the token rather than block by block, so the patronage
   card, pillar captions, objectives, zone bodies, stat captions and the
   footer all move together and the ramp keeps its proportions. */
[dir="rtl"] {
  --t-lede:  clamp(17px, 1.42vw, 23px);
  --t-body:  clamp(16px, 1.10vw, 19px);
  --t-cap:   clamp(16px, 1.18vw, 18px);
  --t-small: clamp(15px, 1.00vw, 17px);
  --t-micro: clamp(13px, 0.94vw, 15px);
  --t-sub:   clamp(19px, 1.52vw, 23px);
  --t-label: clamp(19px, 1.62vw, 24px);
}

/* The patronage card is an absolutely-composed poster: the portrait breaks
   72px out of the frame, and the frame's corners are chamfered top-right and
   bottom-left. The mirror flipped the portrait and copy to the other sides
   but a clip-path polygon is opaque to it, so the cut corners stayed put and
   the portrait crossed the border on a square corner. Both polygons are
   mirrored here by hand: every x becomes 100% - x. */
[dir="rtl"] .pat-card {
  --chamfer: polygon(100% 0, 20.4px 0, 0 20.4px, 0 100%,
                     calc(100% - 20.4px) 100%, 100% calc(100% - 20.45px));
}
[dir="rtl"] .pat-card__pcrop {
  clip-path: polygon(100% 0, 0 0, 0 100%,
                     calc(100% - 20.4px) 100%, 100% calc(100% - 20.45px));
}
/* the border is an inline SVG path, so no stylesheet rewrite can move its
   corners — flip the whole drawing instead (an <svg> takes a transform,
   unlike the mask-painted arrow glyphs) */
[dir="rtl"] .pat-card__frame { transform: scaleX(-1); }
/* and the glow that pools behind the portrait follows it across */
[dir="rtl"] .pat-card__glow {
  background: radial-gradient(ellipse 337.09px 266.24px
              at calc(100% - 576.59px) 282.11px,
              rgba(26, 107, 60, 1) 0%, rgba(26, 107, 60, 0) 100%);
}

/* The portrait-era patronage rules that lived here — .pat-role, .pat-name and
   the desktop block that squeezed the copy into the artboard's 891.5/255
   card — are gone with the layout they served. The card now holds the
   "under the umbrella of" slide, whose type is set in css/sections.css and
   scales off the Arabic --t-lede without needing an override. */

/* the display sizes come up a step too */
[dir="rtl"] .h-section    { font-size: clamp(30px, 4.4vw, 66px); }
[dir="rtl"] .pillar-cap h3 { font-size: calc(var(--t-title) * 1.18); }
[dir="rtl"] .eyebrow      { font-size: clamp(21px, 2.3vw, 34px); }
[dir="rtl"] .zone__t      { font-size: calc(var(--t-cap) * 1.12); }
[dir="rtl"] .obj__t       { font-size: calc(var(--t-title) * 1.1); }
[dir="rtl"] .feat__title  { font-size: calc(var(--t-cap) * 1.12); }

/* The plate is mirrored with the layout. The photograph's dark quarter is on
   the left and the neon tower on the right; with the copy now running from
   the right, the lockup and headline would sit on the brightest part of the
   frame. Flipping the whole .hero__bg stack together keeps the glow layers
   registered to the tower. */
[dir="rtl"] .hero__bg img { transform: scaleX(-1); }