/* ============================================================
   RTL — 33C-WEB-01 section 08
   "Full RTL layout mirroring on the Arabic side — not a
    right-aligned LTR page."

   Loaded on every page; every rule is scoped to [dir="rtl"],
   so the English side is untouched.
   ============================================================ */

/* ------------------------------------------------------------
   1 · Typeface
   Arabic gets a real Arabic face, a looser line, and none of
   the letterspaced uppercase micro-type, which does not apply
   to Arabic script and renders as broken spacing.
   ------------------------------------------------------------ */
html[dir="rtl"] body{
  font-family:'Noto Kufi Arabic','Alexandria',system-ui,sans-serif;
  letter-spacing:0;
  line-height:1.9;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,
html[dir="rtl"] h3,html[dir="rtl"] h4{
  font-family:'Noto Kufi Arabic','Alexandria',system-ui,sans-serif;
  letter-spacing:0;
  line-height:1.45;
  font-weight:500;
}
/* the ultra-light display weights have no Arabic equivalent */
html[dir="rtl"] .hero h1,
html[dir="rtl"] .lede,
html[dir="rtl"] .big,
html[dir="rtl"] .head-xl,
html[dir="rtl"] .intro h1,
html[dir="rtl"] .engagement h2{font-weight:500}
html[dir="rtl"] .hero h1 b,
html[dir="rtl"] .lede b,
html[dir="rtl"] .big b,
html[dir="rtl"] .head-xl b,
html[dir="rtl"] .intro h1 b{font-weight:700}

/* Arabic runs longer than English — give headlines room */
html[dir="rtl"] .hero h1{font-size:clamp(30px,5.4vw,74px)}
html[dir="rtl"] .lede{max-width:24ch}
html[dir="rtl"] .big{max-width:20ch}
html[dir="rtl"] .head-xl{max-width:34ch}
/* ch is measured on "0", which is narrow in Arabic — relax the centred
   Access measures so the headline is not squeezed into extra lines */
html[dir="rtl"] .access .big{max-width:20ch}
html[dir="rtl"] .access .folio{max-width:28ch}
html[dir="rtl"] .access .line1{max-width:40ch}

/* kill letterspacing + uppercase on every micro-label */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .kicker,
html[dir="rtl"] .kick,
html[dir="rtl"] .lbl,
html[dir="rtl"] .k,
html[dir="rtl"] .n,
html[dir="rtl"] .t,
html[dir="rtl"] .l,
html[dir="rtl"] .r,
html[dir="rtl"] .meta,
html[dir="rtl"] .no,
html[dir="rtl"] .row-label,
html[dir="rtl"] .nav a,
html[dir="rtl"] .back,
html[dir="rtl"] .navlink,
html[dir="rtl"] .btn,
html[dir="rtl"] .chip,
html[dir="rtl"] .pill,
html[dir="rtl"] .line1,
html[dir="rtl"] .tag,
html[dir="rtl"] .cue,
html[dir="rtl"] .cap,
html[dir="rtl"] .foot,
html[dir="rtl"] .foot .base,
html[dir="rtl"] .legal h3,
html[dir="rtl"] .legal th,
html[dir="rtl"] .begin,
html[dir="rtl"] .lang-btn{
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* Arabic is illegible at 8–9px; raise the floor */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .kicker,
html[dir="rtl"] .kick,
html[dir="rtl"] .row-label,
html[dir="rtl"] .lbl,
html[dir="rtl"] .k,
html[dir="rtl"] .n,
html[dir="rtl"] .t,
html[dir="rtl"] .cap,
html[dir="rtl"] .legal h3,
html[dir="rtl"] .legal th{font-size:12px}
html[dir="rtl"] .nav a,
html[dir="rtl"] .back,
html[dir="rtl"] .navlink,
html[dir="rtl"] .btn,
html[dir="rtl"] .begin,
html[dir="rtl"] .lang-btn{font-size:13px}
html[dir="rtl"] .foot,
html[dir="rtl"] .foot .base,
html[dir="rtl"] .meta,
html[dir="rtl"] .tag,
html[dir="rtl"] .line1,
html[dir="rtl"] .cue{font-size:12.5px}
html[dir="rtl"] .chip{font-size:13px}

/* ------------------------------------------------------------
   2 · Layout mirroring
   ------------------------------------------------------------ */
html[dir="rtl"] .mark{align-items:flex-end}
html[dir="rtl"] .mark .cap{padding-left:0;padding-right:2px}

/* underline sweep starts from the right */
html[dir="rtl"] .nav a::after{left:auto;right:0}

/* meta pushed to the far edge */
html[dir="rtl"] .folio .meta{margin-left:0;margin-right:auto}

/* scroll progress bar fills from the right */
html[dir="rtl"] .progress{left:auto;right:0}

/* the latitude strip label */
html[dir="rtl"] .lat-read{right:auto;left:var(--pad)}

/* hero raven sits on the opposite flank */
html[dir="rtl"] .hero-raven{right:auto;left:clamp(-120px,-4vw,-40px);transform:translateY(-50%) scaleX(-1)}
@media(max-width:900px){html[dir="rtl"] .hero-raven{left:-30vw;right:auto}}

/* the ambient glow follows */
html[dir="rtl"] .glow{right:auto;left:-16vw}
html[dir="rtl"] .halftone{
  -webkit-mask-image:radial-gradient(130% 95% at 18% 6%,#000,transparent 60%);
          mask-image:radial-gradient(130% 95% at 18% 6%,#000,transparent 60%);
}

/* typewriter slot and caret */
html[dir="rtl"] .hero .type-live{left:auto;right:0}
html[dir="rtl"] .hero .cursor{margin-left:0;margin-right:.05em}

/* ------------------------------------------------------------
   3 · Directional flourishes
   ------------------------------------------------------------ */
html[dir="rtl"] .arrow,
html[dir="rtl"] .ar,
html[dir="rtl"] .begin .arrow{transform:scaleX(-1)}

html[dir="rtl"] .back .ar::before{
  left:auto;right:0;
  border-left:0;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(-45deg);
}
html[dir="rtl"] .row .arrow::after,
html[dir="rtl"] .ring .arrow::after{
  right:auto;left:0;
  border-right:0;border-left:1px solid var(--silver);
  border-top:1px solid var(--silver);
  transform:rotate(-45deg);
}
html[dir="rtl"] .ring .arrow{justify-self:start;transform:translateX(10px)}
html[dir="rtl"] .ring:hover .arrow{transform:none}
html[dir="rtl"] .row .arrow{transform:translateX(8px)}
html[dir="rtl"] a.row:hover .arrow{transform:none}

/* .row now slides on padding-inline-start, which mirrors itself */
html[dir="rtl"] .ring:hover{
  padding-left:0;
  padding-right:clamp(6px,1.6vw,26px);
  background:linear-gradient(270deg,rgba(248,247,244,.035),transparent 55%);
}

/* the sweeping cue track runs the other way */
html[dir="rtl"] .hero .cue .track::after{animation-direction:reverse}

/* marquee scrolls right-to-left → left-to-right */
html[dir="rtl"] .rail{animation-direction:reverse}

/* the buttons widen their tracking on hover, which in Arabic tears the
   joined letterforms apart — hold the tracking and move the border instead */
html[dir="rtl"] .btn:hover{letter-spacing:0 !important}

/* ------------------------------------------------------------
   4 · Lists, tables, quoted blocks
   ------------------------------------------------------------ */
html[dir="rtl"] ul,
html[dir="rtl"] .legal ul{margin-left:0;margin-right:22px;padding-right:0}

/* the table cells' asymmetric padding has to flip with the text.
   .legal th already uses text-align:start, which mirrors itself. */
html[dir="rtl"] .legal th{padding-right:0;padding-left:16px}
html[dir="rtl"] .legal td{padding:14px 0 14px 16px}
@media(max-width:640px){
  html[dir="rtl"] .legal td{padding:5px 0}
}

html[dir="rtl"] .contact-block a{direction:ltr;display:inline-block}

/* the intake sequence numerals stay left of their text */
html[dir="rtl"] .seq .step{grid-template-columns:34px 1fr}

/* ------------------------------------------------------------
   5 · Bidi-sensitive content
   Latin fragments, emails, phone numbers and coordinates must
   stay LTR inside an RTL paragraph or the digits reorder.
   ------------------------------------------------------------ */
/* Only fragments actually marked dir="ltr" are forced LTR. A blanket
   rule on .val would wrongly flip the House row, whose value is Arabic. */
html[dir="rtl"] .lat-read,
html[dir="rtl"] [dir="ltr"]{
  direction:ltr;
  unicode-bidi:isolate;
}
/* the LTR values still align to the right edge of an RTL card */
html[dir="rtl"] .row .val[dir="ltr"]{text-align:right}

/* the language button always renders in its own script */
.lang-btn[lang="ar"]{font-family:'Noto Kufi Arabic','Alexandria',system-ui,sans-serif;letter-spacing:0}
.lang-btn[lang="en"]{font-family:'Alexandria',system-ui,sans-serif;letter-spacing:.16em}

/* ------------------------------------------------------------
   6 · Contact page grid — the card leads on the right
   ------------------------------------------------------------ */
html[dir="rtl"] .shell{direction:rtl}
html[dir="rtl"] .card .head{flex-direction:row}

/* ------------------------------------------------------------
   7 · Pre-launch countdown
   ------------------------------------------------------------ */
/* The clock reads Days · Hours · Minutes · Seconds — a fixed
   sequence, not a sentence. Arabic keeps that order, so the row
   stays LTR while each label underneath renders in Arabic. */
html[dir="rtl"] .clock{direction:ltr}
html[dir="rtl"] .unit .u{
  font-family:'Noto Kufi Arabic','Alexandria',system-ui,sans-serif;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:11px;
}
html[dir="rtl"] .unit .n{font-family:'Alexandria',system-ui,sans-serif}

html[dir="rtl"] .line1,
html[dir="rtl"] .gate .hint,
html[dir="rtl"] .when,
html[dir="rtl"] .form button{
  letter-spacing:0 !important;
  text-transform:none !important;
}
html[dir="rtl"] .gate .hint,
html[dir="rtl"] .when{font-size:12px}
html[dir="rtl"] .form button{font-size:13px}
html[dir="rtl"] .form input{text-align:right}
html[dir="rtl"] .msg{font-size:12.5px}
html[dir="rtl"] .plate h1{max-width:20ch}