/* Corplift landing. Tokens from brand/CorpLift-Brand-Identity-2026.pdf, written out in brand/Brand-Rules-2026.md */

/* One typeface for Arabic, Latin and numerals: Thmanyah Sans, when it is installed locally
   (its licence forbids hosting the files). Visitors without it get IBM Plex Sans Arabic,
   and Manrope for the Latin letters and digits that file does not carry (a subset of exactly the range below,
   cut from tools/fonts/manrope-var.ttf: 16 KB instead of 161). */
@font-face { font-family: "CL Arabic"; font-weight: 400; font-display: swap;
  src: local("thmanyahsans-Regular"), local("thmanyah sans Regular"), url("../fonts/plex-arabic-400.woff2?v=9f1801b4f3") format("woff2"); }
@font-face { font-family: "CL Arabic"; font-weight: 500; font-display: swap;
  src: local("thmanyahsans-Medium"), local("thmanyah sans Medium"), url("../fonts/plex-arabic-500.woff2?v=cf5bfd34cf") format("woff2"); }
@font-face { font-family: "CL Arabic"; font-weight: 700; font-display: swap;
  src: local("thmanyahsans-Bold"), local("thmanyah sans Bold"), url("../fonts/plex-arabic-700.woff2?v=d26040930e") format("woff2"); }
@font-face { font-family: "CL Arabic"; font-weight: 900; font-display: swap;
  src: local("thmanyahsans-Black"), local("thmanyah sans Black"), url("../fonts/plex-arabic-700.woff2?v=d26040930e") format("woff2"); }
@font-face { font-family: "CL Latin Fallback"; font-weight: 400 800; font-display: swap; size-adjust: 92%;
  src: url("../fonts/manrope-latin-var.woff2?v=dce2f61ac9") format("woff2");
  unicode-range: U+0021-007E, U+00AB, U+00B7, U+00BB; }

:root {
  /* black, white and blue carry equal weight */
  --black: #000000;
  --white: #FFFFFF;
  --blue: #2765ED;          /* Lift blue: buttons, accents on white and light */
  --blue-start: #3B82F6;    /* gradient start, and the accent on black */
  --blue-end: #1447E5;      /* gradient end */
  --blue-soft: #8FB8FF;     /* highlight on black */
  --on-blue: #E6EEFF;       /* text on blue */
  --tint: #F3F6FC;          /* the light surface */
  --ink: #0B0B0E;           /* dark card */
  --ink-start: #14161C;
  --grey: #5C5C5C;          /* text on white and light */
  --muted: #8A8D98;         /* muted text */
  --on-black: #C4C6CE;      /* text on black */
  --line: #E6E8EE;          /* dividers on white */
  --line-tint: #D9DFEC;     /* dividers on the light surface */
  --badge: #ECEFF5;

  --grad-blue: linear-gradient(135deg, #3B82F6, #1447E5);
  --grad-ink: linear-gradient(180deg, #14161C, #0B0B0E);
  --glow: rgba(39, 101, 237, .42);              /* the blue glow of the black surface */
  --halo: rgba(143, 184, 255, .38);             /* the blue halo of the white and light surfaces */
  /* glass: the card material of the black and the blue surfaces. Fill and edge are measured from the guide's own pages:
     on black a white of about 7.5% under a 15% edge; on blue it reads lighter, about 18% under a 32% edge. */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .065));
  --glass-line: rgba(255, 255, 255, .15);
  --glass-blue: linear-gradient(180deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .11));
  --glass-blue-line: rgba(255, 255, 255, .32);
  --glass-blur: blur(18px) saturate(1.35);
  /* on the white surface glass is frosted: a milky white over whatever colour lies behind it */
  --glass-light: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .38));
  --glass-light-line: rgba(255, 255, 255, .95);
  --shadow-card: 0 16px 44px rgba(39, 101, 237, .13);
  --shadow-blue: 0 24px 60px -14px rgba(39, 101, 237, .38);
  --radius: 28px;           /* every card */

  --font: "CL Arabic", "CL Latin Fallback", "IBM Plex Sans Arabic", system-ui, sans-serif;

  --margin: clamp(20px, 5.5vw, 80px);
  --maxw: 1280px;
  --nav-h: 72px;
  --vh: 1vh;
  --vw: 1vw;
  --tan22: 0.40403;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.22, .9, .24, 1);
  --ease-kash: cubic-bezier(.62, 0, .18, 1);
  --ease-kash-back: cubic-bezier(.82, 0, .38, 1);   /* the same curve, played backwards */
  --scene-len: 1.7;          /* viewport-heights the chapter stays pinned; read by site.js */
  /* the Ant mark: a parallelogram on the 22° axis, ends cut at 67° */
  --ant: polygon(10.5% 100%, 80% 44.2%, 89.5% 0, 20% 55.8%);
}
@media (max-width: 760px) { :root { --nav-h: 64px; } }
@media (max-width: 640px) { :root { --radius: 22px; } }
@media (max-width: 899px), (max-aspect-ratio: 9/10) { :root { --scene-len: 1.5; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); scrollbar-color: var(--muted) transparent; }
body {
  overflow-x: clip;
  margin: 0; background: var(--black); color: var(--black);
  font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.7;
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, canvas, video { display: block; }
a { color: inherit; }
bdi, .en { unicode-bidi: isolate; direction: ltr; }
strong { font-weight: 700; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
::selection { background: var(--blue); color: var(--white); }
[data-theme="blue"] ::selection { background: var(--white); color: var(--blue); }
.wrap { width: min(100% - 2 * var(--margin), var(--maxw)); margin-inline: auto; }

.skip { position: fixed; top: 12px; right: 12px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--blue); color: var(--white); text-decoration: none; font-weight: 700; transform: translateY(-160%); }
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
[data-theme="dark"] :focus-visible, [data-theme="hero"] :focus-visible, .nav[data-mode="hero"] :focus-visible, .nav[data-mode="dark"] :focus-visible { outline-color: var(--blue-soft); }
[data-theme="blue"] :focus-visible, .nav[data-mode="blue"] :focus-visible { outline-color: var(--white); }

/* ---------- The kashida: the heading's one expressive gesture, set in motion ----------
   A word is split at the joint. Zero-width joiners keep both letters in their joined forms,
   and a clipped strip of tatweel strokes between them opens and closes. At rest the word reads normally.
   It closes the way it opened, in reverse: the same curve mirrored, over nearly the same time. */
.kw { white-space: nowrap; }
.kx { --k: 0; display: inline-block; width: calc(var(--k) * 1em); margin-inline: -0.012em; vertical-align: baseline;
      white-space: nowrap; overflow-x: clip; overflow-y: visible; transition: width 1.1s var(--ease-kash-back); }
.kx > span { display: inline-block; }
.k-on .kx { --k: var(--kt); transition: width 1.25s var(--ease-kash); }
/* Lines are measured at full stretch and then held, so a stretching word never pushes itself onto the next line. */
.k-measure .kx, .k-still .kx { transition: none !important; }
.k-measure .kx { --k: var(--kt) !important; }
.k-measure .kword, .k-measure .kw { transform: none !important; }
.k-lock { white-space: nowrap; text-wrap: nowrap; }
/* Until common.js holds an inner page's heading, the stretch is kept as space after the word, so the first paint
   already breaks the lines where the open kashida will, and nothing moves when they are held. */
.js [data-kash] > span:not(.k-lock):not(.k-measure) .kw { margin-inline-end: calc(var(--kt) * 1em); }
html:not(.js) .kx { --k: var(--kt); }

/* ---------- Buttons & links: pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px;
  font: 700 17px/1 var(--font); text-decoration: none; border: 1.5px solid transparent; border-radius: 999px;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--blue-end); }
.btn__ant { width: 26px; height: 13px; fill: currentColor; transform: rotate(64deg); transition: transform .42s var(--ease-snap); }
.btn--primary:hover .btn__ant, .btn--primary:focus-visible .btn__ant { transform: rotate(0deg); }
.btn:active { transform: translateY(1px); }
/* the secondary button on black is a glass pill */
.btn--ghost { color: var(--white); border-width: 1px; border-color: var(--glass-line); background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .17); }

/* on blue: a glass pill; on white: an outlined pill */
.btn--glass { color: var(--white); border-width: 1px; border-color: var(--glass-blue-line); background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn--glass:hover, .btn--glass:focus-visible { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); }
.btn--line { color: var(--black); border-color: rgba(0, 0, 0, .16); background: transparent; }
.btn--line:hover, .btn--line:focus-visible { border-color: var(--black); }

.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.link__arrow { display: inline-block; transition: transform .3s var(--ease-out); }
a:hover > .link__arrow, a:focus-visible > .link__arrow { transform: translateX(-6px); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); color: var(--white); transition: background-color .3s, color .3s, box-shadow .3s; }
.nav__inner { height: 100%; width: min(100% - 2 * var(--margin), var(--maxw)); margin-inline: auto; display: flex; align-items: center; gap: 40px; }
.nav__brand { display: block; padding: 10px 0; margin-inline-end: auto; }
.logo { width: 132px; height: auto; aspect-ratio: 1002 / 244.21; fill: currentColor; }
/* When the mouse arrives on the bar's logo, the symbol's three arrows lift once along its own 22° line, the lowest first,
   and settle back into the lockup. Only the symbol moves, and only along that line: nothing turns, stretches or changes
   colour. common.js adds .is-lift and takes it off when the last arrow lands, so a passing mouse never cuts it short. */
@keyframes logo-lift {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  42% { transform: translate(9px, -22px); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  78% { transform: translate(-.6px, 1.5px); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { transform: none; }
}
.nav__brand .logo { overflow: visible; }           /* the highest arrow rises past the logo's own box */
.nav__brand.is-lift .logo__sym use { animation: logo-lift .62s both; }
.nav__brand.is-lift .logo__sym use + use { animation-delay: .07s; }
.nav__brand.is-lift .logo__sym use + use + use { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) { .nav__brand.is-lift .logo__sym use { animation: none; } }
.nav__links { display: flex; gap: 32px; }
.nav__links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 500; text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav__links a:hover, .nav__links a.is-current { opacity: 1; }
/* the section pointer: one blue mark beside the section you are in */
.nav__ant { width: 16px; height: 8px; fill: var(--blue-start); opacity: 0; transform: translateX(6px) rotate(64deg); transition: transform .6s var(--ease-snap), opacity .3s; }
.nav__links a.is-current .nav__ant { opacity: 1; transform: none; }
.btn--nav { min-height: 44px; padding: 0 20px; font-size: 15px; background: var(--blue); color: var(--white);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), opacity .35s var(--ease-out), visibility .35s, transform .2s var(--ease-out); }
.btn--nav:hover, .btn--nav:focus-visible { background: var(--blue-end); }
.nav[data-mode="dark"] { background: var(--black); }
.nav[data-mode="light"] { background: var(--white); color: var(--black); box-shadow: inset 0 -1px 0 var(--line); }
.nav[data-mode="light"] .nav__ant { fill: var(--blue); }
.nav[data-mode="blue"] { background: var(--blue); }
.nav[data-mode="blue"] .nav__ant { fill: var(--white); }
.nav[data-mode="blue"] .btn--nav { background: var(--white); color: var(--blue); }
.nav[data-mode="blue"] .btn--nav:hover { background: var(--on-blue); }
.js .nav[data-mode="hero"] .btn--nav { opacity: 0; visibility: hidden; }
.nav__brand { transition: opacity .4s var(--ease-out), visibility .4s; }
.js .nav[data-mode="hero"] .nav__brand { opacity: 0; visibility: hidden; }
.js .nav { opacity: 0; animation: fade-in .8s .15s var(--ease-out) forwards; }
/* While a section arrives on the 22° line the bar does not switch colour all at once: a twin of the bar, in the arriving
   section's colours, is cut on that same line and shows only where the section is already under it (site.js moves the cut). */
.nav--cut { z-index: 51; pointer-events: none; visibility: hidden; }
.nav--cut.is-on { visibility: visible; }
.js .nav--cut { opacity: 1; animation: none; }
.nav.is-cutting, .nav.is-cutting *, .nav--cut, .nav--cut * { transition: none; }
@media (max-width: 960px) { .nav__links { display: none; } }
@media (max-width: 760px) { .logo { width: 112px; } .nav__inner { gap: 16px; } .btn--nav { font-size: 14px; padding: 0 16px; white-space: nowrap; } }
@media (max-width: 380px) { .logo { width: 104px; } .btn--nav { font-size: 13px; padding: 0 13px; } }

/* ---------- The 22° sheet: sections that arrive on the brand axis ---------- */
/* A glow never meets an edge. Every halo is a pool inside its own section that fades out at least 40px before any
   boundary: below the 22° line of a sheet, above the wedge the next sheet lays over the bottom of a section, and clear of
   the straight edges too. So a divider always cuts across plain surface, never through light. */
/* Only the section's surface (--surface, on a layer of its own) is cut on the line. The section itself is never
   clipped, so what lives inside it (the pinned stage, the canvases, the glass) is composited the ordinary way. */
.sheet { position: relative; z-index: 2; --wedge: calc(var(--vw) * 100 * var(--tan22)); }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--surface);
  clip-path: polygon(0 var(--wedge), 100% 0, 100% 100%, 0 100%); }

/* ---------- The seams: each boundary is a row of Ant marks, drawn on one thin canvas (site.js, Seams) ----------
   The box is exactly as wide as the page and clips the strip, so a seam can never widen the page; the canvas is its own
   layer, so drawing it never repaints the section behind. */
.seam { position: absolute; left: 0; right: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.seam canvas { position: absolute; left: 0; will-change: transform; }

.sec-head { display: grid; gap: 20px; max-width: 900px; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-title { font-weight: 900; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.3; text-wrap: balance; }
.sec-title--display { font-size: clamp(50px, 6.4vw, 92px); line-height: 1.3; }
.sec-lede { font-size: clamp(18px, 1.56vw, 22.5px); line-height: 1.7; color: var(--grey); max-width: 36em; }
.btn--light { background: var(--white); color: var(--blue); }
.btn--light:hover, .btn--light:focus-visible { background: var(--on-blue); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fade-in { to { opacity: 1; } }

/* ---------- The bar's tools: the other language, light or dark, and the menu on narrow screens ---------- */
.nav__tools { display: flex; align-items: center; gap: 6px; }
.nav__lang, .nav__scheme { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: inherit;
  font: 700 14px/1 var(--font); text-decoration: none; cursor: pointer; opacity: .82; transition: opacity .2s, background-color .2s; }
.nav__lang:hover, .nav__lang:focus-visible, .nav__scheme:hover, .nav__scheme:focus-visible { opacity: 1; background: rgba(127, 127, 127, .16); }
.nav__scheme { padding: 0; width: 44px; }
.nav__scheme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav__scheme .nav__moon { fill: currentColor; stroke: none; }
/* the button shows where it would take you */
[data-scheme="dark"] .nav__moon, [data-scheme="light"] .nav__sun, html:not([data-scheme]) .nav__sun { display: none; }
.btn--nav { margin-inline-start: 6px; }
.nav__menu { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.nav__menu span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease-snap); }
.nav__menu span:first-child { top: 17px; } .nav__menu span:last-child { top: 25px; }
.nav.is-open .nav__menu span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav__menu { display: inline-block; }
  /* narrow: the links open as a panel under the bar */
  .nav__links { position: fixed; top: var(--nav-h); inset-inline: 0; display: grid; gap: 0; padding: 8px var(--margin) 22px; background: var(--black); color: var(--white);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility .3s; }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; }
  .nav__links a { min-height: 54px; font-size: 18px; opacity: .9; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .nav__links .nav__ant { opacity: 1; transform: none; }
  .js .nav[data-mode="hero"] .btn--nav { display: none; }
}
@media (max-width: 760px) { .btn--nav { display: none; } .nav__tools { gap: 2px; } .nav__inner { gap: 10px; } }

/* ---------- The footer: the brand, every page, and how to reach us ---------- */
.foot { position: relative; z-index: 2; background: var(--black); color: var(--on-black); font-size: 15px; }
.foot a { text-decoration: none; transition: color .2s; }
.foot a:hover, .foot a:focus-visible { color: var(--white); }
.foot__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 80px); padding: clamp(56px, 6vw, 88px) 0 clamp(36px, 4vw, 52px); border-top: 1px solid rgba(255, 255, 255, .08); }
.foot__logo { width: 150px; fill: var(--white); color: var(--white); }
.foot__tag { margin-top: 18px; max-width: 26em; line-height: 1.75; }
.foot__reach { margin-top: 18px; display: grid; }
.foot__reach a, .foot__reach span { display: inline-flex; align-items: center; min-height: 40px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot__h { margin-bottom: 8px; font-weight: 700; font-size: 15px; color: var(--white); }
.foot__col a { display: inline-flex; align-items: center; min-height: 40px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; padding: 18px 0 30px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 14px; }
.foot__social { display: flex; gap: 18px; margin-inline-start: auto; }
.foot__social a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 899px) { .foot__top { grid-template-columns: 1fr; } .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot__social { margin-inline-start: 0; } }

/* ---------- Dark: the light surfaces turn to the brand's black, the dark ones stay as they are ----------
   The site follows the visitor's choice (the moon in the bar), else the system's (an inline script sets data-scheme
   before the first paint). Only what sits on white or on the light surface changes; black, blue and the cards keep. */
:root[data-scheme="dark"] { color-scheme: dark;
  --paper: #050608; --paper-2: #0A0D14; --card: #10131B; --text: #F3F5FA; --text-2: #A3A9B8;
  --line: rgba(255, 255, 255, .1); --line-tint: rgba(255, 255, 255, .12); --badge: rgba(255, 255, 255, .08);
  --tint: #0A0D14; --halo: rgba(39, 101, 237, .12); --shadow-card: 0 18px 48px rgba(0, 0, 0, .5);
  /* a blue card on black: a deep shadow with a breath of blue under it, not a neon spill */
  --shadow-blue: 0 26px 56px -24px rgba(39, 101, 237, .34), 0 18px 40px -14px rgba(0, 0, 0, .6);
  --glass-light: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035)); --glass-light-line: rgba(255, 255, 255, .12); }
[data-scheme="dark"] .nav[data-mode="light"] { background: #07080B; color: var(--white); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
[data-scheme="dark"] .nav[data-mode="light"] .nav__ant { fill: var(--blue-start); }
[data-scheme="dark"] .sec-lede { color: var(--text-2); }
[data-scheme="dark"] .btn--line { color: var(--white); border-color: rgba(255, 255, 255, .22); }
[data-scheme="dark"] .btn--line:hover, [data-scheme="dark"] .btn--line:focus-visible { border-color: var(--white); }
[data-scheme="dark"] :focus-visible { outline-color: var(--blue-soft); }
@media (prefers-reduced-motion: reduce) { .nav__links, .nav__menu span { transition: none; } }