/* ───────── tokens ───────── */
:root{
  --bg:#0F1217;
  --bg-deep:#080A0D;
  --bg-band:#161A21;
  --red:#2E8BFF;
  --red-hot:#5AA6FF;
  --red-dim:#1B4A80;
  --cream:#EDEFF2;
  --cream-dim:rgba(237,239,242,.64);
  --cream-faint:rgba(237,239,242,.14);

  --dis-lat:'Anton',Impact,sans-serif;
  --dis-ara:'Cairo',sans-serif;
  /* IBM Plex Sans and IBM Plex Sans Arabic come from the same type programme,
     so the two languages share proportion and colour instead of being two
     unrelated families bolted together at the toggle. */
  --body-lat:'IBM Plex Sans',system-ui,sans-serif;
  --body-ara:'IBM Plex Sans Arabic',system-ui,sans-serif;

  --gut:clamp(18px,5vw,64px);
  --maxw:1240px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body-ara);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.9;
  /* `clip` not `hidden`: overflow-x:hidden turns the body into a scroll
     container, and position:sticky then resolves against it instead of the
     viewport — which silently kills the pinned work rail on desktop. */
  overflow-x:clip;
}
html[lang=en] body{font-family:var(--body-lat);line-height:1.7}

img,video,canvas,picture{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:999;background:var(--cream);color:#0A0C10;padding:12px 18px}
.skip:focus{inset-inline-start:12px;top:12px}

:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:4px}

/* ───────── display type ───────── */
.h-dis{
  font-family:var(--dis-ara);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}
html[lang=en] .h-dis{font-family:var(--dis-lat);font-weight:400;letter-spacing:.005em;line-height:1}
.h2{font-size:clamp(34px,6.2vw,74px)}
html[lang=ar] .h-dis{line-height:1.22}

.eyebrow{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-hot);margin:0 0 14px;font-weight:600;
}
html[lang=ar] .eyebrow{letter-spacing:.08em}

.lede{font-size:clamp(16px,1.5vw,20px);color:var(--cream-dim);max-width:62ch;margin:18px 0 0}
.lede-c{margin-inline:auto;text-align:center}

/* ───────── buttons ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--cream);color:#0A0C10;
  padding:13px 26px;border:1px solid var(--cream);border-radius:999px;
  font-weight:600;font-size:15px;line-height:1;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn-lg{padding:17px 34px;font-size:16px}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream-faint)}
.btn-ghost:hover{background:rgba(237,239,242,.08);border-color:var(--cream-dim)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ───────── header ───────── */
.hd{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;padding:14px var(--gut);transition:padding .3s ease}
.hd-in{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  padding:10px 14px;border-radius:999px;
  border:1px solid transparent;transition:all .3s ease;
}
.hd.pill .hd-in{
  background:rgba(14,17,22,.82);backdrop-filter:blur(14px);
  border-color:var(--cream-faint);
  box-shadow:0 10px 36px rgba(0,0,0,.4);
}
.brand{display:flex;flex-direction:column;line-height:1.05;margin-inline-end:auto}
.brand-main{font-family:var(--dis-ara);font-weight:900;font-size:20px}
html[lang=en] .brand-main{font-family:var(--dis-lat);font-weight:400;font-size:22px;letter-spacing:.02em}
.brand-sub{font-size:11px;color:var(--cream-dim);letter-spacing:.04em}

.hd-nav{display:flex;gap:26px;font-size:14px;color:var(--cream-dim)}
.hd-nav a{transition:color .2s}
.hd-nav a:hover{color:var(--cream)}
.hd-act{display:flex;align-items:center;gap:10px}
.lang{
  background:transparent;border:1px solid var(--cream-faint);color:var(--cream);
  width:42px;height:38px;border-radius:999px;font-size:13px;font-weight:600;
  transition:border-color .2s,background .2s;
}
.lang:hover{border-color:var(--cream-dim);background:rgba(237,239,242,.07)}

@media (max-width:900px){ .hd-nav{display:none} }

/* ───────── hero ───────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--bg-deep)}
.hero-sun{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* the portrait melts into the dark; it is a presence, not a cut-out sticker */
.hero-ph{position:absolute;z-index:2;margin:0;inset-block:0;inset-inline-end:0;width:min(58%,860px);display:grid;place-items:center;pointer-events:none}
.hero-ph img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
  -webkit-mask-image:radial-gradient(68% 62% at 52% 44%,#000 38%,transparent 86%);
          mask-image:radial-gradient(68% 62% at 52% 44%,#000 38%,transparent 86%);
}
@media (max-width:760px){
  .hero-ph{width:100%;inset-block-start:-6%;opacity:.5}
  .hero-ph img{object-position:center 26%}
}

/* scrim: heavier where the type sits, so the headline always reads */
.hero::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,10,13,.55) 0%,transparent 26%,transparent 62%,var(--bg) 99%);
}
html[dir=rtl] .hero::after{
  background:
    linear-gradient(to left,rgba(8,10,13,.94) 0%,rgba(8,10,13,.55) 42%,transparent 76%),
    linear-gradient(to bottom,rgba(8,10,13,.5) 0%,transparent 26%,transparent 64%,var(--bg) 99%);
}
html[dir=ltr] .hero::after{
  background:
    linear-gradient(to right,rgba(8,10,13,.94) 0%,rgba(8,10,13,.55) 42%,transparent 76%),
    linear-gradient(to bottom,rgba(8,10,13,.5) 0%,transparent 26%,transparent 64%,var(--bg) 99%);
}
@media (max-width:760px){
  html[dir=rtl] .hero::after,html[dir=ltr] .hero::after{
    background:linear-gradient(to bottom,rgba(8,10,13,.7) 0%,rgba(8,10,13,.42) 38%,rgba(8,10,13,.9) 80%,var(--bg) 99%);
  }
}

.hero-in{position:relative;z-index:4;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(96px,13vh,132px) var(--gut) clamp(64px,10vh,96px)}
.kicker{font-size:12px;letter-spacing:.14em;color:var(--red-hot);margin:0 0 18px;font-weight:600}

.h-dis .l1,.h-dis .l2,.h-dis .l3{display:block}
.hero .h-dis{font-size:clamp(38px,7vw,92px)}
.hero .l2{color:var(--cream)}
.hero .l3{font-size:.4em;color:var(--red-hot);margin-top:.3em;text-shadow:0 2px 40px rgba(90,166,255,.45)}
html[lang=ar] .hero .l3{font-size:.36em}
.hero-sub{color:var(--cream-dim);font-size:clamp(15px,1.4vw,18px);margin:24px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
@media (min-width:761px){ .hero .h-dis,.hero-sub,.hero-cta,.kicker{max-width:min(52%,620px)} }
@media (max-height:720px){
  .hero .h-dis{font-size:clamp(32px,5.4vw,56px)}
  .hero-sub{font-size:14.5px;margin-top:16px}
  .hero-cta{margin-top:22px}
  .kicker{margin-bottom:10px}
}

.scrollhint{position:absolute;inset-block-end:26px;inset-inline-start:50%;transform:translateX(-50%);z-index:5;width:1px;height:52px;background:var(--cream-faint);overflow:hidden}
.scrollhint span{display:block;width:100%;height:18px;background:var(--red-hot);animation:drop 2.1s cubic-bezier(.7,0,.3,1) infinite}
@keyframes drop{0%{transform:translateY(-20px)}100%{transform:translateY(54px)}}

/* ───────── pinned words ───────── */
.pin{height:380vh;position:relative;background:var(--bg)}
@media (max-width:760px){ .pin{height:290vh} }
.pin-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding-inline:var(--gut);overflow:hidden}
.pin-words{position:relative;display:grid;place-items:center;width:100%;min-height:1.4em}
.pw{
  grid-area:1/1;font-family:var(--dis-ara);font-weight:900;
  font-size:clamp(34px,8.4vw,86px);line-height:1.2;text-align:center;
  opacity:0;transform:translateY(22px);transition:opacity .35s ease,transform .35s ease;
  color:var(--cream-dim);
}
html[lang=en] .pw{font-family:var(--dis-lat);font-weight:400}
.pw.on{opacity:1;transform:none;color:var(--cream)}
.pw-end.on{color:var(--red-hot)}
.pin-foot{color:var(--cream-dim);font-size:clamp(14px,1.5vw,19px);text-align:center;opacity:0;transition:opacity .4s ease;margin:0}
.pin-foot.on{opacity:1}

/* ───────── bands / sections ───────── */
.sec{padding:clamp(72px,11vw,150px) 0}
.sec,.band,.pin{scroll-margin-top:92px}
.sec-dark{background:var(--bg-deep)}
.band{background:var(--bg-band);padding:clamp(60px,9vw,120px) 0;text-align:center}
.band .lede{margin-inline:auto}

/* ───────── services ───────── */
.srv{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;margin-top:52px;background:var(--cream-faint)}
.srv-c{background:var(--bg);padding:clamp(26px,3.4vw,42px);position:relative;transition:background .3s ease}
.srv-c:hover{background:var(--bg-band)}
.srv-n{font-family:var(--dis-lat);font-size:13px;color:var(--red-hot);letter-spacing:.1em}
.srv-c h3{font-family:var(--dis-ara);font-weight:900;font-size:clamp(21px,2.3vw,28px);margin:10px 0 12px;line-height:1.3}
html[lang=en] .srv-c h3{font-family:var(--dis-lat);font-weight:400}
.srv-c p{color:var(--cream-dim);margin:0;font-size:15px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tags li{font-size:12px;color:var(--cream-dim);border:1px solid var(--cream-faint);padding:5px 11px;border-radius:999px}

/* ───────── work grid ───────── */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;margin-top:52px;grid-auto-flow:dense;
}
.card{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--bg-band);aspect-ratio:4/3;
  border:1px solid var(--cream-faint);
  cursor:pointer;
}
.card.wide{grid-column:span 2;aspect-ratio:16/9}
.card.tall{grid-row:span 2;aspect-ratio:3/4}
@media (max-width:620px){ .card.wide{grid-column:span 1} .card.tall{grid-row:span 1;aspect-ratio:4/3} }

.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .4s ease}
.card video{opacity:0}
.card.playing video{opacity:1}
.card:hover img{transform:scale(1.06)}
.card-ov{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;gap:4px;
  background:linear-gradient(to top,rgba(10,13,17,.88) 0%,rgba(10,13,17,.25) 42%,transparent 70%);
}
.card-b{font-family:var(--dis-ara);font-weight:900;font-size:19px;line-height:1.25}
html[lang=en] .card-b{font-family:var(--dis-lat);font-weight:400;font-size:21px}
.card-t{font-size:12.5px;color:var(--cream-dim)}
.card-k{
  position:absolute;top:14px;left:14px;z-index:3;
  font-size:11px;letter-spacing:.08em;padding:4px 10px;border-radius:999px;
  background:rgba(10,13,17,.7);border:1px solid var(--cream-faint);color:var(--cream-dim);
  backdrop-filter:blur(6px);
}
.card-k.motion{color:#9FD8FF;border-color:rgba(159,216,255,.3)}
.card-k.brand{color:#C9D4FF;border-color:rgba(201,212,255,.3)}
.card-play{
  position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:999px;
  background:rgba(90,166,255,.9);display:grid;place-items:center;font-size:12px;color:#fff;
}

/* ───────── steps ───────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;margin-top:52px;counter-reset:s}
.steps li{border-top:2px solid var(--red-dim);padding-top:20px}
.st-n{font-family:var(--dis-lat);font-size:13px;color:var(--red-hot);letter-spacing:.1em}
.steps h3{font-family:var(--dis-ara);font-weight:900;font-size:clamp(19px,2vw,24px);margin:8px 0 10px}
html[lang=en] .steps h3{font-family:var(--dis-lat);font-weight:400}
.steps p{color:var(--cream-dim);margin:0;font-size:15px}

/* ───────── about ───────── */
.about{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4.2vw,56px);align-items:start}
@media (max-width:900px){ .about{grid-template-columns:1fr} }
.about-t .lede+.lede{margin-top:16px}

.about-ph{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--cream-faint);position:relative}
.about-ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;filter:contrast(1.05)}
.about-ph::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(46,139,255,.34) 0%,transparent 55%);
  mix-blend-mode:screen;
}
@media (max-width:900px){ .about-ph{max-width:340px} }

.vals{
  grid-column:1/-1;margin-top:clamp(10px,2vw,22px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--cream-faint);border:1px solid var(--cream-faint);border-radius:var(--r);overflow:hidden;
}
@media (max-width:860px){ .vals{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .vals{grid-template-columns:1fr} }
.val{background:var(--bg-deep);padding:20px}
.val h4{font-family:var(--dis-ara);font-weight:900;font-size:17px;margin:0 0 6px;color:var(--cream)}
html[lang=en] .val h4{font-family:var(--dis-lat);font-weight:400;font-size:19px}
.val p{margin:0;font-size:13.5px;color:var(--cream-dim);line-height:1.7}

/* ───────── quiz ───────── */
.sec-start{background:linear-gradient(to bottom,var(--bg) 0%,var(--bg-band) 100%);text-align:center}
.q{max-width:860px;margin:46px auto 0;border:1px solid var(--cream-faint);border-radius:var(--r);background:rgba(10,13,17,.4);padding:clamp(22px,3.4vw,40px)}
.q-bar{height:3px;background:var(--cream-faint);border-radius:999px;overflow:hidden;margin-bottom:30px}
.q-fill{display:block;height:100%;width:0;background:var(--red-hot);transition:width .4s cubic-bezier(.4,0,.2,1)}
.q-q{font-family:var(--dis-ara);font-weight:900;font-size:clamp(21px,3vw,32px);margin:0 0 6px;line-height:1.35}
html[lang=en] .q-q{font-family:var(--dis-lat);font-weight:400}
.q-hint{color:var(--cream-dim);font-size:13.5px;margin:0 0 24px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{
  background:transparent;border:1px solid var(--cream-faint);color:var(--cream-dim);
  padding:11px 20px;border-radius:999px;font-size:14.5px;
  transition:all .18s ease;
}
.chip:hover{border-color:var(--cream-dim);color:var(--cream)}
.chip.on{background:var(--cream);border-color:var(--cream);color:#0A0C10;font-weight:600}
.q-nav{display:flex;gap:10px;justify-content:center;margin-top:30px}
.q-nav .btn{min-width:120px}

.q-out{max-width:860px;margin:46px auto 0;text-align:start}
.brief{border:1px solid var(--cream-faint);border-radius:var(--r);background:rgba(10,13,17,.45);padding:clamp(20px,3vw,32px)}
.brief-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--cream-faint)}
.brief-row:last-child{border-bottom:0}
.brief-k{color:var(--cream-dim);font-size:13.5px;min-width:110px}
.brief-v{font-weight:600;font-size:15px}
.q-send{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

/* ───────── form ───────── */
.frm{max-width:660px;margin:44px auto 0;text-align:start}
.frm-t{text-align:center;color:var(--cream-dim);font-size:14px;margin:0 0 20px}
.frm-r{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){ .frm-r{grid-template-columns:1fr} }
.frm label{display:block;margin-bottom:14px}
.frm label span{display:block;font-size:13px;color:var(--cream-dim);margin-bottom:7px}
.frm input,.frm textarea{
  width:100%;background:rgba(10,13,17,.5);border:1px solid var(--cream-faint);
  color:var(--cream);padding:13px 15px;border-radius:10px;font:inherit;font-size:15px;
  transition:border-color .2s;
}
.frm input:focus,.frm textarea:focus{border-color:var(--cream-dim);outline:none}
.frm textarea{resize:vertical;min-height:84px}
.frm>.btn{width:100%;margin-top:4px}
.hp{position:absolute!important;inset-inline-start:-9999px;opacity:0;height:0;width:0}
.frm-msg{text-align:center;font-size:14px;margin:14px 0 0;min-height:1.2em}
.frm-msg.ok{color:#8FE3A4}
.frm-msg.err{color:#FF9A8F}

/* ───────── footer ───────── */
.ft{background:var(--bg-deep);border-top:1px solid var(--cream-faint);padding:52px 0 26px}
.ft-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.ft-brand{font-family:var(--dis-ara);font-weight:900;font-size:24px;margin:0}
html[lang=en] .ft-brand{font-family:var(--dis-lat);font-weight:400;font-size:26px}
.ft-sub{color:var(--cream-dim);font-size:13.5px;margin:4px 0 0}
.ft-links{display:flex;gap:22px;font-size:14px;color:var(--cream-dim)}
.ft-links a:hover{color:var(--cream)}
.ft-c{text-align:center;color:var(--cream-dim);font-size:12.5px;margin:36px 0 0}

/* ───────── modal ───────── */
.modal{position:fixed;inset:0;z-index:100;background:rgba(6,8,11,.93);display:grid;place-items:center;padding:var(--gut);backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.modal-in{width:min(1100px,100%)}
.modal-in video,.modal-in img{width:100%;border-radius:var(--r)}
.modal-x{position:fixed;top:18px;inset-inline-end:18px;width:44px;height:44px;border-radius:999px;background:rgba(237,239,242,.12);border:1px solid var(--cream-faint);font-size:22px;line-height:1}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion:reduce){
  .pw{transition:none}
  .scrollhint span{animation:none}
  .card img{transition:none}
  .btn:hover{transform:none}
}

/* ───────── pillars (how the magic works) ───────── */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;margin-top:48px;background:var(--cream-faint);border:1px solid var(--cream-faint);border-radius:var(--r);overflow:hidden}
.pil{background:var(--bg-deep);padding:clamp(22px,3vw,34px)}
.pil-n{font-family:var(--dis-lat);font-size:13px;color:var(--red-hot);letter-spacing:.1em}
.pil h3{font-family:var(--dis-ara);font-weight:900;font-size:clamp(20px,2.2vw,26px);margin:10px 0 10px}
html[lang=en] .pil h3{font-family:var(--dis-lat);font-weight:400}
.pil p{margin:0;color:var(--cream-dim);font-size:14.5px}

.ft-tag{font-size:13px;color:var(--red-hot);margin:10px 0 0;font-weight:600}

/* ───────── work — horizontal scroll takeover ───────── */
.hwork{position:relative;background:var(--bg-deep)}
.hwork-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px);overflow:hidden}
.hwork-head{flex:0 0 auto}
.hwork-hint{color:var(--cream-dim);font-size:13px;margin:12px 0 0}

/* rail geometry is LTR in both languages so overflow origin never inverts */
.hwork-rail{flex:0 0 auto;width:100%;overflow:hidden;direction:ltr}
/* geometry stays LTR in both languages so the transform maths never inverts;
   RTL only reverses the visual order and the direction of travel. */
.hwork-track{direction:ltr;display:flex;flex-direction:column;width:max-content;gap:14px;padding-inline:var(--gut);will-change:transform}
.hwork-row{display:flex;width:max-content;gap:14px}

.hcard{
  position:relative;flex:0 0 auto;
  width:clamp(210px,26vw,340px);height:clamp(150px,26vh,230px);
  border-radius:var(--r);overflow:hidden;border:1px solid var(--cream-faint);
  background:var(--bg-band);cursor:pointer;
}
.hcard.wide{width:clamp(280px,36vw,460px)}
.hcard img,.hcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .4s ease}
.hcard video{opacity:0}
.hcard.playing video{opacity:1}
.hcard:hover img{transform:scale(1.05)}
.hcard-ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;gap:3px;direction:rtl;
  background:linear-gradient(to top,rgba(6,8,11,.9) 0%,rgba(6,8,11,.25) 45%,transparent 72%)}
html[lang=en] .hcard-ov{direction:ltr}
.hcard-b{font-family:var(--dis-ara);font-weight:900;font-size:20px;line-height:1.25}
html[lang=en] .hcard-b{font-family:var(--dis-lat);font-weight:400;font-size:22px}
.hcard-t{font-size:12.5px;color:var(--cream-dim)}
.hcard-k{position:absolute;top:13px;left:13px;z-index:3;font-size:11px;padding:4px 10px;border-radius:999px;
  background:rgba(6,8,11,.72);border:1px solid var(--cream-faint);color:var(--cream-dim);backdrop-filter:blur(6px);direction:rtl}
.hcard-play{position:absolute;top:13px;right:13px;z-index:3;width:32px;height:32px;border-radius:999px;background:rgba(90,166,255,.9);display:grid;place-items:center;font-size:11px;color:#fff}

.hwork-bar{flex:0 0 auto;height:2px;background:var(--cream-faint);margin-inline:var(--gut);border-radius:999px;overflow:hidden}
.hwork-fill{display:block;height:100%;width:0;background:var(--red-hot)}

/* no sticky takeover on small screens: a normal swipeable rail reads better */
@media (max-width:760px){
  .hwork{height:auto!important}
  .hwork-stick{position:static;height:auto;padding:clamp(72px,11vw,120px) 0;gap:22px}
  .hwork-rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hwork-rail::-webkit-scrollbar{display:none}
  .hwork-track{transform:none!important;flex-direction:row}
  .hwork-row{display:contents}
  .hcard{scroll-snap-align:center;height:clamp(200px,34vh,280px)}
  .hwork-bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hcard img{transition:none}
}

/* ───────── clients (logo marquee) ───────── */
.clients{background:var(--bg);padding:clamp(64px,9vw,120px) 0 clamp(72px,10vw,130px);overflow:hidden}
.cl-head{margin-bottom:clamp(30px,4vw,52px)}

/* geometry pinned to LTR in both languages: the overflow origin never inverts,
   and RTL only reverses the direction of drift (see references/rtl.md) */
.lane{direction:ltr;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
      -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.lane+.lane{margin-top:14px}
.lane-track{direction:ltr;display:flex;width:max-content;gap:clamp(26px,4vw,64px);align-items:center}

.lane-a{animation:drift 46s linear infinite}
.lane-b{animation:drift 58s linear infinite reverse}
html[dir=rtl] .lane-a{animation-direction:reverse}
html[dir=rtl] .lane-b{animation-direction:normal}
.lane:hover .lane-track{animation-play-state:paused}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.cl{flex:0 0 auto;width:clamp(116px,13vw,168px);height:clamp(48px,6vw,66px);display:grid;place-items:center}
.cl img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:.5;transition:opacity .25s ease,transform .25s ease;
}
.cl:hover img{opacity:1;transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .lane-a,.lane-b{animation:none}
  .lane{mask-image:none;-webkit-mask-image:none;overflow-x:auto;scrollbar-width:none}
  .lane::-webkit-scrollbar{display:none}
}
.cl-note{color:var(--cream-dim);font-size:12.5px;margin:14px 0 0;max-width:56ch;opacity:.8}

/* AI-built work gets its own accent — it is the differentiator, so it reads apart */
.hcard-k.ai{color:#FFD7A3;border-color:rgba(255,215,163,.38);background:rgba(20,26,36,.72)}
.hcard-k.print{color:#D9E8FF;border-color:rgba(217,232,255,.3)}
.hcard-k.social{color:#CFF3D8;border-color:rgba(207,243,216,.3)}

/* ───────── hero signature line ───────── */
.hero-sig{
  margin:22px 0 0;font-size:14px;color:var(--cream-dim);
  letter-spacing:.01em;font-style:normal;
}
.hero-sig::before{content:'';display:inline-block;width:22px;height:1px;background:var(--red-hot);vertical-align:middle;margin-inline-end:10px}

/* ───────── proof bar ─────────
   sits directly under the hero: the first thing after the promise is the reason
   to believe it, before the visitor has to scroll for proof. */
.proof{background:var(--bg-deep);border-block:1px solid var(--cream-faint)}
.proof-in{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.6vw,38px);
  padding-block:clamp(26px,3.6vw,44px);
}
@media (max-width:820px){ .proof-in{grid-template-columns:1fr 1fr} }
.pf{display:flex;flex-direction:column;gap:6px}
.pf strong{
  font-family:var(--dis-ara);font-weight:900;
  font-size:clamp(34px,4.6vw,56px);line-height:1;color:var(--cream);
}
html[lang=en] .pf strong{font-family:var(--dis-lat);font-weight:400}
.pf span{font-size:13px;color:var(--cream-dim);line-height:1.55;max-width:22ch}

/* ───────── packages ─────────
   the offer, high on the page and countable: a visitor who cannot tell what he
   receives does not ask for a price. */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;align-items:stretch}
@media (max-width:1000px){ .packs{grid-template-columns:1fr;max-width:560px;margin-inline:auto} }
.pk{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--cream-faint);border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);
  transition:border-color .25s ease,transform .25s ease;
}
.pk:hover{border-color:var(--cream-dim);transform:translateY(-3px)}
.pk-hot{border-color:var(--red);background:linear-gradient(180deg,rgba(46,139,255,.12),transparent 42%)}
.pk-hot:hover{border-color:var(--red-hot)}
.pk-badge{
  position:absolute;inset-block-start:-11px;inset-inline-start:clamp(24px,2.6vw,34px);
  background:var(--red);color:var(--cream);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  padding:5px 13px;border-radius:999px;
}
.pk-for{margin:0;font-size:12px;letter-spacing:.06em;color:var(--red-hot);font-weight:600}
.pk h3{font-family:var(--dis-ara);font-weight:900;font-size:clamp(25px,2.8vw,34px);margin:8px 0 10px;line-height:1.25}
html[lang=en] .pk h3{font-family:var(--dis-lat);font-weight:400}
.pk-d{margin:0 0 20px;color:var(--cream-dim);font-size:14.5px}
.pk-l{display:flex;flex-direction:column;gap:11px;margin:0 0 24px;flex:1 1 auto}
.pk-l li{position:relative;padding-inline-start:22px;font-size:14.5px;line-height:1.65}
.pk-l li::before{
  content:'';position:absolute;inset-inline-start:0;inset-block-start:.62em;
  width:9px;height:9px;border-radius:2px;background:var(--red);
}
.pk-price{
  margin:0 0 18px;padding-block-start:16px;border-block-start:1px solid var(--cream-faint);
  font-size:13.5px;color:var(--cream-dim);
}
.pk-b{width:100%}
.packs-note{margin:28px 0 0;font-size:14px;color:var(--cream-dim)}

/* ───────── objections ─────────
   native <details> so it works with no script and stays keyboard-reachable. */
.faq{margin-top:48px;border-block-start:1px solid var(--cream-faint);max-width:900px}
.fq{border-block-end:1px solid var(--cream-faint)}
.fq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:22px 0;
  font-family:var(--dis-ara);font-weight:900;
  font-size:clamp(17px,1.9vw,23px);line-height:1.4;
  transition:color .2s ease;
}
html[lang=en] .fq summary{font-family:var(--dis-lat);font-weight:400}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{
  content:'+';margin-inline-start:auto;flex:0 0 auto;
  font-family:var(--body-lat);font-weight:400;font-size:26px;line-height:1;
  color:var(--red-hot);transition:transform .25s ease;
}
.fq[open] summary::after{transform:rotate(45deg)}
.fq summary:hover{color:var(--red-hot)}
.fq p{margin:0 0 24px;color:var(--cream-dim);font-size:15.5px;max-width:68ch}

/* ───────── start ───────── */
.start-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
#quizWrap[hidden]{display:none}

/* ───────── hero headline, restructured ─────────
   The service list is scope, not the argument. It reads small and wide above
   the two lines that actually sell: one owner, one settled price. */
.hero .h-dis{font-size:clamp(40px,6vw,76px)}
.hero .l1{
  font-size:clamp(13px,1.15vw,16px);font-weight:600;
  color:var(--cream-dim);letter-spacing:.06em;line-height:1.6;
  margin-block-end:.7em;
}
html[lang=en] .hero .l1{font-family:var(--body-lat);letter-spacing:.1em;text-transform:uppercase}
html[lang=ar] .hero .l1{font-family:var(--body-ara)}
.hero .l2{color:var(--cream)}
.hero .l3{font-size:1em;color:var(--red-hot);margin-block-start:0;text-shadow:0 2px 46px rgba(90,166,255,.4)}
html[lang=ar] .hero .l3{font-size:1em}
@media (min-width:761px){ .hero .h-dis,.hero-sub,.hero-cta,.kicker,.hero-sig{max-width:min(54%,660px)} }
@media (max-height:760px){
  .hero .h-dis{font-size:clamp(34px,4.8vw,54px)}
  .hero-sig{display:none}
}

/* ───────── hero: the reel is the header ─────────
   The work itself is the first argument, so the header plays it. Everything
   above it is a scrim calibrated to keep the headline readable over moving
   footage rather than over a known still. */
.hero-bg{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--bg-deep)}
.hero-bg video{
  width:100%;height:100%;object-fit:cover;
  /* already graded on export; this only holds it back from the type */
  filter:brightness(.62);
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(8,10,13,.78) 0%,rgba(8,10,13,.42) 34%,rgba(8,10,13,.72) 78%,var(--bg) 100%);
}
html[dir=rtl] .hero::after{
  background:
    linear-gradient(to left,rgba(8,10,13,.96) 0%,rgba(8,10,13,.72) 46%,rgba(8,10,13,.34) 100%),
    linear-gradient(to bottom,rgba(8,10,13,.6) 0%,rgba(8,10,13,.22) 34%,rgba(8,10,13,.7) 80%,var(--bg) 100%);
}
html[dir=ltr] .hero::after{
  background:
    linear-gradient(to right,rgba(8,10,13,.96) 0%,rgba(8,10,13,.72) 46%,rgba(8,10,13,.34) 100%),
    linear-gradient(to bottom,rgba(8,10,13,.6) 0%,rgba(8,10,13,.22) 34%,rgba(8,10,13,.7) 80%,var(--bg) 100%);
}
@media (max-width:760px){
  html[dir=rtl] .hero::after,html[dir=ltr] .hero::after{
    background:linear-gradient(to bottom,rgba(8,10,13,.82) 0%,rgba(8,10,13,.5) 36%,rgba(8,10,13,.86) 78%,var(--bg) 100%);
  }
  .hero .h-dis,.hero-sub,.hero-cta,.kicker,.hero-sig{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .hero-bg video{display:none} }

/* the setup line is a quiet premise; the two lines under it are the claim */
.hero .l1{opacity:.86}
.hero .l2{color:var(--cream)}
.hero .l3{color:var(--red-hot)}
.hero-sig{color:var(--cream);font-weight:600}

/* ───────── hero: the rotating ask ─────────
   The slot is inline so the line reads as one sentence, and it is given a
   minimum width so the words after it do not jump on every swap. */
.hero .h-dis .l2{display:inline-block;color:var(--cream)}
.hero .rot{
  display:inline-block;color:var(--red-hot);
  min-width:5.2em;text-align:start;
  margin-inline-start:.28em;
}
.hero .rot::after{content:'؟';color:var(--cream)}
html[lang=en] .hero .rot::after{content:'?'}
.hero .l3{display:block;color:var(--cream)}
.rot-w{display:inline-block}
.rot-w.in{animation:rotin .42s cubic-bezier(.2,.8,.3,1) both}
@keyframes rotin{
  from{opacity:0;transform:translateY(.38em)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .rot-w.in{animation:none} }
@media (max-width:620px){ .hero .rot{min-width:0} }

/* ───────── service cards are buttons now ───────── */
.srv-c{
  display:block;width:100%;text-align:start;
  border:0;border-radius:0;font:inherit;color:inherit;
  background:var(--bg);padding:clamp(26px,3.4vw,42px);
  cursor:pointer;transition:background .3s ease;
}
.srv-c:hover,.srv-c:focus-visible{background:var(--bg-band)}
.srv-go{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;font-size:13.5px;font-weight:600;color:var(--red-hot);
}
.srv-go::after{content:'←';transition:transform .2s ease}
html[lang=en] .srv-go::after{content:'→'}
.srv-c:hover .srv-go::after{transform:translateX(-4px)}
html[lang=en] .srv-c:hover .srv-go::after{transform:translateX(4px)}

/* ───────── the ordering panel ───────── */
.smodal{
  position:fixed;inset:0;z-index:120;
  background:rgba(6,8,11,.86);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
}
@media (min-width:761px){ .smodal{align-items:center;padding:4vh var(--gut)} }
.smodal[hidden]{display:none}
.smodal-sheet{
  position:relative;width:100%;max-width:760px;max-height:92vh;overflow-y:auto;
  background:var(--bg);border:1px solid var(--cream-faint);
  border-radius:var(--r) var(--r) 0 0;
  padding:clamp(26px,4vw,46px);
  animation:sheetup .3s cubic-bezier(.2,.8,.3,1) both;
}
@media (min-width:761px){ .smodal-sheet{border-radius:var(--r)} }
@keyframes sheetup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .smodal-sheet{animation:none} }
.smodal-x{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;
  width:38px;height:38px;border-radius:999px;
  background:transparent;border:1px solid var(--cream-faint);color:var(--cream);
  font-size:22px;line-height:1;
}
.smodal-x:hover{background:rgba(237,239,242,.08)}

.sm-eye{margin:0 0 6px;font-size:12px;letter-spacing:.08em;color:var(--red-hot);font-weight:600}
.sm-h{
  font-family:var(--dis-ara);font-weight:900;
  font-size:clamp(26px,3.4vw,40px);line-height:1.25;margin:0 0 14px;
}
html[lang=en] .sm-h{font-family:var(--dis-lat);font-weight:400}
.sm-p{margin:0 0 26px;color:var(--cream-dim);font-size:15.5px;max-width:62ch}
.sm-sub{
  font-family:var(--dis-ara);font-weight:900;font-size:17px;
  margin:0 0 12px;color:var(--cream);
}
html[lang=en] .sm-sub{font-family:var(--dis-lat);font-weight:400;font-size:19px}

.sm-why{display:flex;flex-direction:column;gap:9px;margin:0 0 30px}
.sm-why li{position:relative;padding-inline-start:20px;font-size:14.5px;color:var(--cream-dim)}
.sm-why li::before{
  content:'';position:absolute;inset-inline-start:0;inset-block-start:.6em;
  width:8px;height:8px;border-radius:2px;background:var(--red);
}

.sm-items{display:flex;flex-direction:column;gap:1px;background:var(--cream-faint);
  border:1px solid var(--cream-faint);border-radius:var(--r);overflow:hidden;margin:0 0 26px}
.sm-item{
  background:var(--bg-deep);padding:16px 18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.sm-item-t{flex:1 1 220px;min-width:0}
.sm-item-t strong{display:block;font-size:15.5px;margin-bottom:3px}
.sm-item-t p{margin:0;font-size:13.5px;color:var(--cream-dim);line-height:1.65}
.sm-item .btn{flex:0 0 auto}

.sm-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sm-form{display:flex;flex-direction:column;gap:16px}
.sm-form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--cream-dim)}
.sm-form input,.sm-form textarea{
  background:var(--bg-deep);border:1px solid var(--cream-faint);border-radius:10px;
  color:var(--cream);padding:13px 15px;font:inherit;font-size:15px;width:100%;
}
.sm-form input:focus,.sm-form textarea:focus{outline:none;border-color:var(--red-hot)}
.sm-form textarea{resize:vertical}

/* the rail glides between scroll samples instead of stepping */
.hwork-track{transition:transform .14s linear}
@media (prefers-reduced-motion:reduce){ .hwork-track{transition:none} }
@media (max-width:760px){ .hwork-track{transition:none} }