/* Arabic pages: right to left, Arabic faces behind the Latin ones */
/* Alexandria's letters stand about a third taller than Bricolage's at the same size, so headlines looked bigger
   than the English ones. This copy of it is drawn smaller (size-adjust); Latin words keep Bricolage at full size. */
@font-face{font-family:"Alexandria Fit";font-style:normal;font-weight:400 800;font-display:swap;size-adjust:82%;
  src:url(https://fonts.gstatic.com/s/alexandria/v6/UMBXrPdDqW66y0Y2usFeaijdA5E64BdCIg.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
:root{
  --display:"Bricolage Grotesque","Alexandria Fit","Alexandria",system-ui,sans-serif;
  --body:"Instrument Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --serif:"Instrument Serif","Aref Ruqaa",Georgia,serif;
}
/* Arabic letters join, so no tracking; and they need taller lines than Latin display type */
*,*::before,*::after{letter-spacing:0!important}
body{line-height:1.75}
h1,h2,h3,h4{line-height:1.1}
em,i{font-style:normal}
p,li,dd,dt,label,input,textarea,button,.btn{font-family:var(--body)}

/* arrows point the way you read */
.arr,.arr--down{scale:-1 1}
.arr--down{scale:1}

/* the googly-eyed "ooh!" is a Latin word: keep it reading left to right */
.ooh,.line--ooh,.intro__word,.badge__eyes{direction:ltr;unicode-bidi:isolate}
.line--ooh{margin-left:0;margin-right:-.03em}

/* masked headline lines: room for Arabic ascenders, dots and descenders */
.hero__title,.khead__title,.whead__title,.shead__title,.jhead__title,.chead__title{line-height:1.02}
.hero__title .line,.wline{padding-block:.12em .5em;margin-block:-.12em -.5em}
/* start each line further down, so the deeper padding does not show it before it rises */
.hero__title .line>span{transform:translateY(160%) rotate(-4deg);transform-origin:100% 100%}
.wline>span{transform:translateY(160%) rotate(-5deg);transform-origin:100% 100%}
.is-loaded .hero__title .line>span,.is-loaded .wline>span{transform:none}
.line--ooh{text-align:right}

/* stickers sit on the mirrored side */
.sticker{left:auto;right:var(--x)}
@media (max-width:900px){
  /* the badge sits where it does in English, on the mirrored side: beside the headline, not below it */
  .sticker--badge{right:auto;left:var(--gutter);top:174px;bottom:auto}
  .whead__badge{top:112px}
  .jhead__badge{top:118px}
  .sticker--yellow{left:auto;right:var(--gutter)}
  .sticker--paper{right:auto;left:calc(var(--gutter) + 8px)}
}

/* Arabic reads smaller than Latin at the same size, and needs looser lines */
body{font-size:clamp(17px,1.12vw,19px)}
html[dir="rtl"] p,html[dir="rtl"] li,html[dir="rtl"] dd{line-height:1.75}
.story__text{line-height:1.6}
.voice blockquote p{line-height:1.8}

/* the footer wordmark is the logo: it stays Latin, left to right */
.footer__mark{direction:ltr}

/* nav: the gap sits between the clock and the links, as in English */
.nav__links{margin-left:0;margin-right:auto}
.nav__pill{padding-inline:16px 6px}
@media (max-width:900px){
  .lang{margin-left:8px;margin-right:auto}
}

/* folded service tabs: whole words, right aligned */
.svc__head{text-align:right}
.svc__no{left:auto;right:22px}
.svc__name{left:18px;right:22px;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual;font-size:clamp(.98rem,1.2vw,1.25rem);line-height:1.35}
.form__done{text-align:right}

/* the picked letters spell a Latin word */
.receipt__word{direction:ltr;text-align:right}

/* every big title gets Arabic line height, whatever its own class says */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{line-height:1.1}
html[dir="rtl"] .hero__title,html[dir="rtl"] .khead__title,html[dir="rtl"] .whead__title,html[dir="rtl"] .shead__title,html[dir="rtl"] .jhead__title,html[dir="rtl"] .chead__title{line-height:1.02}
/* the Ruqaa accent words: bolder, a touch larger, to stand beside the display face */
html[dir="rtl"] h1 em,html[dir="rtl"] h2 em,html[dir="rtl"] h3 em{font-weight:700;font-size:1.06em}
.team h3{overflow-wrap:break-word}

/* round badges: right-to-left text on a ring is anchored at its end, or it runs off the path */
svg text{text-anchor:end}

/* logo strips and walls scroll the same way as in English, starting from the left edge */
.logos,.logos__track,.marquee,.marquee__row,.tape__track{direction:ltr}

/* bullets and numbers sit on the right, where Arabic lines start */
.svc__body li{padding:.55em 1.6em .55em 0}
.chap__list li{padding:.8em 1.7em .8em 0}
.role li{padding:.6em 1.5em .6em 0}
.tips li{padding:16px 2.4em 16px 0}
.svc__body li::before,.chap__list li::before,.role li::before,.tips li::before{left:auto;right:0}

/* moving strips start from the left edge, like in English, so they always fill the width */
.tape,.desk__track,.desk__row{direction:ltr}

/* Arabic has no italic: never let the browser fake a slant on the calligraphic accents */
html[dir="rtl"] *{font-style:normal!important;font-synthesis:none}

/* small notes read better in the text face than in Ruqaa */
.stat__note,.voice__for{font-family:var(--body);font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.6}

/* awards: the source name stays on one line on wide screens */
@media (min-width:901px){
  /* every row is its own grid: fixed shares keep the columns lined up from row to row */
  .awards__list li,.awards__cols{grid-template-columns:4.2em minmax(0,.85fr) minmax(0,1.6fr) 8.6rem}
  .a-what{font-size:.95rem}
}
/* an accent phrase is one gesture: it wraps as a whole, never split across lines */
html[dir="rtl"] h1 em,html[dir="rtl"] h2 em,html[dir="rtl"] h3 em{white-space:nowrap}

/* award rows: the source and its tag both line up from the right */
.awards__cols span:last-child,.a-type{justify-self:start}
.a-what{justify-content:flex-start}

/* stat cards: the round icon sits on the left corner, mirroring English */
.stat__icon{right:auto;left:20px}

/* team cards: the big letter keeps the English left corner, so it tilts inside the card on hover */
.team__letter{text-align:left;direction:ltr}

/* Careers value cards: the illustration keeps its English left-hand placement */
.value__art{direction:ltr}

/* award rows: the source block fills its column, so every icon sits on the same right edge */
.a-what{justify-self:stretch;width:100%}
/* arabic headline sizes (from ar_headline_scale.py) */
html[dir="rtl"] h2{font-size:calc(clamp(2.6rem,6.4vw,6.2rem) * 0.85)}
html[dir="rtl"] .khead__title{font-size:calc(clamp(3.6rem,11vw,11rem) * 0.85)}
html[dir="rtl"] .hero__title .line:not(.line--ooh){font-size:calc(clamp(2.7rem,7.6vw,8.2rem) * 0.85)}
html[dir="rtl"] .line--ooh{font-size:calc(clamp(7.2rem,25vw,24rem) * 0.85)}
html[dir="rtl"] .story__title{font-size:calc(clamp(3.2rem,10vw,10rem) * 0.85)}
html[dir="rtl"] .story__text{font-size:calc(clamp(1.55rem,3.3vw,3rem) * 0.85)}
html[dir="rtl"] .principles__title{font-size:calc(clamp(3rem,8vw,8rem) * 0.85)}
html[dir="rtl"] .pcard__word{font-size:calc(clamp(2.6rem,5.2vw,5.6rem) * 0.85)}
html[dir="rtl"] .card__title{font-size:calc(clamp(1.7rem,2.8vw,2.7rem) * 0.85)}
html[dir="rtl"] .rcard h3{font-size:calc(clamp(1.8rem,2.6vw,2.6rem) * 0.85)}
html[dir="rtl"] .believers__title{font-size:calc(clamp(3rem,8.4vw,8.6rem) * 0.85)}
html[dir="rtl"] .contact__title{font-size:calc(clamp(3rem,7vw,7rem) * 0.85)}
html[dir="rtl"] .ooh--done{font-size:calc(clamp(5rem,9vw,7.5rem) * 0.85)}
html[dir="rtl"] .form__done h3{font-size:calc(clamp(1.8rem,2.6vw,2.4rem) * 0.85)}
html[dir="rtl"] .jhead__title{font-size:calc(clamp(4.4rem,11.4vw,11.5rem) * 0.85)}
html[dir="rtl"] .value h3,html[dir="rtl"] .value .value__h{font-size:calc(clamp(2rem,3.1vw,3.1rem) * 0.85)}
html[dir="rtl"] .team h3{font-size:calc(clamp(1.3rem,1.7vw,1.6rem) * 0.85)}
html[dir="rtl"] .role__title{font-size:calc(clamp(1.8rem,3.2vw,3rem) * 0.85)}
html[dir="rtl"] .apply__title{font-size:calc(clamp(2.6rem,5.4vw,5.4rem) * 0.85)}
html[dir="rtl"] .shead__title{font-size:calc(clamp(4rem,9.6vw,9.2rem) * 0.85)}
html[dir="rtl"] .receipt__word{font-size:calc(clamp(3.4rem,6vw,5.4rem) * 0.85)}
html[dir="rtl"] .step h3{font-size:calc(clamp(1.7rem,2.4vw,2.4rem) * 0.85)}
html[dir="rtl"] .believe__title{font-size:calc(clamp(3.4rem,9vw,9rem) * 0.85)}
html[dir="rtl"] .whead__title{font-size:calc(clamp(5.4rem,15.5vw,16rem) * 0.85)}
html[dir="rtl"] .wcta__title{font-size:calc(clamp(3rem,8vw,8rem) * 0.85)}
html[dir="rtl"] .chead__title{font-size:calc(clamp(3.6rem,12vw,12.5rem) * 0.85)}
html[dir="rtl"] .chead__title--long{font-size:calc(clamp(3rem,8.2vw,8.4rem) * 0.85)}
@media (max-width:900px){
  html[dir="rtl"] .line--ooh{font-size:calc(min(40vw,11rem) * 0.85)}
  html[dir="rtl"] .pcard__word{font-size:calc(clamp(2rem,9.4vw,3.6rem) * 0.85)}
  html[dir="rtl"] .jhead__title{font-size:calc(min(19vw,7.4rem) * 0.85)}
  html[dir="rtl"] .shead__title{font-size:calc(min(18vw,7rem) * 0.85)}
  html[dir="rtl"] .whead__title{font-size:calc(min(26vw,9rem) * 0.85)}
  html[dir="rtl"] .chead__title{font-size:calc(min(17vw,7rem) * 0.85)}
  html[dir="rtl"] .chead__title--long{font-size:calc(min(12vw,5rem) * 0.85)}
}
/* end arabic headline sizes */

/* the "shuffle the cards" hint sits under the cards, which are on the left in Arabic */
.hero__hint{right:auto;left:var(--gutter)}
.hero__hint svg{transform:rotate(-12deg)}
@media (max-width:900px){
  .hero__hint{left:auto}
  /* on phones the buttons stack full width, as the longer English labels do */
  .hero__ctas .btn,.jhead__ctas .btn{flex:1 1 100%;justify-content:center}
  .hero__ctas{align-self:stretch;width:100%}
}

/* award badges on project cards and covers sit in the starting corner, which is the right in Arabic */
.is-grid .proj__award{left:auto;right:14px;transform:rotate(4deg)}
.ccover__award{left:auto;right:clamp(14px,2vw,24px)}