/* Belad Al-Theeqa: structure, type scale and spacing rebuilt 1:1 from the Crosswalk reference.
   Everything is in em of the fluid body size (1vw desktop), like the reference. */

/* Self-hosted fonts (no third-party requests). Inter Tight: SIL Open Font License; variable 300–600. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../assets/fonts/inter-tight-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../assets/fonts/inter-tight-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --color--accent--bright: #e5e4df;
  --color--brand: #b30000;        /* Belad red */
  --color--brand-deep: #8a0000;   /* hover / pressed */
  --color--text: #26231b;         /* body text on cream (ink) */
  --color--accent--dark: #26231b;
  --color--background--bright: #f0eee4;
  --color--background--dark: #030303;
  --color--accent--navbar: #ffffff;
  --color--accent--dark-10: #26231b1a;
  --color--accent--dark-15: #26231b26;
  --color--accent--dark-85: #26231bd9;
  --color--brand-50: #b3000066;   /* thin rules on cream */
  --color--accent--bright-50: #e5e4df80;
  --color--accent--bright-20: #e5e4df33;
  --color--accent--bright-10: #e5e4df12;

  --fonts--paragraphs: "Inter Tight", Arial, sans-serif;
  --fonts--headings: "Inter Tight", Arial, sans-serif;
  --weight--book: 360;
  --weight--regular: 420;
  --weight--medium: 540;

  --spacing--xxxs: 1em; --spacing--xxs: 1.5em; --spacing--xs: 2em; --spacing--small: 4em;
  --spacing--medium: 7em; --spacing--large: 10em; --spacing--extra-large: 14em;
  --font-padding--size: .2em; --font-padding--xs: .3em; --font-padding--small: .4em;
  --font-padding--medium: .7em; --font-padding--large: 1em;
  --full-width-site--desktop: 94vw; --full-width-site--mobile: 90vw;

  /* Paper textures (own noise, replaces the reference PNGs) */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.38'/></svg>");
  --texture--brand: var(--noise), linear-gradient(#b30000, #b30000);
  --texture--dark: var(--noise), linear-gradient(#2a261f, #2a261f);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--fonts--paragraphs);
  font-weight: var(--weight--regular);
  font-size: 1vw;
  line-height: 1.2em;
  color: var(--color--text);
  background-color: var(--color--accent--bright);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll;
  overflow-x: hidden;
}
img { max-width: 100%; vertical-align: middle; display: inline-block; border: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ---------- Type ---------- */
.h-ultra { font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 7.3em; line-height: 110%; letter-spacing: 0; margin: 0; will-change: transform; }
.h-big { font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 6.6em; line-height: 1.1; letter-spacing: 0; margin: 0; }
.large-paragraph { font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 3.44em; line-height: 1.25; margin: 0; }
.h-medium { font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 2em; line-height: 1.1; letter-spacing: 0; margin: 0; }
.normal-pragraph { font-size: 1.45em; line-height: 1.3; margin: 0; }
.normal-pragraph.header { font-size: 1.35em; }
.small-pragraph { font-size: 1.06em; line-height: 1.3; margin: 0; }
.bold-text { font-weight: var(--weight--medium); }
/* Brand colour roles: big type on cream is red; anything on a dark or red surface inherits its light colour */
.h-big, .large-paragraph { color: var(--color--brand); }
.darkmode .h-big, .big-image-quote .large-paragraph { color: inherit; }
/* Red surfaces: text and lines on them become white (cream on red is too low-contrast) */
.hero-home-container, .footer-wrapper, .value-tag, .service-tag, .team-tag, .team-tag-card, .story-tag, .close-btn {
  --color--accent--bright: #ffffff;
  --color--accent--bright-50: #ffffff8c;
  --color--background--bright: #ffffff;
}

/* SplitText masks */
.split-line, .split-word, .split-char { line-height: inherit !important; vertical-align: top !important; }
.split-line { display: block !important; }
.split-word, .split-char { display: inline-block !important; }
.split-line-mask, .split-word-mask, .split-char-mask { overflow: clip; }
/* Inter Tight has taller ascenders/descenders than the reference face: give masks room so glyphs are not cut at rest */
.split-line-mask, .split-word-mask, .split-char-mask { padding: .06em 0 .16em; margin: -.06em 0 -.16em; }

/* ---------- Layout system ---------- */
.page-wrapper { display: flex; flex-flow: column; align-items: center; width: 100vw; }
.main-wrapper { z-index: 2; width: 100%; position: relative; }
.main-container { width: var(--full-width-site--desktop); position: relative; }
.main-container.full-height { height: 100%; }
.main-container.static { position: static; }
._12-columns { display: grid; grid-template-columns: minmax(auto, 1fr) repeat(11, 1fr); grid-template-rows: min-content; grid-column-gap: var(--spacing--xxxs); grid-row-gap: 1em; grid-auto-columns: 1fr; grid-auto-flow: row; place-items: start stretch; width: 100%; }
._12-columns.no-gap { grid-column-gap: 0; grid-row-gap: 0; align-items: stretch; position: relative; }
._12-columns.no-gap._100 { grid-template-rows: min-content auto; grid-auto-flow: column; align-content: space-between; align-items: stretch; height: 100%; }
._12-columns.team-grid { grid-column-gap: 0; grid-row-gap: var(--spacing--medium); }

.main-grid { position: absolute; top: 0; left: 0; z-index: 0; display: flex; flex-flow: column; align-items: center; width: 100%; height: 100%; pointer-events: none; }
.main-grid.whiteback { opacity: .5; }
.main-grid._01 { z-index: 5; opacity: .5; }
.main-grid.darkback { z-index: 1; opacity: .5; }
.grid-lines { display: flex; justify-content: space-between; align-items: stretch; width: 100%; height: 100%; }
.grid-lines.hide { display: none; }
.grid-lines i { width: 1px; height: 100%; background: var(--color--accent--dark-10); }
.grid-lines.l15 i { background: var(--color--accent--dark-15); }
.grid-lines.lw i { background: var(--color--accent--bright-10); }

.brigh-back-wrapper { z-index: 1; position: relative; background-color: var(--color--accent--bright); }
.dark-back-wrapper { z-index: 1; position: relative; background: var(--texture--dark); background-color: #2a261f; }

/* ---------- Section header (reused) ---------- */
.section-header { border-top: 1px solid var(--color--brand-50); border-bottom: 1px solid var(--color--brand-50); }
.section-header.darkmode { border-top-color: var(--color--accent--bright-50); border-bottom-width: 0; color: var(--color--accent--bright); }
.section-header.darkmode.doubleline, .section-header.darkmode.footer-mode { border-bottom-width: 1px; border-bottom-color: var(--color--accent--bright-50); }
.hbig-container { grid-column: span 7; align-self: center; }
.subtitle-sum-wrapper { grid-area: 1 / 8 / 2 / 13; display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: var(--spacing--small); padding-bottom: var(--spacing--medium); border-left: 1px solid var(--color--brand-50); }
.subtitle-sum-wrapper.darkmode { border-left-color: var(--color--accent--bright-50); }
.inde-container { padding-top: var(--spacing--xxxs); padding-left: var(--spacing--xs); }
.subtitle-summary { padding-left: var(--spacing--xs); display: flex; align-items: center; }

/* ---------- Buttons ---------- */
.contact-btn { padding: .45em var(--spacing--xxs) .4em; border-radius: var(--spacing--xxxs); background: var(--color--accent--dark); color: var(--color--accent--bright); text-decoration: none; display: inline-block; border: 0; cursor: pointer; font: inherit; }
.contact-btn:hover { background: var(--color--accent--bright); color: var(--color--accent--dark); }

/* ---------- Navbar ---------- */
.navbar { position: fixed; top: 0; z-index: 4; width: 100vw; padding-top: var(--spacing--xs); display: flex; flex-flow: column; align-items: center; pointer-events: none; }
.nav-btns-container { display: flex; justify-content: space-between; align-items: flex-start; }
.nav-btns-container > * { pointer-events: auto; }
.logo-container { width: 7.9em; color: var(--color--accent--navbar); text-decoration: none; display: block; }
.logo-container svg { width: 100%; height: auto; display: block; }
.right-btns-container { display: flex; align-items: center; gap: var(--spacing--xxs); }
.lang-btn { display: flex; align-items: center; color: var(--color--accent--navbar); }
.lang-btn a { text-decoration: none; }
.lang-btn a.active { text-decoration: underline; }

/* ---------- Load curtain ---------- */
.hero-mask { position: fixed; top: 0; left: 0; z-index: 30; width: 100vw; height: 100vh; display: flex; flex-flow: column; align-items: center; pointer-events: none; }
.white-stripe { background-color: var(--color--accent--bright); width: 100%; height: 0; }
.hero-mask .white-stripe { height: 100vh; }
.white-stripe.thin { position: absolute; top: 0; left: 0; width: 3vw; }
.white-stripe.thin.right { left: auto; right: 0; }
.white-stripe.dark { background: var(--texture--dark); background-color: #2a261f; }
.transition-layout { position: fixed; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background: var(--color--background--bright); }

/* ---------- Hero ---------- */
.hero-home-container { position: sticky; top: 0; z-index: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: flex-end; background: var(--texture--brand); }
.hero-text-container { position: relative; z-index: 2; display: flex; flex-flow: column; justify-content: flex-end; align-items: center; padding-bottom: var(--spacing--xs); width: 100%; }
.huge-title-container { grid-area: 1 / 1 / 2 / 11; color: var(--color--accent--bright); }
.hero-subtitle { grid-area: 1 / 9 / 2 / 13; align-self: start; position: relative; z-index: 2; height: 100%; padding-top: 1.3em; padding-left: 8em; color: var(--color--accent--bright); }
.subtext-top-wrapper { height: 100%; padding-bottom: var(--spacing--xxxs); display: flex; flex-flow: column; justify-content: flex-end; align-items: center; }
.hero-machine-container { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
.hero-globe { position: absolute; inset: 0; }
.hero-globe canvas { display: block; width: 100% !important; height: 100% !important; }
.hero-machine { grid-area: 1 / 3 / 2 / 11; position: relative; bottom: 6em; height: 0; color: var(--color--accent--bright); }
.scroll-arrow { position: absolute; right: .5em; bottom: var(--spacing--xxs); z-index: 3; width: var(--spacing--xxs); height: 5.5em; border-radius: var(--font-padding--large); background-color: var(--color--accent--dark); display: flex; justify-content: center; align-items: center; color: var(--color--accent--bright); }
.scroll-arrow svg { height: 70%; width: auto; }

/* ---------- Hero statement ---------- */
.hero-statement { position: relative; z-index: 1; padding: var(--spacing--large) 0; display: flex; flex-flow: column; align-items: center; }
.large-text-container { display: block; width: 100%; line-height: 1.2; }

/* ---------- Values ---------- */
.values { position: relative; z-index: 2; display: flex; flex-flow: column; align-items: center; }
._3-values { position: relative; z-index: 2; display: flex; flex-direction: column; margin-bottom: var(--spacing--large); border-bottom: 1px solid var(--color--brand-50); }
.value-item { grid-column: span 4; display: flex; flex-flow: column; justify-content: space-between; overflow: hidden; border-right: 1px solid var(--color--brand-50); }
.value-item.right { border-right-width: 0; }
.service-tag-container { display: flex; justify-content: space-between; align-items: center; width: 100%; overflow: hidden; }
.value-tag { width: 75%; padding: var(--spacing--xxxs) 0 var(--spacing--xxxs) var(--spacing--xxs); color: var(--color--accent--bright); background: var(--texture--brand); }
.service-number-tag { padding-right: var(--font-padding--large); }
.value-graphic { position: relative; width: 100%; padding-top: var(--spacing--medium); padding-bottom: var(--spacing--small); display: flex; flex-flow: column; align-items: center; }
.value-graphic-container { position: relative; width: 50%; aspect-ratio: 3 / 2; color: var(--color--brand); }
.value-graphic-container svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.value-summary-container { padding: 0 var(--spacing--xs) var(--spacing--xxs) var(--spacing--xs); }

/* ---------- Big image sections ---------- */
.big-image-section { position: relative; top: 0; z-index: 0; height: 300vh; overflow: clip; }
.big-image-section.first { margin-bottom: -25em; }
.big-image-container { position: sticky; top: 0; z-index: 0; width: 100%; height: 100vh; display: flex; flex-flow: column; overflow: clip; }
.ima-big-wrap { position: absolute; inset: 0; display: flex; flex-flow: column; justify-content: flex-end; align-items: center; overflow: hidden; }
.image-cover { object-fit: cover; width: 100%; height: 100%; filter: grayscale(1) sepia(.32) contrast(1.04) brightness(.92); }
.image-cover._115 { height: 140%; min-height: 140%; }
.big-image-quote { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: var(--color--accent--bright); }
.big-image-quote::before { content: ""; position: absolute; inset: 0; background: #1a17125c; }
.big-quote-text-container { grid-area: 1 / 2 / 2 / 12; display: flex; flex-flow: column; align-items: flex-start; gap: var(--spacing--xxxs); position: relative; }
.big-image-mask { position: absolute; top: 0; left: 0; z-index: 4; width: 100vw; height: 100vh; display: flex; flex-flow: column; align-items: center; pointer-events: none; }
.big-image-mask ._12-columns { align-items: start; }

/* ---------- Services ---------- */
.services { position: relative; z-index: 2; display: flex; flex-flow: column; align-items: center; }
.services-list { position: relative; padding-bottom: var(--spacing--large); }
.service-line-container { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; display: flex; justify-content: center; }
.vert-line-brand { width: 1px; height: 100%; background: var(--color--brand-50); }
.services-item { position: relative; z-index: 1; padding-top: var(--spacing--extra-large); }
.image-vert { position: relative; aspect-ratio: 3 / 4; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.image-cover._120 { height: 120%; }
.services-item .image-vert { grid-area: 1 / 2 / 2 / 6; }
.services-item .service-item-text { grid-area: 1 / 7 / 2 / 13; }
.services-item.alt .image-vert { grid-area: 1 / 8 / 2 / 12; }
.services-item.alt .service-item-text { grid-area: 1 / 1 / 2 / 7; }
.service-item-text { display: flex; flex-flow: column; justify-content: space-between; overflow: hidden; }
.service-item-text.reverse { align-items: flex-end; }
.service-tag { position: relative; width: 50%; background: var(--texture--brand); }
.service-tag-text { width: 100%; padding: var(--spacing--small) 0 var(--spacing--xs) var(--spacing--xxxs); color: var(--color--accent--bright); }
.service-tag-text.reverse { padding-right: var(--spacing--xxxs); text-align: right; }
.service-num { position: absolute; top: 0; right: 0; padding: var(--font-padding--medium) var(--font-padding--medium) 0 0; color: var(--color--accent--bright); }
.service-text { width: 66.6%; padding: 0 var(--font-padding--large) var(--spacing--medium) var(--spacing--xxxs); }

/* ---------- Partners (team pattern) ---------- */
.team { position: relative; z-index: 2; padding-bottom: var(--spacing--extra-large); display: flex; flex-flow: column; align-items: center; overflow: clip; }
.team-list { padding-top: var(--spacing--large); }
.team-item-wrapper { grid-column: span 3; }
.team-item { position: relative; overflow: hidden; cursor: pointer; padding: 0 var(--font-padding--small); }
.team-tag { position: absolute; bottom: 0; width: 66.6%; padding: var(--font-padding--medium) 0 var(--font-padding--medium) var(--font-padding--medium); background: var(--texture--brand); }
.team-tag-txt { padding-right: var(--spacing--xs); color: var(--color--accent--bright); }
.logo-plate { width: 100%; height: 120%; display: flex; align-items: center; justify-content: center; padding: 0 16% 20%; background: #ecebe6; }
.logo-plate img { max-width: 100%; max-height: 22%; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.logo-plate .wordmark { font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 2.4em; letter-spacing: -.02em; color: var(--color--accent--dark); text-align: center; line-height: 1; }
.team-modal { position: fixed; top: 0; left: 0; z-index: 20; width: 100vw; height: 100vh; display: flex; flex-flow: column; justify-content: center; align-items: center; background: var(--color--accent--dark-85); visibility: hidden; opacity: 0; }
.card-container { width: 100%; display: flex; flex-flow: column; justify-content: center; align-items: flex-start; position: relative; }
.card-border { position: absolute; right: 0; top: 0; z-index: 2; width: 3em; height: 100%; margin-right: -3em; background: var(--color--accent--bright); }
.team-card { grid-area: 1 / 4 / 2 / 13; position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: auto auto; width: 100%; background: var(--color--accent--bright); }
.team-card .image-vert { grid-area: 1 / 6 / 2 / 10; z-index: 2; }
.close-btn { grid-area: 1 / 1 / 2 / 2; place-self: start; z-index: 4; width: 3em; height: 7em; margin-left: -3em; display: flex; align-items: center; background: var(--texture--brand); border: 0; cursor: pointer; padding: 0; }
.close-btn-x { position: relative; width: 1.5em; height: 1.5em; margin-left: var(--font-padding--medium); display: flex; justify-content: center; align-items: center; }
.close-btn-x::before, .close-btn-x::after { content: ""; position: absolute; width: 100%; height: 1px; background: var(--color--accent--bright); transform: rotate(45deg); }
.close-btn-x::after { transform: rotate(-45deg); }
.team-tag-card { grid-area: 1 / 1 / 2 / 4; position: absolute; top: 0; width: 100%; min-height: 7em; padding: var(--spacing--xs) 0 var(--font-padding--large) var(--spacing--xs); background: var(--texture--brand); color: var(--color--accent--bright); }
.team-card-desc { grid-area: 1 / 1 / 2 / 5; align-self: end; display: flex; flex-flow: column; gap: var(--font-padding--large); padding: 0 0 var(--spacing--xs) var(--spacing--xxs); color: var(--color--text); }

/* ---------- Dark: network header ---------- */
.humnas-technology { position: relative; z-index: 2; padding-top: var(--spacing--large); display: flex; flex-flow: column; align-items: center; }

/* ---------- Story slider ---------- */
.turing-slider { position: relative; top: 0; z-index: 2; width: 100vw; height: 600vw; margin-top: -20em; padding-left: 3vw; display: flex; flex-flow: row; justify-content: flex-start; align-items: flex-start; overflow: clip; }
.slider-container { position: sticky; top: 0; min-height: 100vh; display: flex; justify-content: flex-start; align-items: center; }
._39-columns { display: grid; grid-template-columns: minmax(auto, 1fr) repeat(38, 1fr); grid-template-rows: min-content; gap: 0; width: 305.5vw; place-items: start stretch; }
.story-index-container { grid-area: 1 / 1 / 2 / 40; display: grid; grid-template-columns: repeat(39, 1fr); height: 1px; max-height: 1px; margin-top: -1em; border-top: 1px solid var(--color--accent--bright-50); }
.story-index-item { justify-self: start; display: flex; flex-flow: column; align-items: center; margin-top: -1.7em; color: var(--color--background--bright); transform: translateX(-.25em); }
.story-index-item .small-pragraph { background-color: #2a261f; padding: 0 .25em; }
.small-circle { width: .5em; height: .5em; border-radius: 50%; background: var(--color--background--bright); }
.story-tag { position: relative; background: var(--texture--brand); }
.story-tag-text { width: 100%; padding: var(--spacing--small) 0 var(--spacing--xs) var(--spacing--xxxs); color: var(--color--accent--bright); }
.story-item-text { width: 100%; padding: 0 var(--font-padding--large) 0 var(--spacing--xxxs); color: var(--color--accent--bright); align-self: end; display: flex; flex-flow: column; gap: 1.2em; }
.image-vert.land { justify-content: flex-start; align-items: flex-end; }
.image-cover._120land { width: 120%; max-width: 120%; height: 120%; }
.s1.story-tag { grid-area: 1 / 1 / 2 / 4; } .s1.story-item-text { grid-area: 2 / 1 / 3 / 4; } .s1.image-vert { grid-area: 1 / 6 / 3 / 10; } .d1 { grid-area: 1 / 1 / 2 / 2; }
.s2.story-tag { grid-area: 1 / 11 / 2 / 14; } .s2.story-item-text { grid-area: 2 / 11 / 3 / 14; } .s2.image-vert { grid-area: 1 / 16 / 3 / 20; } .d2 { grid-area: 1 / 11 / 2 / 12; }
.s3.story-tag { grid-area: 1 / 21 / 2 / 24; } .s3.story-item-text { grid-area: 2 / 21 / 3 / 24; } .s3.image-vert { grid-area: 1 / 26 / 3 / 30; } .d3 { grid-area: 1 / 21 / 2 / 22; }
.s4.story-tag { grid-area: 1 / 31 / 2 / 34; } .s4.story-item-text { grid-area: 2 / 31 / 3 / 34; } .s4.image-vert { grid-area: 1 / 36 / 3 / 40; } .d4 { grid-area: 1 / 31 / 2 / 32; }

/* ---------- Machine 2 (network drawing) ---------- */
.machine-2 { position: relative; z-index: 1; height: 180vh; padding: var(--spacing--medium) 0 var(--spacing--extra-large); display: flex; flex-flow: column; align-items: center; }
.last-machine-container { position: sticky; top: 0; height: 100vh; display: flex; justify-content: flex-start; align-items: center; }
.machine-2-container { grid-area: 1 / 3 / 2 / 11; position: relative; color: var(--color--accent--bright); }
.machine-2-container .image-container.absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.image-mask { width: 100%; height: 100%; overflow: clip; }
.image-full { position: relative; width: 62.66vw; max-width: 62.66vw; display: block; }
.image-full svg { width: 100%; height: auto; display: block; overflow: visible; }
.machine-2-container .base { opacity: .62; }

/* ---------- Footer ---------- */
.footer-wrapper { position: relative; z-index: 2; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: flex-end; background: var(--texture--brand); }
.footer-container { height: 100vh; padding-top: var(--spacing--medium); display: flex; flex-flow: column; justify-content: space-between; align-items: flex-start; color: var(--color--accent--bright); position: relative; z-index: 2; }
.footer-content { display: flex; flex-flow: column; justify-content: space-between; align-items: stretch; color: var(--color--accent--bright); width: 100%; }
.footer-content._100 { height: 100%; }
.form-block { grid-area: 1 / 1 / 3 / 7; align-self: end; height: 100%; padding-top: var(--font-padding--medium); padding-bottom: var(--spacing--small); }
.form { height: 100%; display: flex; flex-flow: column; justify-content: flex-end; }
.text-field { padding: var(--font-padding--small) var(--font-padding--medium); border-style: solid; border-width: 0 0 1px; border-color: var(--color--accent--bright-50); background: transparent; color: var(--color--accent--bright); font: inherit; font-size: 1.06em; height: 2.6em; outline: 0; border-radius: 0; }
.text-field:focus { border-bottom-color: var(--color--accent--bright); }
.text-field::placeholder { color: var(--color--accent--bright); font-size: .95em; font-weight: var(--weight--medium); }
.text-field.message { height: var(--spacing--large); resize: vertical; }
.contact-btn.footer { align-self: flex-start; margin-top: 1em; }
.form-note { margin-top: .8em; min-height: 1.3em; }
.form[data-state="error"] .form-note { color: #fff; font-weight: var(--weight--medium); }
.form[data-state="error"] .form-note::before { content: "! "; }
.form[data-state="sent"] .form-note { font-weight: var(--weight--medium); }
.contact-btn:disabled { opacity: .6; cursor: progress; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fotter-right { grid-area: 1 / 8 / 3 / 13; align-self: end; height: 100%; display: flex; flex-flow: column; justify-content: space-between; }
.inde-container.contact { flex: 1; display: flex; flex-flow: column; justify-content: flex-end; gap: var(--font-padding--xs); padding-bottom: var(--spacing--small); border-left: 1px solid var(--color--accent--bright-50); }
.link { color: var(--color--background--bright); font-weight: var(--weight--medium); }

/* ---------- Pre-JS hidden state (like the reference) ---------- */
html.js:not(.anim-ready) :is(.page-eyebrow, .hero-cut, .h-ultra, .navbar, .scroll-arrow) { visibility: hidden; }

/* ======================= Breakpoints ======================= */
@media screen and (max-width: 991px) {
  body { font-size: 1.3vw; }
  .h-big { font-size: 6.3em; }
  .hero-machine { grid-column: 2 / 12; }
  .service-tag { width: 66.6667%; }
}
@media screen and (max-width: 767px) {
  body { font-size: 1.7vw; }
  .main-container { width: var(--full-width-site--mobile); }
  .white-stripe.thin { width: 5vw; }
  .hero-subtitle { grid-area: 2 / 1 / 3 / 13; padding-left: 0; }
  .hero-machine { grid-column: 1 / 13; transform: scale(.9); }
  .hero-machine-container { height: 100svh; }
  .big-quote-text-container { grid-area: 1 / 1 / 2 / 13; }
  .team-item-wrapper { grid-column: span 6; }
}
@media screen and (max-width: 479px) {
  body { font-size: 2vw; }
  .hero-home-container { height: 100svh; }
  .huge-title-container { grid-column-end: 13; }
  .hero-subtitle { grid-row: 2; grid-column-start: 1; }
  .hero-machine { transform: scale(.85); transform-origin: -30%; }
  .large-paragraph { font-size: 2.8em; }
  .h-medium { font-size: 2.5em; }
  .normal-pragraph { font-size: 1.85em; }
  .normal-pragraph.header { font-size: 1.7em; }
  .small-pragraph { font-size: 1.5em; }
  .small-pragraph.bold-text { font-size: 1.45em; }
  .logo-container { width: 10.5em; }
  .hbig-container { grid-column: 1 / 13; padding: 4em 0; }
  .subtitle-sum-wrapper { grid-area: 2 / 1 / 3 / 13; border-left: 0; border-top: 1px solid var(--color--brand-50); }
  .subtitle-sum-wrapper.darkmode { border-top-color: var(--color--accent--bright-50); }
  .subtitle-summary, .inde-container { padding-left: 0; }
  .value-item { grid-column: span 12; padding-bottom: 7em; border-right: 0; }
  .dark-back-wrapper { width: 100vw; overflow: clip; }
  .vert-line-brand { display: none; }
  .services-item .service-item-text, .services-item.alt .service-item-text { grid-area: 1 / 1 / 2 / 13; padding-bottom: 7em; }
  .services-item .image-vert, .services-item.alt .image-vert { grid-area: 2 / 2 / 3 / 12; }
  .service-tag { width: 100%; }
  .service-tag-text.reverse { text-align: left; }
  .service-text { width: 100%; padding: 2em 0 1em 1em; }
  .team-modal { z-index: 30; }
  .team-card { grid-column: 1 / 13; grid-template-columns: repeat(12, 1fr); }
  .team-card .image-vert { grid-area: 2 / 2 / 3 / 12; }
  .team-tag-card { position: static; grid-column-end: 9; }
  .team-card-desc { grid-area: 3 / 2 / 4 / 12; padding-top: 2em; }
  .story-index-item { margin-top: -3em; }
  .s1.story-tag { grid-area: 1 / 1 / 2 / 9; } .s1.image-vert { grid-area: 2 / 1 / 3 / 10; align-self: center; } .s1.story-item-text { grid-area: 3 / 1 / 4 / 10; }
  .s2.story-tag { grid-area: 1 / 11 / 2 / 19; } .s2.image-vert { grid-area: 2 / 11 / 3 / 20; align-self: center; } .s2.story-item-text { grid-area: 3 / 11 / 4 / 20; }
  .s3.story-tag { grid-area: 1 / 21 / 2 / 29; } .s3.image-vert { grid-area: 2 / 21 / 3 / 30; align-self: center; } .s3.story-item-text { grid-area: 3 / 21 / 4 / 30; }
  .s4.story-tag { grid-area: 1 / 31 / 2 / 39; } .s4.image-vert { grid-area: 2 / 31 / 3 / 40; align-self: center; } .s4.story-item-text { grid-area: 3 / 31 / 4 / 40; }
  .story-item-text { padding-top: 4em; }
  .image-vert.land { margin-top: 4em; }
  .machine-2 { top: 7em; height: 100vh; justify-content: center; overflow: clip; }
  .last-machine-container { position: relative; height: auto; flex-flow: column; left: -1em; transform: scale(1.5); }
  .contact-btn.footer { border-radius: 1.5em; padding: .6em 1.5em; font-size: 16px; }
  .form-block { grid-row-end: 2; grid-column-end: 13; padding-bottom: 7em; }
  .fotter-right { grid-area: 2 / 1 / 3 / 13; }
  .text-field { font-size: 16px; height: 2.4em; }
  .text-field.message { height: 6em; }
  .text-field::placeholder { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mask, .transition-layout { display: none; }
}

/* ======================= Multi-page additions ======================= */

/* ---------- Accessibility: skip link + visible keyboard focus ---------- */
.skip-link { position: fixed; top: .8em; left: .8em; z-index: 200; padding: .7em 1.2em; border-radius: 2em; background: var(--color--accent--dark); color: #fff; text-decoration: none; transform: translateY(-200%); transition: transform .2s; }
.skip-link:focus { transform: none; }
[dir="rtl"] .skip-link { left: auto; right: .8em; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.text-field:focus-visible { outline: none; border-bottom-color: currentColor; box-shadow: 0 1px 0 currentColor; }
.team-item:focus-visible { outline-offset: -4px; }
.main-wrapper:focus { outline: none; }

/* ---------- Navigation links + phone menu ---------- */
.nav-links { display: flex; align-items: center; gap: var(--spacing--xxs); color: var(--color--accent--navbar); }
.nav-links a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.2, .7, .2, 1); padding-bottom: .1em; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background-size: 100% 1px; }
.lang-btn a:hover { text-decoration: underline; }
.menu-btn { display: none; align-items: center; gap: .5em; padding: .45em 1.2em .4em; border: 1px solid currentColor; border-radius: var(--spacing--xxxs); background: transparent; color: var(--color--accent--navbar); font: inherit; cursor: pointer; }
.menu-btn-icon { width: 1em; height: .55em; border-block: 1px solid currentColor; transition: transform .4s; }
html.menu-open .menu-btn-icon { transform: scaleY(0); }
html.menu-open .navbar { --color--accent--navbar: #ffffff; }
.site-menu { position: fixed; inset: 0; z-index: 3; visibility: hidden; color: #fff; }
.menu-stripes { position: absolute; inset: 0; display: flex; }
.menu-stripe { flex: 1; height: 0; background: var(--texture--brand); }
.menu-inner { position: relative; height: 100%; display: flex; flex-flow: column; justify-content: flex-end; padding-bottom: 3em; margin: 0 auto; }
.menu-links { list-style: none; margin: 0 0 3em; padding: 0; }
.menu-links li { overflow: clip; border-top: 1px solid #ffffff40; }
.menu-links a { display: flex; justify-content: space-between; align-items: baseline; padding: .25em 0 .15em; color: #fff; text-decoration: none; font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 5.2em; line-height: 1.05; }
.menu-links a span { font-family: var(--fonts--paragraphs); font-size: .2em; font-weight: var(--weight--medium); }
.menu-foot { display: flex; flex-flow: column; gap: .3em; }
.menu-foot a { color: #fff; }

/* ---------- Inner-page hero ---------- */
.hero-home-container.page-hero { height: 82vh; min-height: 34em; }
.page-hero .hero-text-container { padding-bottom: var(--spacing--small); }
.page-eyebrow { grid-column: 1 / 13; display: flex; align-items: center; gap: .8em; margin-bottom: 1.6em; color: #fff; }
.page-eyebrow::before { content: ""; width: 2.4em; height: 1px; background: currentColor; }
.page-hero .huge-title-container { grid-row: 2; }
.page-hero .hero-subtitle { grid-row: 2; align-self: end; }
.list-row-text .more-link { margin-top: 1.2em; }

/* Angled photo panels (the slanted cuts from the company profile). Panels lean in parallel (skew),
   the photo inside is counter-skewed so it stays upright. They sit between the navbar and the text. */
.hero-cuts { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-cut { position: absolute; transform: skewX(-14deg); }
.hero-cut .cut-inner { width: 100%; height: 100%; overflow: hidden; }
.hero-cut .cut-img { width: 100%; height: 100%; transform: skewX(14deg) scale(1.45); }
.hero-cut img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.25) contrast(1.05) brightness(.97); }
.hero-cut.c1 { right: 7vw; top: 6.5em; width: 21vw; bottom: 13.5em; }
.hero-cut.c2 { right: 31vw; top: 12em; width: 9vw; height: 38%; }

/* ---------- Statement with a side label (inner pages) ---------- */
.hero-statement .statement-label { margin-bottom: 2.4em; display: flex; align-items: center; gap: .8em; }
.hero-statement .statement-label::before { content: ""; width: 2.4em; height: 1px; background: currentColor; }

/* ---------- Stats ---------- */
.stats-block { position: relative; z-index: 2; padding: var(--spacing--large) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--color--brand-50); }
.stat-item { position: relative; padding: 1.4em 1.4em 2.2em; border-left: 1px solid var(--color--brand-50); display: flex; flex-flow: column; gap: 4em; justify-content: space-between; }
.stat-item:first-child { border-left: 0; padding-left: 0; }
.stat-item::before, .list-row::before, .contact-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--color--brand-50); transform: scaleX(var(--rule, 1)); transform-origin: left; }
.stat-num { font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 6.6em; line-height: 1; color: var(--color--brand); }
.stat-label { max-width: 18em; }

/* ---------- Numbered list rows (story, group, how-we-work) ---------- */
.list-block { position: relative; z-index: 2; padding: var(--spacing--medium) 0 var(--spacing--large); }
.list-row { position: relative; display: grid; grid-template-columns: minmax(auto, 1fr) repeat(11, 1fr); padding: 2.2em 0 3em; }
.list-row:last-child { border-bottom: 1px solid var(--color--brand-50); }
.list-row-num { grid-column: 1 / 2; padding-top: .5em; }
.list-row-title { grid-column: 2 / 7; padding-right: 2em; }
.list-row-title .h-medium { color: var(--color--brand); }
.list-row-title .small-pragraph { margin-top: .6em; opacity: .7; }
.list-row-text { grid-column: 7 / 13; }
.darkmode-list { color: var(--color--accent--bright); }
.darkmode-list .list-row::before { background: var(--color--accent--bright-50); }
.darkmode-list .list-row:last-child { border-bottom-color: var(--color--accent--bright-50); }
.darkmode-list .list-row-title .h-medium { color: var(--color--accent--bright); }

/* ---------- Contact rows ---------- */
.contact-rows { position: relative; z-index: 2; padding: var(--spacing--large) 0; }
.contact-row { position: relative; display: grid; grid-template-columns: minmax(auto, 1fr) repeat(11, 1fr); align-items: center; padding: 2em 0; color: inherit; text-decoration: none; }
.contact-row:last-child { border-bottom: 1px solid var(--color--brand-50); }
.contact-row .small-pragraph { grid-column: 1 / 4; }
.contact-row-value { grid-column: 4 / 12; font-family: var(--fonts--headings); font-weight: var(--weight--book); font-size: 3.44em; line-height: 1.15; color: var(--color--brand); }
.contact-row-value small { display: block; font-family: var(--fonts--paragraphs); font-size: .32em; color: var(--color--text); opacity: .7; margin-top: .3em; }
.contact-row-arrow { grid-column: 12 / 13; justify-self: end; width: 2.6em; height: 2.6em; border: 1px solid var(--color--brand-50); border-radius: 50%; display: grid; place-items: center; color: var(--color--brand); transition: background .35s, color .35s, transform .35s; }
a.contact-row:hover .contact-row-arrow { background: var(--color--brand); color: #fff; transform: rotate(-45deg); }

/* ---------- Globe section (Partners) ---------- */
/* The slider normally tucks up under a full-screen photo; without one above it, it starts in place */
.turing-slider.no-overlap { margin-top: 0; }
.globe-section { position: relative; z-index: 2; padding: var(--spacing--large) 0; color: var(--color--accent--bright); }
.globe-section-grid { display: grid; grid-template-columns: minmax(auto, 1fr) repeat(11, 1fr); align-items: center; }
.globe-copy { grid-column: 1 / 6; display: flex; flex-flow: column; gap: 3em; }
.globe-copy .h-big { color: var(--color--accent--bright); }
.globe-section-host { grid-column: 6 / 13; height: 46em; position: relative; }
.list-layout { align-items: start; }
.list-layout .globe-copy { grid-column: 1 / 7; padding-right: 4em; }
.country-col { grid-column: 8 / 13; padding-top: 1em; }
.country-list li { font-size: 1.4em; padding: 1.1em 0; }
.globe-section-host canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.country-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color--accent--bright-50); }
.country-list li { display: flex; justify-content: space-between; padding: .9em 0; border-bottom: 1px solid var(--color--accent--bright-50); }
.country-list li span:last-child { opacity: .6; }

/* ---------- Buttons and links ---------- */
.pill-btn { display: inline-flex; align-items: center; gap: .7em; padding: .8em 1.6em .75em; border-radius: 2em; background: var(--color--brand); color: #fff; text-decoration: none; transition: background .3s; }
.pill-btn:hover { background: var(--color--brand-deep); }
.pill-btn.light { background: #fff; color: var(--color--brand); }
.pill-btn.light:hover { background: var(--color--accent--bright); }
.more-link { display: inline-flex; align-items: center; gap: .5em; color: var(--color--brand); text-decoration: none; }
.more-link::after { content: "\2192"; transition: transform .35s; }
.more-link:hover::after { transform: translateX(.35em); }
.darkmode .more-link { color: var(--color--accent--bright); }
.subtitle-summary.with-link { flex-flow: column; align-items: flex-start; gap: 1.6em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1em; margin-top: 1em; }
select.text-field { appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white'/%3E%3C/svg%3E") no-repeat right .7em center; }
select.text-field option { color: #26231b; }

/* ---------- Breakpoints for the additions ---------- */
@media screen and (max-width: 991px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .globe-copy, .list-layout .globe-copy { grid-column: 1 / 13; padding-right: 0; }
  .country-col { grid-column: 1 / 13; padding-top: 3em; }
  .globe-section-host { grid-column: 1 / 13; height: 70vw; }
}
@media screen and (max-width: 767px) {
  .nav-links, .lang-btn { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-home-container.page-hero { height: 88svh; }
  .hero-cut.c1 { right: 6vw; top: 6.5em; width: 42vw; bottom: auto; height: 36%; }
  .hero-cut.c2 { right: 52vw; top: 11em; width: 20vw; height: 24%; }
  .page-hero .hero-subtitle { grid-row: 3; }
  .list-row-title { grid-column: 2 / 13; }
  .list-row-text { grid-column: 2 / 13; padding-top: 1.4em; }
  .contact-row .small-pragraph { grid-column: 1 / 13; }
  .contact-row-value { grid-column: 1 / 11; font-size: 2.6em; margin-top: .3em; }
  .contact-row-arrow { grid-column: 11 / 13; }
}
@media screen and (max-width: 479px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-left: 0; padding-left: 0; gap: 2em; }
  .stat-num { font-size: 5.6em; }
  .menu-links a { font-size: 4.6em; }
  .globe-section-host { height: 90vw; }
}

/* Self-hosted Arabic face (IBM Plex Sans Arabic, SIL Open Font License, Arabic subset only; Latin falls
   back to Inter Tight). Arabic pages preload 300 + 400 so text doesn't re-flow when the font arrives. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-300-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }

/* ======================= Arabic (right-to-left) =======================
   Arabic pages: <html lang="ar" dir="rtl">. The 12-column grid mirrors by itself in RTL;
   this block mirrors the one-sided rules (borders, paddings, positions, arrows) and sets Arabic type. */
html[lang="ar"] {
  --fonts--paragraphs: "IBM Plex Sans Arabic", "Inter Tight", Arial, sans-serif;
  --fonts--headings: "IBM Plex Sans Arabic", "Inter Tight", Arial, sans-serif;
  --weight--book: 300;
  --weight--regular: 400;
  --weight--medium: 500;
}
/* Arabic needs more vertical room than Latin (taller ascenders, deeper descenders), and never letter-spacing */
html[lang="ar"] .h-ultra { font-size: 6.4em; line-height: 1.35; }
html[lang="ar"] .h-big { line-height: 1.35; }
html[lang="ar"] .large-paragraph { line-height: 1.6; }
html[lang="ar"] .h-medium { line-height: 1.45; }
html[lang="ar"] .normal-pragraph, html[lang="ar"] .small-pragraph { line-height: 1.7; }
html[lang="ar"] .stat-num, html[lang="ar"] .contact-row-value { line-height: 1.3; }
html[lang="ar"] .contact-row-value { direction: ltr; text-align: right; unicode-bidi: plaintext; }
html[lang="ar"] .menu-links a { line-height: 1.4; }
html[lang="ar"] * { letter-spacing: 0 !important; }
/* Off-screen pieces (slide-in tags, the horizontal slider) must never widen the page. In RTL, Chromium
   otherwise scrolls the whole document sideways. 'clip' (unlike 'hidden') keeps sticky sections working;
   it goes on the wrapper only: on html/body it would turn the body into a scroll container. */
html[dir="rtl"] .page-wrapper { overflow-x: clip; }
html[lang="ar"] .split-line-mask, html[lang="ar"] .split-word-mask { padding: .14em 0 .32em; margin: -.14em 0 -.32em; }

/* Mirrored one-sided rules */
/* Phone numbers and emails read left-to-right inside Arabic text (otherwise "+964 780 055 0000"
   flips to "0000 055 780 964+"). The whole-row contact links keep their RTL layout. */
[dir="rtl"] a[href^="tel:"]:not(.contact-row), [dir="rtl"] a[href^="mailto:"]:not(.contact-row) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .menu-foot { align-items: flex-start; } /* keep the menu contact lines on the right */
[dir="rtl"] .subtitle-sum-wrapper { border-left: 0; border-right: 1px solid var(--color--brand-50); }
[dir="rtl"] .subtitle-sum-wrapper.darkmode { border-right-color: var(--color--accent--bright-50); }
[dir="rtl"] .inde-container, [dir="rtl"] .subtitle-summary { padding-left: 0; padding-right: var(--spacing--xs); }
[dir="rtl"] .hero-subtitle { padding-left: 0; padding-right: 8em; }
[dir="rtl"] .scroll-arrow { right: auto; left: .5em; }
[dir="rtl"] .value-item { border-right: 0; border-left: 1px solid var(--color--brand-50); }
[dir="rtl"] .value-item.right { border-left-width: 0; }
[dir="rtl"] .value-tag { padding: var(--spacing--xxxs) var(--spacing--xxs) var(--spacing--xxxs) 0; }
[dir="rtl"] .service-number-tag { padding-right: 0; padding-left: var(--font-padding--large); }
[dir="rtl"] .service-tag-text { padding: var(--spacing--small) var(--spacing--xxxs) var(--spacing--xs) 0; }
[dir="rtl"] .service-tag-text.reverse { padding-right: 0; padding-left: var(--spacing--xxxs); text-align: left; }
[dir="rtl"] .service-num { right: auto; left: 0; padding: var(--font-padding--medium) 0 0 var(--font-padding--medium); }
[dir="rtl"] .service-text { padding: 0 var(--spacing--xxxs) var(--spacing--medium) var(--font-padding--large); }
[dir="rtl"] .team-tag { padding: var(--font-padding--medium) var(--font-padding--medium) var(--font-padding--medium) 0; }
[dir="rtl"] .team-tag-txt { padding-right: 0; padding-left: var(--spacing--xs); }
[dir="rtl"] .card-border { right: auto; left: 0; margin-right: 0; margin-left: -3em; }
[dir="rtl"] .close-btn { margin-left: 0; margin-right: -3em; }
[dir="rtl"] .close-btn-x { margin-left: 0; margin-right: var(--font-padding--medium); }
[dir="rtl"] .team-tag-card { padding: var(--spacing--xs) var(--spacing--xs) var(--font-padding--large) 0; }
[dir="rtl"] .team-card-desc { padding: 0 var(--spacing--xxs) var(--spacing--xs) 0; }
[dir="rtl"] .turing-slider { padding-left: 0; padding-right: 3vw; }
[dir="rtl"] .story-index-item { transform: translateX(.25em); }
[dir="rtl"] .story-tag-text { padding: var(--spacing--small) var(--spacing--xxxs) var(--spacing--xs) 0; }
[dir="rtl"] .story-item-text { padding: 0 var(--spacing--xxxs) 0 var(--font-padding--large); }
[dir="rtl"] .inde-container.contact { border-left: 0; border-right: 1px solid var(--color--accent--bright-50); }
[dir="rtl"] .stat-item { border-left: 0; border-right: 1px solid var(--color--brand-50); }
[dir="rtl"] .stat-item:first-child { border-right: 0; padding-left: 1.4em; padding-right: 0; }
[dir="rtl"] .list-row-title { padding-right: 0; padding-left: 2em; }
[dir="rtl"] .list-layout .globe-copy { padding-right: 0; padding-left: 4em; }
[dir="rtl"] .more-link::after { content: "\2190"; }
[dir="rtl"] .more-link:hover::after { transform: translateX(-.35em); }
[dir="rtl"] .contact-row-arrow { transform: scaleX(-1); }
[dir="rtl"] a.contact-row:hover .contact-row-arrow { transform: scaleX(-1) rotate(-45deg); }
[dir="rtl"] select.text-field { background-position: left .7em center; }
[dir="rtl"] .hero-cut { transform: skewX(14deg); }
[dir="rtl"] .hero-cut .cut-img { transform: skewX(-14deg) scale(1.45); }
[dir="rtl"] .hero-cut.c1 { right: auto; left: 7vw; }
[dir="rtl"] .hero-cut.c2 { right: auto; left: 31vw; }
/* drawings are not text: keep them left-to-right so their scan windows and labels stay registered */
[dir="rtl"] .machine-2-container, [dir="rtl"] .value-graphic-container, [dir="rtl"] .logo-container { direction: ltr; }

@media screen and (max-width: 767px) {
  [dir="rtl"] .hero-subtitle { padding-right: 0; }
  [dir="rtl"] .hero-cut.c1 { left: 6vw; right: auto; }
  [dir="rtl"] .hero-cut.c2 { left: 52vw; right: auto; }
}
@media screen and (max-width: 479px) {
  [dir="rtl"] .subtitle-sum-wrapper { border-right: 0; }
  [dir="rtl"] .subtitle-summary, [dir="rtl"] .inde-container { padding-right: 0; }
  [dir="rtl"] .value-item { border-left: 0; }
  [dir="rtl"] .service-tag-text.reverse { text-align: right; }
  [dir="rtl"] .service-text { padding: 2em 1em 1em 0; }
  [dir="rtl"] .stat-item { border-right: 0; padding-right: 0; }
}
@media screen and (max-width: 991px) {
  [dir="rtl"] .stat-item:nth-child(3) { border-right: 0; padding-right: 0; }
}