/* ============================================================
   HAMZA MOHAMMED TRADING - right-to-left overrides
   Loaded on top of site.css for the Arabic site only
   (page.includeCSS.rtl, guarded by [siteLanguage("languageId") == 1]).

   site.css is left-to-right throughout: the side rail is pinned
   left, the top bar starts at var(--rail) from the left, and the
   -31.5deg skew that carries the brand always leans the same way.
   Mirroring means flipping the axis, not the skew - the shape is
   part of the identity and stays as drawn.
   ============================================================ */

body{
  padding-left:0;
  padding-right:var(--rail);
  font-family:"Noto Kufi Arabic",var(--b),system-ui,sans-serif;
  line-height:1.9;
}

/* Arabic headings: Kufi has no heavy display cut, so lean on weight
   and drop the wide tracking that only works for Latin caps. */
h1,h2,h3,h4,.tag,.bt,.quote,.tnav a,.pno,.n,.fld label,.rail-name{
  font-family:"Noto Kufi Arabic",var(--d),system-ui,sans-serif;
  letter-spacing:0;
}
h1,h2{line-height:1.25}

/* --- side rail: right edge --- */
.rail{
  left:auto;
  right:0;
  border-right:0;
  border-left:1px solid rgba(255,255,255,.07);
}

/* --- top bar and mobile sheet follow the rail ---
   No flex-direction here on purpose. dir="rtl" already runs the main
   axis right to left, so the DOM order (lock, nav, quote) lays itself
   out correctly. Adding row-reverse on top flips it a second time and
   lands the logo on the wrong edge. */
.top{
  left:0;
  right:var(--rail);
  justify-content:flex-start;
}
.sheet{inset:0 var(--rail) 0 0}

/* --- underlines, rules and reveals start from the right --- */
.tnav a::after,
.card::after,
.prow::after{transform-origin:right}
.tnav a:hover::after,.tnav a.on::after{transform:skewX(-31.5deg) scaleX(1)}

/* --- wipes travel the other way --- */
.quote::before,
.bt-o::before,
.bt-g::before,
.bt-n::before{transform:translateX(102%) skewX(-31.5deg)}
.quote:hover::before,
.bt-o:hover::before,
.bt-g:hover::before,
.bt-n:hover::before{transform:translateX(0) skewX(-31.5deg)}

/* --- hero footer dividers --- */
.hfi:first-child{padding-left:var(--pad);padding-right:0}
.hfi+.hfi::before{left:auto;right:0}

/* --- lists and quotes --- */
.ab-list,.ce-bodytext ul{padding-left:0;padding-right:20px}
.crumb{direction:rtl}
address{font-style:normal}

/* --- the arrow in the project index points the other way --- */
.irow .ar{transform:scaleX(-1)}

/* --- forms --- */
.form-errors{border-left:0;border-right:3px solid var(--orange)}
.typo3-messages .alert{border-left:0;border-right:3px solid var(--orange)}

/* --- numbers stay latin, and stay left to right inside RTL text --- */
.num,.hfi b,.fgi b,.ab-num,.tbl td:first-child,.tbl th:first-child{
  direction:ltr;
  unicode-bidi:isolate;
}

/* --- additions for the dynamic build --- */
.skip:focus{left:auto;right:var(--rail)}
.form-errors{border-left:0;border-right:3px solid var(--orange)}

/* ============================================================
   Motion layer and the home projects showcase, mirrored.
   Same principle as above: flip the axis, keep the skew.
   ============================================================ */

/* Progress hairline runs from the right. */
.sprog{ left:0; right:var(--rail); transform-origin:right center }

/* Heading wipes come from the right. */
.rv h2,.rv h3{ clip-path:inset(0 0 0 100%) }
.rv.in h2,.rv.in h3{ clip-path:inset(0 0 0 0) }

/* The showcase: photo panel and index swap sides, and the
   hover shift and arrow travel the other way. */
.pshow-frame{ clip-path:polygon(0 0, 91% 0, 100% 100%, 9% 100%) }
.pshow-cap{ padding-left:0; padding-right:9% }
.pshow-row::after{ transform-origin:right center }
.pshow-row.active .pshow-body h3,
.pshow-row:hover .pshow-body h3,
.pshow-row.active .pshow-body .m,
.pshow-row:hover .pshow-body .m{ transform:translateX(-10px) }
.pshow-row.active .ar,
.pshow-row:hover .ar{ transform:translateX(-6px) scaleX(-1) }
.pshow-row .ar{ transform:scaleX(-1) }
.pshow-all::after{ transform-origin:left center }
.pshow-all:hover::after{ transform-origin:right center }
.pshow-all i{ transform:scaleX(-1) }
.pshow-all:hover i{ transform:translateX(-6px) scaleX(-1) }

@media (max-width:1000px){
  .pshow-thumb{ clip-path:polygon(0 0, 88% 0, 100% 100%, 12% 100%) }
}
@media (max-width:760px){
  .sprog{ left:0; right:var(--rail) }
}

/* Depth layer, mirrored: the bloom and the ghost numerals move to the
   other side, and the scroll cue anchors to the right. */
.px::after,.pd::after{ left:auto; right:-10% }
.prow::before{ right:auto; left:2% }
.prow:hover::before{ transform:translateY(-50%) translateX(10px) }
.card{ clip-path:polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px) }
.card .n::after{ left:auto; right:0 }
.scroll-cue{ left:auto; right:var(--pad) }
.scroll-cue i::after{ transform-origin:right center }

/* Full-width bar and the rail beneath it, mirrored. */
.top{ left:0; right:0 }
.sprog{ left:0; right:0; transform-origin:right center }


/* The lock-up belongs on the start side, which in Arabic is the right —
   the same edge as the rail. The reference pushes it with margin-right:auto,
   which in a row-reverse bar drives it the wrong way. */
.top .lock{ margin-right:0; margin-left:auto }

/* Full-bleed heroes, mirrored. */
.hero,.phero{ margin-left:0; padding-left:0; margin-right:calc(var(--rail) * -1); padding-right:var(--rail) }
.hero-foot{ left:0; right:var(--rail) }

/* --- hero imagery mirrors too -----------------------------------------
   In Arabic the text runs from the right, so the photograph has to move
   to the left or the headline lands on top of it. The diagonal cut and
   the gradient that fades the photo into the navy both flip with it —
   the cut is mirrored point for point, not re-angled, so the edge keeps
   the same slope as the rest of the brand. */
.hero-img{
  inset:0 auto 0 0;
  clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
.hero-img::after{
  background:linear-gradient(260deg, var(--navy) 0%, rgba(18,35,63,.74) 26%, rgba(18,35,63,.20) 52%, rgba(18,35,63,.04) 100%);
}
.hero-img::before{
  background:radial-gradient(ellipse 90% 80% at 40% 45%, transparent 45%, rgba(11,22,38,.24) 100%);
}
.phero-img{
  inset:0 auto 0 0;
  clip-path:polygon(0 0, 66% 0, 100% 100%, 0 100%);
}
.phero-img::after{
  background:linear-gradient(260deg, var(--navy) 2%, rgba(18,35,63,.76) 32%, rgba(18,35,63,.24) 58%, rgba(18,35,63,.06) 100%);
}

/* --- no side rail ----------------------------------------------------
   --rail is 0, so the offsets collapse on their own. These just clear
   the mirrored bleed and keep the language switch on the correct edge. */
.hero,.phero{ margin-right:0; padding-right:0 }
.hero-foot{ left:0; right:0 }
.tlang{ flex-direction:row-reverse }

/* Figures band, mirrored: dividers and the label tick swap sides. */
.fgi:first-child{ padding-left:clamp(18px,2.2vw,38px); padding-right:0 }
.fgi + .fgi::after{ left:auto; right:0 }
.fgi span:not(.num){ padding-left:0; padding-right:22px }
.fgi span:not(.num)::before{ left:auto; right:0 }
@media (max-width:760px){
  .fgi:first-child{ padding-right:0 }
}

/* Years plate moves to the other corner, corner cut mirrored. */
.ab-num{ right:auto; left:-5%; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) }
.ab-num em{ margin-left:0; margin-right:.04em }
@media (max-width:1100px){ .ab-num{ left:0; right:auto } }


/* --- the mobile menu, mirrored ---------------------------------------
   dir="rtl" already flips the panel's own axis and every offset in it is
   written as a logical property, so there is no geometry to correct
   here. What does need correcting is the type: the panel is set in the
   display face with Latin tracking, and Kufi is a joined script — wide
   letter-spacing pulls the joins apart, and the negative tracking on the
   navigation does the same thing from the other direction. Same
   treatment the headings already get at the top of this file. */
.sheet-nav a,
.sheet-lbl,
.sheet-langs a,
.sheet-langs span,
.sheet-reach a,
/* The quote button has to be listed at the same weight it is set at in
   enhance.css. `.bt` is already in the Kufi list at the top of this file,
   but that is (0,1,0) and the panel's own rule is (0,2,0) — so without
   matching it here the button keeps Archivo and .16em of tracking, which
   on a joined script pulls the letters apart. */
.sheet .sheet-cta{
  font-family:"Noto Kufi Arabic",var(--d),system-ui,sans-serif;
  letter-spacing:0;
}

/* The label is 10px of Latin small caps. Kufi at that size with no
   tracking to open it up is a smudge, so it takes a little more size
   and the uppercasing — which does nothing to Arabic — comes off. */
.sheet-lbl{
  font-size:12px;
  text-transform:none;
}

/* English stays English: the button offering the other language is the
   one place Latin type belongs in this panel. */
.sheet-langs [lang="en"]{
  font-family:var(--d),system-ui,sans-serif;
  letter-spacing:.08em;
}

/* The phone number is Latin digits either way. */
.sheet-reach a[href^="tel:"]{
  font-family:var(--d),system-ui,sans-serif;
  direction:ltr;
  unicode-bidi:embed;
}


/* --- hero imagery on narrow screens ----------------------------------
   The mirrored gradients above are unconditional, and this file loads
   after enhance.css, so without this block they would beat the vertical
   scrim that section 32 sets below 760px and the Arabic pages would
   keep the sideways one at every width.

   The scrim itself does not mirror — it runs top to bottom, and that is
   the same journey in both directions. It is repeated rather than
   re-angled. */
@media (max-width:760px){
  /* site.css drops the diagonal at this width and lets the photograph go
     full-bleed. The mirrored clip-path above is unconditional and loads
     after it, so the Arabic pages kept the cut at every width — a navy
     wedge across one corner that the English pages did not have. It was
     easy to miss while the photograph sat at 40% opacity; it is not once
     the photograph is actually visible. */
  .hero-img,
  .phero-img{ clip-path:none; }

  .hero-img::after{
    background:linear-gradient(180deg,
      rgba(11,22,38,.82) 0%,
      rgba(18,35,63,.68) 45%,
      rgba(18,35,63,.44) 76%,
      rgba(18,35,63,.32) 100%);
  }
  .phero-img::after{
    background:linear-gradient(180deg,
      rgba(11,22,38,.78) 0%,
      rgba(18,35,63,.66) 55%,
      rgba(18,35,63,.56) 100%);
  }
  .hero-img::before{ background:none; }
}