/* Self-hosted Google Fonts (OFL). Generated by tools/fetch_assets.py.
   Noto Kufi Arabic (headings) is served as static Bold (700) and ExtraBold (800) files cut from the variable font by
   tools/static_fonts.py, each weight's Arabic and Latin parts joined in one file: engines without font-variation
   support drew the variable file at 400, so headings were thin.
   IBM Plex Sans Arabic ships two weights: 400 also serves 500, 600 also serves 700 (fewer files, no faux bold).
   Concatenated in front of main.css by build.py, so the page has one render-blocking stylesheet. */
/* Noto Kufi Arabic 700: static, Arabic and Latin in one file (tools/static_fonts.py) */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/noto-kufi-700.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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, 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;
}
/* Noto Kufi Arabic 800: static, Arabic and Latin in one file (tools/static_fonts.py) */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/noto-kufi-800.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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, 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;
}
/* IBM Plex Sans Arabic arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/plex-arabic-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* IBM Plex Sans Arabic latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/plex-arabic-latin-400.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;
}
/* IBM Plex Sans Arabic arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/plex-arabic-arabic-600.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* IBM Plex Sans Arabic latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/plex-arabic-latin-600.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;
}

/* ===== 00-foundation.css ===== */
/* ==========================================================================
   Amjad United v2. Design system "Crystalline".
   Light editorial pages, dark hero + footer bookends, one accent (brand blue).
   Order: tokens > base > layout > components > header > footer > home > inner pages > motion > print
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink: #0B1F33;
  --ink-2: #1B3350;
  --slate: #4A5B6C;
  --slate-2: #627180;            /* 4.66:1 on paper, 5.0:1 on white (was #6E7F90, 3.8:1) */
  --paper: #F4F7FA;
  --paper-2: #E9EFF5;
  --paper-3: #DDE6EF;
  --white: #FFFFFF;
  --line: #D6DFE8;
  --line-2: #C3CFDB;

  --dark: #071526;
  --dark-2: #0B1F33;
  --dark-3: #10294A;
  --on-dark: #F4F7FA;
  --on-dark-muted: #A9BACB;
  --line-dark: rgba(255, 255, 255, 0.12);

  --accent: #0970D0;             /* brand blue tuned for AA: 4.95:1 with white text (was #0A78E0, 4.4:1) */
  --accent-hover: #085EAF;
  --accent-soft: #E3F0FC;
  --teal: #16E0C0;
  --sector: var(--accent);
  --sector-soft: var(--accent-soft);
  --sector-ink: var(--accent);   /* sector colour for small text; sector pages override it with an AA-safe shade */

  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-latin: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --lh-display: 1.3;
  --lh-body: 1.85;
  --track-display: 0;

  --radius-s: 6px;
  --radius-m: 10px;
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 9vw, 128px);
  --header-h: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;
  --shadow-1: 0 1px 2px rgba(11, 31, 51, 0.05), 0 10px 30px -14px rgba(11, 31, 51, 0.22);
  --shadow-2: 0 2px 6px rgba(11, 31, 51, 0.06), 0 24px 60px -24px rgba(11, 31, 51, 0.32);
}

body.lang-en {
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lh-display: 1.08;
  --lh-body: 1.65;
  --track-display: -0.02em;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, address, figure { margin: 0; }
address { font-style: normal; }
h1, h2, h3, h4, .display { font-family: var(--font-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: 700; }
h1, h2, h3, .display-1, .display-2 { text-wrap: balance; }   /* even line lengths in titles */
p, .lead { text-wrap: pretty; }                                /* no single-word last lines */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* on the dark bookends the ring switches to the light blue so it stays visible */
.hero :focus-visible, .page-hero :focus-visible, .impact :focus-visible, .closing-band :focus-visible, .site-footer :focus-visible, .site-header:not(.is-solid) :focus-visible, body.menu-open .site-header :focus-visible { outline-color: var(--accent-on-dark, #6DB9FF); }
::selection { background: var(--accent); color: #fff; }
[dir="ltr"] .num, [dir="rtl"] .num { font-variant-numeric: tabular-nums lining-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- type scale ---------- */
.display-1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; }
.display-2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 800; }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.h4 { font-size: 1.15rem; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--slate); }
.small { font-size: 0.9375rem; }
.muted { color: var(--slate); }
.measure { max-width: 65ch; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .lead { margin-top: 18px; }
.grid { display: grid; gap: var(--gap, 24px); }
.on-dark { background: var(--dark-2); color: var(--on-dark); }
.on-dark .muted, .on-dark .lead { color: var(--on-dark-muted); }
.skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-s); }
.skip-link:focus { top: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-s); font-weight: 600; font-size: 1rem; line-height: 1.2;
  white-space: nowrap; border: 1.5px solid transparent;
  transition: background-color 0.25s var(--ease-out), color 0.25s, border-color 0.25s, transform 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn .icon { width: 18px; height: 18px; }
.btn-sm { padding: 10px 18px; font-size: 0.9375rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.on-dark .btn-ghost, .btn-ghost-light { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.on-dark .btn-ghost:hover, .btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--paper-2); }

/* text link with directional underline */
.link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0% 1.5px; background-position: 0 100%; transition: background-size 0.35s var(--ease-out);
  padding-bottom: 2px;
}
[dir="rtl"] .link { background-position: 100% 100%; }
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }
.link .icon { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.link:hover .icon { transform: translate(2px, -2px); }
.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ---------- media ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius-m); background: var(--paper-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media-hover img { transition: transform 0.9s var(--ease-out); }
.media-hover:hover img { transform: scale(1.03); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50; height: var(--header-h);
  color: #fff;
  transition: background-color 0.35s var(--ease-out), color 0.35s, box-shadow 0.35s, transform 0.4s var(--ease-out);
}
.site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(7, 21, 38, 0.55), rgba(7, 21, 38, 0)); pointer-events: none; opacity: 1; transition: opacity 0.35s; }
.site-header.is-solid { background: rgba(244, 247, 250, 0.9); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.site-header.is-solid::after { opacity: 0; }
/* over a light header band (body.hero-on-light, e.g. the agricultural sector's logo band) the transparent header
   starts dark, with the logo for light backgrounds; the open phone menu keeps its own dark styling */
body.hero-on-light:not(.menu-open) .site-header:not(.is-solid) { color: var(--ink); }
body.hero-on-light:not(.menu-open) .site-header::after { opacity: 0; }
body.hero-on-light:not(.menu-open) .brand-logo-dark { display: none; }
body.hero-on-light:not(.menu-open) .brand-logo-light { display: block; }
body.hero-on-light:not(.menu-open) .nav-item:hover > .nav-link, body.hero-on-light:not(.menu-open) .nav-link:focus-visible, body.hero-on-light:not(.menu-open) .nav-item.is-active > .nav-link { background: rgba(11, 31, 51, 0.07); }
body.hero-on-light:not(.menu-open) .lang-switch { border-color: var(--line-2); }
body.hero-on-light:not(.menu-open) .site-header:not(.is-solid) :focus-visible { outline-color: var(--accent-hover); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.brand { display: flex; align-items: center; flex: none; }
.brand-logo { height: 46px; width: auto; }
.brand-logo-light { display: none; }
.is-solid .brand-logo-dark { display: none; }
.is-solid .brand-logo-light { display: block; }

.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-s); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; opacity: 0.92; transition: background-color 0.25s, opacity 0.25s; }
.nav-link .icon { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.nav-item:hover > .nav-link, .nav-link:focus-visible, .nav-item.is-active > .nav-link { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.is-solid .nav-item:hover > .nav-link, .is-solid .nav-link:focus-visible, .is-solid .nav-item.is-active > .nav-link { background: var(--paper-2); }
.nav-item { position: relative; }
.nav-sub {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 260px; padding: 8px;
  background: #fff; color: var(--ink); border-radius: var(--radius-m); box-shadow: var(--shadow-2); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
.nav-sub a { display: block; padding: 10px 14px; border-radius: var(--radius-s); font-size: 0.9375rem; font-weight: 500; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--paper-2); color: var(--accent); }
.nav-item.has-children:hover > .nav-sub, .nav-item.has-children:focus-within > .nav-sub, .nav-item.is-open > .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item.has-children:hover > .nav-link .icon, .nav-item.is-open > .nav-link .icon { transform: rotate(180deg); }
.nav-mobile-extra { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 40px; padding: 0 12px; border-radius: var(--radius-s); border: 1.5px solid rgba(255, 255, 255, 0.35); font-family: var(--font-latin); font-weight: 700; font-size: 0.875rem; transition: border-color 0.25s, background-color 0.25s; }
.lang-switch:hover { border-color: currentColor; }
.is-solid .lang-switch { border-color: var(--line-2); }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-s); }
.menu-toggle .icon { width: 28px; height: 28px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1080px) {
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--dark); color: #fff; padding: 24px var(--gutter) 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  /* visible at once when opening (focus can move in immediately), hidden only after the fade when closing */
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s; }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-header { background: var(--dark); color: #fff; box-shadow: none; }
  body.menu-open .site-header::after { opacity: 0; }
  body.menu-open .brand-logo-dark { display: block; }
  body.menu-open .brand-logo-light { display: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line-dark); }
  .nav-link { width: 100%; justify-content: space-between; padding: 18px 4px; font-size: 1.25rem; font-family: var(--font-display); font-weight: 700; border-radius: 0; }
  .nav-item:hover > .nav-link, .nav-item.is-active > .nav-link { background: none; }
  .nav-sub { position: static; min-width: 0; padding: 0 0 12px; background: none; color: inherit; box-shadow: none; border: 0; display: none; opacity: 1; visibility: visible; transform: none; }
  .nav-item.is-open > .nav-sub { display: block; }
  .nav-sub a { padding: 10px 16px; font-size: 1.05rem; color: var(--on-dark-muted); }
  .nav-sub a:hover, .nav-sub a[aria-current="page"] { background: none; color: #fff; }
  .nav-mobile-extra { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
  .nav-mobile-extra .lang-switch { height: 46px; }
  .header-actions .lang-switch { display: none; }
}

/* ==========================================================================
   Footer (dark bookend)
   ========================================================================== */
.site-footer { background: var(--dark); color: var(--on-dark); padding: clamp(56px, 7vw, 96px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 1.3fr; gap: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line-dark); }
.footer-brand img { height: 64px; width: auto; }
.footer-brand p { margin-top: 20px; color: var(--on-dark-muted); max-width: 40ch; font-size: 0.9375rem; }
.social { display: flex; gap: 8px; margin-top: 24px; }
.social a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--radius-s); border: 1px solid var(--line-dark); transition: background-color 0.25s, border-color 0.25s; }
.social a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
.social .icon { width: 20px; height: 20px; }
.footer-title { font-size: 0.8125rem; font-family: var(--font-latin); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 20px; font-weight: 700; }
body.lang-ar .footer-title { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--on-dark); opacity: 0.85; transition: opacity 0.2s, color 0.2s; }
.footer-col a:hover { opacity: 1; color: #fff; }
.footer-contact p { font-size: 0.9375rem; color: var(--on-dark); opacity: 0.9; }
.footer-contact p + .footer-label { margin-top: 16px; }
.footer-label { font-size: 0.8125rem; color: var(--on-dark-muted); margin-bottom: 4px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 0.875rem; color: var(--on-dark-muted); }
.lang-switch-text { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Shared: inner page hero (dark band), breadcrumb, closing band
   ========================================================================== */
.page-hero { position: relative; display: flex; align-items: center; min-height: clamp(460px, 60vh, 660px); background: var(--dark); color: #fff; padding: calc(var(--header-h) + clamp(40px, 6vw, 72px)) 0 clamp(48px, 6vw, 80px); overflow: hidden; isolation: isolate; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.page-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--dark) 0%, rgba(7, 21, 38, 0.65) 50%, rgba(7, 21, 38, 0.45) 100%); }
.page-hero.has-sector .page-hero-bg::after { background: linear-gradient(to top, var(--dark) 0%, rgba(7, 21, 38, 0.6) 55%, rgba(7, 21, 38, 0.35) 100%); }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; }
.page-hero.has-aside .page-hero-inner { grid-template-columns: 7fr 5fr; }
.page-hero h1 { max-width: 24ch; text-wrap: balance; }
.page-hero .lead { color: var(--on-dark-muted); margin-top: 20px; max-width: 58ch; text-wrap: pretty; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--on-dark-muted); margin-bottom: 24px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .icon { width: 14px; height: 14px; opacity: 0.6; }
.closing-band { background: var(--dark-2); color: #fff; padding: clamp(64px, 8vw, 112px) 0; position: relative; overflow: hidden; }
.closing-band .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; position: relative; z-index: 1; }
.closing-band h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); max-width: 18ch; }
.closing-band p { color: var(--on-dark-muted); margin-top: 12px; max-width: 48ch; }
.closing-band .btn { flex: none; }
.closing-band + .site-footer { border-top: 1px solid var(--line-dark); }

/* lattice motif (thin honeycomb line work derived from the snowflake mark) */
.lattice { position: absolute; pointer-events: none; color: var(--teal); opacity: 0.25; fill: none; stroke: currentColor; stroke-width: 1; }
.lattice path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.page-hero .lattice { inset-inline-end: -6%; top: -12%; width: 62%; height: 130%; opacity: 0.2; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 60% 45%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 60% 45%, #000 15%, transparent 75%); }
@media (max-width: 700px) { .page-hero .lattice { width: 120%; inset-inline-end: -40%; } }

/* ==========================================================================
   Motion (reveal on scroll, count-up). Hidden state only when JS is present and motion is allowed.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.no-motion .reveal, html.no-motion .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: var(--delay, 0s); }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: var(--delay, 0s); }
  html.js .reveal-scale.in { opacity: 1; transform: none; }
}

.notfound { min-height: 82vh; display: flex; align-items: center; padding-bottom: 80px; }
.notfound-code { font-family: var(--font-latin); font-weight: 800; font-size: clamp(5rem, 14vw, 10rem); line-height: 0.9; color: var(--accent-on-dark); opacity: 0.35; margin-bottom: 8px; }
.notfound .hero-cta { margin-top: 28px; }

/* ---------- print ---------- */
@media print {
  .site-header, .menu-toggle, .closing-band, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero { color: #000; background: none; padding-top: 24px; }
  .page-hero-bg { display: none; }
}

/* ==========================================================================
   Touch ergonomics: bigger hit areas for small text links on coarse pointers, no grey tap flash
   ========================================================================== */
@media (pointer: coarse) {
  a, button { -webkit-tap-highlight-color: transparent; }
  .footer-col li a, .footer-contact a, .breadcrumb a, .news-card .h4 a, .hotel-body a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .link, .lang-switch-text { padding-block: 8px; margin-block: -6px; }
  .nav-sub a { padding-block: 14px; }
}

/* ===== 10-home.css ===== */
/* ==========================================================================
   Home: hero (image as canvas, text bottom-start)
   ========================================================================== */
:root { --accent-on-dark: #6DB9FF; }
.hero { position: relative; min-height: min(100vh, 1000px); min-height: min(100dvh, 1000px); display: flex; align-items: flex-end; background: var(--dark); color: #fff; overflow: hidden; isolation: isolate; padding-top: var(--header-h); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--dark) 0%, rgba(7, 21, 38, 0.72) 38%, rgba(7, 21, 38, 0.3) 75%, rgba(7, 21, 38, 0.45) 100%); }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; }
[dir="rtl"] .hero-media::before { background: linear-gradient(to left, rgba(7, 21, 38, 0.55), rgba(7, 21, 38, 0) 55%); }
[dir="ltr"] .hero-media::before { background: linear-gradient(to right, rgba(7, 21, 38, 0.55), rgba(7, 21, 38, 0) 55%); }
.hero .lattice { z-index: 1; inset-inline-end: -8%; top: -6%; width: 64%; height: 112%; opacity: 0.32; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 70% 40%, #000 20%, transparent 75%); }
.hero-inner { position: relative; z-index: 2; padding-bottom: clamp(56px, 8vh, 104px); padding-top: 40px; }
.hero-title { max-width: 22ch; }
.hero-line { display: block; }
.hero-line-accent { color: var(--accent-on-dark); }
.hero-sub { margin-top: 22px; max-width: 56ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(255, 255, 255, 0.86); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (prefers-reduced-motion: no-preference) {
  /* the headline itself is not faded here: its words settle into focus (50-polish.css) */
  html.no-motion .hero-sub, html.no-motion .hero-cta, html.no-motion .hero .lattice path { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  html.js .hero-sub, html.js .hero-cta { opacity: 0; transform: translateY(24px); animation: hero-in 1s var(--ease-out) forwards; }
  html.js .hero-sub { animation-delay: 0.18s; }
  html.js .hero-cta { animation-delay: 0.32s; }
  html.js .hero .lattice path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: lat-draw 1.4s var(--ease-out) forwards; }
  html.js .hero .lat-1 { animation-delay: 0.15s; }
  html.js .hero .lat-2 { animation-delay: 0.3s; }
  html.js .hero .lat-3 { animation-delay: 0.45s; }
  html.js .hero .lat-4 { animation-delay: 0.6s; }
  html.js .hero .lat-5 { animation-delay: 0.75s; }
  html.js .hero .lat-6 { animation-delay: 0.9s; }
  html.js .hero .lat-7 { animation-delay: 1.05s; }
  @keyframes hero-in { to { opacity: 1; transform: none; } }
  @keyframes lat-draw { to { stroke-dashoffset: 0; } }
}
@media (max-width: 700px) {
  .hero { min-height: 92vh; min-height: 92dvh; }
  .hero .lattice { width: 120%; inset-inline-end: -40%; opacity: 0.22; }
}

/* ==========================================================================
   Home: sectors. Cards everywhere (a 2-up grid on tablets, a snap carousel on phones); on wide screens with
   JavaScript the cards become an expanding photo strip: the open panel carries the story, the others wait as
   numbered slivers and open under the pointer or keyboard focus.
   ========================================================================== */
.sectors { background: var(--paper); overflow: hidden; }
.sectors-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.sectors-head .lead { margin-top: 14px; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.strip-panel { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-m); overflow: hidden; background: var(--dark); color: #fff; text-decoration: none; isolation: isolate; box-shadow: 0 1px 2px rgba(11, 31, 51, 0.08); transition: box-shadow 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
.strip-panel:hover { box-shadow: var(--shadow-2); }
.strip-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.strip-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.strip-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.strip-panel:hover .strip-media img { transform: scale(1.04); }
.strip-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--dark) 0%, rgba(7, 21, 38, 0.25) 45%, rgba(7, 21, 38, 0.05) 100%); }
.strip-lattice { display: none; }
.strip-index { position: absolute; top: 18px; inset-inline-start: 20px; z-index: 1; display: flex; align-items: center; gap: 10px; font-family: var(--font-latin); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; direction: ltr; color: rgba(255, 255, 255, 0.9); }
.strip-index::before { content: ""; width: 24px; height: 2px; background: var(--sector); transition: width 0.6s var(--ease-out); }
.strip-short { display: none; }
.strip-body { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: -36px; padding: 0 20px 22px; }
.strip-name { font-size: 1.45rem; line-height: 1.25; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }
.strip-tagline { color: rgba(255, 255, 255, 0.84); font-size: 0.95rem; }
.strip-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 4px 0 6px; padding: 0; list-style: none; }
.strip-facts li { display: grid; gap: 2px; padding-inline-start: 10px; border-inline-start: 2px solid var(--sector); }
.strip-facts strong { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
.strip-facts span { font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.76); max-width: 20ch; }
.strip-cta { justify-self: start; pointer-events: none; }
.strip-dots { display: none; }

/* a sector shown by its company logo (agricultural: Hasad Al-Dahab) instead of a photo: the whole panel is the
   brand's cream, like its sector header, with the logo in its own colours and the text in dark ink (no colour band) */
.strip-panel.has-logo { background: var(--hero-paper, var(--paper)); color: #14201A; box-shadow: inset 0 0 0 1px rgba(20, 32, 26, 0.08); }
.strip-panel.has-logo .strip-media::after { display: none; }
.strip-panel.has-logo .strip-logo { position: absolute; left: 12%; top: 20%; width: 76%; height: 60%; object-fit: contain; }
.strip-panel.has-logo .strip-index { color: var(--ink); }
.strip-panel.has-logo .strip-body { margin-top: 0; padding-top: 18px; }
.strip-panel.has-logo .strip-name { text-shadow: none; }
.strip-panel.has-logo .strip-tagline, .strip-panel.has-logo .strip-facts span { color: var(--slate); }
.strip-panel.has-logo .strip-cta { background: #14201A; color: #fff; }
.strip-panel.has-logo .strip-emblem { display: none; }

/* tablets: two cards per row */
@media (min-width: 700px) and (max-width: 1023px) { .strip { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* phones: a snap carousel with a peek of the next card, dots below */
@media (max-width: 699px) {
  .sectors .container { padding-inline: 0; }
  .sectors-head { padding-inline: var(--gutter); }
  .strip { display: flex; gap: 12px; padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip-panel { flex: 0 0 min(84vw, 360px); scroll-snap-align: start; }
  .strip-dots { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
  .strip-dot { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
  .strip-dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--line-2); transition: width 0.35s var(--ease-out), background-color 0.35s; }
  .strip-dot.is-active::before { width: 26px; background: var(--accent); }
}

/* wide screens with JavaScript: the expanding strip */
@media (min-width: 1024px) {
  html.js .strip { display: flex; gap: 12px; height: clamp(520px, 68vh, 700px); }
  html.js .strip-panel { flex: 1 1 0; min-width: 0; justify-content: flex-end; padding: clamp(22px, 2.6vw, 36px); box-shadow: none; transition: flex-grow 0.85s var(--ease-out); }
  html.js .strip-panel:hover { box-shadow: none; }
  html.js .strip-media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
  html.js .strip-media img { transform: scale(1.08); filter: saturate(0.7) brightness(0.7); transition: transform 1.3s var(--ease-out), filter 0.8s var(--ease-out); }
  html.js .strip-media::after { background: linear-gradient(to top, rgba(7, 21, 38, 0.92) 0%, rgba(7, 21, 38, 0.5) 42%, rgba(7, 21, 38, 0.12) 100%); background: linear-gradient(to top, color-mix(in srgb, var(--sector) 55%, var(--dark)) 0%, rgba(7, 21, 38, 0.5) 42%, rgba(7, 21, 38, 0.12) 100%); }
  html.js .strip-lattice { display: block; position: absolute; z-index: -1; inset: -12% -8% auto auto; width: 58%; height: 120%; opacity: 0; color: var(--teal); transition: opacity 0.9s var(--ease-out); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 60% at 70% 30%, #000 10%, transparent 72%); }
  html.js .strip-index { top: clamp(20px, 2.4vw, 30px); inset-inline-start: clamp(22px, 2.6vw, 36px); }
  html.js .strip-short { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.3; white-space: nowrap; transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out); }
  html.js .strip-body { position: absolute; inset-inline: clamp(22px, 2.6vw, 36px); bottom: clamp(22px, 2.6vw, 36px); width: min(560px, 42vw); margin: 0; padding: 0; gap: 0; opacity: 0; transform: translateY(18px); transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out); pointer-events: none; }
  html.js .strip-name { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.2; }
  html.js .strip-tagline { margin: 12px 0 20px; max-width: 46ch; font-size: clamp(0.98rem, 1.2vw, 1.1rem); }
  html.js .strip-facts { gap: 14px 28px; margin: 0 0 24px; }
  html.js .strip-facts strong { font-size: 1.35rem; }
  html.js .strip-panel.is-open { flex-grow: 3.6; }
  html.js .strip-panel.is-open .strip-media img { transform: scale(1); filter: none; }
  html.js .strip-panel.is-open .strip-lattice { opacity: 0.22; }
  html.js .strip-panel.is-open .strip-index::before { width: 44px; }
  html.js .strip-panel.is-open .strip-short { opacity: 0; transform: translateY(8px); }
  html.js .strip-panel.is-open .strip-body { opacity: 1; transform: none; transition-delay: 0.22s; }
  /* the logo panel: all cream, the logo in the upper part and the dark text below it. Nothing is laid over the logo
     (an earlier colour band faded across the emblem) and it is never dimmed like the closed photos. */
  html.js .strip-panel.has-logo .strip-logo { left: 9%; top: 10%; width: 82%; height: 22%; filter: none; }
  /* a closed panel is too narrow for the full logo's lettering: it shows the emblem, the open panel the full logo.
     Sized by the panel's height, so it ends at 35% on any screen; contain, so a narrow panel shrinks it whole. */
  html.js .strip-panel.has-logo .strip-emblem {
    display: block; position: absolute; left: 50%; top: 11%; height: 24%; width: 72%; translate: -50% 0; object-fit: contain;
    filter: none; transition: opacity 0.45s var(--ease-out), transform 0.8s var(--ease-out);
  }
  html.js .strip-panel.has-logo .strip-lattice { display: none; }
  html.js .strip-panel.has-logo .strip-logo { opacity: 0; transition: opacity 0.45s var(--ease-out), transform 1.3s var(--ease-out); }
  html.js .strip-panel.has-logo.is-open .strip-logo { opacity: 1; transition-delay: 0.25s; }
  html.js .strip-panel.has-logo.is-open .strip-emblem { opacity: 0; transform: scale(0.9); }
}

/* ===== 11-home-figures-brands.css ===== */
/* ==========================================================================
   Home: brands (logo tiles; hover enlarges the mark and reveals the product photo)
   ========================================================================== */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.brand-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; aspect-ratio: 1 / 0.92; padding: 24px; border-radius: var(--radius-m); background: var(--paper-2); overflow: hidden; isolation: isolate; text-align: center; transition: box-shadow 0.35s var(--ease-out), background-color 0.35s; }
.brand-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transform: scale(1.06); transition: opacity 0.5s var(--ease-out), transform 1.1s var(--ease-out); }
.brand-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 21, 38, 0.92) 0%, rgba(7, 21, 38, 0.45) 55%, rgba(7, 21, 38, 0.2) 100%); opacity: 0; transition: opacity 0.5s var(--ease-out); }
.brand-mark { width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(11, 31, 51, 0.12); transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); }
.brand-text { display: grid; gap: 4px; transition: color 0.35s; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.brand-line { color: var(--slate); font-size: 0.875rem; transition: color 0.35s; }
.brand-link:hover, .brand-link:focus-visible, .brand-link.is-hover { box-shadow: var(--shadow-2); }
.brand-link:hover .brand-photo, .brand-link:focus-visible .brand-photo, .brand-link.is-hover .brand-photo { opacity: 1; transform: scale(1); }
.brand-link:hover::after, .brand-link:focus-visible::after, .brand-link.is-hover::after { opacity: 1; }
.brand-link:hover .brand-mark, .brand-link:focus-visible .brand-mark, .brand-link.is-hover .brand-mark { transform: scale(1.22) translateY(-6px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.brand-link:hover .brand-text, .brand-link:focus-visible .brand-text, .brand-link.is-hover .brand-text { color: #fff; }
.brand-link:hover .brand-line, .brand-link:focus-visible .brand-line, .brand-link.is-hover .brand-line { color: rgba(255, 255, 255, 0.82); }
/* touch screens have no hover: show the revealed state with the mark at rest */
@media (hover: none) {
  .brand-photo { opacity: 1; transform: none; }
  .brand-link::after { opacity: 1; }
  .brand-text { color: #fff; }
  .brand-line { color: rgba(255, 255, 255, 0.82); }
  .brands-hint { display: none; }
}
.brands-hint { margin-top: 18px; }
.brands-retail { margin-top: 12px; color: var(--slate); }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } .brand-mark { width: 84px; height: 84px; } }
@media (max-width: 420px) {
  .brand-grid { gap: 12px; }
  .brand-link { padding: 16px; gap: 12px; }
  .brand-mark { width: 64px; height: 64px; }
  .brand-name { font-size: 0.95rem; }
  .brand-line { font-size: 0.8rem; }
}

/* ==========================================================================
   Home: customers (continuous logo carousel, pauses on hover, static row under reduced motion)
   ========================================================================== */
.customers { padding: clamp(48px, 6vw, 80px) 0; background: var(--white); border-block: 1px solid var(--line); }
.customers-head { margin-bottom: clamp(24px, 3vw, 36px); }
.customers-head p { margin-top: 6px; max-width: 60ch; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(40px, 5vw, 80px); width: max-content; padding-inline: clamp(20px, 2.5vw, 40px); animation: marquee 42s linear infinite; }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.client { flex: none; display: flex; align-items: center; justify-content: center; height: 72px; }
.client img { height: 60px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.client:hover img { filter: none; opacity: 1; }
.client-dark { background: var(--dark-2); border-radius: var(--radius-s); padding: 10px 16px; }
.client-dark img { filter: none; opacity: 0.9; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .marquee-track .client[aria-hidden="true"] { display: none; }
}
html.no-motion .marquee { -webkit-mask-image: none; mask-image: none; }
html.no-motion .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
html.no-motion .marquee-track .client[aria-hidden="true"] { display: none; }

/* ===== 12-impact.css ===== */
/* ==========================================================================
   Impact band: a dark, photographic full-bleed section for the numbers that matter.
   Used once per page: group figures (home), presence (about), values (mission).
   ========================================================================== */
.impact { position: relative; padding: clamp(72px, 9vw, 128px) 0; background: var(--dark); color: #fff; overflow: hidden; isolation: isolate; }
.impact-bg { position: absolute; inset: 0; z-index: 0; }
.impact-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; filter: saturate(0.85); transform: scale(1.04); }
.impact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 21, 38, 0.96) 0%, rgba(7, 21, 38, 0.78) 45%, rgba(7, 21, 38, 0.62) 100%); }
[dir="rtl"] .impact-bg::before, [dir="ltr"] .impact-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; }
[dir="rtl"] .impact-bg::before { background: linear-gradient(to left, rgba(7, 21, 38, 0.75), rgba(7, 21, 38, 0) 60%); }
[dir="ltr"] .impact-bg::before { background: linear-gradient(to right, rgba(7, 21, 38, 0.75), rgba(7, 21, 38, 0) 60%); }
.impact .lattice { z-index: 1; inset-inline-end: -6%; top: -20%; width: 58%; height: 140%; opacity: 0.28; color: var(--teal); -webkit-mask-image: radial-gradient(ellipse 55% 55% at 62% 50%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 55% 55% at 62% 50%, #000 15%, transparent 72%); }
.impact-glow { position: absolute; z-index: 1; inset-inline-end: 8%; top: 10%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(22, 224, 192, 0.22), transparent 65%); filter: blur(20px); pointer-events: none; }
.impact-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 4fr 8fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.impact-head .h2 { color: #fff; }
.impact-head .lead { color: var(--on-dark-muted); margin-top: 14px; max-width: 30ch; }
.impact-head .link { margin-top: 24px; color: var(--accent-on-dark); }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.impact-grid li { padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 28px); border-inline-start: 1px solid rgba(255, 255, 255, 0.14); }
.impact-grid li:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.impact-value { display: block; direction: ltr; unicode-bidi: isolate; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.1; letter-spacing: var(--track-display); color: #fff; }
[dir="rtl"] .impact-value { text-align: right; }
.impact-value .suffix { color: var(--accent-on-dark); }
.impact-label { display: block; margin-top: 8px; color: var(--on-dark-muted); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 1000px) { .impact-inner { grid-template-columns: 1fr; gap: 32px; } .impact-glow { display: none; } }
@media (max-width: 560px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .impact-grid li:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}

/* ==========================================================================
   Section title accent rule, closing band glow, card polish
   ========================================================================== */
.h2-bar { position: relative; padding-top: 18px; }
.h2-bar::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 4px; border-radius: 2px; background: var(--accent); }
.page-sector .h2-bar::before { background: var(--sector); }
.closing-band { background: radial-gradient(ellipse 60% 120% at var(--glow-x, 85%) 50%, rgba(10, 120, 224, 0.35), transparent 60%), var(--dark-2); }
[dir="ltr"] .closing-band { --glow-x: 15%; }
.closing-band .lattice { inset-inline-end: -10%; top: -30%; width: 50%; height: 160%; opacity: 0.18; color: var(--teal); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 60% 50%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 60% at 60% 50%, #000 10%, transparent 72%); }
.closing-band h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.closing-band .btn-primary { padding: 16px 32px; font-size: 1.05rem; box-shadow: 0 18px 40px -14px rgba(10, 120, 224, 0.7); }
.news-card { transition: transform 0.4s var(--ease-out); }
.news-card:hover { transform: translateY(-4px); }
.news-grid .news-card:hover { transform: none; }   /* listing cards lift their inner link instead */
.brand-link { border: 1px solid transparent; }
.brand-link:hover, .brand-link.is-hover { border-color: rgba(255, 255, 255, 0.25); }
.sector-facts { border: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-m); background: var(--dark-2); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.sector-facts::after { content: ""; position: absolute; inset: auto -30% -50% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(22, 224, 192, 0.22), transparent 65%); background: radial-gradient(circle, color-mix(in srgb, var(--sector) 55%, transparent), transparent 65%); z-index: -1; }
.sector-facts .fact-value { color: #fff; }
.sector-facts .fact-value .suffix { color: var(--accent-on-dark, #6DB9FF); color: color-mix(in srgb, var(--sector) 60%, #fff); }
.sector-facts .fact-label { color: var(--on-dark-muted); }
.sector-facts li + li { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
@media (max-width: 900px) { .sector-facts { grid-template-columns: repeat(3, 1fr); border-top: 0; } .sector-facts li + li { padding-top: 0; border-top: 0; border-inline-start: 1px solid rgba(255, 255, 255, 0.12); padding-inline-start: 18px; } }
@media (max-width: 560px) { .sector-facts { grid-template-columns: 1fr; } .sector-facts li + li { padding-inline-start: 0; border-inline-start: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); } }

/* ===== 13-home-leadership.css ===== */
/* ==========================================================================
   Home: leadership (the CEO's word beside his framed portrait), news (featured + rows)
   ========================================================================== */
.leadership { background: radial-gradient(55% 75% at 22% 50%, rgba(10, 120, 224, 0.07), transparent 70%), var(--white); overflow: hidden; }
[dir="rtl"] .leadership { background: radial-gradient(55% 75% at 78% 50%, rgba(10, 120, 224, 0.07), transparent 70%), var(--white); }
.leadership-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.leadership-media { display: grid; justify-items: center; }
.leadership-body .kicker { margin-bottom: 48px; }   /* room for the large quote mark that hangs above the quote */
.pull-quote { position: relative; }
.pull-quote::before { content: "\201C"; position: absolute; inset-inline-start: -0.15em; top: -0.55em; font-family: var(--font-latin); font-size: 6rem; line-height: 1; color: var(--accent); opacity: 0.25; }
body.lang-ar .pull-quote::before { content: "\201D"; }
.pull-quote p { font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.leadership-body .link { margin-top: 32px; }
@media (max-width: 900px) {
  .leadership-grid { grid-template-columns: 1fr; }
  .leadership-media { justify-items: start; }
  .leadership .portrait { width: min(100%, 420px); }
}

/* ===== 14-home-news.css ===== */
/* ==========================================================================
   Home: news (three equal cards)
   ========================================================================== */
.news-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.news-home-head .lead { margin-top: 10px; }
.news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.news-card { display: flex; flex-direction: column; gap: 12px; }
.news-card-media { aspect-ratio: 16 / 10; }
.news-card .news-meta { font-size: 0.875rem; color: var(--slate-2); display: flex; gap: 6px 14px; flex-wrap: wrap; }
.news-card .h4 { font-size: 1.2rem; }
.news-card .h4 a:hover { color: var(--accent); }
.news-excerpt { color: var(--slate); font-size: 0.95rem; }
.news-card .link { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .news-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .news-cards { grid-template-columns: 1fr; } }

/* ===== 15-components.css ===== */
/* ==========================================================================
   Shared editorial components: numbered kickers, rail cards, chips
   ========================================================================== */
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--slate-2); }
.kicker-n { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-latin); font-weight: 700; letter-spacing: 0.12em; color: var(--accent); direction: ltr; }
.kicker-n::after { content: ""; width: 28px; height: 2px; background: currentColor; opacity: 0.6; }
.kicker-n .icon { width: 18px; height: 18px; }
.kicker-dark { color: var(--on-dark-muted); }
.kicker-dark .kicker-n { color: var(--accent-on-dark); }
.hero-kicker { margin-bottom: 18px; }
.kicker + .h2-bar { padding-top: 0; }
.kicker + .h2-bar::before { display: none; }
body.lang-en .kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; }
/* Arabic is cursive: tracking pulls joined letters apart, so it is off for Arabic labels */
body.lang-ar .kicker, body.lang-ar .rail-title { letter-spacing: 0; }

.rail-card { padding: 22px 22px 20px; border-radius: var(--radius-m); background: var(--paper); border: 1px solid var(--line); }
.rail-card + .rail-card { margin-top: 14px; }
.rail-title { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; color: var(--slate-2); margin-bottom: 12px; letter-spacing: 0.02em; }
.rail-index { font-family: var(--font-latin); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); direction: ltr; flex: none; }

.news-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; background: var(--accent-soft); color: var(--accent-hover); }
.news-chip-events { background: rgba(22, 224, 192, 0.16); color: #0B7A6A; }
.news-chip-national { background: rgba(46, 139, 87, 0.14); color: #1F6B41; }
.on-dark-meta .news-chip, .news-meta-dark .news-chip { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---------- page hero extras ---------- */
.hero-quote { margin: clamp(22px, 3vw, 32px) 0 0; padding-inline-start: 22px; border-inline-start: 3px solid var(--accent-on-dark); }
.hero-quote p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.4; color: #fff; max-width: 24ch; text-wrap: balance; }
.hero-quote p::before { content: "\201D"; color: var(--accent-on-dark); margin-inline-end: 8px; }
body.lang-en .hero-quote p::before { content: "\201C"; }
.hero-by { margin-top: 14px; display: grid; gap: 2px; }
.hero-by-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.hero-by-role { color: var(--on-dark-muted); font-size: 0.95rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3vw, 32px); }
.hero-meta li { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-meta-value { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1; color: #fff; direction: ltr; unicode-bidi: isolate; }
.hero-meta-label { color: var(--on-dark-muted); font-size: 0.875rem; }
.hero-aside { position: relative; isolation: isolate; justify-self: end; width: min(100%, 400px); }
.hero-aside-glow { position: absolute; inset: -10% -18% -6% -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 224, 192, 0.32), rgba(10, 120, 224, 0.12) 60%, transparent); filter: blur(24px); z-index: -1; }
@media (max-width: 1023px) { .page-hero.has-aside .page-hero-inner { grid-template-columns: 1fr; } .hero-aside { justify-self: start; width: min(100%, 320px); } }
/* ---------- brand band: a company logo in its own colours is the header's background art, on the brand's paper
   (agricultural sector: the Hasad Al-Dahab logo on its cream, --hero-paper). Text and line work turn dark. ---------- */
.page-hero-brand { background: var(--hero-paper, var(--paper)); color: #14201A; }
.page-hero-brand.has-aside .page-hero-inner { grid-template-columns: 1fr 1fr; }
.page-hero-brand .lead, .page-hero-brand .breadcrumb, .page-hero-brand .kicker-dark { color: var(--slate); }
.page-hero-brand .breadcrumb a:hover { color: var(--ink); }
.page-hero-brand .kicker-dark .kicker-n { color: #51704C; }          /* the logo's green: 4.6:1 on the cream */
.page-hero-brand :focus-visible { outline-color: var(--accent-hover); }
.page-hero-brand .lattice { color: #51704C; opacity: 0.12; }
.page-hero-brand .cells polygon { fill: #51704C; stroke: #51704C; }
.hero-brand { justify-self: center; width: min(100%, 600px); }
.hero-brand .hero-aside-glow { inset: -40% -8%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), transparent); filter: blur(12px); }
.hero-brand-logo { display: block; width: 100%; height: auto; }
/* two columns down to 600 px (any phone turned sideways, tablets), so the logo stays on the first screen */
@media (max-width: 1023px) { .hero-brand { width: min(100%, 440px); } }
@media (max-width: 599px) { .page-hero-brand.has-aside .page-hero-inner { grid-template-columns: 1fr; } .hero-brand { justify-self: start; margin-top: 8px; } }

/* family sub-navigation under the hero (About pages, sectors) */
.subnav { background: var(--white); border-bottom: 1px solid var(--line); }
.subnav-list { display: flex; gap: clamp(10px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; }
.subnav-list::-webkit-scrollbar { display: none; }
.subnav-list li { flex: none; }
.subnav-list a { display: inline-flex; align-items: center; gap: 10px; padding: 18px 2px; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; color: var(--slate); white-space: nowrap; transition: color 0.25s, border-color 0.25s; }
.subnav-list a:hover { color: var(--ink); }
.subnav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sector, var(--accent)); }
.subnav-index { font-family: var(--font-latin); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--sector-ink, var(--accent)); direction: ltr; }
@media (max-width: 700px) { .subnav-list a { padding: 14px 2px; } }

/* ===== 16-portrait.css ===== */
/* ==========================================================================
   Portrait: the CEO photo, framed (partials/portrait.html). A ring of brand light slowly travels round a rounded
   4:5 photo; a soft glow and a lattice corner sit behind it; on the home page a glass name plate rests on the plain
   table at the bottom of the picture. The ring turns by rotating one layer behind the photo (a compositor transform,
   cheap on phones); everything that moves stops under reduced motion.
   ========================================================================== */
.portrait { position: relative; isolation: isolate; margin: 0; width: min(100%, 460px); }
.portrait-ring {
  position: relative; isolation: isolate; overflow: hidden; padding: 3px; border-radius: 30px; background: #0A78E0;
  box-shadow: 0 50px 90px -40px rgba(7, 21, 38, 0.55), 0 20px 40px -26px rgba(10, 120, 224, 0.5);
}
.portrait-ring::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(#0A78E0, #16E0C0 14%, #FFFFFF 22%, #16E0C0 30%, #0A78E0 46%, #0B1F33 70%, #0A78E0);
}
.portrait-photo { position: relative; overflow: hidden; border-radius: 27px; aspect-ratio: 4 / 5; background: #EEF1F4; }
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; }
/* a sheen that crosses the photo once as it arrives */
.portrait-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
}
.portrait-glow {
  position: absolute; z-index: -1; inset: 4% -16% -2% -16%; border-radius: 50%; pointer-events: none; filter: blur(30px);
  background: radial-gradient(closest-side, rgba(22, 224, 192, 0.34), rgba(10, 120, 224, 0.2) 55%, transparent);
}
.portrait-lattice {
  z-index: -1; width: 80%; height: 64%; top: -10%; inset-inline-end: -18%; color: var(--accent); opacity: 0.22;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent);
}
.page-hero .portrait-lattice { color: var(--teal); opacity: 0.4; }
.hero-aside-portrait { width: min(100%, 440px); }
@media (max-width: 1023px) { .hero-aside-portrait { width: min(100%, 360px); } }

/* name plate: dark glass over the white table, so the name reads at any size */
.portrait-plate {
  position: absolute; inset-inline: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 18px; color: #fff; background: rgba(7, 21, 38, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.6);
}
.portrait-plate-mark { flex: none; width: 42px; height: 42px; padding: 7px; border-radius: 50%; background: #fff; }
.portrait-plate-text { display: grid; gap: 2px; min-width: 0; }
.portrait-plate-text strong { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35; }
.portrait-plate-text span { font-size: 0.82rem; line-height: 1.5; color: var(--on-dark-muted); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .portrait-ring::before { animation: ring-turn 12s linear infinite; }
  html:not(.no-motion) .portrait-glow { animation: glow-breathe 8s ease-in-out infinite alternate; }
  @keyframes ring-turn { to { rotate: 1turn; } }
  /* further down a page: the photo settles from a slight zoom as the frame reveals, a sheen crosses it, the plate rises */
  html.js:not(.no-motion) .portrait.reveal-scale .portrait-photo img { transform: scale(1.1); transition: transform 1.8s var(--ease-out); }
  html.js:not(.no-motion) .portrait.reveal-scale.in .portrait-photo img { transform: none; }
  html.js:not(.no-motion) .portrait.reveal-scale .portrait-photo::after { transition: transform 1.5s var(--ease-out) 0.35s; }
  html.js:not(.no-motion) .portrait.reveal-scale.in .portrait-photo::after { transform: translateX(120%); }
  html.js:not(.no-motion) .portrait.reveal-scale .portrait-plate { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease-out) 0.55s, transform 0.8s var(--ease-out) 0.55s; }
  html.js:not(.no-motion) .portrait.reveal-scale.in .portrait-plate { opacity: 1; transform: none; }
  /* in the page header the photo is on screen from the first frame: it only settles, it never fades in */
  html.js:not(.no-motion) .portrait.is-hero .portrait-photo img { animation: portrait-settle 1.8s var(--ease-out) both; }
  html.js:not(.no-motion) .portrait.is-hero .portrait-photo::after { animation: portrait-sheen 1.5s var(--ease-out) 0.4s both; }
  @keyframes portrait-settle { from { transform: scale(1.1); } }
  @keyframes portrait-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
}
@media print { .portrait-glow, .portrait-lattice, .portrait-photo::after { display: none; } .portrait-ring { box-shadow: none; } }

/* ===== 20-about.css ===== */
/* ==========================================================================
   About hub: story with a layered photo cluster, year ledger timeline, presence constellation, "more" tiles
   ========================================================================== */
.story { background: var(--paper); overflow: hidden; }
.story-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.story-statement { max-width: 24ch; font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 800; margin-bottom: clamp(22px, 3vw, 32px); }
.story-p { color: var(--slate); max-width: 62ch; margin-bottom: 1.15em; }
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 40px); padding-top: 24px; border-top: 1px solid var(--line-2); }
.ledger li { padding-inline-start: 14px; border-inline-start: 2px solid var(--accent); }
.ledger-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .ledger-value { text-align: right; }
.ledger-label { display: block; margin-top: 4px; color: var(--slate); font-size: 0.9rem; line-height: 1.4; }
.story-media { position: relative; padding-bottom: 22%; isolation: isolate; }
.story-photo-main { width: 82%; margin-inline-start: auto; aspect-ratio: 4 / 4.6; }
.story-photo-second { position: absolute; bottom: 0; inset-inline-start: 0; width: 54%; aspect-ratio: 3 / 2; border: 5px solid var(--paper); box-shadow: var(--shadow-2); }
.story-badge { position: absolute; top: 9%; inset-inline-start: 2%; display: grid; gap: 2px; padding: 16px 20px; border-radius: var(--radius-m); background: var(--dark); color: #fff; box-shadow: var(--shadow-2); }
.story-badge-value { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; direction: ltr; unicode-bidi: isolate; color: var(--accent-on-dark); }
.story-badge-label { font-size: 0.85rem; color: var(--on-dark-muted); white-space: nowrap; }
.story-lattice { inset: -14% -18% auto auto; width: 80%; height: 70%; opacity: 0.32; color: var(--accent); z-index: -1; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 60% 40%, #000 20%, transparent 75%); }
@media (max-width: 1023px) { .story-grid { grid-template-columns: 1fr; } .story-media { max-width: 560px; margin-top: 8px; } }
@media (max-width: 560px) { .ledger { grid-template-columns: 1fr 1fr; } .story-badge { padding: 12px 14px; } .story-badge-value { font-size: 1.6rem; } }

/* timeline: outlined year numerals that fill in as the progress line reaches them */
.timeline-section { background: var(--white); }
.timeline-title { margin-bottom: clamp(32px, 4vw, 56px); }
.timeline { position: relative; display: grid; gap: 0; max-width: 1040px; --year-w: 230px; }
.timeline-track { position: absolute; top: 18px; bottom: 18px; inset-inline-start: calc(var(--year-w) + 11px); width: 2px; background: var(--line-2); }
.timeline-progress { display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, var(--accent), var(--teal)); transform-origin: top; }
html.js .timeline-progress { transform: scaleY(0); }
html.js.no-motion .timeline-progress { transform: none; }
@media (max-width: 1023px) { html.js .timeline-progress { transform: none; } }
.milestone { position: relative; display: grid; grid-template-columns: var(--year-w) 1fr; gap: 24px; align-items: start; padding: 0 0 clamp(36px, 5vw, 56px); }
.milestone-year { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.2; color: transparent; -webkit-text-stroke: 1.2px var(--slate-2); transition: color 0.6s var(--ease-out), -webkit-text-stroke-color 0.6s; }
.milestone.is-reached .milestone-year, html.no-motion .milestone-year, html:not(.js) .milestone-year { color: var(--ink); -webkit-text-stroke-color: transparent; }
.milestone-dot { position: absolute; top: 14px; inset-inline-start: calc(var(--year-w) + 3px); width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--line-2); transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-out); }
.milestone.is-reached .milestone-dot, html.no-motion .milestone-dot, html:not(.js) .milestone-dot { border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); transform: scale(1.1); }
.milestone-text { padding-inline-start: 32px; padding-top: 10px; max-width: 56ch; color: var(--ink-2); font-size: 1.05rem; }
@media (max-width: 1023px) { .milestone-year { color: var(--ink); -webkit-text-stroke-color: transparent; } .milestone-dot { border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); } }
@media (max-width: 640px) {
  .timeline { --year-w: 0px; }
  .milestone { grid-template-columns: 1fr; gap: 8px; padding-inline-start: 34px; }
  .milestone-year { font-size: 1.6rem; }
  .timeline-track { inset-inline-start: 8px; }
  .milestone-dot { inset-inline-start: 0; top: 8px; }
  .milestone-text { padding-inline-start: 0; padding-top: 0; }
}

/* presence: a real map of the region (generated by tools/make_map.py) with the three countries lit and joined */
.presence-inner { grid-template-columns: 5fr 7fr; align-items: center; }
.presence-stats { display: flex; gap: 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.presence-stat-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; color: #fff; direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .presence-stat-value { text-align: right; }
.presence-stat-label { display: block; margin-top: 4px; color: var(--on-dark-muted); font-size: 0.9rem; }
.presence-note { margin-top: 22px; color: var(--on-dark-muted); font-size: 0.95rem; max-width: 46ch; }
.constellation { position: relative; direction: ltr; aspect-ratio: var(--map-aspect, 1000 / 776); }
.map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-dim path { fill: url(#map-dots-dim); }
.map-glow path { fill: rgba(22, 224, 192, 0.28); filter: url(#map-glow); }
.map-hi path { fill: url(#map-dots-hi); }
.map-links path { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) { html:not(.no-motion) .map-links path { animation: constellation-flow 6s linear infinite; } }
@keyframes constellation-flow { to { stroke-dashoffset: -52; } }
.node { position: absolute; left: var(--x); top: var(--y); display: grid; justify-items: center; gap: 8px; transform: translate(-50%, -9px); text-align: center; width: 190px; }   /* the ring, not the box, sits on the city */
[dir="rtl"] .node { direction: rtl; }
.node-1 { width: 280px; transform: translate(-50%, -13px); }
.node-ring { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(109, 185, 255, 0.28), 0 0 24px rgba(109, 185, 255, 0.7); }
.node-1 .node-ring { width: 26px; height: 26px; background: linear-gradient(135deg, #fff, var(--teal)); box-shadow: 0 0 0 7px rgba(22, 224, 192, 0.2), 0 0 34px rgba(22, 224, 192, 0.7); }
.node-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { html:not(.no-motion) .node-ring::after { animation: node-pulse 2.8s ease-out infinite; } html:not(.no-motion) .node-2 .node-ring::after { animation-delay: 0.9s; } html:not(.no-motion) .node-3 .node-ring::after { animation-delay: 1.8s; } }
@keyframes node-pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
.node-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.3; color: #fff; text-wrap: balance; text-shadow: 0 2px 14px rgba(7, 21, 38, 0.9), 0 0 4px rgba(7, 21, 38, 0.9); }
.node-1 .node-name { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.node-note { color: rgba(255, 255, 255, 0.82); font-size: 0.85rem; line-height: 1.45; max-width: 20ch; text-shadow: 0 1px 10px rgba(7, 21, 38, 0.95), 0 0 3px rgba(7, 21, 38, 0.95); }
@media (max-width: 1000px) { .presence-inner { grid-template-columns: 1fr; } .constellation { max-width: 640px; } }
@media (max-width: 700px) {
  .constellation { aspect-ratio: auto; display: grid; gap: 12px; direction: inherit; }
  .map { display: none; }
  .node { position: static; transform: none; width: auto; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; justify-items: start; text-align: start; align-items: center; padding: 14px 16px; border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
  .node-ring, .node-1 .node-ring { grid-row: span 2; width: 14px; height: 14px; margin: auto; }
  .node-name, .node-note { text-shadow: none; max-width: none; }
  .presence-stats { gap: 20px; }
}

.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.more-tile a { position: relative; display: flex; align-items: flex-end; min-height: 300px; height: 100%; border-radius: var(--radius-m); overflow: hidden; background: var(--paper-2); isolation: isolate; transition: box-shadow 0.3s var(--ease-out); }
.more-tile a:hover { box-shadow: var(--shadow-2); }
.more-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease-out); }
.more-tile a:hover img { transform: scale(1.03); }
.more-tile.has-photo a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 21, 38, 0.9) 0%, rgba(7, 21, 38, 0.35) 55%, rgba(7, 21, 38, 0.05) 100%); }
.more-tile .lattice { inset: -20% -10% auto auto; width: 70%; height: 140%; opacity: 0.35; color: var(--accent); z-index: -1; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.more-body { display: grid; gap: 8px; padding: clamp(22px, 3vw, 36px); width: 100%; }
.more-body .icon { width: 26px; height: 26px; color: var(--accent); transition: transform 0.3s var(--ease-out); }
.more-tile a:hover .more-body .icon { transform: translate(3px, -3px); }
.more-text { color: var(--slate); max-width: 40ch; }
.has-photo .more-body { color: #fff; }
.has-photo .more-text { color: rgba(255, 255, 255, 0.82); }
.has-photo .more-body .icon { color: #fff; }
@media (max-width: 899px) { .more-grid { grid-template-columns: 1fr; } .more-tile a { min-height: 220px; } .more-tile.has-photo a { min-height: 340px; } }   /* a photo card tall enough for the face to sit above the text */

/* ==========================================================================
   CEO message: the letter with a sticky rail, signature (the opening band is the shared page hero)
   ========================================================================== */
.ceo { background: var(--white); }
.ceo-grid { display: grid; grid-template-columns: 7fr minmax(260px, 4fr); gap: clamp(40px, 6vw, 96px); align-items: stretch; }
.ceo-letter { max-width: 66ch; }
.ceo-salutation { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: 1.2em; }
.ceo-letter > p { margin-bottom: 1.35em; color: var(--ink-2); font-size: 1.0625rem; }
.letter-pull { position: relative; margin: clamp(28px, 4vw, 44px) 0; padding: 26px 28px 26px; padding-inline-start: 34px; border-inline-start: 3px solid var(--accent); background: var(--paper); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
[dir="rtl"] .letter-pull { border-radius: var(--radius-m) 0 0 var(--radius-m); }
.letter-pull .icon { position: absolute; top: -14px; inset-inline-start: 22px; width: 30px; height: 30px; color: var(--accent); background: var(--white); border-radius: 50%; padding: 4px; }
.letter-pull p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.4; color: var(--ink); }
.ceo-signature { position: relative; margin-top: clamp(32px, 5vw, 48px); padding: 28px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.signature-lattice { inset: -40% -10% auto auto; width: 40%; height: 180%; opacity: 0.25; color: var(--accent); -webkit-mask-image: linear-gradient(to left, #000, transparent 90%); mask-image: linear-gradient(to left, #000, transparent 90%); }
[dir="rtl"] .signature-lattice { -webkit-mask-image: linear-gradient(to right, #000, transparent 90%); mask-image: linear-gradient(to right, #000, transparent 90%); }
.ceo-closing { color: var(--slate); }
.ceo-sign-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 10px; }
.ceo-sign-role { color: var(--slate); font-size: 0.95rem; margin-top: 2px; }
.ceo-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.rail-list { display: grid; gap: 6px; }
.rail-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--white); font-size: 0.95rem; font-weight: 600; transition: background-color 0.25s, color 0.25s, transform 0.3s var(--ease-out); }
.rail-list a:hover { background: var(--accent-soft); color: var(--accent-hover); transform: translateX(var(--nudge, 2px)); }
[dir="rtl"] .rail-list a { --nudge: -2px; }
.rail-list .icon { width: 16px; height: 16px; margin-inline-start: auto; opacity: 0.7; }
.rail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.rail-themes { display: grid; gap: 10px; color: var(--ink-2); font-size: 0.95rem; }
.rail-themes li { display: flex; gap: 12px; align-items: baseline; }
@media (max-width: 1023px) { .ceo-grid { grid-template-columns: 1fr; } .ceo-sticky { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rail-card + .rail-card { margin-top: 0; } }
@media (max-width: 600px) { .ceo-sticky { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mission, values, goals
   ========================================================================== */
.mission { background: var(--paper); }
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mission-card { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s; }
.mission-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--teal)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-out); }
[dir="rtl"] .mission-card::before { transform-origin: 100% 50%; }
.mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.mission-card:hover::before { transform: scaleX(1); }
.mission-index { position: absolute; top: 18px; right: 22px; font-family: var(--font-latin); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--paper-2); direction: ltr; transition: color 0.3s; }
.mission-card:hover .mission-index { color: var(--accent-soft); }
/* the numerals are ltr text, so they are placed with physical offsets: inline-end of the card in either direction */
[dir="rtl"] .mission-index { right: auto; left: 22px; }
.mission-icon-wrap { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-bottom: 22px; }
.mission-icon { width: 28px; height: 28px; }
.mission-card .h4 { margin-bottom: 8px; }
.mission-card p { color: var(--slate); font-size: 0.975rem; }
@media (max-width: 900px) { .mission-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mission-grid { grid-template-columns: 1fr; } }

.values-inner { position: relative; z-index: 2; }
.values-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }
.values-head .lead { max-width: 40ch; }
.value-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.value-plate { position: relative; display: grid; align-content: end; gap: 10px; min-height: 300px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; transition: transform 0.4s var(--ease-out), background-color 0.3s, border-color 0.3s; }
.value-plate:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.value-index { position: absolute; top: 14px; right: 18px; font-family: var(--font-latin); font-weight: 800; font-size: 3.2rem; line-height: 1; color: rgba(255, 255, 255, 0.08); direction: ltr; }
[dir="rtl"] .value-index { right: auto; left: 18px; }
.value-icon { width: 34px; height: 34px; color: var(--accent-on-dark); margin-bottom: auto; }
.value-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; color: #fff; }
.value-text { color: var(--on-dark-muted); font-size: 0.925rem; line-height: 1.55; }
@media (max-width: 1000px) { .value-plates { grid-template-columns: repeat(2, 1fr); } .value-plate { min-height: 240px; } }
@media (max-width: 520px) { .value-plates { grid-template-columns: 1fr; } .value-plate { min-height: 0; padding-top: 64px; } }

.goals { background: var(--white); }
.goals-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.goals-list { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); padding: 0; list-style: none; }
.goal-card { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--radius-m); background: var(--paper); border: 1px solid var(--line); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.goal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.goal-index { font-family: var(--font-latin); font-weight: 800; font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--accent); direction: ltr; text-align: center; }
.goal-card .h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; }
.goals-media-wrap { position: relative; isolation: isolate; }
.goals-media { aspect-ratio: 4 / 3; }
.goals-lattice { inset: -12% -16% auto auto; width: 70%; height: 60%; opacity: 0.3; color: var(--accent); z-index: -1; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 60% 40%, #000 20%, transparent 75%); }
@media (max-width: 900px) { .goals-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .goal-card { grid-template-columns: 52px 1fr; gap: 12px; } .goal-index { font-size: 2.6rem; } }

/* ===== 30-sectors.css ===== */
/* ==========================================================================
   Sector pages: one template, one accent per page (--sector on <body>)
   ========================================================================== */
.page-sector .breadcrumb a:hover, .page-sector .link { color: var(--accent); }
.sector-intro { background: var(--white); }
.sector-intro-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.sector-intro-text p + p { margin-top: 1.2em; color: var(--slate); }
.sector-facts { display: grid; gap: 22px; padding-inline-start: clamp(20px, 3vw, 40px); border-inline-start: 3px solid var(--sector); }
.fact-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; color: var(--sector); direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .fact-value { text-align: right; }
.fact-label { display: block; color: var(--slate); margin-top: 6px; max-width: 26ch; }
@media (max-width: 900px) { .sector-intro-grid { grid-template-columns: 1fr; } .sector-facts { grid-template-columns: repeat(3, 1fr); border: 0; padding: 24px 0 0; border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .sector-facts { grid-template-columns: 1fr; } }

/* ---------- industrial: factory stack ---------- */
.factories-title { margin-bottom: clamp(28px, 4vw, 44px); }
.stack { display: grid; gap: 24px; }
.factory { position: relative; display: grid; grid-template-columns: 5fr 6fr; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-1); }
.factory-index { position: absolute; z-index: 2; top: 18px; left: 20px; padding: 6px 12px; border-radius: 999px; background: rgba(7, 21, 38, 0.72); color: #fff; font-family: var(--font-latin); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; direction: ltr; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[dir="rtl"] .factory-index { left: auto; right: 20px; }   /* over the photo, which sits at the inline start */
.factory-body .h3 { position: relative; padding-bottom: 12px; }
.factory-body .h3::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 36px; height: 3px; background: var(--sector); border-radius: 2px; }
.factory-media { aspect-ratio: auto; border-radius: 0; min-height: 320px; }
.factory-body { padding: clamp(24px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.factory-logo { width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 2px 10px rgba(11, 31, 51, 0.12); }
.factory-body p { color: var(--slate); max-width: 58ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: var(--radius-s); background: var(--sector-soft); color: var(--sector-ink); font-size: 0.875rem; font-weight: 600; }
/* stacking mode (switched on by motion.js): cards pin near the top and settle one behind the next */
.factories.is-stacking .stack { gap: 0; }
.factories.is-stacking .stack-card { margin-bottom: 24px; transform-origin: top center; will-change: transform; }
@media (max-width: 899px) { .factory { grid-template-columns: 1fr; } .factory-media { min-height: 0; aspect-ratio: 16 / 9; } }

/* ---------- commercial: categories, brand + network ---------- */
.categories { background: var(--white); }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.category { position: relative; border-radius: var(--radius-m); overflow: hidden; background: var(--white); border: 1px solid var(--line); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.category:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.category-media { aspect-ratio: 2.4 / 1; border-radius: 0; background: #eaf3fb; }
.category-media img { object-fit: cover; transition: transform 1s var(--ease-out); }
.category:hover .category-media img { transform: scale(1.05); }
.category-name { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-weight: 600; border-top: 1px solid var(--line); }
.category-index { font-family: var(--font-latin); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--sector-ink); direction: ltr; }
@media (max-width: 1000px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .category-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .category-name { padding: 10px 12px; font-size: 0.875rem; gap: 8px; } }
.brand-network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.brand-block, .network-block { padding: clamp(24px, 3.5vw, 48px); border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); }
.brand-block img { width: min(100%, 260px); height: auto; margin-bottom: 24px; }
.brand-block .h3, .network-block .h3 { margin-bottom: 12px; }
.brand-block p, .network-block p { color: var(--slate); }
.network-block { background: var(--sector-soft); border-color: transparent; }
@media (max-width: 800px) { .brand-network-grid { grid-template-columns: 1fr; } }

/* ---------- agricultural: lines, families, products, network ---------- */
.agri-lines { background: var(--white); }
.agri-lines-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.steps { position: relative; margin-top: 28px; display: grid; gap: 18px; padding: 0; list-style: none; }
.steps::before { content: ""; position: absolute; top: 24px; bottom: 24px; inset-inline-start: 23px; width: 2px; background: var(--line-2); }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.step-index { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); border: 2px solid var(--sector); color: var(--sector-ink); font-family: var(--font-latin); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; direction: ltr; box-shadow: 0 0 0 6px var(--white); }
.step-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; padding-top: 10px; }
.step-text { display: block; color: var(--slate); margin-top: 4px; }
.families { margin-top: 28px; display: grid; gap: 10px; }
.families li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-s); background: var(--white); border: 1px solid var(--line); font-weight: 600; color: var(--ink); transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s; }
.families li:hover { transform: translateX(var(--nudge, 4px)); border-color: var(--sector); box-shadow: var(--shadow-1); }
[dir="rtl"] .families li { --nudge: -4px; }
.families .icon { width: 20px; height: 20px; color: var(--sector); }
@media (max-width: 800px) { .agri-lines-grid { grid-template-columns: 1fr; } }
.products { padding: var(--section) 0; background: var(--paper); }
.products-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.products-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 16px; scrollbar-width: thin; }
.product { flex: 0 0 220px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; text-align: center; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.product img { aspect-ratio: 1; object-fit: contain; }
.product-name { display: block; margin-top: 10px; font-weight: 600; font-family: var(--font-latin); font-size: 0.95rem; }
.agri-network-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.agri-network-grid .network-block { display: flex; flex-direction: column; justify-content: center; }
/* width pinned to the column: stretched to a tall row, the 3:2 ratio alone made the photo wider than its column,
   and in Arabic it pushed 38 px past the left edge of the page (a sideways scroll) */
.agri-photo { aspect-ratio: 3 / 2; width: 100%; }
@media (max-width: 900px) { .agri-network-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .agri-network-grid .network-block { grid-column: 1 / -1; } }

/* ---------- real estate: company block, hotels ---------- */
.re-company { background: var(--white); }
.re-company-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.re-company-media { aspect-ratio: 4 / 3; }
.re-logo { width: 112px; height: 112px; border-radius: 50%; box-shadow: var(--shadow-1); margin-bottom: 22px; }
.re-company .h3 { margin-bottom: 10px; }
@media (max-width: 900px) { .re-company-grid { grid-template-columns: 1fr; } }
.hotels-title { margin-bottom: clamp(28px, 4vw, 44px); }
.hotel-list { display: grid; gap: clamp(24px, 4vw, 48px); }
.hotel { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(24px, 3vw, 40px); align-items: center; padding: clamp(20px, 2.5vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); transition: box-shadow 0.4s var(--ease-out); }
.hotel:hover { box-shadow: var(--shadow-2); }
.hotel-body .h3 { position: relative; padding-bottom: 12px; }
.hotel-body .h3::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 36px; height: 3px; background: var(--sector); border-radius: 2px; }
.hotel:nth-child(even) .hotel-media { order: 2; }
.hotel-media { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.hotel-media .media:first-child { aspect-ratio: 4 / 3; }
.hotel-media .media:first-child img { object-position: center 70%; }
.hotel-media .media:last-child { aspect-ratio: 2 / 3; }
.hotel-body p { color: var(--slate); margin: 12px 0 20px; }
.hotel-facts { display: grid; gap: 10px; font-size: 0.95rem; }
.hotel-facts span, .hotel-facts a { display: flex; align-items: flex-start; gap: 10px; }
.hotel-facts .icon { width: 20px; height: 20px; color: var(--sector); flex: none; margin-top: 3px; }
.hotel-facts a:hover { color: var(--sector-ink); }
@media (max-width: 900px) { .hotel { grid-template-columns: 1fr; } .hotel:nth-child(even) .hotel-media { order: 0; } }

/* ---------- other sectors ---------- */
.see-also { padding-bottom: var(--section); }
.see-also .container { border-top: 1px solid var(--line); padding-top: clamp(32px, 4vw, 48px); }
.see-also-title { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--slate); margin-bottom: 20px; }
.see-also-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.see-also-list a { position: relative; display: block; aspect-ratio: 16 / 7; border-radius: var(--radius-m); overflow: hidden; color: #fff; isolation: isolate; background: var(--dark); }
.see-also-list img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.9s var(--ease-out), opacity 0.4s; }
.see-also-list a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 21, 38, 0.9) 0%, rgba(7, 21, 38, 0.15) 70%); background: linear-gradient(to top, color-mix(in srgb, var(--sector) 55%, var(--dark)) 0%, rgba(7, 21, 38, 0.15) 70%); }
.see-also-list span { position: absolute; inset-inline: 18px; bottom: 16px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.see-also-list a:hover img { transform: scale(1.04); opacity: 1; }
/* a sector shown by its company logo (agricultural: Hasad Al-Dahab): all cream, the logo above and the title in dark
   ink below it, with no colour band */
.see-also-list a.has-logo { background: var(--hero-paper, var(--paper)); color: #14201A; box-shadow: inset 0 0 0 1px rgba(20, 32, 26, 0.08); }
.see-also-list .see-also-logo { position: absolute; left: 12%; top: 9%; width: 76%; height: 56%; object-fit: contain; opacity: 1; }
.see-also-list a.has-logo::after { display: none; }
@media (max-width: 700px) { .see-also-list { grid-template-columns: 1fr; } .see-also-list a { aspect-ratio: 16 / 6; } }

/* ===== 40-news-contact.css ===== */
/* ==========================================================================
   News listing, article, contact
   ========================================================================== */
.news-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.news-filters { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); }
.news-filters a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 0.925rem; color: var(--slate); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.news-filters a:hover { color: var(--ink); }
.news-filters a[aria-current="page"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-1); }
.news-filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--line); font-family: var(--font-latin); font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.news-filters a[aria-current="page"] .news-filter-count { background: var(--accent); color: #fff; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.9rem; color: var(--slate); }
.news-meta .icon { width: 16px; height: 16px; margin-inline-end: 4px; vertical-align: -3px; }

/* featured post: cinematic card */
.news-feature { margin-bottom: clamp(40px, 5vw, 72px); }
.news-feature-link { position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 52vw, 600px); border-radius: var(--radius-m); overflow: hidden; background: var(--dark); color: #fff; isolation: isolate; box-shadow: var(--shadow-1); }
.news-feature-media { position: absolute; inset: 0; z-index: -2; }
.news-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.news-feature-link:hover .news-feature-media img { transform: scale(1.04); }
.news-feature-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7, 21, 38, 0.97) 0%, rgba(7, 21, 38, 0.78) 38%, rgba(7, 21, 38, 0.3) 70%, rgba(7, 21, 38, 0.1) 100%); }
.news-feature-title, .news-feature-excerpt { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.news-feature-body { position: relative; z-index: 1; width: 100%; max-width: 720px; padding: clamp(24px, 4vw, 56px); }
.news-meta-dark { color: rgba(255, 255, 255, 0.78); }
.news-featured-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-latin); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on-dark); }
.news-featured-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-on-dark); box-shadow: 0 0 12px var(--accent-on-dark); }
.news-feature-title { margin: 14px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.25; max-width: 22ch; }
.news-feature-excerpt { color: rgba(255, 255, 255, 0.84); max-width: 58ch; font-size: clamp(1rem, 1.3vw, 1.125rem); }
.news-feature-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 20px; border-radius: var(--radius-s); background: #fff; color: var(--ink); font-weight: 600; transition: background-color 0.25s, transform 0.3s var(--ease-out); }
.news-feature-link:hover .news-feature-cta { background: var(--paper-2); }
.news-feature-cta .icon { width: 18px; height: 18px; }

/* post cards */
.news-more-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card-link { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s; }
.news-card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.news-card-media { display: block; aspect-ratio: 16 / 10; border-radius: 0; }
.news-card-media img { transition: transform 1s var(--ease-out); }
.news-card-link:hover .news-card-media img { transform: scale(1.04); }
.news-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.news-card-title { display: block; line-height: 1.4; transition: color 0.25s; }
.news-card-link:hover .news-card-title { color: var(--accent); }
.news-card-excerpt { color: var(--slate); font-size: 0.925rem; line-height: 1.6; }
.news-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 0.925rem; color: var(--accent); }
.news-card-cta .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.news-card-link:hover .news-card-cta .icon { transform: translateX(var(--nudge, 3px)); }
[dir="rtl"] .news-card-link { --nudge: -3px; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } .news-feature-link { min-height: 440px; } }

/* article */
.post-hero .page-hero-bg img { opacity: 0.35; }
.on-dark-meta { color: var(--on-dark-muted); margin-bottom: 16px; }
.post-title { max-width: 30ch; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.post { background: var(--white); }
.post-layout { display: grid; grid-template-columns: minmax(0, 760px) 280px; gap: clamp(40px, 6vw, 96px); justify-content: space-between; }
.post-body { font-size: 1.125rem; }
.post-excerpt { margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid var(--line); }
.post-body > p { margin-bottom: 1.4em; color: var(--ink-2); }
.post-h2 { margin: 2.2em 0 0.8em; scroll-margin-top: calc(var(--header-h) + 24px); }
.post-list { display: grid; gap: 12px; margin: 0 0 1.8em; padding: 0; list-style: none; }
.post-list li { position: relative; padding-inline-start: 26px; color: var(--ink-2); }
.post-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.65em; width: 12px; height: 2px; background: var(--accent); }
.post-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.post-author { display: flex; align-items: center; gap: 14px; }
.post-author img { width: 48px; height: 48px; border-radius: 50%; background: var(--paper-2); padding: 6px; }
.post-author-name { font-weight: 700; font-size: 1rem; }
.share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-label { font-size: 0.9rem; font-weight: 600; color: var(--slate); margin-inline-end: 4px; }
.share-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); background: var(--white); transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--ease-out); }
.share-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.share-btn .icon { width: 18px; height: 18px; }
.share-status { font-size: 0.875rem; color: #067647; font-weight: 600; }
.post-rail-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.post-toc { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.post-toc a { position: relative; display: block; padding: 8px 10px; padding-inline-start: 22px; border-radius: var(--radius-s); font-size: 0.925rem; color: var(--ink-2); line-height: 1.4; transition: background-color 0.25s, color 0.25s; }
.post-toc a::before { content: ""; position: absolute; inset-inline-start: 6px; top: 1.05em; width: 8px; height: 2px; background: var(--accent); transition: width 0.3s var(--ease-out); }
.post-toc a:hover { background: var(--paper); color: var(--accent); }
.post-toc a:hover::before { width: 12px; }
.related { padding: var(--section) 0; background: var(--paper); }
@media (max-width: 1023px) { .post-layout { grid-template-columns: minmax(0, 760px); } .post-rail { display: none; } }

/* contact */
.contact { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-tile { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px; border-radius: var(--radius-m); background: var(--paper); border: 1px solid var(--line); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s; }
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; background: var(--white); }
.contact-tile-wide { grid-column: 1 / -1; }
.contact-tile-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.contact-tile-icon .icon { width: 24px; height: 24px; }
.contact-tile-body .h4 { margin-bottom: 4px; }
.contact-tile-body p { color: var(--slate); font-size: 0.95rem; }
.contact-hours { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 0.9rem; }
.contact-hours .icon { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.contact-hours strong { color: var(--ink); }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.contact-links .link { font-size: 0.95rem; overflow-wrap: anywhere; }
.contact-links .link .icon { width: 16px; height: 16px; }
.contact-form-wrap { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-1); }
.contact-form-head { position: relative; padding: clamp(24px, 3vw, 36px); background: var(--dark); color: #fff; overflow: hidden; }
.contact-form-head::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 224, 192, 0.35), transparent); pointer-events: none; }
.contact-form-head .kicker { margin-bottom: 10px; }
.contact-form-head .h3 { color: #fff; }
.contact-form-head p { color: var(--on-dark-muted); margin-top: 8px; max-width: 46ch; }
.contact-form { display: grid; gap: 18px; padding: clamp(24px, 3vw, 36px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 0.925rem; }
.req { color: var(--accent); }
.field input, .field textarea { width: 100%; padding: 13px 14px; border-radius: var(--radius-s); border: 1.5px solid var(--line-2); background: var(--paper); font: inherit; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { resize: vertical; min-height: 140px; }
.field-error { display: none; color: #B42318; font-size: 0.875rem; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #B42318; }
.field.is-invalid .field-error { display: block; }
.gotcha { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-actions .btn .icon { width: 18px; height: 18px; }
.form-status { font-size: 0.95rem; }
.form-status.is-ok { color: #067647; }
.form-status.is-err { color: #B42318; }
/* contact: a live Google map filling the frame, with a floating glass location card. Google's own controls sit in fixed
   physical corners whatever the page language (place card top-left, map type bottom-right, fullscreen bottom-left),
   so our card takes the free top-right corner in both languages. Placeholder (dotted field, lattice, pulsing pin) until
   the embed has loaded; on phones the card sits under the map. */
.map-section { padding-bottom: var(--section); }
.map-frame { position: relative; min-height: clamp(540px, 48vw, 640px); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); box-shadow: var(--shadow-1); isolation: isolate; }
.map-canvas { position: absolute; inset: 0; z-index: 0; }
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background-color: var(--paper-2); background-image: radial-gradient(circle, rgba(11, 31, 51, 0.13) 1px, transparent 1.6px); background-size: 22px 22px; }
.map-placeholder .lattice { inset: -20% -12% auto auto; width: 60%; height: 150%; opacity: 0.3; color: var(--accent); -webkit-mask-image: radial-gradient(ellipse 55% 55% at 60% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 55% 55% at 60% 45%, #000 20%, transparent 75%); }
.map-pin { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 14px 30px -10px rgba(9, 112, 208, 0.6); }
.map-pin .icon { width: 28px; height: 28px; }
.map-pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity 0.6s var(--ease-out); }
html.js .map-frame:not(.is-loaded) .map-iframe { opacity: 0; pointer-events: none; }
.map-card { position: absolute; z-index: 2; top: clamp(16px, 2.4vw, 28px); right: clamp(16px, 2.4vw, 28px); width: min(420px, calc(100% - 32px)); padding: clamp(20px, 2.6vw, 30px); border-radius: 16px; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 26px 60px -26px rgba(11, 31, 51, 0.5); }
.map-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover); font-size: 0.8125rem; font-weight: 700; }
.map-badge .icon { width: 16px; height: 16px; }
.map-card .h3 { margin-top: 14px; }
.map-address { margin-top: 8px; color: var(--ink-2); }
.map-facts { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--slate); }
.map-facts li { display: flex; align-items: flex-start; gap: 10px; }
.map-facts .icon { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; flex: none; }
.map-facts a { color: var(--ink); font-weight: 600; }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.map-actions .btn { flex: 1 1 auto; }
.map-actions .btn .icon { width: 16px; height: 16px; }
.map-note { margin-top: 12px; font-size: 0.9rem; font-weight: 600; color: #B42318; }
.map-note:empty { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .map-card { width: 360px; } .map-actions .btn { padding-inline: 18px; } }
@media (max-width: 1023px) {
  .map-frame { display: block; min-height: 0; }
  .map-canvas { position: relative; height: clamp(280px, 60vw, 440px); }
  .map-card { position: static; width: auto; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line); box-shadow: none; background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .contact-tiles { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } }

/* ===== 50-polish.css ===== */
/* ==========================================================================
   Polish layer: cinematic hero, film grain, clip reveals, magnetic buttons, scroll progress, page fade.
   Everything here is transform/opacity/filter only and switches off under reduced motion or ?motion=off.
   ========================================================================== */

/* ---------- film grain on dark bands (static SVG noise, no animation, pointer-events none) ---------- */
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.closing-band.grain::after { z-index: 0; }
.closing-band .container { position: relative; z-index: 1; }

/* ---------- hero: cinematic zoom, drifting glow, gradient accent word, word-by-word headline ---------- */
.hero-glow { position: absolute; z-index: 1; inset-inline-end: 4%; top: 6%; width: min(640px, 70vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(22, 224, 192, 0.28) 0%, rgba(10, 120, 224, 0.18) 35%, transparent 68%); filter: blur(24px); opacity: 0.9; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  /* on each word, not the line: a transformed word would not show a gradient clipped to its parent's text */
  .hero-line-accent .w { background: linear-gradient(90deg, #7CC4FF 0%, #16E0C0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
}
.hero-title .w { display: inline-block; }   /* build.py wraps each headline word (the `words` filter) */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-motion) .hero-media { animation: hero-zoom 26s cubic-bezier(0.2, 0.6, 0.2, 1) forwards; transform-origin: 60% 45%; }
  html.js:not(.no-motion) .hero-glow { animation: glow-drift 16s ease-in-out infinite alternate; }
  /* the headline is on screen from the first frame: each word starts soft and low, then settles into focus.
     It never starts at opacity 0, because text first painted invisible is not counted as painted when it fades
     in, and the page's Largest Contentful Paint would then land on a stray element instead of the headline. */
  html.js:not(.no-motion) .hero-title .w { opacity: 0.4; transform: translateY(0.4em); filter: blur(12px); animation: word-in 1s var(--ease-out) forwards; animation-delay: calc(0.06s + var(--i, 0) * 0.07s); }
  @keyframes hero-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
  @keyframes glow-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-12%, 10%) scale(1.18); } }
  @keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }
}

/* ---------- reveals: images wipe in and settle; section rules draw in ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the wipe is a curtain pseudo-element that shrinks away, not a clip-path: Chrome applies clip-path when it
     computes intersection rects, so a clipped wrapper never revealed and a clipped image never lazy-loaded */
  html.js:not(.no-motion) .reveal-clip::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--paper-2); transform-origin: 50% 100%; transition: transform 1s var(--ease-out); transition-delay: var(--delay, 0s); pointer-events: none; }
  html.js:not(.no-motion) .reveal-clip.in::after { transform: scaleY(0); }
  html.js:not(.no-motion) .reveal-clip img { transform: scale(1.12); transition: transform 1.4s var(--ease-out); transition-delay: var(--delay, 0s); }
  html.js:not(.no-motion) .reveal-clip.in img { transform: scale(1); }
  html.js:not(.no-motion) .reveal-clip.in.media-hover:hover img { transform: scale(1.03); transition-delay: 0s; transition-duration: 0.9s; }
  html.js:not(.no-motion) .h2-bar::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-out) 0.15s; }
  [dir="rtl"] html.js:not(.no-motion) .h2-bar::before, html[dir="rtl"].js:not(.no-motion) .h2-bar::before { transform-origin: 100% 50%; }
  html.js:not(.no-motion) .h2-bar.in::before { transform: scaleX(1); }
}

/* ---------- buttons: light sweep on hover, magnetic pull handled in main.js ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%); transform: translateX(-130%); pointer-events: none; }
.btn-primary:hover::after, .btn-primary:focus-visible::after { transition: transform 0.85s var(--ease-out); transform: translateX(130%); }
.btn-magnetic { transition: transform 0.35s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s, border-color 0.25s; }
.btn-magnetic.is-magnet { transition: background-color 0.25s var(--ease-out), color 0.25s, border-color 0.25s; }

/* ---------- scroll progress under the header (drawn by motion.js) ---------- */
.scroll-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent), var(--teal)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }
.site-header.is-solid .scroll-progress { opacity: 1; }

/* ---------- footer: ghosted mark ---------- */
.site-footer { position: relative; overflow: hidden; }
.footer-mark { position: absolute; inset-inline-end: -60px; bottom: -80px; width: 420px; height: 420px; opacity: 0.06; pointer-events: none; filter: grayscale(1) brightness(3); }
.site-footer .container { position: relative; z-index: 1; }

/* page transitions: see 55-states.css (native View Transitions). The page itself is never faded in from
   opacity 0: that hid the first paint and kept Chrome from recording Largest Contentful Paint. */

/* ---------- impact band: the glow breathes slowly ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-motion) .impact-glow { animation: glow-breathe 9s ease-in-out infinite alternate; }
  @keyframes glow-breathe { from { transform: scale(0.9); opacity: 0.8; } to { transform: scale(1.15); opacity: 1; } }
}

/* ---------- interactive honeycomb (built by cells.js on mouse-driven devices) ---------- */
.cells { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.closing-band .cells { z-index: 0; }
.cells polygon { fill: var(--teal); fill-opacity: 0; stroke: var(--teal); stroke-width: 1; stroke-opacity: 0.2; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-motion) .cells polygon { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.3s var(--ease-out); transition-delay: var(--d, 0s); }
  html.js:not(.no-motion) .cells-drawn .cells polygon { stroke-dashoffset: 0; }
}

/* ===== 55-states.css ===== */
/* ==========================================================================
   States: loading skeletons, fallbacks, empty states, busy and result banners, menu entrance,
   native page transitions and complete print output. Every state class here is set by main.js;
   without JavaScript none of them apply and the page renders in its plain, fully visible form.
   ========================================================================== */

/* ---------- photo skeleton: shimmer while the image is on its way (.is-loading set by main.js) ---------- */
.media.is-loading::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%) var(--paper-2);
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .media.is-loading::before { animation: skeleton 1.4s linear infinite; }
}
@keyframes skeleton { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------- broken image: a quiet branded placeholder instead of the browser's broken-image icon ---------- */
.media.is-broken { background: var(--paper-2); }
.media.is-broken img, img.is-broken { visibility: hidden; }
.media.is-broken::before { content: ""; position: absolute; inset: 0; background: url(../img/logo-mark-512.png) center / 52px no-repeat; opacity: 0.2; filter: grayscale(1); }

/* ---------- empty listing ---------- */
.empty-state { display: grid; justify-items: center; gap: 12px; text-align: center; padding: clamp(40px, 7vw, 88px) 24px; border: 1.5px dashed var(--line-2); border-radius: var(--radius-m); background: var(--white); }
.empty-state-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); }
.empty-state-icon .icon { width: 30px; height: 30px; }
.empty-state p { color: var(--slate); max-width: 46ch; }
.empty-state .btn { margin-top: 8px; }

/* ---------- busy buttons (form submit, map loader): the label gives way to a spinner ---------- */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; }
@media (prefers-reduced-motion: no-preference) { .btn.is-busy::after { animation: spin 0.7s linear infinite; } }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- form result banner ---------- */
.form-status { display: none; align-items: flex-start; gap: 10px; font-size: 0.95rem; line-height: 1.6; }
.form-status.is-busy, .form-status.is-ok, .form-status.is-err { display: flex; }
.form-status-icon { display: none; width: 20px; height: 20px; flex: none; margin-top: 2px; }
.form-status.is-ok { padding: 12px 16px; border-radius: var(--radius-s); background: #ECFDF3; color: #05603A; }
.form-status.is-err { padding: 12px 16px; border-radius: var(--radius-s); background: #FEF3F2; color: #B42318; }
.form-status.is-ok .icon-ok, .form-status.is-err .icon-err { display: block; }
.form-status.is-busy { color: var(--slate); }
.form-status a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.form-actions { align-items: flex-start; }
.field.is-invalid input, .field.is-invalid textarea { background: #FFFBFA; }

/* ---------- contact map: shimmer over the placeholder while the embed loads, pulsing pin ---------- */
.map-frame.is-loading .map-placeholder::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 70%); background-size: 220% 100%; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .map-frame.is-loading .map-placeholder::after { animation: skeleton 1.4s linear infinite; }
  html:not(.no-motion) .map-pin::after { animation: map-ping 2.2s ease-out infinite; }
}
@keyframes map-ping { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- mobile menu: links arrive one after another ---------- */
@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .nav.is-open .nav-item, html:not(.no-motion) .nav.is-open .nav-mobile-extra { animation: menu-item-in 0.5s var(--ease-out) both; }
  html:not(.no-motion) .nav.is-open .nav-item:nth-child(2) { animation-delay: 0.04s; }
  html:not(.no-motion) .nav.is-open .nav-item:nth-child(3) { animation-delay: 0.08s; }
  html:not(.no-motion) .nav.is-open .nav-item:nth-child(4) { animation-delay: 0.12s; }
  html:not(.no-motion) .nav.is-open .nav-item:nth-child(5) { animation-delay: 0.16s; }
  html:not(.no-motion) .nav.is-open .nav-item:nth-child(6) { animation-delay: 0.2s; }
  html:not(.no-motion) .nav.is-open .nav-mobile-extra { animation-delay: 0.24s; }
}
@keyframes menu-item-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- page transitions: native cross-document View Transitions (Chrome 126+, Edge, Safari 18.2+).
   The header keeps its place while the new page lifts in. Browsers without support simply navigate,
   and visitors who ask for reduced motion get an instant switch. ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-leave 0.16s ease-in both; }
::view-transition-new(root) { animation: vt-enter 0.44s var(--ease-out) both; }
@keyframes vt-leave { to { opacity: 0; } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(14px); } }

/* ---------- print: everything readable, nothing hidden by scroll animations, no dark bands ---------- */
@media print {
  .subnav, .cells, .lattice, .scroll-progress, .strip-dots, .share, .map-section, .hero-aside-glow, .impact-glow, .hero-glow,
  .impact-bg, .hero-media, .grain::after, .reveal-clip::after, .menu-toggle, .header-actions { display: none !important; }
  .reveal, .reveal-scale, .reveal-clip, .reveal-clip img, .hero-title, .hero-sub, .hero-cta, .hero-title .w, .strip-body,
  .milestone-year { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .hero, .page-hero, .impact, .site-footer, .news-feature-link, .value-plate { color: #000 !important; background: none !important; min-height: 0 !important; }
  .hero *, .page-hero *, .impact *, .site-footer *, .news-feature-link *, .value-plate * { color: #000 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
  .milestone-year { color: #000 !important; }
  .page-hero { padding-block: 16px !important; }
  a[href^="http"]:not([href*="amjad-almutahidah.com"])::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}