/* «الصعود درجةً درجة»: the climb section (/story, and the top of /business).
   Always dark: the stage is a night sky over the stairs, whatever the visitor's theme.
   Motion is transform + opacity only, driven by --p (0 → 1) that climb.js writes. */

.climb{
  --night:oklch(14% .045 272);   /* deeper than --navy: the stage */
  --night-2:oklch(19% .06 272);
  --glow:var(--cyan);
  --dim:oklch(80.8% .139 209 / .28);
  --text:oklch(96% .012 260);
  --text-2:oklch(80% .03 260);
  --hdr:64px;
  --stage:calc(100svh - var(--hdr));
  position:relative;background:var(--night);color:var(--text);isolation:isolate;
  overflow-x:clip   /* the summit light and the big numbers may spill; clip, not hidden, keeps the stage pinned */
}
.climb .mono{font-family:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* the pinned stage: one screen, the chapters scroll over it */
.climb__stage{position:sticky;top:var(--hdr);height:var(--stage);overflow:hidden;z-index:0;
  background:radial-gradient(120% 80% at 50% 110%,var(--night-2),var(--night) 60%)}
.climb__gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.climb[data-mode="3d"] .climb__gl.is-ready{opacity:1}
.climb[data-mode="3d"] .climb__gl.is-ready ~ .climb__stairs{opacity:0}
.climb__stairs{position:absolute;inset-inline-end:-6%;bottom:-4%;width:min(92vw,900px);height:auto;transition:opacity .8s ease;overflow:visible}
.climb__stairs .tread{fill:oklch(22% .06 272);stroke:var(--dim);stroke-width:1.2}
.climb__stairs .riser{fill:oklch(17% .05 272);stroke:var(--dim);stroke-width:1.2}
.climb__stairs .on .tread{fill:oklch(80.8% .139 209 / .22);stroke:var(--glow)}
.climb__stairs .on .riser{stroke:var(--glow)}
.climb__stairs .dot{fill:var(--glow)}
.climb__stairs g.step{transition:opacity .4s ease}
html[dir=ltr] .climb__stairs{transform:scaleX(-1)}
/* the character on the drawn stairs: it glides to the lit step and hops on the way */
.buddy-svg{transition:transform .55s cubic-bezier(.22,.8,.24,1)}
.buddy-svg image{transform-box:fill-box;transform-origin:50% 100%}
.buddy-svg image.hop{animation:svg-hop .55s ease}
@keyframes svg-hop{40%{transform:translateY(-34px) scaleY(1.03)}80%{transform:translateY(0) scaleY(.96)}}
@media (prefers-reduced-motion:reduce){.buddy-svg{transition:none}.buddy-svg image.hop{animation:none}}

/* the frame: edge ticks, a thin ring, the ruler and its label */
.hud{position:absolute;inset:0;pointer-events:none}
.hud__tick{position:absolute;background:var(--dim)}
.hud__tick--t,.hud__tick--b{inset-inline-start:50%;width:14px;height:1px;margin-inline-start:-7px}
.hud__tick--t{top:18px} .hud__tick--b{bottom:18px}
.hud__tick--s,.hud__tick--e{top:50%;width:1px;height:14px;margin-top:-7px}
.hud__tick--s{inset-inline-start:18px} .hud__tick--e{inset-inline-end:18px}
.hud__ring{position:absolute;left:50%;top:50%;width:min(86vmin,760px);aspect-ratio:1;margin:calc(min(86vmin,760px) / -2) 0 0 calc(min(86vmin,760px) / -2);
  border-radius:50%;border:1px solid oklch(80.8% .139 209 / .14);border-top-color:oklch(80.8% .139 209 / .5);
  transform:rotate(calc(var(--p,0) * 140deg))}
.hud__ruler{position:absolute;inset-inline-end:28px;top:18%;bottom:18%;width:10px;
  background:repeating-linear-gradient(to bottom,var(--dim) 0 1px,transparent 1px 12px)}
.hud__mark{position:absolute;inset-inline-end:-6px;top:0;width:22px;height:2px;background:var(--glow);
  transform:translateY(calc(var(--p,0) * var(--rh,0px)))}
.hud__label{position:absolute;inset-inline-end:28px;bottom:calc(18% - 34px);font-size:12px;font-weight:600;color:var(--text-2)}

/* the rail: one button per step, jumps there */
.climb__rail{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);display:grid;gap:8px;z-index:3}
.climb__rail button{width:34px;height:34px;border-radius:9px;border:1px solid var(--dim);background:oklch(14% .045 272 / .6);
  color:var(--text-2);font:600 12px/1 ui-monospace,Consolas,monospace;display:grid;place-items:center;cursor:pointer}
.climb__rail button[aria-current="step"]{border-color:var(--glow);color:var(--night);background:var(--glow)}
.climb__rail button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
@media (hover:hover){.climb__rail button:hover{border-color:var(--glow);color:var(--text)}}

/* the chapters scroll over the pinned stage */
.climb__steps{position:relative;z-index:2;margin-top:calc(-1 * var(--stage))}
.ch{min-height:var(--stage);max-width:var(--wrap);margin-inline:auto;padding:48px calc(var(--gut) + 56px) 48px calc(var(--gut) + 56px);
  display:grid;align-content:center;gap:18px;
  opacity:clamp(0,calc(var(--v,1) * 1.4),1)}
.ch__k{font-size:13px;font-weight:700;color:var(--glow);letter-spacing:.05em;display:flex;gap:10px;align-items:center}
.ch__k .mono{border:1px solid var(--dim);border-radius:6px;padding:2px 7px}
.ch__h{display:grid;font-size:clamp(40px,8.4vw,108px);font-weight:800;line-height:1.08;color:var(--glow);margin:0;
  position:relative;justify-self:start;padding:14px 22px}
.ch__h span:nth-child(2){color:var(--text);padding-inline-start:clamp(24px,8vw,140px)}
/* the corner brackets around a heading */
.ch__h::before,.ch__h::after{content:"";position:absolute;width:26px;height:26px;border:1.5px solid var(--dim)}
.ch__h::before{top:0;inset-inline-start:0;border-inline-end:0;border-bottom:0}
.ch__h::after{bottom:0;inset-inline-end:0;border-inline-start:0;border-top:0}
.ch__body{display:grid;gap:22px;justify-self:end;max-width:46ch}
.ch__s{color:var(--text-2);font-size:clamp(15px,1.6vw,17px);line-height:1.85;max-width:46ch;margin:0;position:relative;padding-inline-start:18px}
.ch__s::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:6px;height:6px;background:var(--glow)}
.ch__stats{display:flex;gap:28px;flex-wrap:wrap}
.ch__stat{display:grid;gap:2px}
.ch__stat b{font-size:clamp(32px,4.6vw,52px);font-weight:700;color:var(--text);direction:ltr;line-height:1.1}
html[dir=rtl] .ch__stat b{text-align:right}
.ch__stat span{font-size:13.5px;color:var(--text-2)}
.ch__stat[hidden]{display:none}

.ch--open .ch__h{font-size:clamp(46px,10vw,128px)}
.ch--open .ch__s{justify-self:end}
/* the business page opens with a longer promise */
.climb--short .ch--open .ch__h{font-size:clamp(36px,6.6vw,88px)}
.ch__cue{display:flex;align-items:center;gap:12px;color:var(--text-2);font-size:13px;justify-self:center;margin-top:24px}
.ch__cue i{width:1px;height:42px;background:linear-gradient(var(--glow),transparent);transform-origin:top}
@media (prefers-reduced-motion:no-preference){.ch__cue i{animation:cue 1.8s ease-in-out infinite}}
@keyframes cue{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.ch--clients .clients__viewport{margin-top:12px;-webkit-mask-image:linear-gradient(90deg,transparent,oklch(0% 0 0) 10%,oklch(0% 0 0) 90%,transparent);mask-image:linear-gradient(90deg,transparent,oklch(0% 0 0) 10%,oklch(0% 0 0) 90%,transparent)}
.climb .clients__track img{background:oklch(96% .01 270);border-radius:12px;padding:6px 10px}
.ch__cta{display:flex;gap:12px;flex-wrap:wrap}
.climb .btn.ghd{background:transparent;color:var(--text);border:1px solid var(--dim)}
@media (hover:hover){.climb .btn.ghd:hover{border-color:var(--glow)}}

/* ── breaking the template: each chapter moves differently ──────────────
   --v: 0 → 1 → 0 as a chapter crosses the screen (climb.js) · --d: -1 → 1, its
   position (below → above the middle). Everything is transform + opacity. */

/* the text alternates sides; the stage swings to the other half (climb-3d / SVG) */
@media (min-width:900px){
  .ch[data-text] > *{max-width:min(620px,54%)}
  .ch[data-text] .ch__h{max-width:none}
  .ch[data-text="start"] > *{justify-self:start}
  .ch[data-text="end"] > *{justify-self:end}
  .ch[data-text="end"] .ch__h span:nth-child(2){padding-inline-start:0;padding-inline-end:clamp(24px,6vw,100px)}
  .ch[data-text="wall"] > *{justify-self:center;text-align:center}
  .ch[data-text="wall"] .ch__k{justify-content:center}
  .ch[data-text="wall"] .ch__s{padding-inline-start:0}
  .ch[data-text="wall"] .ch__s::before{display:none}
  .climb__stairs{transition:opacity .8s ease,transform 1s cubic-bezier(.22,.8,.24,1)}
  /* data-side is the text's side; the stairs sit on the other one */
  .climb[data-side="end"] .climb__stairs{transform:translateX(38%)}
  html[dir=ltr] .climb[data-side="end"] .climb__stairs{transform:scaleX(-1) translateX(38%)}
}

/* headings rise line by line */
.ch__h span{display:block;opacity:clamp(0,calc(var(--v,1) * 1.6 - .2),1);transform:translateY(calc((1 - clamp(0,var(--v,1) * 1.6 - .2,1)) * 40px))}
.ch__h span:nth-child(2){opacity:clamp(0,calc(var(--v,1) * 1.6 - .5),1);transform:translateY(calc((1 - clamp(0,var(--v,1) * 1.6 - .5,1)) * 52px))}
.ch{transform:none}   /* the lines move; the block stays put */

/* the big outlined number drifts against the scroll */
.ch{position:relative}
.ch__num{position:absolute;z-index:-1;top:50%;inset-inline-end:4%;font-size:clamp(140px,26vw,360px);font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px oklch(80.8% .139 209 / .16);pointer-events:none;
  transform:translateY(calc(-50% + var(--d,0) * 90px));opacity:calc(var(--v,1) * .9)}
.ch[data-text="end"] .ch__num{inset-inline-end:auto;inset-inline-start:4%}
.ch[data-text="wall"] .ch__num{inset-inline-end:50%;transform:translate(50%,calc(-50% + var(--d,0) * 90px))}
html[dir=ltr] .ch[data-text="wall"] .ch__num{transform:translate(-50%,calc(-50% + var(--d,0) * 90px))}

/* CVs fan out as the step arrives */
.viz{pointer-events:none}
.viz--cv{position:relative;height:120px;width:220px}
.cvc{position:absolute;inset-inline-start:0;bottom:0;width:92px;height:118px;border-radius:10px;background:oklch(96% .012 260);
  display:grid;align-content:start;gap:7px;padding:12px 10px;box-shadow:0 10px 30px oklch(5% .03 272 / .5);transform-origin:50% 100%}
.cvc b{width:26px;height:26px;border-radius:50%;background:oklch(80.8% .139 209 / .55)}
.cvc s{height:5px;border-radius:3px;background:oklch(80% .02 270)} .cvc s:nth-child(3){width:70%} .cvc s:nth-child(4){width:84%}
.cvc:nth-child(1){transform:translateX(calc(var(--v,1) * 0px)) rotate(calc(var(--v,1) * -14deg))}
.cvc:nth-child(2){transform:translateX(calc(var(--v,1) * 54px)) rotate(calc(var(--v,1) * -2deg))}
.cvc:nth-child(3){transform:translateX(calc(var(--v,1) * 108px)) rotate(calc(var(--v,1) * 11deg))}
html[dir=rtl] .cvc:nth-child(2){transform:translateX(calc(var(--v,1) * -54px)) rotate(calc(var(--v,1) * 2deg))}
html[dir=rtl] .cvc:nth-child(3){transform:translateX(calc(var(--v,1) * -108px)) rotate(calc(var(--v,1) * -11deg))}

/* screening: twelve candidates, three light up, the rest step back */
.viz--sort{display:grid;grid-template-columns:repeat(6,34px);gap:10px}
.viz--sort i{width:34px;height:42px;border-radius:9px;border:1px solid var(--dim);display:grid;justify-items:center;align-content:center;gap:4px;
  opacity:calc(1 - var(--v,1) * .65);transform:scale(calc(1 - var(--v,1) * .1))}
.viz--sort i b{width:12px;height:12px;border-radius:50%;background:oklch(80% .02 270)}
.viz--sort i s{width:18px;height:3px;border-radius:2px;background:oklch(80% .02 270 / .7)}
.viz--sort i.pick{opacity:1;border-color:var(--glow);background:oklch(80.8% .139 209 / calc(var(--v,1) * .22));transform:translateY(calc(var(--v,1) * -8px)) scale(calc(1 + var(--v,1) * .12))}
.viz--sort i.pick b{background:var(--glow)}

/* interview: a question, an answer, someone typing */
.viz--chat{display:grid;gap:8px;max-width:340px}
.bub{margin:0;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.6;width:fit-content;max-width:100%}
.bub--q{background:oklch(80.8% .139 209 / .16);border:1px solid var(--dim);color:var(--text);border-end-start-radius:4px;
  opacity:clamp(0,calc(var(--v,1) * 2.2 - .5),1);transform:translateY(calc((1 - clamp(0,var(--v,1) * 2.2 - .5,1)) * 14px))}
.bub--a{justify-self:end;background:oklch(96% .012 260);color:var(--night);border-end-end-radius:4px;
  opacity:clamp(0,calc(var(--v,1) * 2.2 - 1),1);transform:translateY(calc((1 - clamp(0,var(--v,1) * 2.2 - 1,1)) * 14px))}
.bub--dots{display:flex;gap:4px;padding:10px 12px;background:oklch(80.8% .139 209 / .1);opacity:clamp(0,calc(var(--v,1) * 2.2 - 1.3),1)}
.bub--dots i{width:6px;height:6px;border-radius:50%;background:var(--glow)}
@media (prefers-reduced-motion:no-preference){.bub--dots i{animation:dot 1.2s ease-in-out infinite}.bub--dots i:nth-child(2){animation-delay:.15s}.bub--dots i:nth-child(3){animation-delay:.3s}}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* hiring: a tick inside a ring, scaling in */
.viz--check{width:64px;height:64px;opacity:clamp(0,calc(var(--v,1) * 2 - .6),1);transform:scale(calc(.6 + clamp(0,var(--v,1) * 2 - .6,1) * .4)) rotate(calc((1 - clamp(0,var(--v,1) * 2 - .6,1)) * -30deg))}
.viz--check svg{width:100%;height:100%;fill:none;stroke:var(--glow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.viz--check circle{stroke:var(--dim)}

/* clients: a wall that assembles tile by tile */
.logo-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;gap:12px;width:min(100%,980px);justify-self:center;margin-top:8px}
.logo-wall figure{margin:0;height:auto;width:100%;aspect-ratio:16/10;border-radius:14px;background:oklch(100% 0 0 / .03);border:1px solid oklch(80.8% .139 209 / .14);display:grid;place-items:center;padding:14px;
  opacity:clamp(0,calc(var(--v,1) * 2.4 - var(--i,0) * .055),1);
  transform:translateY(calc((1 - clamp(0,var(--v,1) * 2.4 - var(--i,0) * .055,1)) * 26px)) scale(calc(.92 + clamp(0,var(--v,1) * 2.4 - var(--i,0) * .055,1) * .08))}
.logo-wall figure{min-width:0;overflow:hidden}
.logo-wall figure{position:relative}
/* .logo-wall .lg beats motion.css's fixed logo height: here the tile sizes the logo */
.logo-wall .lg img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);max-width:none;object-fit:contain}   /* a tall logo fits its tile, never stretches it */
@media (max-width:899px){.logo-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:519px){.logo-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.logo-wall figure{border-radius:10px;padding:8px}}

/* static: every piece at rest, fully shown */
.climb[data-mode="static"] .ch__num{display:none}


/* ── the summit (the last step): light behind the heading, two doors, climb again ── */
.ch--end{isolation:isolate}
.summit{position:absolute;z-index:-2;inset-inline-start:-10%;top:50%;width:min(110vw,1100px);aspect-ratio:1;margin-top:calc(min(110vw,1100px) / -2);
  border-radius:50%;pointer-events:none;opacity:calc(var(--v,1) * .9);
  background:repeating-conic-gradient(from 0deg,oklch(80.8% .139 209 / .09) 0deg 6deg,transparent 6deg 22deg);
  -webkit-mask-image:radial-gradient(closest-side,oklch(0% 0 0) 15%,transparent 72%);mask-image:radial-gradient(closest-side,oklch(0% 0 0) 15%,transparent 72%);
  transform:scale(calc(.75 + var(--v,1) * .25))}
.ch.ch--end > .summit{max-width:none}   /* not held to the text column's width */
@media (prefers-reduced-motion:no-preference){.summit{animation:summit 60s linear infinite}}
@keyframes summit{to{rotate:360deg}}
html[dir=ltr] .summit{inset-inline-start:-10%}

.doors{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,260px))}
.door{position:relative;overflow:hidden;display:grid;gap:6px;align-content:start;padding:22px 20px 20px;border-radius:18px;text-decoration:none;color:var(--text);
  background:oklch(19% .06 272 / .75);border:1px solid var(--dim);
  opacity:clamp(0,calc(var(--v,1) * 2.2 - .7 - var(--k,0) * .3),1);
  transform:translateY(calc((1 - clamp(0,var(--v,1) * 2.2 - .7 - var(--k,0) * .3,1)) * 36px))}
.door b{font-size:19px;font-weight:800;color:oklch(100% 0 0)}
.door span:not(.door__ic){font-size:14px;color:var(--text-2);line-height:1.6}
.door__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:oklch(80.8% .139 209 / .14);color:var(--glow);margin-bottom:6px}
.door__ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.door__go{position:absolute;inset-inline-end:18px;top:20px;font-style:normal;color:var(--glow);font-size:20px}
html[dir=ltr] .door__go{transform:scaleX(-1)}
.door:first-child{background:var(--glow);border-color:var(--glow)}
.door:first-child b{color:var(--night)} .door:first-child span:not(.door__ic){color:oklch(25% .08 272)}
.door:first-child .door__ic{background:oklch(14% .045 272 / .14);color:var(--night)} .door:first-child .door__go{color:var(--night)}
/* a light sweeps across a door on hover */
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,oklch(100% 0 0 / .22) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.door:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .door{transition:border-color .3s ease,box-shadow .3s ease}
  .door:hover{border-color:var(--glow);box-shadow:0 18px 50px oklch(80.8% .139 209 / .18)}
  .door:hover::after{transform:translateX(120%);transition:transform .9s ease}
  .door__ic{transition:transform .35s cubic-bezier(.22,.8,.24,1)}
  .door:hover .door__ic{transform:translateY(-3px) rotate(-6deg)}
  .door__go{transition:translate .3s ease}
  .door:hover .door__go{translate:-6px 0}
  html[dir=ltr] .door:hover .door__go{translate:6px 0}
}
.again{justify-self:start;display:inline-flex;gap:8px;align-items:center;margin-top:6px;min-height:44px;padding:0 16px;border-radius:999px;
  background:transparent;border:1px solid var(--dim);color:var(--text-2);font:inherit;font-size:14px;cursor:pointer;
  opacity:clamp(0,calc(var(--v,1) * 2.2 - 1.2),1)}
.again i{font-style:normal;color:var(--glow)}
@media (hover:hover){.again:hover{border-color:var(--glow);color:var(--text)}}
@media (prefers-reduced-motion:no-preference){.again:hover i{animation:again .8s ease-in-out infinite}}
@keyframes again{50%{transform:translateY(-4px)}}
@media (max-width:519px){.doors{grid-template-columns:1fr}}

/* phones: the rail and ruler would crowd the text */
@media (max-width:719px){
  .ch{padding-inline:var(--gut);padding-block:40px}
  .climb__rail,.hud__ruler,.hud__label{display:none}
  .ch__h{padding:10px 14px}
  .ch__h span:nth-child(2){padding-inline-start:28px}
  .ch__body{justify-self:stretch}
  .climb__stairs{width:150vw;inset-inline-end:-40vw;opacity:.75}
  /* the stairs sit behind the text on a phone: a shade keeps the words readable */
  .climb__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,oklch(14% .045 272 / .25),oklch(14% .045 272 / .6) 45%,oklch(14% .045 272 / .25))}
}

/* static: no pinning, no movement; the stairs stay as a quiet backdrop */
.climb[data-mode="static"] .climb__stage{position:absolute;inset:0;top:0;height:100%}
.climb[data-mode="static"] .climb__steps{margin-top:0}
.climb[data-mode="static"] .ch{opacity:1;transform:none;min-height:0;padding-block:72px}
.climb[data-mode="static"] .hud__ring,.climb[data-mode="static"] .hud__ruler,.climb[data-mode="static"] .hud__label,.climb[data-mode="static"] .climb__rail{display:none}
.climb[data-mode="static"] .climb__stairs{position:sticky;opacity:.35}

/* the end of the climb hands over to the page's own theme */
.climb + *{position:relative}

/* Lenis (its lenis.css, inlined) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}