/* =========================================================================
   RAQMANA — shared design system  (v2, 2026-09-24)
   Used by index.html, strategy.html and contact.html. Page-specific layouts live in
   home.css, strategy.css and contact.css; everything reusable lives here.

   Contents
     1. Tokens            5. Buttons & links       9. Header & navigation
     2. Themes            6. Labels, tags, marks  10. Footer
     3. Base              7. Frames (the cut)     11. Motion & reveal
     4. Layout & type     8. Shared components    12. Utilities
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */
/* ---------------------------------------------------------------- 0. Fonts
   IBM Plex, self-hosted (assets/fonts/, OFL 1.1 — see OFL.txt). Subset from the
   official @ibm/plex-* 1.1.0 packages: Latin + the punctuation in use for Sans/Mono,
   the Arabic block for Sans Arabic (downloaded only when Arabic text is on the page). */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/plex-sans-300.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-mono-500.woff2") format("woff2"); }
/* Arabic pages: DIN Next LT W23 Arabic (Linotype), one family for the whole Arabic site, Latin included.
   Weights as in the font files: 250 Ultra Light, 300 Light, 400 Regular, 500 Medium, 750 Heavy, 900 Black. */
@font-face { font-family: 'DIN Next Arabic'; font-style: normal; font-weight: 250; font-display: swap; src: url("../fonts/din-next-arabic-250.woff2") format("woff2"); }
@font-face { font-family: 'DIN Next Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/din-next-arabic-300.woff2") format("woff2"); }
@font-face { font-family: 'DIN Next Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/din-next-arabic-400.woff2") format("woff2"); }
@font-face { font-family: 'DIN Next Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/din-next-arabic-500.woff2") format("woff2"); }
@font-face { font-family: 'DIN Next Arabic'; font-style: normal; font-weight: 750; font-display: swap; src: url("../fonts/din-next-arabic-750.woff2") format("woff2"); }
@font-face { font-family: 'DIN Next Arabic'; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/din-next-arabic-900.woff2") format("woff2"); }

:root {
  /* Brand — the three official colours (confirmed by Raqmana, 2026-09) */
  --rq-purple: #2B2588;      /* brand primary. On dark it is a fill or glow only (1.6:1), never text */
  --rq-cyan: #11C7FE;        /* brand accent. Never text or hairlines on light (2.0:1 on white) */
  --rq-white: #FFFFFF;

  /* Dark scale — the purple's hue (~244°), lightness held so contrast is unchanged */
  --rq-night: #0D0B2E;       /* the one dark base: every dark band, page and panel */
  --rq-night-2: #15133F;     /* raised surface on dark */
  --rq-steel: #1B184A;       /* card plate on dark */
  --rq-steel-2: #23205D;     /* card plate, hover / selected */
  --rq-hub: #120F3A;         /* diagram hubs */
  --rq-purple-deep: #211C6E; /* lower end of purple gradients */
  --rq-on-purple: #D4D6EC;   /* secondary text on purple — 8.5:1 */
  --rq-on-purple-2: #C3C6E4; /* metadata on purple — 7.3:1 */

  /* Light scale */
  --rq-paper: #F5F6FA;       /* alternate light band */
  --rq-ink: #151245;         /* text on light — 17.4:1 */
  --rq-ink-2: #4A5078;       /* secondary on light — 7.7:1 */
  --rq-ink-3: #666C92;       /* tertiary on light — 5.2:1 */
  --rq-line: #E3E5F0;
  --rq-line-strong: #C9CDE0;

  /* Text on dark */
  --rq-frost: #EEF1F8;       /* primary */
  --rq-mist: #A9ADCF;        /* secondary — 8.7:1 on night */
  --rq-silver: #8A93B8;      /* metadata — the restrained metallic, 6:1 on night */

  /* Accent family — one hue, several jobs */
  --rq-cyan-hover: #52D6FE;
  --rq-cyan-text: #047A9D;   /* cyan for text and thin lines on light — 4.9:1 white, 4.55:1 paper */
  --rq-cyan-line: rgba(var(--rq-cyan-rgb), .38);  /* structural lines on bare dark canvas */
  --rq-cyan-edge: rgba(var(--rq-cyan-rgb), .14);  /* grid, faint hairlines */
  --rq-cyan-wash: #E5F9FF;

  /* Channel triplets, so translucent layers never hard-code a colour */
  --rq-cyan-rgb: 17, 199, 254;
  --rq-purple-rgb: 43, 37, 136;
  --rq-night-rgb: 13, 11, 46;
  --rq-night2-rgb: 21, 19, 63;
  --rq-steel-rgb: 27, 24, 74;
  --rq-mist-rgb: 169, 173, 207;

  /* Type */
  --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.35rem + 5.1vw, 5.5rem);   /* 44 → 88 */
  --fs-title:   clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem);    /* 38 → 68, page titles */
  --fs-h2:      clamp(1.875rem, 1.3rem + 2.1vw, 3rem);     /* 30 → 48 */
  --fs-h3:      clamp(1.3125rem, 1.15rem + .55vw, 1.625rem); /* 21 → 26 */
  --fs-h4:      1.125rem;
  --fs-lede:    clamp(1.0625rem, .98rem + .38vw, 1.3125rem); /* 17 → 21 */
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-label:   .75rem;
  --fs-micro:   .6875rem;

  /* Space — 8px unit */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(72px, 5rem + 4vw, 136px);
  --gutter: clamp(16px, .6rem + 2.6vw, 40px);
  --max: 1280px;

  /* Geometry — "the cut": two opposite corners, from the logo's glyphs */
  --cut-s: 6px;    /* tags, chips */
  --cut-m: 10px;   /* buttons */
  --cut-l: 20px;   /* feature panels, pillar cards */
  --cut-xl: 32px;  /* hero panels */
  --radius: 2px;   /* everything that is not cut */
  --slant: -20deg; /* the logo's lean */

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);   /* the house curve: fast start, long settle */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 700ms;

  --header-h: 72px;
}

/* ---------------------------------------------------------------- 2. Themes
   Components read semantic variables only, so the same markup renders on
   light or dark bands. */
.theme-light {
  --bg: var(--rq-white);
  --surface: var(--rq-paper);
  --plate: var(--rq-white);
  --fg: var(--rq-ink);
  --fg-2: var(--rq-ink-2);
  --fg-3: var(--rq-ink-3);
  --line: var(--rq-line);
  --line-strong: var(--rq-line-strong);
  --accent-text: var(--rq-cyan-text);
  --grid-color: rgba(var(--rq-purple-rgb), .055);
  background-color: var(--bg);
  color: var(--fg);
}
.theme-paper { --bg: var(--rq-paper); --plate: var(--rq-white); }
.theme-dark {
  --bg: var(--rq-night);
  --surface: var(--rq-night-2);
  --plate: var(--rq-steel);
  --fg: var(--rq-frost);
  --fg-2: var(--rq-mist);
  --fg-3: var(--rq-silver);
  --line: rgba(var(--rq-mist-rgb), .16);
  --line-strong: rgba(var(--rq-mist-rgb), .32);
  --accent-text: var(--rq-cyan);
  --grid-color: var(--rq-cyan-edge);
  background-color: var(--bg);
  color: var(--fg);
}
/* Brand band: the purple as a surface. Text stays white/frost; cyan passes at 6.2:1 */
.theme-purple { --bg: var(--rq-purple); --surface: rgba(var(--rq-night-rgb), .35); --plate: rgba(var(--rq-night-rgb), .28); --fg-2: var(--rq-on-purple); --fg-3: var(--rq-on-purple-2); --line: rgba(255, 255, 255, .16); --line-strong: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------------- 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
s { text-decoration-thickness: 1px; }
address { font-style: normal; }
[hidden] { display: none !important; }   /* a component's own display must never re-show a hidden element */
::selection { background: var(--rq-cyan); color: var(--rq-night); }

:focus-visible {
  outline: 2px solid var(--rq-cyan);
  outline-offset: 3px;
  border-radius: 1px;
}
.theme-light :focus-visible { outline-color: var(--rq-purple); }
.theme-dark :focus-visible { outline-color: var(--rq-cyan); }   /* dark bands nested in a light page */
/* Load choreography order (was an inline style; the CSP allows no style attributes) */
[data-i="1"] { --i: 1; }
[data-i="2"] { --i: 2; }
[data-i="3"] { --i: 3; }
[data-i="4"] { --i: 4; }
[data-i="5"] { --i: 5; }
/* Footer grid spotlight */
.site-footer { --grid-x: 18%; --grid-y: 0%; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--rq-cyan);
  color: var(--rq-night);
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- 4. Layout & type */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .66); }

.section-head { display: grid; gap: var(--s-5); max-width: 760px; }
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  column-gap: var(--s-8);
}
.section-head--split .intro { justify-self: start; }

.display {
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.title {
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.h2 {
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--fg);
  text-wrap: balance;
}
.h3 {
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--fg);
  text-wrap: balance;
}
.h4 { font-weight: 500; font-size: var(--fs-h4); line-height: 1.35; color: var(--fg); }
.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  font-weight: 300;
  color: var(--fg-2);
  max-width: 36em;
  text-wrap: pretty;
}
.intro { font-size: 1.0625rem; line-height: 1.6; color: var(--fg-2); max-width: 38em; text-wrap: pretty; }
.muted { color: var(--fg-2); }

/* ---------------------------------------------------------------- 5. Buttons & links */
.btn {
  --btn-h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--btn-h);
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .005em;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn--sm { --btn-h: 40px; padding: 0 18px; font-size: .875rem; gap: 10px; }
.btn--lg { --btn-h: 58px; padding: 0 34px; font-size: 1.0625rem; gap: 14px; }
/* A primary with a soft cyan halo, for the one call to action a page is built around */
.btn--glow { filter: drop-shadow(0 14px 30px rgba(var(--rq-cyan-rgb), .38)); transition: background-color var(--t-fast) var(--ease), filter var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.btn--glow:hover { filter: drop-shadow(0 18px 38px rgba(var(--rq-cyan-rgb), .55)); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn--glow:hover { transform: none; } }
.btn--block { width: 100%; }

/* Primary: the one chamfered button. Cyan fill, night text (8.5:1). */
.btn--primary {
  background: var(--rq-cyan);
  color: var(--rq-night);
  clip-path: polygon(0 0, calc(100% - var(--cut-m)) 0, 100% var(--cut-m), 100% 100%, var(--cut-m) 100%, 0 calc(100% - var(--cut-m)));
}
.btn--primary:hover { background: var(--rq-cyan-hover); }
.btn--primary:focus-visible { outline: 2px solid var(--rq-night); outline-offset: -6px; }

/* Secondary: square hairline. Never chamfered, so the primary stays singular. */
.btn--secondary {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: var(--radius);
}
.btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--fg); }

.icon-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--t-med) var(--ease);
}
.btn:hover .icon-arrow, .link:hover .icon-arrow, a:hover > .icon-arrow { transform: translateX(3px); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: .9375rem;
  color: var(--accent-text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--t-med) var(--ease);
}
.link:hover { background-size: calc(100% - 24px) 1px; }

/* ---------------------------------------------------------------- 6. Labels, tags, marks */
/* Eyebrow: sans, small caps-style. The default label. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* The parallelogram dot — the cyan blocks above the logo glyphs */
.mark {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 8px;
  background: var(--rq-cyan);
  transform: skewX(var(--slant));
}
.mark--sm { width: 10px; height: 6px; }
.mark--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Meta: mono. Reserved for indices, counts and technical metadata. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.meta--accent { color: var(--accent-text); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);   /* fg-3 on its own tint lands under 4.5:1 at this size */
  background: color-mix(in srgb, var(--fg-3) 14%, transparent);
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}

/* ---------------------------------------------------------------- 7. Frames — the cut
   A chamfered panel with a 1px hairline that follows the diagonals too.
   Set --cut and --frame on the element. */
.cut-frame {
  --cut: var(--cut-l);
  --frame: var(--line);
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cut-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--frame);
  transition: background-color var(--t-slow) var(--ease);
  clip-path: polygon(evenodd,
    0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 0,
    1px 1px, 1px calc(100% - var(--cut) - .41px),
    calc(var(--cut) + .41px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px),
    calc(100% - 1px) calc(var(--cut) + .41px), calc(100% - var(--cut) - .41px) 1px, 1px 1px);
}
.cut-frame > * { position: relative; z-index: 1; }

/* Blueprint grid — layer 2 of the background system, identical on every dark
   surface (the homepage hero is the reference). A radial spotlight, so it goes on
   each band or panel; move it with --grid-x / --grid-y. On a .cut-frame panel,
   ::before is the hairline frame, so the grid moves to ::after. */
.bg-grid { position: relative; isolation: isolate; }
.bg-grid:not(.cut-frame)::before,
.bg-grid.cut-frame::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  pointer-events: none;
  transform: none;
  background-color: transparent;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse var(--grid-w, 70%) var(--grid-h, 65%) at var(--grid-x, 70%) var(--grid-y, 40%), #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse var(--grid-w, 70%) var(--grid-h, 65%) at var(--grid-x, 70%) var(--grid-y, 40%), #000 15%, transparent 72%);
}
/* Atmosphere — layer 4: one purple bloom, never a rainbow */
.bg-atmos { background-image: radial-gradient(60% 55% at var(--atmos-x, 78%) var(--atmos-y, 30%), rgba(var(--rq-purple-rgb), .5), transparent 70%); }

/* ---------------------------------------------------------------- 8. Shared components */

/* Dimension line — from the original pillars page's baseline.
   A technical-drawing rule: end ticks, a hairline broken by its label. */
.dimension {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--fg-3);
}
.dimension-tick { flex: none; width: 1px; height: 12px; background: var(--rq-cyan-line); }
.dimension-line { flex: 1; height: 1px; background: var(--rq-cyan-line); }
.dimension-line--a { transform-origin: right center; }
.dimension-line--b { transform-origin: left center; }
.dimension-label { flex: none; padding-inline: var(--s-4); }
.theme-light .dimension-tick, .theme-light .dimension-line { background: color-mix(in srgb, var(--rq-purple) 30%, transparent); }

/* Process rail — Session → NDA → KB → PoC. Used on both pages. */
.process { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: stage; }
.process::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left center;
}
.process-step { position: relative; padding-inline-end: var(--s-4); }
.process-marker {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 30px;
  background: var(--bg);
}
.process-marker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rq-cyan-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rq-cyan-text) 35%, transparent);
  transform: skewX(var(--slant));
}
.theme-dark .process-marker::before { background: var(--rq-night-2); box-shadow: inset 0 0 0 1px var(--rq-cyan-line); }
.process-marker .num { position: relative; font-size: .875rem; font-weight: 500; color: var(--accent-text); }
.process-step:last-child .process-marker::before { background: var(--rq-cyan); box-shadow: none; }
.process-step:last-child .process-marker .num { color: var(--rq-night); }
.process-step .meta { margin-top: var(--s-5); }
.process-step h3 { margin-top: var(--s-2); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; color: var(--fg); }
.process-step p { margin-top: var(--s-2); font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }

/* Contact list — footer and CTA panel */
.contact-list { display: grid; gap: 10px; font-size: .9375rem; }
.contact-list a { transition: color var(--t-fast) var(--ease); }
.contact-list a:hover { color: var(--rq-cyan); }

/* ---------------------------------------------------------------- 9. Header & navigation */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  height: var(--header-h);
  color: var(--rq-frost);
  background: transparent;
  transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
}
/* Solid once the page has scrolled, or whenever there is no dark hero under it */
.site-header.is-solid,
.site-header--solid {
  background: rgba(var(--rq-night-rgb), .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgba(var(--rq-mist-rgb), .14);
}
.header-bar { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.brand { flex: none; display: block; padding-block: 8px; }
.brand img { width: 150px; height: auto; }

.primary-nav { margin-inline-start: auto; }
.primary-nav ul { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-block: 10px;
  font-size: .9375rem;
  color: var(--rq-mist);
  transition: color var(--t-fast) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease);
}
.nav-link:hover { color: var(--rq-frost); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--rq-frost); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--rq-cyan); height: 2px; }
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
/* Language toggle: the header's blue button, AR on English pages, EN on Arabic ones */
.lang-toggle { min-width: 52px; justify-content: center; font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px 0 14px;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--rq-mist-rgb), .32);
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--rq-frost);
  cursor: pointer;
}
.menu-icon { position: relative; width: 18px; height: 10px; }
.menu-icon::before, .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease), top var(--t-med) var(--ease);
}
.menu-icon::before { top: 0; }
.menu-icon::after { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 4.25px; transform: rotate(-45deg); }

/* Scroll progress — a 1px reading line under the header (pillars page) */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rq-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress { animation: rq-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes rq-progress { to { transform: scaleX(1); } }

/* Mobile navigation — a full-height sheet, not a collapsed desktop menu */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--rq-night);
  color: var(--rq-frost);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mobile-nav-list { display: grid; border-top: 1px solid rgba(var(--rq-mist-rgb), .16); }
.mobile-nav-list a {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
  min-height: 64px;
  padding-block: 18px;
  border-bottom: 1px solid rgba(var(--rq-mist-rgb), .16);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.mobile-nav-list .num { font-size: .75rem; color: var(--rq-silver); }
.mobile-nav-list a[aria-current="page"] { color: var(--rq-cyan); }
.mobile-nav-list a[aria-current="page"] .num { color: var(--rq-cyan); }
.mobile-nav-foot { margin-top: auto; padding-top: var(--s-7); display: grid; gap: var(--s-5); }
.mobile-nav-foot .contact-list { color: var(--rq-mist); }
html.nav-open, html.nav-open body { overflow: hidden; }

@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions { margin-inline-start: auto; }
}
@media (max-width: 560px) {
  :root { --header-h: 64px; }
  .brand img { width: 128px; }
  .header-actions .btn { display: none; }  /* the CTA moves into the sheet */
  .header-actions .btn.lang-toggle { display: inline-flex; --btn-h: 36px; padding: 0 12px; }  /* the language switch stays in the bar */
}
/* No JS: no sheet, so show the links as a simple wrapped row under the bar */
.no-js .menu-toggle, .no-js .mobile-nav { display: none; }
@media (max-width: 1100px) {
  .no-js .site-header { height: auto; }
  .no-js .header-bar { flex-wrap: wrap; height: auto; padding-block: 12px; }
  .no-js .primary-nav { display: block; order: 3; width: 100%; margin: 0; }
  .no-js .primary-nav ul { flex-wrap: wrap; gap: 4px 20px; }
}

/* ---------------------------------------------------------------- 10. Footer */
.site-footer { position: relative; padding-top: var(--s-9); font-size: .9375rem; color: var(--rq-mist); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-8);
}
.footer-brand img { width: 164px; }
.footer-about { margin-top: var(--s-5); max-width: 34ch; line-height: 1.6; }
html[lang="ar"] .footer-about { margin-top: var(--s-5); max-width: 34ch; line-height: 1.6; text-align: justify; direction: rtl; }
.footer-label { margin-bottom: var(--s-4); }
.footer-links { display: grid; gap: 10px; }
.footer-links a { display: inline-flex; gap: 10px; align-items: baseline; transition: color var(--t-fast) var(--ease); }
.footer-links a:hover { color: var(--rq-frost); }
.footer-links .num { font-size: .75rem; color: var(--rq-silver); }
/* Social icons (list: tools/sync_partials.py): one colour, one size, the platforms' own shapes */
.social-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-5); margin-inline-start: -10px; }
.social-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--rq-frost);
  border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.social-link svg { width: 20px; height: 20px; fill: currentColor; }
.social-link:hover, .social-link:focus-visible { color: var(--rq-cyan); background: rgba(var(--rq-cyan-rgb), .08); transform: translateY(-2px); }
.social-link:focus-visible { outline: 2px solid var(--rq-cyan); outline-offset: 1px; }
/* On light surfaces (the Contact page) */
.social-icons--light { margin-top: 0; margin-inline-start: 0; }
.social-icons--light .social-link { color: var(--rq-purple); box-shadow: inset 0 0 0 1px var(--rq-line-strong); }
.social-icons--light .social-link:hover, .social-icons--light .social-link:focus-visible { color: var(--rq-cyan-text); background: var(--rq-cyan-wash); box-shadow: inset 0 0 0 1px var(--rq-cyan-text); }
@media (pointer: coarse), (max-width: 560px) {
  .social-link { width: 44px; height: 44px; }   /* the tap area grows; the icon stays 20px */
}
@media (prefers-reduced-motion: reduce) { .social-link:hover, .social-link:focus-visible { transform: none; } }
/* "Find Us" under "Send us a request": the map on the Contact page */
.footer-find {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  margin-top: 6px;
  padding: 9px 14px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--rq-frost);
  box-shadow: inset 0 0 0 1px var(--rq-cyan-line);
  border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.footer-find svg { width: 15px; height: 15px; color: var(--rq-cyan); }
.contact-list a.footer-find:hover, .footer-find:focus-visible { color: var(--rq-night); background: var(--rq-cyan); box-shadow: inset 0 0 0 1px var(--rq-cyan); }
.footer-find:hover svg, .footer-find:focus-visible svg { color: var(--rq-night); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--rq-silver);
}
.footer-base p:last-child { max-width: 62ch; }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 11. Motion & reveal
   The hidden state exists only once JS has opted in (html.reveal-ready), so
   the page is complete without JS or with reduced motion. */
.reveal-ready [data-reveal] {
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), translate var(--t-med) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(16px); }
.reveal-ready [data-reveal="fade"]:not(.is-revealed) { transform: none; }
.reveal-ready .reveal-instant, .reveal-ready .reveal-instant * { transition: none !important; }

/* Dimension lines draw outward from their label */
.reveal-ready [data-reveal="line"] .dimension-line { transition: transform 900ms var(--ease) var(--reveal-delay, 0ms); }
.reveal-ready [data-reveal="line"] .dimension-label { transition: opacity 600ms var(--ease) calc(var(--reveal-delay, 0ms) + 120ms); }
.reveal-ready [data-reveal="line"] .dimension-tick { transition: opacity 400ms var(--ease) calc(var(--reveal-delay, 0ms) + 380ms); }
.reveal-ready [data-reveal="line"]:not(.is-revealed) { opacity: 1; transform: none; }
.reveal-ready [data-reveal="line"]:not(.is-revealed) .dimension-line { transform: scaleX(0); }
.reveal-ready [data-reveal="line"]:not(.is-revealed) .dimension-label,
.reveal-ready [data-reveal="line"]:not(.is-revealed) .dimension-tick { opacity: 0; }

/* Process rail draws left to right */
.reveal-ready .process[data-reveal]:not(.is-revealed) { opacity: 1; transform: none; }
.reveal-ready .process[data-reveal]::before { transition: transform 1100ms var(--ease) 150ms; }
.reveal-ready .process[data-reveal]:not(.is-revealed)::before { transform: scaleX(0); }
.reveal-ready .process[data-reveal] .process-step { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal-ready .process[data-reveal] .process-step:nth-child(2) { transition-delay: 180ms; }
.reveal-ready .process[data-reveal] .process-step:nth-child(3) { transition-delay: 360ms; }
.reveal-ready .process[data-reveal] .process-step:nth-child(4) { transition-delay: 540ms; }
.reveal-ready .process[data-reveal]:not(.is-revealed) .process-step { opacity: 0; transform: translateY(10px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------- 12. Utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  font-weight: 400;   /* hidden text never makes the browser fetch a bold font */
}
@media (max-width: 900px) {
  .section-head--split { grid-template-columns: 1fr; row-gap: var(--s-5); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
  .process::before { display: none; }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .process-step { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s-4); }
  .process-step .process-marker { grid-row: 1 / span 3; }
  .process-step .meta { margin-top: 4px; }
  .btn { white-space: normal; text-align: center; }
}

/* ---------------------------------------------------------------- 13. Sub-page frame
   Shared by strategy.html and contact.html: a dark intro band under the
   floating header, breadcrumb, load choreography, and the spec list. */
.page-sub .site-header { margin-bottom: calc(-1 * var(--header-h)); }
.page-hero {
  --grid-x: 30%;
  --grid-y: 45%;
  --atmos-x: 22%;
  --atmos-y: 40%;
  position: relative;
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px));
  padding-bottom: clamp(56px, 6vw, 96px);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .06em; color: var(--rq-silver); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; color: rgba(var(--rq-mist-rgb), .4); }
.breadcrumb a { transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--rq-frost); }
.breadcrumb [aria-current] { color: var(--rq-frost); }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-top: clamp(40px, 6vw, 80px);
}
.page-hero-copy { display: grid; gap: var(--s-5); }
.page-hero .title { margin-top: var(--s-2); color: var(--rq-white); }
.page-hero .title span { display: block; }
.page-hero .title .title-2 { color: var(--rq-mist); }
.page-hero .lede { max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.icon-arrow--down { transition: transform var(--t-med) var(--ease); }
.btn:hover .icon-arrow--down { transform: translateY(3px); }

.spec { border-top: 1px solid var(--rq-cyan-line); }
.spec-caption { padding-block: 14px; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}
.spec dt { font-size: 1.0625rem; font-weight: 400; color: var(--rq-frost); }
.spec dd { font-size: .9375rem; line-height: 1.5; color: var(--rq-mist); }

@media (prefers-reduced-motion: no-preference) {
  .hero-in { animation: rq-rise 900ms var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
}
@keyframes rq-rise { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 1100px) {
  .page-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .spec { max-width: 640px; }
}
@media (max-width: 640px) {
  .spec-row { grid-template-columns: 1fr; gap: 6px; }
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- 14. Partner marks & tiers
   Used by the homepage partner grid and the strategy page's solution cards. */
.partner-logo { display: inline-flex; align-items: center; min-height: 40px; }
.partner-logo img { display: block; height: auto; max-height: 28px; max-width: 150px; object-fit: contain; }  /* width comes from the img attribute */
/* Vendor marks too dark to read on dark or purple surfaces sit on a white plate, cut like a tag */
.partner-logo--chip {
  padding: 8px 12px;
  background: var(--rq-white);
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}
/* Homepage partner grid: one plate size for every mark, logo centred, never recoloured */
.partner-logo--plate {
  justify-content: center;
  width: 160px;
  height: 56px;
  padding: 10px 12px;
  background: var(--rq-white);
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}
.partner-logo--plate img { max-width: 100%; max-height: 100%; }
.tier {
  flex: none;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}
.tier--exclusive { background: var(--rq-cyan); color: var(--rq-night); }
.tier--gold { background: rgba(255, 255, 255, .92); color: var(--rq-purple); }
.tier--partner { background: rgba(255, 255, 255, .14); color: var(--rq-white); }
.tier--service { background: rgba(var(--rq-cyan-rgb), .16); color: var(--rq-cyan); box-shadow: inset 0 0 0 1px rgba(var(--rq-cyan-rgb), .5); }
.footer-links--codes a { display: grid; grid-template-columns: 56px 1fr; }

/* ---------------------------------------------------------------- 15. Arabic / right-to-left
   ar/*.html set lang="ar" dir="rtl". Grid, flex and the logical properties used throughout flip
   on their own; these rules cover the rest. The hexagon shield is never mirrored. */
html[lang="ar"] {
  /* DIN Next Arabic carries Latin letters and digits too; IBM Plex Sans only covers anything it lacks */
  --font-sans: 'DIN Next Arabic', 'IBM Plex Sans', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
  /* Codes and labels keep the mono design (RPP, P/01, 01): Arabic words in them use DIN Next Arabic */
  --font-mono: 'IBM Plex Mono', 'DIN Next Arabic', ui-monospace, Consolas, monospace;
}
/* Letter-spacing breaks the joins between Arabic letters */
html[lang="ar"] body * { letter-spacing: 0 !important; }
/* Arabic needs more room above and below than tight Latin display settings allow */
html[lang="ar"] :is(.display, .title, .h2, .h3) { line-height: 1.3; }
html[lang="ar"] body { line-height: 1.75; }
html[lang="ar"] .lang-toggle { font-family: var(--font-mono); }
/* Latin runs (phone numbers, e-mail, codes) keep their own direction inside Arabic text */
[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .skip-link { left: auto; right: 12px; }
/* Arrows point the way the reader reads; down arrows stay as they are */
[dir="rtl"] .icon-arrow:not(.icon-arrow--down) { scale: -1 1; }
/* Lines that draw in, start from the reading edge */
[dir="rtl"] .process::before, [dir="rtl"] .nav-link::after, [dir="rtl"] .scroll-progress { transform-origin: right center; }
[dir="rtl"] .dimension-line--a { transform-origin: left center; }
[dir="rtl"] .dimension-line--b { transform-origin: right center; }

/* ---------------------------------------------------------------- 16. Round 2 (Oct 2026): shared pieces */
/* Check list: a cyan tick before each item (used by About, Training) */
.check-list { display: grid; gap: 12px; }
.check-list li { position: relative; padding-inline-start: 28px; line-height: 1.6; color: var(--fg-2); }
.check-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .45em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}

/* Image viewer: full screen, arrows, swipe, keyboard, counter (assets/js/media.js) */
html.lb-open { overflow: hidden; }
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--rq-frost);
  background: rgba(6, 5, 22, .95);
}
.lightbox::backdrop { background: rgba(6, 5, 22, .6); }
.lightbox[open] { display: block; animation: rq-lb-in 260ms var(--ease); }
@keyframes rq-lb-in { from { opacity: 0; } to { opacity: 1; } }
/* The whole image always fits: one grid cell exactly the size of the free area (minmax(0, 1fr) keeps a tall
   certificate from stretching the row), and the image is capped by both that cell and the viewport,
   keeping its proportions, centred. Portrait and landscape, desktop and phone. */
.lightbox { --lb-pad-y: clamp(64px, 9vh, 96px); --lb-pad-x: clamp(16px, 8vw, 120px); --lb-pad-b: var(--lb-pad-y); }
.lightbox-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: var(--lb-pad-y) var(--lb-pad-x) var(--lb-pad-b);
  touch-action: pan-y;
}
.lightbox-img {
  display: block;
  max-width: min(100%, calc(100vw - 2 * var(--lb-pad-x)));
  max-height: min(100%, calc(100dvh - var(--lb-pad-y) - var(--lb-pad-b)));
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 220ms var(--ease), transform 300ms var(--ease);
}
/* --lb-dir: 1 when the new image comes in from the right, -1 from the left (set per move, so RTL works) */
.lightbox-stage.is-out .lightbox-img { opacity: 0; transform: translateX(calc(var(--lb-dir, 1) * -32px)); }
.lightbox-stage.is-in .lightbox-img { opacity: 0; transform: translateX(calc(var(--lb-dir, 1) * 32px)); transition: none; }
.lightbox-count {
  position: absolute;
  top: 26px;
  inset-inline-start: 26px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--rq-mist);
  unicode-bidi: isolate;
}
.lightbox-btn, .lightbox-close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  color: var(--rq-frost);
  background: rgba(var(--rq-night2-rgb), .72);
  box-shadow: inset 0 0 0 1px rgba(var(--rq-mist-rgb), .28);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lightbox-btn { top: 50%; translate: 0 -50%; clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s))); }
.lightbox-prev { inset-inline-start: clamp(10px, 2vw, 32px); }
.lightbox-next { inset-inline-end: clamp(10px, 2vw, 32px); }
.lightbox-close { top: 16px; inset-inline-end: 16px; width: 48px; height: 48px; border-radius: var(--radius); }
.lightbox-btn svg, .lightbox-close svg { width: 22px; height: 22px; }
.lightbox-btn:hover, .lightbox-close:hover { color: var(--rq-night); background: var(--rq-cyan); }
.lightbox :focus-visible { outline-color: var(--rq-cyan); }
[dir="rtl"] .lightbox-btn svg { scale: -1 1; }
.lightbox[data-single] .lightbox-btn, .lightbox[data-single] .lightbox-count { display: none; }
@media (max-width: 560px) {
  .lightbox { --lb-pad-y: 72px; --lb-pad-x: 10px; --lb-pad-b: 96px; }
  .lightbox-btn { top: auto; bottom: 22px; translate: none; width: 48px; height: 48px; }
}
/* Phones held sideways: little height, so slimmer top and bottom margins */
@media (max-height: 500px) and (min-width: 561px) {
  .lightbox { --lb-pad-y: 52px; --lb-pad-x: 84px; }
  .lightbox-count { top: 18px; }
  .lightbox-close { top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
  .lightbox-img { transition: none; }
}

/* 404: the hexagon shield with one pillar missing */
.not-found { min-height: min(100vh, 860px); display: grid; align-items: center; }
.nf-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8); align-items: center; }
.nf-visual { display: grid; place-items: center; }
.nf-hex { width: min(100%, 420px); overflow: visible; }
.nf-scope { fill: none; stroke: rgba(var(--rq-mist-rgb), .22); stroke-width: 1; stroke-dasharray: 3 6; }
.nf-ring { fill: rgba(var(--rq-purple-rgb), .22); stroke: var(--rq-cyan); stroke-width: 1.5; }
.nf-spokes line { stroke: rgba(var(--rq-cyan-rgb), .35); stroke-width: 1; stroke-dasharray: 2 5; }
.nf-nodes circle { fill: var(--rq-night); stroke: var(--rq-cyan); stroke-width: 1.5; }
.nf-missing { fill: none; stroke: rgba(var(--rq-cyan-rgb), .8); stroke-width: 1.5; stroke-dasharray: 3 4; animation: rq-nf 2.4s ease-in-out infinite; }
.nf-code { font-family: var(--font-mono); font-size: 54px; font-weight: 500; letter-spacing: .06em; fill: var(--rq-frost); }
@keyframes rq-nf { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
[dir="rtl"] .nf-hex { direction: ltr; }
@media (max-width: 900px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); }
  .nf-visual { order: -1; }
  .nf-hex { width: min(64%, 280px); }
}
@media (prefers-reduced-motion: reduce) { .nf-missing { animation: none; } }

/* ---------------------------------------------------------------- 17. Motion update (Oct 2026): assets/js/motion.js
   Only transform, translate and opacity move; nothing changes the layout. html.motion-ok is set only when the
   visitor has not asked for reduced motion. */
/* Cards lift a little on hover (the separate translate property, so it never fights the scroll reveal's transform) */
.motion-ok :is(.partner-card, .train-card, .about-card, .tile, .video-card, .podcast-card, .pblock):hover { translate: 0 -4px; }
.motion-ok :is(.partner-card, .train-card, .about-card, .tile, .video-card, .podcast-card, .pblock):not([data-reveal]) { transition: translate var(--t-med) var(--ease); }

/* The hexagon shields assemble when they come into view: ring, spokes, shield, nodes, then labels */
.motion-ok .sh-ready .sh-part { opacity: 0; transform: scale(.72); transform-box: fill-box; transform-origin: center; }
.motion-ok .sh-ready.is-assembled .sh-part {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
  transition-delay: min(calc(var(--k) * 45ms), 1400ms);
}
/* Hover: the homepage shield's nodes swell and its shield brightens; a Strategy pillar's marker grows */
.motion-ok .tile-hex :is(.th-node, .th-shield) { transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease); }
.motion-ok .tile--feature:hover .tile-hex .th-node { transform: scale(1.4); }
.motion-ok .tile--feature:hover .tile-hex .th-shield { transform: scale(1.05); }
.motion-ok .fw .fw-marker { transform-box: fill-box; transform-origin: center; transition: transform 400ms var(--ease), fill var(--t-med) var(--ease), stroke var(--t-med) var(--ease); }
.motion-ok .fw-node:is(:hover, :focus-visible, .is-linked) .fw-marker { transform: scale(1.3); }

/* 404: the approved abstract still (Higgsfield): its ring of nodes framing the shield, breathing very slowly.
   Anchored to the shield's own box, not the section, so the ring's centre is the shield's centre at every size.
   In the still (1344 x 752) the ring is centred at 53.6% / 44.7% and spans 26.4% of its width. The layer is a
   square 1.25x the shield; the still is drawn 3.6x the shield's width (288% of the layer), so the ring sits just outside the dashed
   hexagon; 55.5% / 36% put the ring's centre on the square's centre. Mirrored (both languages) so the ring's
   faded side meets the shield's missing node at the upper left. */
.nf-visual { position: relative; --nf-w: min(100%, 420px); }
.nf-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(var(--nf-w) * 1.25);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: scaleX(-1);
  /* 288% of this layer = 3.6x the shield (the layer is 1.25x the shield). A percentage of the layer itself, so the
     ring stays centred at every size (a percentage of the shield column would be measured against this layer). */
  background: url("../img/motion/404-bg.webp") 55.5% 36% / 288% auto no-repeat;
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%);
  mask-image: radial-gradient(circle, #000 52%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 900px) { .nf-visual { --nf-w: min(64%, 280px); } }
.motion-ok .nf-visual::before { animation: rq-breathe 18s ease-in-out infinite alternate; }
@keyframes rq-breathe { from { scale: 1; opacity: .85; } to { scale: 1.06; opacity: 1; } }