/* generated by build.py from Brand/app/tokens.json + design.md §10.1: do not edit */
:root {
  --brand-blue: #1a6ef5;
  --brand-yellow: #ffbe0a;
  --brand-ink: #0f172a;
  --brand-sky: #93c5fd;
  --brand-grey-light: #d1d2d3;
  --brand-grey-dark: #5f6062;
  --brand-mist: #f1f5f9;
  --brand-cream: #fef3c7;
  --white: #ffffff;
  --text-2: #334155;
  --text-3: #64748b;
  --line: #dbe3ee;
  --brand-coral: #ff5c5c;
  --page: #f4f7fb;
  --raised: #edf2f9;
  --hover: #e0e8f3;
  --text: var(--brand-ink);
  --accent: #1259cf;
  --accent-fill: var(--brand-blue);
  --on-accent-fill: #ffffff;
  --on-fill: var(--brand-ink);
  --warn: #8a5b00;
  --bad: #b32218;
  --good: #0d6b49;
  --band-accent: #dfeafd;
  --band-good: #d9efe5;
  --band-bad: #fce5e3;
  --t-micro: 14px;
  --t-small: 15px;
  --t-body: 17px;
  --t-lead: 19px;
  --t-title: 24px;
  --t-display: 34px;
  --measure-page: 82rem;
  --r-chip: 6px;
  --r-control: 12px;
  --r-card: 16px;
  --r-panel: 24px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 48px;
  --font-arabic: "Graphik Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-latin: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
}
/* EduArabia site. The tokens above this line are generated by build.py (Brand/app/tokens.json + design.md §10.1);
   everything below uses them and never writes a brand value of its own. RTL comes from logical properties; the few
   things that must mirror (the pattern field, arrows) read --dir. */

@font-face { font-family: "Graphik Arabic"; src: url(/assets/fonts/graphik-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphik Arabic"; src: url(/assets/fonts/graphik-arabic-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Graphik Arabic"; src: url(/assets/fonts/graphik-arabic-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(/assets/fonts/poppins-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(/assets/fonts/poppins-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --dir: 1;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 450ms; --dur-4: 700ms;   /* every move takes one of four times */
  --step: 70ms; --step-fast: 40ms; --step-slow: 90ms;               /* «one after another», three paces */
  --nudge: 3px; --lift: 4px;                                          /* an arrow's nudge, a card's lift */
  --head-gap: 40px;                                                   /* a section heading's breath before its content */
  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(64px, 9vw, 128px);
  --shadow-1: 0 1px 2px rgb(15 23 42 / .05), 0 12px 32px -16px rgb(15 23 42 / .22);
  --shadow-2: 0 2px 4px rgb(15 23 42 / .05), 0 28px 56px -28px rgb(15 23 42 / .32);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.5M8.75 3.75 13 8l-4.25 4.25' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  interpolate-size: allow-keywords;
}
[dir="rtl"] { --dir: -1; }

/* ---------------------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.vh { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section[tabindex="-1"]:focus { outline: none; }               /* focus moved there by a chapter link */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--white); color: var(--text); font-size: var(--t-body); line-height: 1.65; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:lang(ar) { font-family: var(--font-arabic); }
:lang(en) { font-family: var(--font-latin); }
html:lang(ar) body { line-height: 1.8; }
img, svg, canvas { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
::selection { background: var(--band-accent); color: var(--text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-footer :focus-visible, .ai :focus-visible, .case-teaser:focus-visible { outline-color: var(--brand-yellow); }

.skip { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 100; padding: 12px 18px;
  background: var(--brand-ink); color: var(--white); border-radius: var(--r-control); text-decoration: none; font-weight: 600; }
.skip:focus { inset-block-start: 12px; }

/* ---------------------------------------------------------------------------------------------------- type */
.display-1 { font-size: clamp(2.375rem, 1.3rem + 4.2vw, 5.25rem); line-height: 1.04; font-weight: 600; letter-spacing: -.032em;
  text-wrap: balance; max-inline-size: 15em; }
.display-1:lang(ar) { font-size: clamp(2.125rem, 1.2rem + 3.7vw, 4.5rem); line-height: 1.24; letter-spacing: 0; }
.display-2 { font-size: clamp(1.875rem, 1.2rem + 2.5vw, 3.375rem); line-height: 1.1; font-weight: 600; letter-spacing: -.028em;
  text-wrap: balance; max-inline-size: 17em; }
.display-2:lang(ar) { font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem); line-height: 1.32; letter-spacing: 0; }
.display-3 { font-size: clamp(1.375rem, 1.05rem + 1.2vw, 2.125rem); line-height: 1.22; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.display-3:lang(ar) { line-height: 1.45; letter-spacing: 0; }
.h2 { font-size: clamp(1.375rem, 1.15rem + .75vw, 1.875rem); line-height: 1.25; font-weight: 600; letter-spacing: -.018em; text-wrap: balance; }
.h2:lang(ar) { line-height: 1.5; letter-spacing: 0; }
.h3 { font-size: 1.1875rem; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.h3:lang(ar) { line-height: 1.55; letter-spacing: 0; }
.lead { font-size: clamp(1.0625rem, .98rem + .4vw, 1.3125rem); line-height: 1.6; color: var(--text-2); max-inline-size: 32em; }
.lead:lang(ar) { line-height: 1.85; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-block-end: 18px; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.eyebrow:lang(ar) { font-size: var(--t-small); letter-spacing: 0; text-transform: none; }
.eyebrow::before { content: ""; flex: none; inline-size: 9px; block-size: 9px; border-radius: 2px; background: var(--brand-yellow); }
/* the home eyebrow is a sentence (24 Oct 2026): in English it is written like the Arabic one, and its square
   travels with the first word, so a wrapped line never leaves the square alone at the edge */
.hero__center .eyebrow { display: block; }
.hero__center .eyebrow::before { display: inline-block; vertical-align: middle; margin-inline-end: 10px; }
.hero__center .eyebrow:lang(en) { font-size: var(--t-small); letter-spacing: 0; text-transform: none; }
.display-hero + .lead, .display-1 + .lead, .display-2 + .lead { margin-block-start: 20px; }
.link { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; color: var(--accent); }

/* ---------------------------------------------------------------------------------------------------- layout */
.wrap { inline-size: 100%; max-inline-size: calc(var(--measure-page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-inline-size: calc(50rem + 2 * var(--gutter)); }
.section { padding-block: calc(var(--section) / 2); }
.pick, .story, .close, .ai { padding-block: calc(var(--section) * .8); }
.pick, .story, .close { background: var(--page); }   /* the questions sit on white: one change of ground before the close, not three */
.more { margin-block-start: 36px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 36px; }

/* ---------------------------------------------------------------------------------------------------- buttons */
.btn { --bg: var(--accent-fill); --fg: var(--on-accent-fill); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 48px; padding: 10px 22px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--bg); color: var(--fg);
  font-size: var(--t-small); font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn--primary:hover { --bg: var(--accent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--ghost { --bg: transparent; --fg: var(--text); border-color: var(--line); }
.btn--ghost:hover { --bg: var(--raised); border-color: var(--hover); }
.btn--light { --bg: var(--white); --fg: var(--brand-ink); }
.btn--light:hover { --bg: var(--brand-mist); }
.btn__arrow, .card__go::before, .case-row::after { content: ""; flex: none; inline-size: 16px; block-size: 16px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transform: scaleX(var(--dir)); transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow { transform: scaleX(var(--dir)) translateX(var(--nudge)); }

/* ---------------------------------------------------------------------------------------------------- header */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; view-transition-name: site-header;
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.site-header.is-scrolled, .site-header.has-mega, .sheet-open .site-header {
  background: rgb(255 255 255 / .8); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px);
  box-shadow: 0 1px 0 rgb(15 23 42 / .08); }
.sheet-open .site-header { background: var(--white); }
@media (max-width: 767.98px) { .site-header.is-scrolled, .site-header.has-mega { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .96); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled, .site-header.has-mega { background: var(--white); } }
.header__bar { display: flex; align-items: center; gap: 20px; block-size: var(--header-h); }
.brand { flex: none; display: inline-flex; align-items: center; min-block-size: 44px; }
.brand img { inline-size: 148px; }
.nav { flex: 1; min-inline-size: 0; }
.nav__list { display: flex; justify-content: center; gap: 2px; }
.nav__link, .nav__btn { position: relative; display: inline-flex; align-items: center; gap: 7px; min-block-size: 44px; padding-inline: 14px;
  border: 0; border-radius: var(--r-control); background: none; color: var(--text-2); font-size: var(--t-small); font-weight: 500; text-decoration: none;
  cursor: pointer; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.nav__link:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--text); background: var(--raised); }
.nav__link[aria-current="page"], .nav__btn[data-current] { color: var(--text); }
.nav__link[aria-current="page"]::after, .nav__btn[data-current]::after { content: ""; position: absolute; inset-block-end: 4px; inset-inline-start: 50%;
  inline-size: 5px; block-size: 5px; margin-inline-start: -2.5px; border-radius: 1px; background: var(--brand-yellow); }
.nav__chev { inline-size: 7px; block-size: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.nav__btn[aria-expanded="true"] .nav__chev { transform: translateY(1px) rotate(-135deg); }
.header__end { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.header__end .btn { min-block-size: 44px; padding-inline: 18px; white-space: nowrap; }
.lang { display: inline-grid; place-items: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: 12px; border-radius: var(--r-control);
  color: var(--text-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.lang:hover { background: var(--raised); color: var(--text); }
.burger { display: none; place-content: center; gap: 6px; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: var(--r-control);
  background: none; cursor: pointer; }
.burger span { display: block; inline-size: 20px; block-size: 2px; border-radius: 2px; background: var(--text); transition: transform var(--dur-2) var(--ease-out); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 1079.98px) { .nav { display: none; } .burger { display: inline-grid; } }
@media (max-width: 559.98px) { .header__end [data-cta] { display: none; } .brand img { inline-size: 132px; } }

.mega { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--white); border-block-start: 1px solid var(--line);
  box-shadow: var(--shadow-1); }
.mega:not([hidden]) { animation: drop var(--dur-2) var(--ease-out); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.mega__inner { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 48px; padding-block: 32px 40px; }
.mega__lead { color: var(--text-3); font-size: var(--t-small); max-inline-size: 24ch; padding-block-start: 14px; }
.mega__all { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; margin-block-start: 10px; color: var(--accent);
  font-weight: 600; text-decoration: none; }
.mega__all:hover .btn__arrow { transform: scaleX(var(--dir)) translateX(var(--nudge)); }
.mega__item[aria-current="page"] { background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mega__list--solutions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: var(--r-card); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out); }
.mega__item:hover { background: var(--page); }
.mega__item b { display: block; font-weight: 600; font-size: var(--t-body); line-height: 1.4; }
.mega__item span span { display: block; margin-block-start: 3px; color: var(--text-3); font-size: var(--t-small); line-height: 1.5; }

.sheet { position: fixed; inset: var(--header-h) 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--white); }
.sheet:not([hidden]) { animation: drop var(--dur-2) var(--ease-out); }
.sheet__inner { display: grid; gap: 28px; padding: 12px var(--gutter) 48px; }
.sheet__title { margin-block-end: 4px; color: var(--text-3); font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sheet__title:lang(ar) { letter-spacing: 0; text-transform: none; }
.sheet__grp a { display: flex; align-items: center; gap: 14px; min-block-size: 52px; border-block-end: 1px solid var(--line);
  font-size: var(--t-lead); font-weight: 500; text-decoration: none; }
.sheet__end { display: grid; gap: 12px; }
.sheet__grp .sheet__all { color: var(--accent); font-size: var(--t-body); font-weight: 600; }
.sheet [aria-current="page"] { color: var(--accent); }
.lang--wide { inline-size: 100%; border: 1px solid var(--line); border-radius: var(--r-control); }
html.sheet-open { overflow: hidden; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding-block-start: 12px; color: var(--text-3); font-size: var(--t-micro); }
.crumbs a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-2); }
.crumbs__sep { inline-size: 4px; block-size: 4px; border-radius: 1px; background: var(--brand-grey-light); }

/* ---------------------------------------------------------------------------------------------------- icons
   Brand glyphs (build.py → glyph): modules land one by one when the icon scrolls in, the yellow accent last;
   on hover the accent hops. Small icons in menus stay still. */
.ico { flex: none; inline-size: 48px; block-size: 48px; overflow: visible; }
.ico--xs { inline-size: 20px; block-size: 20px; }
.ico--sm { inline-size: 30px; block-size: 30px; }
.ico--md { inline-size: 44px; block-size: 44px; }
.ico--lg { inline-size: 56px; block-size: 56px; }
.ico .m { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-3) var(--ease-spring), fill var(--dur-2) var(--ease-out);
  transition-delay: calc(var(--i) * var(--step-fast)); }
.ico .b { fill: var(--brand-blue); }
.ico .s { fill: var(--brand-sky); }
.ico .n { fill: var(--brand-ink); }
.ico .a { fill: var(--brand-yellow); }
.mark-in { flex: none; inline-size: 1.125em; block-size: 1.125em; margin-inline-end: 10px; fill: currentColor; }   /* LinkedIn's own mark */
.js main .ico:not(.is-in) .m { transform: scale(0); }
.js main .ico:not(.is-in) .a { transform: translateY(-160%) scale(.4); }
a:hover .ico .a, .assure__item:hover .ico .a { animation: hop var(--dur-4) var(--ease-out); }
@keyframes hop { 35% { transform: translateY(-55%); } 65% { transform: translateY(6%); } }
/* the assurances' icons tell their own small story when the card is pointed at: the shackle lifts and closes, the two
   offices answer each other, the knowledge passes from our block to your team's */
@media (prefers-reduced-motion: no-preference) {
  .assure__item:hover .ico[data-g="transfer"] .a,
  .assure__item:hover .ico[data-g="offices"] .a, .assure__item:hover .ico[data-g="padlock"] .a { animation: none; }
  .assure__item:hover [data-g="padlock"] .r-shackle { animation: shackle var(--dur-4) var(--ease-out); }
  .assure__item:hover [data-g="offices"] .r-tower { animation: hop var(--dur-4) var(--ease-out); }
  .assure__item:hover [data-g="offices"] .r-tower2 { animation: hop var(--dur-4) var(--ease-out) .16s; }
  .assure__item:hover [data-g="transfer"] .r-carry { animation: carry 1.2s var(--ease-inout); }
  .assure__item:hover .ico[data-g="people"] .a { animation: none; }
  .assure__item:hover [data-g="people"] .r-fig { animation: hop var(--dur-4) var(--ease-out); }
  .assure__item:hover [data-g="people"] .r-fig2 { animation: hop var(--dur-4) var(--ease-out) .16s; }
}
@keyframes shackle { 40% { translate: 0 -1.8px; } 75% { translate: 0 .3px; } }
@keyframes carry { 0% { translate: -8px 0; opacity: 0; } 18%, 82% { opacity: 1; } 100% { translate: 8px 0; } }
/* with the scroll: the accent of an icon floats a little as the icon passes; objects drift the same way (below) */
@property --sx { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes drift { from { --sx: 1; } to { --sx: -1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.assure__item, .start__inner, .entity) .ico { animation: drift linear both; animation-timeline: view(); }
    :is(.assure__item, .start__inner, .entity) .ico .a { translate: 0 calc(var(--sx) * 1.6px); }
  }
}

/* ---------------------------------------------------------------------------------------------------- objects
   The brand's pictures are live voxel items (build.py → vox, src/voxel.js), sized by height (--oh); the width follows
   the item, and a wide item that would outgrow its column takes the column's width instead (the height follows, so the
   proportions stay). The SVG and the canvas that replaces it take the same box. */
.card__obj { --oh: clamp(104px, 9vw, 132px); align-self: flex-start; margin-block-end: 6px; }
.card__obj--sm { --oh: 92px; }
.deliver__obj { --oh: 104px; justify-self: start; margin-block-end: 6px; }
.vox { display: inline-flex; align-items: flex-end; justify-content: center; inline-size: min(100%, calc(var(--oh, 140px) * (var(--ar))));
  min-inline-size: 0; aspect-ratio: var(--ar); }
.vox img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.vox canvas { display: block; inline-size: 100%; block-size: 100%; touch-action: manipulation; cursor: pointer; }
.vox--hero { --oh: clamp(200px, 30vw, 400px); }
.vox--ai { --oh: clamp(150px, 16vw, 230px); flex: none; }

/* ---------------------------------------------------------------------------------------------------- reveal
   An animation, not a transition, so it never overwrites the hover transitions of the element it reveals. */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal].is-in { animation: reveal var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--stagger, 0) * var(--step)); }
@keyframes reveal { from { opacity: 0; translate: 0 22px; } }

/* ---------------------------------------------------------------------------------------------------- home: hero
   The headline in the middle of the blue panel; a quiet strip of «المدّ» at each edge, dense at the edge and dissolving
   toward the words (site.js runs the approved Slow Fuse). M : G : P keep the engine's 40 : 13 : 53. Below 1200 px the
   strips bleed in from the panel's top corners and the words sit under them. Under the panel: the partners, then proof. */
.hero { --M: clamp(18px, 2.25vw, 36px); --G: calc(var(--M) * 13 / 40); --P: calc(var(--M) + var(--G));
  --fm-b: var(--white); --fm-s: var(--brand-sky); --fm-y: var(--brand-yellow);
  overflow-x: clip; padding-block-end: calc(var(--section) / 2); }
.hero__stage { position: relative; display: grid; place-items: center; min-block-size: calc(11 * var(--P)); margin-inline: var(--gutter);
  padding-block: clamp(56px, 7vw, 112px); border-radius: var(--r-panel); background: var(--brand-blue); color: var(--white); overflow: clip; }
.hero__fields { position: absolute; inset: 0; pointer-events: none; }
.fuse { position: absolute; inset-block-start: 50%; translate: 0 -50%; contain: layout paint;
  inline-size: calc(var(--cols) * var(--P) - var(--G)); block-size: calc(var(--rows) * var(--P) - var(--G)); }
.fuse--left { left: calc(var(--P) * -0.5); }                 /* physical sides: the strip is the same in both */
.fuse--right { right: calc(var(--P) * -0.5); }               /* languages, and its outer column runs under the edge */
.fm { position: absolute; left: calc(var(--c) * var(--P)); top: calc(var(--r) * var(--P));
  inline-size: calc(var(--span, 1) * var(--M) + (var(--span, 1) - 1) * var(--G)); block-size: var(--M);
  border-radius: calc(var(--M) * .2); background: var(--fm-b); }
.fm.s { background: var(--fm-s); }
.fm.y { background: var(--fm-y); }
.fm.mini { inline-size: calc(var(--M) * .45); block-size: calc(var(--M) * .45); margin: calc(var(--M) * .275);
  border-radius: calc(var(--M) * .1); }
.fuse.is-live .fm:not(.mini) { animation: fm-breathe 5.2s var(--ease-inout) infinite; animation-delay: calc((var(--c) * 2 + var(--r) * 3) * 130ms); }
@keyframes fm-breathe { 50% { opacity: .9; } }
@media (prefers-reduced-motion: no-preference) { .js .fuse:not(.is-live) .fm { opacity: 0; } }
.hero__center { position: relative; z-index: 1; display: grid; justify-items: center; max-inline-size: 46rem;
  padding-inline: var(--gutter); text-align: center; }
.hero__center .eyebrow, .hero__center .lead { color: var(--white); }
.hero__center .lead { max-inline-size: 31em; }
.hero__center .actions { justify-content: center; }
.hero__stage .btn--primary { --bg: var(--white); --fg: var(--brand-ink); }
.hero__stage .btn--primary:hover { box-shadow: 0 12px 28px -14px rgb(15 23 42 / .55); }
.hero__stage .btn--ghost { --fg: var(--white); border-color: rgb(255 255 255 / .5); }
.hero__stage .btn--ghost:hover { --bg: rgb(255 255 255 / .12); border-color: var(--white); }
.display-hero { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.75rem); line-height: 1.02; font-weight: 600; letter-spacing: -.035em;
  text-wrap: balance; }
.display-hero:lang(ar) { font-size: clamp(2.375rem, 1.15rem + 4.2vw, 5.25rem); line-height: 1.22; letter-spacing: 0; }
.display-hero:lang(en) { hyphens: auto; }                     /* «transformation.» on a 320 px phone */
@media (max-width: 1199.98px) {                              /* no room beside the words: the strips come in from above */
  .hero { --M: clamp(12px, 3vw, 20px); }
  .hero__stage { display: block; min-block-size: 0; padding-block: calc(3 * var(--P) + 12px) clamp(40px, 7vw, 64px); }
  .hero__center { margin-inline: auto; }
  .fuse { inset-block-start: calc(var(--P) * -6); translate: none; }
  .fuse--left { left: calc(var(--P) * -1); }
  .fuse--right { right: calc(var(--P) * -1); }
}
/* the entrance: words rise one after another, then the lead and the actions */
@media (prefers-reduced-motion: no-preference) {
  .js .display-hero .w { display: inline-block; animation: word-in var(--dur-4) var(--ease-out) both; animation-delay: calc(.12s + var(--wi) * var(--step)); }
  .js .hero__center > .eyebrow { animation: word-in var(--dur-4) var(--ease-out) both; }
  .js .hero__center > .lead { animation: word-in var(--dur-4) var(--ease-out) .45s both; }
  .js .band-hero .display-1 .w { display: inline-block; animation: word-in var(--dur-4) var(--ease-out) both;
    animation-delay: calc(.08s + var(--wi) * var(--step)); }
  .js .band-hero__grid > div > :is(.lead, .actions) { animation: word-in var(--dur-4) var(--ease-out) .35s both; }
  .js .hero__center > .actions { animation: word-in var(--dur-4) var(--ease-out) .6s both; }
}
@keyframes word-in { from { opacity: 0; translate: 0 .4em; } }
@media (max-width: 639.98px) {
  :is(.hero__center, .band-hero, .ai) .actions { display: grid; justify-content: stretch; inline-size: min(100%, 340px); }   /* stacked: one width */
  :is(.hero__center, .band-hero, .ai) .actions .btn { inline-size: 100%; }
}
/* «شركاء النجاح»: the 17 client logos, quiet until a pointer asks. At rest (no JavaScript, or less motion asked for)
   they stand in centred rows; site.js adds .is-moving, and the row glides one list-width per loop (two identical lists,
   each ending in one gap, so -50% lands exactly on the seam). A pointer on the logos, the pause button, an off-screen
   row or a hidden tab stops it. */
.partners { --gap: clamp(28px, 4vw, 56px); display: grid; justify-items: center; gap: 10px; margin-block-start: clamp(28px, 4vw, 48px); }
.partners__head { position: relative; display: flex; align-items: center; justify-content: center; justify-self: stretch;
  min-block-size: 44px; padding-inline: 48px; }                    /* the label stays centred over the logos */
.partners__label { color: var(--text-2); font-size: var(--t-small); font-weight: 600; }
.partners__pause { position: absolute; inset-inline-end: 0; inset-block-start: 0; inline-size: 44px; block-size: 44px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }   /* at the row's end, as a carousel's control */
.partners__pause[hidden] { display: none; }
/* the ring and the mark are centred by position, not by the button's own layout (a button does not stretch its grid) */
.partners__pause::before, .partners__pause::after { content: ""; position: absolute; inset: 0; margin: auto; }
.partners__pause::before { inline-size: 28px; block-size: 28px; border: 1px solid var(--line); border-radius: 50%;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.partners__pause::after { inline-size: 8px; block-size: 9px; border-inline: 2.5px solid currentColor; }   /* ❚❚ */
.partners.is-paused .partners__pause::after { inline-size: 9px; border: 0; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%); translate: 1px 0; }                    /* ▶ points the same way in both languages */
.partners__pause:hover { color: var(--text); }
.partners__pause:hover::before { border-color: var(--text-2); background: var(--brand-mist); }
.partners__window { inline-size: 100%; overflow: hidden; }
.partners__track { display: flex; justify-content: center; }
.partners__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px var(--gap); padding: 0; list-style: none; }
.partners__logos li { flex: none; display: grid; place-items: center; inline-size: 132px; block-size: 84px; }
.partners__logos img { inline-size: auto; block-size: calc(72px * var(--s, 1)); max-inline-size: 100%; max-block-size: 100%; object-fit: contain;
  filter: grayscale(1) contrast(1.4); opacity: .92; transition: filter var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.partners__logos li:hover img { filter: none; opacity: 1; }
.partners.is-moving .partners__window { mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.partners.is-moving .partners__track { justify-content: flex-start; inline-size: max-content;
  animation: partners-glide var(--glide, 60s) linear infinite; }
.partners.is-moving .partners__logos { flex-wrap: nowrap; padding-inline-end: var(--gap); }
.partners.is-moving .partners__window:hover .partners__track,
.partners:is(.is-paused, .is-off) .partners__track { animation-play-state: paused; }
@keyframes partners-glide { to { transform: translateX(calc(-50% * var(--dir))); } }   /* RTL glides the other way */
@media (max-width: 639.98px) {
  .partners { --gap: 24px; }
  .partners__logos { row-gap: 8px; }
  .partners__logos li { inline-size: 96px; block-size: 58px; }
  .partners__logos img { block-size: calc(50px * var(--s, 1)); }
}
.hero .proof { margin-block-start: clamp(28px, 4vw, 56px); }
/* review builds only (?hero=white): the same hero on the white ground, for the owner to compare */
.hero--white { --fm-b: var(--brand-blue); }
.hero--white .hero__stage { background: none; color: var(--text); }
.hero--white .hero__center .eyebrow { color: var(--accent); }
.hero--white .hero__center .lead { color: var(--text-2); }
.hero--white .hero__stage .btn--primary { --bg: var(--accent-fill); --fg: var(--on-accent-fill); }
.hero--white .hero__stage .btn--ghost { --fg: var(--text); border-color: var(--line); }

/* the woven field (design.md §10.5): positions come from build.py as percentages; radii are 0.2 × module in cqw */
.field { --px: 0; --py: 0; position: relative; inline-size: 100%; aspect-ratio: var(--ar); container-type: inline-size;
  transform: scaleX(var(--dir)); }
.mod { position: absolute; left: var(--x); top: var(--y); inline-size: var(--w); block-size: var(--hh); border-radius: 1.6cqw;
  background: var(--brand-blue); translate: calc(var(--px) * var(--d) * 7px) calc(var(--py) * var(--d) * 7px);
  transition: translate var(--dur-4) var(--ease-out); }
.mod.s { background: var(--brand-sky); }
.mod.y { background: var(--brand-yellow); }
.mod.o { background: transparent; box-shadow: inset 0 0 0 max(2px, .5cqw) var(--brand-blue); }
.mod.tiny { border-radius: .75cqw; }
@media (max-width: 959.98px) { .mod.tiny { display: none; } }

.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-block-start: clamp(32px, 4vw, 56px); }
@media (min-width: 768px) { .proof { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }   /* one row, shared by however many */
/* three numbers on a phone: the first leads on a row of its own, the other two share the next (no number left alone) */
@media (max-width: 767.98px) { .proof__item:first-child:nth-last-child(3) { grid-column: 1 / -1; } }
.proof__item { position: relative; padding-block-start: 20px; border-block-start: 1px solid var(--line); }
.proof__item::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0; inline-size: 28px; block-size: 2px; background: var(--brand-blue); }
.proof__n { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); line-height: 1; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.proof__n:lang(ar) { letter-spacing: 0; }
.proof__n span { white-space: nowrap; }
.proof__n:has([data-count*="–"]) { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem); }   /* a year range: smaller, never broken */
.proof__l { max-inline-size: 26ch; margin-block-start: 12px; color: var(--text-2); font-size: var(--t-small); line-height: 1.5; }

/* ---------------------------------------------------------------------------------------------------- home: solutions picker */
.pick__ui { display: grid; gap: var(--sp-md); margin-block-start: var(--head-gap); }
@media (min-width: 960px) { .pick__ui { grid-template-columns: minmax(250px, 1fr) minmax(0, 2.5fr); gap: 24px; align-items: start; } }
.pick__tabs { display: flex; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; }
.pick__tabs::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .pick__tabs { flex-direction: column; margin: 0; padding: 0; overflow: visible; } }
.pick__tab { flex: none; display: flex; align-items: center; gap: 12px; min-block-size: 54px; padding: 10px 16px; border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--white); font-weight: 500; text-align: start; cursor: pointer; scroll-snap-align: start;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.pick__tab:hover { border-color: var(--hover); background: var(--raised); }
.pick__tab[aria-selected="true"] { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--white); }
.pick__tab[aria-selected="true"] .ico .b { fill: var(--brand-sky); }
/* tabs without JavaScript: the tab rows are not drawn, every panel shows under its own title */
.tab-title { margin-block-end: 10px; }
.js .tab-title { display: none; }
html:not(.js) .pick__tabs { display: none; }
html:not(.js) .pick__ui { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .pick__panels { display: grid; gap: 16px; }
.pick__panel { padding: clamp(22px, 3.5vw, 40px); border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-1); }
.pick__panel:not([hidden]) { animation: panel-in var(--dur-3) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; translate: 0 10px; } }
.pick__short { max-inline-size: 46ch; font-size: var(--t-lead); color: var(--text); }
.pick__offers { display: grid; gap: 10px; margin-block: 24px; }
@media (min-width: 680px) { .pick__offers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick__offers a { display: block; block-size: 100%; padding: 18px; border-radius: var(--r-card); background: var(--page); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pick__offers a:hover { background: var(--raised); transform: translateY(calc(-1 * var(--lift))); }
.pick__offers b { display: block; margin-block-end: 6px; font-weight: 600; line-height: 1.4; }
.pick__offers span { display: block; color: var(--text-2); font-size: var(--t-small); line-height: 1.55; }
.pick__proof { margin-block-end: 20px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.pick__label { margin-block-end: 8px; color: var(--text-3); font-size: var(--t-micro); font-weight: 600; }
.pick__proof li { display: flex; gap: 12px; padding-block: 5px; color: var(--text-2); font-size: var(--t-small); line-height: 1.55; }

/* ---------------------------------------------------------------------------------------------------- cards */
.svcs__grid { display: grid; gap: var(--sp-md); margin-block-start: var(--head-gap); }
@media (min-width: 640px) { .svcs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .svcs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; block-size: 100%; padding: clamp(var(--sp-lg), 3vw, 32px);
  border: 1px solid transparent; border-radius: var(--r-panel); background: var(--page); color: var(--text); text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
a.card:hover { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-2); transform: translateY(calc(-1 * var(--lift))); }
.card .ico { margin-block-end: 6px; }
.card p { color: var(--text-2); font-size: var(--t-small); line-height: 1.6; }
.card__num { position: absolute; inset-block-start: 26px; inset-inline-end: 28px; color: var(--text-3); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-start: auto; padding-block-start: 18px;
  border-block-start: 1px solid var(--line); }
.card__proof { color: var(--text-2); font-size: var(--t-small); line-height: 1.45; }
.card__proof b { display: block; color: var(--text); font-size: 1.625rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card__go { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 10px; background: var(--white);
  color: var(--text); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.card > .card__go { margin-block-start: auto; align-self: flex-end; }
@media (min-width: 1200px) {
  .svcs__grid > .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; }
  .svcs__grid > .card > .card__foot { margin-block-start: 0; }   /* fill the shared row: dividers line up, numbers stay at the foot */
  .assure__grid > .assure__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
}
a.card:hover .card__go, .case-teaser:hover .card__go { background: var(--accent-fill); color: var(--white); }
a.card:hover .card__go::before { transform: scaleX(var(--dir)) translateX(var(--nudge)); }
.card__tag { align-self: flex-start; margin-block-start: auto; padding: 3px 10px; border-radius: var(--r-chip); background: var(--white);
  color: var(--text-2); font-size: var(--t-micro); }

/* ---------------------------------------------------------------------------------------------------- home: the story (ELI5)
   One stage, six steps. Phones: a card per step with its own small stage. Wide screens: the stage sticks while the
   steps scroll past it, and site.js tells it which step is in view. */
.story__grid { margin-block-start: var(--head-gap); }
.story__sticky { display: none; }
.story__steps { display: grid; gap: 14px; }
.story__step { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 2px 20px; align-items: start; padding: clamp(var(--sp-lg), 3vw, 32px);
  border-radius: var(--r-panel); background: var(--white); }
.story__mini { grid-row: span 3; }
.story__n { color: var(--accent); font-size: var(--t-micro); font-weight: 600; font-variant-numeric: tabular-nums; }
.story__step p:not([class]) { color: var(--text-2); font-size: var(--t-small); }
@media (min-width: 1024px) {
  .story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
  .story__sticky { display: block; position: sticky; inset-block-start: calc(var(--header-h) + max(24px, (100vh - var(--header-h) - 460px) / 2)); }
  .story__sticky .stage { max-inline-size: 460px; margin-inline: auto; }
  .story__steps { gap: 0; }
  .story__step { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-block-size: clamp(200px, 24vh, 260px); padding: 0; background: none; }
  .story__mini { display: none; }
  .story__step .h3 { font-size: clamp(1.625rem, 1.1rem + 1.3vw, 2.375rem); line-height: 1.2; }
  .story__step .h3:lang(ar) { line-height: 1.45; }
  .story__step p:not([class]) { max-inline-size: 30em; font-size: var(--t-lead); }
  .js .story__step { transition: color var(--dur-3) var(--ease-out); }
  .js .story__step:not(.is-active) .h3, .js .story__step:not(.is-active) p:not([class]) { color: var(--text-3); }
}
.stage { container-type: inline-size; display: grid; grid-template: repeat(6, 1fr) / repeat(6, 1fr); gap: 4.35%; aspect-ratio: 1; }
.cell { border-radius: 2.6cqw; background: var(--brand-blue); opacity: 0; transform: scale(.3) translateY(-30%);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-4) var(--ease-spring), background-color var(--dur-4) var(--ease-out); transition-delay: calc(var(--i) * var(--step-fast)); }
.cell.s { background: var(--brand-sky); }
.cell.y { background: var(--brand-yellow); }
.cell.n { background: var(--brand-ink); }
.cell.p { background: var(--brand-grey-light); }
.stage[data-step="1"] .cell[data-s="1"],
.stage[data-step="2"] .cell:is([data-s="1"], [data-s="2"]),
.stage[data-step="3"] .cell:is([data-s="1"], [data-s="2"], [data-s="3"]),
.stage[data-step="4"] .cell:not([data-s="5"]),
.stage:is([data-step="5"], [data-step="6"]) .cell,
html:not(.js) .story__sticky .cell { opacity: 1; transform: none; }
.stage:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .cell.p { background: var(--brand-blue); }
.stage[data-step="6"] .cell.y { animation: hop var(--dur-4) var(--ease-out) .3s; }

/* ---------------------------------------------------------------------------------------------------- the record */
.record__grid { display: grid; gap: var(--sp-xl); margin-block-start: var(--head-gap); }
@media (min-width: 1024px) {
  .record__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
  /* three case studies beside a long list: they ride along while the list scrolls, instead of leaving a hole under them */
  .record__grid > :first-child { position: sticky; inset-block-start: calc(var(--header-h) + 32px); align-self: start; }
}
.record__h { margin-block-end: 8px; color: var(--text-3); font-size: var(--t-small); font-weight: 600; }
.case-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "client period" "title title";
  gap: 6px 16px; padding-block: 22px; border-block-start: 1px solid var(--line); text-decoration: none; }
.case-row__client { grid-area: client; color: var(--accent); font-size: var(--t-small); font-weight: 600; }
.case-row__period { grid-area: period; color: var(--text-3); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.case-row__title { grid-area: title; padding-inline-end: 44px; font-size: clamp(1.1875rem, 1rem + .65vw, 1.625rem); font-weight: 600; line-height: 1.3;
  letter-spacing: -.015em; transition: color var(--dur-2) var(--ease-out); }
.case-row__title:lang(ar) { line-height: 1.5; letter-spacing: 0; }
.case-row::after { position: absolute; inset-inline-end: 4px; inset-block-end: 28px; color: var(--text-3); }
.case-row:hover .case-row__title { color: var(--accent); }
.case-row:hover::after { color: var(--accent); transform: scaleX(var(--dir)) translateX(var(--nudge)); }
@media (min-width: 1024px) {                       /* the record page's case studies side by side, each under its own rule */
  .case-rows--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .case-rows--grid > li { display: flex; }
  .case-rows--grid .case-row { flex: 1; align-content: start; padding-block-end: 64px; }
}
/* a record row lays out by the width of its own list (a container query): stacked in a narrow column, a row of
   year · client · work · evidence where the list is wide */
.recs { margin-block-start: 4px; container-type: inline-size; }
.rec { display: grid; grid-template: "year client" "year title" "year meta" / 52px minmax(0, 1fr); gap: 2px 14px; padding-block: 16px;
  border-block-start: 1px solid var(--line); }
.rec__year { grid-area: year; padding-block-start: 1px; color: var(--text-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.rec__client { grid-area: client; font-size: var(--t-small); font-weight: 600; }
.rec__title { grid-area: title; color: var(--text-2); font-size: var(--t-small); line-height: 1.55; }
.rec__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: 6px; }
@container (min-width: 860px) {
  .rec { grid-template: "year client title meta" / 56px 200px minmax(0, 1fr) 280px; align-items: baseline; gap: 18px; padding-block: 18px; }
  .rec__meta { justify-content: flex-end; margin: 0; }
}
@media (max-width: 767.98px) { .recs:not(.recs--all) .rec:nth-child(n + 5) { display: none; } }   /* phones: four, then the full record */
.rec__meta:empty { display: none; }
.rec__svc, .rec__count, .rec__case, .badge { padding: 2px 10px; border-radius: var(--r-chip); background: var(--raised); color: var(--text-2);
  font-size: var(--t-micro); line-height: 1.6; }
.rec__case { position: relative; background: var(--band-accent); color: var(--accent); font-weight: 600; text-decoration: none; }
.rec__svc { position: relative; text-decoration: none; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.rec__case::after, .rec__svc::after { content: ""; position: absolute; inset: -10px -4px; }
.rec__case:hover { text-decoration: underline; }
.rec__svc:hover { background: var(--hover); color: var(--text); }
.rec.is-hidden { display: none; }

/* ---------------------------------------------------------------------------------------------------- assurances */
.assure__grid { display: grid; gap: var(--sp-md); margin-block-start: var(--head-gap); }
@media (min-width: 640px) { .assure__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .assure__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .assure__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.assure__item { display: flex; flex-direction: column; gap: 12px; padding: clamp(var(--sp-lg), 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-panel); }
.assure__item p { color: var(--text-2); font-size: var(--t-small); }

/* ---------------------------------------------------------------------------------------------------- the AI chapter */
.ai { background: var(--brand-blue); color: var(--white); }
.ai .eyebrow { color: var(--white); }
.ai .lead { color: var(--white); }
.ai .actions .btn--ghost { --fg: var(--white); border-color: rgb(255 255 255 / .5); }   /* as on the blue hero */
.ai .actions .btn--ghost:hover { --bg: rgb(255 255 255 / .12); border-color: var(--white); }
.ai__head { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .ai__head { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; } }
.ai__paths { display: grid; gap: var(--sp-md); margin-block-start: var(--head-gap); }
@media (min-width: 900px) { .ai__paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ai__paths li { display: grid; gap: 10px; align-content: start; padding: clamp(var(--sp-lg), 3vw, 32px); border-radius: var(--r-panel); background: rgb(15 23 42 / .18); }
.ai__paths p { font-size: var(--t-small); }
/* the AI chapter's demo (build.py → agent_demo, site.js → runAgent): four real tasks, each in the same four beats */
.agent { margin-block-start: var(--head-gap); }
.agent__claim { max-inline-size: 44em; margin-block-end: 24px; color: var(--white); font-size: var(--t-lead); font-weight: 500; }
.agent__window { overflow: hidden; border-radius: var(--r-panel); background: var(--white); color: var(--text);
  box-shadow: 0 40px 80px -40px rgb(15 23 42 / .55); }
.agent__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-block-end: 1px solid var(--line);
  background: var(--page); font-size: var(--t-small); }
.agent__lights { display: inline-flex; gap: 6px; }
.agent__lights i { inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--brand-grey-light); }
.agent__course { font-weight: 600; }
.agent__badge { padding: 2px 10px; border-radius: var(--r-chip); background: var(--band-accent); color: var(--accent); font-size: var(--t-micro); font-weight: 600; }
.agent__who { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--text-2); }
.agent__who i { inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--brand-yellow); }
.agent.is-playing .agent__who i { animation: who 1.2s var(--ease-inout) infinite; }
@keyframes who { 50% { scale: .6; opacity: .55; } }
.agent__body { display: grid; }
@media (min-width: 900px) { .agent__body { grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); } }
.agent__side { display: grid; align-content: start; gap: 12px; padding: 22px 24px; border-block-end: 1px solid var(--line); }
@media (min-width: 900px) { .agent__side { border-block-end: 0; border-inline-end: 1px solid var(--line); } }
.agent__label { color: var(--text-3); font-size: var(--t-micro); font-weight: 600; }
.agent__tasks + .agent__label { margin-block-start: 12px; }
.agent__tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (min-width: 900px) { .agent__tasks { display: flex; flex-direction: column; } }
.agent__task { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 44px; padding: 8px 12px; border: 0;
  border-radius: var(--r-control); background: none; color: var(--text-2); font: inherit; font-size: var(--t-small); font-weight: 500;
  text-align: start; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.agent__task:hover { background: var(--page); }
.agent__task[aria-selected="true"] { background: var(--band-accent); color: var(--accent); font-weight: 600; }
.agent__dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--brand-grey-light); transition: background-color var(--dur-2) var(--ease-out); }
.agent__task[aria-selected="true"] .agent__dot { background: var(--brand-yellow); }
.agent__beats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; list-style: none; }
@media (min-width: 900px) { .agent__beats { grid-template-columns: 1fr; } }
.agent__beats li { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--t-small); transition: color var(--dur-2) var(--ease-out); }
.agent__n { display: grid; place-items: center; flex: none; inline-size: 24px; block-size: 24px; border-radius: 6px; background: var(--page);
  font-size: var(--t-micro); font-weight: 600; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.agent__beats li.is-done { color: var(--text-2); }
.agent__beats li.is-done .agent__n { background: var(--band-good); color: var(--good); }
.agent__beats li.is-now { color: var(--text); font-weight: 600; }
.agent__beats li.is-now .agent__n { background: var(--brand-blue); color: var(--white); }
@media (max-width: 899.98px) {
  .agent__side { gap: 10px; padding: 16px 18px; }
  .agent__label { display: none; }
  .agent__beats { display: flex; flex-wrap: wrap; gap: 8px 12px; }
  .agent.is-playing .agent__beats li:not(.is-now) .agent__b { display: none; }
}
.agent__chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-inline-size: 0; padding: 22px 24px; }
.agent__panels { display: grid; }
.agent__panel { display: grid; align-content: start; gap: 12px; }
.agent__panel + .agent__panel { margin-block-start: 28px; }
/* with JavaScript every task shares one cell, so the window keeps its height whichever task is shown */
.js .agent__panel { grid-area: 1 / 1; margin-block-start: 0; }
.js .agent__panels > .agent__panel[hidden] { display: grid !important; visibility: hidden; }
.agent__ask { justify-self: end; display: grid; gap: 2px; max-inline-size: 88%; padding: 10px 16px; border-radius: 16px;
  border-end-end-radius: 4px; background: var(--band-accent); }
.agent__you { color: var(--accent); font-size: var(--t-micro); font-weight: 600; }
.agent__steps { display: grid; gap: 6px; padding: 0; list-style: none; }
.agent__step { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--t-small); }
.agent__tick { position: relative; flex: none; inline-size: 18px; block-size: 18px; border-radius: 5px; background: var(--band-good); }
.agent__tick::after { content: ""; position: absolute; inset: 5px; border-radius: 2px; background: var(--good); }
.agent__tools { padding-inline-start: 28px; color: var(--text-3); font-size: var(--t-micro); }
.agent__card { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.agent__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-weight: 600; }
.agent__title span { color: var(--text-3); font-size: var(--t-small); font-weight: 500; }
.agent__result ul { display: grid; gap: 6px; padding: 0; list-style: none; }
.agent__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--page); font-size: var(--t-small); }
.agent__chip { flex: none; padding: 2px 10px; border-radius: var(--r-chip); font-size: var(--t-micro); font-weight: 600; white-space: nowrap; }
.agent__chip--ok { background: var(--band-good); color: var(--good); }
.agent__chip--gap, .agent__chip--watch { background: color-mix(in srgb, var(--warn) 14%, var(--white)); color: var(--warn); }
.agent__chip--risk { background: var(--band-bad); color: var(--bad); }
.agent__chip--check, .agent__chip--draft { background: var(--band-accent); color: var(--accent); }
.agent__review { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow-1); }
.agent__review dl { display: grid; gap: 8px; margin: 0; }
.agent__review dl div { display: grid; gap: 2px; }
@media (min-width: 700px) { .agent__review dl div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; } }
.agent__review dt { color: var(--text-3); font-size: var(--t-micro); font-weight: 600; }
.agent__review dd { margin: 0; font-size: var(--t-small); }
.agent__reason { color: var(--warn); font-size: var(--t-micro); font-weight: 600; }
.agent__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.agent__buttons span { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-control); color: var(--text-2);
  font-size: var(--t-small); font-weight: 600; }
.agent__buttons .agent__confirm { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent-fill);
  transition: scale var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.agent__confirm.is-pressed { scale: .96; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.agent__review.is-ran .agent__confirm { border-color: transparent; background: var(--band-good); color: var(--good); scale: 1; box-shadow: none; }
.agent__review.is-ran .agent__buttons span:not(.agent__confirm) { opacity: .35; }
.agent__review.is-ran :is(.agent__title span, .agent__reason) { display: none; }
.agent__done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; border-radius: var(--r-card);
  background: var(--band-good); color: var(--good); font-size: var(--t-small); font-weight: 600; }
.agent__audit { margin-inline-start: auto; color: var(--text-2); font-size: var(--t-micro); font-weight: 500; font-variant-numeric: tabular-nums; }
.agent__input { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding-block: 8px; padding-inline: 16px 8px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--page); }
.agent__typed { flex: 1; min-inline-size: 0; font-size: var(--t-small); }
.agent__typed:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.agent.is-playing .agent__typed:not(:empty)::after { content: ""; display: inline-block; inline-size: 2px; block-size: 1.1em;
  margin-inline-start: 2px; vertical-align: -.2em; background: var(--accent); }
.agent__send { flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 8px; background: var(--accent-fill); }
.agent__send::after { content: ""; inline-size: 15px; block-size: 15px; background: var(--on-accent-fill); rotate: -90deg;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.agent__rule { padding: 14px 24px; border-block-start: 1px solid var(--line); color: var(--text-2); font-size: var(--t-small); }
/* playing, like a real chat: each part arrives at the bottom and the earlier ones move up and out of view, so the window
   keeps one height and the page never moves. Without JavaScript or with reduced motion the whole task simply shows. */
.agent.is-playing .agent__panels { grid-template-rows: minmax(0, 1fr); block-size: clamp(420px, 58svh, 560px); overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 56px); }
.agent.is-playing .agent__panel { min-block-size: 0; align-content: unsafe end; }   /* may be shorter than its content */
.agent.is-playing [data-beat]:not(.is-on) { display: none; }
.agent.is-playing [data-beat].is-on { animation: word-in var(--dur-3) var(--ease-out) both; }

/* ---------------------------------------------------------------------------------------------------- clients */
.clients__wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: var(--head-gap); --cols: 2; }
@media (min-width: 640px) { .clients__wall { --cols: 3; } }
@media (min-width: 900px) { .clients__wall { --cols: 4; } }
@media (min-width: 1200px) { .clients__wall { --cols: 6; } }
.clients__wall li { flex: 0 0 calc((100% - (var(--cols) - 1) * 12px) / var(--cols)); display: grid; place-items: center; aspect-ratio: 2 / 1;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.clients__wall img { inline-size: 100%; block-size: calc(72px * var(--s, 1)); max-block-size: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------------------------------------- closing band */
.close { text-align: center; }
.close__inner { display: grid; justify-items: center; gap: 20px; max-inline-size: calc(52rem + 2 * var(--gutter)); }
.close .display-2 { margin-inline: auto; }
.close .actions { justify-content: center; margin-block-start: 0; }
.close__inner .display-2 + .lead { margin-block-start: 0; }   /* the grid's gap owns the rhythm here */

/* ---------------------------------------------------------------------------------------------------- FAQ */
.faq .h2 { margin-block-end: 20px; }
@media (min-width: 900px) { .faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; } }
.faq__item { border-block-start: 1px solid var(--line); }
.faq__item:last-child { border-block-end: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-block-size: 64px; padding-block: 16px;
  font-weight: 600; line-height: 1.55; list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; inline-size: 14px; block-size: 14px; transition: transform var(--dur-2) var(--ease-out);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { max-inline-size: 64ch; padding-block-end: 22px; color: var(--text-2); }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) var(--ease-out) allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }

/* ---------------------------------------------------------------------------------------------------- inner pages */
/* the hero band of a service or sector page: its own front page (build.py → band_hero) */
.crumbs-band, .band-hero { background: var(--page); overflow-x: clip; }
@media (min-width: 900px) { .band-hero--plain .band-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.band-hero__below { padding-block-end: clamp(32px, 4vw, 52px); }
.band-hero__below .partners { margin-block-start: 0; }
.band-hero__grid { display: grid; gap: 28px; align-items: center; padding-block: clamp(12px, 3vw, 40px) clamp(24px, 4vw, 48px); }
@media (min-width: 900px) { .band-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; } }
.band-hero .actions { margin-block-start: 30px; }
.band-hero__art { display: grid; place-items: center; }
@media (max-width: 899.98px) { .band-hero__art { justify-items: center; } .band-hero__art .vox { --oh: 140px; } }
.band-hero__proof .proof { margin-block-start: 0; padding-block-end: clamp(28px, 4vw, 44px); }
.band-hero__proof .note { margin-block-end: 32px; background: var(--white); }
/* the sticky bar of a long page (build.py → subnav, site.js marks the section in view) */
.subnav { position: sticky; inset-block-start: var(--header-h); z-index: 40; border-block-end: 1px solid var(--line);
  background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.subnav__list { display: flex; gap: 4px; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__link { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 14px; border-radius: var(--r-control);
  color: var(--text-2); font-size: var(--t-small); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.subnav__link:hover { background: var(--raised); color: var(--text); }
.subnav__link[aria-current="true"] { background: var(--band-accent); color: var(--accent); font-weight: 600; }
.subnav--home { display: none; }
@media (max-width: 899.98px) { .subnav--home { display: block; } }
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 72px); }
/* «باختصار»: the answer's first sentence as the headline, the rest beside it (build.py → in_short) */
.def__grid { display: grid; gap: 18px 56px; }
@media (min-width: 900px) { .def__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; } }
.def__lede { font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; text-wrap: balance; }
.def__lede:lang(ar) { line-height: 1.6; letter-spacing: 0; }
.def__lede--long { font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); font-weight: 500; }
.def__grid .def__text { padding: 0; border: 0; color: var(--text-2); font-size: var(--t-body); }
/* what stays with the client after handover: one card, its lines ticked in turn as it arrives */
.handover__card { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-panel); background: var(--band-accent); }
.handover__card .h2 { margin-block-end: 22px; }
.handover__card .eyebrow { margin-block-end: 10px; }
.handover__keeps { display: grid; gap: 14px; }
@media (min-width: 900px) { .handover__keeps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
.handover__keeps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 500; }
.handover__check { position: relative; inline-size: 22px; block-size: 22px; margin-block-start: .2em; border-radius: 6px; background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--brand-sky); transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.handover__check::after { content: ""; position: absolute; inset: 5px 4px 8px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) scale(0); transition: transform var(--dur-3) var(--ease-spring); }
.is-in .handover__check { background: var(--brand-blue); box-shadow: none; transition-delay: calc(.4s + var(--k) * .35s); }
.is-in .handover__check::after { transform: rotate(-45deg) scale(1); transition-delay: calc(.5s + var(--k) * .35s); }
html:not(.js) .handover__check { background: var(--brand-blue); box-shadow: none; }
html:not(.js) .handover__check::after { transform: rotate(-45deg) scale(1); }
.def__text { padding-inline-start: clamp(16px, 2.5vw, 28px); border-inline-start: 3px solid var(--brand-blue);
  font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.7; }
.def__text:lang(ar) { line-height: 1.8; }
.deliver { display: grid; gap: var(--sp-md); margin-block-start: var(--head-gap); }
@media (min-width: 768px) { .deliver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .deliver:has(> li:nth-child(5)), .deliver:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.deliver li { display: grid; gap: 10px; align-content: start; padding: clamp(var(--sp-lg), 3vw, 32px); border-radius: var(--r-panel); background: var(--page); }
.deliver__n, .phase__n { color: var(--accent); font-size: var(--t-micro); font-weight: 600; font-variant-numeric: tabular-nums; }
.deliver p { color: var(--text-2); font-size: var(--t-small); }
.two__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .two__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-panel); }
.panel--keep { border-color: transparent; background: var(--band-accent); }
.panel .h2 { margin-block-end: 20px; }
.panel .eyebrow { margin-block-end: 12px; }
/* a case study's need and work: each heading beside its text, on the grid of the definition and the questions */
.case__grid { display: grid; gap: 12px 56px; }
.case__grid > .h2 + * + .h2 { margin-block-start: 28px; }                     /* phone: the second pair starts a new block */
.section > .wrap.case__grid > .h2 { margin-block-end: 0; }                    /* the grid's gap ties each heading to its text */
@media (min-width: 900px) {
  .case__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); row-gap: 48px; align-items: start; }
  .case__grid > .h2 + * + .h2 { margin-block-start: 0; }
}
.ticks { display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 14px; color: var(--text-2); }
.ticks li::before { content: ""; inline-size: 9px; block-size: 9px; margin-block-start: .62em; border-radius: 2px; background: var(--brand-blue); }
.section > .wrap > .h2 { margin-block-end: 20px; }
.note { padding: 28px; border-radius: var(--r-panel); background: var(--page); color: var(--text-2); font-size: var(--t-lead); }
.case-teaser { position: relative; display: grid; gap: 10px; padding: clamp(28px, 4.5vw, 64px); padding-inline-end: clamp(72px, 8vw, 120px);
  border-radius: var(--r-panel); background: var(--brand-ink); color: var(--white); text-decoration: none; overflow: hidden; }
.case-teaser .eyebrow { margin: 0; color: var(--brand-sky); }
.case-teaser__client { color: rgb(255 255 255 / .75); font-weight: 600; }
.case-teaser .display-3 { max-inline-size: 26ch; transition: color var(--dur-2) var(--ease-out); }
.case-teaser:hover .display-3 { color: var(--brand-sky); }
.case-teaser .card__go { position: absolute; inset-block-end: clamp(24px, 4vw, 48px); inset-inline-end: clamp(24px, 4vw, 48px); }
.related .h2 { font-size: var(--t-lead); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
@media (max-width: 639.98px) {                     /* a phone: the related links in even pairs, an odd last one across the row */
  .related .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related .chip { inline-size: 100%; block-size: 100%; }
  .related .chips > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.chip { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 16px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--white); font-size: var(--t-small); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.chip:hover { border-color: var(--hover); background: var(--page); }
.chip[aria-pressed="true"] { border-color: var(--brand-ink); background: var(--brand-ink); color: var(--white); }
.offers { display: grid; gap: var(--sp-md); margin-block-start: var(--head-gap); }
@media (min-width: 768px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .offers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offers > li { display: flex; }
.offers > li > * { flex: 1; }                     /* the card fills its cell: as a flex item it would shrink to its words */
.wrap > :is(.svcs__grid, .offers):first-child { margin-block-start: 0; }   /* no heading above it: the section's padding is the gap */
.start__inner { display: grid; gap: 20px; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-panel); background: var(--white);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--brand-yellow); }
@media (min-width: 900px) { .start__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; } }
.start .lead { margin-block-start: 6px; }
.filters { display: grid; gap: 14px; margin-block-end: 20px; padding: 20px; border-radius: var(--r-panel); background: var(--page); }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__label { min-inline-size: 6.5em; color: var(--text-3); font-size: var(--t-micro); font-weight: 600; }
@media (max-width: 639.98px) { .filters__label { flex-basis: 100%; min-inline-size: 0; } }   /* a phone: the label heads its options */
.filters__count { color: var(--text-2); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.case__client { margin-block-end: 10px; color: var(--accent); font-weight: 600; }
.narrow .h2 { margin-block: 40px 14px; }
.narrow .h2:first-child { margin-block-start: 0; }
.implication { max-inline-size: 38em; margin-block-start: 24px; padding-inline-start: 22px; border-inline-start: 3px solid var(--brand-yellow);
  font-size: clamp(1.1875rem, 1rem + .7vw, 1.625rem); font-weight: 500; line-height: 1.5; }
.entities { display: grid; gap: 10px; margin-block-start: 16px; }
.entities__title { margin-block-start: clamp(48px, 6vw, 72px); }   /* About: the offices follow the team as a second block */
@media (min-width: 900px) { .entities--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.entity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 2px 14px; padding: 16px; border-radius: var(--r-card); background: var(--page); }
.entity .ico { grid-row: span 2; }
.entity span { color: var(--text-2); font-size: var(--t-small); }
/* each entity's registration numbers, a third row under its name and place (the icon keeps centring on those two) */
.entity__reg { grid-column: 2; display: grid; gap: 2px; margin-block-start: 6px; color: var(--text-3); font-size: var(--t-micro); }
.entity__reg div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.entity__reg dd { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------------------------------- contact */
/* email only, no form (decided 26 Oct 2026): the ways to reach the team beside the two entities */
.contact__grid { display: grid; gap: 8px 48px; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .contact__grid .entities { margin-block-start: 0; } }
.direct { margin-block-end: 20px; }
.direct li { display: grid; gap: 2px; padding-block: 12px; border-block-end: 1px solid var(--line); }
.direct li > span { color: var(--text-3); font-size: var(--t-micro); }
.direct a { justify-self: start; display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; text-decoration: none; }
.direct a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------------------------------- footer
   The playground shows only where WebGL runs (site.js adds .has-webgl); the cubes are drawn by playground.js. */
.site-footer { background: var(--brand-ink); color: var(--white); overflow-x: clip; }
.play { display: none; position: relative; }
.has-webgl .play { display: block; }
.play__stage { position: relative; block-size: clamp(200px, 24vw, 340px); }
.play__stage::after { content: ""; position: absolute; inset: 0 0 auto; block-size: 22%; pointer-events: none;
  background: linear-gradient(var(--brand-ink), transparent); }
.play__stage canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; cursor: grab; touch-action: pan-y; }
.play__stage canvas:active { cursor: grabbing; }
.play__text { position: absolute; inset-inline: 0; inset-block-end: 18px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 20px; pointer-events: none; }
.play__cta { pointer-events: auto; min-block-size: 44px; }
.play__cta:not([hidden]) { animation: word-in var(--dur-4) var(--ease-out) both; }
/* the guide: a soft yellow module that shows what a hand can do here, until a hand arrives */
.play__guide { position: absolute; inset: 0 auto auto 0; inline-size: 22px; block-size: 22px; margin: -11px 0 0 -11px; border-radius: 5px;
  background: var(--brand-yellow); pointer-events: none; box-shadow: 0 0 0 6px rgb(255 190 10 / .22), 0 0 0 16px rgb(255 190 10 / .08);
  transition: opacity var(--dur-4) var(--ease-out), scale var(--dur-4) var(--ease-out); }
.play__guide.is-gone { opacity: 0; scale: .4; }
.play__title { font-size: var(--t-lead); font-weight: 600; min-block-size: 1.5em; }
.play__hint { color: rgb(255 255 255 / .7); font-size: var(--t-micro); }
.footer__grid { display: grid; gap: 40px 24px; padding-block: 64px 48px; border-block-start: 1px solid rgb(255 255 255 / .12); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); } .footer__brand { grid-column: auto; } }
.footer__brand img { inline-size: 148px; }
.footer__brand p { max-inline-size: 30ch; margin-block-start: 18px; color: rgb(255 255 255 / .72); font-size: var(--t-small); }
.footer__title { margin-block-end: 6px; color: var(--brand-sky); font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer__title:lang(ar) { letter-spacing: 0; text-transform: none; }
.footer__col a { display: inline-flex; align-items: center; min-block-size: 44px; color: rgb(255 255 255 / .82); font-size: var(--t-small);
  text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.footer__col a:hover { color: var(--white); text-decoration: underline; }
.footer__col .footer__all { color: var(--brand-sky); }
.footer__muted { display: block; padding-block: 8px; color: rgb(255 255 255 / .6); font-size: var(--t-small); }
.footer__plate { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-block: 24px 40px; border-block-start: 1px solid rgb(255 255 255 / .12);
  color: rgb(255 255 255 / .6); font-size: var(--t-micro); }
.footer__plate p { display: grid; }
.footer__plate b { color: rgb(255 255 255 / .85); font-weight: 500; }
.footer__plate .footer__legal { display: block; align-self: end; margin-inline-start: auto; }

/* ---------------------------------------------------------------------------------------------------- phones
   Long groups become rows you swipe (the next card peeks in), long lists show their first items, the menu leads
   with the main action. */
@media (max-width: 767.98px) {
  .svcs__grid, .deliver, .assure__grid, .ai__paths { grid-auto-flow: column; grid-auto-columns: 88%; grid-template-columns: none; overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
  :is(.svcs__grid, .deliver, .assure__grid, .ai__paths)::-webkit-scrollbar { display: none; }
  :is(.svcs__grid, .deliver, .assure__grid, .ai__paths) > * { scroll-snap-align: start; }
  [data-fold-list]:not(.is-open) > li:nth-child(n + 7) { display: none; }
  .clients__wall { --cols: 2; }
}
@media (max-width: 1023.98px) {
  :is(.deliver, .assure__grid, .ai__paths, .story__steps):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .story__steps { grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .story__steps::-webkit-scrollbar { display: none; }
  .story__step { scroll-snap-align: start; grid-template-columns: 40px minmax(0, 1fr); }
}
@media (max-width: 959.98px) {                                   /* the sector tabs fade at the far edge: there is more */
  [dir="ltr"] .pick__tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  [dir="rtl"] .pick__tabs { -webkit-mask-image: linear-gradient(270deg, #000 82%, transparent); mask-image: linear-gradient(270deg, #000 82%, transparent); }
}
.more--phone { display: none; }
@media (max-width: 767.98px) { .more--phone { display: block; } }
/* the phone menu: groups that open, a chevron that turns */
.sheet__grp > summary { display: flex; align-items: center; justify-content: space-between; min-block-size: 52px; padding-block: 4px;
  border-block-end: 1px solid var(--line); color: var(--text); font-size: var(--t-lead); font-weight: 600; letter-spacing: 0; text-transform: none;
  list-style: none; cursor: pointer; }
.sheet__grp > summary::-webkit-details-marker { display: none; }
.sheet__grp > summary::after { content: ""; inline-size: 8px; block-size: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.sheet__grp[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.sheet__grp ul { padding-inline-start: 6px; }
.sheet__plain a { display: flex; align-items: center; min-block-size: 52px; border-block-end: 1px solid var(--line); font-size: var(--t-lead);
  font-weight: 600; text-decoration: none; }
.sheet__end { padding-block: 8px 4px; }
.sheet__end .btn { inline-size: 100%; }
/* the footer's link groups fold on phones (site.js turns each title into a button there); elsewhere they simply stand */
@media (max-width: 639.98px) {
  .footer__toggle { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-block-size: 48px; padding: 0;
    border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: start; cursor: pointer; }
  .footer__toggle::after { content: ""; inline-size: 7px; block-size: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
  .footer__toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
  .footer__grid { gap: 8px; }
}

/* ---------------------------------------------------------------------------------------------------- page transitions */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: var(--dur-2); }

/* ---------------------------------------------------------------------------------------------------- reduced motion
   Everything is shown in its final state; nothing moves on its own. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js [data-reveal]:not(.is-in) { opacity: 1; }
  .js [data-reveal].is-in, .pick__panel:not([hidden]), .mega:not([hidden]), .sheet:not([hidden]) { animation: none; }
  .mod { translate: none; transition: none; }
  .js main .ico:not(.is-in) .m, .js main .ico:not(.is-in) .a { transform: none; }
  .ico .m, .cell, .faq__item::details-content { transition: none; }
  .handover__check, .handover__check::after { transition: none; }
  a:hover .ico .a, .assure__item:hover .ico .a, .stage[data-step="6"] .cell.y { animation: none; }
  a.card:hover, .pick__offers a:hover, .btn:active { transform: none; }
  .play__hint { display: none; }
}

@media print {
  .site-header, .sheet, .play, .skip { display: none !important; }
  .site-footer { background: none; color: var(--text); }
  .js [data-reveal]:not(.is-in) { opacity: 1; }
  .agent [data-beat] { display: revert !important; }             /* the demo prints as its finished tasks */
  .agent .agent__panels { block-size: auto !important; overflow: visible !important; mask-image: none !important; }
}

/* one press for everything that can be tapped (a touch screen never hovers), and a hover for the controls that had none */
:is(.pick__tab, .chip, a.card, .case-row, .subnav__link, .agent__task):active { transform: scale(.985); }
:is(.burger, .sheet__grp > summary, .sheet__plain a):hover { background: var(--raised); }
@media (max-width: 639.98px) { .footer__toggle:hover { background: rgb(255 255 255 / .06); } }