/* 3CORE website v04. Idea: the blue circle is the core that gathers the four services.
   v04 colour use on the web (documented in brand/3core_web-colors_v04.md; identity files unchanged):
   white base, cool light #F3F5FF for supporting areas, ink for the video section, core blue for the closing section.
   Tokens follow brand/3core_tokens_v01.css (approved). One main blue circle per composition.
   Motion states only apply under html.mo (motion allowed) and html.rv (reveals armed), both set by boot.js,
   so the page is complete without JavaScript and with prefers-reduced-motion. */

@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("plex-arabic-400.ec848fdcd4.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("plex-arabic-600.721bbe51aa.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("plex-arabic-700.16345c33aa.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("plex-sans-400.384cdae244.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("plex-sans-600.5471c1683c.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("plex-sans-700.0ef10ecb12.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("plex-mono-500.ae65625b59.woff2") format("woff2"); }

:root {
  --c-paper: #FFFFFF; --c-white: #FFFFFF; --c-cool: #F3F5FF; --c-ink: #14161C; --c-slate: #5B6170; --c-core: #2B4BFF;
  --c-ember: #FF6B3D;
  --c-hair: #DCE0EB; --c-fill: #E3E7F4; --c-hair-dark: #2D313B; --c-mute-dark: #A9AEBA; --c-core-light: #8EA0FF;
  --c-dim: #868C9C;   /* inactive large numerals (24px+): 3.4:1 on white, 3.1:1 on #F3F5FF */
  --f-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;
  --f-en: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", Consolas, monospace;
  --pad: clamp(20px, 5.6vw, 80px);
  --max: 1280px;
  --gap: clamp(16px, 2.2vw, 32px);
  --head-h: 64px;
  /* one easing family: expo-out settles, in-out for drawing */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .35s; --t-mid: .7s; --t-slow: 1.1s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-paper); scroll-padding-top: calc(var(--head-h) + 16px); }
body { margin: 0; color: var(--c-ink); background: var(--c-paper); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
html[lang="ar"] body { font-family: var(--f-ar); font-size: 18px; line-height: 1.8; }
html[lang="en"] body { font-family: var(--f-en); }
html[lang="ar"] bdi, .en { font-family: var(--f-en); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .03em; direction: ltr; unicode-bidi: isolate; }
/* mono runs are LTR inside; as blocks in an RTL page they must still sit at the reading start */
html[dir="rtl"] .mono { text-align: right; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
:focus-visible { outline: 3px solid var(--c-core); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible, .contact :focus-visible, .site-foot :focus-visible { outline-color: var(--c-core-light); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 60; background: var(--c-ink); color: var(--c-paper); padding: 10px 16px; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

/* ---------- type scale ---------- */
h1, h2 { font-weight: 700; text-wrap: balance; }
html[lang="en"] h1 { font-size: clamp(38px, 5.4vw, 84px); line-height: 1.02; letter-spacing: -.03em; }
html[lang="ar"] h1 { font-size: clamp(34px, 4.9vw, 76px); line-height: 1.3; }
html[lang="en"] h2 { font-size: clamp(32px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -.025em; }
html[lang="ar"] h2 { font-size: clamp(30px, 4vw, 62px); line-height: 1.35; }
h3 { font-weight: 700; }
html[lang="en"] h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.01em; }
html[lang="ar"] h3 { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.5; }
.lede { font-size: clamp(19px, 1.7vw, 23px); }
html[lang="ar"] .lede { line-height: 1.85; }
html[lang="en"] .lede { line-height: 1.5; }
.slate { color: var(--c-slate); }
.label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--c-slate); }
html[lang="ar"] .label { font-size: 15px; }
.label::before { content: ""; width: 14px; height: 2px; background: currentColor; flex: none; }

/* ---------- buttons: the core dot at the reading start fills the button ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 12px 22px; padding-inline-start: 44px; background: var(--c-ink); color: var(--c-paper); border: 2px solid var(--c-ink);
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
html[lang="ar"] .btn { font-size: 17px; }
.btn::before { content: ""; position: absolute; z-index: -1; width: 12px; height: 12px; border-radius: 50%; background: var(--c-core);
  inset-inline-start: 20px; top: calc(50% - 6px); transition: transform .6s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: scale(44); }
.btn:hover, .btn:focus-visible { border-color: var(--c-core); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--c-ink); }
.btn .arr { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
html[dir="rtl"] .btn .arr { transform: scaleX(-1); }
.btn:hover .arr { transform: translateX(3px); }
html[dir="rtl"] .btn:hover .arr { transform: scaleX(-1) translateX(3px); }
.btn .arr.down, html[dir="rtl"] .btn .arr.down { transform: rotate(90deg); }
.btn:hover .arr.down, html[dir="rtl"] .btn:hover .arr.down { transform: rotate(90deg) translateX(3px); }
.btn-sm { min-height: 40px; padding: 8px 16px; padding-inline-start: 36px; font-size: 15px; }
.btn-sm::before { width: 9px; height: 9px; inset-inline-start: 16px; top: calc(50% - 4.5px); }
.btn .meta { font-family: var(--f-mono); font-weight: 500; font-size: 12px; opacity: .7; direction: ltr; unicode-bidi: isolate; }

/* ---------- header + menu ---------- */
.site-head { position: sticky; top: 0; z-index: 40; height: var(--head-h); background: rgba(245, 243, 238, 0); border-bottom: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform .5s var(--ease); }
.site-head.solid { background: var(--c-white); border-color: var(--c-hair); }
.site-head.hide { transform: translateY(-100%); }
.head-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: block; width: 100px; flex: none; }
.brand svg { width: 100%; height: auto; }
.js .site-head .brand { opacity: 0; transition: opacity .45s var(--ease); }
.js .site-head.show-brand .brand, .js .menu-open .site-head .brand { opacity: 1; }
.nav { display: none; gap: 28px; margin-inline-start: auto; }
.nav a { position: relative; font-size: 15px; font-weight: 600; text-decoration: none; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--c-core); transform: scaleX(0); transform-origin: var(--from, left); transition: transform .45s var(--ease); }
html[dir="rtl"] .nav a::after { --from: right; }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.head-actions { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.nav + .head-actions { margin-inline-start: 8px; }
.lang { font-size: 15px; font-weight: 600; text-decoration: none; padding: 8px 2px; }
.lang:hover { color: var(--c-core); }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; margin-inline-end: -10px; border: 0; background: transparent; cursor: pointer; }
.js .menu-btn { display: block; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--c-ink); transition: transform .45s var(--ease), top .45s var(--ease); }
.menu-btn span:nth-child(1) { top: 17px; } .menu-btn span:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.head-cta { display: none; }
@media (min-width: 960px) { .nav { display: flex; } .js .menu-btn { display: none; } .head-cta { display: inline-flex; } }

.menu { position: fixed; inset: 0; z-index: 35; background: var(--c-paper); padding: calc(var(--head-h) + 24px) var(--pad) 32px; display: flex; flex-direction: column;
  visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease), visibility 0s linear .6s; overflow-y: auto; }
.menu.open { visibility: visible; clip-path: inset(0); transition: clip-path .6s var(--ease), visibility 0s; }
.menu nav { display: grid; border-top: 2px solid var(--c-ink); }
.menu nav a { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--c-hair); text-decoration: none; font-weight: 700; font-size: clamp(28px, 8vw, 40px); line-height: 1.25; }
.menu nav a .mono { font-size: 13px; color: var(--c-core); }
.menu .menu-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; }
.menu .menu-foot a { font-weight: 600; }
.mo .menu nav a { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.mo .menu.open nav a { opacity: 1; transform: none; }
.mo .menu.open nav a:nth-child(2) { transition-delay: .05s; } .mo .menu.open nav a:nth-child(3) { transition-delay: .1s; }
.mo .menu.open nav a:nth-child(4) { transition-delay: .15s; } .mo .menu.open nav a:nth-child(5) { transition-delay: .2s; } .mo .menu.open nav a:nth-child(6) { transition-delay: .25s; }
.menu-open { overflow: hidden; }

/* ---------- hero: headline, the wordmark, and the four services hanging from the core ---------- */
.hero { padding-block: clamp(24px, 5vh, 64px) clamp(56px, 9vh, 112px); }
.hero-in { position: relative; }
.hero-top { display: grid; gap: 22px; }
.hero-side { display: grid; gap: 22px; align-content: end; }
.hero-side .lede { color: var(--c-slate); max-width: 560px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-mark { margin-top: clamp(32px, 6vh, 64px); width: 100%; }
.hero-mark svg { width: 100%; height: auto; overflow: visible; }
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-lines path { fill: none; stroke: var(--c-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.hero-lines path.hot { stroke: var(--c-core); }
.ports { margin-top: clamp(44px, 7vh, 80px); display: grid; border-top: 1px solid var(--c-hair); }
.port { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--c-hair); text-decoration: none; }
.port .mono { color: var(--c-core); font-size: 13px; padding-top: 4px; }
.port strong { font-size: 18px; line-height: 1.35; transition: color .3s; }
.port .what { grid-column: 2; font-size: 14.5px; color: var(--c-slate); line-height: 1.5; }
.port:hover strong, .port:focus-visible strong { color: var(--c-core); }
@media (min-width: 900px) {
  .hero-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) 64px; align-items: end; }
  .ports { grid-template-columns: repeat(4, 1fr); gap: var(--gap); border-top: 0; }
  .port { grid-template-columns: 1fr; border-bottom: 0; padding: 22px 0 0; gap: 6px; }
  .port .what { grid-column: 1; }
}

/* ---------- sections ---------- */
.sec { padding-block: clamp(72px, 11vw, 160px); }
.bg-white { background: var(--c-white); }
.sh { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 80px); }
.sh .rule { height: 2px; background: var(--c-ink); transform-origin: var(--from, left); }
html[dir="rtl"] .sh .rule { --from: right; }
@media (min-width: 900px) { .sh { grid-template-columns: 3fr 9fr; gap: 20px var(--gap); align-items: start; } .sh .rule { grid-column: 1 / -1; } .sh .label { padding-top: 10px; } }

/* about */
.about-body { display: grid; gap: 48px; }
.statement { font-weight: 600; font-size: clamp(22px, 2.6vw, 38px); }
html[lang="en"] .statement { line-height: 1.32; letter-spacing: -.012em; }
html[lang="ar"] .statement { line-height: 1.7; }
.points { display: grid; gap: 28px; }
.points > div { display: grid; gap: 8px; padding-top: 16px; border-top: 2px solid var(--c-ink); }
.points p { color: var(--c-slate); }
.note { color: var(--c-slate); }
@media (min-width: 900px) {
  .about-body { grid-template-columns: 3fr 6fr 3fr; gap: 48px var(--gap); }
  .about-body .statement { grid-column: 2 / 3; }
  .about-body .vid { grid-column: 3; grid-row: 1 / 3; }
  .about-body .points { grid-column: 2 / 3; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .about-body .note { grid-column: 2 / 3; }
}

/* video: click to play, poster first */
.vid { display: grid; gap: 10px; align-content: start; }
.vid-frame { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; background: var(--c-paper); border: 1px solid var(--c-hair); overflow: hidden; }
.vid-frame video { width: 100%; height: 100%; object-fit: cover; }
.vid-play { position: absolute; inset: 0; display: grid; place-items: end start; padding: 18px; border: 0; background: transparent; cursor: pointer; }
.vid-play .pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; padding-inline-start: 10px; background: var(--c-ink); color: var(--c-paper); font-weight: 600; font-size: 15px; transition: background-color var(--t-fast) var(--ease); }
.vid-play .tri { width: 24px; height: 24px; display: grid; place-items: center; }
.vid-play .tri::after { content: ""; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.vid-play:hover .pill, .vid-play:focus-visible .pill { background: var(--c-core); }
.vid figcaption { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--c-slate); }

/* ---------- services: chapters + one sticky stage (desktop), inline diagrams (mobile) ---------- */
.scene { display: grid; }
.chap { padding-block: 44px; border-top: 1px solid var(--c-hair); }
.chap:first-child { border-top: 2px solid var(--c-ink); }
.chap .num { display: block; color: var(--c-core); font-size: clamp(56px, 7vw, 104px); line-height: .82; letter-spacing: -.04em; }
html[dir="rtl"] .chap .num { text-align: right; }
.chap h3 { margin-top: 16px; font-size: clamp(28px, 3vw, 44px); line-height: 1.15; }
html[lang="ar"] .chap h3 { line-height: 1.4; }
.chap .what { margin-top: 10px; }
.chap .need-s { margin-top: 12px; color: var(--c-slate); max-width: 560px; }
.chap .fit { margin-top: 12px; font-size: 15.5px; color: var(--c-slate); }
.chap .fit b { color: var(--c-ink); font-weight: 600; margin-inline-end: 6px; }
.tag { display: inline-block; margin-top: 14px; border: 2px solid var(--c-ink); padding: 3px 12px; font-size: 14px; font-weight: 600; }
.chap-fig { margin-top: 24px; background: var(--c-cool); padding: 16px 12px; }
.chap-fig figcaption { font-size: 13px; color: var(--c-slate); margin-top: 6px; }
.rules { border-top: 2px solid var(--c-ink); margin-top: 10px; }
.rules li { padding: 11px 0; border-bottom: 1px solid var(--c-hair); }
.chap .do { margin-top: 28px; }
.outs { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.outs li { padding: 4px 10px; border: 1px solid var(--c-ink); font-size: 14px; font-weight: 600; }
.scope { margin-top: 22px; border-top: 1px solid var(--c-hair); }
.scope summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 15px; color: var(--c-slate); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.scope summary::-webkit-details-marker { display: none; }
.scope summary::after { content: "+"; font-family: var(--f-mono); font-size: 18px; color: var(--c-ink); transition: transform var(--t-fast) var(--ease); }
.scope[open] summary::after { transform: rotate(45deg); }
.scope summary:hover { color: var(--c-ink); }
.scope .items { padding-bottom: 12px; }
.scope .items span:not(:last-child)::after { content: "  ·  "; color: var(--c-slate); white-space: pre; }
.stage { display: none; }

@media (min-width: 1000px) {
  .scene { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .chap { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding-block: 10svh; }
  .chap-fig { display: none; }
  .chap .num { transition: color .5s var(--ease); }
  .js .chap:not(.active) .num { color: var(--c-dim); }
  .stage { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; position: sticky; top: calc(var(--head-h) + 20px);
    height: calc(100svh - var(--head-h) - 40px); min-height: 520px; padding: 22px 24px; background: var(--c-cool); border: 0; }
  .stage-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .stage-top .cur { font-weight: 700; font-size: 18px; }
  .stage-top .mono { color: var(--c-slate); font-size: 13px; }
  .stage-art { position: relative; align-self: center; justify-self: center; width: min(100%, calc((100svh - var(--head-h) - 220px) * 640 / 420)); aspect-ratio: 640 / 420; }
  .stage-art .dg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s var(--ease); }
  .stage-art .dg.on { opacity: 1; }
  .no-js .stage-art .dg:first-of-type { opacity: 1; }
  .stage-core { position: absolute; left: 0; top: 0; width: 6.875%; aspect-ratio: 1; border-radius: 50%; background: var(--c-core); will-change: transform; pointer-events: none; }
  .no-js .stage-core { display: none; }
  .stage-foot { display: grid; gap: 10px; }
  .rail { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-hair); }
  .rail a { padding-top: 10px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--c-slate); border-top: 2px solid transparent; margin-top: -1px; transition: color .3s, border-color .45s var(--ease); }
  .rail a .mono { display: block; font-size: 12px; }
  html[dir="rtl"] .rail a .mono { text-align: right; }
  .rail a:hover { color: var(--c-ink); }
  .rail a[aria-current="true"] { color: var(--c-ink); border-top-color: var(--c-core); }
  .stage-note { font-size: 12.5px; color: var(--c-slate); }
}

/* diagrams (SVG, viewBox 640x420) */
.dg { width: 100%; height: auto; overflow: visible; }
.dg .ln { fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dg .ln.thin { stroke-width: 1.5; }
.dg .ln.dash { stroke-dasharray: 1; }
.dg .ln.loop { stroke: var(--c-slate); stroke-dasharray: 1; }
.dg .box { fill: var(--c-white); stroke: var(--c-ink); stroke-width: 2; }
.dg .box.strong { stroke-width: 3; }
.dg .fillh { fill: var(--c-fill); }
.dg text { direction: ltr; }
.dg .ink { fill: var(--c-ink); }
.dg .lb { fill: var(--c-ink); font-size: 19px; font-weight: 600; }
.dg .lb.s { fill: var(--c-slate); font-size: 16px; }
.dg .mono-t { font-family: var(--f-mono); font-weight: 500; fill: var(--c-slate); font-size: 15px; }
/* phones: the diagram is ~350px wide, so its type is set larger in viewBox units to stay readable (about 13px) */
@media (max-width: 999px) { .chap-fig .dg .lb { font-size: 25px; } .chap-fig .dg .lb.s { font-size: 21px; } .chap-fig .dg .mono-t { font-size: 18px; } }
html[lang="ar"] .dg .lb { font-family: var(--f-ar); }
html[lang="en"] .dg .lb { font-family: var(--f-en); }
.dg .d-core { fill: var(--c-core); }
.dg .pk { fill: var(--c-ink); opacity: 0; }
/* scroll scrubbing (html.scrub): parts start empty, main.js sets each part from the scroll position.
   Without it (no JS, reduced motion) the diagrams are complete. */
.scrub .dg .ln { stroke-dashoffset: 1; }
.scrub .dg [data-s]:not(.ln):not(.pk) { opacity: 0; }
.scrub .dg .d-core { opacity: 0; }
.dg .it, .dg text { transform-box: fill-box; }

/* ---------- combinations: a formula per scenario ---------- */
.combos { border-top: 2px solid var(--c-ink); }
.combo { display: grid; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--c-hair); }
.combo .illus { font-size: 13px; font-weight: 600; color: var(--c-slate); }
.combo .need-s { color: var(--c-slate); margin-top: 6px; }
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.formula .plus { font-family: var(--f-mono); color: var(--c-slate); }
.formula a { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border: 2px solid var(--c-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .3s, color .3s; }
.formula a .mono { color: var(--c-core); font-size: 12px; }
.formula a:hover, .formula a:focus-visible { background: var(--c-ink); color: var(--c-paper); }
.formula a:hover .mono, .formula a:focus-visible .mono { color: var(--c-core-light); }
@media (min-width: 1000px) { .combo { grid-template-columns: 4fr 3fr 5fr; gap: var(--gap); align-items: start; } }

/* ---------- process: a line that follows the reader on desktop ---------- */
.steps-wrap { position: relative; }
.steps { display: grid; }
.steps li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--c-hair); }
.steps li:first-child { border-top: 2px solid var(--c-ink); }
.steps .n { color: var(--c-core); font-size: 18px; padding-top: 2px; transition: color .4s var(--ease); }
.steps p { color: var(--c-slate); margin-top: 6px; }
.track { display: none; }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--gap); padding-top: 22px; }
  .steps li, .steps li:first-child { grid-template-columns: 1fr; border: 0; padding: 18px 0 0; }
  .steps .n { font-size: 34px; }
  .js .steps li:not(.reached) .n { color: var(--c-dim); }
  .track { display: block; position: absolute; top: 0; inset-inline: 0; height: 2px; background: var(--c-hair); }
  .track i { position: absolute; inset: 0; background: var(--c-ink); transform: scaleX(var(--p, 1)); transform-origin: var(--from, left); }
  html[dir="rtl"] .track i { --from: right; }
}

/* ---------- work (only rendered when there is published work) ---------- */
.work-list { display: grid; gap: 20px; }
.work-card { display: grid; gap: 14px; text-decoration: none; }
.work-card .img { aspect-ratio: 4 / 3; background: var(--c-hair); overflow: hidden; }
.work-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.work-card:hover .img img { transform: scale(1.03); }
.work-card .meta { color: var(--c-slate); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip-s { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 10px; border: 2px solid var(--c-ink); font-size: 14px; font-weight: 600; }
.chips .chip-s .mono { color: var(--c-core); font-size: 12px; }
@media (min-width: 760px) { .work-list { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.case { padding-block: clamp(40px, 6vw, 96px); }
.case-facts { display: grid; border-top: 2px solid var(--c-ink); margin-block: 32px; }
.case-facts > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-hair); }
.case-body { display: grid; gap: 40px; max-width: 860px; }
.case-body .need { font-size: clamp(18px, 1.7vw, 22px); }
.case-imgs { display: grid; gap: 16px; margin-block: 40px; }
.case-imgs img { width: 100%; height: auto; background: var(--c-hair); }
.results li { padding: 14px 0; border-bottom: 1px solid var(--c-hair); }
.results .src { display: block; color: var(--c-slate); font-size: 14px; }

/* ---------- contact: ink section, white text, the blue core beside the handle ----------
   text #FFFFFF on #14161C 18.1:1 · labels #A9AEBA 8.1:1 · numerals/hover #8EA0FF 7.4:1 · core: graphic 3.06:1 */
.contact { background: var(--c-ink); color: var(--c-white); padding-block: clamp(80px, 12vw, 168px) clamp(64px, 8vw, 112px); }
.contact .label, .contact .slate { color: var(--c-mute-dark); }
.contact .sh .rule { background: var(--c-white); }
.ig { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 28px); margin-top: clamp(28px, 4vw, 48px); text-decoration: none; max-width: 100%; }
.ig .dot { flex: none; width: clamp(40px, 6vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--c-core); transition: transform .6s var(--ease); }
.ig .handle { font-family: var(--f-en); font-weight: 600; font-size: clamp(30px, 6.6vw, 104px); line-height: 1; letter-spacing: -.03em; direction: ltr; unicode-bidi: isolate;
  background: linear-gradient(currentColor, currentColor) no-repeat var(--from, left) 100% / 0 3px; padding-bottom: .12em; transition: background-size .6s var(--ease); overflow-wrap: anywhere; }
html[dir="rtl"] .ig .handle { --from: right; }
.ig:hover .dot, .ig:focus-visible .dot { transform: scale(1.12); }
.ig:hover .handle, .ig:focus-visible .handle { background-size: 100% 3px; }
.ct-grid { display: grid; gap: 48px; margin-top: clamp(56px, 8vw, 104px); }
.send { counter-reset: s; border-top: 2px solid var(--c-white); margin-top: 12px; }
.send li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-hair-dark); }
.send li::before { content: counter(s); font-family: var(--f-mono); font-weight: 500; color: var(--c-core-light); }
.channels { display: grid; gap: 10px; margin-bottom: 32px; }
.ch { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--c-hair-dark); text-decoration: none; transition: border-color .35s var(--ease), background-color .35s; }
.ch:hover, .ch:focus-visible { border-color: var(--c-core-light); }
.ch .k { display: block; font-size: 13px; color: var(--c-mute-dark); }
.ch .v { display: block; font-size: 19px; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .ch .v { text-align: right; }
.ch .go, .go { width: 22px; height: 22px; flex: none; }
html[dir="rtl"] .go { transform: scaleX(-1); }
.downloads { display: grid; gap: 4px; }
.dl { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-hair-dark); text-decoration: none; font-weight: 600; transition: color .3s; }
.dl:hover, .dl:focus-visible { color: var(--c-core-light); }
.dl .mono { font-size: 12px; color: var(--c-mute-dark); }
@media (min-width: 900px) { .ct-grid { grid-template-columns: 6fr 5fr; gap: 96px; } }

/* footer */
.site-foot { background: var(--c-ink); color: var(--c-mute-dark); border-top: 1px solid var(--c-hair-dark); padding-block: 28px 36px; font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.foot-in .brand { width: 88px; opacity: 1 !important; }
.foot-in a { text-decoration: none; }
.foot-in a:hover { color: var(--c-paper); }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.nf { min-height: 70svh; display: grid; align-content: center; gap: 20px; }

/* ================= motion language =================
   1 opening: the core arrives and settles into the O; letters leave it; the services hang from it.
   2 section heads: rule draws from the reading start, heading wipes in along the reading direction.
   3 bodies: short fade + rise, once. Nothing keeps moving while reading. */
.mo .hero-mark .core { transform-box: fill-box; transform-origin: center; animation: core-in .95s var(--ease) both; }
@keyframes core-in { 0% { transform: scale(1.32); opacity: 0; } 18% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.mo .hero-mark .l { animation: letter-in .85s var(--ease) both; }
.mo .hero-mark .l-C, .mo .hero-mark .l-R { animation-delay: .28s; }
.mo .hero-mark .l-3, .mo .hero-mark .l-E { animation-delay: .38s; }
.mo .hero-mark .l-3, .mo .hero-mark .l-C { --dx: 160px; }
.mo .hero-mark .l-R, .mo .hero-mark .l-E { --dx: -160px; }
@keyframes letter-in { from { opacity: 0; transform: translateX(var(--dx)); } }
.mo .hero-top h1 { animation: wipe-in 1s var(--ease) .05s both; }
.mo .hero-side > * { animation: rise .8s var(--ease) both; }
.mo .hero-side > :nth-child(1) { animation-delay: .2s; } .mo .hero-side > :nth-child(2) { animation-delay: .3s; }
.mo .port { animation: rise .7s var(--ease) both; }
.mo .port:nth-child(1) { animation-delay: 1.15s; } .mo .port:nth-child(2) { animation-delay: 1.22s; } .mo .port:nth-child(3) { animation-delay: 1.29s; } .mo .port:nth-child(4) { animation-delay: 1.36s; }
.mo .hero-lines path { stroke-dasharray: 1; animation: draw .55s var(--ease-io) both; }
.mo .hero-lines .stem { animation-delay: .7s; } .mo .hero-lines .bus { animation-delay: .95s; } .mo .hero-lines .drop { animation-delay: 1.1s; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes wipe-in { from { clip-path: inset(-12% 0 -12% 100%); } to { clip-path: inset(-12% 0 -12% 0); } }
@keyframes wipe-in-rtl { from { clip-path: inset(-12% 100% -12% 0); } to { clip-path: inset(-12% 0 -12% 0); } }
html[dir="rtl"].mo .hero-top h1 { animation-name: wipe-in-rtl; }

.rv [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rv [data-reveal].in { opacity: 1; transform: none; }
.rv [data-wipe] { clip-path: inset(-12% 0 -12% 100%); transition: clip-path 1s var(--ease) .1s; }
html[dir="rtl"].rv [data-wipe] { clip-path: inset(-12% 100% -12% 0); }
.rv [data-wipe].in, html[dir="rtl"].rv [data-wipe].in { clip-path: inset(-12% 0 -12% 0); }
.rv .rule[data-draw] { transform: scaleX(0); transition: transform 1s var(--ease-io); }
.rv .rule[data-draw].in { transform: scaleX(1); }
.rv .ig[data-reveal] { opacity: 1; transform: none; }
.rv .ig .dot { transform: scale(0); transition: transform .9s var(--ease) .1s; }
.rv .ig .handle { opacity: 0; transform: translateX(var(--nx, -28px)); transition: opacity .7s var(--ease) .35s, transform .9s var(--ease) .3s, background-size .6s var(--ease); }
html[dir="rtl"].rv .ig .handle { --nx: 28px; }
.rv .ig.in .dot { transform: none; }
.rv .ig.in .handle { opacity: 1; transform: none; }
.rv .ig.in:hover .dot, .rv .ig.in:focus-visible .dot { transform: scale(1.12); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media print {
  .site-head, .skip, .vid, .stage, .menu { display: none !important; }
  [data-reveal], [data-wipe], .hero-mark *, .dg * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .chap-fig { display: block !important; }
}

/* ================= v04 additions ================= */
.bg-cool { background: var(--c-cool); }
.combo { border-color: var(--c-hair); }

/* about + video on ink */
.dark { background: var(--c-ink); color: var(--c-white); }
.dark .label { color: var(--c-mute-dark); }
.dark .sh .rule { background: var(--c-white); }
.about-in { display: grid; gap: 40px; align-items: center; }
.about .points { margin: 0; gap: 0; }
.about .points > div { border-top: 1px solid var(--c-hair-dark); padding: 22px 0; }
.about .points > div:first-child { border-top: 2px solid var(--c-white); }
.about .points h3 { font-size: clamp(26px, 3vw, 44px); line-height: 1.15; }
html[lang="ar"] .about .points h3 { line-height: 1.45; }
.about .points p { color: var(--c-mute-dark); margin-top: 4px; }
.about .vid-frame { border-color: var(--c-hair-dark); }
@media (min-width: 900px) { .about-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; } .about .vid { justify-items: end; } }

/* video: autoplay muted loop on screen; small pause/resume control; big play only when needed */
.vid-frame { width: min(100%, 320px); }
.vid-toggle { position: absolute; bottom: 12px; inset-inline-end: 12px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; background: var(--c-ink); color: var(--c-white); cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.vid-toggle:hover, .vid-toggle:focus-visible { background: var(--c-core); }
.vid-toggle .ic { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.vid-toggle.is-paused .ic { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.dark :focus-visible { outline-color: var(--c-white); }

/* service chapters: title, short description, diagram, outputs; the rest on request */
.chap .outs { margin-top: 20px; }
.chap details.more { margin-top: 18px; border-top: 1px solid var(--c-hair); }
.chap details.more summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 15px; color: var(--c-slate); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.chap details.more summary::-webkit-details-marker { display: none; }
.chap details.more summary::after { content: "+"; font-family: var(--f-mono); font-size: 18px; color: var(--c-ink); transition: transform var(--t-fast) var(--ease); }
.chap details.more[open] summary::after { transform: rotate(45deg); }
.chap details.more summary:hover { color: var(--c-ink); }
.chap details.more .rules { margin-top: 0; }
.chap details.more .items { padding: 12px 0; color: var(--c-slate); font-size: 15px; }
/* desktop: each chapter is the scroll room for its diagram (about 0.78 of a screen of progress, then a short hold) */
@media (min-width: 1000px) { .chap { min-height: 92svh; padding-block: 10svh; } .chapters { padding-bottom: 26svh; } }