/* CFO+ home screen.
   One screen: words centred on a very dark ground lit from below by an amber glow; under a gilt
   rule hang three small oil paintings, one per service; the plus badge rolls along the rule; a
   strip of client logos closes the screen. Below it: the closing line, the contact address, the
   footer. Every string exists in English and Arabic (data-l); the language button flips
   <html lang dir>. Logical properties keep the layout right in both directions.
   Classes named is-hover, is-press and is-focus repeat :hover, :active and :focus-visible so the
   handoff sheet can show each state side by side; production code may drop them. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-body)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset);border-radius:var(--r-focus)}
h1,h2,h3,p{margin:0}
/* ---------- language ---------- */
html:not([lang="ar"]) [data-l="ar"],html[lang="ar"] [data-l="en"]{display:none !important}
/* ---------- navigation ---------- */
.nav{position:relative;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);height:var(--nav-h);padding-inline:var(--gutter);background:var(--ink);animation:fade var(--t-enter) ease-out backwards}
.brand{flex:none;display:block}
.brand img{display:block;width:var(--logo-w);height:var(--logo-h)}
.nav__links{display:flex;gap:clamp(16px,2.4vw,38px);font-weight:var(--fw-medium);font-size:var(--fs-nav);color:var(--mist)}
.nav__links{align-items:center}
.nav__links a,.nav__more{padding-block:10px;white-space:nowrap;transition:color var(--t-base)}
.nav__more{display:inline-flex;align-items:center;gap:var(--sp-2);padding-inline:0;border:0;background:none;font-weight:inherit;font-size:inherit;color:inherit;cursor:pointer}
.nav__chev{flex:none;width:12px;height:12px;transition:transform var(--t-base)}
.nav__more[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__links a:hover,.nav__links a[aria-current="page"],.nav__more:hover,.nav__more[aria-expanded="true"]{color:var(--cream)}
.nav__links a:active,.nav__more:active{color:var(--amber)}
.nav__links a[aria-current="page"],.nav__more[aria-expanded="true"]{box-shadow:0 var(--rule) 0 var(--amber)}
/* sign in: the quiet action beside the primary one */
.signin{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding-inline:var(--sp-3);font-weight:var(--fw-medium);font-size:var(--fs-control);color:var(--cream);white-space:nowrap;transition:color var(--t-base),border-color var(--t-base)}
.signin:hover{color:var(--amber)}
.signin:active{color:var(--amber-press)}
.signin--box{min-height:var(--btn-h);padding-inline:var(--btn-pad);border:var(--line) solid var(--hair-strong);border-radius:var(--r-pill)}
.signin--box:hover{border-color:var(--amber)}
/* services panel (desktop): the five groups, all visible at once, under the bar.
   Opens on a click of "Services"; closes on a link, Esc, or a click outside. */
.mega{position:absolute;z-index:var(--z-menu);inset-inline:0;top:var(--nav-h);padding:var(--sp-7) var(--gutter) var(--sp-5);border-block:var(--line) solid var(--hair);background:var(--ink-deep);box-shadow:0 0 0 100vmax var(--scrim);clip-path:inset(0 -100vmax -100vmax -100vmax);animation:rise var(--t-base) var(--ease) backwards}
.mega[hidden]{display:none}
.mega ul{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:flex;flex-direction:column}
.mega li a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:40px;padding-block:6px;font-weight:var(--fw-medium);font-size:var(--fs-control);line-height:var(--lh-tight);color:var(--mist);transition:color var(--t-base)}
.mega li a small{font-weight:var(--fw-regular);font-size:13px;line-height:1.45;color:var(--dim)}
.mega li a:hover{color:var(--cream)}
.mega li a:active{color:var(--amber)}
.mega a.more{color:var(--amber);font-weight:var(--fw-bold);font-size:var(--fs-link)}
.mega a.more:hover{color:var(--cream)}
.mega a.more > span::after{content:"\2192";display:inline-block;margin-inline-start:.45em}
html[dir="rtl"] .mega a.more > span::after{content:"\2190"}
.nav__actions{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px)}
/* quiet outlined control: the language button, the menu button */
.lang,.menu{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);border:var(--line) solid var(--hair-strong);border-radius:var(--r-pill);background:transparent;font-weight:var(--fw-medium);font-size:var(--fs-control);color:var(--cream);cursor:pointer;transition:border-color var(--t-base),color var(--t-base),background var(--t-press)}
.lang{padding-inline:var(--sp-4)}
.lang:hover,.menu:hover{border-color:var(--amber);color:var(--amber)}
.lang:active,.menu:active{border-color:var(--amber);color:var(--amber);background:var(--fill-press)}
.lang:disabled,.lang[aria-disabled="true"]{border-color:var(--hair);color:var(--dim);cursor:not-allowed;pointer-events:none}
/* primary action */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding-inline:var(--btn-pad);border:0;border-radius:var(--r-pill);background:var(--amber);color:var(--ink);font-weight:var(--fw-bold);font-size:var(--fs-btn);white-space:nowrap;cursor:pointer;transition:transform var(--t-base),box-shadow var(--t-base),background var(--t-press)}
.pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.pill:active{transform:none;box-shadow:none;background:var(--amber-press)}
.pill:disabled,.pill[aria-disabled="true"]{background:var(--fill-off);color:var(--dim);transform:none;box-shadow:none;cursor:not-allowed;pointer-events:none}
/* loading: the label keeps its width, the plus turns in its place */
.pill--lg{min-height:var(--btn-h-lg);padding-inline:var(--btn-pad-lg);font-size:var(--fs-btn-lg)}
/* text link */
/* an inline message under a control: used for errors on any screen */
.note{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);color:var(--mist)}
/* menu for tablet and phone: the four links move into a sheet under the bar.
   The sheet dims the page beneath it (a wide shadow, cut off above so the bar stays clear). */
.menu{display:none;width:var(--tap);padding:0}
.menu svg{display:block;width:20px;height:20px}
.menu .menu__x{display:none}
.menu[aria-expanded="true"]{border-color:var(--amber);color:var(--amber)}
.menu[aria-expanded="true"] .menu__bars{display:none}
.menu[aria-expanded="true"] .menu__x{display:block}
.sheet{position:absolute;z-index:var(--z-menu);inset-inline:0;top:var(--nav-h);display:flex;flex-direction:column;padding:var(--sp-2) var(--gutter) var(--sp-5);border-bottom:var(--line) solid var(--hair);background:var(--ink-deep);box-shadow:0 0 0 100vmax var(--scrim);clip-path:inset(0 -100vmax -100vmax -100vmax);animation:rise var(--t-base) var(--ease) backwards}
.sheet[hidden]{display:none}
.sheet{max-height:calc(100vh - var(--nav-h));max-height:calc(100svh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
.sheet > a,.sheet summary,.sheet__sub a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:var(--line) solid var(--hair);font-weight:var(--fw-medium);font-size:var(--fs-body);color:var(--mist);transition:color var(--t-base)}
.sheet > a::after,.sheet__sub a::after{content:"\2192";color:var(--amber)}
html[dir="rtl"] .sheet > a::after,html[dir="rtl"] .sheet__sub a::after{content:"\2190"}
.sheet > a:hover,.sheet summary:hover,.sheet__sub a:hover{color:var(--cream)}
.sheet > a:active,.sheet__sub a:active{color:var(--amber)}
/* a group of services: opens in place */
.sheet summary{list-style:none;cursor:pointer}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary::after{content:"+";font-size:22px;line-height:1;color:var(--amber)}
.sheet details[open] > summary{color:var(--cream)}
.sheet details[open] > summary::after{content:"\2212"}
.sheet summary:focus-visible{outline:var(--focus);outline-offset:-2px;border-radius:var(--r-focus)}
.sheet__sub{padding-inline-start:var(--sp-5);background:rgba(var(--cream-rgb),.03)}
.sheet__sub a{min-height:var(--tap);font-size:var(--fs-control);border-bottom-color:transparent}
.sheet__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
/* ---------- first screen ---------- */
/* at least one viewport under the bar. When the words and the three cards fit, the cards stretch and the
   screen is exactly one viewport; in a short window the screen grows a little instead of cutting a card's text. */
.screen{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
/* the amber light: rises from the gilt rule, leans gently toward the pointer */
.screen::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background:radial-gradient(58% 52% at calc(50% + (var(--mx,.5) - .5)*16%) var(--line-y,62%),var(--glow));animation:fade 1.2s ease-out .1s backwards}
.fx{position:absolute;z-index:-1;inset:0;width:100%;height:100%;pointer-events:none}
.hero__text{animation:fade .25s ease-out backwards}
.hero{flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--gap-hero);padding-block:clamp(4px,1.6vh,30px) 0;padding-inline:var(--gutter);text-align:center}
.tag{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-tag);font-weight:var(--fw-medium);line-height:var(--lh-tight);color:var(--cream);text-wrap:balance}
.tag::before,.tag::after{content:"";flex:none;width:clamp(18px,2.2vw,32px);height:var(--rule);border-radius:var(--rule);background:var(--amber)}
.hero h1{max-width:min(100%,13.6em);font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--tr-display);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--amber)}
.w{display:inline-block}
.lede{max-width:var(--measure);font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--mist);text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-cta)}
.hero .cta{justify-content:center}
/* ---------- the three paintings ---------- */
.band{flex:1 1 auto;position:relative;min-height:var(--band-min);margin-top:calc(var(--plus)/2 + clamp(14px,2.6vh,30px));display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.band::before{content:"";position:absolute;z-index:2;inset:0 0 auto 0;height:var(--line);background:var(--rule-gilt);opacity:.7;animation:fade .8s ease-out .3s backwards}
.panel{position:relative;isolation:isolate;overflow:hidden;min-width:0;display:flex;align-items:flex-end;padding:var(--pad-card-y) var(--pad-card-x);background:var(--ink);animation:fade 1.2s ease-out backwards;animation-delay:calc(2.4s + var(--c)*.24s)}
.panel + .panel{border-inline-start:var(--line) solid var(--hair)}
.roller + .panel{padding-inline-start:var(--gutter)}
.panel::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(to right,var(--ink) 30%,rgba(var(--ink-rgb),.5) 52%,rgba(var(--ink-rgb),0) 74%)}
html[dir="rtl"] .panel::before{background:linear-gradient(to left,var(--ink) 30%,rgba(var(--ink-rgb),.5) 52%,rgba(var(--ink-rgb),0) 74%)}
.panel:focus-visible{outline-offset:-4px}
.panel h2{font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-card);line-height:var(--lh-card)}
.panel p{color:var(--mist);font-size:var(--fs-card-text);line-height:1.5;text-wrap:pretty}
.ai{color:var(--amber)}
.chip{display:inline-flex;align-items:center;min-height:22px;padding-inline:10px;border:var(--line) solid rgba(var(--gilt-rgb),.6);border-radius:var(--r-pill);font-size:var(--fs-chip);font-weight:var(--fw-bold);letter-spacing:var(--tr-chip);text-transform:uppercase;line-height:1;color:var(--gilt);white-space:nowrap}
.go{margin-top:2px;font-weight:var(--fw-bold);font-size:var(--fs-link);color:var(--amber)}
.go span{display:inline-block;transition:transform .3s}
.panel:hover .go span{transform:translateX(5px)}
html[dir="rtl"] .panel:hover .go span{transform:translateX(-5px)}
/* a card whose painting is still loading: a slow shimmer where the painting will be */
/* a card whose painting failed: no hole, the text takes the full width over a quiet gilt wash */
/* ---------- the plus badge: rolls along the gilt rule ---------- */
.roller{position:absolute;z-index:3;left:50%;top:0;width:var(--plus);height:var(--plus);margin:calc(var(--plus)/-2) 0 0 calc(var(--plus)/-2);animation:plusIn .8s var(--ease) .2s backwards,roll var(--t-roll) linear 4.2s infinite,rollFade var(--t-roll) linear 4.2s infinite}
.roller svg{display:block;width:100%;height:100%;filter:drop-shadow(var(--shadow-plus))}
.roller__bar{transform-box:fill-box;transform-origin:center;animation:barH .6s var(--ease) .45s backwards}
.roller__bar--v{animation-name:barV;animation-delay:.65s}
/* ---------- client logos ---------- */
.trust{flex:none;display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);padding-block:var(--pad-strip-y);padding-inline:var(--gutter);border-top:var(--line) solid var(--hair);background:var(--ink);animation:fade .6s ease-out .3s backwards}
.logo{flex:none;display:block;width:auto;max-width:none;height:var(--strip-logo-h);opacity:.8;transition:opacity var(--t-base)}
.logo:hover{opacity:1}
/* no client logos to show: the strip is not drawn at all, the cards take its room */
.trust.is-empty{display:none}
/* logos on their way: bars the height of a logo, no label jump */
/* ---------- closing and contact ---------- */
.finale{position:relative;isolation:isolate;background:var(--ink-deep);display:flex;flex-direction:column;align-items:center;gap:var(--gap-closing);padding-block:var(--pad-closing-y);padding-inline:var(--gutter);text-align:center}
.finale::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(56% 70% at 50% 100%,rgba(var(--amber-rgb),.22),rgba(var(--amber-rgb),.07) 46%,rgba(var(--amber-rgb),0) 76%)}
.finale h2{max-width:19em;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-display);text-wrap:balance}
.finale h2 em{font-style:normal;color:var(--amber)}
.contact{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.contact__label{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--dim)}
.contact__value{font-family:var(--display);font-size:var(--fs-contact);color:var(--cream);border-bottom:var(--line) solid rgba(var(--cream-rgb),.35);transition:color var(--t-base),border-color var(--t-base)}
/* the touch target is 44px tall without moving the underline away from the address */
.contact__value{position:relative}
.contact__value::after{content:"";position:absolute;inset-inline:0;top:50%;height:max(100%,var(--tap));transform:translateY(-50%)}
.contact__value:hover{color:var(--amber);border-color:var(--amber)}
.contact__value:active{color:var(--amber-press);border-color:var(--amber-press)}
/* no contact address configured: the label and the address are not drawn */
.contact.is-empty{display:none}
.foot{padding-inline:var(--gutter);border-top:var(--line) solid var(--hair);background:var(--ink-deep);color:var(--dim);font-size:var(--fs-small)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:var(--sp-7) clamp(20px,3vw,48px);padding-block:var(--sp-8) var(--sp-7)}
.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.foot__brand > img{display:block;width:68px;height:38px;margin-bottom:var(--sp-2)}
.foot__mail{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--cream)}
.foot__col{display:flex;flex-direction:column;align-items:flex-start}
.foot h3{margin:0 0 var(--sp-2);font-family:var(--body);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--cream)}
.foot a{display:inline-flex;align-items:center;min-height:var(--tap);transition:color var(--t-base)}
.foot__col a{min-height:36px}
.foot a:hover{color:var(--cream)}
.foot__mail:hover{color:var(--amber)}
.foot a:active{color:var(--amber)}
.foot__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-7);padding-block:var(--sp-3);border-top:var(--line) solid var(--hair)}
.foot__legal{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}
/* a short message at the foot of the window (in this file: names the screen a link leads to) */
.toast{position:fixed;z-index:var(--z-toast);inset-inline:0;bottom:var(--sp-6);display:flex;justify-content:center;pointer-events:none}
.toast span{max-width:calc(100% - 2*var(--gutter));padding:10px var(--sp-5);border:var(--line) solid var(--hair-strong);border-radius:var(--r-pill);background:var(--ink-deep);box-shadow:var(--shadow-sheet);font-size:var(--fs-small);color:var(--cream);animation:rise var(--t-base) var(--ease) backwards}
.toast[hidden]{display:none}
/* ---------- Arabic typography: no capitals, no tracking; Naskh headings, Plex Sans Arabic text ---------- */
html[lang="ar"] .hero h1,html[lang="ar"] .finale h2{letter-spacing:0;font-weight:var(--fw-semi);line-height:var(--lh-h2-ar)}
html[lang="ar"] .hero h1{font-size:var(--fs-hero-ar);line-height:var(--lh-hero-ar)}
html[lang="ar"] .finale h2{font-size:var(--fs-h2-ar)}
html[lang="ar"] .lede{line-height:1.85}
html[lang="ar"] .hero .lede{line-height:var(--lh-body-ar)}
html[lang="ar"] .panel h2,html[lang="ar"] .contact__value{font-weight:var(--fw-semi);line-height:1.5}
html[lang="ar"] .panel h2{font-size:var(--fs-card-ar);line-height:var(--lh-card-ar)}
html[lang="ar"] .chip,html[lang="ar"] .contact__label,html[lang="ar"] .foot h3{letter-spacing:0;text-transform:none;font-size:var(--fs-label-ar)}
html[lang="ar"] .chip{font-size:var(--fs-chip-ar)}
/* ---------- motion ---------- */
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes plusIn{0%{opacity:0;transform:translateY(-5vh) scale(1.5)}100%{opacity:1;transform:none}}
@keyframes barH{from{transform:scaleX(0)}}
@keyframes barV{from{transform:scaleY(0)}}
/* centre: turn in place · roll out to the left · roll back in · turn · roll out to the right · roll back in */
@keyframes roll{
  0%{transform:translateX(0) rotate(0deg);animation-timing-function:linear}
  12%{transform:translateX(0) rotate(-360deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}
  30%{transform:translateX(-47vw) rotate(-1080deg);animation-timing-function:linear}
  34%{transform:translateX(-47vw) rotate(-1080deg);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  50%{transform:translateX(0) rotate(-360deg);animation-timing-function:linear}
  62%{transform:translateX(0) rotate(0deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}
  80%{transform:translateX(47vw) rotate(720deg);animation-timing-function:linear}
  84%{transform:translateX(47vw) rotate(720deg);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  100%{transform:translateX(0) rotate(0deg)}
}
@keyframes rollFade{0%,26%{opacity:1}30%,34%{opacity:0}39%,75%{opacity:1}80%,84%{opacity:0}89%,100%{opacity:1}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
}
/* build 23c: the build-19 opening is back on every refresh (owner 8/10) */
/* ---------- opening: the lockup builds in the centre, flies to its place in the navigation,
   and the plus rolls out of its badge down to the gilt rule.
   Stages are classes on <html>: intro-on (lockup builds; the page waits, paused) ->
   intro-out (the script measures both ends and starts the flight; the page's own entrance runs) ->
   intro-done (the navigation logo takes over). A click or a key skips it. ---------- */
/* the first screen sits above the lockup, so the plus leaves over the letters, not behind them */
/* only while the opening plays: afterwards the bar and its menus must sit above the screen again */
html.intro-on:not(.intro-done) .screen{z-index:var(--z-screen-intro)}
.intro{display:none}
html.intro-on .intro{--iw:min(440px,74vw,52vh);display:block;position:fixed;z-index:var(--z-intro);left:50%;top:39%;width:var(--iw);height:calc(var(--iw)*178/277);margin:calc(var(--iw)*-89/277) 0 0 calc(var(--iw)/-2);pointer-events:none}
html.intro-done .intro{display:none}
.intro svg{display:block;width:100%;height:100%;overflow:visible}
.intro__l{animation:introUp .7s var(--ease) backwards;animation-delay:calc(.1s + var(--i)*.1s)}
.intro__rule{transform-box:fill-box;transform-origin:0 50%;animation:barH .7s var(--ease) .45s backwards}
.intro__badge{transform-box:fill-box;transform-origin:center;animation:pop .55s var(--ease) .55s backwards}
.intro__bar{transform-box:fill-box;transform-origin:center;animation:barH .5s var(--ease) .8s backwards}
.intro__bar--v{animation-name:barV;animation-delay:.95s}
.intro__tag{animation:fade .6s ease-out .9s backwards}
html.intro-on .nav{animation:none}
html.intro-on .nav__links,html.intro-on .nav__actions{animation:fade var(--t-enter) ease-out backwards}
html.intro-on:not(.intro-done) .brand img{opacity:0}
html.intro-on .roller{animation:roll var(--t-roll) linear .9s infinite,rollFade var(--t-roll) linear .9s infinite;animation-play-state:paused}
html.intro-on.intro-roll .roller,html.intro-on.no-intro .roller{animation-play-state:running}
/* v8.8: layers prepared before the flight, so the first frame of the separation costs nothing */
html.intro-on:not(.intro-done) .intro,html.intro-on:not(.intro-done) .intro svg,html.intro-on:not(.intro-roll) .roller,html.intro-on:not(.intro-roll) .roller svg{will-change:transform}
html.intro-on .roller__bar{animation:none}
html.intro-on:not(.intro-out):not(.intro-fly) .roller{opacity:0}
/* until the lockup leaves, everything else holds its starting pose */
html.intro-on:not(.intro-out) .nav__links,html.intro-on:not(.intro-out) .nav__actions,html.intro-on:not(.intro-out) .screen *,html.intro-on:not(.intro-out) .screen::before,html.intro-on:not(.intro-out) .band::before{animation-play-state:paused}
@keyframes introUp{from{opacity:0;transform:translateY(16px)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
/* after the first load, switching language must not replay the opening sequence */
html.no-intro .intro{display:none}
html.no-intro .hero__text,html.no-intro .nav,html.no-intro .brand img,html.no-intro .nav__links,html.no-intro .nav__actions,html.no-intro .tag,html.no-intro .w,html.no-intro .hero .lede,html.no-intro .hero .cta,html.no-intro .screen::before,html.no-intro .band::before,html.no-intro .panel,html.no-intro .panel__text,html.no-intro .roller__bar,html.no-intro .trust{animation:none}
html.no-intro .panel__img{animation:drift var(--t-drift) ease-in-out infinite alternate}
html.no-intro .roller{animation:roll var(--t-roll) linear 1s infinite,rollFade var(--t-roll) linear 1s infinite}
/* if the opening ran, keep the loops on the clock they started with, so nothing jumps */
html.intro-on.no-intro .roller{animation:roll var(--t-roll) linear .9s infinite,rollFade var(--t-roll) linear .9s infinite}
html.intro-on.no-intro .panel__img{animation-delay:calc(5.2s + var(--c)*1.4s)}

/* ---------- breakpoints ---------- */
@media (max-width:859px){.band{grid-template-columns:minmax(0,1fr)}
.panel{min-height:var(--card-min-stacked);padding-inline:var(--gutter)}
.panel + .panel{border-inline-start:0;border-top:var(--line) solid var(--hair)}
}
@media (max-width:940px){.nav__links,.mega{display:none}
.menu{display:inline-flex}
.foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot__brand{grid-column:1 / -1}
}
@media (min-width:941px){.sheet{display:none}
}
/* sign in lives in the bar from 701px up, the primary action from 521px up; below that each moves
   into the sheet: never in both places */
@media (max-width:700px){.nav .nav__actions > .signin{display:none}
}
@media (min-width:701px){.sheet__actions{display:none}
}
@media (max-width:520px){.nav .nav__actions > .pill{display:none}
}
@media (min-width:521px){.sheet .pill{display:none}
}
@media (max-width:420px){.lang{padding-inline:var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.nav,.tag,.w,.lede,.cta,.screen::before,.band::before,.panel,.roller,.roller__bar,.trust,.sheet,.mega,.toast span{animation:none !important}
.pill,.lang,.menu,.go span,.logo{transition:none}
}

/* build 23: the owner's first screen is back (his headline and three doors); these are its rules from build 19 */
.screen::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background:radial-gradient(58% 52% at calc(50% + (var(--mx,.5) - .5)*16%) var(--line-y,62%),var(--glow));animation:fade 2.4s ease-out 1s backwards}
.band::before{content:"";position:absolute;z-index:2;inset:0 0 auto 0;height:var(--line);background:var(--rule-gilt);opacity:.7;animation:fade 1.4s ease-out 2.3s backwards}
.panel__img{position:absolute;z-index:-2;inset-block:0;inset-inline-end:0;aspect-ratio:1;background-position:center;background-size:cover;-webkit-mask-image:linear-gradient(to right,transparent,#000 46%);mask-image:linear-gradient(to right,transparent,#000 46%);transform-origin:100% 50%;transition:filter var(--t-slow);animation:settle 2.6s var(--ease) backwards,drift var(--t-drift) ease-in-out infinite alternate;animation-delay:calc(2.4s + var(--c)*.24s),calc(5.2s + var(--c)*1.4s)}
html[dir="rtl"] .panel__img{-webkit-mask-image:linear-gradient(to left,transparent,#000 46%);mask-image:linear-gradient(to left,transparent,#000 46%);transform-origin:0 50%}
.panel:hover .panel__img,.panel.is-hover .panel__img{filter:brightness(1.18)}
.panel:active .panel__img,.panel.is-press .panel__img{filter:brightness(1.3)}
.panel:focus-visible,.panel.is-focus{outline-offset:-4px}
.panel__text{max-width:56%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(4px,.9vh,8px);animation:rise 1s var(--ease) backwards;animation-delay:calc(2.6s + var(--c)*.24s)}
.panel:hover .go span,.panel.is-hover .go span{transform:translateX(5px)}
html[dir="rtl"] .panel:hover .go span,html[dir="rtl"] .panel.is-hover .go span{transform:translateX(-5px)}
.panel.is-loading .panel__img{background-image:linear-gradient(100deg,rgba(var(--cream-rgb),0) 30%,rgba(var(--cream-rgb),.07) 50%,rgba(var(--cream-rgb),0) 70%) !important;background-size:220% 100%;animation:shimmer 1.6s linear infinite}
.panel.is-noimg .panel__img{display:none}
.panel.is-noimg::before{background:radial-gradient(120% 90% at 100% 100%,rgba(var(--gilt-rgb),.14),rgba(var(--gilt-rgb),0) 60%)}
html[dir="rtl"] .panel.is-noimg::before{background:radial-gradient(120% 90% at 0% 100%,rgba(var(--gilt-rgb),.14),rgba(var(--gilt-rgb),0) 60%)}
.panel.is-noimg .panel__text{max-width:100%}
.roller{position:absolute;z-index:3;left:50%;top:0;width:var(--plus);height:var(--plus);margin:calc(var(--plus)/-2) 0 0 calc(var(--plus)/-2);animation:plusIn 1.9s var(--ease) .15s backwards,roll var(--t-roll) linear 4.2s infinite,rollFade var(--t-roll) linear 4.2s infinite}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes settle{from{transform:scale(1.2)}to{transform:scale(1)}}
@keyframes word{from{opacity:0;transform:translateY(.45em);filter:blur(8px)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes shimmerMask{from{-webkit-mask-position:120% 0;mask-position:120% 0}to{-webkit-mask-position:-120% 0;mask-position:-120% 0}}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes scroll-rtl{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){
  .nav,.tag,.w,.lede,.cta,.screen::before,.band::before,.panel,.panel__img,.panel__text,.roller,.roller__bar,.trust,.marquee__track,.sheet,.mega,.toast span{animation:none !important}
  .pill,.lang,.menu,.panel__img,.go span,.logo{transition:none}
}

/* build 23 (owner 8/10, for showing the look before launch): the «يثق بنا» strip is back as in build 19 */
.trust{flex:none;display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);padding-block:var(--pad-strip-y);padding-inline:var(--gutter);border-top:var(--line) solid var(--hair);background:var(--ink);animation:fade 1.2s ease-out 3.3s backwards}
.trust__label{flex:none;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--dim);white-space:nowrap}
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;width:max-content;animation:scroll var(--t-marquee) linear infinite}
html[dir="rtl"] .marquee__track{animation-name:scroll-rtl}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:var(--gap-logos);padding-inline-end:var(--gap-logos)}
.logo:hover,.logo.is-hover{opacity:1}
.trust.is-loading .marquee__track{animation:none;width:100%}
.trust.is-loading .marquee__group{width:100%}
.trust.is-loading .logo{visibility:hidden}
.trust.is-loading .marquee{position:relative;min-height:var(--strip-logo-h)}
.trust.is-loading .marquee::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right,rgba(var(--cream-rgb),.1) 0 120px,transparent 120px 180px);-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.4) 30%,#000 50%,rgba(0,0,0,.4) 70%);mask-image:linear-gradient(100deg,rgba(0,0,0,.4) 30%,#000 50%,rgba(0,0,0,.4) 70%);-webkit-mask-size:220% 100%;mask-size:220% 100%;animation:shimmerMask 1.6s linear infinite}
html[lang="ar"] .trust__label,html[lang="ar"] .chip,html[lang="ar"] .contact__label,html[lang="ar"] .foot h3{letter-spacing:0;text-transform:none;font-size:var(--fs-label-ar)}
@media (prefers-reduced-motion:reduce){
  .marquee__track{padding-inline-start:56px}
}
/* build 23b: the screen that opened builds 20–22 now opens the financial-modeling chapter below the first screen */
.screen--chapter{min-height:0;border-top:var(--line) solid var(--hair)}
.screen--chapter .hero--home{padding-block:clamp(48px,7vh,88px)}

/* build 23b (owner 8/10: «الكلام يتأخر»): the same entrance as build 19, without the wait. Everything on the first screen is on show within about a second */
.screen::before{animation:fade 1s ease-out .1s backwards}
.band::before{animation:fade .8s ease-out .2s backwards}
.panel{animation:fade .5s ease-out backwards}
.panel__img{animation:settle 1.6s var(--ease) backwards,drift var(--t-drift) ease-in-out infinite alternate;animation-delay:calc(.3s + var(--c)*.08s),calc(2s + var(--c)*1.4s)}
.panel__text{animation:rise .5s var(--ease) backwards;animation-delay:calc(.35s + var(--c)*.08s)}
.roller{animation:plusIn 1.1s var(--ease) .15s backwards,roll var(--t-roll) linear 2s infinite,rollFade var(--t-roll) linear 2s infinite}
.trust{animation:fade .5s ease-out .45s backwards}
@media (prefers-reduced-motion:reduce){
  .screen::before,.band::before,.panel,.panel__img,.panel__text,.roller,.trust{animation:none !important}
}
/* build 23b: the two restored sections (AI FP&A, Academy) are always laid out, so the page never jumps while scrolling past them */
.lp.home-more > section.leaf:not(:first-child){content-visibility:visible;contain-intrinsic-size:none}
/* build 23c: with the opening back, the first screen's words wait for the lockup to leave (they are held at their first frame while it builds),
   then enter as it flies to the navigation — as in build 19, but sooner: the delays are in site.css (.tag .05s · words from .1s · lede .3s · button .4s) */
.tag{animation:rise var(--t-enter) var(--ease) backwards}
.w{animation:word var(--t-enter) var(--ease) backwards}
.hero .lede{animation:rise var(--t-enter) var(--ease) backwards}
.hero .cta{animation:rise var(--t-enter) var(--ease) backwards}
@media (prefers-reduced-motion:reduce){.tag,.w,.hero .lede,.hero .cta{animation:none !important}}