/* =========================================================================
   Al Sabbagh Group - 2026 redesign
   Dark graphite shell, brand cyan accent, sharp corners, editorial grid.
   Single theme (dark) locked page-wide. Logical properties throughout so the
   Arabic (RTL) pages share one stylesheet.
   ========================================================================= */

/* ---- fonts (self-hosted, subset by unicode-range) ---------------------- */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext-400-800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-400-800.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono-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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono-latin-500.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-arabic-500.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-latin-500.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-arabic-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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/plexarabic-latin-700.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;
}

/* ---- tokens ------------------------------------------------------------ */
:root{
  /* surfaces */
  --ink-900:#070a0d;
  --ink-850:#0b1016;
  --ink-800:#101720;
  --ink-750:#161e28;

  /* lines */
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);
  --line-strong:rgba(255,255,255,.22);

  /* type */
  --fg:#eef1f2;
  --fg-2:#9aa5ab;
  --fg-3:#7d888e;

  /* brand */
  --accent:#12c4dc;
  --accent-dim:#0a7f93;
  --accent-wash:rgba(18,196,220,.10);
  --on-accent:#04121a;

  /* families */
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* metrics */
  --wrap:1440px;
  --gutter:clamp(20px,4vw,48px);
  --nav-h:68px;
  --section-y:clamp(84px,11vw,168px);
  --ease:cubic-bezier(.16,1,.3,1);

  /* native form controls, scrollbars and autofill follow the page */
  color-scheme:dark;
}

/* Arabic pages swap the sans; mono stays for numerals and codes. */
html[lang="ar"]{
  --sans:'IBM Plex Sans Arabic','Archivo',sans-serif;
  --mono:'IBM Plex Sans Arabic',ui-monospace,monospace;
}

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* skip link, first tab stop on every page */
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:99;
  background:var(--accent);color:var(--on-accent);
  padding:12px 18px;font-size:14px;font-weight:600;
}
.skip:focus{inset-inline-start:0}

/* honeypot: present for bots, gone for people and screen readers */
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

/* ---- layout primitives ------------------------------------------------- */
.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.section{padding-block:var(--section-y)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* fixed dot matrix, lifted from the logo face. Fixed + pointer-events:none so
   it never repaints during scroll. */
.matrix{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 15%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 15%,transparent 78%);
}
main,.ftr,.skip{position:relative;z-index:1}

/* ---- type ------------------------------------------------------------- */
.d1{
  text-wrap:balance;
  font-size:clamp(40px,7.4vw,104px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.032em;
  margin:0;
}
.d2{
  text-wrap:balance;
  font-size:clamp(29px,4.3vw,58px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.026em;
  margin:0;
}
.d3{
  font-size:clamp(21px,2.4vw,30px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.018em;
  margin:0;
}
html[lang="ar"] .d1{line-height:1.12;letter-spacing:0}
html[lang="ar"] .d2{line-height:1.2;letter-spacing:0}
html[lang="ar"] .d3{line-height:1.35;letter-spacing:0}

.lede{
  font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.72;
  color:var(--fg-2);
  max-width:62ch;
  text-wrap:pretty;
}
.body{color:var(--fg-2);max-width:66ch}
.inline-link{
  color:var(--accent);border-bottom:1px solid rgba(18,196,220,.4);
  transition:border-color .22s var(--ease);
}
.inline-link:hover{border-color:var(--accent)}
.mono{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--fg-3);
}
html[lang="ar"] .mono{letter-spacing:0;font-size:12.5px}
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 20px;
}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:13px}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--fg);
  --btn-bd:var(--line-strong);
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding-inline:26px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:0;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;cursor:pointer;
  transition:background .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),transform .12s ease;
}
.btn .arw{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
html[dir="rtl"] .btn .arw{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arw{transform:scaleX(-1) translateX(3px)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}

.btn--solid{--btn-bg:var(--accent);--btn-fg:var(--on-accent);--btn-bd:var(--accent)}
.btn--solid:hover{--btn-bg:#3ad8ee;--btn-fg:var(--on-accent);--btn-bd:#3ad8ee;color:var(--on-accent)}

.btn--ghost{--btn-bd:var(--line)}

/* ---- header ------------------------------------------------------------ */
.hdr{
  position:sticky;top:0;z-index:60;
  height:var(--nav-h);
  background:rgba(7,10,13,.82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
}
@supports not (backdrop-filter:blur(1px)){.hdr{background:#070a0d}}
.hdr-in{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:26px;height:auto}
.brand b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.brand span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-top:2px}
html[lang="ar"] .brand span{letter-spacing:0;font-size:11px}

.nav{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.nav a{
  font-size:14px;font-weight:500;color:var(--fg-2);
  position:relative;padding-block:6px;
  transition:color .25s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--accent);
}
.nav .lang{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--fg-3);border:1px solid var(--line);padding:7px 12px;
}
html[lang="ar"] .nav .lang{letter-spacing:.08em}
.nav .lang:hover{color:var(--accent);border-color:var(--accent)}
.nav .btn{min-height:40px;padding-inline:18px;font-size:13px}

.burger{
  display:none;background:none;border:1px solid var(--line);
  width:44px;height:40px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger i{display:block;width:17px;height:1px;background:var(--fg);position:relative;transition:background .2s}
.burger i::before,.burger i::after{
  content:"";position:absolute;inset-inline-start:0;width:17px;height:1px;background:var(--fg);
  transition:transform .3s var(--ease);
}
.burger i::before{top:-5px}
.burger i::after{top:5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-850);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 24px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding-block:16px;border-bottom:1px solid var(--line-soft);font-size:16px}
  .nav a[aria-current="page"]::after{display:none}
  .nav .lang{align-self:flex-start;margin-top:16px;border:1px solid var(--line)}
  .nav .btn{margin-top:16px;justify-content:center}
}

/* ---- hero (asymmetric split) ------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  min-height:calc(100dvh - var(--nav-h));
  border-bottom:1px solid var(--line);
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,80px) clamp(24px,5vw,88px) clamp(48px,6vw,80px) var(--gutter);
  padding-inline-start:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  border-inline-end:1px solid var(--line);
}
.hero-copy .eyebrow{display:flex;align-items:center;gap:12px}
.hero-copy .eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);flex:none}
.hero h1{margin-bottom:26px;font-size:clamp(34px,4vw,58px)}
.hero .lede{max-width:46ch;margin-bottom:38px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

.hero-media{position:relative;overflow:hidden;background:var(--ink-850);min-height:52vh}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.05);
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(7,10,13,.62) 0%,rgba(7,10,13,.18) 45%,rgba(7,10,13,.72) 100%);
}
.hero-tag{
  position:absolute;z-index:2;inset-block-end:24px;inset-inline-start:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  background:rgba(7,10,13,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:9px 14px;border:1px solid var(--line);
}
html[lang="ar"] .hero-tag{letter-spacing:0;font-size:12px}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{
    padding:clamp(56px,10vw,88px) var(--gutter);
    border-inline-end:0;border-bottom:1px solid var(--line);
  }
  .hero h1{max-width:none}
  .hero-media{min-height:46vh}
}

/* ---- facts strip ------------------------------------------------------- */
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
}
.fact{
  padding:clamp(28px,3.4vw,48px) clamp(18px,2.4vw,36px);
  border-inline-start:1px solid var(--line);
}
.fact:first-child{border-inline-start:0}
.fact b{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(30px,3.6vw,46px);line-height:1;color:var(--fg);
  letter-spacing:-.02em;margin-bottom:12px;
}
.fact span{display:block;font-size:13.5px;line-height:1.5;color:var(--fg-3);max-width:22ch}
@media (max-width:820px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(3){border-inline-start:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:480px){
  .facts{grid-template-columns:1fr}
  .fact{border-inline-start:0;border-bottom:1px solid var(--line)}
  .fact:last-child{border-bottom:0}
}

/* ---- section heads ----------------------------------------------------- */
.s-head{margin-bottom:clamp(40px,5vw,72px)}
.s-head .d2{max-width:26ch}
.s-head .d2{margin-bottom:18px}

/* ---- the line (pinned horizontal pan) ---------------------------------- */
.line-sec{border-block:1px solid var(--line)}
.line-head{padding:clamp(56px,7vw,104px) 0 clamp(34px,4vw,52px)}
.line-head .d2{max-width:24ch;margin-bottom:18px}
.line-head p{color:var(--fg-2);max-width:60ch;font-size:16px;line-height:1.7}

.line-viewport{position:relative}
.line-viewport.is-pinned{overflow:hidden;height:100dvh}
.line-viewport.is-pinned .line-track{height:100%}
.line-viewport.is-pinned .panel{min-height:0;height:100%}
.line-viewport.is-pinned .panel-n{inset-block-start:calc(var(--nav-h) + 22px)}
.line-viewport.is-pinned .line-track{width:max-content}
.line-track{
  display:flex;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.line-track::-webkit-scrollbar{display:none}
/* when GSAP pins the section, the browser no longer scrolls the track itself */
.line-viewport.is-pinned .line-track{overflow:visible;scroll-snap-type:none}

.panel{
  position:relative;flex:0 0 min(86vw,520px);
  scroll-snap-align:start;
  border-inline-start:1px solid var(--line);
  min-height:min(78vh,640px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--ink-850);
  isolation:isolate;
}
.panel:first-child{border-inline-start:0}
.panel picture,.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.panel::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,10,13,.42) 0%,rgba(7,10,13,.66) 42%,rgba(7,10,13,.95) 100%);
  transition:background .5s var(--ease);
}
.panel:hover::after{
  background:linear-gradient(180deg,rgba(7,10,13,.28) 0%,rgba(7,10,13,.54) 42%,rgba(7,10,13,.93) 100%);
}
.panel-n{
  position:absolute;inset-block-start:26px;inset-inline-start:26px;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--accent);
}
.panel-body{padding:26px;display:flex;flex-direction:column;gap:14px}
.panel-body h3{
  font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0;
}
.panel-body p{font-size:14.5px;line-height:1.6;color:var(--fg-2);margin:0;max-width:34ch}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-2);border:1px solid var(--line);padding:5px 9px;
}
html[lang="ar"] .chip{letter-spacing:0;font-size:12px}
.panel-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-size:13.5px;font-weight:600;color:var(--accent);
}
.panel-link .arw{width:13px;height:13px;transition:transform .3s var(--ease)}
.panel:hover .panel-link .arw{transform:translateX(4px)}
html[dir="rtl"] .panel-link .arw{transform:scaleX(-1)}
html[dir="rtl"] .panel:hover .panel-link .arw{transform:scaleX(-1) translateX(4px)}

.line-rail{
  display:flex;align-items:center;gap:20px;
  padding:22px 0 clamp(56px,7vw,96px);
}
.line-rail .bar{position:relative;flex:1;height:1px;background:var(--line)}
.line-rail .bar i{
  position:absolute;inset-block:0;inset-inline-start:0;display:block;
  width:12.5%;background:var(--accent);
  transform-origin:left center;
  transition:transform .1s linear;
}
html[dir="rtl"] .line-rail .bar i{transform-origin:right center}
.line-rail .cnt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--fg-3)}

@media (max-width:700px){
  .panel{flex-basis:min(88vw,380px);min-height:520px}
}

/* ---- process split ----------------------------------------------------- */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));border-top:1px solid var(--line)}
.proc > div{padding:clamp(40px,5vw,72px) clamp(24px,3.4vw,56px)}
.proc > div + div{border-inline-start:1px solid var(--line)}
.proc-n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--accent);
  display:block;margin-bottom:20px;
}
html[lang="ar"] .proc-n{letter-spacing:0;font-size:13px}
.proc h3{margin-bottom:16px}
.proc p{color:var(--fg-2);font-size:15.5px;line-height:1.72;max-width:44ch}
@media (max-width:820px){
  .proc{grid-template-columns:1fr}
  .proc > div + div{border-inline-start:0;border-top:1px solid var(--line)}
}

/* ---- standards --------------------------------------------------------- */
.std{background:var(--ink-850);border-block:1px solid var(--line)}
.std.section{padding-block:clamp(64px,8vw,110px)}
.std-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--line);
}
.std-grid li{
  padding:32px clamp(18px,2.4vw,32px);
  min-height:118px;
  border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:14px;
  font-size:15.5px;line-height:1.55;color:var(--fg-2);
}
.std-grid li:first-child{border-inline-start:0}
.std-grid li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--accent)}

/* ---- full-bleed statement ---------------------------------------------- */
.stmt{position:relative;isolation:isolate;min-height:min(76vh,620px);display:flex;align-items:flex-end}
.stmt picture,.stmt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.stmt::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,10,13,.55) 0%,rgba(7,10,13,.72) 50%,rgba(7,10,13,.95) 100%);
}
.stmt-in{padding-block:clamp(48px,6vw,88px)}
.stmt .d2{max-width:18ch;margin-bottom:22px}
.stmt p{color:var(--fg-2);max-width:52ch;margin-bottom:30px;font-size:15.5px;line-height:1.72}

/* ---- cta band ---------------------------------------------------------- */
.cta{
  border-top:1px solid var(--line);
  padding-block:clamp(64px,8vw,120px);
  text-align:start;
}
.cta .d2{max-width:16ch;margin-bottom:20px}
.cta p{color:var(--fg-2);max-width:52ch;margin-bottom:34px;font-size:16px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---- page head (inner pages) ------------------------------------------- */
.page-head{
  padding-block:clamp(64px,9vw,132px) clamp(40px,5vw,72px);
  border-bottom:1px solid var(--line);
}
.page-head .d1{max-width:16ch;margin-bottom:24px}
.page-head .lede{max-width:56ch}

/* ---- products: sticky rail + records ----------------------------------- */
.cat-layout{
  display:grid;
  grid-template-columns:minmax(160px,200px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  padding-block:clamp(48px,6vw,88px);
}
.cat-rail{position:sticky;top:calc(var(--nav-h) + 32px);align-self:start}
.cat-rail h2{margin:0 0 14px;font-weight:500}
.cat-rail ul{border-top:1px solid var(--line-soft)}
.cat-rail li a{
  display:flex;align-items:baseline;gap:12px;
  padding-block:9px;
  font-size:13.5px;color:var(--fg-3);
  border-bottom:1px solid var(--line-soft);
  transition:color .25s var(--ease);
}
.cat-rail li a em{font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.1em}
.cat-rail li a:hover,.cat-rail li a.is-current{color:var(--accent)}

.record{padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.record:first-child{border-top:0;padding-top:0}
.record-head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.record-head .n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--accent)}
.record h2{margin:0}
.record .tagline{
  font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--fg);
  margin:14px 0 16px;max-width:36ch;line-height:1.35;
}
.record .desc{color:var(--fg-2);max-width:62ch;font-size:15.5px;line-height:1.75;margin-bottom:22px}
.record-media{position:relative;margin:30px 0;border:1px solid var(--line);overflow:hidden}
.record-media img{width:100%;aspect-ratio:16/7;object-fit:cover}
.record .chips{margin-bottom:26px}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--accent-dim);background:var(--accent-wash);
  color:var(--accent);padding:10px 14px;font-size:13px;font-weight:600;
  margin-bottom:24px;
}
.badge svg{width:15px;height:15px;flex:none}
.items{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:0 32px;border-top:1px solid var(--line-soft);
}
.items li{
  padding-block:13px;border-bottom:1px solid var(--line-soft);
  font-size:14.5px;color:var(--fg-2);
  display:flex;align-items:center;gap:11px;
}
.items li::before{
  content:"";width:5px;height:5px;flex:none;background:var(--accent);
}
.record-cta{margin-top:28px}

@media (max-width:900px){
  .cat-layout{grid-template-columns:1fr}
  .cat-rail{display:none}
}

/* ---- about: facility split --------------------------------------------- */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.split-media{position:relative;border:1px solid var(--line);overflow:hidden}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split .d2{margin-bottom:20px}
.split p{color:var(--fg-2);font-size:15.5px;line-height:1.75;margin-bottom:18px;max-width:52ch}
.reg{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---- contact ----------------------------------------------------------- */
.contact-layout{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px,5vw,80px);
  padding-block:clamp(48px,6vw,88px);
}
.cinfo li{padding-block:22px;border-bottom:1px solid var(--line)}
.cinfo li:first-child{border-top:1px solid var(--line)}
.cinfo .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);display:block;margin-bottom:9px;
}
html[lang="ar"] .cinfo .k{letter-spacing:0;font-size:12.5px}
.cinfo .v{font-size:16px;color:var(--fg);line-height:1.6}
.cinfo a.v:hover{color:var(--accent)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1 / -1}
.field label{font-size:13px;font-weight:600;color:var(--fg)}
.field .hint{font-size:12.5px;color:var(--fg-3)}
.field input,.field textarea,.field select{
  background:var(--ink-850);
  border:1px solid var(--line-strong);
  border-radius:0;
  padding:14px 15px;
  font-size:15px;color:var(--fg);
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:var(--ink-800);
}
.field textarea{min-height:150px;resize:vertical}
.field .err{
  font-size:12.5px;color:#ff8f7a;display:none;
}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:#ff8f7a}
.field[data-invalid="true"] .err{display:block}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.form-note{font-size:13px;color:var(--fg-3);margin:0}
.form-status{margin-top:18px;font-size:14px;display:none;padding:14px 16px;border:1px solid var(--line)}
.form-status[data-state="ok"]{display:block;border-color:var(--accent-dim);background:var(--accent-wash);color:var(--accent)}
.form-status[data-state="err"]{display:block;border-color:#7a3a30;background:rgba(255,143,122,.09);color:#ff8f7a}
.btn[data-busy="true"]{opacity:.6;pointer-events:none}
@media (max-width:860px){
  .contact-layout{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

/* ---- footer ------------------------------------------------------------ */
.ftr{border-top:1px solid var(--line);background:var(--ink-850)}
.ftr-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-block:clamp(48px,6vw,80px);
}
.ftr .ftr-h{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);font-weight:500;margin-bottom:18px;
}
html[lang="ar"] .ftr .ftr-h{letter-spacing:0;font-size:12.5px}
.ftr p,.ftr a{font-size:14.5px;color:var(--fg-2);line-height:1.85}
.ftr a{display:block;transition:color .22s var(--ease)}
.ftr a:hover{color:var(--accent)}
.ftr-brand img{width:34px;margin-bottom:18px}
.ftr-bot{
  border-top:1px solid var(--line);
  padding-block:24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--fg-3);
}
.ftr-bot a{display:inline;color:var(--fg-2)}
.ftr-bot .thanks{font-family:'IBM Plex Sans Arabic',var(--sans);color:var(--fg-2)}
@media (max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr}}

/* ---- reveal (IntersectionObserver driven) ------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}

/* headline word mask, used once on the hero */
.mask-line{display:block;overflow:hidden;padding-bottom:.08em}
.mask-line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1s var(--ease);
}
.is-ready .mask-line > span{transform:none}
.is-ready .mask-line:nth-child(2) > span{transition-delay:.09s}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1;transform:none}
  .mask-line > span{transform:none}
}

/* ---- print ------------------------------------------------------------- */
@media print{
  .matrix,.hdr,.line-rail{display:none}
  body{background:#fff;color:#000}
}