/* ═══════════════════════════════════════════════════════════
   BRIEF — Creative House
   Design system · extracted from the Brief business profile
   ink #0B0B0C · brief blue #4260E6 · paper #FFFFFB
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0B0B0C;
  --ink-2:#121214;
  --ink-3:#1A1A1D;
  --line:rgba(255,255,251,.12);
  --line-2:rgba(255,255,251,.06);
  --paper:#FFFFFB;
  --mute:rgba(255,255,251,.52);
  --mute-2:rgba(255,255,251,.34);
  --blue:#4260E6;
  --blue-2:#6B85FF;
  --blue-dim:rgba(66,96,230,.16);

  --logo-ink:var(--paper);
  --logo-accent:var(--blue);

  --pad:clamp(20px,5vw,90px);
  --gap:clamp(18px,2.2vw,34px);
  --sec-y:clamp(90px,13vh,190px);

  --ff-lat:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ff-ar:'IBM Plex Sans Arabic','Almarai',ui-sans-serif,system-ui,sans-serif;
  --ff-ar-d:'Almarai','IBM Plex Sans Arabic',ui-sans-serif,system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.9s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html,body{overscroll-behavior-y:none}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-ar);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.75;
  letter-spacing:normal;            /* house rule: normal character spacing */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html[data-lang="en"] body{font-family:var(--ff-lat);line-height:1.6}

img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--blue);color:var(--paper)}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:4px;border-radius:2px}

/* ─── typography helpers ─────────────────────────────────── */
h1,h2,h3{font-family:var(--ff-ar-d);font-weight:800;line-height:1.06;letter-spacing:normal}
html[data-lang="en"] h1,html[data-lang="en"] h2,html[data-lang="en"] h3{font-family:var(--ff-lat);font-weight:700;line-height:1.02;letter-spacing:-.02em}

.tag{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:clamp(10px,.78vw,12px);font-weight:500;
  color:var(--blue-2);text-transform:uppercase;
  padding-block-end:.7em;margin-block-end:1.4em;
}
html[data-lang="en"] .tag{letter-spacing:.22em}
.tag::before{content:"";width:26px;height:1px;background:var(--blue);opacity:.9}

.eyebrow{
  font-size:clamp(11px,.82vw,13px);color:var(--mute);font-weight:400;
}
html[data-lang="en"] .eyebrow{letter-spacing:.3em;text-transform:uppercase}

.sec{position:relative;padding:var(--sec-y) var(--pad);z-index:2}
.sec__head{max-width:1000px;margin-block-end:clamp(38px,5vw,72px)}
.sec__title{font-size:clamp(28px,4.4vw,64px);max-width:16ch}
html[data-lang="ar"] .sec__title{max-width:20ch;line-height:1.24}

/* ─── background layers ──────────────────────────────────── */
#fluid{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease .2s}
body.ready #fluid{opacity:1}
.grain{
  position:fixed;inset:-120%;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,3%)}40%{transform:translate(4%,-5%)}60%{transform:translate(-3%,-4%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 85% at 50% 0%,transparent 52%,rgba(11,11,12,.42) 100%)}

/* ─── cursor ─────────────────────────────────────────────── */
#cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
body.ready #cursor{opacity:1}
#cursorDot,#cursorRing{position:absolute;border-radius:50%;translate:-50% -50%}
#cursorDot{width:6px;height:6px;background:var(--paper)}
#cursorRing{width:38px;height:38px;border:1px solid rgba(255,255,251,.5);transition:width .4s var(--ease),height .4s var(--ease),background .4s,border-color .4s}
#cursor.hot #cursorRing{width:74px;height:74px;background:rgba(255,255,251,.9);border-color:transparent}
#cursor.hot #cursorDot{opacity:0}
#cursorLabel{position:absolute;translate:-50% -50%;font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--ink);opacity:0;transition:opacity .3s;text-transform:uppercase;white-space:nowrap}
#cursor.hot #cursorLabel{opacity:1}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ─── preloader ──────────────────────────────────────────── */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;
  transition:clip-path 1.15s var(--ease-io),opacity .5s .9s;clip-path:inset(0 0 0 0)}
#loaderCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.loader__inner{position:relative;width:min(560px,80vw);text-align:center}
.loader__mark{width:min(210px,44vw);margin:0 auto 30px;opacity:0;transform:translateY(14px)}
.loader__mark svg{width:100%;height:auto}
body.lead .loader__mark{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.loader__meta{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--mute);margin-block-end:12px}
html[data-lang="en"] .loader__meta{letter-spacing:.2em;text-transform:uppercase}
.loader__num i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--paper)}
.loader__bar{height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--blue)}
body.loaded #loader{clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}
html[dir="rtl"] .loader__meta{direction:rtl}

/* ─── nav ────────────────────────────────────────────────── */
#nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,1.6vw,22px) var(--pad);
  transition:transform .55s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;
  border-block-end:1px solid transparent;
}
#nav.stuck{background:rgba(11,11,12,.72);backdrop-filter:blur(18px) saturate(140%);border-block-end-color:var(--line-2)}
#nav.hide{transform:translateY(-102%)}
.nav__logo{display:flex;align-items:center;gap:.75rem}
.nav__mark{width:clamp(64px,6vw,84px)}
.nav__mark svg{width:100%;height:auto}
.nav__sub{font-size:10px;color:var(--mute);padding-inline-start:.75rem;border-inline-start:1px solid var(--line)}
html[data-lang="en"] .nav__sub{letter-spacing:.18em;text-transform:uppercase}
.nav__links{display:flex;gap:clamp(16px,2vw,32px)}
.nav__links a{position:relative;font-size:13px;color:var(--mute);transition:color .35s}
.nav__links a::after{content:"";position:absolute;inset-block-end:-6px;inset-inline-start:0;width:0;height:1px;background:var(--blue);transition:width .45s var(--ease)}
.nav__links a:hover,.nav__links a.on{color:var(--paper)}
.nav__links a:hover::after,.nav__links a.on::after{width:100%}
.nav__right{display:flex;align-items:center;gap:12px}
.lang{position:relative;font-size:11px;font-weight:600;color:var(--mute);border:1px solid var(--line);
  border-radius:100px;padding:.5em 1em;transition:.35s var(--ease);letter-spacing:.1em}
.lang:hover{color:var(--paper);border-color:var(--blue);background:var(--blue-dim)}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.95em 1.9em;border-radius:100px;overflow:hidden;isolation:isolate;
  background:var(--blue);color:var(--paper);font-size:13px;font-weight:500;
  transition:transform .5s var(--ease),color .4s;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:scaleY(1);transform-origin:top}
.btn--sm{padding:.72em 1.4em;font-size:12px}
.btn>span{position:relative;z-index:1}

#burger{display:none;width:34px;height:34px;position:relative}
#burger i{position:absolute;inset-inline:6px;height:1.5px;background:var(--paper);transition:.45s var(--ease)}
#burger i:first-child{top:13px}#burger i:last-child{top:20px}
body.menu-open #burger i:first-child{top:16.5px;rotate:45deg}
body.menu-open #burger i:last-child{top:16.5px;rotate:-45deg}

#menu{position:fixed;inset:0;z-index:880;background:var(--ink-2);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);display:grid;align-items:center}
body.menu-open #menu{clip-path:inset(0 0 0 0)}
.menu__grid{padding:120px var(--pad) 60px;width:100%}
.menu__links a{display:flex;align-items:baseline;gap:1rem;padding:.28em 0;
  font-family:var(--ff-ar-d);font-weight:800;font-size:clamp(30px,8vw,62px);line-height:1.14;
  opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .7s var(--ease),color .3s}
html[data-lang="en"] .menu__links a{font-family:var(--ff-lat);font-weight:700}
body.menu-open .menu__links a{opacity:1;transform:none}
.menu__links a em{font-family:var(--ff-lat);font-style:normal;font-size:12px;color:var(--blue-2);font-weight:500}
.menu__links a:hover{color:var(--blue-2)}
.menu__foot{margin-block-start:44px;padding-block-start:22px;border-block-start:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.menu__foot a:hover{color:var(--paper)}

.progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:950;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-2))}

/* ─── reveal primitives ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.split{display:inline-block;overflow:hidden;vertical-align:top}
.split .ch{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;
  transition:transform 1s var(--ease),opacity .7s var(--ease)}
.split.in .ch{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}.split .ch{transform:none;opacity:1}
}

/* ═══════════ HERO ═══════════ */
#hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:130px var(--pad) clamp(28px,4vh,54px);isolation:isolate}
/* legibility scrim: keeps the headline crisp whatever the field is doing behind it */
#hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,12,.92) 0%,rgba(11,11,12,.74) 34%,rgba(11,11,12,.18) 66%,transparent 100%)}
.hero__inner{width:100%}
.hero__title{margin-block:clamp(16px,2.4vh,30px) clamp(30px,6vh,64px);
  font-size:clamp(46px,11.2vw,168px);line-height:.94}
html[data-lang="ar"] .hero__title{line-height:1.1;font-size:clamp(40px,10.4vw,152px)}
.hero__title .line{display:block;overflow:hidden}
.hero__title .outline{
  color:transparent;-webkit-text-stroke:1.4px var(--paper);
  background-image:linear-gradient(180deg,var(--blue) 0%,var(--blue-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  background-size:100% 0%;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size 1.5s var(--ease) .5s;
}
.hero__title .outline.in{background-size:100% 100%}
@supports not (-webkit-text-stroke:1px #000){.hero__title .outline{color:var(--blue-2)}}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,5vw,80px);flex-wrap:wrap;
  padding-block-start:clamp(20px,3vh,36px);border-block-start:1px solid var(--line-2)}
.hero__lede{max-width:34ch;font-size:clamp(15px,1.35vw,20px);color:rgba(255,255,251,.72)}
.hero__facts{display:flex;gap:clamp(20px,3.4vw,56px)}
.hero__facts li{display:flex;flex-direction:column;gap:2px}
.hero__facts b{font-family:var(--ff-lat);font-size:clamp(24px,2.8vw,40px);font-weight:500;color:var(--blue-2);line-height:1;font-variant-numeric:tabular-nums}
html[data-lang="ar"] .hero__facts b{font-family:var(--ff-ar-d)}
.hero__facts span{font-size:10.5px;color:var(--mute-2)}
html[data-lang="en"] .hero__facts span{letter-spacing:.16em;text-transform:uppercase}
/* centred, so it never collides with the lede or the stats on either side */
.scrollcue{position:absolute;inset-block-end:clamp(28px,4vh,54px);inset-inline-start:50%;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;color:var(--mute-2)}
html[data-lang="en"] .scrollcue{letter-spacing:.24em;text-transform:uppercase}
.scrollcue i{width:1px;height:54px;background:linear-gradient(var(--blue),transparent);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset-inline:0;height:16px;background:var(--paper);animation:cue 2.1s var(--ease-io) infinite}
@keyframes cue{0%{top:-16px}70%,100%{top:54px}}
@media (max-width:1100px){.scrollcue{display:none}}

/* ═══════════ MANIFESTO ═══════════ */
.manifesto__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4.5vw,80px);align-items:center}
.manifesto__text{font-family:var(--ff-ar-d);font-weight:700;font-size:clamp(22px,3.4vw,50px);line-height:1.34;max-width:19ch}
html[data-lang="en"] .manifesto__text{font-family:var(--ff-lat);font-weight:500;line-height:1.18;max-width:17ch;letter-spacing:-.015em}
.manifesto__text .w{color:rgba(255,255,251,.13);transition:color .5s ease}
.manifesto__text .w.lit{color:var(--paper)}
.manifesto__fig{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3.4}
.manifesto__fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(1.32);transform:scale(1.12);transition:transform 1.4s var(--ease)}
.manifesto__fig:hover img{transform:scale(1.02)}
.manifesto__fig figcaption{position:absolute;inset-block-end:0;inset-inline:0;padding:22px;font-size:11.5px;color:var(--paper);
  background:linear-gradient(transparent,rgba(11,11,12,.85))}
@media (max-width:860px){.manifesto__grid{grid-template-columns:1fr}}

/* ═══════════ WHY ═══════════ */
.why__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.why__card{position:relative;background:var(--ink);padding:clamp(26px,3.2vw,52px);overflow:hidden;isolation:isolate;
  transition:background .6s var(--ease)}
.why__card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);
  transform:translateY(101%);transition:transform .7s var(--ease)}
.why__card:hover::before{transform:translateY(0)}
.why__card em{display:block;font-family:var(--ff-lat);font-style:normal;font-weight:500;
  font-size:clamp(40px,5.2vw,84px);line-height:1;color:var(--blue-2);
  transition:color .55s var(--ease),transform .7s var(--ease)}
.why__card:hover em{color:var(--paper);transform:translateY(-6px)}
.why__card h3{margin-block:clamp(16px,2vw,26px) .7em;font-size:clamp(17px,1.5vw,23px)}
.why__card p{color:var(--mute);max-width:32ch;transition:color .55s}
.why__card:hover p{color:rgba(255,255,251,.86)}
@media (max-width:760px){.why__grid{grid-template-columns:1fr}}

/* ═══════════ VISION / MISSION ═══════════ */
.vm{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:start}
.vm__media{position:sticky;top:clamp(90px,14vh,140px);overflow:hidden;border-radius:3px;aspect-ratio:3/4}
.vm__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.06) contrast(1.02)}
.vm__text{display:flex;flex-direction:column;gap:clamp(46px,8vh,120px);padding-block:clamp(20px,6vh,90px)}
.vm__block p{font-size:clamp(17px,1.85vw,28px);line-height:1.62;color:rgba(255,255,251,.8);max-width:30ch}
html[data-lang="ar"] .vm__block p{line-height:1.85}
@media (max-width:860px){.vm{grid-template-columns:1fr}.vm__media{position:relative;top:0;aspect-ratio:16/10}}

/* ═══════════ SERVICES ═══════════ */
.svc{border-block-start:1px solid var(--line-2)}
.svc__row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,48px);
  padding:clamp(20px,2.6vw,40px) 0;border-block-end:1px solid var(--line-2);cursor:pointer;
  transition:padding-inline .6s var(--ease)}
.svc__row::before{content:"";position:absolute;inset-block:0;inset-inline:calc(var(--pad) * -1);z-index:-1;
  background:linear-gradient(90deg,transparent,var(--blue-dim),transparent);opacity:0;transition:opacity .6s}
.svc__row:hover::before{opacity:1}
.svc__row:hover{padding-inline-start:clamp(10px,1.6vw,26px)}
.svc__n{font-family:var(--ff-lat);font-size:clamp(12px,1.05vw,15px);color:var(--blue-2);font-weight:600;min-width:2.6em;line-height:1}
.svc__t{font-family:var(--ff-ar-d);font-weight:800;font-size:clamp(21px,3.5vw,52px);line-height:1.18;
  transition:color .5s var(--ease),transform .7s var(--ease)}
html[data-lang="en"] .svc__t{font-family:var(--ff-lat);font-weight:600;letter-spacing:-.02em}
.svc__row:hover .svc__t{color:var(--blue-2)}
.svc__d{grid-column:2;grid-row:2;color:var(--mute);font-size:13.5px;max-width:52ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .45s,margin .5s}
.svc__row:hover .svc__d,.svc__row.open .svc__d{max-height:120px;opacity:1;margin-block-start:.7em}
.svc__a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  transition:.55s var(--ease);flex:none}
.svc__a::after{content:"";width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  rotate:45deg;translate:-1px 0}
html[dir="rtl"] .svc__a::after{rotate:-135deg;translate:1px 0}
.svc__row:hover .svc__a{background:var(--blue);border-color:var(--blue);rotate:-45deg}
html[dir="rtl"] .svc__row:hover .svc__a{rotate:45deg}
.svc__thumb{display:none}
.svc__float{position:fixed;top:0;left:0;z-index:60;width:clamp(240px,22vw,330px);aspect-ratio:4/3;
  pointer-events:none;overflow:hidden;border-radius:3px;opacity:0;transform:translate(-50%,-50%) scale(.86);
  transition:opacity .45s var(--ease),transform .6s var(--ease)}
.svc__float.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.svc__float img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .4s}
.svc__float img.on{opacity:1}
@media (max-width:760px){
  .svc__row{grid-template-columns:auto auto 1fr;gap:12px}
  .svc__a{display:none}
  .svc__d{max-height:none;opacity:1;margin-block-start:.6em}
  .svc__thumb{display:block;grid-column:1/-1;margin-block-start:16px;aspect-ratio:16/10;overflow:hidden;border-radius:3px}
  .svc__thumb img{width:100%;height:100%;object-fit:cover}
  .svc__float{display:none}
}

/* ═══════════ PROCESS ═══════════ */
.sec--process{padding:0;position:relative}
.proc__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:110px var(--pad) 60px;overflow:hidden}
.proc__bg{position:absolute;inset:-10%;z-index:-2}
.proc__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.42) contrast(1.15)}
.proc__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(11,11,12,.55),var(--ink) 100%)}
.proc__head{position:absolute;inset-block-start:clamp(84px,12vh,120px);inset-inline-start:var(--pad)}
.proc__stage{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,6vw,100px);align-items:center;
  max-width:1400px;margin-inline:auto;width:100%}
.proc__dial{position:relative;width:clamp(260px,34vw,430px);aspect-ratio:1}
.proc__dial svg{width:100%;height:100%;rotate:-90deg;overflow:visible}

.proc__track{fill:none;stroke:var(--line);stroke-width:1}
.proc__arc{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1055;stroke-dashoffset:1055;transition:stroke-dashoffset .7s var(--ease)}
.proc__nodes{position:absolute;inset:0}
.proc__node{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ink);
  border:1px solid var(--line);translate:-50% -50%;transition:.5s var(--ease)}
.proc__node.on{background:var(--blue);border-color:var(--blue);scale:1.5;box-shadow:0 0 0 6px rgba(66,96,230,.18)}
.proc__node span{position:absolute;inset-inline-start:50%;inset-block-start:-26px;translate:-50% 0;
  font-family:var(--ff-lat);font-size:10px;color:var(--mute-2);transition:color .4s;white-space:nowrap}
.proc__node.on span{color:var(--paper)}
.proc__core{position:absolute;inset:22%;display:grid;place-content:center;text-align:center;gap:6px}
.proc__core em{font-family:var(--ff-lat);font-style:normal;font-size:12px;color:var(--blue-2);font-weight:500}
html[data-lang="ar"] .proc__core em{font-family:var(--ff-ar-d)}
.proc__core h3{font-size:clamp(18px,2.2vw,32px)}
.proc__copy p{font-size:clamp(17px,2.1vw,32px);line-height:1.5;max-width:22ch;color:rgba(255,255,251,.86);min-height:3.2em}
html[data-lang="ar"] .proc__copy p{line-height:1.7}
.proc__steps{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:clamp(20px,3vh,38px)}
.proc__steps button{font-size:11.5px;color:var(--mute-2);border:1px solid var(--line-2);border-radius:100px;
  padding:.55em 1.05em;transition:.4s var(--ease)}
.proc__steps button.on{color:var(--paper);border-color:var(--blue);background:var(--blue-dim)}
.proc__steps button:hover{color:var(--paper);border-color:var(--line)}
.proc__scrub{height:420vh}
@media (max-width:860px){
  .proc__stage{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
  .proc__dial{width:min(62vw,300px)}
  .proc__copy p{max-width:26ch;margin-inline:auto;font-size:16px;min-height:0}
  .proc__steps{justify-content:center}
  .proc__scrub{height:300vh}
}

/* ═══════════ WORK ═══════════ */
.sec__head--work{display:grid;grid-template-columns:1fr .8fr;gap:clamp(24px,4vw,70px);align-items:end;max-width:none}
.work__hero{overflow:hidden;border-radius:3px;aspect-ratio:16/8}
.work__hero img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(1.18)}
.work__filters{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:clamp(22px,3vw,38px);
  padding-block-end:clamp(18px,2.4vw,28px);border-block-end:1px solid var(--line-2)}
.work__filters button{font-size:12px;color:var(--mute);border:1px solid var(--line-2);border-radius:100px;
  padding:.62em 1.15em;transition:.4s var(--ease)}
.work__filters button:hover{color:var(--paper);border-color:var(--line)}
.work__filters button.on{color:var(--paper);background:var(--blue);border-color:var(--blue)}
.work__filters em{font-style:normal;font-family:var(--ff-lat);font-size:9.5px;opacity:.65;padding-inline-start:.5em}
.work__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.work__item{position:relative;grid-column:span 4;overflow:hidden;border-radius:3px;cursor:pointer;
  aspect-ratio:4/3;background:var(--ink-3);
  opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.work__item.in{opacity:1;transform:none}
.work__item.hide{display:none}
.work__item--w{grid-column:span 6;aspect-ratio:16/10}
.work__item--t{aspect-ratio:3/4}
.work__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .7s}
.work__item.plate{background:var(--paper)}
.work__item.plate img{object-fit:contain;padding:8%;mix-blend-mode:multiply}
.work__item:hover img{transform:scale(1.06)}
.work__cap{position:absolute;inset-block-end:0;inset-inline:0;padding:clamp(14px,1.5vw,22px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  background:linear-gradient(transparent,rgba(11,11,12,.9));
  opacity:0;transform:translateY(12px);transition:.55s var(--ease)}
.work__item:hover .work__cap{opacity:1;transform:none}
.work__cap b{font-weight:500;font-size:13px}
.work__cap span{font-size:10px;color:var(--blue-2)}
html[data-lang="en"] .work__cap span{letter-spacing:.14em;text-transform:uppercase}
@media (max-width:1000px){.work__item{grid-column:span 6}.work__item--w{grid-column:span 6}.sec__head--work{grid-template-columns:1fr}}
@media (max-width:600px){.work__item,.work__item--w{grid-column:span 12}}

/* ═══════════ CLIENTS ═══════════ */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding-block:10px}
.marquee__row{display:flex;gap:var(--gap);width:max-content;animation:mq 46s linear infinite}
.marquee--rev .marquee__row{animation-direction:reverse;animation-duration:56s}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.cli{flex:none;width:clamp(140px,13vw,190px);aspect-ratio:16/9;background:rgba(255,255,251,.055);
  border:1px solid var(--line-2);border-radius:3px;display:grid;place-items:center;padding:16px;
  transition:.5s var(--ease)}
.cli img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(2.4) contrast(.55);
  opacity:.55;mix-blend-mode:screen;transition:.5s var(--ease)}
.cli:hover{background:var(--paper);border-color:var(--paper)}
.cli:hover img{filter:none;opacity:1;mix-blend-mode:multiply}

/* ═══════════ TEAM ═══════════ */
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.team__card{position:relative;aspect-ratio:3/4.1;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,#4C6BF0,#3A55D6 55%,#2E44B4);
  display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(20px,2vw,30px);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.team__card:hover{transform:translateY(-8px);box-shadow:0 26px 60px -24px rgba(66,96,230,.55)}
.team__card .blob{position:absolute;inset-block-end:-18%;inset-inline-end:-22%;width:80%;color:rgba(255,255,251,.14);
  transition:transform 1s var(--ease)}
.team__card:hover .blob{transform:translate(-6%,-6%) rotate(-8deg)}
.team__card h3{font-size:clamp(15px,1.3vw,19px);position:relative;z-index:1}
.team__card p{font-size:11.5px;color:rgba(255,255,251,.72);margin-block-start:.35em;position:relative;z-index:1}
html[data-lang="en"] .team__card p{letter-spacing:.16em;text-transform:uppercase}
.team__card--ghost{background:transparent;border:1px solid var(--line-2);
  display:grid;place-items:center;text-align:center;padding:24px}
.team__card--ghost:hover{transform:none;box-shadow:none;border-color:var(--blue)}
.team__card--ghost span{font-size:12px;color:var(--mute-2);max-width:18ch;line-height:1.7}
@media (max-width:900px){.team__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team__grid{grid-template-columns:1fr}}

/* ═══════════ CONTACT / FOOTER ═══════════ */
.sec--contact{padding-block-end:0}
.contact__inner{padding-block-end:clamp(60px,9vh,120px)}
.contact__title{font-size:clamp(38px,9vw,142px);line-height:.98;margin-block-end:clamp(28px,4vh,52px)}
html[data-lang="ar"] .contact__title{line-height:1.14}
.contact__title .line{display:block;overflow:hidden}
.contact__title .outline{color:transparent;-webkit-text-stroke:1.4px var(--paper)}
@supports not (-webkit-text-stroke:1px #000){.contact__title .outline{color:var(--blue-2)}}
.contact__mail{display:inline-block;position:relative;font-family:var(--ff-lat);
  font-size:clamp(18px,2.6vw,40px);font-weight:400;padding-block-end:.12em}
.contact__mail::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:1px;
  background:var(--paper);transform-origin:right;transition:transform .6s var(--ease)}
.contact__mail:hover::after{transform:scaleX(0)}
.contact__meta{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,64px);margin-block-start:clamp(34px,5vh,64px);
  padding-block-start:clamp(22px,3vh,36px);border-block-start:1px solid var(--line-2)}
.contact__meta li{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.contact__meta b{font-size:10px;font-weight:500;color:var(--blue-2)}
html[data-lang="en"] .contact__meta b{letter-spacing:.18em;text-transform:uppercase}
.contact__meta a:hover{color:var(--blue-2)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:clamp(22px,3vh,32px);border-block-start:1px solid var(--line-2)}
.foot__mark{width:70px}
.foot__copy{font-size:11.5px;color:var(--mute-2)}
.foot__social{display:flex;gap:18px;font-size:11.5px;color:var(--mute)}
.foot__social a:hover{color:var(--paper)}
html[data-lang="en"] .foot__social{letter-spacing:.12em;text-transform:uppercase}

/* ═══════════ LIGHTBOX ═══════════ */
#lightbox{position:fixed;inset:0;z-index:9990;background:rgba(6,6,7,.94);backdrop-filter:blur(14px);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
body.lb-open #lightbox{opacity:1;pointer-events:auto}
.lb__stage{max-width:min(1180px,88vw);max-height:82vh;display:flex;flex-direction:column;gap:14px;align-items:center}
.lb__stage img{max-width:100%;max-height:74vh;object-fit:contain;border-radius:3px;
  transform:scale(.96);opacity:0;transition:.6s var(--ease);background:var(--ink-3)}
body.lb-open .lb__stage img{transform:none;opacity:1}
.lb__stage figcaption{font-size:12.5px;color:var(--mute);text-align:center}
.lb__close,.lb__nav{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:.4s var(--ease)}
.lb__close:hover,.lb__nav:hover{background:var(--blue);border-color:var(--blue)}
.lb__close{inset-block-start:26px;inset-inline-end:26px}
.lb__close::before,.lb__close::after{content:"";position:absolute;width:16px;height:1.5px;background:var(--paper)}
.lb__close::before{rotate:45deg}.lb__close::after{rotate:-45deg}
.lb__nav{inset-block-start:50%;translate:0 -50%}
.lb__prev{inset-inline-start:26px}.lb__next{inset-inline-end:26px}
.lb__nav::after{content:"";width:10px;height:10px;border-top:1.5px solid var(--paper);border-right:1.5px solid var(--paper)}
.lb__next::after{rotate:45deg;translate:-2px 0}
.lb__prev::after{rotate:-135deg;translate:2px 0}
html[dir="rtl"] .lb__next::after{rotate:-135deg;translate:2px 0}
html[dir="rtl"] .lb__prev::after{rotate:45deg;translate:-2px 0}
.lb__count{position:absolute;inset-block-end:26px;inset-inline-start:50%;translate:-50% 0;
  font-family:var(--ff-lat);font-size:11.5px;color:var(--mute);letter-spacing:.14em}
@media (max-width:700px){.lb__nav{width:42px;height:42px}.lb__prev{inset-inline-start:10px}.lb__next{inset-inline-end:10px}}

/* ═══════════ RESPONSIVE NAV ═══════════ */
@media (max-width:1080px){
  .nav__links{display:none}
  #burger{display:block}
  .nav__right .btn--sm{display:none}
}
body.menu-open{overflow:hidden}
body.lb-open{overflow:hidden}

/* ═══════════ ARABIC NUMERALS ═══════════
   Arabic-Indic digits (٠١٢٣) aren't in the Latin display face, so numeric
   accents must resolve to the Arabic family or they fall back inconsistently. */
html[data-lang="ar"] .why__card em,
html[data-lang="ar"] .svc__n,
html[data-lang="ar"] .proc__node span,
html[data-lang="ar"] .menu__links a em,
html[data-lang="ar"] .work__filters em,
html[data-lang="ar"] .lb__count{font-family:var(--ff-ar-d);font-weight:700}
html[data-lang="ar"] .why__card em{font-weight:800}
html[data-lang="ar"] .lb__count{letter-spacing:normal}

/* ═══════════════════════════════════════════════════════════
   ICON SYSTEM — one formal line set, alive on hover
   ═══════════════════════════════════════════════════════════ */
.ico{display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;flex:none;color:currentColor;
  transition:color .45s var(--ease),transform .55s var(--ease),filter .45s var(--ease)}
.ico svg{width:100%;height:100%;overflow:visible}
.ico svg *{vector-effect:non-scaling-stroke}

/* stroke draws itself in when the element is revealed */
.ico--draw svg path,.ico--draw svg circle,.ico--draw svg rect{
  stroke-dasharray:180;stroke-dashoffset:180;
  transition:stroke-dashoffset 1.5s var(--ease)}
.in .ico--draw svg path,.in .ico--draw svg circle,.in .ico--draw svg rect{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .ico--draw svg path,.ico--draw svg circle,.ico--draw svg rect{stroke-dashoffset:0}
}

/* ─── why cards ─────────────────────────────────────────── */
.why__card{display:flex;flex-direction:column}
.why__ico{position:absolute;inset-block-start:clamp(24px,3vw,48px);inset-inline-end:clamp(24px,3vw,48px);
  color:var(--blue-2);opacity:.55;transition:.6s var(--ease)}
.why__ico .ico{width:clamp(30px,3vw,42px);height:clamp(30px,3vw,42px)}
.why__card:hover .why__ico{opacity:1;color:var(--paper);transform:rotate(-6deg) scale(1.08);
  filter:drop-shadow(0 0 14px rgba(255,255,251,.45))}

/* ─── service rows ──────────────────────────────────────── */
.svc__row{grid-template-columns:auto auto 1fr auto}
.svc__ico{display:inline-flex;color:var(--blue-2);opacity:.42;
  transition:opacity .5s var(--ease),transform .6s var(--ease),color .5s var(--ease)}
.svc__ico .ico{width:clamp(24px,2.2vw,32px);height:clamp(24px,2.2vw,32px)}
.svc__row:hover .svc__ico{opacity:1;color:var(--paper);transform:translateY(-3px) rotate(-8deg);
  filter:drop-shadow(0 0 16px rgba(107,133,255,.7))}
.svc__d{grid-column:2/4}

/* ─── process: the glowing step icon ────────────────────── */
.proc__core{gap:2px}
.proc__ico{display:block;color:var(--blue-2);margin-inline:auto;margin-block-end:6px}
.proc__ico .ico{width:clamp(30px,3.2vw,44px);height:clamp(30px,3.2vw,44px)}
.proc__ico.burst{animation:burst 1.05s var(--ease) both}
@keyframes burst{
  0%{opacity:0;transform:scale(.6) rotate(-14deg);filter:drop-shadow(0 0 0 rgba(107,133,255,0)) blur(3px)}
  38%{opacity:1;transform:scale(1.16) rotate(3deg);
      filter:drop-shadow(0 0 26px rgba(122,150,255,1)) drop-shadow(0 0 54px rgba(66,96,230,.85)) blur(0)}
  100%{opacity:1;transform:none;filter:drop-shadow(0 0 12px rgba(107,133,255,.55))}
}
.proc__ico::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;
  width:clamp(70px,9vw,120px);aspect-ratio:1;translate:-50% -22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(107,133,255,.42),transparent 66%);opacity:0}
.proc__ico.burst::after{animation:halo 1.05s var(--ease) both}
@keyframes halo{0%{opacity:0;scale:.4}34%{opacity:1;scale:1}100%{opacity:0;scale:1.5}}
.proc__core{position:absolute;overflow:visible}
.proc__node.on{animation:nodePulse 2.6s var(--ease-io) infinite}
@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 5px rgba(66,96,230,.16),0 0 12px 1px rgba(107,133,255,.55)}
  50%{box-shadow:0 0 0 9px rgba(66,96,230,.05),0 0 22px 3px rgba(107,133,255,.9)}
}
@media (prefers-reduced-motion:reduce){.proc__node.on,.proc__ico.burst,.proc__ico.burst::after{animation:none}}

/* ═══════════════════════════════════════════════════════════
   SMALL LABELS — no enclosing boxes.
   A glowing mark, the word, and a rule that draws itself in.
   ═══════════════════════════════════════════════════════════ */
.tag{gap:.75em;padding-block-end:0}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;
  box-shadow:0 0 0 3px rgba(66,96,230,.16),0 0 14px 2px rgba(107,133,255,.85);
  animation:tagPulse 3.4s var(--ease-io) infinite}
.tag::after{content:"";width:clamp(26px,3.6vw,52px);height:1px;flex:none;
  background:linear-gradient(90deg,var(--blue),transparent)}
html[dir="rtl"] .tag::after{background:linear-gradient(270deg,var(--blue),transparent)}
@keyframes tagPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(66,96,230,.16),0 0 12px 1px rgba(107,133,255,.7)}
  50%{box-shadow:0 0 0 6px rgba(66,96,230,.05),0 0 20px 3px rgba(107,133,255,1)}
}
@media (prefers-reduced-motion:reduce){.tag::before{animation:none}}

.work__filters,.proc__steps{gap:clamp(14px,2.1vw,32px)}
.work__filters button,.proc__steps button{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  border:0;border-radius:0;background:none;
  padding:.35em 0 .78em;font-size:13px;color:var(--mute);
  transition:color .4s var(--ease)}
.work__filters button::before,.proc__steps button::before{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:1px;background:var(--line-2)}
.work__filters button::after,.proc__steps button::after{
  content:"";position:absolute;inset-inline-start:0;inset-block-end:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-2));
  box-shadow:0 0 10px rgba(107,133,255,.9);transition:width .55s var(--ease)}
.work__filters button:hover,.proc__steps button:hover{color:var(--paper)}
.work__filters button:hover::after,.proc__steps button:hover::after{width:100%}
.work__filters button.on,.proc__steps button.on{color:var(--paper);background:none}
.work__filters button.on::after,.proc__steps button.on::after{width:100%}
.proc__steps button .ico{width:1.15em;height:1.15em;opacity:.5;transition:.45s var(--ease)}
.proc__steps button:hover .ico{opacity:1;transform:translateY(-2px)}
.proc__steps button.on .ico{opacity:1;color:var(--blue-2);filter:drop-shadow(0 0 9px rgba(107,133,255,.85))}
.work__filters em{opacity:.5;font-size:10px;padding-inline-start:.35em;transition:opacity .4s}
.work__filters button.on em,.work__filters button:hover em{opacity:.9}

/* ─── contact + footer icons ────────────────────────────── */
.contact__meta b{display:inline-flex;align-items:center;gap:.5em}
.contact__meta .ico{width:1.25em;height:1.25em;color:var(--blue-2);transition:.45s var(--ease)}
.contact__meta li:hover .ico{color:var(--paper);transform:translateY(-2px);
  filter:drop-shadow(0 0 10px rgba(107,133,255,.75))}
.contact__mail{display:inline-flex;align-items:center;gap:.5em}
.ico--cta{width:.72em;height:.72em;transition:.5s var(--ease)}
html[dir="rtl"] .ico--cta{scale:-1 1}
.contact__mail:hover .ico--cta{transform:translate(3px,-3px)}
html[dir="rtl"] .contact__mail:hover .ico--cta{transform:translate(-3px,-3px)}
.foot__social a{display:inline-flex;align-items:center;gap:.5em;transition:.4s var(--ease)}
.foot__social .ico{width:1.25em;height:1.25em;transition:.45s var(--ease)}
.foot__social a:hover .ico{color:var(--blue-2);transform:translateY(-2px) scale(1.08);
  filter:drop-shadow(0 0 10px rgba(107,133,255,.8))}

/* ─── client plates ─────────────────────────────────────── */
.cli{background:rgba(255,255,251,.92);border-color:transparent;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .45s}
.cli img{filter:grayscale(1);opacity:.5;mix-blend-mode:multiply;transition:.5s var(--ease)}
.cli:hover{background:var(--paper);transform:translateY(-5px);
  box-shadow:0 18px 40px -18px rgba(66,96,230,.7)}
.cli:hover img{filter:none;opacity:1}

/* ─── hero fact icons ───────────────────────────────────── */
.hero__facts li{position:relative;padding-block-start:1.9em}
.hero__facts li .ico{position:absolute;inset-block-start:0;inset-inline-start:0;
  width:1.25em;height:1.25em;color:var(--blue-2);opacity:.65;transition:.5s var(--ease)}
.hero__facts li:hover .ico{opacity:1;color:var(--paper);transform:translateY(-2px);
  filter:drop-shadow(0 0 12px rgba(107,133,255,.9))}

/* ─── manifesto quote mark ──────────────────────────────── */
.manifesto__quote{position:absolute;inset-block-start:-.35em;inset-inline-start:0;
  color:var(--blue);opacity:.28;pointer-events:none}
.manifesto__quote .ico{width:clamp(38px,4.6vw,64px);height:clamp(38px,4.6vw,64px)}
.manifesto__grid{position:relative}

/* ─── work: view affordance ─────────────────────────────── */
.work__view{position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,11,12,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,251,.16);
  opacity:0;transform:scale(.7) rotate(-25deg);transition:.55s var(--ease)}
.work__view .ico{width:16px;height:16px}
.work__item:hover .work__view{opacity:1;transform:none;background:var(--blue);border-color:var(--blue)}
.work__item.plate .work__view{background:rgba(11,11,12,.75)}

/* ─── team icons ────────────────────────────────────────── */
.team__card{justify-content:space-between}
.team__ico{position:relative;z-index:1;color:rgba(255,255,251,.85);margin-block-end:auto;
  transition:.6s var(--ease)}
.team__ico .ico{width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px)}
.team__card:hover .team__ico{transform:translateY(-4px) scale(1.08);color:var(--paper);
  filter:drop-shadow(0 0 16px rgba(255,255,251,.6))}
.team__card h3,.team__card p{position:relative;z-index:1}

/* ─── nav / menu arrows ─────────────────────────────────── */
.btn .ico--cta{width:.9em;height:.9em;margin-inline-start:.5em;position:relative;z-index:1;
  transition:.5s var(--ease)}
.btn{gap:0}
.btn:hover .ico--cta{transform:translate(3px,-3px)}
html[dir="rtl"] .btn:hover .ico--cta{transform:translate(-3px,-3px)}
.menu__links a{justify-content:flex-start}
.menu__links a .ico--cta{width:.42em;height:.42em;opacity:0;margin-inline-start:.3em;
  transition:opacity .45s var(--ease),transform .55s var(--ease)}
.menu__links a:hover .ico--cta{opacity:1;transform:translate(6px,-6px)}
html[dir="rtl"] .menu__links a:hover .ico--cta{transform:translate(-6px,-6px)}