/* Corplift: the home page. Loads after base.css. */
/* ---------- Cover: the glowing black surface. The ants build the symbol and it lights up blue ---------- */
/* the cover stays pinned for one screen while «من نحن» rises over it; --crest-h is set by site.js */
.cover { position: relative; height: calc(var(--vh) * 200 + var(--crest-h, 200px)); background: var(--black); color: var(--white); }
.cover__stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; }
.cover__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 56% at 50% 47%, var(--glow), rgba(39, 101, 237, .14) 48%, rgba(39, 101, 237, 0) 78%); }
/* The canvas fills the stage from the first frame. If it started at its default 300 x 150 and were sized by the script,
   its right edge (the start corner, in a right-to-left page) would jump across the screen: a layout shift nobody sees. */
.cover__ants { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cover__center { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--nav-h) var(--margin) 0; text-align: center; will-change: transform, opacity; }
/* transform-origin sits on the symbol's centre (x = 109.6 of the 1002 viewBox), so it can grow from there */
.cover__logo { width: clamp(280px, 42vw, 640px); height: auto; aspect-ratio: 1002 / 244.21; fill: var(--white); overflow: visible; transform-origin: 10.94% 50%; }
.cover__sym--blue { fill: url(#cover-blue); }
.cover__text { margin-top: clamp(40px, 7vh, 80px); display: grid; justify-items: center; }
.cover__title { font-weight: 900; font-size: clamp(32px, 8.6vw, 84px); line-height: 1.3; text-wrap: balance; }
.cover__ant, .title__ant { display: inline-block; width: .6em; height: .3em; margin-inline-start: .16em; vertical-align: .06em; fill: var(--blue-start); }
.cover__lede { margin-top: 10px; font-size: clamp(17px, 1.56vw, 22.5px); color: var(--on-black); }
.cover__actions { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
/* the proof, right under the promise: what we built and launched, by name */
.cover__proof { margin-top: clamp(26px, 5vh, 52px); display: grid; justify-items: center; gap: 8px; }
.cover__proof-label { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.cover__proof-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-weight: 700; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--on-black); }
.cover__proof-list li { display: inline-flex; align-items: center; gap: 14px; }
.cover__proof-list li + li::before { content: ""; width: 14px; height: 7px; flex: none; background: rgba(255, 255, 255, .32); clip-path: var(--ant); }
@media (max-height: 600px) { .cover__proof { display: none; } }
@media (max-width: 560px) { .cover__proof-list { gap: 2px 18px; } .cover__proof-list li + li::before { display: none; } }
.js .cover__sym { opacity: 0; }
/* the wordmark is in the markup at full width for a visit without the script; with it, the wordmark waits for the
   hero's timeline (is-run), which wipes it in after the ants have built the symbol */
.js .cover:not(.is-run) .cover__word { visibility: hidden; }
.js .cover__stage::before { opacity: 0; transition: opacity 1.6s var(--ease-out); }
.js .cover.is-lit .cover__stage::before { opacity: 1; }
.js .cover__text > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
/* until the title's lines are measured and locked, the words are out of the picture, so their box changing width is not a shift */
.js:not(.cl-built) .cover__text { visibility: hidden; }
.js .cover.is-text .cover__text > * { opacity: 1; transform: none; }
.js .cover.is-text .cover__lede { transition-delay: .14s; }
.js .cover.is-text .cover__actions { transition-delay: .28s; }
.js .cover.is-text .cover__proof { transition-delay: .42s; }
.js .cover__ant { opacity: 0; transform: translateX(.5em) rotate(70deg); transition: opacity .4s, transform .9s var(--ease-snap); }
.js .cover.is-ant .cover__ant { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .cover__stage::before { background: radial-gradient(ellipse 95% 44% at 50% 44%, var(--glow), rgba(39, 101, 237, .14) 50%, rgba(39, 101, 237, 0) 80%); }
}

/* ---------- About: the glass the cover's light sinks behind ----------
   «من نحن» rises over the pinned cover, and its first screen (the part that overlaps the cover) is a pane of glass:
   the cover's blue spot stays where it is while the section slides over it, so the light seems to sink behind the
   pane and glows through it, softened. In the dark the pane is see-through ink (see the dark scheme below). On the white
   page, glass over black would be grey, so the pane is white and carries the spot itself, as a pale blue pool that
   site.js keeps exactly where the cover's spot is (--spot-top: the cover's stage, measured from the pane's top). Below
   that first screen only the page is behind the section, so the same colour carries on, solid, without a seam. */
.about { position: relative; z-index: 1; margin-top: calc(var(--vh) * -100); overflow-x: clip; color: var(--black);
  background: linear-gradient(rgba(255, 255, 255, 0) calc(var(--vh) * 100), var(--white) 0);
  padding: clamp(36px, 4vw, 72px) 0 calc(var(--vw) * 100 * var(--tan22) + clamp(80px, 9vw, 140px)); }
.about::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(var(--vh) * 100); pointer-events: none;
  background: radial-gradient(ellipse 50% 56% at 50% calc(var(--spot-top, 0px) + var(--vh) * 47), var(--halo), rgba(143, 184, 255, .13) 48%, rgba(143, 184, 255, 0) 78%) var(--white); }
@media (max-width: 760px) {
  .about::before { background: radial-gradient(ellipse 95% 44% at 50% calc(var(--spot-top, 0px) + var(--vh) * 44), var(--halo), rgba(143, 184, 255, .13) 50%, rgba(143, 184, 255, 0) 80%) var(--white); }
}
/* the divider: a strip of the ordered ant field riding on the page's edge, drawn by site.js */
.about__band { position: absolute; left: 0; top: calc(var(--crest-h, 160px) * -1); width: 100%; height: var(--crest-h, 160px); pointer-events: none; }
.about__title { font-weight: 900; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.32; }
.about__title .kword, .about__title .kw { display: inline-block; transform-origin: 50% 60%; will-change: transform; }
/* who: the statement on the right, who we are and what we do beside it */
.about__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 112px); align-items: end; }
.about__intro { padding-bottom: .6em; }
.about__tag { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: clamp(17px, 1.35vw, 20px); }
.about__tag::before { content: ""; width: 26px; height: 13px; background: var(--blue); clip-path: var(--ant); flex: none; }
.about__lede { margin-top: 18px; font-size: clamp(20px, 1.6vw, 23px); font-weight: 400; line-height: 1.7; max-width: 22em; text-wrap: pretty; }
.js .about__lede .ink { color: var(--on-black); transition: color .5s var(--ease-out); }
.js .about__lede .ink.is-on { color: var(--black); }

/* what and how: one team instead of five vendors. Five glass cards arrive apart and close into one bar; the last one is the blue card.
   Each carries a 3D icon of what it stands for (rendered by tools/build_icons_3d.py). */
.one { margin-top: clamp(80px, 10vw, 150px); }
.one__head, .stairs__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 48px; }
.one__title, .stairs__title { font-weight: 900; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.3; text-wrap: balance; }
.one__sub { max-width: 25em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; color: var(--grey); }
.one__bar { --gap: 0px; --ri: 0px; position: relative; isolation: isolate; margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
/* one light logic for the whole bar: an even shadow under it, and under every icon the shadow it drops on its card (.one__icon::before) */
.one__bar::before { content: ""; position: absolute; inset: 58% 4% -9%; z-index: -1; pointer-events: none; filter: blur(26px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(39, 101, 237, .24), rgba(39, 101, 237, 0) 72%); }
.one__cell { --i: 0; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; row-gap: 4px; min-height: clamp(250px, 21vw, 304px); padding: clamp(18px, 1.7vw, 24px) clamp(16px, 1.8vw, 26px) clamp(20px, 1.9vw, 26px);
  background: var(--glass-light); border: 1px solid var(--glass-light-line); border-radius: var(--ri); color: var(--black);
  box-shadow: inset 0 1px 0 var(--white), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(39, 101, 237, .09);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  transition: transform .9s var(--ease-out), border-radius .9s var(--ease-out), box-shadow .9s var(--ease-out), color .5s var(--ease-out) .5s; }
.one__cell:nth-child(2) { --i: 1; } .one__cell:nth-child(3) { --i: 2; } .one__cell:nth-child(4) { --i: 3; } .one__cell:nth-child(5) { --i: 4; }
.one__cell:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.one__cell:last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); color: var(--white); box-shadow: inset 0 1px 0 var(--white), 0 0 0 1px rgba(39, 101, 237, .09), var(--shadow-blue); }
.one__cell > * { position: relative; z-index: 1; }
/* the blue card: the most important one in the row, as tinted glass */
.one__cell:last-child::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .32);
  background: linear-gradient(135deg, rgba(59, 130, 246, .94), rgba(20, 71, 229, .96)); transition: opacity .8s var(--ease-out) .5s; }
.one__num { align-self: start; font-weight: 700; font-size: 15px; color: var(--blue); transition: color .5s .5s; }
/* The light. Each icon is an object lit from above, standing a little off its card. What tells the eye so is the shadow it
   drops on the glass: a soft ellipse under its base (--base: where the drawing ends in its box), in the surface's own blue.
   Nothing glows behind it: a halo makes the object look as if it were the lamp, and smears its glass parts. */
.one__icon { --base: 88%; justify-self: end; align-self: center; width: clamp(108px, 11.4vw, 164px); height: auto; aspect-ratio: 1; margin: -10px -14px -6px 0;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out); }
.one__icon[data-riv="brand"] { --base: 84%; }
.one__icon[data-riv="systems"] { --base: 86%; }
.one__icon[data-riv="run"] { --base: 81%; }
.one__icon::before { content: ""; position: absolute; z-index: -1; inset-inline: 15%; top: calc(var(--base) - 3%); height: 13%; border-radius: 50%; pointer-events: none; filter: blur(7px);
  background: radial-gradient(closest-side, rgba(20, 71, 229, .34), rgba(20, 71, 229, .15) 60%, rgba(20, 71, 229, 0));
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out); }
.one__cell:last-child .one__icon::before { background: radial-gradient(closest-side, rgba(4, 14, 60, .5), rgba(4, 14, 60, .2) 60%, rgba(4, 14, 60, 0)); }
.one__name { grid-column: 1 / -1; font-weight: 700; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.4; }
.one__desc { grid-column: 1 / -1; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; color: var(--grey); transition: color .5s .5s; }
.one__cell:last-child .one__num, .one__cell:last-child .one__desc { color: var(--on-blue); }
/* under the pointer the icon lifts off the card, and its shadow shrinks and thins the way a real one does */
@media (hover: hover) {
  .one__cell:hover .one__icon > img, .one__cell:hover .one__icon > canvas { transform: translateY(-9px) rotate(-4deg) scale(1.05); }
  .one__cell:hover .one__icon::before { transform: scale(.8); opacity: .6; }
}
/* the icon is a Rive canvas over its still picture; the picture stays until the canvas is live, and for good without motion */
.one__icon > img, .one__icon > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.one__icon > img, .one__icon > canvas { transition: opacity .3s var(--ease-out), transform .6s var(--ease-out); }
.one__icon > canvas { opacity: 0; }
.one__icon.is-live > canvas { opacity: 1; }
.one__icon.is-live > img { opacity: 0; }
.js .one__bar { --gap: clamp(14px, 2vw, 28px); --ri: var(--radius); transition: column-gap 1s var(--ease-out), row-gap 1s var(--ease-out); }
.js .one__bar::before { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.js .one.is-in .one__bar::before { opacity: 1; }
.js .one__cell:nth-child(odd) { transform: translateY(14px) rotate(-1.2deg); }
.js .one__cell:nth-child(even) { transform: translateY(-10px) rotate(1deg); }
.js .one__cell:last-child { color: var(--black); box-shadow: inset 0 1px 0 var(--white), 0 0 0 1px rgba(39, 101, 237, .09), 0 24px 60px -14px rgba(39, 101, 237, 0); }
.js .one__cell:last-child::after { opacity: 0; }
.js .one__cell:last-child .one__num { color: var(--blue); }
.js .one__cell:last-child .one__desc { color: var(--grey); }
/* the icons come up into their cards once the five have closed into one */
.js .one:not(.is-in) .one__icon { opacity: 0; transform: translateY(22px) scale(.84) rotate(7deg); }
.js .one.is-in .one__icon { transition: transform .9s var(--ease-snap) calc(.3s + var(--i) * .09s), opacity .5s var(--ease-out) calc(.3s + var(--i) * .09s); }
.js .one.is-in .one__bar { --gap: 0px; --ri: 0px; }
.js .one.is-in .one__cell { transform: none; }
.js .one.is-in .one__cell:last-child { color: var(--white); box-shadow: inset 0 1px 0 var(--white), 0 0 0 1px rgba(39, 101, 237, .09), var(--shadow-blue); }
.js .one.is-in .one__cell:last-child::after { opacity: 1; }
.js .one.is-in .one__cell:last-child .one__num, .js .one.is-in .one__cell:last-child .one__desc { color: var(--on-blue); }

/* who we work with */
.stairs { --rise: clamp(40px, 5vw, 82px); --h0: clamp(330px, 27vw, 400px); margin-top: clamp(88px, 11vw, 160px); }
/* Three cards that rise right to left, bottoms on one line, as the 2026 profile draws this page: frosted glass, dark, blue.
   Each carries a cluster of ants that grows with it (1, 4, 12). site.js grows a card and multiplies its ants as the row
   comes up the screen; without the script the cards stand at full height with every ant in place. */
.stairs__list { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: end;
  min-height: calc(var(--h0) + 2 * var(--rise)); }
.stair { --sy: 1; --dy: 0px; --mut: var(--grey); --antc: var(--blue); position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  min-height: calc(var(--h0) + var(--k, 0) * var(--rise)); padding: clamp(22px, 2.3vw, 34px); border-radius: var(--radius); color: var(--black); }
/* The card's material is a layer of its own. The card itself always has its final size, so nothing on the page moves while
   it "grows": site.js only scales this layer up from the baseline (--sy) and slides the words down to meet it (--dy). */
.stair::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform-origin: 50% 100%; transform: scaleY(var(--sy)); }
.stair--glass::before { background: var(--glass-light); border: 1px solid var(--glass-light-line);
  box-shadow: inset 0 1px 0 var(--white), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(39, 101, 237, .09), var(--shadow-card);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
.stair--ink { --mut: var(--on-black); --antc: var(--blue-start); color: var(--white); }
.stair--ink::before { background: var(--grad-ink); }
.stair--blue { --mut: var(--on-blue); --antc: var(--white); color: var(--white); }
.stair--blue::before { box-shadow: var(--shadow-blue); background: radial-gradient(ellipse 70% 60% at 100% 0, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--grad-blue); }
.stair__glyph, .stair__word, .stair__who { transform: translate3d(0, var(--dy), 0); }
/* the cluster: ant marks on a square grid, first one top right */
.stair__glyph { --s: clamp(22px, 2vw, 30px); display: grid; grid-template-columns: repeat(var(--c, 1), var(--s)); justify-content: start; }
.stair__glyph i { position: relative; display: block; width: var(--s); height: var(--s); }
.stair__glyph i::before { content: ""; position: absolute; inset: 27% 4%; background: var(--antc); clip-path: var(--ant); }
.stair__word { margin-top: 8px; font-weight: 900; font-size: clamp(44px, 5vw, 76px); line-height: 1.25; }
.stair__who { margin-top: 6px; max-width: 18em; font-size: clamp(15.5px, 1.25vw, 18.5px); line-height: 1.6; color: var(--mut); }
.stair__list { margin-top: auto; padding-top: 22px; display: grid; row-gap: 9px; font-weight: 500; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.5; }
.stair__list li { display: flex; align-items: flex-start; gap: 10px; }
.stair__list svg { width: 16px; height: 8px; margin-top: .5em; flex: none; fill: var(--antc); }
/* an ant that has not arrived yet waits out of line; the list comes in once its card has grown */
.js .stair__glyph i { opacity: 0; transform: translate3d(calc(var(--s) * -.5), calc(var(--s) * .7), 0) rotate(64deg) scale(.5); transition: opacity .35s var(--ease-out), transform .6s var(--ease-snap); }
.js .stair__glyph i.is-on { opacity: 1; transform: none; }
.js .stair__list li { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.js .stair.is-open .stair__list li { opacity: 1; transform: none; }
.js .stair.is-open .stair__list li:nth-child(2) { transition-delay: .08s; }
.js .stair.is-open .stair__list li:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1099px) {
  .about__head { grid-template-columns: 1fr; row-gap: clamp(28px, 4vw, 40px); }
  .about__intro { padding-bottom: 0; }
  .one__cell { padding-inline: 14px; }
  .one__icon { width: clamp(84px, 11.2vw, 124px); margin: -6px -8px -4px 0; }
}
@media (max-width: 760px) {
  .one__bar { grid-template-columns: 1fr; }
  .js .one__bar { row-gap: var(--gap); --gap: 12px; }
  .js .one.is-in .one__bar { --gap: 0px; }
  .one__bar::before { inset: 78% 6% -3%; }
  .one__cell { min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 2px; padding: 14px 18px 16px; }
  /* stacked: the bar's rounded ends are its top and bottom */
  .one__cell:first-child { border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); border-end-start-radius: var(--ri); }
  .one__cell:last-child { border-end-start-radius: var(--radius); border-end-end-radius: var(--radius); border-start-end-radius: var(--ri); }
  .one__num { grid-row: span 2; padding-top: 6px; }
  .one__icon { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 78px; margin: 0; }
  .one__name { grid-column: 2; grid-row: 1; margin-top: 0; padding-top: 0; font-size: 20px; }
  .one__desc { grid-column: 2; grid-row: 2; }
  .js .one__cell:nth-child(odd) { transform: translateX(10px) rotate(-1deg); }
  .js .one__cell:nth-child(even) { transform: translateX(-10px) rotate(1deg); }
  .stairs__list { grid-template-columns: 1fr; row-gap: 14px; min-height: 0; }
  .stair { min-height: 0; }                                            /* stacked: every card as tall as its words; the ants still multiply */
  .stair__word { font-size: 44px; }
  .stair__list { padding-top: 18px; }
}

/* ---------- The chapter: the glowing black surface. Scattered pieces, then one system ----------
   Six pieces of a business float as tilted glass cards over an empty system. With the scroll each one
   straightens, travels to its slot and is filed as a row (site.js moves them); then the panel reads «بعد». */
.scene { position: relative; margin-top: calc(var(--vw) * -100 * var(--tan22)); --surface: var(--black); color: var(--white); }
/* black space before the pinned stage and after the flow: the 22° edges live here, never over the content */
.scene__head { height: calc(var(--wedge) + var(--vh) * 6); }
.scene__tail { height: calc(var(--wedge) + var(--vh) * 6); }
.scene__pin { position: relative; height: calc(var(--vh) * (100 + 100 * var(--scene-len))); }
.scene__stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden;
  background: radial-gradient(ellipse 46% 44% at 26% 52%, rgba(39, 101, 237, .46), rgba(39, 101, 237, .13) 55%, rgba(39, 101, 237, 0)); }
.scene__grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4.6vw, 72px); align-items: center; padding-top: var(--nav-h); }
.scene__text { display: grid; justify-items: start; }
.chapter__h { font-weight: 900; font-size: clamp(38px, 4vw, 60px); line-height: 1.35; }
.chapter__sub { margin-top: 18px; max-width: 25em; font-size: clamp(17px, 1.56vw, 22.5px); line-height: 1.7; color: var(--on-black); text-wrap: pretty; }
/* the progress bar: what is filed is ordered, the one being filed is blue, what is left is still scattered */
.tally { margin-top: clamp(22px, 3.6vh, 40px); display: flex; align-items: center; gap: 10px; }
.tally svg { width: 28px; height: 14px; fill: rgba(255, 255, 255, .28); transform: rotate(var(--r, 58deg)); transition: transform .7s var(--ease-snap), fill .4s; }
.tally svg:nth-child(2) { --r: -44deg; } .tally svg:nth-child(3) { --r: 82deg; } .tally svg:nth-child(4) { --r: -28deg; } .tally svg:nth-child(5) { --r: 64deg; } .tally svg:nth-child(6) { --r: -70deg; }
.tally svg.is-done { fill: var(--white); transform: none; }
.tally svg.is-now { fill: var(--blue-start); transform: none; }

/* the system: a glass panel of six slots */
.sysbox { position: relative; align-self: stretch; display: grid; align-items: center; }
.sys { position: relative; width: 100%; padding: clamp(12px, 1.4vw, 20px); border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: border-color .7s var(--ease-out), box-shadow .9s var(--ease-out); }
.sys.is-after { border-color: rgba(143, 184, 255, .42); box-shadow: 0 34px 90px -24px rgba(39, 101, 237, .7); }
.sys__head { display: flex; align-items: center; gap: 12px; padding: 4px 8px clamp(10px, 1.6vh, 16px); }
.sys__mark { width: 24px; height: auto; aspect-ratio: 219.25 / 244.21; fill: var(--white); flex: none; }
.sys__name { font-weight: 700; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; }
.sys__state { margin-inline-start: auto; display: grid; place-items: center; min-width: 68px; min-height: 36px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--glass-line); transition: background-color .5s var(--ease-out), border-color .5s, box-shadow .6s var(--ease-out); }
.sys__state > span { grid-area: 1 / 1; transition: opacity .35s, transform .55s var(--ease-out); }
.sys__after { opacity: 0; transform: translateY(8px); }
.sys.is-after .sys__state { background: var(--blue); border-color: transparent; box-shadow: 0 8px 26px rgba(39, 101, 237, .6); }
.sys.is-after .sys__before { opacity: 0; transform: translateY(-8px); }
.sys.is-after .sys__after { opacity: 1; transform: none; }
.sys__rows { display: grid; row-gap: clamp(6px, 1vh, 11px); }
/* a slot is a dashed outline until its piece arrives (--on, 0 to 1), then a glass row that reads «يعمل» */
.row { --on: 0; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: clamp(44px, 6.2vh, 58px); padding: 0 clamp(14px, 1.5vw, 24px);
  border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .16); }
.row::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); opacity: var(--on); }
.row__name, .row__ok { position: relative; opacity: var(--on); transform: translateX(calc((1 - var(--on)) * 16px)); white-space: nowrap; }
.row__name { font-weight: 500; font-size: clamp(15px, 1.35vw, 19.5px); line-height: 1.4; }
.row__ok { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(13px, 1.1vw, 15.5px); color: var(--blue-soft); }
.row__ok i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-start); box-shadow: 0 0 10px var(--blue-start); }

/* the scattered pieces: glass cards, each a tool the business runs on today */
.mess { position: absolute; inset: 0; pointer-events: none; }
.mess__card { position: absolute; left: 0; top: 0; display: grid; row-gap: 1px; padding: 11px 20px 13px; border-radius: 18px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .09)); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); will-change: transform, opacity; }
.mess__label { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(12.5px, 1vw, 15px); line-height: 1.5; color: var(--on-black); }
.mess__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.mess__value { font-weight: 700; font-size: clamp(15px, 1.35vw, 19.5px); line-height: 1.45; }
.mess__value em { font-style: normal; font-weight: 500; color: var(--muted); }
.js .mess__card { opacity: 0; }

/* one order through the system: five glass cards in a row, the result in the blue card.
   Each step has room above and below its card (--zone). Its figure, drawn in ant marks on a canvas that lies
   under the glass, comes out from behind the card into that room: above for one step, below for the next.
   On wide screens the row holds (.is-pinned, set by site.js) while the scroll takes the order across it. */
.flow { position: relative; --zone: 190px; --fgap: clamp(12px, 1.7vw, 24px); padding-top: clamp(24px, 6vh, 72px); }
.flow__stage { position: relative; }
.flow__stage::before { content: ""; position: absolute; inset: 12% 0 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 54%, rgba(39, 101, 237, .34), rgba(39, 101, 237, .1) 55%, rgba(39, 101, 237, 0)); }
.flow__title { font-weight: 900; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.32; text-wrap: balance; }
.flow__steps { margin-top: clamp(8px, 1.4vw, 20px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fgap); }
.step { position: relative; display: grid; padding-block: var(--zone); }
.step__fig { position: absolute; left: 0; top: 0; pointer-events: none; }            /* placed and sized by site.js */
.step__card { position: relative; isolation: isolate; display: grid; align-content: start; padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 26px); border-radius: var(--radius);
  background: var(--glass); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .5s, box-shadow .7s var(--ease-out); }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.step__num { font-weight: 700; font-size: 16px; color: var(--blue-soft); transition: color .5s; }
.step__state { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 13px; border-radius: 999px; font-size: clamp(12.5px, .95vw, 14px); font-weight: 500; line-height: 1.4; white-space: nowrap;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--glass-line); transition: opacity .4s, transform .55s var(--ease-snap), background-color .5s, color .5s; }
.step__name { margin-top: clamp(14px, 1.5vw, 22px); font-weight: 700; font-size: clamp(19px, 1.75vw, 26px); line-height: 1.35; }
.step__desc { margin-top: 6px; font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.6; color: var(--on-black); transition: color .5s; text-wrap: pretty; }
/* between two steps, an arrow in the reading direction */
.step + .step::before { content: ""; position: absolute; top: 50%; inset-inline-start: calc(var(--fgap) / -2 - 5px); width: 9px; height: 9px;
  border: solid var(--blue-start); border-width: 0 0 2px 2px; transform: translateY(-50%) rotate(45deg); transition: border-color .45s; }
/* the blue card: the most important one in the row */
.step--result .step__card { border-color: rgba(255, 255, 255, .34); box-shadow: 0 26px 70px -12px rgba(39, 101, 237, .8); }
.step--result .step__card::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; transition: opacity .7s var(--ease-out);
  background: radial-gradient(ellipse 80% 70% at 100% 0, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0)), var(--grad-blue); }
.step--result .step__num, .step--result .step__desc { color: var(--on-blue); }
.step--result .step__state { background: var(--white); color: var(--blue); border-color: transparent; font-weight: 700; }
.flow__end { margin-top: clamp(20px, 3.2vw, 44px); text-align: center; font-weight: 700; font-size: clamp(19px, 2vw, 28px); line-height: 1.6; text-wrap: balance; }
.flow__end span { font-weight: 500; color: var(--muted); }
/* with the page script, a step waits dimmed until the order reaches it */
.js .step:not(.is-on) .step__card { border-color: var(--glass-line); box-shadow: none; }
.js .step:not(.is-on) .step__card > * { opacity: .34; }
.js .step__card > * { transition: opacity .55s var(--ease-out); }
.js .step:not(.is-on) .step__state { opacity: 0; transform: scale(.84); }
.js .step:not(.is-on)::before { border-color: rgba(255, 255, 255, .26); }
.js .step--result:not(.is-on) .step__card::after { opacity: 0; }
.js .step--result:not(.is-on) .step__num { color: var(--blue-soft); }
.js .step--result:not(.is-on) .step__desc { color: var(--on-black); }
.js .flow__end { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js .flow__end.is-on { opacity: 1; transform: none; }
/* held on screen: one screen of title, cards and their room; site.js sets --zone from what the screen has left */
.flow.is-pinned { padding-top: 0; }
.flow.is-pinned .flow__pin { height: calc(var(--vh) * 100 + var(--flow-len, 240vh)); }
.flow.is-pinned .flow__stage { position: sticky; top: 0; height: calc(var(--vh) * 100); display: grid; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.flow.is-pinned .flow__title { font-size: clamp(28px, 3.3vw, 48px); }
.flow.is-pinned .flow__title br { display: none; }
.flow.is-pinned .flow__steps { margin-top: 0; }
.flow.is-pinned .flow__end { margin-top: clamp(28px, 6vh, 64px); }

/* one column: each card brings its figure with it, above or below */
@media (max-width: 1099px) {
  .flow { --zone: clamp(150px, 44vw, 210px); }
  .flow__steps { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 540px; margin-inline: auto; }
  .step { padding-block: 0; }
  .step--up { padding-top: var(--zone); }
  .step--down { padding-bottom: var(--zone); }
  .step + .step::before { display: none; }
}
/* portrait and narrow screens: the words on top, the system under them */
@media (max-width: 899px), (max-aspect-ratio: 9/10) {
  .scene__stage { background: radial-gradient(ellipse 96% 33% at 50% 63%, rgba(39, 101, 237, .44), rgba(39, 101, 237, .12) 55%, rgba(39, 101, 237, 0)); }
  .scene__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; row-gap: clamp(12px, 2.4vh, 28px);
    padding-top: calc(var(--nav-h) + clamp(12px, 3vh, 36px)); padding-bottom: clamp(12px, 2.4vh, 28px); }
  .chapter__h { font-size: clamp(28px, 8.1vw, 56px); }
  .chapter__sub { margin-top: 8px; font-size: clamp(15px, 4.1vw, 19px); line-height: 1.65; }
  .tally { margin-top: 14px; gap: 8px; }
  .tally svg { width: 22px; height: 11px; }
  .sysbox { align-items: center; }
  .sys { max-width: 600px; margin-inline: auto; padding: 12px; border-radius: 22px; }
  .sys__head { padding: 2px 6px 10px; }
  .sys__state { min-height: 32px; min-width: 60px; font-size: 14px; }
  .row { height: clamp(36px, 5.2vh, 52px); padding: 0 14px; border-radius: 12px; }
  .row__name { font-size: clamp(13.5px, 3.75vw, 18px); }
  .row__ok { font-size: clamp(12px, 3.2vw, 15px); gap: 6px; }
  .mess__card { padding: 8px 14px 10px; border-radius: 14px; }
  .mess__label { font-size: clamp(11.5px, 3.1vw, 14px); }
  .mess__value { font-size: clamp(13.5px, 3.75vw, 18px); }
}
@media (max-width: 899px) and (max-height: 700px), (max-aspect-ratio: 9/10) and (max-height: 700px) { .tally { display: none; } }
@media (max-width: 640px) {
  .flow__title br { display: none; }
  .step__card { padding: 16px 18px 18px; border-radius: 22px; }
  .step__name { margin-top: 10px; }
}
}
@media (max-width: 380px) { .btn { padding: 0 22px; } }

/* ---------- Services: the light surface, white cards ----------
   Eight services in a grid of cards; each an icon drawn in marks on the brand's grid,
   a number, a name and a line. --cell is one grid step of an icon. */
.services { color: var(--black); margin-top: calc(var(--vw) * -100 * var(--tan22));
  --surface: radial-gradient(ellipse 52% 480px at 100% calc(var(--wedge) + 520px), var(--halo), rgba(143, 184, 255, 0)),
             radial-gradient(ellipse 56% 480px at 0% calc(100% - 520px), var(--halo), rgba(143, 184, 255, 0)) var(--tint);
  padding: calc(var(--wedge) * .8 + clamp(24px, 3vw, 48px)) 0 clamp(80px, 9vw, 136px); }
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; margin-bottom: clamp(40px, 5vw, 72px); }
.svc-h { font-weight: 900; font-size: clamp(52px, 6.9vw, 99px); line-height: 1.3; }
.svc-lede { max-width: 17em; padding-bottom: .9em; font-size: clamp(18px, 1.56vw, 22.5px); line-height: 1.7; color: var(--grey); }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(260px, 22vw, 330px), auto);
  grid-template-areas: "a a b b" "a a c d" "e f h h" "g g h h";
  gap: 24px; }
.svc-card { position: relative; container-type: inline-size; min-width: 0; display: grid; background: var(--white); padding: clamp(24px, 2.4vw, 40px);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
/* hover: a blue edge runs across the top from the right, the card lifts and the name stretches */
.svc-card::before { content: ""; position: absolute; inset-inline: var(--radius); top: 0; z-index: 1; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue); transform: scaleX(0); transform-origin: right center; transition: transform .7s var(--ease-out); pointer-events: none; }
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(39, 101, 237, .2); }
  .svc-card:hover::before { transform: none; }
  .svc-card:hover .svc-name .kx { --k: var(--kt); transition: width 1.25s var(--ease-kash); }
}
.svc-icon { display: flex; align-items: flex-end; height: calc(16 * var(--cell)); }
.svc-art { position: relative; display: block; flex: none; line-height: 0; }
.svc-icon svg { display: block; width: calc(var(--c) * var(--cell)); height: calc(var(--r) * var(--cell)); overflow: visible; }
/* the same marks on a canvas, so each drawing can move; the SVG stays for print, no-JS and reduced motion */
.svc-art > canvas { position: absolute; left: calc(var(--cell) * -2); top: calc(var(--cell) * -2); pointer-events: none; }
.svc-icon.is-live .svc-art > svg { visibility: hidden; }
.svc-ink { fill: var(--black); }
.svc-blue { fill: var(--blue); }
.svc-copy { display: grid; align-content: end; }
.svc-num { justify-self: start; font-weight: 700; font-size: 15px; color: var(--blue); }
.svc-name { margin-top: 6px; font-weight: 700; line-height: 1.35; }
.svc-text { margin-top: 10px; max-width: 26em; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: var(--grey); text-wrap: pretty; }

/* big: a double cell; a whole scene across the top, the words settled at the bottom */
.svc-card--big { grid-template-rows: 1fr auto; row-gap: 32px; }
.svc-card--big .svc-icon { --cell: calc(100cqi / var(--c)); height: auto; align-self: start; }
/* labels pinned to the scene's frames, the way a spec sheet names its parts */
.svc-card--big .svc-icon { position: relative; }
.svc-notes { position: absolute; inset: 0; pointer-events: none; }
.svc-note { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 6px 13px 7px; border-radius: 999px;
  font-weight: 500; font-size: clamp(12px, 1vw, 14px); line-height: 1.2; white-space: nowrap; background: var(--ink); color: var(--white); }
.svc-card--big .svc-name { font-size: clamp(26px, 2.36vw, 34px); }
.svc-card--big .svc-text { font-size: clamp(17px, 1.3vw, 20px); }
/* wide: the words on the right, the icon beside them */
.svc-card--wide { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(20px, 2.5vw, 40px); align-items: end; }
.svc-card--wide .svc-copy { grid-column: 1; grid-row: 1; }
.svc-card--wide .svc-icon { --cell: min(9px, calc(100cqi * .46 / 24)); grid-column: 2; grid-row: 1; }
.svc-card--wide .svc-name { font-size: clamp(22px, 1.9vw, 28px); }
/* small: compact, the icon above the words */
.svc-card--small { grid-template-rows: auto 1fr; row-gap: 24px; }
.svc-card--small .svc-icon { --cell: min(8px, calc(100cqi / 25)); }
/* the phone is taller than the other drawings (22 rows), and drawn larger */
.svc-card--wide .svc-icon[data-live="apps"] { --cell: min(10px, calc(100cqi * .3 / 14)); height: calc(22 * var(--cell)); }
.svc-card--small .svc-name { font-size: clamp(19px, 1.67vw, 24px); }
.svc-card--small .svc-text { font-size: clamp(15px, 1.05vw, 17px); }

/* ---- the free consultation, closing the services: the profile's blue page and its ticket ---- */
.offer { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; column-gap: clamp(32px, 5vw, 80px); padding: clamp(28px, 4.4vw, 72px); border-radius: var(--radius); color: var(--white);
  background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(160, 200, 255, .5), rgba(160, 200, 255, 0)),
              radial-gradient(ellipse 60% 80% at 100% 110%, rgba(8, 30, 150, .5), rgba(8, 30, 150, 0)), var(--grad-blue);
  box-shadow: var(--shadow-blue); }
.offer__kicker { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 500; font-size: 15px;
  background: rgba(255, 255, 255, .16); border: 1px solid var(--glass-blue-line); }
.offer__title { margin-top: 18px; font-weight: 900; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.35; text-wrap: balance; }
.offer__lede { margin-top: 14px; max-width: 34em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; color: var(--on-blue); text-wrap: pretty; }
.offer__list { margin-top: 22px; display: grid; gap: 12px; }
.offer__list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; }
.offer__list .ic { flex: none; width: 26px; height: 26px; margin-top: 1px; padding: 5px; border-radius: 50%; background: var(--white); fill: none; stroke: var(--blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.offer__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 420px) { .offer__via { display: none; } }
.ticket { justify-self: center; width: min(100%, 380px); padding: clamp(22px, 2.4vw, 34px); border-radius: calc(var(--radius) + 6px); transform: rotate(-5deg);
  background: var(--glass-blue); border: 1px solid var(--glass-blue-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 30px 60px -30px rgba(4, 14, 80, .6); }
.ticket__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 500; font-size: 17px; }
.ticket__top svg { width: 24px; height: auto; aspect-ratio: 219.25 / 244.21; fill: var(--white); flex: none; }
.ticket__price { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin-top: 10px; line-height: 1; }
.ticket__num { font-weight: 700; font-size: clamp(120px, 12vw, 176px); }
.ticket__cur { font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); padding-bottom: .55em; }
.ticket__rows { margin-top: 18px; padding-top: 16px; border-top: 2px dashed rgba(255, 255, 255, .5); display: grid; gap: 10px; }
.ticket__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ticket__rows dt { font-size: 15px; color: rgba(255, 255, 255, .82); }
.ticket__rows dd { margin: 0; font-weight: 700; font-size: 16px; text-align: end; }

@media (max-width: 1099px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto;
    grid-template-areas: "a a" "b b" "c d" "e f" "h h" "g g"; gap: 20px; }
}
@media (max-width: 899px) {
  .svc-head { grid-template-columns: 1fr; row-gap: 12px; }
  .svc-lede { max-width: 26em; padding-bottom: 0; }
  .offer { grid-template-columns: 1fr; row-gap: 36px; }
  .ticket { transform: rotate(-3deg); }
}
@media (max-width: 640px) {
  .svc-grid { gap: 12px; }
  .svc-card { padding: 22px 16px 24px; }
  .svc-card--big, .svc-card--wide { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: 24px; padding-inline: 20px; }
  .svc-card--big .svc-copy, .svc-card--wide .svc-copy { grid-column: 1; grid-row: 2; }
  .svc-card--big .svc-icon, .svc-card--wide .svc-icon { grid-column: 1; grid-row: 1; }
  .svc-card--wide .svc-icon { --cell: min(7.5px, calc(100cqi / 30)); }
  .svc-card--wide .svc-icon[data-live="apps"] { --cell: min(9px, calc(100cqi / 22)); }
  .svc-card--small .svc-icon { --cell: calc(100cqi / 25); }
  .svc-note { padding: 4px 9px 5px; }
  .svc-card--small .svc-name { font-size: 18px; }
  .svc-card--small .svc-text { font-size: 14.5px; line-height: 1.7; }
  .offer { padding: 28px 22px 32px; }
  .offer__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- The surfaces that follow: white, light, blue. No two neighbours share one ---------- */
.process, .work, .faq { color: var(--black); position: relative; z-index: 2; margin-top: -1px; }
.process { padding: clamp(72px, 8vw, 128px) 0 clamp(96px, 11vw, 160px);
  background: radial-gradient(ellipse 56% 480px at 0% calc(100% - 520px), var(--halo), rgba(143, 184, 255, 0)) var(--white); }
.work { padding: clamp(80px, 9vw, 136px) 0 calc(var(--vw) * 100 * var(--tan22) + clamp(64px, 7vw, 112px));
  background: radial-gradient(ellipse 52% 480px at 0% 520px, var(--halo), rgba(143, 184, 255, 0)),
              radial-gradient(ellipse 56% 480px at 100% calc(100% - calc(var(--vw) * 100 * var(--tan22)) - 520px), var(--halo), rgba(143, 184, 255, 0)) var(--white); }
/* under the cards: the next step */
.next { margin-top: clamp(48px, 6vw, 88px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding-top: clamp(26px, 3vw, 40px); border-top: 2px solid var(--black); }
.next__title { font-weight: 900; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.35; text-wrap: balance; }
.next__sub { margin-top: 6px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; color: var(--grey); }
.next__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) { .next__actions { width: 100%; } .next__actions .btn { flex: 1 1 auto; justify-content: center; } }

/* ---------- Why Corplift: the light surface, on the 22° line after the black chapter ----------
   The profile's list (a hairline under each reason) beside its dark speed card, which carries three real durations. */
.why { color: var(--black); margin-top: calc(var(--vw) * -100 * var(--tan22));
  --surface: radial-gradient(ellipse 56% 400px at 100% calc(var(--wedge) + 440px), var(--halo), rgba(143, 184, 255, 0)),
             radial-gradient(ellipse 50% 400px at 0% calc(100% - 440px), var(--halo), rgba(143, 184, 255, 0)) var(--tint);
  padding: calc(var(--wedge) * .8 + clamp(24px, 3vw, 48px)) 0 clamp(120px, 12vw, 176px); }
.why__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head speed" "list speed"; column-gap: clamp(40px, 6vw, 112px); align-items: start; }
.why__head { grid-area: head; display: grid; gap: 16px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.why__title { font-size: clamp(40px, 5vw, 72px); }
.why__list { grid-area: list; border-top: 2px solid var(--black); }
.why__item { display: grid; grid-template-columns: 2.6em minmax(0, 10.5em) minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: clamp(20px, 2.2vw, 30px) 0; }
.why__item + .why__item { border-top: 1px solid var(--line-tint); }
.why__num { font-weight: 700; font-size: 16px; color: var(--blue); }
.why__name { font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; }
.why__text { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.7; color: var(--grey); text-wrap: pretty; }
/* the card sits in the deep end of the 22° line (the left), so it starts lower than the words, clear of the black above */
.speed { grid-area: speed; position: sticky; top: calc(var(--nav-h) + 28px); margin-top: calc(var(--wedge) * .2 + 24px); overflow: hidden; isolation: isolate; display: grid; padding: clamp(26px, 3vw, 46px);
  border-radius: calc(var(--radius) + 6px); color: var(--white);
  background: radial-gradient(ellipse 110% 80% at 10% 100%, rgba(59, 130, 246, .95), rgba(30, 79, 194, .7) 45%, rgba(30, 79, 194, 0) 78%), linear-gradient(180deg, #05060A, #0C1630);
  box-shadow: 0 40px 80px -30px rgba(15, 35, 95, .6); }
.speed__pill { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 500; font-size: 15px;
  background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.speed__title { margin-top: clamp(28px, 4vw, 60px); font-weight: 900; font-size: clamp(44px, 4.4vw, 66px); line-height: 1.2; }
.speed__title span { display: block; font-size: .62em; line-height: 1.45; color: #93B8FF; }
.speed__text { margin-top: 14px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.speed__facts { margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .2); }
.speed__facts div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.speed__facts dd { order: -1; margin: 0; font-weight: 700; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.3; white-space: nowrap; }
.speed__facts dd small { font-size: .62em; font-weight: 500; color: var(--on-black); }
.speed__facts dt { font-size: 15px; line-height: 1.5; color: var(--on-black); }
.speed__row { margin-top: 26px; display: flex; gap: 8px; }
.speed__row svg { width: 24px; height: 12px; fill: var(--white); }
.speed__row svg:first-child { fill: var(--blue-start); }
@media (max-width: 1099px) {
  .why__item { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: 4px; }
  .why__text { grid-column: 2; }
}
@media (max-width: 899px) {
  .why__grid { grid-template-columns: 1fr; grid-template-areas: "head" "list" "speed"; }
  .speed { position: relative; top: auto; margin-top: clamp(36px, 6vw, 56px); }
}

/* ---------- Questions before we start: the light surface again, the ribbon follows ---------- */
.faq { padding: clamp(80px, 9vw, 140px) 0 calc(var(--vw) * 100 * var(--tan22) + clamp(64px, 7vw, 112px));
  background: radial-gradient(ellipse 52% 480px at 0% 520px, var(--halo), rgba(143, 184, 255, 0)) var(--tint); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 20px; justify-items: start; }
.faq__list { border-top: 2px solid var(--black); }
.qa { border-bottom: 1px solid var(--line-tint); interpolate-size: allow-keywords; }
.qa__q { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; min-height: 76px; padding: 18px 0;
  cursor: pointer; font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q:focus-visible { outline-offset: 2px; border-radius: 8px; }
.qa__mark { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--line-tint);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .45s var(--ease-snap); }
.qa__mark::before, .qa__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--black);
  transition: transform .45s var(--ease-snap), background-color .3s; }
.qa__mark::after { transform: rotate(90deg); }
.qa__q:hover .qa__mark { box-shadow: 0 0 0 1px var(--blue); }
.qa[open] .qa__mark { background: var(--blue); box-shadow: none; transform: rotate(180deg); }
.qa[open] .qa__mark::before, .qa[open] .qa__mark::after { background: var(--white); }
.qa[open] .qa__mark::after { transform: rotate(0deg); }
.qa__a { padding: 0 0 26px; max-width: 40em; }
.qa__a p { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.8; color: var(--grey); text-wrap: pretty; }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
@media (max-width: 899px) {
  .faq__grid { grid-template-columns: 1fr; row-gap: 36px; }
  .faq__head { position: static; }
}


/* Process: one ant walks a trail of marks down the page and stops at each stage. The trail is the
   brand's progress bar: what is done is ordered, where you are is blue, what is left is still scattered.
   On desktop the title holds on the right while a counter rolls from 01 to 05. */
.process__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 120px); align-items: start; }
.process__panel { position: sticky; top: calc(72px + clamp(28px, 5vh, 64px)); display: grid; }
.process__head { margin-bottom: 0; }
.odo { display: flex; justify-content: flex-end; align-items: baseline; margin-top: clamp(20px, 5vh, 56px); color: var(--blue);
  font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(120px, min(12vw, 24vh), 220px); line-height: 1; letter-spacing: -0.02em; }
.odo__win { display: inline-block; height: 1em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.odo__reel { display: flex; flex-direction: column; will-change: transform; }
.odo__reel > span { display: block; height: 1em; }
.odo__of { margin-left: .35em; font-size: .15em; font-weight: 500; letter-spacing: 0; color: var(--grey); }
.process__note { margin-top: clamp(24px, 4vh, 48px); padding-top: 22px; border-top: 1px solid var(--line); font-size: clamp(18px, 1.5vw, 22px); }

.trail { --gutter: clamp(56px, 6vw, 96px); --rail-x: 6px; position: relative; padding: calc(var(--vh) * 24) 0 clamp(24px, 4vh, 48px); }
.trail__rail { position: absolute; top: 0; inset-inline-start: 0; width: 12px; height: var(--rail-h, 100%); }
/* what is left: marks that have not found their direction yet */
.trail__ink { position: absolute; inset: 0; background: var(--on-black); clip-path: inset(var(--walked, 0px) 0 0 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 6'%3E%3Cpath d='M0.141 0.748L0.753 0.5L0.859 0.252L0.247 0.5Z' transform='rotate(52 .5 .5)'/%3E%3Cpath d='M0.141 1.748L0.753 1.5L0.859 1.252L0.247 1.5Z' transform='rotate(-38 .5 1.5)'/%3E%3Cpath d='M0.141 2.748L0.753 2.5L0.859 2.252L0.247 2.5Z' transform='rotate(84 .5 2.5)'/%3E%3Cpath d='M0.141 3.748L0.753 3.5L0.859 3.252L0.247 3.5Z' transform='rotate(18 .5 3.5)'/%3E%3Cpath d='M0.141 4.748L0.753 4.5L0.859 4.252L0.247 4.5Z' transform='rotate(-66 .5 4.5)'/%3E%3Cpath d='M0.141 5.748L0.753 5.5L0.859 5.252L0.247 5.5Z' transform='rotate(118 .5 5.5)'/%3E%3C/svg%3E") center top / 12px 72px repeat-y;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 6'%3E%3Cpath d='M0.141 0.748L0.753 0.5L0.859 0.252L0.247 0.5Z' transform='rotate(52 .5 .5)'/%3E%3Cpath d='M0.141 1.748L0.753 1.5L0.859 1.252L0.247 1.5Z' transform='rotate(-38 .5 1.5)'/%3E%3Cpath d='M0.141 2.748L0.753 2.5L0.859 2.252L0.247 2.5Z' transform='rotate(84 .5 2.5)'/%3E%3Cpath d='M0.141 3.748L0.753 3.5L0.859 3.252L0.247 3.5Z' transform='rotate(18 .5 3.5)'/%3E%3Cpath d='M0.141 4.748L0.753 4.5L0.859 4.252L0.247 4.5Z' transform='rotate(-66 .5 4.5)'/%3E%3Cpath d='M0.141 5.748L0.753 5.5L0.859 5.252L0.247 5.5Z' transform='rotate(118 .5 5.5)'/%3E%3C/svg%3E") center top / 12px 72px repeat-y; }
/* what is done: the same marks, in order */
.trail__ink--done { background: linear-gradient(var(--black) var(--s-last, 100%), var(--blue) var(--s-last, 100%)); clip-path: inset(0 0 calc(100% - var(--walked, 0px)) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M0.141 0.748L0.753 0.5L0.859 0.252L0.247 0.5Z'/%3E%3C/svg%3E") center top / 12px 12px repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M0.141 0.748L0.753 0.5L0.859 0.252L0.247 0.5Z'/%3E%3C/svg%3E") center top / 12px 12px repeat-y; }
/* where you are: the blue mark */
.trail__ant { position: absolute; top: 0; inset-inline-start: calc(var(--rail-x) - 28px); z-index: 1; width: 56px; height: 28px; fill: var(--blue); will-change: transform; }

.stage { position: relative; padding-top: 26px; padding-inline-start: var(--gutter); }
.stage + .stage { margin-top: calc(var(--vh) * 30); }
/* the station: a hairline from the trail across the stage, drawn when the ant arrives */
.stage::before, .stage::after { content: ""; position: absolute; top: 0; inset-inline: var(--rail-x) 0; height: 1px; background: var(--line); }
.stage::after { background: var(--black); transform-origin: right center; }
.stage__num { display: block; font-weight: 700; font-size: 16px; color: var(--blue); }
.stage__name { margin-top: 8px; font-weight: 900; font-size: clamp(44px, 4.6vw, 72px); line-height: 1.3; }
.stage__desc { margin-top: 12px; max-width: 24em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.7; color: var(--grey); }
.js .stage::after { transform: scaleX(0); transition: transform 1s var(--ease-out); }
.js .stage__num { color: var(--on-black); transition: color .5s; }
.js .stage__name { color: var(--on-black); transform: translateY(.14em); transition: color .6s var(--ease-out), transform .9s var(--ease-out); }
.js .stage__desc { opacity: .3; transform: translateY(12px); transition: opacity .6s var(--ease-out) .12s, transform .9s var(--ease-out) .12s; }
.js .stage.is-reached::after { transform: none; }
.js .stage.is-reached .stage__num { color: var(--blue); }
.js .stage.is-reached .stage__name { color: var(--black); transform: none; }
.js .stage.is-reached .stage__desc { opacity: 1; transform: none; }

@media (min-width: 1100px) and (max-height: 699px) { .process__panel { position: relative; top: auto; } }
@media (max-width: 1099px) {
  .process__grid { grid-template-columns: minmax(0, 1fr); }
  .process__panel { display: contents; }
  .odo { display: none; }
  .process__head { order: 0; margin-bottom: clamp(16px, 4vw, 32px); }
  .trail { order: 1; }
  .process__note { order: 2; margin-top: clamp(40px, 6vw, 64px); }
}
@media (max-width: 699px) {
  .trail { --gutter: 40px; padding-top: calc(var(--vh) * 16); }
  .stage { padding-top: 20px; }
  .stage + .stage { margin-top: calc(var(--vh) * 20); }
  .stage__name { font-size: 40px; }
  .stage__desc { font-size: 16.5px; }
  .trail__ant { width: 40px; height: 20px; inset-inline-start: calc(var(--rail-x) - 20px); }
}

/* ---------- Work: a deck of case cards on the light surface ----------
   The two deep projects take a whole card each (the dark card, then the blue card); the two websites
   share one green card (their own colour), a hairline between them. Every picture is a composition of the project's real assets, and the ants
   build it as its card arrives. Where a whole card fits under the bar, site.js stacks them: a finished
   card holds for a moment, then the next one slides over it. */
.deck { display: flex; flex-direction: column; row-gap: 24px; }
.case { --pad: clamp(22px, 3.4vw, 52px); --gh: clamp(96px, 10vw, 152px); --ga: .34; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr);
  padding: var(--pad); border-radius: var(--radius); color: var(--white); }
/* The top edge of a card is liquid glass: there the card's material (--mat, on a layer of its own) thins to --ga,
   and what lies behind (the page, or the card this one slides over) shows through, blurred and bent.
   Going down, the material thickens until, at --gh, the card is solid again. */
.case::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mat);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--ga)) 0, rgba(0, 0, 0, .7) calc(var(--gh) * .4), rgba(0, 0, 0, .93) calc(var(--gh) * .74), #000 var(--gh));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--ga)) 0, rgba(0, 0, 0, .7) calc(var(--gh) * .4), rgba(0, 0, 0, .93) calc(var(--gh) * .74), #000 var(--gh)); }
.case__glass { position: absolute; inset: 0 0 auto 0; z-index: -1; height: var(--gh); pointer-events: none; border-radius: var(--radius) var(--radius) 0 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent); mask-image: linear-gradient(to bottom, #000 64%, transparent); }
/* (an SVG displacement used to bend the view through the edge in Chromium; it cost frames while the cards slid, so the edge is plain frosted glass) */
/* the rim: light caught along the top of the pane, and a soft sheen under it */
.case__glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border-top: 1px solid rgba(255, 255, 255, .75);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 34%, rgba(255, 255, 255, 0) 70%); }
.case__glass::after { content: ""; position: absolute; top: 1px; inset-inline: 6% 34%; height: 36%; border-radius: 50%; opacity: .5;
  background: radial-gradient(ellipse 60% 100% at 50% 0, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%); }
/* The first card slides over nothing: behind its edge there is only the light page, and a thinned dark material
   over a light page reads as a bent grey smear. So its edge is the solid card, with just the lit rim of the pane. */
.deck > .case:first-child::before { -webkit-mask-image: none; mask-image: none; }
.deck > .case:first-child .case__glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.deck > .case:first-child .case__glass::before { border-top-color: rgba(255, 255, 255, .2); background: linear-gradient(to bottom, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%); }
.deck > .case:first-child .case__glass::after { opacity: .16; }
[data-stack] { transform-origin: 50% 0; }
/* the card under the next one sinks back a little */
.case::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--black); opacity: var(--dim, 0); pointer-events: none; }
.case--ink { --soft: var(--on-black); --accent: var(--blue-start); --rule: rgba(255, 255, 255, .16); --tag: rgba(255, 255, 255, .085); --tag-line: var(--glass-line);
  --mat: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(39, 101, 237, .44), rgba(39, 101, 237, 0)), var(--grad-ink); box-shadow: 0 28px 64px rgba(20, 71, 229, .18); }
.case--blue { --soft: var(--on-blue); --accent: var(--white); --rule: rgba(255, 255, 255, .28); --tag: rgba(255, 255, 255, .17); --tag-line: var(--glass-blue-line);
  --mat: radial-gradient(ellipse 60% 70% at 100% 0, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), var(--grad-blue); --ga: .4; box-shadow: var(--shadow-blue); }
/* the two websites share a green card: the deep green both clients' identities are built on, and their gold for the figure */
.case--green { --soft: rgba(255, 255, 255, .8); --accent: #E9C877; --rule: rgba(255, 255, 255, .2); --tag: rgba(255, 255, 255, .12); --tag-line: rgba(255, 255, 255, .24);
  --mat: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(52, 190, 120, .34), rgba(52, 190, 120, 0)), linear-gradient(165deg, #116043, #0B4630 52%, #07331F); --ga: .4;
  box-shadow: 0 24px 60px -14px rgba(8, 70, 46, .4); }
.case--green .btn--light { color: #0B4630; }
.case--green .btn--light:hover, .case--green .btn--light:focus-visible { background: #E6F2EB; }
.case--green :focus-visible { outline-color: var(--white); }
/* ركن الغيوم: a whole system, so a whole card, in the navy of its own panel and logo, lit at the top by its sky (another explicit exception, like the green) */
.case--sky { --soft: rgba(226, 238, 255, .84); --accent: #8FD0FF; --rule: rgba(255, 255, 255, .2); --tag: rgba(255, 255, 255, .12); --tag-line: rgba(255, 255, 255, .26);
  --mat: radial-gradient(ellipse 70% 60% at 100% 0, rgba(110, 190, 255, .4), rgba(110, 190, 255, 0)), linear-gradient(165deg, #12357F, #0C2462 52%, #081845); --ga: .4;
  box-shadow: 0 24px 60px -14px rgba(8, 24, 69, .45); }
.case--sky .btn--light { color: #0C2462; }
.case--sky .btn--light:hover, .case--sky .btn--light:focus-visible { background: #E3F1FF; }
.case--sky :focus-visible { outline-color: var(--white); }
@media (max-width: 480px) { .case__via { display: none; } }
.case--sky .case__chip { background: var(--white); color: #0C2462; border-color: transparent; box-shadow: 0 10px 26px rgba(4, 14, 60, .3); }
.case--sky .case__chip svg { fill: #2E8FE8; }
/* two projects in one card: each half is a project, the picture above its words */
.case--duo { padding: 0; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--pad); min-width: 0; }
.duo + .duo { border-top: 1px solid var(--rule); }
.case--ink :focus-visible { outline-color: var(--blue-soft); }
.case--blue :focus-visible { outline-color: var(--white); }

.case__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.case__kind { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 16px; border-radius: 18px; font-size: 15px; font-weight: 500; line-height: 1.45;
  background: var(--tag); border: 1px solid var(--tag-line); }
.case__name { margin-top: 12px; font-weight: 900; font-size: clamp(46px, min(5.4vw, 9.6vh), 80px); line-height: 1.36; }
.case__name--sm { margin-top: 10px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.35; }
.case__slogan { margin-top: 2px; font-weight: 700; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.5; }
.case__summary { margin-top: 12px; max-width: 31em; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.7; color: var(--soft); text-wrap: pretty; }
.case__name--sm + .case__summary { margin-top: 6px; font-size: clamp(16px, 1.2vw, 17.5px); }
/* the big figure beside what was built */
.case__meta { width: 100%; margin-top: clamp(16px, 2.6vh, 28px); padding-top: clamp(14px, 2.2vh, 22px); border-top: 1px solid var(--rule); }
.case__facts dt { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--soft); }
.case__stat dd { font-weight: 900; font-size: clamp(42px, min(4.4vw, 7.6vh), 64px); line-height: 1.25; color: var(--accent); }
.case__built { margin-top: clamp(14px, 2.2vh, 22px); }
.case__built-h { font-size: 15px; font-weight: 500; color: var(--soft); }
/* each mark falls into line as the picture resolves */
.case__steps { margin-top: 10px; display: grid; row-gap: 9px; }
.case__steps li { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(15px, 1.15vw, 16.5px); font-weight: 500; line-height: 1.5; }
.case__steps strong { font-weight: 700; color: var(--accent); }
.case__steps svg { flex: none; width: 20px; height: 10px; margin-top: .45em; fill: var(--accent); transition: transform .7s var(--ease-snap), opacity .4s; }
.js .case__steps svg { transform: rotate(var(--r, 58deg)); opacity: .5; }
.js .case__steps li:nth-child(2) svg { --r: -44deg; }
.js .case__steps li:nth-child(3) svg { --r: 76deg; }
.js .case__steps li:nth-child(4) svg { --r: -28deg; }
.js .case__steps li.is-on svg { transform: none; opacity: 1; }
.case__tags { margin-top: clamp(14px, 2.2vh, 22px); display: flex; flex-wrap: wrap; gap: 8px; }
.case__tags li { display: inline-flex; align-items: center; min-height: 32px; padding: 3px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; line-height: 1.4;
  background: var(--tag); border: 1px solid var(--tag-line); }
.case__cta { margin-top: auto; padding-top: clamp(18px, 3vh, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
/* the project's own page, beside the live site */
.case__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 15.5px; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 6px; opacity: .86; transition: opacity .2s; }
.case__more:hover, .case__more:focus-visible { opacity: 1; }
.case__foot { flex-wrap: wrap; }
/* the services' own pages, under the grid */
.svc-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(28px, 3vw, 40px); }
.svc-pages__h { margin-inline-end: 8px; font-size: 15px; font-weight: 700; color: var(--grey); }
.svc-pages a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line-tint); font-size: 16px; font-weight: 700; text-decoration: none; transition: box-shadow .25s, color .25s; }
.svc-pages a:hover, .svc-pages a:focus-visible { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.svc-pages .link__arrow { color: var(--blue); }
[data-scheme="dark"] .svc-pages__h { color: var(--text-2); }
[data-scheme="dark"] .svc-pages a { background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
[data-scheme="dark"] .svc-pages a:hover, [data-scheme="dark"] .svc-pages a:focus-visible { box-shadow: inset 0 0 0 1.5px var(--blue-start); color: var(--white); }
[dir="ltr"] .signoff__row { direction: rtl; }
.case__foot { width: 100%; margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.case__fact { font-size: 16px; font-weight: 500; color: var(--soft); }
.case__fact strong { margin-inline-end: 6px; font-weight: 900; font-size: 1.7em; line-height: 1.2; color: var(--accent); }
.case__foot .btn { min-height: 48px; padding: 0 22px; font-size: 16px; }

/* the stage: the project's picture, whole, inside its card */
.case__stage { position: relative; min-width: 0; container-type: size; aspect-ratio: 1 / 1; margin-bottom: 20px; order: -1; }
.duo .case__stage { aspect-ratio: 4 / 3; }
.case__art { position: absolute; inset: 0; margin: auto; width: min(100cqw, calc(100cqh * var(--arn))); aspect-ratio: var(--ar); }
.case__img { width: 100%; height: 100%; object-fit: contain; }
/* the same picture as ant marks, drawn by site.js while the card arrives */
.case__canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
/* a note pinned to the picture, the way the profile labels its screens */
.case__chip { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 10px; border-radius: 999px; white-space: nowrap;
  font-size: clamp(13px, 1.05vw, 15.5px); font-weight: 700; line-height: 1.2; color: var(--white); background: rgba(11, 11, 14, .82); border: 1px solid rgba(255, 255, 255, .18);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
/* over the picture the note is frosted glass: the screens behind it blur, the words stay readable */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .case--ink .case__chip { background: rgba(22, 24, 32, .46); border-color: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
}
.case__chip svg { width: 18px; height: 9px; flex: none; fill: var(--blue-start); }
.case--blue .case__chip { background: var(--white); color: var(--black); border-color: transparent; box-shadow: 0 10px 26px rgba(4, 14, 60, .28); }
.case--blue .case__chip svg { fill: var(--blue); }
.js .case__chip { opacity: 0; transform: translateY(12px); }
.js .case__chip.is-on { opacity: 1; transform: none; }
.js .case__chip + .case__chip { transition-delay: .12s; }

@media (max-width: 520px) {
  .case__chip { padding: 6px 11px 7px; gap: 7px; font-size: 11.5px; }
  .case__chip svg { width: 14px; height: 7px; }
  .case__cta .btn { width: 100%; }
  .case__cta .btn { justify-content: center; padding-inline: 18px; font-size: 16px; }
}
/* side by side: both halves share the same two rows, so their pictures and their words line up */
@media (min-width: 760px) {
  .case--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; }
  .duo { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .duo + .duo { border-top: 0; border-inline-start: 1px solid var(--rule); }
}
/* wide: the words beside the picture, and the picture fills the card's height */
@media (min-width: 1100px) {
  .case { --pad: clamp(28px, min(3.4vw, 5.2vh), 52px); }
  .case:not(.case--duo) { grid-template-columns: minmax(0, 9fr) minmax(0, 12fr); column-gap: clamp(32px, 4vw, 68px); }
  .case--flip:not(.case--duo) { grid-template-columns: minmax(0, 12fr) minmax(0, 9fr); }
  .case--flip .case__text { order: 2; }
  /* the figure beside the list. Its column is as wide as the figure itself */
  .case__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(22px, 2.4vw, 40px); align-items: start; }
  .case__facts dt { max-width: 9em; }
  .case__stat dd { font-size: clamp(38px, min(3.7vw, 6.6vh), 56px); white-space: nowrap; }
  .case__built { margin-top: 0; }
  .case__steps { row-gap: clamp(6px, 1.1vh, 10px); }
  .case__summary { font-size: clamp(16px, min(1.3vw, 2.3vh), 19px); line-height: 1.65; }
  .case__slogan { font-size: clamp(20px, min(1.9vw, 3.2vh), 27px); }
  .case__stage { aspect-ratio: auto; min-height: 420px; margin-bottom: 0; order: 0; }
  /* the two websites: the picture takes what height is left above the words */
  .case--duo { --pad: clamp(22px, min(2.6vw, 4vh), 40px); }
  .duo .case__stage { aspect-ratio: auto; min-height: 0; height: clamp(220px, 34vh, 380px); margin-bottom: clamp(12px, 2vh, 20px); order: -1; }

  /* when a whole card fits under the bar, site.js stacks them: every card shares one size (--case-h) and
     holds at --stick until the next one covers it. A card holds for as long as there is deck left after it. */
  .deck.is-stacked { row-gap: 0; }
  .deck.is-stacked::after { content: ""; flex: none; height: calc(var(--vh) * 24); }
  .deck.is-stacked > [data-stack] { position: sticky; top: var(--stick, calc(var(--nav-h) + 12px)); will-change: transform;
    min-height: max(var(--case-h, 0px), calc(var(--vh) * 100 - var(--nav-h) - 24px)); }
  .deck.is-stacked > [data-stack] + [data-stack] { margin-top: calc(var(--vh) * 36); }
  .deck.is-stacked .case__stage { min-height: 0; }
  .deck.is-stacked .duo .case__stage { height: auto; }
}
/* Where a card is taller than the screen (a phone, a tablet), the cards still slide over each other: a card scrolls
   until its end reaches the bottom of the screen, holds there, and the next one comes up over it. site.js sets --stick. */
.deck.is-piled { row-gap: 0; }
.deck.is-piled > [data-stack] { position: sticky; top: var(--stick, 0px); transform-origin: 50% 100%; }
.deck.is-piled > [data-stack] + [data-stack] { margin-top: calc(var(--vh) * 12); }
/* a short laptop screen: the same card, set tighter, so it still fits whole under the bar */
@media (min-width: 1100px) and (max-height: 760px) {
  .case, .case--duo { --pad: clamp(20px, 3.4vh, 30px); }
  .case__name { margin-top: 8px; font-size: clamp(40px, min(5vw, 8.6vh), 64px); line-height: 1.3; }
  .case__name--sm { margin-top: 6px; font-size: clamp(24px, min(2.3vw, 4.6vh), 32px); }
  .case__summary { margin-top: 8px; }
  .case__meta { margin-top: 12px; padding-top: 12px; }
  .case__tags { margin-top: 12px; }
  .case__tags li { min-height: 28px; font-size: 13.5px; }
  .case__cta { padding-top: 14px; }
  .case__cta .btn { min-height: 48px; font-size: 16px; }
  .case__foot { padding-top: 12px; }
  .case__foot .btn { min-height: 44px; }
}

/* The blue ribbon: the divider between the work and the last sheet. Blue arrives on the 22° line the way the sheets do,
   and the contact sheet follows on the same line, so what is left of the blue is a ribbon of even width across the page.
   Two lighter blades run ahead of it: spread apart as it comes into view, closed onto it once it is up (site.js, Ribbon).
   Without the script they sit closed. It is not a section: it has no words, and the bar does not change for it. */
.ribbon { --wedge: calc(var(--vw) * 100 * var(--tan22)); --t: clamp(84px, 12vw, 184px); --g1: 26px; --g2: 11px;
  position: relative; z-index: 2; height: calc(var(--wedge) + var(--t)); margin-top: calc(var(--wedge) * -1); pointer-events: none; }
.ribbon > span { position: absolute; inset: 0; clip-path: polygon(0 var(--wedge), 100% 0, 100% 100%, 0 100%); will-change: transform; }
.ribbon__blade:nth-child(1) { background: #C6DAFF; transform: translate3d(0, calc(var(--g1) * -1), 0); }
.ribbon__blade:nth-child(2) { background: var(--blue-soft); transform: translate3d(0, calc(var(--g2) * -1), 0); }
.ribbon__body { overflow: hidden; background: radial-gradient(ellipse 50% 90% at 18% 40%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)), linear-gradient(135deg, #3B82F6, #2765ED 50%, #1447E5); }
/* a streak of light that runs along the ribbon, right to left, as the page moves */
.ribbon__shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; transform: translate3d(190%, 0, 0) skewX(-22deg); will-change: transform;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 46%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .2) 54%, rgba(255, 255, 255, 0)); }

/* ---------- Contact: the glowing black sheet returns on the same axis ---------- */
.contact { margin-top: calc(var(--vw) * -100 * var(--tan22)); padding: calc(var(--wedge) + clamp(48px, 5vw, 72px)) 0 0; color: var(--white); scroll-margin-top: calc(var(--wedge) * -1 + 56px);
  --surface: radial-gradient(ellipse 46% 340px at 24% calc(var(--wedge) + 380px), rgba(39, 101, 237, .4), rgba(39, 101, 237, .12) 55%, rgba(39, 101, 237, 0)) var(--black); }
.contact__field { position: absolute; left: 0; top: 0; pointer-events: none; }
.contact > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head quote" "brief reach" "social social" "signoff signoff"; column-gap: clamp(32px, 5vw, 88px); }
/* the brief: three questions, then one message, ready in WhatsApp (site.js writes it; without the script the form falls back to mail) */
.brief { grid-area: brief; margin-top: clamp(48px, 6vw, 88px); display: grid; gap: clamp(22px, 2.4vw, 30px); padding: clamp(22px, 3vw, 44px); border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.brief__title { font-weight: 900; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.3; }
.brief__sub { margin-top: 8px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--on-black); }
.brief__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.brief__q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0; margin-bottom: 14px; font-weight: 700; font-size: clamp(17px, 1.35vw, 19px); }
.brief__q small { font-weight: 400; font-size: 14px; color: var(--muted); }
.brief__n { font-size: 14px; color: var(--blue-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .06);
  font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--on-black); pointer-events: none;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out); }
/* a chosen chip turns blue, and an ant falls into line at its start */
.chip svg { width: 0; height: 9px; margin-inline-end: 0; fill: currentColor; transform: rotate(64deg); flex: none; transition: width .3s var(--ease-out), margin .3s var(--ease-out), transform .45s var(--ease-snap); }
.chip:hover span { border-color: rgba(255, 255, 255, .34); color: var(--white); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--white); }
.chip input:checked + span svg { width: 18px; margin-inline-end: 8px; transform: none; }
.chip input:focus-visible + span { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
.brief__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__l { font-size: 14.5px; font-weight: 500; color: var(--on-black); }
.field__l small { font-size: 13px; font-weight: 400; color: var(--muted); }
.field__i { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .06); color: var(--white);
  font: 400 16px/1.6 var(--font); transition: border-color .2s, background-color .2s, box-shadow .2s; }
textarea.field__i { min-height: 108px; resize: vertical; }
.field__i:focus { outline: none; border-color: var(--blue-soft); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(143, 184, 255, .25); }
.field__i[aria-invalid="true"] { border-color: #FF9B9B; }
.brief__error { font-size: 15px; font-weight: 500; line-height: 1.6; color: #FFB4B4; }
.brief__error:empty { display: none; }
.brief__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.brief__alt { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 16px var(--font); color: var(--on-black);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color .2s; }
.brief__alt:hover, .brief__alt:focus-visible { color: var(--white); }
.brief__note { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.brief__nojs { display: none; }
html:not(.js) .brief__wa, html:not(.js) .brief__alt { display: none; }
html:not(.js) .brief__nojs { display: inline; }
@media (max-width: 560px) { .brief__fields { grid-template-columns: 1fr; } .brief__actions .btn { width: 100%; justify-content: center; } }
/* beside it: WhatsApp first, then the channels */
.reach { grid-area: reach; margin-top: clamp(48px, 6vw, 88px); display: grid; gap: 14px; align-content: start; }
/* WhatsApp: one press opens the chat. It keeps its own mark and its own green, so nobody has to read to know what it is.
   On a wide screen it is a glass card beside the channels; on a narrow one, a full-width row right under them. */
.wa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: 16px; padding: 16px 20px; text-align: start; text-decoration: none;
  border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .25s, background-color .25s, transform .2s var(--ease-out); }
.wa__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #25D366; box-shadow: 0 14px 26px -12px rgba(37, 211, 102, .6); transition: transform .4s var(--ease-snap); }
.wa__icon svg { width: 34px; height: 34px; fill: var(--white); }
.wa__text { display: grid; gap: 4px; }
.wa__text strong { font-weight: 700; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.4; color: var(--white); }
.wa__text span { font-size: 14.5px; line-height: 1.5; color: var(--on-black); transition: color .2s; }
.wa .link__arrow { font-size: 26px; color: var(--muted); transition: transform .3s var(--ease-out), color .25s; }
.wa:hover .link__arrow, .wa:focus-visible .link__arrow { color: var(--white); transform: translateX(-6px); }
.wa:hover, .wa:focus-visible { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .11); }
.wa:hover .wa__icon, .wa:focus-visible .wa__icon { transform: scale(1.07) rotate(-6deg); }
.wa:hover .wa__text span, .wa:focus-visible .wa__text span { color: var(--white); }
.wa:active { transform: translateY(1px); }
.contact__head { grid-area: head; max-width: 980px; }
.contact__title { font-weight: 900; font-size: clamp(44px, 5.8vw, 88px); line-height: 1.3; }
.contact__title > span { display: inline; }
.contact__lede { margin-top: 20px; font-size: clamp(19px, 1.56vw, 22.5px); color: var(--on-black); }
/* the quote: a blue bar, the words, then who said them */
.quote { max-width: 30em; }
.quote p { font-size: clamp(20px, 1.75vw, 26px); line-height: 1.65; font-weight: 500; text-wrap: pretty; }
.quote footer { margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--grey); }
.quote--contact { grid-area: quote; align-self: end; margin: 0; padding-inline-start: 22px; border-inline-start: 3px solid var(--blue-start); }
.quote--contact p { color: var(--white); font-size: clamp(19px, 1.5vw, 23px); }
.quote--contact footer { color: var(--blue-soft); }
/* the channels sit in one glass card */
.channels { padding: 4px clamp(20px, 2.4vw, 30px); border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.channel + .channel { border-top: 1px solid rgba(255, 255, 255, .12); }
.channel > a, .channel--static { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 4px; padding: 20px 0; text-decoration: none; }
.channel__label { grid-column: 1 / -1; }
.channel .link__arrow { grid-row: 2; grid-column: 2; }
.channel__label { font-size: 16px; font-weight: 500; color: var(--on-black); }
.channel__value { font-size: clamp(21px, 1.9vw, 28px); font-weight: 700; line-height: 1.3; justify-self: start; white-space: nowrap; transition: color .25s; }
.channel__value--ar { font-size: clamp(19px, 1.6vw, 24px); }
@media (max-width: 420px) { .channel__value--ar { white-space: normal; } }
.channel .link__arrow { font-size: 28px; color: var(--muted); transition: transform .3s var(--ease-out), color .25s; }
.channel > a:hover .channel__value, .channel > a:focus-visible .channel__value { color: var(--blue-soft); }
.channel > a:hover .link__arrow, .channel > a:focus-visible .link__arrow { color: var(--blue-soft); transform: translateX(-8px); }
.social { grid-area: social; margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
.social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .085);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  font-size: 15px; font-weight: 500; color: var(--on-black); text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.social a:hover, .social a:focus-visible { color: var(--white); border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .15); }
@media (max-width: 899px) {
  .contact > .wrap { grid-template-columns: 1fr; grid-template-areas: "head" "brief" "reach" "quote" "social" "signoff"; }
  .reach { margin-top: 14px; }
  .wa { padding: 14px 18px; }
  .wa__icon { width: 58px; height: 58px; box-shadow: none; }
  .wa__icon svg { width: 32px; height: 32px; }
  .quote--contact { margin-top: 56px; }
}

.signoff { grid-area: signoff; margin-top: clamp(120px, 16vw, 220px); padding-bottom: clamp(72px, 9vw, 120px); display: grid; justify-items: center; gap: 36px; text-align: center; }
.signoff__logo { width: clamp(200px, 22vw, 300px); height: auto; aspect-ratio: 1002 / 244.21; fill: var(--white); }
.signoff__row { display: flex; gap: clamp(7px, .8vw, 11px); direction: ltr; margin-top: 44px; }
.signoff__row svg { width: clamp(16px, 1.6vw, 22px); height: auto; aspect-ratio: 2; fill: var(--white); }
.signoff__row svg:first-child { fill: var(--blue-start); }
.signoff__url { font-weight: 500; font-size: 18px; color: var(--on-black); }
.js .signoff__row svg { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dr, 0deg)); transition: transform 1s var(--ease-snap), opacity .6s var(--ease-out); transition-delay: var(--delay, 0s); }
.js .signoff.is-in .signoff__row svg { opacity: 1; transform: none; }


/* ---------- Without the page script: the same story as a static read ---------- */
html:not(.js) .nav { background: var(--black); }
html:not(.js) .nav__brand { opacity: 1; visibility: visible; }
html:not(.js) .cover { height: auto; }
html:not(.js) .cover__stage { position: relative; height: 100svh; }
html:not(.js) .cover__ants, html:not(.js) .about__band, html:not(.js) .cover__sym--blue { display: none; }
html:not(.js) .about { margin-top: 0; }
html:not(.js) .scene__pin { height: auto; }
html:not(.js) .scene__head { height: calc(var(--wedge) + 24px); }
html:not(.js) .scene__stage { position: relative; height: auto; overflow: visible; padding: 48px 0 24px; }
html:not(.js) .scene__grid { padding-top: 0; }
html:not(.js) .mess { display: none; }
html:not(.js) .flow { --zone: 0px; }
html:not(.js) .step__fig { display: none; }
html:not(.js) .row { --on: 1; }
html:not(.js) .tally svg { fill: var(--white); transform: none; }
html:not(.js) .tally svg:last-child { fill: var(--blue-start); }
html:not(.js) .sys__before { opacity: 0; }
html:not(.js) .sys__after { opacity: 1; transform: none; }
html:not(.js) .sys__state { background: var(--blue); border-color: transparent; }
html:not(.js) .trail__rail, html:not(.js) .trail__ant, html:not(.js) .odo { display: none; }

/* ---------- Reduced motion: the story stays, the movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .nav { animation: none; opacity: 1; }
  .js .cover__stage::before { opacity: 1; transition: none; }
  .js .cover__text > *, .js .cover__ant, .js .about__lede .ink, .one__bar, .one__bar::before, .one__cell, .one__icon, .one__num, .one__desc, .one__cell::before, .one__cell::after, .one__icon::before, .one__icon > img, .one__icon > canvas, .stair__glyph i, .stair__list li { transition: none !important; }
  .js .signoff__row svg { opacity: 1; transform: none; transition: none; }
  .kx, .k-on .kx { --k: var(--kt); transition: none; }
  .btn, .btn__ant, .nav__ant, .link__arrow, .svc-card, .svc-card::before, .case__steps svg, .case__chip { transition: none; }
  .js .case__steps svg, .js .case__chip { transform: none; opacity: 1; }
  .svc-card:hover { transform: none; }
  .chip span, .chip svg, .qa__mark, .qa__mark::before, .qa__mark::after, .qa::details-content { transition: none; }
  .stage::after, .stage__num, .stage__name, .stage__desc, .trail__ant, .odo { transition: none !important; }
  .tally svg, .sys, .sys__state, .sys__state > span, .step__card, .step__card > *, .step__card::after, .step__state, .step::before, .flow__end { transition: none !important; }
}

/* ---------- Dark scheme: the light sections on the brand's black ----------
   The white sections take --paper, the light ones --paper-2 (a breath of blue), white cards --card. On black a halo is
   light, not a tint: the light scheme's pools sit on the screen's edge, which here would be blue blots cut in half, so
   every pool below sits inside its section, away from the edges, and quieter (--halo in base.css). The one bright
   light is the cover's spot, seen through the glass of «من نحن». Layout and motion are untouched. */
/* ink glass: over the cover's black it is exactly --paper, so the pane meets the solid part below without a seam; over
   the spot it lets a deep blue through. A faint sheen and a hairline at its top edge say it is glass. Nothing sharp is
   ever behind it (site.js pushes the cover's words up ahead of its edge), only the black and the soft spot, so it needs
   no backdrop blur: plain translucency looks the same and costs nothing while scrolling. */
[data-scheme="dark"] .about { background: linear-gradient(rgba(5, 6, 8, 0) calc(var(--vh) * 100), var(--paper) 0); color: var(--text); }
[data-scheme="dark"] .about::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 240px), rgba(10, 12, 16, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
@media (prefers-reduced-transparency: reduce) { [data-scheme="dark"] .about::before { background: var(--paper); } }
[data-scheme="dark"].js .about__lede .ink { color: #4B505D; }
[data-scheme="dark"].js .about__lede .ink.is-on { color: var(--text); }
[data-scheme="dark"] .one__cell { color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .05); }
[data-scheme="dark"] .one__sub, [data-scheme="dark"] .one__desc, [data-scheme="dark"].js .one__cell:last-child .one__desc { color: var(--text-2); }
[data-scheme="dark"].js .one__cell:last-child { color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .05); }
[data-scheme="dark"].js .one.is-in .one__cell:last-child { color: var(--white); }
[data-scheme="dark"].js .one.is-in .one__cell:last-child .one__desc { color: var(--on-blue); }
[data-scheme="dark"] .one__icon::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, 0)); }
[data-scheme="dark"] .stair { color: var(--text); }
[data-scheme="dark"] .stair__who { color: var(--text-2); }
[data-scheme="dark"] .stair--ink::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

[data-scheme="dark"] .services, [data-scheme="dark"] .why { color: var(--text); }
[data-scheme="dark"] .services {
  --surface: radial-gradient(ellipse 34% 420px at 80% calc(var(--wedge) + 520px), var(--halo), rgba(39, 101, 237, 0)),
             radial-gradient(ellipse 36% 420px at 20% calc(100% - 520px), var(--halo), rgba(39, 101, 237, 0)) var(--tint); }
[data-scheme="dark"] .why {
  --surface: radial-gradient(ellipse 34% 360px at 80% calc(var(--wedge) + 440px), var(--halo), rgba(39, 101, 237, 0)),
             radial-gradient(ellipse 32% 360px at 20% calc(100% - 440px), var(--halo), rgba(39, 101, 237, 0)) var(--tint); }
[data-scheme="dark"] .svc-lede, [data-scheme="dark"] .svc-text, [data-scheme="dark"] .why__text, [data-scheme="dark"] .next__sub,
[data-scheme="dark"] .qa__a p, [data-scheme="dark"] .stage__desc, [data-scheme="dark"] .odo__of { color: var(--text-2); }
[data-scheme="dark"] .svc-card { background: var(--card); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-card); }
[data-scheme="dark"] .svc-card:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .6); }
[data-scheme="dark"] .svc-ink { fill: var(--white); }
[data-scheme="dark"] .svc-blue { fill: var(--blue-start); }
[data-scheme="dark"] .svc-note { background: var(--white); color: var(--black); }

[data-scheme="dark"] .process { background: radial-gradient(ellipse 36% 420px at 20% calc(100% - 520px), var(--halo), rgba(39, 101, 237, 0)) var(--paper); color: var(--text); }
[data-scheme="dark"] .work { background: radial-gradient(ellipse 34% 420px at 20% 520px, var(--halo), rgba(39, 101, 237, 0)),
  radial-gradient(ellipse 36% 420px at 80% calc(100% - var(--vw) * 100 * var(--tan22) - 520px), var(--halo), rgba(39, 101, 237, 0)) var(--paper); color: var(--text); }
[data-scheme="dark"] .faq { background: radial-gradient(ellipse 34% 420px at 20% 520px, var(--halo), rgba(39, 101, 237, 0)) var(--paper-2); color: var(--text); }
/* the ribbon's blades step from the surface into the blue: on white they are paler blues, on black deeper ones, so
   in the dark no near-white line runs above the ribbon */
[data-scheme="dark"] .ribbon__blade:nth-child(1) { background: #142A66; }
[data-scheme="dark"] .ribbon__blade:nth-child(2) { background: #1D45B8; }
[data-scheme="dark"] .process__note { border-color: var(--line); }
[data-scheme="dark"] .trail__ink { background: #2A2E38; }
[data-scheme="dark"] .trail__ink--done { background: linear-gradient(var(--white) var(--s-last, 100%), var(--blue-start) var(--s-last, 100%)); }
[data-scheme="dark"].js .stage__num, [data-scheme="dark"].js .stage__name { color: #2E323C; }
[data-scheme="dark"].js .stage.is-reached .stage__num { color: var(--blue-soft); }
[data-scheme="dark"] .stage::before, [data-scheme="dark"] .stage::after { background: var(--line); }
[data-scheme="dark"] .stage::after { background: var(--white); }
[data-scheme="dark"].js .stage.is-reached .stage__name { color: var(--text); }
[data-scheme="dark"] .next { border-color: var(--white); }
[data-scheme="dark"] .why__list, [data-scheme="dark"] .faq__list { border-color: var(--white); }
[data-scheme="dark"] .why__item + .why__item, [data-scheme="dark"] .qa { border-color: var(--line); }
[data-scheme="dark"] .qa__mark { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
[data-scheme="dark"] .qa__mark::before, [data-scheme="dark"] .qa__mark::after { background: var(--white); }
[data-scheme="dark"] .qa[open] .qa__mark { background: var(--blue); }
/* the first case card slides over the page itself: on black its edge needs no special treatment */
[data-scheme="dark"] .deck > .case:first-child .case__glass::before { border-top-color: rgba(255, 255, 255, .14); }