/* ==========================================================================
   Right-to-left overrides
   Loaded only when the page is rendered in a right-to-left language.

   The layout itself needs almost nothing: the stylesheet was written with
   logical properties (inset-inline, margin-inline, padding-inline), so the
   grid, spacing and alignment flip on their own. What remains is the handful
   of genuinely directional things — the skewed brand blades, the arrow icons,
   the gradients, and the typography of a different script.
   ========================================================================== */

/* ------------------------------------------------------------ Typography */
body{
  font-family:'IBM Plex Sans Arabic',Figtree,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.75;
}
h1,h2,h3,h4,h5{letter-spacing:0;line-height:1.3}
h1{line-height:1.25}
.eyebrow{letter-spacing:.08em}
.btn,.link-more{letter-spacing:0}

/* Arabic has no case, so the uppercase transforms do nothing useful. */
.eyebrow,.pcard__tag,.media-caption,.hero__words{text-transform:none}

/* ------------------------------------------------- Directional graphics */
/* The blades lean the other way so they still sweep away from the copy. */
.diag span{transform:skewX(26deg)}

/* Gradients are physical: mirror the scrims that fade across the page. */
.hero--home .hero__scrim{
  background:linear-gradient(270deg,#fff 0 38%,rgba(255,255,255,.92) 47%,rgba(255,255,255,0) 66%);
}
.hero--about .hero__scrim{
  background:linear-gradient(270deg,var(--navy-900) 0 32%,rgba(1,26,45,.82) 48%,rgba(1,26,45,.25) 72%);
}
.hero--services .hero__scrim{
  background:linear-gradient(270deg,var(--bg-soft) 0 40%,rgba(249,249,249,.9) 50%,rgba(249,249,249,0) 68%);
}
.hero--projects .hero__scrim{
  background:linear-gradient(270deg,var(--navy-900) 0 30%,rgba(1,26,45,.8) 48%,rgba(1,26,45,.2) 76%);
}
.hero--detail .hero__scrim{
  background:linear-gradient(270deg,var(--navy-900) 0 22%,rgba(1,26,45,.78) 46%,rgba(1,26,45,.3) 80%);
}
.hero--article .hero__scrim{
  background:linear-gradient(270deg,var(--navy-900) 0 26%,rgba(1,26,45,.85) 50%,rgba(1,26,45,.42) 82%);
}
.cta__scrim{
  background:linear-gradient(270deg,var(--navy-900) 0 36%,rgba(1,26,45,.8) 60%,rgba(1,26,45,.45) 100%);
}
.featured-band::after{
  background:linear-gradient(270deg,var(--navy-900) 0 36%,rgba(1,26,45,.55) 56%,rgba(1,26,45,.1) 78%);
}
.why-band__scrim{
  background:linear-gradient(270deg,var(--navy-900) 0 40%,rgba(1,26,45,.9) 56%,rgba(1,26,45,.62) 100%);
}
.objectives::after{
  background:linear-gradient(270deg,var(--navy-900) 0 44%,rgba(1,26,45,.5) 62%,rgba(1,26,45,0) 80%);
}
.tile::after{background:linear-gradient(180deg,rgba(1,26,45,0) 38%,rgba(1,26,45,.9) 100%)}

/* Photo halves sit on the other side. */
.hero--home .hero__media,
.hero--about .hero__media,
.hero--services .hero__media,
.hero--projects .hero__media{inset-inline-start:auto;inset-inline-end:0}
.hero--home .hero__media{width:66%}
.hero--about .hero__media{width:66%}
.hero--services .hero__media{width:58%}
.hero--projects .hero__media{width:70%}
.featured-band__media{inset-inline-start:0;inset-inline-end:0;width:62%;margin-inline-start:auto}
.why-band__media{inset-inline-start:0;inset-inline-end:0;width:60%;margin-inline-start:auto}
.objectives__media{inset-inline-start:0;inset-inline-end:0;width:54%;margin-inline-start:auto}

/* ------------------------------------------------------- Arrow glyphs -- */
/* Every arrow points the other way; flipping the glyph keeps "forward"
   meaning forward. The menu, check and chevron-down icons must not flip. */
.btn svg,
.link-more svg,
.arrow-btn svg,
.process__arrow svg,
.gal-nav svg,
.pager svg,
.crumbs svg,
.slider-dots button svg{transform:scaleX(-1)}
.navtoggle svg,
.lang svg,
.card__list svg,
.field--search svg{transform:none}
.link-more:hover svg{transform:scaleX(-1) translateX(4px)}

/* --------------------------------------------------- Corner ornaments -- */
/* The orange notch on the key-info panel and the service cards. */
.keyinfo::after{
  inset-inline-end:auto;inset-inline-start:0;
  border-width:0 0 34px 34px;
  border-color:transparent transparent transparent var(--orange);
}
.svc-card__media::after{
  inset-inline-start:auto;inset-inline-end:0;
  border-width:0 44px 44px 0;
  border-color:transparent var(--orange) transparent transparent;
}

/* ------------------------------------------------------------- Details - */
.dot-list li,.card__list li{text-align:start}
.media-caption,.hero__words{line-height:2.2}
.timeline__node::before{inset-inline-start:auto;inset-inline-end:0}
.quote__mark{transform:scaleX(-1);display:inline-block}
.field select{background-position:left 12px center}
.field--search input{padding-inline-start:13px;padding-inline-end:38px}

/* ------------------------------------------------- Mixed-script text -- */
/* Until every field has an Arabic translation, English copy still appears
   inside a right-to-left page. `plaintext` lets each paragraph take its
   direction from its own first strong character, so Latin sentences keep
   their punctuation in the right place instead of wrapping it to the left. */
h1, h2, h3, h4, h5,
p, li, blockquote, figcaption,
.eyebrow, .btn, .link-more, .lead,
.stats__item b, .stats__item span,
.statchip b, .statchip span,
.pcard__tag, .media-caption, .hero__words,
.timeline__node b, .process__step b,
.svc-card__num, .article__body{unicode-bidi:plaintext}