/* ==========================================================================
   الأنماط الذكية · SMART PATTERNS
   Master stylesheet — design system, layout, components, motion
   --------------------------------------------------------------------------
   Authoring rules for this file:
   1. Arabic / RTL is the primary experience. Use LOGICAL properties everywhere
      (margin-inline, padding-inline, inset-inline-start, text-align:start …)
      so the whole layout mirrors correctly with no duplicated rules.
   2. Colour, spacing, radius, type and easing come from tokens only.
   3. Each service chapter re-declares --accent locally; shared components
      (buttons, rules, indices, links) read --accent and adapt automatically.
   ========================================================================== */

/* ==========================================================================
   SELF-HOSTED WEB FONTS
   --------------------------------------------------------------------------
   Downloaded from Google Fonts and served from assets/fonts/ so that no
   render-blocking request to fonts.googleapis.com sits in front of the
   page's own CSS and JavaScript.

   Same families, same weights (300-700), same unicode-ranges as before —
   typography is unchanged. Only the Arabic and Latin subsets are shipped;
   Cyrillic, Greek and Vietnamese are not used anywhere on this site.

   IBM Plex Sans Arabic  -  SIL Open Font License 1.1
   Inter                 -  SIL Open Font License 1.1
   See assets/fonts/LICENSE.md
   ========================================================================== */

/* ---------- IBM Plex Sans Arabic ---------- */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-700-arabic.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;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-arabic-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- Inter ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Core palette ------------------------------------------------------- */
  --navy-950: #050B16;
  --navy-900: #0A1526;
  --navy-850: #0D1B30;
  --navy-800: #12233C;
  --navy-700: #1B3151;
  --navy-600: #27446B;

  --blue-700: #1E5588;
  --blue-600: #2A6EA6;   /* heritage blue from the emblem */
  --blue-500: #3A87CF;
  --blue-400: #4DA3F0;   /* electric / intelligence */
  --blue-300: #86C2F7;

  --orange-600: #D97C15;
  --orange-500: #F0942B; /* emblem orange */
  --orange-400: #F8AC55;
  --orange-300: #FFC98C;

  --paper: #F4F2ED;      /* warm architectural paper */
  --off-white: #F6F7F9;
  --white: #FFFFFF;

  --grey-100: #E7EAEE;
  --grey-200: #D2D8DF;
  --grey-300: #B2BBC5;
  --grey-400: #8A96A3;
  --grey-500: #6B7683;
  --grey-600: #4E5864;

  /* — Semantic (re-assigned per theme block) ----------------------------- */
  --bg: var(--navy-900);
  --bg-soft: var(--navy-850);
  --ink: #EEF2F7;
  --ink-soft: #A9B7C7;
  --ink-mute: #6F8098;
  --rule: rgba(255, 255, 255, .12);
  --rule-soft: rgba(255, 255, 255, .06);
  --accent: var(--blue-400);
  --accent-2: var(--orange-500);
  --field-bg: rgba(255, 255, 255, .04);

  /* — Type --------------------------------------------------------------- */
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font: var(--font-ar);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-display: clamp(2.3rem, 4.9vw, 4.3rem);
  --fs-h1: clamp(1.9rem, 3.9vw, 3.05rem);
  --fs-h2: clamp(1.6rem, 3.1vw, 2.45rem);
  --fs-h3: clamp(1.2rem, 2.1vw, 1.55rem);
  --fs-h4: clamp(1.02rem, 1.5vw, 1.16rem);
  --fs-lead: clamp(1.04rem, 1.35vw, 1.28rem);
  --fs-body: clamp(0.97rem, 1.02vw, 1.05rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-idx: clamp(2.6rem, 7vw, 5rem);

  --lh-tight: 1.14;
  --lh-head: 1.28;
  --lh-body: 1.85;

  /* — Space -------------------------------------------------------------- */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --shell: 1320px;
  --sec-y: clamp(4.5rem, 9vw, 9rem);
  --sec-y-lg: clamp(6rem, 12vw, 12rem);

  /* — Form --------------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;
  --hair: 1px;

  /* — Motion ------------------------------------------------------------- */
  --e-out: cubic-bezier(.22, .68, .29, 1);
  --e-in-out: cubic-bezier(.65, .02, .18, 1);
  --e-soft: cubic-bezier(.33, 1, .68, 1);
  --t-fast: .22s;
  --t-mid: .45s;
  --t-slow: .9s;

  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   02 · RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

/* No horizontal overflow, ever. */
html, body { max-width: 100%; }

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

::selection { background: var(--orange-500); color: #10202f; }

:focus-visible {
  outline: 2px solid var(--orange-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 999;
  background: var(--orange-500);
  color: #0d1b2a;
  padding: .6rem 1.1rem;
  border-radius: var(--r-md);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   03 · LANGUAGE SYSTEM
   Twin content nodes: .ar / .en. CSS decides which is visible, so the site is
   fully bilingual even before JavaScript runs. JS only handles dir, lang,
   attributes (placeholder / aria-label) and <option> labels.
   -------------------------------------------------------------------------- */
html[data-lang="ar"] .en { display: none !important; }
html[data-lang="en"] .ar { display: none !important; }

html[data-lang="ar"] { --font: var(--font-ar); }
html[data-lang="en"] { --font: var(--font-en); }

/* Latin numerals & codes stay in the mono/Latin face in both languages */
.num, .idx, .eyebrow .num { font-family: var(--font-en); font-variant-numeric: tabular-nums; }

html[data-lang="en"] body { line-height: 1.72; }
html[data-lang="ar"] .en-only-space { letter-spacing: 0; }

/* Arabic sets slightly tighter tracking on display type; Latin needs negative */
html[data-lang="en"] .display,
html[data-lang="en"] .h1,
html[data-lang="en"] .sec-title { letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   04 · TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -.005em;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-head); font-weight: 600; }
.h2, .sec-title { font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 600; }
.h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; }
.h4 { font-size: var(--fs-h4); line-height: 1.5; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-soft); font-weight: 400; }
.small { font-size: var(--fs-small); }
.mute { color: var(--ink-mute); }
.soft { color: var(--ink-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
html[data-lang="ar"] .eyebrow { letter-spacing: .06em; }
.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 1px;
  background: currentColor;
  opacity: .6;
  flex: none;
}

.idx {
  font-size: var(--fs-idx);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  display: block;
}

.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   05 · LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  inline-size: 100%;
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-inline-size: 900px; }

.section {
  position: relative;
  padding-block: var(--sec-y);
  overflow: clip;
}
.section--tall { padding-block: var(--sec-y-lg); }
.section--flush-top { padding-block-start: 0; }

.section__head { max-inline-size: 62ch; margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.section__head .sec-title { margin-block-start: 1.1rem; }
.section__head .lead { margin-block-start: 1.2rem; }

/* — Theme blocks ------------------------------------------------------- */
.theme-dark {
  --bg: var(--navy-900);
  --bg-soft: var(--navy-850);
  --ink: #EEF2F7;
  --ink-soft: #A9B7C7;
  --ink-mute: #6F8098;
  --rule: rgba(255,255,255,.13);
  --rule-soft: rgba(255,255,255,.06);
  --field-bg: rgba(255,255,255,.04);
  background: var(--bg);
  color: var(--ink);
}
.theme-deep {
  --bg: var(--navy-950);
  --bg-soft: #08111F;
  --ink: #F0F4F9;
  --ink-soft: #A3B2C4;
  --ink-mute: #66768C;
  --rule: rgba(255,255,255,.11);
  --rule-soft: rgba(255,255,255,.05);
  --field-bg: rgba(255,255,255,.035);
  background: var(--bg);
  color: var(--ink);
}
.theme-light {
  --bg: var(--off-white);
  --bg-soft: #ECEFF3;
  --ink: #0C1B2C;
  --ink-soft: #46586C;
  --ink-mute: #7A8797;
  --rule: rgba(12,27,44,.14);
  --rule-soft: rgba(12,27,44,.07);
  --accent: var(--blue-600);
  --field-bg: rgba(12,27,44,.03);
  background: var(--bg);
  color: var(--ink);
}
.theme-paper {
  --bg: var(--paper);
  --bg-soft: #EAE7E0;
  --ink: #16202B;
  --ink-soft: #4C5866;
  --ink-mute: #7C8794;
  --rule: rgba(22,32,43,.16);
  --rule-soft: rgba(22,32,43,.08);
  --accent: var(--navy-700);
  --accent-2: var(--orange-600);
  --field-bg: rgba(22,32,43,.03);
  background: var(--bg);
  color: var(--ink);
}
.theme-slate {
  --bg: #101821;
  --bg-soft: #16202B;
  --ink: #EDF1F5;
  --ink-soft: #A5B1BE;
  --ink-mute: #6E7C8B;
  --rule: rgba(255,255,255,.12);
  --rule-soft: rgba(255,255,255,.055);
  --field-bg: rgba(255,255,255,.04);
  background: var(--bg);
  color: var(--ink);
}

/* — Accents per discipline --------------------------------------------- */
.acc-cyber    { --accent: #4DA3F0; --accent-2: #F0942B; }
.acc-digital  { --accent: #1E6FBF; --accent-2: #F0942B; }
.acc-ai       { --accent: #64B6E8; --accent-2: #F8AC55; }
/* Pattern 04 keeps the orange slot, but the roles are reversed from the
   retired service: orange is the inspection/intervention signal, blue is the
   stable monitored state it returns to. */
.acc-operations { --accent: #F0942B; --accent-2: #4DA3F0; }
.acc-building { --accent: #234B77; --accent-2: #D97C15; }
.acc-robotics { --accent: #4FA6E0; --accent-2: #F0942B; }
.theme-dark.acc-building, .theme-deep.acc-building { --accent: #6E9CC9; }

/* — Rules & grids ------------------------------------------------------- */
.rule { block-size: 1px; background: var(--rule); border: 0; margin: 0; }

.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Faint blueprint field usable on any theme */
.bp-field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 100%);
  opacity: .9;
}

/* --------------------------------------------------------------------------
   06 · BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-line: var(--rule);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .92rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: var(--hair) solid var(--btn-line);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover, var(--accent));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .42s var(--e-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

.btn__icon {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  transition: transform .32s var(--e-out);
}
html[dir="rtl"] .btn__icon { transform: scaleX(-1); }
.btn:hover .btn__icon { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .btn__icon { transform: scaleX(-1) translateX(4px); }

.btn--primary {
  --btn-bg: var(--orange-500);
  --btn-ink: #10202F;
  --btn-line: var(--orange-500);
  --btn-hover: var(--orange-400);
}
.btn--primary:hover { color: #10202F; border-color: var(--orange-400); }

.btn--accent {
  --btn-bg: var(--accent);
  --btn-ink: #071320;
  --btn-line: var(--accent);
  --btn-hover: #fff;
}
.theme-paper .btn--accent, .theme-light .btn--accent { --btn-ink: #fff; --btn-hover: var(--navy-900); }
.theme-paper .btn--accent:hover, .theme-light .btn--accent:hover { color: #fff; }

.btn--ghost { --btn-hover: var(--accent); }
.btn--ghost:hover { color: #071320; border-color: var(--accent); }
.theme-paper .btn--ghost:hover, .theme-light .btn--ghost:hover { color: #fff; }

.btn--solid-ink {
  --btn-bg: var(--ink);
  --btn-ink: var(--bg);
  --btn-line: var(--ink);
  --btn-hover: var(--accent);
}
.btn--sm { padding: .68rem 1.1rem; font-size: .8rem; }
.btn--wide { padding-inline: 2.1rem; }

/* Text link with drawn underline + arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--accent);
  padding-block-end: 4px;
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(.28);
  transform-origin: inline-start;
  transition: transform .4s var(--e-out);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow svg { inline-size: 14px; block-size: 14px; transition: transform .32s var(--e-out); }
html[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
.link-arrow:hover svg { transform: translateX(4px); }
html[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* --------------------------------------------------------------------------
   07 · HEADER · NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 90;
  transition: transform .5s var(--e-out), background-color .4s var(--e-out),
              border-color .4s var(--e-out), backdrop-filter .4s var(--e-out);
  border-block-end: 1px solid transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 11, 22, .72), rgba(5, 11, 22, 0));
  opacity: 1;
  transition: opacity .4s var(--e-out);
  pointer-events: none;
}
.site-header.is-stuck {
  background: rgba(7, 15, 28, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-block-end-color: rgba(255, 255, 255, .09);
}
.site-header.is-stuck::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-102%); }
.site-header.is-open { transform: none; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  block-size: var(--header-h);
  position: relative;
}

/* — Brand -------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  flex: none;
  color: #fff;
}
.brand__mark {
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  transition: transform .5s var(--e-out);
}
.brand:hover .brand__mark { transform: translateY(-2px); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__ar {
  font-family: var(--font-ar);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0;
}
.brand__en {
  font-family: var(--font-en);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-block-start: 3px;
}
html[data-lang="en"] .brand__ar { font-size: .95rem; opacity: .75; order: 2; margin-block-start: 3px; font-weight: 500; }
html[data-lang="en"] .brand__en { order: 1; font-size: 1.02rem; letter-spacing: .1em; color: #fff; font-weight: 700; margin-block-start: 0; }

/* — Desktop nav -------------------------------------------------------- */
/* The mega panel hangs from the NAV's inline-end, not from the Services
   item's. Anchored to the item it drifted inward as the bar gained links and
   ran off the viewport at 1280; anchored to the bar it stays put however many
   items sit either side of it. (.nav__item keeps position:relative for
   nothing else — the hover underline lives on .nav__link.) */
.nav { margin-inline-start: auto; position: relative; }
.nav .nav__item--has-mega { position: static; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.6rem); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .35rem;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  position: relative;
  transition: color var(--t-fast) var(--e-out);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: .35rem;
  inset-block-end: .1rem;
  block-size: 1.5px;
  background: var(--orange-500);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .38s var(--e-out);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__link.is-current { color: #fff; }
.nav__link.is-current::after { transform: scaleX(1); background: var(--blue-400); }
.nav__chev { inline-size: 10px; block-size: 10px; transition: transform .3s var(--e-out); opacity: .7; }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* — Mega menu ---------------------------------------------------------- */
.mega {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  inline-size: min(760px, calc(100vw - 2 * var(--gutter)));
  background: rgba(10, 21, 38, .96);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 70px -28px rgba(0, 0, 0, .8);
  padding: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s var(--e-out), transform .38s var(--e-out), visibility .3s;
  z-index: 5;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.mega-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  padding: .8rem .85rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background-color .28s var(--e-out), border-color .28s var(--e-out), transform .28s var(--e-out);
}
.mega-card:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
}
.mega-card.is-current {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
}
.mega-card.is-current .mega-card__viz { border-color: currentColor; color: var(--accent); }
.mega-card__viz {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  color: var(--accent);
}
.mega-card__viz svg { inline-size: 100%; block-size: 100%; }
.mega-card__t { display: block; font-size: .95rem; font-weight: 600; color: #fff; }
.mega-card__d { display: block; font-size: .78rem; color: rgba(255, 255, 255, .55); line-height: 1.55; margin-block-start: 2px; }
.mega-card .num { font-size: .68rem; color: var(--accent); letter-spacing: .14em; }
.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: .9rem;
  padding: .85rem .85rem 0;
  border-block-start: 1px solid rgba(255, 255, 255, .09);
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}

/* — Header tools ------------------------------------------------------- */
.tools { display: flex; align-items: center; gap: .55rem; flex: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  padding: 3px;
  background: rgba(255, 255, 255, .04);
  position: relative;
}
.lang-switch__btn {
  font-family: var(--font-en);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .38rem .72rem;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, .62);
  transition: color .3s var(--e-out);
  position: relative;
  z-index: 1;
}
.lang-switch__btn[aria-pressed="true"] { color: #0b1727; }
.lang-switch__thumb {
  position: absolute;
  inset-block: 3px;
  inline-size: calc(50% - 3px);
  background: #fff;
  border-radius: var(--r-pill);
  transition: transform .42s var(--e-out);
  inset-inline-start: 3px;
}
html[data-lang="en"] .lang-switch__thumb { transform: translateX(100%); }
html[dir="rtl"][data-lang="en"] .lang-switch__thumb { transform: translateX(-100%); }

.header-cta { display: inline-flex; }

/* — Burger ------------------------------------------------------------- */
.btn-burger {
  display: none;
  inline-size: 44px;
  block-size: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-md);
  position: relative;
  flex: none;
}
.btn-burger span {
  position: absolute;
  inset-inline: 12px;
  block-size: 1.5px;
  background: #fff;
  transition: transform .4s var(--e-out), opacity .25s var(--e-out);
}
.btn-burger span:nth-child(1) { inset-block-start: 14px; }
.btn-burger span:nth-child(2) { inset-block-start: 19.5px; }
.btn-burger span:nth-child(3) { inset-block-start: 25px; }
.btn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.btn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* — Progress line ------------------------------------------------------ */
.progress-line {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: inline-start;
  background: linear-gradient(90deg, var(--blue-400), var(--orange-500));
  z-index: 95;
  pointer-events: none;
}

/* — Mobile drawer ------------------------------------------------------ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 88;
  visibility: hidden;
  pointer-events: none;
}
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 16, .65);
  opacity: 0;
  transition: opacity .4s var(--e-out);
  backdrop-filter: blur(2px);
}
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(440px, 100%);
  background: var(--navy-950);
  border-inline-start: 1px solid rgba(255, 255, 255, .09);
  padding: calc(var(--header-h) + 1.4rem) var(--gutter) 2.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .5s var(--e-in-out);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
html[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  font-size: 1.16rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  border-block-end: 1px solid rgba(255, 255, 255, .08);
}
.drawer__link .num { font-size: .7rem; color: var(--blue-400); letter-spacing: .12em; }
.drawer__toggle { inline-size: 100%; text-align: start; }
.drawer__toggle .nav__chev { inline-size: 12px; block-size: 12px; }
.drawer__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--e-in-out);
}
.drawer__toggle[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub > div { overflow: hidden; }
.drawer__sublink {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 0 .85rem 0;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid rgba(255, 255, 255, .12);
  margin-inline-start: .35rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, .72);
  transition: color .25s var(--e-out), border-color .25s var(--e-out);
}
.drawer__sublink:hover { color: #fff; border-inline-start-color: var(--orange-500); }
.drawer__foot { margin-block-start: auto; padding-block-start: 2rem; display: grid; gap: 1rem; }
.drawer__contact { font-size: .85rem; color: rgba(255, 255, 255, .5); line-height: 2; }

@media (max-width: 1080px) {
  .nav, .header-cta { display: none; }
  .btn-burger { display: block; }
  .tools { margin-inline-start: auto; }
}

/* --------------------------------------------------------------------------
   08 · HERO — THE SIX PATTERNS
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + 3rem) clamp(2.2rem, 4vw, 3.4rem);
  background:
    radial-gradient(120% 90% at 50% 0%, #12233C 0%, #0A1526 45%, #050B16 100%);
  overflow: clip;
  isolation: isolate;
}
.hero__canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__canvas { inline-size: 100%; block-size: 100%; display: block; }
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(76% 60% at 50% 62%, rgba(5, 11, 22, .82) 0%, rgba(5, 11, 22, .35) 55%, transparent 100%),
    linear-gradient(to top, rgba(5, 11, 22, .95) 0%, rgba(5, 11, 22, .15) 42%, transparent 70%);
}
.hero__inner { position: relative; z-index: 2; inline-size: 100%; }
.hero__content { max-inline-size: 44ch; }

.hero__kicker {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-block-end: 1.6rem;
}
html[data-lang="ar"] .hero__kicker { letter-spacing: .05em; font-size: .8rem; }
.hero__kicker::before {
  content: "";
  inline-size: 40px;
  block-size: 1px;
  background: linear-gradient(to right, var(--orange-500), var(--blue-400));
  flex: none;
}

.hero__title { color: #fff; }
/* the .ar / .en language wrappers must be block boxes to host the line masks */
.hero__title > span, .cta__title > span, .svc-hero__title > span { display: block; }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--e-out);
}
.hero.is-revealed .hero__title .ln > span { transform: none; }
.hero__title .ln:nth-child(2) > span { transition-delay: .1s; }
.hero__title .ln:nth-child(3) > span { transition-delay: .2s; }
.hero__title .accent-o { color: var(--orange-400); }
.hero__title .accent-b { color: var(--blue-300); }

.hero__lead {
  margin-block-start: 1.7rem;
  color: rgba(233, 240, 248, .76);
  font-size: var(--fs-lead);
  max-inline-size: 46ch;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--e-out) .45s, transform .8s var(--e-out) .45s;
}
.hero.is-revealed .hero__lead { opacity: 1; transform: none; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-block-start: 2.4rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--e-out) .6s, transform .8s var(--e-out) .6s;
}
.hero.is-revealed .hero__actions { opacity: 1; transform: none; }

/* Pattern index strip along the bottom of the hero */
.hero__index {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: clamp(2rem, 4.5vw, 3.6rem);
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--e-out) .75s, transform .9s var(--e-out) .75s;
}
.hero.is-revealed .hero__index { opacity: 1; transform: none; }
.hero-pat {
  position: relative;
  padding: 1.15rem .9rem 1.15rem 0;
  padding-inline-end: .9rem;
  padding-inline-start: 0;
  display: block;
  color: rgba(255, 255, 255, .62);
  transition: color .3s var(--e-out);
  border-inline-end: 1px solid rgba(255, 255, 255, .08);
}
.hero-pat:last-child { border-inline-end: 0; }
.hero-pat::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--pat, var(--blue-400));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .5s var(--e-out);
}
.hero-pat:hover, .hero-pat:focus-visible { color: #fff; }
.hero-pat:hover::before, .hero-pat:focus-visible::before, .hero-pat.is-active::before { transform: scaleX(1); }
.hero-pat__n {
  font-family: var(--font-en);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--pat, var(--blue-400));
  display: block;
  margin-block-end: .5rem;
}
.hero-pat__t { font-size: .88rem; font-weight: 600; line-height: 1.4; display: block; }

/* NOTE: the logical inset properties resolve against the element's OWN writing
   mode, so `writing-mode: vertical-rl` here would rotate the anchoring too.
   The rotation therefore lives on the label inside, not on the positioned box. */
.hero__scroll {
  position: absolute;
  bottom: 1.4rem;
  inset-inline-end: var(--gutter);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.hero__scroll .num { writing-mode: vertical-rl; }
.hero__scroll i {
  display: block;
  inline-size: 1px;
  block-size: 46px;
  background: linear-gradient(to bottom, var(--orange-500), transparent);
  animation: scrollPulse 2.4s var(--e-in-out) infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.35); opacity: .35; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

@media (max-width: 860px) {
  .hero { min-block-size: 92svh; align-items: center; }
  /* On a narrow screen the copy sits over the artwork, so the veil carries
     more of the contrast and the pattern field steps back. */
  .hero__canvas-wrap { opacity: .72; }
  .hero__veil {
    background:
      radial-gradient(95% 62% at 50% 46%, rgba(5, 11, 22, .90) 0%, rgba(5, 11, 22, .60) 55%, rgba(5, 11, 22, .30) 100%),
      linear-gradient(to top, rgba(5, 11, 22, .96) 0%, rgba(5, 11, 22, .30) 52%, transparent 88%);
  }
  .hero__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-pat:nth-child(odd) { border-inline-end: 1px solid rgba(255,255,255,.08); }
  .hero-pat:nth-child(even) { border-inline-end: 0; }
  .hero-pat { border-block-end: 1px solid rgba(255,255,255,.07); }
  .hero__scroll { display: none; }
}
@media (max-width: 480px) {
  .hero__index { grid-template-columns: minmax(0, 1fr); }
  .hero-pat { border-inline-end: 0 !important; padding-block: .9rem; }
}

/* --------------------------------------------------------------------------
   09 · ABOUT — editorial matrix
   -------------------------------------------------------------------------- */
.about__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.about__statement {
  font-size: clamp(1.35rem, 2.7vw, 2.15rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -.005em;
}
.about__statement em { font-style: normal; color: var(--accent); }
.about__statement .hl { color: var(--orange-600); font-style: normal; }
.theme-dark .about__statement .hl, .theme-deep .about__statement .hl { color: var(--orange-400); }

.about__body { display: grid; gap: 1.2rem; }
.about__body p { color: var(--ink-soft); max-inline-size: 58ch; }

/* Capability matrix — six columns that fill on scroll */
.matrix {
  margin-block-start: clamp(3rem, 7vw, 5.5rem);
  border-block-start: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* Six narrow columns hold at full width; below that the row would crush the
   discipline names, so it steps to three before the existing two-up tier.
   Bounded at the low end so the 980px two-column rules stay authoritative. */
@media (max-width: 1180px) and (min-width: 981px) {
  /* the footer's contact column is too narrow here for six icons on one
     line — cap the row at three so it breaks evenly instead of stranding
     one platform on a second row */
  .social { max-inline-size: calc(3 * 36px + 2 * .35rem); }
  .matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .matrix__cell { min-block-size: 0; padding-block-end: 1.5rem; border-block-end: 1px solid var(--rule-soft); }
  .matrix__cell:nth-child(3n) { border-inline-end: 0; padding-inline-end: 0; }
}
.matrix__cell {
  position: relative;
  padding: 1.6rem 0 0;
  padding-inline-end: 1.2rem;
  border-inline-end: 1px solid var(--rule-soft);
  min-block-size: 190px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.matrix__cell:last-child { border-inline-end: 0; padding-inline-end: 0; }
.matrix__cell::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--pat);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .8s var(--e-out) calc(var(--i, 0) * .09s);
}
.matrix.is-in .matrix__cell::before { transform: scaleX(1); }
.matrix__n { font-family: var(--font-en); font-size: .7rem; letter-spacing: .18em; color: var(--pat); }
.matrix__t { font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.matrix__d { font-size: .84rem; color: var(--ink-mute); line-height: 1.7; }
.matrix__bar {
  margin-block-start: auto;
  block-size: 3px;
  inline-size: 100%;
  background: var(--rule-soft);
  overflow: hidden;
}
.matrix__bar i {
  display: block;
  block-size: 100%;
  background: var(--pat);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 1.1s var(--e-out) calc(.25s + var(--i, 0) * .09s);
}
.matrix.is-in .matrix__bar i { transform: scaleX(var(--fill, .7)); }

@media (max-width: 980px) {
  .about__top { grid-template-columns: minmax(0, 1fr); }
  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix__cell { min-block-size: 0; padding-block-end: 1.5rem; border-block-end: 1px solid var(--rule-soft); }
  .matrix__cell:nth-child(even) { border-inline-end: 0; padding-inline-end: 0; }
}
@media (max-width: 560px) {
  .matrix { grid-template-columns: minmax(0, 1fr); }
  .matrix__cell { border-inline-end: 0 !important; padding-inline-end: 0; }
}

/* --------------------------------------------------------------------------
   10 · VISION & MISSION — one core that splits
   -------------------------------------------------------------------------- */
.vm { position: relative; }
.vm__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
.vm__axis {
  inline-size: 1px;
  block-size: 100%;
  min-block-size: 320px;
  background: var(--rule);
  position: relative;
  overflow: visible;
}
.vm__axis::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  inset-block-start: 0;
  inline-size: 3px;
  block-size: 100%;
  background: linear-gradient(to bottom, var(--blue-400), var(--orange-500));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.3s var(--e-out) .1s;
}
.vm.is-in .vm__axis::before { transform: scaleY(1); }
.vm__node {
  position: absolute;
  inset-inline-start: 50%;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .6s var(--e-out);
}
html[dir="rtl"] .vm__node { transform: translate(50%, -50%) scale(0); }
.vm__node--a { inset-block-start: 22%; }
.vm__node--b { inset-block-start: 78%; border-color: var(--orange-500); }
.vm.is-in .vm__node { transform: translate(-50%, -50%) scale(1); }
html[dir="rtl"] .vm.is-in .vm__node { transform: translate(50%, -50%) scale(1); }
.vm.is-in .vm__node--a { transition-delay: .6s; }
.vm.is-in .vm__node--b { transition-delay: .9s; }

.vm__panel { padding-block: clamp(1rem, 3vw, 2rem); }
.vm__panel .h3 { margin-block: 1rem .9rem; }
.vm__panel p { color: var(--ink-soft); max-inline-size: 46ch; }
.vm__panel--mission { --accent: var(--orange-500); }
.vm__tag {
  font-family: var(--font-en);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.vm__values {
  margin-block-start: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-start: 1px solid var(--rule);
}
.vm-value {
  padding: 1.4rem 0 0;
  padding-inline-end: 1.4rem;
  border-inline-end: 1px solid var(--rule-soft);
}
.vm-value:last-child { border-inline-end: 0; }
.vm-value b { display: block; font-size: .98rem; font-weight: 600; margin-block-end: .4rem; }
.vm-value span { font-size: .84rem; color: var(--ink-mute); line-height: 1.7; }

@media (max-width: 900px) {
  .vm__stage { grid-template-columns: minmax(0, 1fr); }
  .vm__axis { display: none; }
  .vm__panel {
    border-inline-start: 2px solid var(--accent);
    padding-inline-start: 1.2rem;
  }
  .vm__values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 0; }
  .vm-value:nth-child(even) { border-inline-end: 0; }
}
@media (max-width: 560px) { .vm__values { grid-template-columns: minmax(0, 1fr); } .vm-value { border-inline-end: 0; } }

/* --------------------------------------------------------------------------
   11 · WHAT SETS US APART — typographic rows
   -------------------------------------------------------------------------- */
.apart__list { border-block-start: 1px solid var(--rule); }
.apart-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.6rem, 3.4vw, 2.4rem);
  border-block-end: 1px solid var(--rule-soft);
  position: relative;
  isolation: isolate;               /* keeps the -1 hover plate above the section bg */
  transition: color .35s var(--e-out);
}
.apart-row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -1.2rem;
  inline-size: calc(100% + 2.4rem);
  background: var(--bg-soft);
  opacity: 0;
  transition: opacity .35s var(--e-out);
  z-index: -1;
  border-radius: var(--r-md);
}
.apart-row:hover::before { opacity: 1; }
.apart-row__n {
  font-family: var(--font-en);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--ink-mute);
  transition: color .35s var(--e-out);
}
.apart-row:hover .apart-row__n { color: var(--orange-500); }
.apart-row__t { font-size: clamp(1.1rem, 1.9vw, 1.42rem); font-weight: 600; line-height: 1.42; }
.apart-row__d { color: var(--ink-soft); font-size: var(--fs-body); }

@media (max-width: 820px) {
  .apart-row { grid-template-columns: 60px minmax(0, 1fr); gap: .6rem 1rem; }
  .apart-row__d { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   12 · OUR APPROACH — connected path
   -------------------------------------------------------------------------- */
.approach__flow { position: relative; margin-block-start: clamp(2rem, 5vw, 3.5rem); }
.approach__track {
  position: absolute;
  inset-block-start: 26px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--rule);
}
.approach__track i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue-400), var(--orange-500));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 1.6s var(--e-out) .2s;
}
html[dir="rtl"] .approach__track i { background: linear-gradient(-90deg, var(--blue-400), var(--orange-500)); }
.approach__flow.is-in .approach__track i { transform: scaleX(1); }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.step { position: relative; padding-block-start: 0; }
.step__dot {
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ink-mute);
  position: relative;
  z-index: 1;
  transition: border-color .4s var(--e-out), color .4s var(--e-out), transform .5s var(--e-out);
}
.step__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.approach__flow.is-in .step__dot { border-color: var(--accent); color: var(--ink); }
.step:hover .step__dot { transform: translateY(-3px); }
.step:hover .step__dot::after { opacity: .55; transform: scale(1); }
.step__t { font-size: 1.06rem; font-weight: 600; margin-block: 1.1rem .5rem; }
.step__d { font-size: .86rem; color: var(--ink-mute); line-height: 1.75; }
.step__svg { inline-size: 22px; block-size: 22px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .approach__track { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   13 · SERVICE CHAPTERS
   -------------------------------------------------------------------------- */
.chapter {
  position: relative;
  padding-block: var(--sec-y-lg);
  overflow: clip;
  isolation: isolate;
}
.chapter__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.chapter--reverse .chapter__stage { direction: inherit; }
.chapter--reverse .chapter__body { order: 2; }
.chapter--reverse .chapter__viz { order: 1; }

.chapter__mark {
  position: absolute;
  inset-block-start: clamp(1.5rem, 5vw, 3.5rem);
  inset-inline-end: var(--gutter);
  font-family: var(--font-en);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 200;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.chapter__body { max-inline-size: 54ch; }
.chapter__title { margin-block: 1.1rem 1.3rem; }
.chapter__title .sub {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(.85rem, 1.4vw, 1rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-start: .7rem;
}
html[data-lang="en"] .chapter__title .sub { font-family: var(--font-ar); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.chapter__lead { color: var(--ink-soft); font-size: var(--fs-lead); }

.chapter__points {
  display: grid;
  gap: .1rem;
  margin-block: 2rem;
  border-block-start: 1px solid var(--rule-soft);
}
.chapter__points li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-block: .82rem;
  border-block-end: 1px solid var(--rule-soft);
  font-size: .95rem;
  color: var(--ink-soft);
}
.chapter__points li::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  background: var(--accent);
  transform: rotate(45deg);
  transition: transform .35s var(--e-out), background-color .35s var(--e-out);
}
.chapter__points li:hover::before { transform: rotate(45deg) scale(1.45); background: var(--accent-2); }
.chapter__points li:hover { color: var(--ink); }

.chapter__viz {
  position: relative;
  aspect-ratio: 1 / 1;
  max-block-size: 620px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(90% 90% at 50% 40%, var(--bg-soft) 0%, transparent 70%);
}
.chapter__viz canvas { inline-size: 100%; block-size: 100%; }
.chapter__viz-label {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-en);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-block-start: 1px solid var(--rule-soft);
  background: linear-gradient(to top, var(--bg), transparent);
}
.chapter__viz-label b { color: var(--accent); font-weight: 600; }

@media (max-width: 940px) {
  /* On one column the text always leads, whichever way the desktop layout ran */
  .chapter__stage { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .chapter--reverse .chapter__body, .chapter__body { order: 1; }
  .chapter--reverse .chapter__viz, .chapter__viz { order: 2; aspect-ratio: 4 / 3; }
  .chapter__mark { font-size: 5.5rem; opacity: .8; }
}

/* — Bridges between chapters ------------------------------------------- */
.bridge {
  position: relative;
  block-size: clamp(90px, 12vw, 150px);
  overflow: hidden;
  background: var(--bg);
}
.bridge svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
/* Paths carry pathLength="1" in the markup, so 1 unit == the whole path */
.bridge path, .bridge line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--e-out);
}
.bridge.is-in path, .bridge.is-in line { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   14 · SERVICE DETAIL PAGES
   -------------------------------------------------------------------------- */
.svc-hero {
  position: relative;
  min-block-size: clamp(560px, 82svh, 800px);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + 4rem) clamp(2.5rem, 5vw, 4rem);
  overflow: clip;
  isolation: isolate;
}
.svc-hero__canvas-wrap { position: absolute; inset: 0; z-index: 0; opacity: .95; }
.svc-hero__canvas { inline-size: 100%; block-size: 100%; }
.svc-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.18) 100%);
}
.theme-light .svc-hero__veil, .theme-paper .svc-hero__veil {
  background: linear-gradient(to top, var(--bg) 2%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.25) 100%);
}
.svc-hero__inner { position: relative; z-index: 2; inline-size: 100%; }
.svc-hero__title { max-inline-size: 17ch; margin-block: 1.2rem 1.4rem; }
html[data-lang="ar"] .svc-hero__title { max-inline-size: 15ch; }
.svc-hero__lead { max-inline-size: 56ch; }

.crumbs {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: var(--ink-mute);
  margin-block-end: 1.4rem;
  flex-wrap: wrap;
}
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: .45; }

.svc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  margin-block-start: clamp(2.4rem, 5vw, 3.6rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}
.svc-hero__meta div { max-inline-size: 28ch; }
.svc-hero__meta dt {
  font-family: var(--font-en);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: .45rem;
}
.svc-hero__meta dd { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.65; }

/* Overview split */
.ov {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.ov__aside { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
.ov__body { display: grid; gap: 1.3rem; }
.ov__body p { color: var(--ink-soft); }
.ov__body .h3 { margin-block-start: .8rem; }
@media (max-width: 940px) {
  .ov { grid-template-columns: minmax(0, 1fr); }
  .ov__aside { position: static; }
}

/* Capability list — numbered, editorial, no card grid */
.caps { border-block-start: 1px solid var(--rule); }
.cap {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(.8rem, 3vw, 2.6rem);
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-block-end: 1px solid var(--rule-soft);
  align-items: start;
  position: relative;
}
.cap__n { font-family: var(--font-en); font-size: .76rem; letter-spacing: .16em; color: var(--accent); padding-block-start: .3rem; }
.cap__t { font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 600; line-height: 1.45; }
.cap__d { color: var(--ink-soft); font-size: .95rem; }
.cap__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .9rem; }
.tag {
  font-size: .74rem;
  padding: .32rem .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--ink-mute);
  line-height: 1.4;
}
@media (max-width: 800px) {
  .cap { grid-template-columns: 46px minmax(0, 1fr); }
  .cap__d { grid-column: 2; }
}

/* Solutions — asymmetric tiles with hairline structure (not rounded cards) */
.sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.sol {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-block-size: 230px;
  position: relative;
  transition: background-color .4s var(--e-out);
}
.sol:hover { background: var(--bg-soft); }
.sol::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .5s var(--e-out);
}
.sol:hover::after { transform: scaleX(1); }
.sol__ico { inline-size: 30px; block-size: 30px; color: var(--accent); margin-block-end: .3rem; }
.sol__t { font-size: 1.04rem; font-weight: 600; line-height: 1.4; }
.sol__d { font-size: .875rem; color: var(--ink-mute); line-height: 1.75; }
@media (max-width: 900px) { .sols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .sols { grid-template-columns: minmax(0, 1fr); } .sol { min-block-size: 0; } }

/* Process — vertical stepped rail */
.rail { display: grid; gap: 0; }
.rail__item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-block-end: 1px solid var(--rule-soft);
  position: relative;
}
.rail__item:first-child { border-block-start: 1px solid var(--rule); }
.rail__k {
  font-family: var(--font-en);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--ink-mute);
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.rail__k b { color: var(--accent); font-weight: 600; }
.rail__t { font-size: 1.1rem; font-weight: 600; margin-block-end: .5rem; }
.rail__d { color: var(--ink-soft); font-size: .94rem; max-inline-size: 62ch; }
.rail__item::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--accent);
  transition: inline-size .9s var(--e-out);
}
.rail__item.is-in::before { inline-size: 100%; }
@media (max-width: 700px) { .rail__item { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }

/* Sectors / use cases */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: .87rem;
  color: var(--ink-soft);
  transition: border-color .3s var(--e-out), color .3s var(--e-out), transform .3s var(--e-out);
}
.chip:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); }
.chip i { inline-size: 5px; block-size: 5px; background: var(--accent); border-radius: 50%; flex: none; }

.usecases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.usecase { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: .6rem; align-content: start; }
.usecase__k { font-family: var(--font-en); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.usecase__t { font-size: 1.05rem; font-weight: 600; }
.usecase__d { font-size: .89rem; color: var(--ink-mute); line-height: 1.75; }
@media (max-width: 700px) { .usecases { grid-template-columns: minmax(0, 1fr); } }

/* Why Smart Patterns — split with vertical index */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
.why__i { background: var(--bg); padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 2rem); display: grid; gap: .7rem; align-content: start; }
.why__n { font-family: var(--font-en); font-size: .7rem; letter-spacing: .2em; color: var(--accent-2); }
.why__t { font-size: 1.02rem; font-weight: 600; }
.why__d { font-size: .88rem; color: var(--ink-mute); line-height: 1.75; }
@media (max-width: 860px) { .why { grid-template-columns: minmax(0, 1fr); } }

/* Media slot — where real photography goes later */
.media-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(135deg, var(--rule-soft) 0 1px, transparent 1px 14px),
    var(--bg-soft);
  color: var(--ink-mute);
  overflow: hidden;
}
.media-slot__inner { display: grid; gap: .45rem; justify-items: center; max-inline-size: 40ch; }
.media-slot__k { font-family: var(--font-en); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.media-slot__t { font-size: .92rem; color: var(--ink-soft); font-weight: 600; }
.media-slot__d { font-size: .8rem; line-height: 1.7; }
.media-slot svg { inline-size: 26px; block-size: 26px; opacity: .5; }
.media-slot--tall { aspect-ratio: 3 / 4; }
.media-slot--wide { aspect-ratio: 21 / 9; }

/* --------------------------------------------------------------------------
   15 · CONTACT / FINAL CTA
   -------------------------------------------------------------------------- */
.cta { position: relative; overflow: clip; }
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.cta__title { margin-block: 1.2rem 1.4rem; }
.cta__title .l1 { display: block; }
.cta__title .l2 { display: block; color: var(--blue-300); }
.cta__title .l3 { display: block; color: var(--orange-400); }
.cta__info { margin-block-start: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.3rem; }
.cta__info-row { display: grid; gap: .3rem; padding-block-end: 1.2rem; border-block-end: 1px solid var(--rule-soft); }
.cta__info-row dt { font-family: var(--font-en); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.cta__info-row dd { margin: 0; font-size: 1rem; color: var(--ink); }
.cta__info-row a:hover { color: var(--orange-400); }

/* Form */
/* The contact grid never collapsed, so on phones the copy and the form were
   sharing two ~160px columns. One column below the tablet breakpoint. */
@media (max-width: 860px) {
  .cta__grid { grid-template-columns: minmax(0, 1fr); }
}

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: .5rem; position: relative; }
.field label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.field label .req { color: var(--orange-400); margin-inline-start: 2px; }
.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: .92rem 1rem;
  background: var(--field-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: .95rem;
  transition: border-color .28s var(--e-out), background-color .28s var(--e-out);
  appearance: none;
}
.field textarea { min-block-size: 128px; resize: vertical; line-height: 1.7; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A96A3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 12px;
  padding-inline-end: 1rem;
  padding-inline-start: 2.4rem;
}
html[dir="ltr"] .field select { background-position: right 1rem center; padding-inline-start: 1rem; padding-inline-end: 2.4rem; }
.field select option { background: var(--navy-900); color: #EEF2F7; }
.theme-light .field select option, .theme-paper .field select option { background: #fff; color: #0C1B2C; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); opacity: .8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange-400);
  background: rgba(255, 255, 255, .07);
}
.theme-light .field input:focus, .theme-light .field textarea:focus, .theme-light .field select:focus,
.theme-paper .field input:focus, .theme-paper .field textarea:focus, .theme-paper .field select:focus {
  background: #fff;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #E2564B; }
.field__err { font-size: .76rem; color: #FF8B80; min-block-size: 1em; display: none; }
.field.is-invalid .field__err { display: block; }

.form__consent { display: flex; align-items: flex-start; gap: .7rem; font-size: .82rem; color: var(--ink-mute); line-height: 1.7; }
.form__consent input { inline-size: 17px; block-size: 17px; margin-block-start: .28rem; accent-color: var(--orange-500); flex: none; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: .4rem; }
.form__status {
  font-size: .86rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--field-bg);
  display: none;
  line-height: 1.7;
}
.form__status.is-ok { display: block; border-color: rgba(77, 163, 240, .5); }
.form__status.is-err { display: block; border-color: rgba(226, 86, 75, .6); }

/* --------------------------------------------------------------------------
   16 · FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: #C6D0DC;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.8rem;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.foot__brand { display: grid; gap: 1.1rem; align-content: start; }
.foot__brand .brand { color: #fff; }
.foot__tagline { font-size: .9rem; color: #8494A5; max-inline-size: 34ch; line-height: 1.85; }
.foot__h {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6F8093;
  margin-block-end: 1.1rem;
}
html[data-lang="ar"] .foot__h { letter-spacing: .04em; font-size: .8rem; }
.foot__list { display: grid; gap: .68rem; }
.foot__list a {
  font-size: .89rem;
  color: #B7C3D0;
  transition: color .25s var(--e-out), padding-inline-start .25s var(--e-out);
  display: inline-block;
}
.foot__list a:hover { color: #fff; padding-inline-start: 5px; }
.foot__contact { font-size: .89rem; line-height: 2.1; color: #B7C3D0; }
.foot__contact a:hover { color: var(--orange-400); }
.foot__bottom {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .78rem;
  color: #6F8093;
}
.foot__legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot__legal a:hover { color: #fff; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   17 · REVEAL SYSTEM
   -------------------------------------------------------------------------- */
[data-reveal] { --rv-delay: 0ms; }
[data-reveal="up"] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--e-out) var(--rv-delay), transform .85s var(--e-out) var(--rv-delay);
}
[data-reveal="fade"] {
  opacity: 0;
  transition: opacity .95s var(--e-out) var(--rv-delay);
}
[data-reveal="mask"] { overflow: hidden; }
[data-reveal="mask"] > * {
  display: block;
  transform: translateY(102%);
  transition: transform 1s var(--e-out) var(--rv-delay);
}
[data-reveal="line"] {
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 1.1s var(--e-out) var(--rv-delay);
}
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .9s var(--e-out) var(--rv-delay), transform .9s var(--e-out) var(--rv-delay);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="mask"].is-in > * { transform: none; }
[data-reveal="line"].is-in { transform: scaleX(1); }

[data-stagger] > * { --rv-delay: calc(var(--i, 0) * 80ms); }

/* --------------------------------------------------------------------------
   18 · REDUCED MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal="mask"] > * { transform: none !important; }
  .hero__title .ln > span { transform: none !important; }
  .hero__lead, .hero__actions, .hero__index { opacity: 1 !important; transform: none !important; }
  .hero__scroll i { animation: none; }
}

@media print {
  .site-header, .drawer, .progress-line, .hero__canvas-wrap, .chapter__viz, .hero__scroll, .dock { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .chapter { padding-block: 1.2rem; }
}

/* --------------------------------------------------------------------------
   19 · MISC UTILITIES
   -------------------------------------------------------------------------- */
.stack { display: grid; gap: 1rem; }
.stack-sm { display: grid; gap: .55rem; }
.flow > * + * { margin-block-start: 1.15rem; }
.center { text-align: center; margin-inline: auto; }
.no-scroll { overflow: hidden; }
.u-mt-lg { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.u-mt-sm { margin-block-start: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.divider-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-en);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: 1.6rem;
}
.divider-label::after { content: ""; flex: 1; block-size: 1px; background: var(--rule); }

/* --------------------------------------------------------------------------
   20 · FLOATING DOCK — WhatsApp + back to top
   --------------------------------------------------------------------------
   The dock sits on the INLINE-START corner, which mirrors with the rest of the
   site. That corner is deliberate: it is opposite the hero's scroll cue, and
   opposite the contact form in BOTH languages (the form is the second grid
   child, so it lands on the inline-end side either way). The two buttons are
   stacked in a column, so they can never overlap one another.
   -------------------------------------------------------------------------- */
.dock {
  --dock-size: 50px;
  --dock-gap: .62rem;
  position: fixed;
  inset-block-end: calc(clamp(1rem, 2.4vw, 1.7rem) + env(safe-area-inset-bottom, 0px));
  inset-inline-start: clamp(1rem, 2.4vw, 1.7rem);
  z-index: 80;
  /* The dock box is exactly the WhatsApp button. Back-to-top is positioned
     above it rather than being a second flow item, so its hidden state (which
     is scaled and nudged downward) can never reach into its neighbour. */
  inline-size: var(--dock-size);
  block-size: var(--dock-size);
  transition: opacity .3s var(--e-out), transform .3s var(--e-out);
}
/* the mobile drawer owns the screen while it is open; and on narrow screens
   the contact form runs full width, so the dock steps aside rather than
   sitting on top of its fields */
body.no-scroll .dock,
.dock.is-tucked { opacity: 0; pointer-events: none; transform: translateY(10px); }

.dock__btn {
  position: relative;
  inline-size: var(--dock-size);
  block-size: var(--dock-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10, 21, 38, .84);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .85);
  transition: transform .32s var(--e-out), background-color .32s var(--e-out),
              border-color .32s var(--e-out), box-shadow .32s var(--e-out),
              color .32s var(--e-out), opacity .32s var(--e-out), visibility .32s;
}
.dock__btn svg { inline-size: 21px; block-size: 21px; display: block; }
.dock__btn:hover { transform: translateY(-3px); }
.dock__btn:active { transform: translateY(-1px); }

/* WhatsApp — the mark stays white on the site's own ground at rest, and the
   circle fills with the WhatsApp green on interaction. Swap the two if the
   client prefers the always-green treatment. */
.dock__btn--wa:hover,
.dock__btn--wa:focus-visible {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  box-shadow: 0 16px 32px -14px rgba(37, 211, 102, .75);
}

/* Back to top — stacked above the WhatsApp button, hidden until it is useful */
.dock__btn--top {
  position: absolute;
  inset-block-end: calc(100% + var(--dock-gap));
  inset-inline-start: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.9);
}
.dock.is-scrolled .dock__btn--top {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.dock.is-scrolled .dock__btn--top:hover {
  transform: translateY(-3px);
  border-color: var(--orange-500);
  color: var(--orange-400);
}

/* Label — slides out toward the middle of the page in both directions */
.dock__tip {
  position: absolute;
  inset-inline-start: calc(100% + .6rem);
  inset-block-start: 50%;
  transform: translateY(-50%) scale(.94);
  transform-origin: center;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  padding: .55rem .8rem;
  border-radius: var(--r-md);
  background: rgba(10, 21, 38, .94);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--e-out), transform .26s var(--e-out), visibility .26s;
}
.dock__btn:hover .dock__tip,
.dock__btn:focus-visible .dock__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

@media (max-width: 620px) {
  .dock { --dock-size: 46px; --dock-gap: .55rem; }
  .dock__btn svg { inline-size: 19px; block-size: 19px; }
}
/* no hover on touch, so the label would only ever flash on tap */
@media (hover: none) {
  .dock__tip { display: none; }
}

/* --------------------------------------------------------------------------
   21 · LOCATION CARD — national address + map
   --------------------------------------------------------------------------
   Ships as a self-contained plan drawing so the page still makes zero
   third-party requests. Setting SITE.map.embed in js/script.js swaps in a real
   map iframe and hides the drawing — no markup changes needed.
   -------------------------------------------------------------------------- */
.locate {
  margin-block-start: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-soft);
}
.locate__map {
  position: relative;
  aspect-ratio: 16 / 9;
  /* keeps the panel a band inside the section rather than a hero-sized map
     once the contact grid goes single-column on tablet */
  max-block-size: 280px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(77, 163, 240, .07) 0%, transparent 70%),
    var(--bg);
}
.locate__plan {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  color: var(--ink-mute);
}
.locate__map iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}
.locate__map.has-embed .locate__plan,
.locate__map.has-embed .locate__pin { display: none; }

.locate__pin {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 14px;
  block-size: 14px;
}
html[dir="rtl"] .locate__pin { transform: translate(50%, -50%); }
.locate__pin i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(240, 148, 43, .18);
}
.locate__pin::before,
.locate__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--orange-500);
  animation: pinPulse 3.2s var(--e-out) infinite;
}
.locate__pin::after { animation-delay: 1.6s; }
@keyframes pinPulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(4.2); opacity: 0; }
}

.locate__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  padding: clamp(.95rem, 2vw, 1.25rem);
  border-block-start: 1px solid var(--rule-soft);
}
.locate__addr { display: grid; gap: .3rem; }
.locate__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
html[data-lang="ar"] .locate__label { letter-spacing: .04em; font-size: .76rem; }
.locate__code {
  font-family: var(--font-en);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ink);
  line-height: 1.2;
}
.locate__note { font-size: .82rem; color: var(--ink-mute); line-height: 1.5; }

@media (max-width: 480px) {
  .locate__body { align-items: flex-start; }
  .locate__go { inline-size: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   22 · PARTNERS — infinite logo wall
   --------------------------------------------------------------------------
   Two rows travelling in opposite directions. Each track holds the same set
   of logos twice and is animated from 0 to -50%: because the track is exactly
   two identical sets wide, -50% is precisely one set, so the frame at the end
   of the cycle is pixel-identical to the frame at the start — no jump, no gap.

   Spacing lives on the items (margin-inline-end), never as a `gap` on the
   track — a gap between the two sets would not equal the gap between items
   and the rhythm would stutter at the seam.

   Motion is gated on `.pw.is-in`, which the shared reveal system adds only
   once the wall actually enters the viewport, so nothing runs during load.
   -------------------------------------------------------------------------- */
.pw {
  --pw-w: 184px;         /* tile size — logo area is this minus the padding */
  --pw-h: 92px;
  --pw-gap: 18px;
  --pw-dur-a: 116s;      /* slow and calm: a logo takes ~2s to cross its own width */
  --pw-dur-b: 138s;      /* rows deliberately out of step with each other */
  margin-block-start: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: var(--pw-gap);
}

.pw__row {
  position: relative;
  overflow: hidden;
  /* The wall reads left-to-right in both languages: the concept is two
     opposing rows, not a direction that follows the text. This must sit on
     the overflow container — under RTL a track wider than its row is laid
     out flush right, which would park the visible window past its end. */
  direction: ltr;
  /* logos fade in and out of the section rather than being cut off */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.pw__track {
  display: flex;
  inline-size: max-content;
  animation: pwScroll var(--pw-dur-a) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.pw__row--reverse .pw__track {
  animation-duration: var(--pw-dur-b);
  animation-direction: reverse;
}
.pw.is-in .pw__track { animation-play-state: running; }

@keyframes pwScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.pw__set { display: flex; flex: none; }

.pw__item {
  flex: none;
  inline-size: var(--pw-w);
  block-size: var(--pw-h);
  margin-inline-end: var(--pw-gap);
  display: grid;
  place-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  transition: border-color .35s var(--e-out), transform .35s var(--e-out);
}
.pw__item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;      /* never crop, never stretch */
  object-position: center;
  opacity: .82;
  transition: opacity .35s var(--e-out), transform .35s var(--e-out), filter .35s var(--e-out);
}
/* Logos supplied as white-on-transparent would vanish on the tile, so they are
   rendered as a solid silhouette instead. Identified by measured luminance —
   see the report. Supplying a dark variant of these files removes the need. */
.pw__item[data-ink="light"] img { filter: brightness(0); opacity: .72; }
/* These two ship with their own white background, which merges into the tile */
.pw__item[data-ink="boxed"] img { mix-blend-mode: multiply; }

@media (hover: hover) {
  .pw__item:hover { border-color: var(--rule); }
  .pw__item:hover img { opacity: 1; transform: scale(1.04); }
  .pw__item[data-ink="light"]:hover img { opacity: .95; }
  /* inspect a row by hovering it — resumes from where it stopped */
  .pw__row:hover .pw__track { animation-play-state: paused; }
}

@media (max-width: 1024px) {
  .pw { --pw-w: 156px; --pw-h: 82px; --pw-gap: 14px; --pw-dur-a: 96s; --pw-dur-b: 114s; }
  .pw__item { padding: 12px 15px; }
}
@media (max-width: 620px) {
  .pw { --pw-w: 128px; --pw-h: 68px; --pw-gap: 10px; --pw-dur-a: 74s; --pw-dur-b: 88s; }
  .pw__item { padding: 10px 12px; border-radius: var(--r-sm); }
  .pw__row {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}

/* Reduced motion — a calm static wall instead of a moving one */
@media (prefers-reduced-motion: reduce) {
  .pw__row {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pw__track { inline-size: auto; animation: none; will-change: auto; }
  .pw__set { flex-wrap: wrap; justify-content: center; }
  .pw__set[aria-hidden="true"] { display: none; }   /* no duplicates when static */
  .pw__item { margin-inline-end: 0; margin: calc(var(--pw-gap) / 2); }
}

/* --------------------------------------------------------------------------
   22b · PARTNERS — brand treatment
   --------------------------------------------------------------------------
   Refinement layer over the wall above. Blue and orange are introduced in
   four restrained places: two drifting background glows, an accent rule under
   the heading, a gradient line above the wall, and the per-row hover accent
   (row 1 blue, row 2 orange — echoing the two opposing directions).
   Everything is transform/opacity or a 2px strip, so it stays cheap.
   -------------------------------------------------------------------------- */
.partners { position: relative; isolation: isolate; }

/* Two soft brand glows that drift very slowly behind the section. Radial
   gradients rather than blur filters — same softness, far cheaper. */
.partners::before,
.partners::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.partners::before {
  inline-size: min(56vw, 700px);
  aspect-ratio: 1.25;
  inset-block-start: -16%;
  inset-inline-start: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(58, 135, 207, .22), rgba(58, 135, 207, 0) 68%);
  animation: pwGlowA 34s var(--e-in-out) infinite alternate;
}
.partners::after {
  inline-size: min(50vw, 620px);
  aspect-ratio: 1.15;
  inset-block-end: -20%;
  inset-inline-end: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(240, 148, 43, .20), rgba(240, 148, 43, 0) 68%);
  animation: pwGlowB 42s var(--e-in-out) infinite alternate;
}
@keyframes pwGlowA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.1); }
}
@keyframes pwGlowB {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-5%, -4%, 0) scale(1); }
}

/* Highlighted phrase in the heading — orange word with a soft underline */
.pw-hl {
  color: var(--orange-600);
  background-image: linear-gradient(rgba(240, 148, 43, .26), rgba(240, 148, 43, .26));
  background-repeat: no-repeat;
  background-size: 100% .13em;
  background-position: 0 92%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Brand rule under the intro: blue into orange, drawn in by [data-reveal="line"] */
.pw-accent {
  display: block;
  block-size: 3px;
  inline-size: clamp(84px, 12vw, 140px);
  margin-block-start: clamp(1.5rem, 2.6vw, 2.1rem);
  border-radius: 3px;
  background: linear-gradient(to right, var(--blue-500), var(--orange-500));
}
html[dir="rtl"] .pw-accent { background: linear-gradient(to left, var(--blue-500), var(--orange-500)); }

/* Accent line above the wall — a slow blue→orange travel, 2px tall */
.pw::before {
  content: "";
  display: block;
  block-size: 2px;
  border-radius: 2px;
  margin-block-end: .3rem;
  background: linear-gradient(90deg,
      rgba(58, 135, 207, 0) 0%,
      rgba(58, 135, 207, .8) 20%,
      rgba(240, 148, 43, .8) 56%,
      rgba(240, 148, 43, 0) 78%);
  background-size: 240% 100%;
  opacity: 0;
  transition: opacity .9s var(--e-out) .1s;
}
.pw.is-in::before { opacity: 1; animation: pwLine 18s linear infinite; }
@keyframes pwLine {
  from { background-position: 0 0; }
  to   { background-position: 240% 0; }
}

/* Brand-tinted entry and exit zones. The row is forced to `direction: ltr`,
   so these resolve to the same physical edges in both languages — the wall
   keeps one consistent visual identity regardless of text direction. */
.pw__row::before,
.pw__row::after {
  content: "";
  position: absolute;
  inset-block: 0;
  /* kept inside the mask's 7% fade so the tint only ever touches logos that
     are already dissolving — a logo in full view is never colour-washed */
  inline-size: clamp(44px, 7%, 120px);
  z-index: 2;
  pointer-events: none;
}
.pw__row::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, rgba(58, 135, 207, .22), rgba(58, 135, 207, 0));
}
.pw__row::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, rgba(240, 148, 43, .20), rgba(240, 148, 43, 0));
}

/* Entrance: rows lift in once the wall is in view. The base state is fully
   visible, so a JavaScript failure leaves the logos on screen. */
@keyframes pwRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.pw.is-in .pw__row { animation: pwRise .9s var(--e-out) backwards; }
.pw.is-in .pw__row--reverse { animation-delay: .14s; }

/* Per-row hover accent: blue on the row travelling one way, orange the other */
.pw__item {
  --pw-a: 58, 135, 207;
  transition: border-color .35s var(--e-out), transform .35s var(--e-out),
              box-shadow .35s var(--e-out), background-color .35s var(--e-out);
}
.pw__row--reverse .pw__item { --pw-a: 240, 148, 43; }

@media (hover: hover) {
  .pw__item:hover {
    border-color: rgba(var(--pw-a), .55);
    box-shadow: 0 12px 26px -16px rgba(var(--pw-a), .7);
    transform: translateY(-3px);
  }
  .pw__item:hover img { opacity: 1; transform: scale(1.05); }
  .pw__item[data-ink="light"]:hover img { opacity: .95; }
}

@media (max-width: 620px) {
  /* smaller, calmer glows so the logos stay the focus on a small screen */
  .partners::before { inline-size: 90vw; inset-block-start: -8%; opacity: .8; }
  .partners::after  { inline-size: 80vw; inset-block-end: -10%; opacity: .8; }
  .pw__row::before, .pw__row::after { inline-size: clamp(28px, 6%, 70px); }
}

@media (prefers-reduced-motion: reduce) {
  .partners::before, .partners::after { animation: none; }
  .pw.is-in::before { animation: none; opacity: 1; }
  .pw.is-in .pw__row { animation: none; }
}

/* --------------------------------------------------------------------------
   23 · SMART ROBOTICS — chapter panel + detail-page figure
   --------------------------------------------------------------------------
   The homepage chapter uses the standard .chapter__viz — same square framed
   panel, same scroll-built canvas diagram as the other five disciplines. The
   photograph appears only as a small anchored reference figure inside that
   composition, never as the composition itself; the full-strength imagery
   belongs to the Robotics detail page.
   -------------------------------------------------------------------------- */


/* The chapter panel itself needs no rules of its own — it is a plain
   .chapter__viz like the other five, and the diagram inside it is drawn by
   the canvas engine (GEN.robotics / R.robotics) in the light-ground palette. */

/* Robotics detail page: the customisation band pairs the profile shot with copy */
.robo-split {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
.robo-figure {
  position: relative;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 9 / 10;
  max-block-size: 560px;
  background: var(--bg-soft);
}
.robo-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}
.robo-figure__tag {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: .8rem 1.05rem;
  font-family: var(--font-en);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E7EEF6;
  background: linear-gradient(to top, rgba(5,11,22,.9), transparent);
}
@media (max-width: 900px) {
  .robo-split { grid-template-columns: minmax(0, 1fr); }
  .robo-figure { aspect-ratio: 4 / 3; max-block-size: 380px; order: -1; }
  .robo-figure img { object-position: 50% 18%; }
}

/* --------------------------------------------------------------------------
   24 · FOOTER SOCIAL
   -------------------------------------------------------------------------- */
.social {
  display: flex;
  align-items: center;
  /* Six platforms have to clear the footer's contact column. At the widths
     where they fit they sit on one line; where the column is too narrow they
     wrap three and three, which reads as a block rather than as an orphan. */
  gap: .35rem;
  flex-wrap: wrap;
  margin-block-start: 1.1rem;
}
.social__link {
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #9FB0C2;
  transition: color .3s var(--e-out), border-color .3s var(--e-out),
              background-color .3s var(--e-out), transform .3s var(--e-out);
}
.social__link svg { inline-size: 17px; block-size: 17px; display: block; }
.social__link:hover,
.social__link:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  border-color: var(--blue-400);
  background: rgba(77, 163, 240, .14);
}
/* Alternating brand accent keeps the row from reading as one flat block.
   Counts the list items — each link is the only child of its <li>, so
   :nth-child on the link itself would never match. */
.social li:nth-child(even) .social__link:hover,
.social li:nth-child(even) .social__link:focus-visible {
  border-color: var(--orange-500);
  background: rgba(240, 148, 43, .14);
}

/* A platform whose URL has not been entered yet: still clearly legible and
   part of the composition, but quieter, and inert to pointer and keyboard.
   The row must read as complete, not as if icons were missing. */
.social__link--off {
  color: #6E7E90;
  border-color: rgba(255, 255, 255, .08);
  cursor: default;
  pointer-events: none;
}
.social__link--off:hover,
.social__link--off:focus-visible {
  color: #6E7E90;
  transform: none;
  border-color: rgba(255, 255, 255, .08);
  background: none;
}

@media (max-width: 560px) {
  .social__link { inline-size: 42px; block-size: 42px; }   /* touch target */
}

/* --------------------------------------------------------------------------
   25 · CERTIFICATES — a single-row rail of official documents
   --------------------------------------------------------------------------
   The documents never wrap. `--cols` is the number visible at each width and
   is the ONLY definition of that count: the viewport is sized to exactly that
   many cards, and script.js reads the same custom property to decide how far
   one step travels. Changing a breakpoint here changes the carousel with it.

   Each card is one anchor that downloads its PDF, so the whole surface — the
   preview, the title, the description — is a single target with a single
   accessible name. Nothing about the file is exposed in the interface.
   -------------------------------------------------------------------------- */
.certs {
  position: relative;
  --cols: 3;                       /* documents visible at once */
  --cert-gap: clamp(1.2rem, 2.6vw, 2.4rem);
  --arrow: 44px;                   /* the controls flanking the row */
  /* a tighter block than the site default: this section is a single row, so
     the standard section rhythm leaves it looking hollow */
  padding-block: clamp(2.7rem, 5vw, 4.6rem);
}
/* the head sits close to the documents — the gap was the loudest problem */
.certs .section__head { margin-block-end: 0; position: relative; }

/* The closing clause of the headline carries the accent. The phrase is found
   at render time from the CMS string's own pivot, so nothing is hardcoded and
   an edited headline simply loses the accent rather than breaking.
   Same device as the Partners heading — orange ink over a low band that sits
   on the baseline — tuned a shade quieter for the warm paper ground. */
.certs__hl {
  color: var(--orange-600);
  background-image: linear-gradient(rgba(240, 148, 43, .22), rgba(240, 148, 43, .22));
  background-repeat: no-repeat;
  background-size: 100% .12em;
  background-position: 0 90%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .5s var(--e-out);
}
/* the band settles up into place as the heading arrives */
.certs .section__head .sec-title:not(.is-in) .certs__hl { background-size: 100% 0; }


/* a single measured rule under the section head, drawn in on reveal */
.certs__rule {
  display: block;
  block-size: 3px;
  border-radius: 3px;
  inline-size: clamp(84px, 12vw, 140px);
  margin-block-start: 1.1rem;
  background: linear-gradient(to var(--_e, right), var(--blue-500), var(--orange-500));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 1s var(--e-out) var(--rv-delay, 0ms);
}
html[dir="rtl"] .certs__rule { --_e: left; }

/* The plate: two hairlines enclose the set, so it reads as one exhibited
   collection rather than a loose row of thumbnails. */
.certs__gallery {
  position: relative;
  margin-block-start: clamp(1.4rem, 2.4vw, 1.9rem);
  padding-block: clamp(1.3rem, 2.2vw, 1.8rem);
  border-block: 1px solid var(--rule-soft);
}
/* A branded backlight, not a decoration: two very low-alpha radial pools —
   blue leading, orange trailing — that lift the documents off the paper and
   give the row somewhere to sit. Painted behind everything, never clipped by
   the rail, and quiet enough that it reads as light rather than as colour. */
.certs__gallery::before {
  content: "";
  position: absolute;
  inset-block: -6%;
  inset-inline: -4%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 84% at 50% 48%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 74%),
    radial-gradient(46% 78% at 14% 40%, rgba(58, 135, 207, .20), rgba(58, 135, 207, 0) 72%),
    radial-gradient(44% 74% at 87% 62%, rgba(240, 148, 43, .17), rgba(240, 148, 43, 0) 72%);
  transition: opacity 1.1s var(--e-out);
}
/* the light holds off until the row arrives — and stays lit where :has() is
   not understood, so the fallback is the finished state, never a dark plate */
.certs__gallery:has(.certs__track:not(.is-in))::before { opacity: 0; }
/* the pools are physical, so mirror them and the blue keeps leading the read */
html[dir="rtl"] .certs__gallery::before { transform: scaleX(-1); }
/* the rail rides above the light */
.certs__rail { position: relative; z-index: 1; }

/* — the rail: one line of arrow · row · arrow --------------------------- */
/* The controls flank the documents instead of sitting in their own row above
   them: no extra band of vertical space, and they read as this row's
   instrument. They align on the preview, not on the whole card, so the name
   underneath does not drag them off centre. */
.certs__rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(.6rem, 1.6vw, 1.1rem);
}
.certs__btn--prev { grid-column: 1; }
.certs__btn--next { grid-column: 3; }
.certs__btn--prev, .certs__btn--next {
  align-self: center;
  /* Centring on the card would sit the arrows half the name-block too low.
     That block is deterministic — margin + padding + border + one line of the
     title — so lift them by half of it and they land on the preview's middle. */
  margin-block-start: calc((0.62rem + 0.52rem + 1.19rem + 1px) / -2);
}

/* A pressed disc rather than a bordered box: paper-white face, hairline ring,
   and a contact shadow so it reads as an object on the plate. The brand tint
   arrives on hover, from the leading edge. */
.certs__btn {
  position: relative;
  inline-size: 44px;               /* the interactive area, not just the icon */
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05), 0 6px 16px -12px rgba(22, 32, 43, .35);
  transition: color .3s var(--e-out), border-color .3s var(--e-out),
              background-color .3s var(--e-out), box-shadow .3s var(--e-out),
              transform .3s var(--e-out), opacity .3s var(--e-out);
}
/* the brand ring, drawn only when it is wanted */
.certs__btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color .3s var(--e-out);
}
.certs__btn svg { inline-size: 18px; block-size: 18px; }
/* the chevrons point along the reading direction */
html[dir="rtl"] .certs__btn svg { transform: scaleX(-1); }

.certs__btn:hover:not(:disabled) {
  color: var(--navy-900);
  border-color: var(--orange-500);
  background: #fff;
  box-shadow: 0 2px 4px rgba(22, 32, 43, .07), 0 12px 24px -14px rgba(240, 148, 43, .55);
  transform: translateY(-1px);
}
.certs__btn:hover:not(:disabled)::before { border-color: rgba(240, 148, 43, .28); }
.certs__btn:active:not(:disabled) { transform: translateY(0); }
.certs__btn svg { transition: transform .3s var(--e-out); }
/* the chevron leans the way it will travel */
.certs__btn--next:hover:not(:disabled) svg { transform: translateX(2px); }
.certs__btn--prev:hover:not(:disabled) svg { transform: translateX(-2px); }
html[dir="rtl"] .certs__btn--next:hover:not(:disabled) svg { transform: scaleX(-1) translateX(2px); }
html[dir="rtl"] .certs__btn--prev:hover:not(:disabled) svg { transform: scaleX(-1) translateX(-2px); }
.certs__btn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.certs__btn:disabled { opacity: .3; cursor: default; box-shadow: none; background: transparent; }

/* — the rail ------------------------------------------------------------- */
/* The viewport holds exactly --cols cards and their gaps, so a fourth card is
   never clipped at the edge; on narrow screens it falls back to the shell. */
/* `clip` rather than `hidden`: a hidden box is still a scroll container, so
   focusing a card would let the browser scroll the rail a few pixels out of
   true and no arrow press could put it back. `clip` cannot scroll at all.
   The margin lets the registration ticks and the focus ring paint past the
   edge — it is far smaller than the gap, so no next card ever peeks in. */
.certs__viewport {
  overflow: hidden;                /* fallback for older engines */
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 10px;
  touch-action: pan-y;             /* vertical page scroll stays with the page */
}

.certs__track {
  display: flex;
  gap: var(--cert-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform .55s var(--e-out);
}
/* the visible cards divide the rail evenly, so three sit across the section
   rather than clustering at one end */
.certs__item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--cert-gap)) / var(--cols));
  min-inline-size: 0;
}

/* — the card ------------------------------------------------------------- */
.cert {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* registration ticks just outside the paper */
.cert__mount { position: relative; display: block; }
.cert__mount::before,
.cert__mount::after {
  content: "";
  position: absolute;
  inline-size: 9px;
  block-size: 9px;
  border: 1px solid var(--rule);
  opacity: .5;
  pointer-events: none;
  transition: opacity .45s var(--e-out), border-color .45s var(--e-out);
}
.cert__mount::before {
  inset-block-start: -7px; inset-inline-start: -7px;
  border-inline-end: 0; border-block-end: 0;
}
.cert__mount::after {
  inset-block-end: -7px; inset-inline-end: -7px;
  border-inline-start: 0; border-block-start: 0;
}

/* The preview window: a letterbox onto the TOP of the A4 page. 210 : 178 is
   the upper ~60% of the sheet — the crest, the awarded name and the standard
   all sit inside it, and the signature block below is what gets cut. The
   image keeps its own proportions; only the window is short. */
.cert__win {
  position: relative;
  display: block;
  aspect-ratio: 210 / 150;
  background: #fff;
  border: 1px solid rgba(22, 32, 43, .12);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22, 32, 43, .05),
              0 6px 14px -10px rgba(22, 32, 43, .26);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out),
              border-color .5s var(--e-out);
}
.cert__page {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;               /* fills the window, never stretches */
  object-position: top center;     /* anchored to the head of the page */
  display: block;
}
.cert__page--blank { background: repeating-linear-gradient(180deg, #fff 0 14px, #f2f3f5 14px 15px); }

/* a very slight sheen, so it reads as a physical surface */
.cert__glaze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 34%);
  opacity: .8;
}

/* — the label ------------------------------------------------------------ */
/* the card carries the certificate's name and nothing else */
.cert__meta {
  display: block;
  margin-block-start: .62rem;
  padding-block-start: .52rem;
  border-block-start: 1px solid var(--rule-soft);
}
.cert__title {
  display: block;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-900);
  transition: color .3s var(--e-out);
}

@media (hover: hover) {
  .cert:hover .cert__win {
    transform: translateY(-6px);    /* a lift, not a zoom */
    box-shadow: 0 2px 4px rgba(22, 32, 43, .07),
                0 20px 32px -20px rgba(22, 32, 43, .38);
    border-color: rgba(31, 111, 235, .45);
  }
  .cert:hover .cert__mount::before,
  .cert:hover .cert__mount::after { opacity: 1; border-color: var(--orange-500); }
  .cert:hover .cert__title { color: var(--blue-600); }
}
.cert:focus-visible { outline: none; }
.cert:focus-visible .cert__win {
  outline: 2px solid var(--blue-500);
  outline-offset: 4px;
  border-color: rgba(31, 111, 235, .45);
}
.cert:focus-visible .cert__title { color: var(--blue-600); }

/* — arrival --------------------------------------------------------------- */
.certs__track .certs__item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.certs__track.is-in .certs__item { opacity: 1; transform: none; }

/* — the same count, expressed once per breakpoint ------------------------- */
@media (max-width: 980px) {
  .certs { --cols: 2; }
}
@media (max-width: 560px) {
  .certs {
    --cols: 1;
    --arrow: 38px;
    --cert-gap: 1rem;
    padding-block: clamp(2.4rem, 8vw, 3rem);
  }
  /* the arrows tuck in so a single card still has room to read */
  .certs__rail { column-gap: .45rem; }
  .certs__btn { inline-size: var(--arrow); block-size: var(--arrow); }
  .certs__btn svg { inline-size: 15px; block-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .certs__track { transition: none !important; }   /* the step is instant */
  .certs__gallery::before { transition: none !important; }
  .certs__hl { transition: none !important; background-size: 100% .12em !important; }
  .certs__btn, .certs__btn svg { transition: none !important; }
  .certs__btn:hover:not(:disabled) { transform: none; }
  .certs__track .certs__item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .certs__rule { transform: scaleX(1) !important; transition: none !important; }
  .cert__win, .cert__mount::before, .cert__mount::after { transition: none !important; }
  .cert:hover .cert__win { transform: none; }
}

/* --------------------------------------------------------------------------
   26 · OPERATING CYCLE — the Pattern 04 service lifecycle
   --------------------------------------------------------------------------
   A code-native diagram, no imagery: a dial that states the cycle is closed,
   beside an ordered list of the stages a single maintenance action travels.
   The dial is decorative — every stage is readable from the list alone, so
   the section is complete with CSS disabled and with motion switched off.
   -------------------------------------------------------------------------- */
.cyc {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* — the dial ------------------------------------------------------------- */
.cyc__dial {
  position: relative;
  inline-size: 100%;
  max-inline-size: 240px;
  aspect-ratio: 1;
  margin-inline: auto;
}
.cyc__ring,
.cyc__sweep {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
}
.cyc__ring { border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); }
/* the service pass: one accent arc travelling the closed route */
.cyc__sweep {
  border: 1.5px solid transparent;
  border-block-start-color: var(--accent);
  border-inline-end-color: color-mix(in srgb, var(--accent) 55%, transparent);
  animation: cyc-turn 9s linear infinite;
}
.cyc__hub {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 13%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* The checkpoints, one per stage, spaced around the ring. Each tick is a
   full-size box rotated about the dial centre, with the dot drawn on its top
   edge — a percentage translate would resolve against the dot's own 7px box
   and stack every checkpoint in the middle. */
.cyc__tick {
  position: absolute;
  inset: 12%;
  pointer-events: none;
  transform: rotate(calc(var(--i) * (360deg / var(--cyc-n))));
}
.cyc__tick::before {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: 50%;
  margin-inline-start: -4px;
  inline-size: 8px;
  block-size: 8px;
  border: 1px solid var(--accent-2);
  border-radius: 50%;
  background: #0A1526;
}

/* — the stages ----------------------------------------------------------- */
.cyc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.35rem);
}
.cyc__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  padding-block-end: clamp(.9rem, 1.8vw, 1.35rem);
  border-block-end: 1px solid var(--rule-soft);
}
.cyc__step:last-child { border-block-end: 0; padding-block-end: 0; }
.cyc__n {
  grid-row: 1 / 3;
  align-self: start;
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 50%;
}
.cyc__t { font-size: .98rem; font-weight: 600; line-height: 1.35; }
.cyc__d { font-size: .84rem; line-height: 1.65; color: var(--ink-mute); margin-block-start: .2rem; }

@keyframes cyc-turn { to { rotate: 360deg; } }

@media (max-width: 860px) {
  .cyc { grid-template-columns: minmax(0, 1fr); }
  .cyc__dial { max-inline-size: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  /* the cycle is still shown as closed and complete — it simply stops */
  .cyc__sweep { animation: none; }
}