/* =====================================================================
   NETAJ — Arabic / RTL overrides for inner pages
   Pairs with: assets/inner-page.css (or any page's inline base styles)
   Fonts: Reem Kufi (display) · Readex Pro (body) · Tajawal (UI / mono replacement)
   ===================================================================== */

:root{
  --ar-display: "Reem Kufi", "Tajawal", system-ui, sans-serif;
  --ar-body:    "Readex Pro", "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ar-ui:      "Tajawal", "Readex Pro", system-ui, sans-serif;
}

/* CRITICAL — Arabic letters MUST stay joined; letter-spacing breaks cursive flow */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after{
  letter-spacing: 0 !important;
}

body{
  font-family: var(--ar-body);
  font-feature-settings: "lnum","tnum","calt","liga";
  -webkit-font-smoothing: antialiased;
}

/* Display & headings — Reem Kufi */
.display-xxl,.display-xl,.display-l,.display-m,.display-s,
h1,h2,h3,h4,.tagline,.lede,
.page-hero h1,.page-hero h1 em,.page-hero .hero-sub,
.body-text p.serif-lead,.body-text p.serif-lead em,
.milestone .yr,.milestone .body h3,
.grp h3,.value h3,
.pull h2,.pull h2 em,.pull .glyph,
.ccard h3,.ccard h3 em,
.dept .name,.dept .name em,
.mainline .left h3,.mainline .left h3 em{
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
}

/* Body copy & ledes */
.body-text p,.body-text p.serif-lead,
.lede,
.page-hero .hero-sub,
.pull p,
.dept p,
.ccard .addr,
.mainline .left p{
  font-family: var(--ar-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
}

/* Italic doesn't exist in Arabic — emphasize via brand color + weight */
em, i, em.serif, em.brand, em.brass{
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--green) !important;
  font-family: inherit !important;
  font-variation-settings: normal !important;
}
.sec.dark em, .sec.dark em.serif, .sec.dark em.brand,
.pull em, .pull h2 em,
.page-hero h1 em, .page-hero .hero-sub em,
.ccard h3 em, .dept .name em, .mainline .left h3 em,
.footer-mast .tag em{
  color: var(--green-light) !important;
}

/* Nav, footer, buttons, all UI chrome → Tajawal */
.nav ul,
.nav ul a,
.nav .lang,
.nav .lang a,
.nav .lang span,
.nav .dd-num,
.nav .dd-name,
.nav .dd-sub,
.nav .dd-foot,
.footer-col h4,
.footer-col li,
.footer-col a,
.footer-base,
.footer-base .lang,
.footer-mast .addr,
.btn,
.more,
.chapter,
.chapter .em,
.chapter .num,
.chapter .sect,
.hero-meta,
.page-hero .hero-meta,
.aside-meta,
.aside .meta-num,
.meta-num,
.milestone .body .meta,
.grp .num,
.value .n,
.ccard .lbl,
.ccard .row,
.ccard .row .k,
.ccard .row .v,
.ccard .row a,
.dept .lbl,
.dept .email,
.mainline .ml-row,
.mainline .ml-k{
  font-family: var(--ar-ui) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-variation-settings: normal !important;
}

/* Nav top items slightly heavier */
.nav > ul > li > a{ font-weight: 500 !important; }

/* AR nav text — Tajawal x-height is much smaller than uppercase Geist Mono at the same px,
   so to match the optical size of 15px UPPERCASE EN we set AR Arabic substantially larger. */
.nav ul a,
.nav ul li a{
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}
.nav .lang,
.nav .lang a,
.nav .lang span{
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.nav .dd-name{ font-size: 24px !important; font-weight: 600 !important; }
.nav .dd-sub{ font-size: 14px !important; font-weight: 500 !important; }
.nav .dd-num{ font-size: 14px !important; font-weight: 600 !important; }
.nav .dd-foot{ font-size: 14px !important; font-weight: 500 !important; }
/* Slight gap reduction so 24px AR fits along the bar */
html[dir="rtl"] .nav ul{ gap: 22px !important; }
@media(max-width:1180px){
  html[dir="rtl"] .nav ul a,
  html[dir="rtl"] .nav ul li a{ font-size: 20px !important; }
  html[dir="rtl"] .nav ul{ gap: 16px !important; }
}

/* Footer column headers heavier and bigger */
.footer-col h4{ font-weight: 700 !important; font-size: 13px !important; }
.footer-col li{ font-weight: 400 !important; }
.footer-col a{ font-size: 14px !important; }

/* Footer address */
.footer-mast .addr{
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 2 !important;
}

/* Footer tagline keeps display feel */
.footer-mast .tag{
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* Mono caption-style elements → Tajawal */
.dd-num,.aside .meta-num,.meta-num,
.milestone .body .meta,
.grp .num,
.value .n,
.dept .email,
.ccard .lbl,
.ccard .addr,
.ccard .row,
.dept .lbl,
.mainline .ml-row,
.mainline .ml-k,
.confirm{
  font-family: var(--ar-ui) !important;
  text-transform: none !important;
}

/* Latin codes and certifications stay Latin (mono) */
.footer-base .certs,
.confirm{
  font-family: var(--mono) !important;
  letter-spacing: 0.12em !important;
}

/* But override inside ccard rows that hold Arabic */
.ccard .row .v:lang(ar),
.ccard .row .k:lang(ar){
  font-family: var(--ar-ui) !important;
}

/* Drop-cap doesn't apply to Arabic — neutralize */
.dropcap{
  font-family: var(--ar-body) !important;
  font-weight: 400 !important;
}
.dropcap::first-letter,
html[dir="rtl"] .dropcap::first-letter{
  font-size: 1em !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-variation-settings: normal !important;
}

/* Arrow icons in buttons → mirror to point in reading direction (left) */
.btn > svg,
.more > svg,
.dd-foot > svg,
.dept .email > svg,
.arrow{
  transform: scaleX(-1);
}

/* Milestone year keeps numerical tabular feel — keep Latin numerals serif look */
.milestone .yr{
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
}

/* Stat values, big numbers — keep Latin serif for numerical drama */
.stat .v,
.facts .v{
  font-family: var(--serif) !important;
}
.facts .v:lang(ar){ font-family: var(--ar-display) !important; font-weight: 500 !important; }

/* Hero meta caption — Tajawal */
.page-hero .hero-meta{
  font-family: var(--ar-ui) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Aside chapter strip in dark sections */
.sec.dark .chapter,
.sec.dark .chapter .em,
.sec.dark .chapter .num{
  font-family: var(--ar-ui) !important;
}

/* Card grid copy in dark sections (contact ccards) */
.ccard h3{ color: var(--bone); }
.ccard .row a{ border-bottom-color: rgba(96,156,104,.45); }

/* aside-meta utility (used on contact / careers) */
.aside-meta{
  font-family: var(--ar-ui) !important;
  font-size: 13px;
  color: var(--ink-500);
}

/* Lang switcher styling stays clean */
.nav .lang a,
.footer-base .lang a{
  text-decoration: none;
  color: inherit;
}
.nav .lang span.active,
.footer-base .lang span.active{
  color: var(--green-light);
  font-weight: 600;
}

/* Generic safety: any page-level inline `<p style="...mono...">` elements still use AR UI */
[class*="meta-num"]{
  font-family: var(--ar-ui) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* =====================================================================
   CUSTOMERS section (rubber.html) — elevated treatment overrides
   ===================================================================== */
.customers-pull,
.customers-pull em{
  font-family: var(--ar-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
  letter-spacing: 0 !important;
}
.customers-pull em{ font-weight: 600 !important; }

.customers-pull-cite,
.customers-ledger .k,
.customer-cell .customer-meta,
.customer-cell .customer-meta .loc,
.customer-cell .customer-index{
  font-family: var(--ar-ui) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* Brand name in customer cell stays Latin (Continental, Pirelli, etc) */
.customer-cell .customer-meta .name{
  font-family: var(--mono) !important;
  letter-spacing: .10em !important;
}

.customers-ledger .v{
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  font-variation-settings: normal !important;
}

/* RTL flip: green hairline grows from right edge, customer index sits in top-left */
html[dir="rtl"] .customer-cell::before{ left: auto !important; right: 0 !important; }
html[dir="rtl"] .customer-cell .customer-index{ right: auto !important; left: 14px !important; }

/* =====================================================================
   LOOPS section (circular-economy.html) — editorial unified spread
   ===================================================================== */
.loops-head h2,
.loops-head h2 em,
.loop-panel h3,
.loop-panel h3 em{
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
}
.loops-head .sub,
.loop-panel p{
  font-family: var(--ar-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
  line-height: 1.7;
}

.loop-panel .loop-num,
.loops-stats .k{
  font-family: var(--ar-ui) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

.loops-stats .v{
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  font-variation-settings: normal !important;
}
.loops-stats .v em{
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--green-light) !important;
}

/* The ✦ glyph in the divider — keep it as Reem Kufi-friendly */
.loops-divider::before{
  font-family: var(--ar-display) !important;
  font-style: normal !important;
}

/* =====================================================================
   ROYAL VISION section (vision-2030.html) — leadership cards
   ===================================================================== */
.royal-h,
.royal-h em{
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
.royal-h em{ font-weight: 600 !important; color: var(--green-deep) !important; }

.royal-sub{
  font-family: var(--ar-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
  line-height: 1.7;
}

.v2030-stamp,
.royal-meta,
.royal-title{
  font-family: var(--ar-ui) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

.royal-quote p{
  font-family: var(--ar-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
}

.royal-name{
  font-family: var(--ar-display) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
}

.royal-glyph{
  font-family: var(--serif) !important;
  font-style: italic !important;
}

/* RTL: flip green quote-rule to the right edge */
html[dir="rtl"] .royal-quote{
  padding-left: 0 !important;
  padding-right: 18px;
  border-left: 0 !important;
  border-right: 2px solid var(--green);
}
html[dir="rtl"] .royal-portrait img{
  /* Many Saudi portraits frame the leader in the upper portion — keep that crop */
  object-position: center 18%;
}

/* =====================================================================
   ESG figure source ledger (esg.html)
   ===================================================================== */
.esg-source-ledger .k{
  font-family: var(--ar-ui) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
.esg-source-ledger .v{
  font-family: var(--ar-body) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
}