/* ============================================================================
   MOEDATECH — v4 SKIN CORRECTIONS                                  2026-08-26
   Hosted, so changes ship by deploying the asset host with NO Webflow publish.
   Linked from ONE line in the site-wide head field.

   This file exists because the 18 skinned nav pages do NOT load v4.css - their
   skin CSS is inlined in the head field - so v4.css is not a place from which
   they can be corrected. v4mobile.css does reach them, but a desktop colour
   fix does not belong in a file called "mobile".
   ========================================================================= */


/* ==========================================================================
   1. THE for-contractors CLOSING BAND WAS NAVY WITH BLACK TEXT
   Reported by Hisham: the words were invisible.

   The skin's sweep (v4_skin_sweep.js) finds every navy plate and retags it so
   the stylesheet can repaint it light - "navy gone" is the whole point of
   L2-L4. It decides with isNavy(), and its NAVY table already contains BOTH
   stops of this section's gradient:

       [27, 53, 80]   #1b3550
       [13, 31, 51]   #0d1f33

   But it tests `getComputedStyle(el).backgroundColor`, and here the navy is a
   `linear-gradient(135deg, #1b3550, #0d1f33)` in background-IMAGE - so
   backgroundColor reads rgba(0,0,0,0), isNavy() is never even asked, and the
   plate is never tagged. The sweep only inspects backgroundImage for one
   hard-coded asset name ('Cover-gradent'), not for gradients in general.

   So the sweep recoloured the TEXT to the light-mode ink and left the ground
   navy. Measured on staging, both locales:

       h2  "Stop chasing. Start buying."   #000000    1.44:1
       p   "Free to download..."           #323232    1.02:1
       a   "Google Play" (outlined)        #000000    1.44:1
       a   "App Store"   (orange fill)     #ffffff   14.59:1   <- only survivor

   Swept all 18 nav pages plus /faq and home-v4 in both locales: this section
   is the ONLY navy-with-dark-ink surface on the site. Its id `fc-cta` is
   stable, which is what lets this be CSS rather than another script.

   The band is now a light system surface, so the ink the sweep already applied
   becomes legible with nothing else touched: #000 on #f3efea is 18.4:1 and
   #323232 is 11.2:1. `--bg` and not `--bg-sunk` deliberately - the section
   directly above it (#fc-faq) is already --bg-sunk #e8dfd5, and matching it
   would merge the two into one undifferentiated block. The hairline rule is
   what the skin gives every other band.

   Nothing inside the band depended on the dark ground: the only descendant
   carrying its own colour is the orange App Store button (--cta #e65d00 with
   white text), which reads correctly on a light surface too.

   THE DURABLE FIX, if navy gradients turn up again: teach isNavy()/the sweep
   to read gradient colour stops out of backgroundImage, not just
   backgroundColor. That lives in the inlined skin, so it costs a publish.
   ========================================================================== */
#fc-cta {
  background-image: none !important;
  background-color: var(--bg, #f3efea) !important;
  border-top: 1px solid var(--hairline, #ddd3c7);
}

/* ============================================================================
   for-contractors: undo the skin sweep's section inflation      2026-08-27

   The skin's layout() sweep tags any near-full-width block over 200px tall
   whose padding is ALREADY >= 40px, then forces padding to `--section-y`, which
   is clamp(56px, 7vw, 96px) - pinned to its 96px ceiling on any viewport wider
   than 1372px. So it does not normalise a rhythm, it inflates one, and only on
   desktop.

   Measured on this page: ELEVEN sections tagged. Ten were designed at 80px top
   and bottom and one - the lead-in - at 100px/80px. All eleven were being
   rendered at 96px/96px, which both loosened the page by ~350px and flattened
   the lead-in's deliberate extra 20px into the same value as everything else.

   Restored to the designed values here rather than by retuning `--section-y`
   for the page, because that custom property has other consumers in the skin
   and this needs to touch exactly the eleven elements the sweep changed.

   THIS IS A PLASTER, NOT THE CURE. The sweep's `>= 40px` threshold is the real
   fault and it lives in the site-wide FOOTER custom code, which is shared with
   another session and needs a publish. Any page that later grows a tall
   full-width block with >= 40px padding will start inflating too. The one-line
   cure is to raise that threshold (e.g. `pt >= 72`) so it stops catching
   sections the designer set deliberately tight.
   Detect a recurrence with:
     document.querySelectorAll('[data-v4-rhythm]').length
   ========================================================================== */
/* SPECIFICITY, and why these selectors look over-built.
   The skin's rule is `html.v4skin body [data-v4-rhythm]` = (0,2,2), and it is
   !important. The equipment-page fix uses `html[data-wf-page] body
   [data-v4-rhythm]` = (0,2,2) - a TIE - and only wins because it lives in the
   FOOTER, i.e. later in the cascade. This file is in the HEAD, so a tie LOSES.
   The extra `[data-wf-site]` (always present on every Webflow page) lifts these
   to (0,3,2) so they win on specificity and do not depend on load order at all.
   Verified: without it the 80px rule silently lost and the sections stayed 96px. */
html[data-wf-page="6995be23af7d79f649436c48"][data-wf-site] body [data-v4-rhythm] {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
/* the lead-in section keeps the extra 20px it was designed with */
html[data-wf-page="6995be23af7d79f649436c48"][data-wf-site] body
  .inline-section-0-1-2-3-4-5-6[data-v4-rhythm] {
  padding-top: 100px !important;
}

/* ==========================================================================
   Equipment pages: the two section headings sit with their text, not centred.
   Hisham, 2026-09-16: "What changes the price" and "Common questions" go left
   in English and right in Arabic. Everything under those headings was already
   start-aligned - only the h2 was centred by the skin, so they read as
   floating labels. `start` flips by itself in the RTL locale.

   The last .sec--line on each page (the related-pages + CTA block) is left
   centred on purpose - it is a closing band, not a content heading.

   Specificity: the skin centres these with html.v4skin body .sec h2 (0,2,3),
   so the selector below is deliberately heavier rather than relying on order.
   ========================================================================== */
html body .eqp section.sec--line:not(:last-of-type) > .wrap > h2 {
  text-align: start;
}

/* ==========================================================================
   BLOG: hide the image slots nobody filled.            2026-09-18

   The article template has two in-body image fields between the rich-text
   blocks, and on 30 of the 36 articles they are empty - so Webflow renders its
   own grey placeholder (plugins/Basic/assets/placeholder...svg, alt="Blog
   Image") twice in the middle of the piece. That is what a reader sees today.

   Hiding the BLOCK, not just the img, so the spacing goes with it. Keyed on
   Webflow's own `w-dyn-bind-empty`, which it adds only when the field is
   empty - so the moment someone fills an image in, it appears with no CSS
   change here. Same treatment for the author avatar (empty on one article).
   ========================================================================== */
.blog-main-image-block:has(> .blog-main-image.w-dyn-bind-empty) { display: none; }
.author-image-block:has(> .author-image.w-dyn-bind-empty) { display: none; }

/* ==========================================================================
   INVISIBLE TEXT: --black-800 is #3330            2026-09-18

   Webflow's own variable is a FOUR-digit hex whose last digit is the alpha:
   `--black-800: #3330` = rgba(51,51,51,0). Anything wearing
   .text-color-black-800 is therefore painted fully transparent. On every blog
   article that is the publish date, the read time and the author's role; the
   footer copyright wears it too.

   Fixing the CLASS, not the variable. The same variable is used as a
   background-color on seven hover states (.button-black:hover and friends);
   giving it a real value would change those buttons across the site, which is
   not what this is about. The proper fix is to correct the variable to #333 in
   the Designer - then this rule becomes a harmless no-op.
   ========================================================================== */
.text-color-black-800 { color: #333; }

/* ==========================================================================
   BLOG ARTICLE HEADLINE: it was pinned to the left third   2026-09-18

   `.blog-headline-element-block` carries a hard `width: 820px` inside a
   1088px hero, so the title sat in the left portion with a wide empty strip
   beside it - Hisham: "now its in the only left side". The block now takes the
   hero's width, and the title is sized to use it: at 48px a 48-character
   headline only reached ~600px a line.

   Same lesson as the About hero - the empty space was a width cap, not a
   layout that needed splitting.
   ========================================================================== */
.blog-single_hero-section .blog-headline-element-block,
.blog-single_wrapper .blog-headline-element-block {
  width: 100%;
  max-width: none;
}
/* The title's own rule is `.text-weight-semibold.text-color-black-900
   .is-article-title { font-size: 3rem }` - three classes - and the h1 sits in
   .blog-single_wrapper, not in the hero section. So this needs the same three
   classes plus html body to win, and the right ancestor. */
html body h1.text-weight-semibold.text-color-black-900.is-article-title {
  font-size: clamp(2.1rem, 4.4vw, 4.4rem);
  line-height: 1.06;
}

/* ==========================================================================
   BLOG ARTICLE HERO: centre the title, move the byline under the photo
                                                            2026-09-18
   Hisham: "the title of the blog should be starting from the middle and the
   date and the reading time should be under the picture".

   The markup nests the date/read-time INSIDE the headline block, above the
   image, so this cannot be done with `order` alone. `display: contents` on the
   headline block dissolves its box and lets its children take part in the
   wrapper's flex order directly - chip, title, image, byline - with no change
   to the template and nothing to publish.
   ========================================================================== */
/* `display: contents` also drops the headline block's own bottom spacing, and
   the h1 was left touching the top of the photo - so the column carries the
   rhythm itself. */
.blog-single_wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 30px);
}
.blog-single_wrapper > .blog-headline-element-block { display: contents; }

.blog-single_wrapper > .blog-headline-element-block > .blog-type { order: 1; }
.blog-single_wrapper h1.is-article-title { order: 2; }
/* The standfirst paragraph needs an explicit order too. Without one it keeps
   the default 0 and jumps ABOVE the category chip - which is what it did on
   every Arabic article, where that field still has text. */
/* ...and it is centred under the centred title. Left as it was, the flex
   column put this 738px paragraph at the start of the cross axis - hard
   against the RIGHT edge in Arabic - while the title sat centred above it,
   which is what looked broken. */
.blog-single_wrapper > .blog-headline-element-block > p {
  order: 3;
  margin-inline: auto;
  text-align: center;
}
.blog-single_wrapper > .blog-hero-image-block { order: 4; }
.blog-single_wrapper .blog-publish-info-content-wrapper { order: 5; }

/* the chip and the title sit on the centre line; the byline stays left, under
   the photo, where he drew it */
.blog-single_wrapper > .blog-headline-element-block > .blog-type {
  margin-inline: auto;
}
.blog-single_wrapper h1.is-article-title {
  text-align: center;
  margin-inline: auto;
}
.blog-single_wrapper .blog-publish-info-content-wrapper {
  margin-block-start: 16px;
  justify-content: flex-start;
}

/* The byline row is a flex with a 141px gap: [author] [date · read time].
   When an article has no author name, Webflow still renders the author block -
   zero width, but the GAP after it remains - so the date started 141px in from
   the photo's edge. Hiding the block when the NAME field is empty leaves one
   item, no gap, and the date lines up with the picture. Articles that do have
   an author keep the original two-part row. */
.author-info-content-wrapper:has(> .author-info-text-wrapper > .body-1.w-dyn-bind-empty) {
  display: none;
}

/* ==========================================================================
   BLOG ARTICLE: less dead space              2026-09-18

   Measured at 1440px: 120px of nothing between the nav and the category chip
   (40px padding + an 80px margin on the wrapper), and the hero capped at
   1240px inside the viewport, which left ~176px of empty page each side - far
   more on a 1900px screen.

   Top: cut to ~44px. Sides: the hero (chip, title, photo) now takes
   min(1600px, 94vw), so the picture uses the page.

   The BODY column is deliberately NOT widened. Its lines already run about 91
   characters at 17px, and anything past ~80 makes a reader lose their place -
   widening the text would be the wrong kind of "less empty space".
   ========================================================================== */
.blog-single_hero-section .global-padding { padding-top: 20px; }
.blog-single_hero-section .blog-single_wrapper { margin-top: 24px; }
/* Widening the CONTAINER does not work: `.global-wrapper` keeps its 1240px
   whatever I write - a higher-specificity rule, an !important rule and an
   injected <style> all measured no change on the live page, while an inline
   style on the same element does move it. So the wrapper escapes its parent
   with negative side margins instead, which no cascade fight can block.
   Percentage margins resolve against the parent's content box (1128px here):
   50% - min(800px, 47vw) gives exactly min(1600px, 94vw) of total width. */
/* Desktop only: at 390px the same rule left 12px gutters, which is cramped on
   a phone - the small screens keep the template's own margins. */
@media (min-width: 1100px) {
  .blog-single_hero-section .blog-single_wrapper {
    width: min(1600px, 94vw);
    max-width: none;
    margin-inline: calc(50% - min(800px, 47vw));
  }
}

/* ==========================================================================
   BLOG: section headings on one line                       2026-09-18

   Measured: the rich text column is 772px, the h2 is 36.8px, and a 48-character
   heading needs ~850px - so "Why sourcing takes a day, and where the day goes"
   broke across two lines. The longest on the page (52 characters) needs ~904px.

   Two small changes rather than one big one: the heading uses the content
   wrapper's full width (the 148px to the right of the text column is empty),
   and it comes down from 36.8px to 32px. The longest heading then measures
   ~790px against 920px available. PARAGRAPHS keep the 772px measure - only
   the headings run wider, which is a normal editorial arrangement.

   Desktop only; on a phone a heading should wrap.
   ========================================================================== */
@media (min-width: 1100px) {
  .blog-rich-text h2 {
    font-size: 2rem;
    line-height: 1.16;
    margin-inline-end: -148px;
    text-wrap: balance;
  }
}

/* ==========================================================================
   BLOG: the pull-quote in Arabic, and its gap to the share rail  2026-09-19

   Two faults, both measured at 1440px on the Riyadh article.

   1. The accent rule was `border-left: 4px` - a PHYSICAL side. In English that
      is the start of the line and reads as a quote mark; in Arabic the text
      runs right-to-left, so the rule ended up on the far side of the words,
      away from where the eye starts. Same for the block's 110px of padding,
      which is meant to hold the quote's end short of the column edge and was
      sitting on the wrong side too. Both are now logical, so each language
      mirrors by itself.

   2. `.blog-main-content-block` is a flex row with NO gap: the text column
      ends at x=1088 and the share icons begin at x=1088. The quote block is
      the only element with a background, so it was the one that visibly
      touched the icons. A gap fixes it for both languages at once - the text
      column gives up that width, the reading measure is unchanged.
   ========================================================================== */
.blog-main-content-block { gap: clamp(20px, 2.6vw, 48px); }

.blog-quate-block {
  border-left: 0;
  border-right: 0;
  border-inline-start: 4px solid #000;
  padding-inline: 40px 110px;
}
@media (max-width: 767px) {
  .blog-quate-block { padding-inline: 24px 24px; }
}

/* ==========================================================================
   BLOG: editorial system for the article body            2026-09-19

   Hisham: the articles should read like a professionally curated post from a
   global consultancy, in Arabic as well as English. Structure is written into
   the CMS (deck, "in short" box, numbered sections, data table, what-to-do
   list, source note); this is the type and spacing that makes that structure
   visible.

   Rules kept throughout:
   - logical properties only, so Arabic mirrors with no separate RTL block;
   - no letter-spacing or uppercase on Arabic, where both are wrong;
   - numbers set with tabular figures so columns of riyals line up;
   - the table scrolls inside itself on a phone rather than widening the page.
   ========================================================================== */

/* ---- section headings -------------------------------------------------- */
/* A hairline above each H2 is the oldest way to say "new section" in print.
   It runs the width of the heading box, which on desktop is the full content
   column (the h2 keeps the -148px end margin that lets it stay on one line). */
.blog-rich-text h2 {
  border-block-start: 1px solid rgba(0, 0, 0, .14);
  padding-block-start: 26px;
  margin-block-start: 48px;
  letter-spacing: -.015em;
}
/* No :first-child exception: each rich-text FIELD renders as its own block, so a
   section that opens a field still needs the same air above its rule as one that
   follows a paragraph. */
[lang="ar"] .blog-rich-text h2 { letter-spacing: 0; line-height: 1.35; }

.blog-rich-text h3 {
  font-size: 1.14rem;
  font-weight: 650;
  line-height: 1.4;
  margin-block: 30px 8px;
  color: #1b1b1b;
}
[lang="ar"] .blog-rich-text h3 { line-height: 1.6; }

/* ---- body -------------------------------------------------------------- */
.blog-rich-text p { line-height: 1.72; }
[lang="ar"] .blog-rich-text p { line-height: 1.95; }

.blog-rich-text ul li,
.blog-rich-text ol li { margin-block-end: 10px; line-height: 1.7; }
[lang="ar"] .blog-rich-text ul li,
[lang="ar"] .blog-rich-text ol li { line-height: 1.9; }
/* A bold lead-in at the start of a list item is the consultant's tell: the
   reader can skim the bold words alone and still get the argument. */
.blog-rich-text li > b:first-child,
.blog-rich-text li > strong:first-child { color: #111; }

/* ---- "in short" ------------------------------------------------------- */
/* Three or four lines at the top that carry the whole article. Accent rule on
   the inline-start edge, so it sits on the right in Arabic by itself. */
.blog-rich-text ul.mt-key {
  list-style: none;
  margin: 4px 0 30px;
  padding: 22px 26px;
  border-inline-start: 3px solid #e65d00;
  background: rgba(230, 93, 0, .045);
  border-radius: 3px;
  display: grid;
  gap: 10px;
}
.blog-rich-text ul.mt-key > li {
  position: relative;
  margin: 0;
  padding-inline-start: 18px;
  font-size: .99rem;
  line-height: 1.6;
  color: #2a2a2a;
}
.blog-rich-text ul.mt-key > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: #e65d00;
}
.blog-rich-text .mt-key-l {
  display: block;
  margin-block-end: 2px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a3441a;
}
[lang="ar"] .blog-rich-text .mt-key-l {
  letter-spacing: 0;
  text-transform: none;
  font-size: .88rem;
}

/* ---- data table -------------------------------------------------------- */
.blog-rich-text table.mt-tbl {
  width: 100%;
  margin: 24px 0 26px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: .97rem;
}
.blog-rich-text table.mt-tbl th {
  text-align: start;
  padding: 0 14px 10px 0;
  padding-inline: 0 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6f6f6f;
  border-block-end: 1.5px solid #1b1b1b;
  white-space: nowrap;
}
[lang="ar"] .blog-rich-text table.mt-tbl th {
  letter-spacing: 0;
  text-transform: none;
  font-size: .9rem;
}
.blog-rich-text table.mt-tbl td {
  padding: 12px 14px 12px 0;
  padding-inline: 0 14px;
  border-block-end: 1px solid rgba(0, 0, 0, .1);
  line-height: 1.45;
  vertical-align: top;
}
.blog-rich-text table.mt-tbl td:last-child,
.blog-rich-text table.mt-tbl th:last-child { padding-inline-end: 0; }
/* numeric columns read better aligned to the end of the cell */
.blog-rich-text table.mt-tbl td.n,
.blog-rich-text table.mt-tbl th.n { text-align: end; }
/* The quote-count column is evidence, not a headline: same alignment as its
   own heading (a number aligned one way under a heading aligned the other is
   the commonest table defect), one step smaller and in the muted ink.
   Named .qn, not .q: a bare .q is the kind of one-letter class another
   stylesheet defines for something else - a local preview proved it by
   painting a black rule down this column. */
.blog-rich-text table.mt-tbl td.qn,
.blog-rich-text table.mt-tbl th.qn { text-align: end; white-space: nowrap; }
.blog-rich-text table.mt-tbl td.qn { color: #6f6f6f; font-size: .9rem; }
/* Phones: the table scrolls inside its own box. Without this a five-column
   table widens the whole page and every other line gets a sideways scroll. */
@media (max-width: 767px) {
  .blog-rich-text table.mt-tbl {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: .92rem;
  }
}

/* ---- source note ------------------------------------------------------- */
.blog-rich-text p.mt-src {
  margin-block-start: 30px;
  padding-block-start: 12px;
  border-block-start: 1px solid rgba(0, 0, 0, .12);
  font-size: .86rem;
  line-height: 1.6;
  color: #6f6f6f;
}
[lang="ar"] .blog-rich-text p.mt-src { font-size: .9rem; line-height: 1.8; }

/* ==========================================================================
   BLOG: the meta line under the hero picture               2026-09-19

   Hisham: the byline was sitting first on that line - hard against the
   picture's start edge - where the date and the reading time belong.

   Measured before (Arabic, 1440px): author 1319-1389 (the start edge in RTL),
   then a 141px flex gap, then the date/read-time block at 970-1178. So the
   eye met "who wrote it" before "when, and how long is it", and the two
   halves were a thumb's width apart.

   After: date and reading time lead from the picture edge, the byline follows
   them as the quieter item, and the gap comes down to something a line of
   type can hold together. The byline also collapses onto one line at the
   size of the rest of the row - it was set at 20px against the date's 14px,
   which is why it read as a heading rather than as metadata.

   Order, not markup: the template is shared, so both languages and all 36
   articles follow, and RTL mirrors by itself.
   ========================================================================== */
/* centre, not baseline: the date and read-time blocks centre their text
   against a 16px icon, so their baseline sits ~3.5px above a plain line of
   text. Measured. Centring every item on the row removes the wobble. */
.blog-publish-info-content-wrapper {
  gap: clamp(14px, 1.8vw, 26px);
  align-items: center;
  flex-wrap: wrap;
}
.blog-publish-info-content-wrapper > .blog-publish-info-block-2 {
  order: 1;
  gap: clamp(14px, 1.8vw, 26px);
  align-items: center;
}
.blog-publish-info-content-wrapper > .author-info-content-wrapper {
  order: 2;
  align-items: center;
}
/* Name and role on one line, separated by a middle dot, so the whole row
   reads as a single sentence of metadata. */
.author-info-text-wrapper {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
}
/* Same 14px/1.55 as the date and the reading time: measured at .95rem the
   byline's baseline sat 3.3px below theirs, which on a one-line meta row is
   visible as a wobble. Weight, not size, keeps the name distinct. */
.author-info-text-wrapper > .body-1 { font-size: 14px; line-height: 1.55; }
.author-info-text-wrapper > .body-4::before {
  content: "\00B7";
  margin-inline-end: 6px;
  color: #9a9a9a;
}

/* ==========================================================================
   BLOG: Arabic needs its own leading                       2026-09-20

   Hisham sent the crane article: on the Arabic title the shadda of «تكلّف»
   on line two was touching the letters of line one.

   Measured: the article h1 renders at 63.4px with line-height 67.2px, a ratio
   of 1.06. That number was chosen for the English headline, where nothing
   rises above the cap height. Arabic stacks a second storey on the same line:
   the alif and lam of «الرافعات» reach the top of the box, and a shadda or a
   fatha sits above that again. At 1.06 there is nowhere for it to go.

   Arabic typography wants roughly 1.4 to 1.6 where Latin wants 1.05 to 1.2,
   so each level gets its own value rather than one blanket number: the display
   h1 can stay tightest, body headings need more, and a paragraph of Arabic
   needs the most.

   Scoped to html[lang="ar"], which the Arabic pages already carry, so the
   English headlines keep the tight setting they were designed with. The
   attribute selector also outranks the existing English rule, which is why
   these land without !important.
   ========================================================================== */
html[lang="ar"] body h1.text-weight-semibold.text-color-black-900.is-article-title {
  line-height: 1.42;
}
html[lang="ar"] body .blog-rich-text h2 { line-height: 1.45; }
html[lang="ar"] body .blog-rich-text h3 { line-height: 1.6; }
html[lang="ar"] body .blog-rich-text h4 { line-height: 1.62; }
html[lang="ar"] body .blog-rich-text p,
html[lang="ar"] body .blog-rich-text li { line-height: 1.95; }
/* the chip, the byline row and the table cells are single lines, but the
   table can wrap on a phone, so it gets the same treatment */
html[lang="ar"] body .blog-rich-text table.mt-tbl td,
html[lang="ar"] body .blog-rich-text table.mt-tbl th { line-height: 1.6; }

/* ==========================================================================
   BLOG CARDS: the "read more" arrow points the wrong way in Arabic  2026-09-20

   Hisham's screenshot: the اقرأ المزيد button on the Arabic cards shows an
   arrow pointing right. In a right-to-left page, forward is LEFT, so a
   right-pointing arrow reads as "back" to an Arabic reader.

   The icon is an inline SVG (.button_arrow-black, 104 of them on the Arabic
   blog index, 6 more on each article's related cards), so there is no second
   file to swap: mirroring the glyph is the fix.

   scaleX(-1) on the SVG only, not on the block that holds it. The block is
   the slider the hover animation moves, and flipping that would send the
   animation the wrong way to correct a static arrow.

   Scoped to html[lang="ar"] so the English cards keep the arrow they were
   drawn with.
   ========================================================================== */
html[lang="ar"] .button_arrow-black svg {
  transform: scaleX(-1);
}

/* ==========================================================================
   LANDING PAGE: the three company cards                    2026-09-20
   Injected by v4homeblog.js. See that file for why the wording is what it is.

   Built on the same vocabulary as the blog cards so the band does not read as
   a bolt-on: cream ground, 4:3 photograph, one kicker, one line. Logical
   properties throughout, so the Arabic landing page mirrors with no second
   block of CSS.
   ========================================================================== */
#mt-homeblog {
  padding-block: clamp(56px, 7vw, 96px);
  background: #f3efea;
}
#mt-homeblog .mt-hb-in {
  width: min(1180px, 92vw);
  margin-inline: auto;
}
#mt-homeblog .mt-hb-eyebrow {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a3441a;
}
#mt-homeblog[dir="rtl"] .mt-hb-eyebrow {
  letter-spacing: 0;
  text-transform: none;
  font-size: .95rem;
}
#mt-homeblog .mt-hb-head {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #1b1b1b;
}
#mt-homeblog[dir="rtl"] .mt-hb-head { letter-spacing: 0; line-height: 1.4; }
#mt-homeblog .mt-hb-sub {
  margin: 0 0 clamp(26px, 3vw, 40px);
  font-size: 1.02rem;
  line-height: 1.6;
  color: #5f5f5f;
  max-width: 62ch;
}
#mt-homeblog[dir="rtl"] .mt-hb-sub { line-height: 1.9; }

#mt-homeblog .mt-hb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}
#mt-homeblog .mt-hb-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
#mt-homeblog .mt-hb-shot {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #e6e0d8;
  margin-block-end: 14px;
}
#mt-homeblog .mt-hb-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
#mt-homeblog .mt-hb-card:hover .mt-hb-shot img { transform: scale(1.04); }
#mt-homeblog .mt-hb-kicker {
  display: block;
  margin-block-end: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: #a3441a;
}
#mt-homeblog .mt-hb-title {
  display: block;
  margin-block-end: 6px;
  font-size: 1.16rem;
  font-weight: 650;
  line-height: 1.3;
  color: #1b1b1b;
}
#mt-homeblog[dir="rtl"] .mt-hb-title { line-height: 1.55; }
#mt-homeblog .mt-hb-line {
  display: block;
  font-size: .97rem;
  line-height: 1.6;
  color: #5f5f5f;
}
#mt-homeblog[dir="rtl"] .mt-hb-line { line-height: 1.9; }

#mt-homeblog .mt-hb-cta {
  display: inline-flex;
  align-items: center;
  height: 46px;
  margin-block-start: clamp(24px, 3vw, 36px);
  padding-inline: 26px;
  border-radius: 999px;
  background: #e65d00;
  color: #fff;
  font-size: .98rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease;
}
#mt-homeblog .mt-hb-cta:hover { background: #c74f00; }

@media (max-width: 900px) {
  #mt-homeblog .mt-hb-grid { grid-template-columns: 1fr; gap: 26px; }
}


/* ==========================================================================
   Blog index category chips: the label vanished on hover.  2026-09-20.

   Hisham: "when i land on any buttom it become white".

   Measured on /en/blog before this: hovering a chip left an empty outlined
   pill. The label was not white by accident, it was cream #f3efea - the page
   ground - so it was still there and simply could not be seen.

   Two skin rules were fighting:

     [data-v4="ghost"]:hover      background -> ink, label -> cream
     .tab-link:not(.w--current)   background -> transparent, forever

   The skin's sweep tags anything shaped like an outlined button as a ghost
   button, and the five inactive chips qualify. A ghost button inverts on
   hover: it fills with ink and its label goes cream. But the chip rule that
   flattens the old navy tabs carries !important with no hover state of its
   own and sits later in the sheet, so the fill half of that inversion never
   landed - only the cream label did. Cream text on the cream ground.

   Fixed here rather than by untagging the chips, because the tagging is a
   measurement made at run time and would have to be special-cased for this
   one page. This states what a chip does on hover, which the skin never did:
   a soft tint of the accent, so hovering previews the selected state instead
   of inverting to black. The label stays ink - the whole fault was a label
   that stopped being ink.

   The `a` in the selector is doing real work: it outranks the ghost rules on
   specificity, so this holds whatever order the sheets end up loading in.
   ========================================================================== */
html.v4skin body a.tab-link:not(.w--current):hover,
html.v4skin body a.tab-link:not(.w--current):hover * {
  color: var(--ink) !important;
}
html.v4skin body a.tab-link:not(.w--current):hover {
  background-color: rgba(230, 93, 0, .10) !important;
  background-image: none !important;
  border-color: var(--cta) !important;
}
html.v4skin body a.tab-link {
  transition: background-color .18s ease, border-color .18s ease;
}

/* The selected chip is orange with cream text; keep it that way on hover so
   the two states never read as the same thing. */
html.v4skin body a.tab-link.w--current:hover {
  background-color: var(--cta) !important;
  border-color: var(--cta) !important;
}
html.v4skin body a.tab-link.w--current:hover,
html.v4skin body a.tab-link.w--current:hover * {
  color: #fff !important;
}


/* ==========================================================================
   home-v4 field journal: card titles at blog scale.  2026-09-21.

   Hisham: "make the title biger and bold ... like they are blogs and remove
   the (Read the blog)".

   Measured first rather than guessed. On /en/blog a card title is 22.32px at
   weight 500 (h6.blog-title-text); the three journal cards on home-v4 were
   running 14px at weight 400 - body-copy size, which is why the titles read
   as captions next to the photographs. They now carry the blog's size and go
   heavier than it, which is the "bold" that was asked for.

   The read time is hidden here rather than deleted in the script, so if the
   journal script ever stops running the page falls back to its own markup
   intact instead of to a card with a hole in it.

   Both classes are put on by v4homeblog.js, which runs on home-v4 only, so
   these rules cannot reach the real blog cards.
   ========================================================================== */
.post-card.mt-journal .post-meta { display: none !important; }

.post-card.mt-journal .mt-j-title {
  display: block;
  font-size: 1.395rem !important;   /* 22.32px, the blog card title */
  font-weight: 650 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em;
  margin-block: 2px 8px;
}

/* Arabic needs the leading the Latin scale does not: the same 1.22 clips
   descenders and the dots under ب/ي collide with the line below. */
html[lang="ar"] .post-card.mt-journal .mt-j-title {
  line-height: 1.5 !important;
  letter-spacing: 0;
}