/* Project One Arabic — translation-first RTL layer.
   IMPORTANT: the physical compositions stay in the same places as English.
   We only flip/readjust where text/input flow genuinely benefits from RTL. */
html[dir="rtl"] body.ar-page{direction:ltr}
.ar-page{font-family:"IBM Plex Sans Arabic","Inter",Arial,sans-serif}

/* Arabic text direction without reversing layout/flex/grid geometry. */
.ar-page :where(h1,h2,h3,h4,h5,h6,p,figcaption,label,input,textarea,button,a,small,strong,em,b,.active-status-label,.compact-status-label,.section-label,.service-label,.svc-scene-tag,.svc-scene-note,.svc-mobile-copy,.work-meta,.wall-tile,.project-row){
  font-family:"IBM Plex Sans Arabic","Inter",Arial,sans-serif;
  letter-spacing:0!important;
  word-break:normal!important;
  overflow-wrap:normal;
}
.ar-page :where(h1,h2,h3,h4,h5,h6,p,figcaption,label,input,textarea,.svc-scene-title,.svc-scene-tag,.svc-scene-note,.svc-mobile-copy,.service-index-row,.work-index-copy,.checkout-form,.problem-card,.product-card,.cart-chip){direction:rtl;unicode-bidi:plaintext}
.ar-page input,.ar-page textarea{text-align:right}
.ar-page em{font-family:"IBM Plex Sans Arabic","Inter",Arial,sans-serif!important;font-style:normal!important;font-weight:400}

/* Keep proper names / music / codes naturally LTR. */
.ar-page :where([data-music-screen-title],[data-music-screen-mood],.music-time,.music-choice-copy small,.music-choice-copy strong,.product-index,.option-code,.work-index,.work-lightbox-index,.svc-scene-no,[data-svc-current],[data-order-id]){direction:ltr;unicode-bidi:isolate}

/* Menu: don't mirror the chapter board; just give Arabic text proper reading. */
.ar-page .menu-drawer{direction:ltr}
.ar-page .menu-drawer>a{direction:rtl;text-align:right}

/* Nav geometry remains identical to EN. */
.ar-page .nav-bar,.ar-page .nav-center,.ar-page .nav-right{direction:ltr}
.ar-page .active-status-label,.ar-page .compact-status-label,.ar-page .menu-trigger{direction:rtl}

/* Homepage: safe text-side RTL, no spatial composition mirroring. */
.ar-page .query-heading,.ar-page .verdict-heading,.ar-page .vision-statement,.ar-page .field-feed-statement,.ar-page .breakfast-copy,.ar-page .gravity-footer-copy{text-align:right}
.ar-page .field-feed-copy p,.ar-page .field-feed-copy strong{text-align:right}
.ar-page .service-index-row,.ar-page .process-copy,.ar-page .team-card-copy,.ar-page .breakfast-meta,.ar-page .culture-copy{text-align:right}
.ar-page .service-index-preview{direction:rtl}
.ar-page .group-chat-message,.ar-page .chat-answer{direction:rtl;text-align:right}
.ar-page .imessage-meta,.ar-page .imessage-head{direction:ltr}

/* Work: keep archive/wall geometry; only text reads RTL. */
.ar-page .work-hero-copy,.ar-page .archive-heading,.ar-page .contact-sheet-copy,.ar-page .work-close-copy,.ar-page .wall-intro-copy,.ar-page .work-readable-head,.ar-page .work-end-copy{text-align:right}
.ar-page .work-card-copy,.ar-page .work-readable-row{direction:rtl}
.ar-page .work-readable-row [data-title],.ar-page .work-card [data-project]{direction:ltr;unicode-bidi:isolate}

/* Services: preserve split machine directions. Arabic copy itself is RTL. */
.ar-page .svc-desktop,.ar-page .svc-track,.ar-page .svc-col{direction:ltr}
.ar-page .svc-scene-title,.ar-page .svc-scene-tag,.ar-page .svc-scene-note,.ar-page .svc-mobile-copy{text-align:right}
.ar-page .svc-scene-title{line-height:.86}
.ar-page .services-chat-bubble{direction:rtl;text-align:right}
.ar-page .services-reply{direction:rtl;text-align:right}

/* Contact store: don't swap left store/right cart. Text and forms read RTL. */
.ar-page .store-shell,.ar-page .store-left,.ar-page .brief-cart{direction:ltr}
.ar-page .store-masthead h1,.ar-page .store-masthead p,.ar-page .store-stage-head,.ar-page .problem-card,.ar-page .product-card,.ar-page .checkout-form,.ar-page .confirmation-receipt{text-align:right}
.ar-page .problem-card,.ar-page .product-card{direction:rtl}
.ar-page .problem-card b,.ar-page .option-code{left:auto;right:20px}
.ar-page .problem-card b{right:auto;left:20px}
.ar-page .product-index{margin-left:0;margin-right:auto}
.ar-page .checkout-receipt>div,.ar-page .confirmation-lines>div{direction:rtl}
.ar-page .cart-head,.ar-page .cart-summary,.ar-page .cart-footer{direction:rtl}
.ar-page .cart-chip{grid-template-columns:auto minmax(0,1fr) auto;direction:rtl}
.ar-page .cart-checkpoints button{text-align:right}

/* Arabic headline safeguards. No letter splitting; slightly calmer scale where Arabic needs it. */
.ar-page .svc-scene-title span,.ar-page .svc-mobile-copy h2 span,.ar-page .store-masthead h1,.ar-page .problem-card strong,.ar-page .product-card strong,.ar-page .work-readable-head h2,.ar-page .work-end-copy h2,.ar-page .field-feed-statement span,.ar-page .breakfast-title span{white-space:normal!important;word-break:keep-all!important}

@media (min-width:821px){
  .ar-page .svc-scene-title{font-size:clamp(4.1rem,6.6vw,8.2rem)!important;max-width:74vw}
  .ar-page .problem-card strong{font-size:clamp(2rem,3.2vw,3.35rem)}
}

@media (max-width:820px){
  .ar-page .nav-status-stack{min-width:0}
  .ar-page .active-status-label,.ar-page .compact-status-label{font-size:.58rem!important;white-space:nowrap}
  .ar-page .menu-trigger{font-size:.57rem!important}
  .ar-page .menu-drawer>a:not(.lang-return-en){font-size:1rem!important}

  .ar-page .field-feed-statement{font-size:clamp(2.8rem,13vw,4.25rem)!important;line-height:.83!important}
  .ar-page .breakfast-title{font-size:clamp(3.05rem,14vw,4.9rem)!important;line-height:.82!important}
  .ar-page .gravity-footer-title{font-size:clamp(3rem,15vw,5rem)!important}

  .ar-page .work-hero-title{font-size:clamp(4rem,20vw,7rem)!important}
  .ar-page .work-readable-head h2{font-size:clamp(3.6rem,18vw,6rem)!important;line-height:.82!important}
  .ar-page .work-end-copy h2{font-size:clamp(3.15rem,15vw,5.2rem)!important;line-height:.84!important}

  .ar-page .svc-mobile-copy h2{font-size:clamp(2.45rem,11.4vw,4rem)!important;line-height:.88!important}
  .ar-page .svc-mobile-copy h2 span{max-width:100%}
  .ar-page .services-chat-bubble{max-width:min(82vw,330px)!important}

  .ar-page .store-masthead h1{font-size:clamp(4rem,17vw,6.5rem)!important;line-height:.78!important}
  .ar-page .store-stage-head h2{font-size:clamp(3.3rem,14vw,5.4rem)!important;line-height:.82!important}
  .ar-page .problem-card strong{font-size:clamp(2.1rem,10vw,3.35rem)!important;line-height:.86!important}
  .ar-page .product-card>strong{font-size:clamp(1.7rem,8vw,2.6rem)!important;line-height:.9!important}
  .ar-page .brief-cart{direction:ltr}
}

/* v73 — Arabic mobile nav label: keep the control on one line without
   mirroring or changing the physical nav composition. */
@media (max-width:720px) {
  .ar-page .menu-trigger {
    direction:rtl !important;
    font-size:7px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
  }
  .ar-page .lang-switch {
    direction:ltr !important;
    white-space:nowrap !important;
  }
}


/* ================================================================
   v75 — Arabic editorial typography repair
   Arabic is NOT globally mirrored. These rules only repair text systems
   that were designed around Latin word widths / line staggering.
   ================================================================ */

/* One Vision — cinematic Arabic display instead of stretched Latin-style grotesk. */
.ar-page .vision-one,
.ar-page .vision-statement-line {
  font-family: "Rakkas", "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ar-page .vision-one {
  font-size: clamp(148px, 26vw, 440px) !important;
  line-height: .88 !important;
}

/* The English version deliberately throws three lines around the canvas.
   That destroys connected Arabic reading. Keep the same stage, but compose
   the Arabic statement as one centered cinematic block. */
.ar-page .vision-statement {
  align-items: center;
  justify-content: center;
  gap: .015em;
  padding-inline: clamp(36px, 8vw, 150px) !important;
}
.ar-page .vision-statement-line {
  width: auto !important;
  max-width: min(92vw, 1320px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: clamp(72px, 9.25vw, 154px) !important;
  line-height: .96 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* FIELD / FEED intro — retain the composition but use a real Arabic text block.
   The previous 8vw Latin setting caused connected words to collide. */
.ar-page .field-feed-statement-wrap {
  width: min(980px, 80vw) !important;
  height: clamp(285px, 27vw, 450px) !important;
  margin-left: auto;
  margin-right: 0;
}
.ar-page .field-feed-statement {
  left: auto !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
  font-size: clamp(56px, 6.25vw, 106px) !important;
  font-weight: 900 !important;
  line-height: 1.03 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-transform: none !important;
  transform-origin: right top !important;
}
.ar-page .field-feed-statement > span {
  white-space: normal !important;
  word-break: keep-all !important;
}
.ar-page .field-feed-intro-copy {
  width: min(390px, 31vw) !important;
}

/* Selected Work — English sentence was designed as a huge Latin wall.
   Arabic gets a shorter equivalent and a deliberate two-line poster lockup. */
.ar-page #exhibition .section-heading {
  max-width: min(940px, 76vw) !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}
.ar-page #exhibition .section-heading h2 {
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
  max-width: 12ch;
  margin-right: 0;
  margin-left: auto;
  font-size: clamp(64px, 7.1vw, 116px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-transform: none !important;
}
.ar-page #exhibition .section-heading h2 span {
  display: inline;
  white-space: nowrap;
}

/* Team cards — Arabic needs breathing room between connected lines.
   The old .9 Latin line-height visually cut letters and made cards look faded. */
.ar-page .team-card-copy {
  min-height: 285px;
  padding: 22px 20px 30px;
}
.ar-page .team-card-role {
  margin-bottom: 34px;
  font-size: clamp(9px, .62vw, 11px) !important;
  line-height: 1.45 !important;
}
.ar-page .team-card h3 {
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
  margin-bottom: 20px !important;
  font-size: clamp(28px, 2.05vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ar-page .team-card p {
  font-size: clamp(13px, .88vw, 15px) !important;
  line-height: 1.7 !important;
}

/* Footer interface copy was technically there but too tiny to belong to Arabic UI. */
.ar-page .gravity-corner,
.ar-page .gravity-socials,
.ar-page .gravity-location,
.ar-page .gravity-bottom,
.ar-page .gravity-top,
.ar-page .gravity-instruction span,
.ar-page .gravity-instruction strong {
  font-family: "IBM Plex Sans Arabic", "Inter", sans-serif !important;
  font-size: clamp(10px, .72vw, 13px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ar-page .gravity-corner { gap: 12px 24px; }
.ar-page .gravity-socials { gap: 22px; }
.ar-page .gravity-bottom { font-weight: 600; }
.ar-page .gravity-location { font-weight: 500; }

@media (max-width: 900px) {
  .ar-page .vision-one { font-size: clamp(120px, 31vw, 300px) !important; }
  .ar-page .vision-statement-line {
    font-size: clamp(58px, 14vw, 108px) !important;
    white-space: normal !important;
  }
  .ar-page .field-feed-statement-wrap {
    width: 100% !important;
    height: clamp(260px, 70vw, 390px) !important;
  }
  .ar-page .field-feed-statement {
    font-size: clamp(46px, 12.2vw, 74px) !important;
    line-height: 1.06 !important;
  }
  .ar-page #exhibition .section-heading {
    max-width: 100% !important;
  }
  .ar-page #exhibition .section-heading h2 {
    max-width: 100%;
    font-size: clamp(48px, 12.5vw, 74px) !important;
    line-height: 1.08 !important;
  }
  .ar-page #exhibition .section-heading h2 span { white-space: normal; }
  .ar-page .team-card h3 {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.18 !important;
  }
  .ar-page .gravity-corner,
  .ar-page .gravity-socials,
  .ar-page .gravity-location,
  .ar-page .gravity-bottom,
  .ar-page .gravity-top {
    font-size: 9px !important;
  }
}