/* Farid Productions - coming soon page
   ---------------------------------------------------------------------------
   Assembled from the live site's stylesheet by .build/build_coming_soon.py,
   which copies each brand rule by selector so the two cannot drift. Tokens are
   the brand guide's own:
     p8  palette    #3A39FF signature blue, #F7F7F9 soft white, #000 black, #F4CF31 accent
      p10 typography Alexandria (Latin and Arabic, one family)
     p9  patterns   01 enlarged logo geometry, 02 repeated curved lines
     p4-6 logo      clear space, approved proportions, no effects on the mark
   Only the weights this page sets are shipped: 400 body, 600 eyebrows and
   buttons, 700 display and figures. The live site also carries 300 and 500.
   These files serve both languages: Alexandria holds the Arabic script as well
   as the Latin, so /ar/ adds no font payload and no second family.
   Muted tones clear WCAG AA on the surface they sit on, not by eye.
   --------------------------------------------------------------------------- */

@font-face{font-family:'Alexandria';src:url('fonts/alex-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:'Alexandria';src:url('fonts/alex-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

@font-face{font-family:'Alexandria';src:url('fonts/alex-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --blue:#3A39FF; --blue-lift:#5B5AFF; --blue-deep:#2A29CC;
  --soft:#F7F7F9; --soft-2:#EFEFF4;
  --ink:#000000; --ink-900:#08080D; --ink-800:#101018; --ink-700:#1A1A24;
  --gold:#F4CF31;
  --grad:linear-gradient(100deg,#3A39FF 0%,#F4CF31 100%);
  --accent:#3A39FF;          /* text accent, lightened on dark - see body */
  --accent-dark:#6E6DFF;
  --line-d:rgba(255,255,255,.13);
  --line-d-2:rgba(255,255,255,.07);
  --line-l:rgba(8,8,13,.13);
  --mute-d:#9A9AAC; --mute-l:#5A5A6B; --blue-mute:#D5D4FF;
  --shell:1320px;
  --gut:clamp(20px,4.4vw,64px);
  --sec-y:clamp(72px,10vw,150px);
  --head:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 24px)}
body{
  font-family:'Alexandria',system-ui,-apple-system,sans-serif;font-weight:400;
  font-size:16px;line-height:1.65;background:var(--ink-900);color:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* The guide's #3A39FF on near-black is 3.05:1, under AA for small text.
     Dark surfaces therefore use a lighter tint of the same 240deg hue. */
  --accent:var(--accent-dark);
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue-lift);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:.9rem 1.3rem;
  background:var(--blue);color:#fff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}

.skip:focus{left:0}

/* ---------- layout primitives ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

.blue{color:var(--accent)}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.8rem;
  font-size:.688rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}

.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.65}
.d1{font-size:clamp(2.55rem,6.6vw,5.2rem);font-weight:700;line-height:1.04;letter-spacing:-.032em}
.lead{font-size:clamp(1.0625rem,1.35vw,1.3rem);line-height:1.62;color:var(--mute-d);max-width:58ch}
p+p{margin-top:1.05em}

/* ---------- reveal on scroll ----------
   The hidden state is scoped to .js, which the document sets before first
   paint. Without scripting the blocks are simply visible, so a failed or
   blocked script can never leave the page blank. */
.js .rv{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}

.js .rv.in{opacity:1;transform:none}

/* ---------- buttons & links ----------
   The wipe is a ::before panel, and the label beside it is a bare text node -
   .btn>* only lifts element children, so at z-index:auto the panel painted
   over the text on hover and the label vanished. isolation:isolate plus
   z-index:-1 puts the panel behind the button's own background and leaves the
   label on top at every point in the transition.

   The label's colour is deliberately not transitioned here. The panel rises
   from the bottom on a fast-out easing and reaches the label within ~40ms, so
   any colour crossfade that straddles that edge paints the label in the
   panel's own colour - white on white - which is the bug again, just shorter.
   Ink is the only tone that reads on both faces at once (3.05:1 on the blue
   still uncovered, 19.98:1 on the white panel), so the flip is instant. */
.btn{display:inline-flex;align-items:center;gap:.7rem;position:relative;overflow:hidden;
  isolation:isolate;
  padding:1rem 1.6rem;border:1px solid var(--blue);background:var(--blue);color:#fff;
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .4s var(--ease)}

.btn:focus-visible{outline:2px solid #fff;outline-offset:2px;
  box-shadow:0 0 0 2px var(--ink-900)}

.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;
  transform:translateY(101%);transition:transform .45s var(--ease)}

.btn:hover{border-color:#fff;color:var(--ink-900)}
.btn:hover::before{transform:translateY(0)}
.btn>*{position:relative;z-index:1}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translate(2px,-2px)}

.btn--sm{padding:.78rem 1.15rem;font-size:.688rem}
/* Inverted, so the label has to go the other way: it starts ink on the white
   button and has to be white on the dark panel, which means it cannot be
   legible until the panel is under it. .038s is where the panel's leading edge
   crosses the label; a search over delay and duration put the dip at 80ms,
   the floor for this design. Dropping the wipe for a hard swap would remove it
   but that is a different button, not a fix. */
.btn--light{background:#fff;border-color:#fff;color:var(--ink-900);
  transition:color .04s var(--ease) .038s,border-color .4s var(--ease)}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:100;
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease)}

.site-head::after{content:"";position:absolute;inset:auto 0 0;height:1px;
  background:var(--line-d);opacity:0;transition:opacity .45s var(--ease)}

.site-head.stuck{background:rgba(8,8,13,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}

.site-head.stuck::after{opacity:1}
.head-in{display:flex;align-items:center;gap:1.6rem;height:var(--head)}
.brand{flex:0 0 auto;display:flex;align-items:center;padding:1rem 0}
.lockup--head{height:clamp(28px,3.3vw,38px);width:auto}

/* ---------- footer ---------- */
.foot{position:relative;overflow:hidden;background:var(--ink-900);
  border-top:1px solid var(--line-d);padding-top:clamp(3.4rem,6vw,5.6rem)}

.foot::before{content:"";position:absolute;right:-10%;bottom:-42%;width:58%;aspect-ratio:1;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODAiIGhlaWdodD0iMjExIiB2aWV3Qm94PSIwIDAgMjAuNyAxNS42Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODcuMzAwMCwtNDYuNDAwMCkiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0gMTA2LjY0NDEgNTIuMzQwOSBDIDEwNi41MTExIDUxLjcyNTkgMTA2LjIxMzEgNTEuMTU1OSAxMDUuODMwMSA1MC42NTg5IE0gMTA1LjgzMDEgNTAuNjU4OSBDIDEwNS40NDAxIDUwLjE1MDkgMTA0LjkzOTEgNDkuNzc3OSAxMDQuNDk2MSA0OS4zMjM5IE0gMTA0LjQ5NjEgNDkuMzIzOSBDIDEwNC4wNjkxIDQ4Ljg4NzkgMTAzLjc1OTEgNDguMjU2OSAxMDQuMTExMSA0Ny42NzM5IE0gMTA0LjExMTEgNDcuNjczOSBDIDEwNC4xMzMxIDQ3LjYzODkgMTA0LjE1NzEgNDcuNTk4OSAxMDQuMTQ2MSA0Ny41NTg5IE0gMTA0LjE0NjEgNDcuNTU4OSBDIDEwNC4xMzIxIDQ3LjUwODkgMTA0LjA2ODEgNDcuNDg5OSAxMDQuMDE5MSA0Ny41MDY5IE0gMTA0LjAxOTEgNDcuNTA2OSBDIDEwMy45NzAxIDQ3LjUyMjkgMTAzLjkzNTEgNDcuNTYzOSAxMDMuOTAyMSA0Ny42MDM5IE0gMTAzLjkwMjEgNDcuNjAzOSBDIDEwMy4wNzgxIDQ4LjYwODkgMTAyLjI0MTEgNDkuODEzOSAxMDIuMjIyMSA1MS4xNjI5IE0gMTAyLjIyMjEgNTEuMTYyOSBDIDEwMi4yMTQxIDUxLjc2NzkgMTAyLjM3NTEgNTIuMzc2OSAxMDIuNzUzMSA1Mi44NTY5IE0gMTAyLjc1MzEgNTIuODU2OSBDIDEwMy4xNDExIDUzLjM0ODkgMTAzLjcwOTEgNTMuNjQ2OSAxMDQuMjM0MSA1My45Njc5IE0gMTA0LjIzNDEgNTMuOTY3OSBDIDEwNC41MTUxIDU0LjEzOTkgMTA0Ljg1NDEgNTQuMzIyOSAxMDUuMDMxMSA1NC42MTE5IE0gMTA1LjAzMTEgNTQuNjExOSBDIDEwNS4xOTIxIDU0Ljg3MjkgMTA1LjE2MTEgNTUuMTgwOSAxMDUuMDY1MSA1NS40NjE5IE0gMTA1LjA2NTEgNTUuNDYxOSBDIDEwNC4xMjQxIDU1LjM0MDkgMTAzLjE5NDEgNTQuOTk3OSAxMDIuNDYzMSA1NC4zODM5IE0gMTAyLjQ2MzEgNTQuMzgzOSBDIDEwMS43NDkxIDUzLjc4NjkgMTAxLjIyNjEgNTIuOTQ2OSAxMDEuMTIxMSA1Mi4wMTE5IE0gMTAxLjEyMTEgNTIuMDExOSBDIDEwMS4wNTgxIDUxLjQ1ODkgMTAxLjEzMjEgNTAuODkwOSAxMDEuMzYzMSA1MC4zODI5IE0gMTAxLjM2MzEgNTAuMzgyOSBDIDEwMS40MTUxIDUwLjI3MDkgMTAxLjI2NTEgNTAuMTc3OSAxMDEuMTk1MSA1MC4yODQ5IE0gMTAxLjE5NTEgNTAuMjg0OSBDIDEwMC44ODQxIDUwLjc1NjkgMTAwLjU3MzEgNTEuMjM0OSAxMDAuMjk5MSA1MS43Mjg5IE0gMTAwLjI5OTEgNTEuNzI4OSBDIDEwMC4wNDExIDUyLjE5MTkgOTkuODI5MSA1Mi42OTE5IDk5Ljc5OTEgNTMuMjI2OSBNIDk5Ljc5OTEgNTMuMjI2OSBDIDk5Ljc3MTEgNTMuNzM3OSA5OS45MTUxIDU0LjI2MTkgMTAwLjIwMTEgNTQuNjg0OSBNIDEwMC4yMDExIDU0LjY4NDkgQyAxMDAuNDkwMSA1NS4xMTM5IDEwMC45MDUxIDU1LjQyNzkgMTAxLjI4MzEgNTUuNzcyOSBNIDEwMS4yODMxIDU1Ljc3MjkgQyAxMDEuNjUwMSA1Ni4xMDc5IDEwMi4wMTkxIDU2LjUyMTkgMTAyLjA5NzEgNTcuMDI3OSBNIDEwMi4wOTcxIDU3LjAyNzkgQyAxMDEuODg1MSA1Ny42MDg5IDEwMS4yNjgxIDU4LjA1ODkgMTAwLjc3MDEgNTguMzgzOSBNIDEwMC43NzAxIDU4LjM4MzkgQyAxMDAuMjIzMSA1OC43NDA5IDk5LjYyMDEgNTkuMDA5OSA5OC45OTMxIDU5LjE4ODkgTSA5OC45OTMxIDU5LjE4ODkgQyA5OC4yODkxIDU5LjM4OTkgOTcuNTUyMSA1OS40Nzc5IDk2LjgyMDEgNTkuNDQ2OSBNIDk2LjgyMDEgNTkuNDQ2OSBDIDk1LjkzODEgNTkuNDA4OSA5NS4wNzIxIDU5LjIwNjkgOTQuMTk1MSA1OS4xMDc5IE0gOTQuMTk1MSA1OS4xMDc5IEMgOTMuNzQ0MSA1OS4wNTU5IDkzLjI2ODEgNTkuMDI0OSA5Mi44MDUxIDU5LjA2NTkgTSA5Mi44MDUxIDU5LjA2NTkgTCA5MS44MDAxIDU4LjExODkgTSA5MS44MDAxIDU4LjExODkgQyA5MS43NTcxIDU4LjA3ODkgOTEuNjkwMSA1OC4wODA5IDkxLjY0OTEgNTguMTIyOSBNIDkxLjY0OTEgNTguMTIyOSBMIDkwLjQ5MTEgNTkuMzUxOSBNIDkwLjQ5MTEgNTkuMzUxOSBDIDkwLjQ4NzEgNTkuMzU2OSA5MC40ODMxIDU5LjM2MTkgOTAuNDc5MSA1OS4zNjY5IE0gOTAuNDc5MSA1OS4zNjY5IEMgOTAuNDc1MSA1OS4zNTg5IDkwLjQ2OTEgNTkuMzUwOSA5MC40NjIxIDU5LjM0NDkgTSA5MC40NjIxIDU5LjM0NDkgTCA4OS4yMzMxIDU4LjE4NTkgTSA4OS4yMzMxIDU4LjE4NTkgQyA4OS4xOTAxIDU4LjE0NTkgODkuMTIzMSA1OC4xNDc5IDg5LjA4MzEgNTguMTkwOSBNIDg5LjA4MzEgNTguMTkwOSBMIDg3LjkyNDEgNTkuNDE5OSBNIDg3LjkyNDEgNTkuNDE5OSBDIDg3Ljg4NDEgNTkuNDYyOSA4Ny44ODYxIDU5LjUyOTkgODcuOTI5MSA1OS41Njk5IE0gODcuOTI5MSA1OS41Njk5IEwgODkuMTU4MSA2MC43Mjc5IE0gODkuMTU4MSA2MC43Mjc5IEMgODkuMjAwMSA2MC43Njc5IDg5LjI2ODEgNjAuNzY1OSA4OS4zMDgxIDYwLjcyMzkgTSA4OS4zMDgxIDYwLjcyMzkgTCA5MC40NjYxIDU5LjQ5NDkgTSA5MC40NjYxIDU5LjQ5NDkgQyA5MC40NzExIDU5LjQ4OTkgOTAuNDc0MSA1OS40ODQ5IDkwLjQ3ODEgNTkuNDc5OSBNIDkwLjQ3ODEgNTkuNDc5OSBDIDkwLjQ4MzEgNTkuNDg3OSA5MC40ODgxIDU5LjQ5NTkgOTAuNDk2MSA1OS41MDE5IE0gOTAuNDk2MSA1OS41MDE5IEwgOTEuNzI1MSA2MC42NjA5IE0gOTEuNzI1MSA2MC42NjA5IEMgOTEuNzY3MSA2MC43MDA5IDkxLjgzNTEgNjAuNjk4OSA5MS44NzUxIDYwLjY1NTkgTSA5MS44NzUxIDYwLjY1NTkgTCA5Mi44MzYxIDU5LjYzNTkgTSA5Mi44MzYxIDU5LjYzNTkgQyA5My42NTExIDU5LjY5MTkgOTQuNDcxMSA1OS45NjU5IDk1LjIyMzEgNjAuMjM2OSBNIDk1LjIyMzEgNjAuMjM2OSBDIDk2LjI5MDEgNjAuNjIwOSA5Ny4zODgxIDYxLjAzODkgOTguNTIxMSA2MC45Njg5IE0gOTguNTIxMSA2MC45Njg5IEMgOTkuNzEwMSA2MC44OTU5IDEwMC44MDcxIDYwLjI1NTkgMTAxLjU3MzEgNTkuMzYxOSBNIDEwMS41NzMxIDU5LjM2MTkgQyAxMDIuMjE0MSA1OC42MTI5IDEwMi42MDgxIDU3LjY3NDkgMTAyLjczNDEgNTYuNjk4OSBNIDEwMi43MzQxIDU2LjY5ODkgQyAxMDIuNzQyMSA1Ni42Mzc5IDEwMi43NDkxIDU2LjU3NzkgMTAyLjc1NTEgNTYuNTE2OSBNIDEwMi43NTUxIDU2LjUxNjkgQyAxMDMuMzkyMSA1Ni45NDk5IDEwNC4xMzExIDU3LjIxNzkgMTA0Ljg5ODEgNTcuMzAxOSBNIDEwNC44OTgxIDU3LjMwMTkgQyAxMDQuOTMwMSA1Ny4zMDU5IDEwNC45NjgxIDU3LjI4MTkgMTA0Ljk4MjEgNTcuMjUzOSBNIDEwNC45ODIxIDU3LjI1MzkgQyAxMDUuMjY4MSA1Ni42OTY5IDEwNS41NTUxIDU2LjEzNzkgMTA1Ljg0MTEgNTUuNTc5OSBNIDEwNS44NDExIDU1LjU3OTkgQyAxMDYuMjMxMSA1NC45NjE5IDEwNi41NzQxIDU0LjI3NjkgMTA2LjY4MzEgNTMuNTY5OSBNIDEwNi42ODMxIDUzLjU2OTkgQyAxMDYuNzQ4MSA1My4xNDc5IDEwNi43MzAxIDUyLjczNjkgMTA2LjY0NDEgNTIuMzQwOSIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0gODkuMDM2OSA1Ni45ODEzIEMgODkuNDU0OSA1Ny4yMzkzIDg5Ljk2MDkgNTcuMzE4MyA5MC40NTI5IDU3LjM2MTMgTSA5MC40NTI5IDU3LjM2MTMgQyA5MS40MzU5IDU3LjQ0NTMgOTIuNDIyOSA1Ny40MDczIDkzLjQwNzkgNTcuMzk0MyBNIDkzLjQwNzkgNTcuMzk0MyBDIDk0LjM3NzkgNTcuMzgyMyA5NS4zNDg5IDU3LjM5MTMgOTYuMzE4OSA1Ny4zODczIE0gOTYuMzE4OSA1Ny4zODczIEMgOTYuNzI1OSA1Ny4zODUzIDk3LjEzMjkgNTcuMzg0MyA5Ny41Mzk5IDU3LjM4MjMgTSA5Ny41Mzk5IDU3LjM4MjMgQyA5OC4zNTE5IDU3LjM3OTMgOTkuMTY1OSA1Ny4zNjMzIDk5Ljk3NzkgNTcuMzcyMyBNIDk5Ljk3NzkgNTcuMzcyMyBDIDEwMC4wNTI5IDU3LjM3MjMgMTAwLjEwNjkgNTcuMzUxMyAxMDAuMTM1OSA1Ny4yNzYzIE0gMTAwLjEzNTkgNTcuMjc2MyBDIDEwMC4xNTM5IDU3LjIyODMgMTAwLjE1MzkgNTcuMTc2MyAxMDAuMTUxOSA1Ny4xMjYzIE0gMTAwLjE1MTkgNTcuMTI2MyBDIDEwMC4xMjk5IDU2LjQzNDMgOTkuNzU2OSA1NS44NTIzIDk5LjM0NDkgNTUuMzE0MyBNIDk5LjM0NDkgNTUuMzE0MyBDIDk5LjE4MzkgNTUuMTA0MyA5OS4wMTY5IDU0Ljg5ODMgOTguODU5OSA1NC42ODYzIE0gOTguODU5OSA1NC42ODYzIEMgOTguNTYwOSA1NC4yODQzIDk4LjMxODkgNTMuODU1MyA5OC4yMjA5IDUzLjM2MzMgTSA5OC4yMjA5IDUzLjM2MzMgQyA5OC4xMjM5IDUyLjg3MzMgOTguMTYyOSA1Mi4zNjMzIDk4LjMwNzkgNTEuODg4MyBNIDk4LjMwNzkgNTEuODg4MyBDIDk4LjQ2NjkgNTEuMzY3MyA5OC43NTI5IDUwLjg4ODMgOTkuMTExOSA1MC40NzUzIE0gOTkuMTExOSA1MC40NzUzIEMgOTkuMTI3OSA1MC40NTYzIDk5LjEzNTkgNTAuNDM2MyA5OS4xMzU5IDUwLjQxNTMgTSA5OS4xMzU5IDUwLjQxNTMgQyA5OS4xNDk5IDUwLjM0MTMgOTkuMDczOSA1MC4yNTczIDk4Ljk5MjkgNTAuMzEwMyBNIDk4Ljk5MjkgNTAuMzEwMyBDIDk4LjAxMDkgNTAuOTQ5MyA5Ni45MTY5IDUxLjcwNjMgOTYuNzMzOSA1Mi45MzczIE0gOTYuNzMzOSA1Mi45MzczIEMgOTYuNjQ4OSA1My41MTEzIDk2Ljc2NzkgNTQuMDk3MyA5Ny4wNzM5IDU0LjU5NDMgTSA5Ny4wNzM5IDU0LjU5NDMgQyA5Ny4yODc5IDU0Ljk0NDMgOTcuNTc1OSA1NS4yMzgzIDk3Ljg5NjkgNTUuNDk1MyBNIDk3Ljg5NjkgNTUuNDk1MyBDIDk3LjQ2MTkgNTUuNDk4MyA5Ny4wMjY5IDU1LjUwMTMgOTYuNTkyOSA1NS41MDUzIE0gOTYuNTkyOSA1NS41MDUzIEMgOTYuNDc4OSA1NS40MTEzIDk2LjM2OTkgNTUuMzEyMyA5Ni4yNjQ5IDU1LjIwOTMgTSA5Ni4yNjQ5IDU1LjIwOTMgQyA5NS43ODI5IDU0LjU2NTMgOTUuNDY1OSA1My44MDQzIDk1LjQ3OTkgNTIuOTkzMyBNIDk1LjQ3OTkgNTIuOTkzMyBDIDk1LjQ4NDkgNTIuNzA5MyA5NS41MTQ5IDUyLjM4NDMgOTUuNjQ2OSA1Mi4xMjczIE0gOTUuNjQ2OSA1Mi4xMjczIEMgOTUuNjY4OSA1Mi4wODMzIDk1LjY0MTkgNTIuMDMwMyA5NS41ODg5IDUyLjAyOTMgTSA5NS41ODg5IDUyLjAyOTMgQyA5NS41MTI5IDUyLjAyNzMgOTUuNDM2OSA1Mi4wMjgzIDk1LjM2MDkgNTIuMDI3MyBNIDk1LjM2MDkgNTIuMDI3MyBDIDk1LjM0ODkgNTIuMDI4MyA5NS4zMzU5IDUyLjAyODMgOTUuMzIzOSA1Mi4wMjgzIE0gOTUuMzIzOSA1Mi4wMjgzIEMgOTUuMzA3OSA1Mi4wMjkzIDk1LjI5MTkgNTIuMDMwMyA5NS4yNzQ5IDUyLjAzMDMgTSA5NS4yNzQ5IDUyLjAzMDMgQyA5NS4yNjc5IDUyLjAzMDMgOTUuMjYxOSA1Mi4wMzEzIDk1LjI1NDkgNTIuMDMxMyBNIDk1LjI1NDkgNTIuMDMxMyBDIDk1LjIxOTkgNTIuMDMxMyA5NS4xODQ5IDUyLjAzMzMgOTUuMTQ5OSA1Mi4wMzMzIE0gOTUuMTQ5OSA1Mi4wMzMzIEMgOTUuMDY1OSA1Mi4wMzUzIDk0Ljk4MTkgNTIuMDM3MyA5NC44OTU5IDUyLjAzOTMgTSA5NC44OTU5IDUyLjAzOTMgQyA5My44MzE5IDUyLjA1NTMgOTIuNTYwOSA1Mi4wMTkzIDkxLjU4MDkgNTEuOTk0MyBNIDkxLjU4MDkgNTEuOTk0MyBDIDkxLjAyODkgNTEuOTgwMyA5MC40NzI5IDUxLjk2NTMgODkuOTM4OSA1MS44MzIzIE0gODkuOTM4OSA1MS44MzIzIEMgODkuMDkzOSA1MS42MjIzIDg4LjE5MzkgNTEuMDA2MyA4OC4yMzk5IDUwLjA1NjMgTSA4OC4yMzk5IDUwLjA1NjMgQyA4OC4yNDI5IDQ5Ljk4ODMgODguMjM0OSA0OS44OTczIDg4LjE2NjkgNDkuODgzMyBNIDg4LjE2NjkgNDkuODgzMyBDIDg4LjA5MDkgNDkuODY3MyA4OC4wNDg5IDQ5Ljk2NjMgODguMDM5OSA1MC4wNDEzIE0gODguMDM5OSA1MC4wNDEzIEMgODcuOTM3OSA1MC44ODUzIDg4LjA0NjkgNTEuNzkwMyA4OC40MzQ5IDUyLjU1NjMgTSA4OC40MzQ5IDUyLjU1NjMgQyA4OC42NDg5IDUyLjk4MDMgODguOTczOSA1My4zNjIzIDg5LjQwMDkgNTMuNTg0MyBNIDg5LjQwMDkgNTMuNTg0MyBDIDg5LjgyODkgNTMuODA1MyA5MC4zMjY5IDUzLjg1MTMgOTAuODA5OSA1My44NzMzIE0gOTAuODA5OSA1My44NzMzIEMgOTEuOTY2OSA1My45MjYzIDkzLjEzMjkgNTMuOTA4MyA5NC4yODk5IDUzLjg3NDMgTSA5NC4yODk5IDUzLjg3NDMgQyA5NC4yODk5IDUzLjkxNjMgOTQuMjkwOSA1My45NjAzIDk0LjI5MzkgNTQuMDAzMyBNIDk0LjI5MzkgNTQuMDAzMyBDIDk0LjMyNDkgNTQuNTU2MyA5NC41MzE5IDU1LjA2NzMgOTQuODQyOSA1NS41MTYzIE0gOTQuODQyOSA1NS41MTYzIEMgOTQuMDAxOSA1NS41MTkzIDkzLjE2MDkgNTUuNTIwMyA5Mi4zMTk5IDU1LjUxMTMgTSA5Mi4zMTk5IDU1LjUxMTMgQyA5MS44MDM5IDU1LjUwNTMgOTEuMjg3OSA1NS40OTczIDkwLjc3MTkgNTUuNDgzMyBNIDkwLjc3MTkgNTUuNDgzMyBDIDkwLjM4NDkgNTUuNDczMyA4OS45OTU5IDU1LjQ2MDMgODkuNjE3OSA1NS4zNzgzIE0gODkuNjE3OSA1NS4zNzgzIEMgODkuMjQwOSA1NS4yOTUzIDg4Ljg3MTkgNTUuMTM3MyA4OC41OTU5IDU0Ljg3MjMgTSA4OC41OTU5IDU0Ljg3MjMgQyA4OC4yOTY5IDU0LjU4NTMgODguMTIyOSA1NC4xNzYzIDg4LjEzMTkgNTMuNzY2MyBNIDg4LjEzMTkgNTMuNzY2MyBDIDg4LjEzMzkgNTMuNjg5MyA4OC4xMjI5IDUzLjU4NzMgODguMDQ0OSA1My41NzQzIE0gODguMDQ0OSA1My41NzQzIEMgODcuOTU1OSA1My41NTkzIDg3LjkxNzkgNTMuNjgwMyA4Ny45MTY5IDUzLjc2OTMgTSA4Ny45MTY5IDUzLjc2OTMgQyA4Ny45MDk5IDU0LjM2MjMgODcuOTA3OSA1NC45NjIzIDg4LjA1NjkgNTUuNTM2MyBNIDg4LjA1NjkgNTUuNTM2MyBDIDg4LjIwNTkgNTYuMTEwMyA4OC41MjQ5IDU2LjY2NTMgODkuMDM2OSA1Ni45ODEzIi8+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTSAxMDEuNjE2MiA0OS40MzU5IEMgMTAxLjY2NTIgNDkuNDYzOSAxMDEuNzI4MiA0OS40NDY5IDEwMS43NTYyIDQ5LjM5NzkgTSAxMDEuNzU2MiA0OS4zOTc5IEwgMTAyLjU2NTIgNDcuOTg1OSBNIDEwMi41NjUyIDQ3Ljk4NTkgQyAxMDIuNTk0MiA0Ny45MzY5IDEwMi41NzcyIDQ3Ljg3NDkgMTAyLjUyODIgNDcuODQ2OSBNIDEwMi41MjgyIDQ3Ljg0NjkgTCAxMDEuMTE2MiA0Ny4wMzY5IE0gMTAxLjExNjIgNDcuMDM2OSBDIDEwMS4wNjcyIDQ3LjAwODkgMTAxLjAwNDIgNDcuMDI1OSAxMDAuOTc2MiA0Ny4wNzQ5IE0gMTAwLjk3NjIgNDcuMDc0OSBMIDEwMC4xNjYyIDQ4LjQ4NjkgTSAxMDAuMTY2MiA0OC40ODY5IEMgMTAwLjEzODIgNDguNTM1OSAxMDAuMTU1MiA0OC41OTc5IDEwMC4yMDQyIDQ4LjYyNTkgTSAxMDAuMjA0MiA0OC42MjU5IEwgMTAxLjYxNjIgNDkuNDM1OSIvPjwvZz48L3N2Zz4=') center/contain no-repeat;opacity:.045;pointer-events:none}

.lockup--foot{height:clamp(54px,5.8vw,70px);width:auto}
.foot-closing{margin-top:1.5rem;font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.2}

.foot-descriptor{margin-top:.6rem;font-size:.813rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-d)}

.foot h4{margin-bottom:1.15rem;font-size:.688rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute-d)}

.foot-nav a{display:block;padding:.34rem 0;font-size:.938rem;color:rgba(255,255,255,.8);
  transition:color .3s,transform .4s var(--ease)}

.foot-nav a:hover{color:#fff;transform:translateX(5px)}
/* Marks rather than names: one square per channel, the size of a thumb on a
   phone, so the row is a fixed ladder and nothing reflows when a handle is
   long. The marks carry no text, so the accessible name lives on the link. */
.foot-soc{display:flex;flex-wrap:wrap;gap:.6rem}

.foot-soc a{display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line-d);color:rgba(255,255,255,.78);
  transition:background .35s,border-color .35s,color .35s,transform .4s var(--ease)}

.foot-soc .soc-ico{display:block;width:17px;height:17px}
.foot-soc a:hover{background:var(--blue);border-color:var(--blue);color:#fff;
  transform:translateY(-2px)}

.foot-base{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.8rem;padding-block:1.5rem;border-top:1px solid var(--line-d);
  font-size:.688rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}

.hero-kicker{margin-bottom:clamp(1.4rem,3vw,2.4rem);font-size:.688rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--mute-d)}

.hero-title{max-width:15ch}
.hero-lead{margin-top:clamp(1.2rem,2.4vw,1.9rem);max-width:44ch;color:rgba(255,255,255,.82)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2rem;margin-top:clamp(2.4rem,5vw,4rem);padding-top:1.8rem;border-top:1px solid var(--line-d)}

.hero-meta{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.4rem)}
.m-l{font-size:.625rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d)}
.m-v{margin-top:.4rem;font-size:.875rem;font-weight:500;color:#fff}

/* ---------- pattern bands (guide p9) ---------- */
.pattern-band{height:clamp(90px,13vw,190px);background-color:var(--ink-900);
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgMjgwIDI0MCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM0EzOUZGIiBzdHJva2Utd2lkdGg9IjEuMSI+PHBhdGggZD0iTS0yNCAyMTAgQyA1OCAyMTAgNTggMTI2IDE0MCAxMjYgQyAyMjIgMTI2IDIyMiA0MiAzMDQgNDIiLz48cGF0aCBkPSJNLTI0IDE3NiBDIDU4IDE3NiA1OCA5MiAxNDAgOTIgQyAyMjIgOTIgMjIyIDggMzA0IDgiLz48cGF0aCBkPSJNLTI0IDE0MiBDIDU4IDE0MiA1OCA1OCAxNDAgNTggQyAyMjIgNTggMjIyIC0yNiAzMDQgLTI2Ii8+PHBhdGggZD0iTS0yNCAxMDggQyA1OCAxMDggNTggMjQgMTQwIDI0IEMgMjIyIDI0IDIyMiAtNjAgMzA0IC02MCIvPjxwYXRoIGQ9Ik0tMjQgNzQgQyA1OCA3NCA1OCAtMTAgMTQwIC0xMCBDIDIyMiAtMTAgMjIyIC05NCAzMDQgLTk0Ii8+PHBhdGggZD0iTS0yNCA0MCBDIDU4IDQwIDU4IC00NCAxNDAgLTQ0IEMgMjIyIC00NCAyMjIgLTEyOCAzMDQgLTEyOCIvPjxwYXRoIGQ9Ik0tMjQgNiBDIDU4IDYgNTggLTc4IDE0MCAtNzggQyAyMjIgLTc4IDIyMiAtMTYyIDMwNCAtMTYyIi8+PC9nPjwvc3ZnPg==');background-size:auto 100%;
  background-repeat:repeat-x;background-position:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ---------- coming soon hero ----------
   The live site gets its hero wash from .hero-media::after over the cover
   photograph. There is no photograph here, so the blue radial and the curve
   overlay move onto the section itself. */
.cs-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:min(100svh,940px);
  padding-top:calc(var(--head) + clamp(2.5rem,7vw,6rem));
  padding-bottom:clamp(2.4rem,5vw,4.4rem)}
.cs-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(115% 85% at 76% 26%,rgba(58,57,255,.42),transparent 60%)}
.cs-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgMjgwIDI0MCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjEuMSI+PHBhdGggZD0iTS0yNCAyMTAgQyA1OCAyMTAgNTggMTI2IDE0MCAxMjYgQyAyMjIgMTI2IDIyMiA0MiAzMDQgNDIiLz48cGF0aCBkPSJNLTI0IDE3NiBDIDU4IDE3NiA1OCA5MiAxNDAgOTIgQyAyMjIgOTIgMjIyIDggMzA0IDgiLz48cGF0aCBkPSJNLTI0IDE0MiBDIDU4IDE0MiA1OCA1OCAxNDAgNTggQyAyMjIgNTggMjIyIC0yNiAzMDQgLTI2Ii8+PHBhdGggZD0iTS0yNCAxMDggQyA1OCAxMDggNTggMjQgMTQwIDI0IEMgMjIyIDI0IDIyMiAtNjAgMzA0IC02MCIvPjxwYXRoIGQ9Ik0tMjQgNzQgQyA1OCA3NCA1OCAtMTAgMTQwIC0xMCBDIDIyMiAtMTAgMjIyIC05NCAzMDQgLTk0Ii8+PHBhdGggZD0iTS0yNCA0MCBDIDU4IDQwIDU4IC00NCAxNDAgLTQ0IEMgMjIyIC00NCAyMjIgLTEyOCAzMDQgLTEyOCIvPjxwYXRoIGQ9Ik0tMjQgNiBDIDU4IDYgNTggLTc4IDE0MCAtNzggQyAyMjIgLTc4IDIyMiAtMTYyIDMwNCAtMTYyIi8+PC9nPjwvc3ZnPg==') repeat;background-size:280px 240px;opacity:.08}
.cs-hero .hero-in{position:relative;z-index:2;width:100%}
.cs-sub{margin-top:1.05rem;font-size:1rem;line-height:1.65;color:var(--mute-d);max-width:46ch}
/* no nav on a one-page site, so the header CTA needs the push itself.
   Logical, not margin-left, so the Arabic page pushes it the other way. */
.cs-head-cta{margin-inline-start:auto}
@media (max-width:900px){.cs-head-cta{display:none}}

/* ---------- countdown ----------
   Same 1px-gap grid over a tinted field the live site draws its rules with,
   and the same figures it uses for the count-up strip: 700 weight, -0.03em,
   tabular-nums so the digits do not shuffle as they tick. */
.cs-timer{margin-top:clamp(2.6rem,5.5vw,4.2rem)}
/* the guide's eyebrow rule sits above the figures, as it does above every
   section on the live site */
.cs-when{margin-bottom:clamp(1.1rem,2vw,1.6rem)}
.cs-count{max-width:760px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-d);border:1px solid var(--line-d)}
.cs-cell{background:var(--ink-900);padding:clamp(1.15rem,2.2vw,1.9rem) clamp(.9rem,1.8vw,1.5rem)}
.cs-n{font-size:clamp(2.3rem,4.4vw,3.5rem);font-weight:700;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.cs-l{margin-top:.8rem;font-size:.688rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-d)}
/* zero state - the launch date passes and the page keeps its composure */
.cs-done{margin-top:.9rem;font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.2}
.cs-done[hidden],.cs-count[hidden]{display:none}

/* ---------- footer, three columns ----------
   The live footer runs brand / Navigate / Elsewhere / Enquiries. There is no
   Navigate here, so the grid is three tracks rather than four. Child rules are
   the live site's, unchanged. */
.cs-foot-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(1.8rem,3vw,3rem);padding-bottom:clamp(2.8rem,5vw,4.2rem)}
.foot-brand{min-width:0}
/* the domain is this page, so it is set as text rather than a link to itself */
.foot-plain{display:block;padding:.34rem 0;font-size:.938rem;color:rgba(255,255,255,.8)}

/* ---------- language switch ----------
   One control, in the header of both pages, so a reader who lands in the wrong
   language can leave without hunting for it. It sits beside the logo and the CTA
   keeps the far end, which holds in either direction because the CTA is pushed
   with margin-inline-start rather than margin-left.

   The label is written in the language it switches to, not the one you are
   reading: an Arabic reader on the English page sees "عربي", not "Switch to
   Arabic". That means the English page's control is Arabic text inside an LTR
   document, which is the case the [lang=ar] tracking reset below exists for. */
.lang-sw{font-size:.688rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;text-decoration:none;
  color:var(--mute-d);padding:.4rem 0;transition:color .25s var(--ease)}
.lang-sw:hover{color:#fff}

/* ---------- Arabic ----------
   Alexandria carries Arabic alongside the Latin in the same five files, so the
   Arabic page costs no extra font bytes and both languages stay in one
   typeface. The script is cursive, which makes three things requirements here
   that the Latin page never had to think about: no letter-spacing, more leading
   under display type, and every horizontal offset mirrored.

   Tracking is keyed on the text's own lang rather than the page's direction.
   That one choice covers both cases: the Arabic page through <html lang=ar>,
   and the "عربي" link on the English page, which is Arabic text in an LTR
   document. Direction alone would miss the second. */
[lang=ar] .btn,[lang=ar] .btn--sm,[lang=ar] .eyebrow,[lang=ar] .hero-kicker,
[lang=ar] .m-l,[lang=ar] .cs-l,[lang=ar] .cs-when,[lang=ar] .foot h4,
[lang=ar] .foot-base,[lang=ar] .foot-descriptor,[lang=ar] .skip,
[lang=ar] .d1,[lang=ar] .foot-closing,[lang=ar] .cs-done,[lang=ar] .cs-n,
[lang=ar] .lead,[lang=ar] .cs-sub{letter-spacing:normal}
/* the switch link carries lang=ar on the English page, so it is the one place
   the element is the [lang=ar] element rather than a descendant of one */
.lang-sw[lang=ar]{letter-spacing:normal}
/* Arabic does not sit in the em the way Latin does, and this is measured rather
   than guessed. At weight 700, the ink of "Stories in motion." spans 0.798em
   while the ink of "قصص في حركة." spans 1.398em - the qaf bowl alone reaches
   0.532em below the baseline, where the Latin string has no descender at all.
   Set at the same size the Arabic therefore reads far heavier, so the display
   is scaled back to 0.88, which is inside the range bilingual setting normally
   uses and leaves the page's optical weight where the Latin one has it. */
[lang=ar] .d1{font-size:clamp(2.25rem,5.81vw,4.58rem)}
/* The same measurement sets the leading: the Arabic display's ink is 1.398em
   tall, so anything under that collides with the line below. 1.45 contains the
   descender and leaves it clear air, against the 1.04 the Latin page sets. */
[lang=ar] .d1{line-height:1.45}
[lang=ar] .lead{line-height:1.85}
[lang=ar] .cs-sub{line-height:1.9}
[lang=ar] .foot-closing,[lang=ar] .cs-done{line-height:1.5}

/* ---- mirroring ----
   Everything here is an offset the Latin page resolves to one side and Arabic
   has to resolve to the other. Rules that are already direction-agnostic -
   flex and grid order, text-align, padding-block - need nothing: they follow
   dir on their own. */
[dir=rtl] .skip,[dir=rtl] .skip:focus{left:auto;right:-9999px}
[dir=rtl] .skip:focus{right:0}
/* pattern 01 hangs off the trailing corner; the trailing corner is the other
   one here, and the brand rule says the mark is never mirrored - so the box
   moves, not the artwork. */
[dir=rtl] .foot::before{right:auto;left:-10%}
[dir=rtl] .foot-nav a:hover{transform:translateX(-5px)}
/* the blue wash is weighted toward the leading edge, which is the right here */
[dir=rtl] .cs-hero::before{background:radial-gradient(115% 85% at 24% 26%,rgba(58,57,255,.42),transparent 60%)}
/* the CTA arrow points along the reading direction, so it mirrors. The hover
   nudge is written before the flip, so it travels outward rather than inward. */
[dir=rtl] .btn .arw{transform:scaleX(-1)}
[dir=rtl] .btn:hover .arw{transform:translate(-2px,-2px) scaleX(-1)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--head:66px}
  .cs-hero{min-height:88svh}
}
/* The four figures still fit side by side on a tablet - the widest label is
   "Minutes" at 11px - so the ladder only folds at the footer's own
   breakpoint, and the hero meta and CTA stack as a column rather than
   relying on a flex wrap. */
@media (max-width:620px){
  .cs-count{grid-template-columns:repeat(2,1fr)}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .cs-foot-grid{grid-template-columns:1fr}
}

/* ---------- print ----------
   The reveal animation starts every block at opacity 0 and lets
   IntersectionObserver fade it in. A print pass never scrolls, so it would
   otherwise capture the page with every block invisible. */
@media print{
  html{scroll-behavior:auto}
  .rv,.js .rv{opacity:1 !important;transform:none !important}
  .site-head{position:static;background:none}
  .site-head::after,.skip{display:none !important}
  .foot::before{display:none}
  .cs-hero{min-height:0;padding-top:2rem}
  a{text-decoration:none}
}