/* ============================================================
   Arab Company for Calcium Carbonate — alarabiastone.com
   Design system: "Industrial Luxury"
   Ink navy · Limestone bone · Pyramid gold
   ============================================================ */

:root{
  --ink:#101B3E;
  --ink-2:#16234E;
  --ink-3:#1E2C5E;
  --bone:#F6F4EF;
  --bone-2:#EFECE4;
  --white:#FFFFFF;
  --gold:#D9A62E;
  --gold-deep:#B8860B;
  --graphite:#23262E;
  --muted:#5B6172;
  --muted-l:#9BA3B8;
  --line:rgba(16,27,62,.13);
  --line-d:rgba(246,244,239,.14);
  --font-d:'Archivo',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --radius:14px;
  --shadow:0 18px 50px -24px rgba(16,27,62,.28);
  --wrap:1240px;
  --ease:cubic-bezier(.22,.7,.24,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);
  color:var(--graphite);
  background:var(--bone);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none}
::selection{background:var(--gold);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-d);color:var(--ink);line-height:1.14;letter-spacing:-.022em;font-weight:800}
.h-display{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.3rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:-.015em}
.lead{font-size:clamp(1rem,1.2vw,1.12rem);color:var(--muted);max-width:46rem}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white)}
.on-dark .lead{color:var(--muted-l)}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-d);font-size:.74rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--gold)}
.on-dark .eyebrow{color:var(--gold)}

.sec-num{
  font-family:var(--font-d);font-weight:600;font-size:.78rem;
  letter-spacing:.18em;color:var(--muted-l);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-d);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  padding:15px 30px;border-radius:999px;border:1.5px solid transparent;
  transition:all .3s var(--ease);white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn-ink{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-ink:hover{background:transparent;color:var(--ink)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--white)}
.on-dark .btn-ghost{border-color:var(--line-d);color:var(--white)}
.on-dark .btn-ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-sm{padding:10px 20px;font-size:.83rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,244,239,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.site-header.scrolled{box-shadow:0 10px 30px -18px rgba(16,27,62,.25)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-text strong{font-family:var(--font-d);font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.brand-text small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}
.nav>a{
  font-family:var(--font-d);font-size:.86rem;font-weight:600;color:var(--ink);
  letter-spacing:.01em;position:relative;padding:6px 0;
}
.nav>a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);
  transition:width .3s var(--ease);
}
.nav>a:not(.nav-cta):hover::after,.nav>a.active::after{width:100%}
.nav-cta{margin-left:8px}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;z-index:110}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);transition:all .3s var(--ease)}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--ink);color:var(--white);overflow:hidden;
}
.hero .wrap{position:relative;z-index:2}
.hero-in{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center;
  padding-block:clamp(84px,11vw,150px);
}
.hero-copy .h-display{color:var(--white);margin-bottom:26px}
.hero-copy .h-display em{font-style:normal;color:var(--gold)}
.hero-copy .lead{color:var(--muted-l);margin-bottom:38px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative}
.hero-bg{
  position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none;
}
.hero-stats{
  position:relative;z-index:2;
  border-top:1px solid var(--line-d);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hero-stat{
  padding:26px clamp(14px,2vw,34px);border-right:1px solid var(--line-d);
}
.hero-stat:last-child{border-right:none}
.hero-stat b{
  display:block;font-family:var(--font-d);font-weight:800;
  font-size:clamp(1.25rem,2.1vw,1.68rem);color:var(--gold);letter-spacing:-.02em;
}
.hero-stat span{font-size:.8rem;color:var(--muted-l);letter-spacing:.06em;text-transform:uppercase}

/* Page hero (interior pages) */
.page-hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:2}
.page-hero-in{padding-block:clamp(68px,8vw,110px);max-width:56rem}
.page-hero h1{color:var(--white);font-size:clamp(1.9rem,3.7vw,2.9rem);margin-bottom:20px}
.page-hero .lead{color:var(--muted-l)}
.crumbs{display:flex;gap:10px;font-size:.8rem;color:var(--muted-l);margin-bottom:30px;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.5}

/* ---------- Photo hero (page-hero with background photograph) ---------- */
.hero-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 58%;
}
.page-hero--photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(16,27,62,.86) 0%, rgba(16,27,62,.70) 30%, rgba(16,27,62,.44) 62%, rgba(16,27,62,.28) 100%),
    linear-gradient(180deg, rgba(16,27,62,.42) 0%, rgba(16,27,62,.06) 42%, rgba(16,27,62,.52) 100%);
}
[dir="rtl"] .page-hero--photo::after{
  background:
    linear-gradient(270deg, rgba(16,27,62,.86) 0%, rgba(16,27,62,.70) 30%, rgba(16,27,62,.44) 62%, rgba(16,27,62,.28) 100%),
    linear-gradient(180deg, rgba(16,27,62,.42) 0%, rgba(16,27,62,.06) 42%, rgba(16,27,62,.52) 100%);
}
.page-hero--photo .page-hero-in{padding-block:clamp(84px,10vw,140px)}
/* lighter overlay means the muted lead needs lifting to stay legible over the photo */
.page-hero--photo .lead{color:rgba(255,255,255,.93)}
.page-hero--photo h1,.page-hero--photo .lead{text-shadow:0 1px 18px rgba(16,27,62,.45)}
.page-hero--photo .crumbs{color:rgba(255,255,255,.75)}
@media (max-width:760px){
  .page-hero--photo::after,[dir="rtl"] .page-hero--photo::after{
    background:linear-gradient(180deg, rgba(16,27,62,.88) 0%, rgba(16,27,62,.80) 45%, rgba(16,27,62,.92) 100%);
  }
  .hero-photo{object-position:52% 56%}
}

/* ---------- Photo band (framed image inside a light section) ---------- */
.photo-band{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--bone-2);
  aspect-ratio:24/10;margin-bottom:clamp(20px,2.6vw,36px);
}
.photo-band img{
  width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block;
  transition:transform 1.3s var(--ease);
}
.photo-band:hover img{transform:scale(1.035)}
.photo-band figcaption{
  position:absolute;inset-inline:0;bottom:0;z-index:2;
  padding:clamp(22px,3vw,34px);
  background:linear-gradient(180deg,rgba(16,27,62,0) 0%,rgba(16,27,62,.55) 45%,rgba(16,27,62,.88) 100%);
  color:var(--white);font-size:.92rem;
}
.photo-band figcaption b{
  font-family:var(--font-d);display:block;color:var(--white);
  font-size:1.02rem;margin-bottom:3px;
}
@media (max-width:760px){
  .photo-band{aspect-ratio:4/3}
  .photo-band figcaption{font-size:.85rem}
}
/* Spam honeypot — must stay in the DOM but never visible or focusable */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Extra-wide variant for letterbox photography */
.photo-band--wide{aspect-ratio:28/10}
.photo-band--wide img{object-position:50% 50%}
@media (max-width:760px){
  .photo-band--wide{aspect-ratio:19/10}
}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(72px,9vw,130px)}
.sec-tight{padding-block:clamp(52px,6vw,84px)}
.sec-dark{background:var(--ink);color:var(--white)}
.sec-white{background:var(--white)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(38px,5vw,64px);flex-wrap:wrap}
.sec-head .lead{margin-top:16px}

/* ---------- Stats band ---------- */
.stats-band{background:var(--white);border-block:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats-grid--two{grid-template-columns:repeat(2,1fr)}
.stats-grid--two .stat-cell{
  min-height:0;padding:24px 16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.stats-grid--two .stat-cell b{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.stats-grid--compact .stat-cell{padding:24px 16px}
.stats-grid--compact .stat-cell b{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.stat-cell{padding:clamp(30px,4vw,52px) clamp(16px,2.4vw,40px);border-right:1px solid var(--line);text-align:left}
.stat-cell:last-child{border-right:none}
.stat-cell b{display:block;font-family:var(--font-d);font-weight:800;font-size:clamp(1.6rem,2.8vw,2.3rem);color:var(--ink);letter-spacing:-.03em;line-height:1}
.stat-cell b>span{display:inline;margin-top:0;font-size:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.stat-cell b sup{font-size:.45em;color:var(--gold-deep);letter-spacing:0}
.stat-cell span{display:block;margin-top:10px;font-size:.82rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Cards ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,40px);position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(16,27,62,.22)}

/* Category split cards */
.split-card{
  display:flex;flex-direction:column;gap:22px;min-height:380px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(30px,3.6vw,48px);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.split-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.split-card .tag{align-self:flex-start}
.split-card h3{font-size:clamp(1.25rem,1.9vw,1.55rem)}
.split-card p{color:var(--muted);max-width:34rem}
.split-card .chips{margin-top:auto}
.split-card .card-arrow{
  /* inset-inline-end, not right — in RTL the tag starts at the right edge, so a
     hard-coded right:30px lands the arrow on top of it. */
  position:absolute;top:30px;inset-inline-end:30px;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;
  transition:all .35s var(--ease);
}
/* Keep the tag clear of the arrow at every width. */
.split-card .tag{margin-inline-end:56px}
.split-card:hover .card-arrow{background:var(--gold);border-color:var(--gold)}
.split-card .card-arrow svg{width:17px;height:17px}

.tag{
  display:inline-block;font-family:var(--font-d);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:999px;
}
.tag-gold{background:rgba(217,166,46,.14);color:var(--gold-deep)}
.tag-ink{background:rgba(16,27,62,.07);color:var(--ink)}
.tag-dark{background:rgba(246,244,239,.1);color:var(--gold)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:.76rem;font-weight:500;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:var(--bone);
}
.chip-solid{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* ---------- Product cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.pcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;gap:18px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.micron-ring{width:92px;height:92px;flex-shrink:0}
.micron-ring circle.ring{fill:rgba(217,166,46,.09);stroke:var(--gold);stroke-width:1.6}
.micron-ring text{font-family:var(--font-d);font-weight:800;fill:var(--ink)}
.micron-ring .unit{font-weight:500;fill:var(--muted);font-size:9px;letter-spacing:.05em}
.pcard h3{font-size:1.18rem}
.pcard .pseries{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;font-family:var(--font-d);margin-bottom:5px;display:block}
.pcard p{font-size:.92rem;color:var(--muted)}
.pcard-specs{display:flex;gap:0;border-block:1px solid var(--line)}
.pcard-specs div{flex:1;padding:12px 8px;text-align:center;border-right:1px solid var(--line)}
.pcard-specs div:last-child{border-right:none}
.pcard-specs b{display:block;font-family:var(--font-d);font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.pcard-specs span{font-size:.68rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
/* µ must never be uppercased — CSS turns it into Greek capital Mu, which reads as "M" (i.e. mm) */
.pcard-specs span i,.unit-lc{text-transform:none;font-style:normal}
.pcard-actions{display:flex;gap:10px;margin-top:auto}
.pcard-actions .btn{flex:1;padding:12px 10px;font-size:.8rem}

/* Filter toggle */
.filter-bar{display:flex;justify-content:center;margin-bottom:clamp(34px,4vw,54px)}
.toggle{
  display:inline-flex;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:5px;gap:4px;
}
.toggle button{
  font-family:var(--font-d);font-weight:600;font-size:.88rem;color:var(--muted);
  padding:11px 26px;border-radius:999px;transition:all .3s var(--ease);
}
.toggle button.active{background:var(--ink);color:var(--white)}

/* ---------- Category panels (Products hub) ---------- */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px)}
.cat-card{
  position:relative;display:flex;flex-direction:column;gap:22px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(30px,3.6vw,52px);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.cat-card::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--gold);
  transition:width .55s var(--ease);
}
.cat-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(16,27,62,.22)}
.cat-card:hover::before{width:100%}
.cat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.cat-card h2{font-size:clamp(1.28rem,2vw,1.7rem);margin-top:14px}
.cat-card>p{color:var(--muted)}
.cat-viz{flex-shrink:0;width:clamp(64px,7vw,92px);height:clamp(64px,7vw,92px)}
.cat-card:hover .cat-viz circle:first-child{transform:rotate(90deg);transform-origin:center}
.cat-viz circle{transition:transform .8s var(--ease)}
.cat-stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.cat-stats div{padding:15px 6px;border-right:1px solid var(--line);text-align:center}
.cat-stats div:last-child{border-right:none}
.cat-stats b{display:block;font-family:var(--font-d);font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.cat-stats span{font-size:.66rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}
.cat-microns{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2}
.cat-microns a{
  font-family:var(--font-d);font-weight:700;font-size:.82rem;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;background:var(--bone);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.cat-microns a:hover{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.cat-cta{margin-top:auto}
.cat-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius)}

/* Deep-linked grade cards */
.pcard[id]{scroll-margin-top:182px}
.pcard:target{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,166,46,.18)}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:.94rem}
/* Only the full grade-comparison table (many columns, sticky first column)
   needs a forced minimum width — it's the one table meant to scroll.
   Small 2–3 column property tables should just fit their card. */
.table-sticky table{min-width:640px}
caption{text-align:left;padding:22px 26px 6px;font-family:var(--font-d);font-weight:700;font-size:1.05rem;color:var(--ink)}
[dir="rtl"] caption{text-align:right}
th,td{padding:15px 22px;text-align:left;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
thead th{
  font-family:var(--font-d);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);background:var(--bone);
  border-bottom:1.5px solid rgba(16,27,62,.2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(217,166,46,.05)}
td b{font-family:var(--font-d);color:var(--ink);font-weight:700}
.td-grade{font-family:var(--font-d);font-weight:700;color:var(--ink);white-space:nowrap}
.table-note{font-size:.82rem;color:var(--muted);margin-top:14px;max-width:52rem}

/* Sticky first column on scrollable tables */
.table-sticky th:first-child,.table-sticky td:first-child{
  position:sticky;left:0;background:var(--white);z-index:2;
  box-shadow:6px 0 12px -8px rgba(16,27,62,.12);
}
.table-sticky thead th:first-child{background:var(--bone)}

/* ---------- Industry sections ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.ind-tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;display:flex;flex-direction:column;gap:14px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ind-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ind-tile h3{font-size:1.02rem}
.ind-tile p{font-size:.84rem;color:var(--muted)}
.ind-grid--compact .ind-tile p{display:none}
.icon-badge{
  width:52px;height:52px;border-radius:14px;background:rgba(16,27,62,.06);
  display:grid;place-items:center;color:var(--ink);
}
.icon-badge svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ind-tile:hover .icon-badge{background:var(--gold);color:var(--ink)}

.ind-block{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,64px);padding-block:clamp(44px,5vw,64px);
  border-bottom:1px solid var(--line);scroll-margin-top:110px;
}
.ind-block:last-of-type{border-bottom:none}
.ind-block-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ind-block h2{font-size:clamp(1.28rem,2vw,1.65rem)}
.ind-body p{color:var(--muted);margin-bottom:20px}
.benefits{display:grid;gap:12px;margin-bottom:24px}
.benefits li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem}
.benefits li::before{
  content:"";flex-shrink:0;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101B3E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.subnav{
  position:sticky;top:78px;z-index:50;background:rgba(246,244,239,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.subnav-in{display:flex;gap:4px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{
  flex-shrink:0;font-family:var(--font-d);font-size:.8rem;font-weight:600;color:var(--muted);
  padding:9px 16px;border-radius:999px;transition:all .25s;
}
.subnav a:hover,.subnav a.active{background:var(--ink);color:var(--white)}

/* ---------- Process journey ---------- */
.process{display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:step}
.pstep{position:relative;padding:30px 20px 0;counter-increment:step}
.pstep::before{
  content:"0" counter(step);
  font-family:var(--font-d);font-weight:800;font-size:.8rem;letter-spacing:.1em;
  color:var(--gold);display:block;margin-bottom:14px;
}
.pstep::after{
  content:"";position:absolute;top:38px;left:20px;right:0;height:1px;background:var(--line-d);
}
.pstep:last-child::after{right:20px}
.pstep h3{font-size:.98rem;color:var(--white);margin-bottom:8px}
.pstep p{font-size:.8rem;color:var(--muted-l)}
.sec-dark .pstep::after{background:var(--line-d)}
.process-light .pstep h3{color:var(--ink)}
.process-light .pstep p{color:var(--muted)}
.process-light .pstep::after{background:var(--line)}

/* ---------- Grade selector (home) ---------- */
.selector-panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,40px);
}
.grade-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.grade-btns button{
  font-family:var(--font-d);font-weight:700;font-size:.95rem;color:var(--muted);
  width:58px;height:58px;border-radius:50%;border:1.5px solid var(--line);
  transition:all .3s var(--ease);
}
.grade-btns button.active{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.grade-btns button:hover:not(.active){border-color:var(--ink);color:var(--ink)}
.sel-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sel-specs div{background:var(--white);padding:16px 18px}
.sel-specs b{display:block;font-family:var(--font-d);font-size:1.3rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.sel-specs span{font-size:.74rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
/* The measured value lives in a <span> INSIDE <b>; the caption is the sibling
   <span>. The rule above is a descendant selector, so it was shrinking the
   number to caption size while the unit kept the full <b> size. */
.sel-specs b span{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.sel-viz{display:grid;place-items:center;min-height:260px}
.sel-viz svg{width:min(100%,280px)}
#selCircle{transition:r .5s var(--ease)}
.sel-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.cta-in{
  padding-block:clamp(64px,8vw,110px);position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.cta-in h2{color:var(--white);max-width:30ch}
.cta-in h2 em{font-style:normal;color:var(--gold)}
.cta-in p{color:var(--muted-l);margin-top:14px;max-width:44rem}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Quote strip / info rows ---------- */
.info-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.info-row{background:var(--white);padding:24px 30px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:baseline}
.info-row dt{font-family:var(--font-d);font-weight:700;color:var(--ink);font-size:.95rem}
.info-row dd{color:var(--muted);font-size:.95rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,60px);align-items:start}
.form-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3.4vw,44px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-d);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;color:var(--graphite);
  border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--bone);
  transition:border-color .25s,background .25s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--white);
}
.field textarea{min-height:120px;resize:vertical}
.form-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.form-note{font-size:.8rem;color:var(--muted);margin-top:16px}

.channel-list{display:grid;gap:14px}
.channel{
  display:flex;gap:18px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.channel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.channel .icon-badge{width:46px;height:46px;flex-shrink:0}
.channel b{font-family:var(--font-d);color:var(--ink);display:block;margin-bottom:4px}
.channel p,.channel a{font-size:.92rem;color:var(--muted);word-break:break-word}
.channel a:hover{color:var(--gold-deep)}
.map-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.map-frame iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(.35) contrast(1.02)}
.map-frame figcaption{padding:16px 22px;font-size:.88rem;color:var(--muted);border-top:1px solid var(--line)}
.map-frame figcaption b{font-family:var(--font-d);color:var(--ink);display:block;margin-bottom:2px}

/* ---------- Fact list (About) ---------- */
.fact-list{display:grid;max-width:26rem}
.fact-list>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 0;border-top:1px solid var(--line);
}
.fact-list>div:last-child{border-bottom:1px solid var(--line)}
.fact-list dt{font-size:.78rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.fact-list dd{font-family:var(--font-d);font-weight:700;color:var(--ink);font-size:.94rem;text-align:right}
.story-body p{color:var(--muted);margin-bottom:20px}
.story-body p:last-child{margin-bottom:0}
.story-body strong{color:var(--ink);font-weight:600}
.story-sign{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--muted);
}
.story-sign b{font-family:var(--font-d);color:var(--ink);display:block;font-size:1rem}

/* ---------- Branch locations (Contact) ---------- */
.branch-switch{
  display:inline-flex;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:5px;gap:4px;margin-bottom:clamp(26px,3vw,38px);
}
.branch-switch button{
  font-family:var(--font-d);font-weight:600;font-size:.9rem;color:var(--muted);
  padding:12px clamp(16px,2.4vw,30px);border-radius:999px;transition:all .3s var(--ease);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
.branch-switch button i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s}
.branch-switch button.active{background:var(--ink);color:var(--white)}
.branch-switch button.active i{background:var(--gold)}
.branch-switch button:hover:not(.active){color:var(--ink)}

.branch-panel{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(22px,2.8vw,40px);align-items:stretch;
}
.branch-panel[hidden]{display:none}
.branch-info{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:20px;
}
.branch-info h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.branch-meta{display:grid;gap:16px}
.branch-meta>div{display:flex;gap:15px;align-items:flex-start}
.branch-meta .icon-badge{width:40px;height:40px;border-radius:11px;flex-shrink:0}
.branch-meta .icon-badge svg{width:20px;height:20px}
.branch-meta b{
  font-family:var(--font-d);color:var(--ink);display:block;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;
}
.branch-meta p{color:var(--muted);font-size:.93rem;line-height:1.55}
.branch-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.branch-map{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bone-2);min-height:400px;
}
.branch-map iframe{width:100%;height:100%;min-height:400px;border:0;display:block;filter:grayscale(.28) contrast(1.03)}

@media (max-width:920px){
  .branch-panel{grid-template-columns:1fr}
  .branch-map,.branch-map iframe{min-height:300px}
  .branch-switch{width:100%;justify-content:center}
  .branch-actions .btn{flex:1}
}

/* ---------- News ---------- */
.news-card{display:flex;flex-direction:column;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3vw,38px);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.news-card .guide-kicker{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.news-card h3{font-size:1.25rem;line-height:1.25}
.news-card p{color:var(--muted);font-size:.95rem}
.news-card .read{margin-top:auto;font-family:var(--font-d);font-weight:700;font-size:.85rem;color:var(--gold-deep);display:inline-flex;align-items:center;gap:8px}
.news-card .read svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.news-card:hover .read svg{transform:translateX(4px)}

.article{max-width:46rem;margin-inline:auto}
.article-head{margin-bottom:44px}
.article h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.article-meta{display:flex;gap:16px;font-size:.82rem;color:var(--muted);margin-top:18px;letter-spacing:.06em;text-transform:uppercase}
.article-body p{margin-bottom:22px;color:#3A3E48}
.article-body h2{font-size:1.5rem;margin:40px 0 16px}
.article-body h3{font-size:1.15rem;margin:30px 0 12px}
.article-body ul{margin:0 0 22px;padding-left:2px;display:grid;gap:10px}
.article-body ul li{display:flex;gap:12px}
.article-body ul li::before{content:"—";color:var(--gold);font-weight:700;flex-shrink:0}
.article-body .table-scroll{margin-bottom:22px}
.article-body table{min-width:480px}
.callout{
  border-left:3px solid var(--gold);background:var(--white);
  padding:22px 26px;border-radius:0 var(--radius) var(--radius) 0;margin:28px 0;
  font-size:.96rem;color:var(--muted);
}
.callout b{color:var(--ink)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--muted-l)}
.footer-top{
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.9fr));
  gap:clamp(28px,4vw,56px);padding-block:clamp(56px,7vw,90px);
}
.footer-brand strong{font-family:var(--font-d);font-weight:800;font-size:1.25rem;color:var(--white);display:block;letter-spacing:-.01em}
.footer-brand small{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;margin-top:4px}
.footer-brand p{font-size:.9rem;margin-top:18px;max-width:30rem}
.footer-iso{display:inline-flex;align-items:center;gap:10px;margin-top:22px;border:1px solid var(--line-d);border-radius:999px;padding:9px 18px;font-size:.78rem;letter-spacing:.08em;color:var(--white)}
.footer-iso i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
.footer-col h4{color:var(--white);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;font-weight:700}
.footer-col ul{display:grid;gap:11px;font-size:.9rem}
.footer-col a:hover{color:var(--gold)}
.footer-col address{font-style:normal;font-size:.86rem;line-height:1.7}
.footer-col address b{color:var(--white);font-family:var(--font-d);font-size:.8rem;letter-spacing:.06em}
.footer-bottom{
  border-top:1px solid var(--line-d);padding-block:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.8rem;
}
.footer-bottom a:hover{color:var(--gold)}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .process{grid-template-columns:repeat(3,1fr);row-gap:26px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  /* backdrop-filter makes an element the containing block for fixed-position
     descendants, which would trap the full-screen menu inside the 78px header.
     Drop the blur below the menu breakpoint — it isn't perceptible here anyway. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bone)}
  .nav{
    position:fixed;inset:0;background:var(--ink);
    flex-direction:column;justify-content:flex-start;gap:8px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding:88px 20px 40px;
    opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:105;
  }
  /* Auto margins centre the menu when it fits and collapse when it doesn't,
     so on short screens it starts below the close button and scrolls instead
     of overflowing off the top. */
  .nav>:first-child{margin-top:auto}
  .nav>:last-child{margin-bottom:auto}
  .nav.open{opacity:1;pointer-events:auto}
  .nav>a{color:var(--white);font-size:1.35rem;padding:12px}
  .nav-cta{margin:18px 0 0}
  .nav-toggle{display:flex}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-toggle.open span{background:var(--white)}
  .hero-in{grid-template-columns:1fr;padding-block:clamp(64px,10vw,100px)}
  .hero-art{display:none}
  .hero-stats,.stats-grid{grid-template-columns:repeat(2,1fr)}
  .hero-stat:nth-child(2),.stat-cell:nth-child(2){border-right:none}
  .hero-stat,.stat-cell{border-bottom:1px solid var(--line-d)}
  .stats-band .stat-cell{border-bottom:1px solid var(--line)}
  .hero-stat:nth-child(n+3),.stat-cell:nth-child(n+3){border-bottom:none}
  .grid-2,.grid-3,.grid-4,.contact-grid,.selector-panel,.ind-block,.cat-grid{grid-template-columns:1fr}
  .info-row{grid-template-columns:1fr;gap:6px}
  .sel-viz{min-height:200px}
}
@media (max-width:620px){
  .pgrid,.ind-grid{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .pcard-actions{flex-direction:column}
  /* Keep the full company name in the header on phones — hiding this line left
     it reading "Arab Company" / "الشركة العربية", which is not the name. */
  .brand-text small{font-size:.6rem;letter-spacing:.1em}
  .hero-ctas .btn,.cta-actions .btn{width:100%}
}

/* ============================================================
   Responsive hardening
   ============================================================ */

/* Grid/flex children default to min-width:auto, so a wide child (e.g. a
   640px table inside .table-scroll) forces its track open and overflows
   the page. Allowing them to shrink lets the scroll containers do their job. */
.grid-2>*,.grid-3>*,.grid-4>*,.cat-grid>*,.pgrid>*,.ind-grid>*,
.contact-grid>*,.selector-panel>*,.ind-block>*,.branch-panel>*,
.footer-top>*,.stats-grid>*,.hero-stats>*,.hero-in>*,.cta-in>*,
.sec-head>*,.process>*{min-width:0}

/* nothing may exceed the viewport */
html,body{overflow-x:hidden}
img,svg,video,iframe,table{max-width:100%}
.article-body table,.table-scroll table{max-width:none} /* these scroll inside their wrapper */

/* long strings (emails, URLs, chemical names) must not push the page open */
.channel a,.footer-col address a,.branch-meta p,.article-body p,.info-row dd{overflow-wrap:anywhere}

/* Touch devices (phones + tablets — same breakpoint as the hamburger):
   larger tap targets and lifted micro-labels. */
@media (max-width:920px){
  .nav-toggle{min-width:46px;min-height:46px;align-items:center;justify-content:center;padding:11px 10px}
  .btn{min-height:46px}
  .nav>a{min-height:46px;display:flex;align-items:center;justify-content:center}
  .subnav a,.chip,.cat-microns a{min-height:40px;display:inline-flex;align-items:center}
  .grade-btns button{width:48px;height:48px}
  .lang-switch{min-height:44px}
  input,select,textarea{min-height:46px}
  .tag,.pcard-specs span,.cat-stats span,.sel-specs span,.stat-cell span,
  .hero-stat span,.chip,.guide-kicker,.article-meta,.fact-list dt,
  .pcard .pseries,.crumbs,.table-note,.form-note,.channel p,.channel a{font-size:.78rem}
  .subnav-in>span{font-size:.78rem!important} /* beats the inline style on the guide sub-nav */
  .eyebrow{font-size:.8rem}
  thead th{font-size:.76rem}
  .micron-ring .unit{font-size:11px}
}

@media (max-width:760px){
  /* footer collapsed to a single column — was 2-up and overflowed at 320px */
  .footer-top{grid-template-columns:1fr;gap:34px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}

  /* Keep the particle-size comparison as a real table while compressing the
     seven columns to the viewport, removing the need for horizontal scrolling. */
  .psd-table{overflow-x:hidden}
  .psd-table table{
    width:100%;max-width:100%;min-width:0;table-layout:fixed;
    font-size:clamp(.64rem,1.65vw,.82rem);
  }
  .psd-table caption{
    padding:16px 10px 9px;white-space:normal;line-height:1.5;
  }
  .psd-table th,.psd-table td{
    padding:10px 5px;text-align:center;line-height:1.35;
    white-space:normal;overflow-wrap:anywhere;
  }
  .psd-table thead th{
    font-size:clamp(.56rem,1.45vw,.68rem);letter-spacing:.03em;
  }
  .psd-table th:first-child,.psd-table td:first-child{
    position:static;left:auto;right:auto;box-shadow:none;text-align:start;
  }
  .psd-table th:nth-child(1),.psd-table td:nth-child(1){width:28%}
  .psd-table th:nth-child(2),.psd-table td:nth-child(2){width:14%}
  .psd-table th:nth-child(3),.psd-table td:nth-child(3),
  .psd-table th:nth-child(4),.psd-table td:nth-child(4),
  .psd-table th:nth-child(5),.psd-table td:nth-child(5){width:9%}
  .psd-table th:nth-child(6),.psd-table td:nth-child(6){width:18%}
  .psd-table th:nth-child(7),.psd-table td:nth-child(7){width:13%}
  .psd-table td:last-child a{font-size:inherit;white-space:normal}
  html[lang="ar"][dir="rtl"] .psd-table.table-sticky th:first-child,
  html[lang="ar"][dir="rtl"] .psd-table.table-sticky td:first-child{
    left:auto;right:auto;box-shadow:none;
  }
  html[lang="ar"] .psd-table thead th{
    letter-spacing:0;text-transform:none;
  }
}

@media (max-width:430px){
  .psd-table table{font-size:.66rem}
  .psd-table caption{padding:13px 8px 8px;font-size:.86rem}
  .psd-table th,.psd-table td{padding:8px 2px}
  .psd-table thead th{font-size:.55rem}
  .psd-table .td-grade{font-size:.64rem}
  .process{grid-template-columns:1fr}
  .stats-grid,.hero-stats{grid-template-columns:1fr}
  .stat-cell,.hero-stat{border-right:none!important;border-left:none!important}
  .stats-band .stat-cell:not(:last-child){border-bottom:1px solid var(--line)}
  .hero-stat:not(:last-child){border-bottom:1px solid var(--line-d)}
  .cat-stats{grid-template-columns:1fr}
  .cat-stats div{border-right:none;border-left:none;border-bottom:1px solid var(--line);text-align:left}
  .cat-stats div:last-child{border-bottom:none}
  .pcard-specs{flex-wrap:wrap}
  .form-actions .btn,.branch-actions .btn,.cat-cta .btn{width:100%}
  .branch-switch{flex-direction:column;width:100%}
  .branch-switch button{width:100%;justify-content:center}
}

@media (max-width:360px){
  .wrap{padding-inline:16px}
  body{font-size:15.5px}
  .brand img{width:40px;height:40px}
  .brand-text strong{font-size:.92rem}
}

/* ============================================================
   Language switcher
   ============================================================ */
.lang-switch{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-d);font-weight:700;font-size:.82rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  transition:all .25s var(--ease);white-space:nowrap;
}
.lang-switch:hover{border-color:var(--ink);color:var(--ink);background:var(--white)}
@media (max-width:920px){
  .nav .lang-switch{color:var(--white);border-color:var(--line-d);font-size:1.05rem}
  .nav .lang-switch:hover{background:var(--white);color:var(--ink)}
}

/* ============================================================
   Arabic (RTL) layer — applied on pages with html[lang="ar"][dir="rtl"]
   ============================================================ */
html[lang="ar"]{
  --font-d:'Cairo',system-ui,sans-serif;
  --font-b:'Cairo',system-ui,sans-serif;
}
html[lang="ar"] body{font-size:16px;line-height:1.85}

/* Cairo's ascenders, descenders and tashkil marks sit taller than Archivo's at
   the same font-size — the Latin heading line-height (1.06) clips them, so
   diacritics on one line collide with letters on the line below. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] .h-display{line-height:1.42}
/* Most stat-cell values are short numbers that never wrap, so line-height:1 is
   fine — but a word-based value like "فحص معملي" wraps to two lines at this
   font-size, and the same tight box then collides those two lines. */
[dir="rtl"] .stat-cell b,[dir="rtl"] .hero-stat b{line-height:1.3}

/* Connected script: letter-spacing must be neutralized everywhere */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .h-display,[dir="rtl"] .eyebrow,[dir="rtl"] .tag,[dir="rtl"] .chip,
[dir="rtl"] thead th,[dir="rtl"] .stat-cell span,[dir="rtl"] .hero-stat span,
[dir="rtl"] .pcard-specs span,[dir="rtl"] .cat-stats span,[dir="rtl"] .sel-specs span,
[dir="rtl"] .field label,[dir="rtl"] .footer-col h4,[dir="rtl"] .footer-brand small,
[dir="rtl"] .footer-iso,[dir="rtl"] .sec-num,[dir="rtl"] .pseries,[dir="rtl"] .guide-kicker,
[dir="rtl"] .article-meta,[dir="rtl"] .branch-meta b,[dir="rtl"] .brand-text small,
[dir="rtl"] .btn,[dir="rtl"] .subnav a,[dir="rtl"] .fact-list dt,[dir="rtl"] .lang-switch{letter-spacing:0}

/* Inline SVGs keep their own geometry */
[dir="rtl"] svg{direction:ltr}

/* Physical-side flips */
[dir="rtl"] .stat-cell{border-right:none;border-left:1px solid var(--line)}
[dir="rtl"] .stat-cell:last-child{border-left:none}
[dir="rtl"] .hero-stat{border-right:none;border-left:1px solid var(--line-d)}
[dir="rtl"] .hero-stat:last-child{border-left:none}
[dir="rtl"] .pcard-specs div{border-right:none;border-left:1px solid var(--line)}
[dir="rtl"] .pcard-specs div:last-child{border-left:none}
[dir="rtl"] .cat-stats div{border-right:none;border-left:1px solid var(--line)}
[dir="rtl"] .cat-stats div:last-child{border-left:none}
[dir="rtl"] .nav>a:not(.nav-cta)::after{left:auto;right:0}
[dir="rtl"] .cat-card::before{left:auto;right:0}
[dir="rtl"] .callout{border-left:none;border-right:3px solid var(--gold);border-radius:var(--radius) 0 0 var(--radius)}
[dir="rtl"] .table-sticky th:first-child,[dir="rtl"] .table-sticky td:first-child{
  left:auto;right:0;box-shadow:-6px 0 12px -8px rgba(16,27,62,.12);
}
[dir="rtl"] .fact-list dd{text-align:left}
[dir="rtl"] .pstep::after{left:0;right:20px}
[dir="rtl"] .pstep:last-child::after{left:20px}
[dir="rtl"] .subnav-in span{padding-right:0;padding-left:8px}

/* Directional arrows point the other way */
[dir="rtl"] .btn svg,[dir="rtl"] .card-arrow svg,[dir="rtl"] .read svg{transform:scaleX(-1)}
[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .news-card:hover .read svg{transform:scaleX(-1) translateX(4px)}

/* Mobile RTL border symmetry */
@media (max-width:920px){
  [dir="rtl"] .hero-stat:nth-child(2),[dir="rtl"] .stat-cell:nth-child(2){border-left:none}
  [dir="rtl"] .hero-stat,[dir="rtl"] .stat-cell{border-bottom:1px solid var(--line-d)}
  [dir="rtl"] .stats-band .stat-cell{border-bottom:1px solid var(--line)}
  [dir="rtl"] .hero-stat:nth-child(n+3),[dir="rtl"] .stat-cell:nth-child(n+3){border-bottom:none}
}