:root{
  --paper:#FBFAF8; --ink:#1B1A18; --ink2:#4A4741; --muted:#6A665F; --line:#E6E1D8;
  --gold:#B08C5A; --gold-deep:#7A5D33; --gold-light:#D9B482; --night:#1B1A18;
  --head:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --pad:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.7,0,.2,1);
  --cut:26px;
  --pw:clamp(30px,9vw,46px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.loading,html.loading body{overflow:hidden}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:clamp(15px,1.05vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{padding-inline:var(--pad);max-width:1700px;margin-inline:auto}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:-.03em}

/* ═══ OPENING (smooth: only transform / opacity / clip-path are animated, nothing re-layouts) ═══ */
.pre{position:fixed;inset:0;z-index:100;background:#232323;color:#fff;overflow:hidden;transition:opacity .6s ease}
.pre.is-out{opacity:0;pointer-events:none}
.pre__letters{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;font-family:var(--head);font-size:var(--pw);line-height:1.12;letter-spacing:-.01em;transition:opacity .5s ease}
.pre__letters span{opacity:0;filter:blur(10px);transform:translateY(8px);animation:preLetter .6s var(--ease) forwards;animation-delay:calc(.25s + var(--i,0)*.2s)}
.pre.words .pre__letters{opacity:0}
@keyframes preLetter{to{opacity:1;filter:none;transform:none}}
.pre__col{position:absolute;inset:0}
.pre__w{position:absolute;left:0;display:flex;flex-direction:column;font-family:var(--head);font-size:var(--pw);line-height:1.12;letter-spacing:-.01em;will-change:transform,opacity;
  transition:transform 1s var(--io),opacity .6s ease}
.pre__w span{display:block;opacity:0;transform:translate3d(0,16px,0);transition:opacity .8s ease,transform 1s var(--ease)}
.pre.words .pre__w span{opacity:1;transform:none}
.pre__w--top{bottom:50%;transform:translate3d(31vw,0,0)}
.pre__w--bot{top:50%;transform:translate3d(31vw,0,0)}
.pre__w--top span:nth-child(1){transition-delay:.05s}.pre__w--top span:nth-child(2){transition-delay:.17s}
.pre__w--bot span:nth-child(1){transition-delay:.29s}.pre__w--bot span:nth-child(2){transition-delay:.41s}
.pre.split .pre__w--top{transform:translate3d(8vw,-16vh,0)}
.pre.split .pre__w--bot{transform:translate3d(50vw,16vh,0)}
.pre.grow .pre__w--top{transform:translate3d(8vw,-34vh,0);opacity:0;transition:transform 1.1s var(--io),opacity .5s ease}
.pre.grow .pre__w--bot{transform:translate3d(50vw,34vh,0);opacity:0;transition:transform 1.1s var(--io),opacity .5s ease}
/* the footage window = a full-screen video revealed through a moving mask */
.pre__win{position:absolute;inset:0;margin:0;will-change:clip-path;
  clip-path:polygon(14vw 50%,86vw 50%,86vw 50%,calc(86vw - var(--cut)) 50%,14vw 50%);
  transition:clip-path 1s var(--io)}
.pre__win video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(0)}
.pre.split .pre__win{clip-path:polygon(14vw calc(50% - 13.5vh),86vw calc(50% - 13.5vh),86vw calc(50% + 13.5vh - var(--cut)),calc(86vw - var(--cut)) calc(50% + 13.5vh),14vw calc(50% + 13.5vh))}
.pre.grow .pre__win{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);transition-duration:1.1s}

/* hero UI waits for the opening */
html.loading .hdr,html.loading .hero__meta,html.loading .hero__scroll{opacity:0;transform:translateY(10px)}
.hdr,.hero__meta,.hero__scroll{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero__meta{transition-delay:.15s}
.hero__scroll{transition-delay:.9s}

/* ═══ header / menu ═══ */
.hdr{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad) 0;pointer-events:none;color:#fff}
.hdr>*{pointer-events:auto}
.logo{font-family:var(--head);font-size:clamp(18px,1.6vw,24px);font-weight:400;letter-spacing:-.01em;transition:opacity .4s}
.logo i{font-style:normal;opacity:.7;margin:0 .12em}
.menubtn{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 14px;border-radius:9px;background:rgba(40,38,36,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.1)}
.menubtn__i{display:grid;gap:5px;width:22px}
.menubtn__i i{display:block;height:1.4px;background:#fff;transition:transform .4s var(--ease)}
.menubtn[aria-expanded="true"] .menubtn__i i:first-child{transform:translateY(3.2px) rotate(45deg)}
.menubtn[aria-expanded="true"] .menubtn__i i:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.hdr.light .logo{opacity:0;pointer-events:none}
.menu{position:fixed;inset:0;z-index:55;background:var(--night);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 40px;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.menu__nav{display:grid;gap:2px}
.menu__nav a{display:flex;align-items:baseline;gap:20px;font-family:var(--head);letter-spacing:-.03em;font-size:clamp(38px,7.5vw,96px);line-height:1.1;opacity:.92;transition:opacity .3s,transform .5s var(--ease),color .3s}
.menu__nav a i{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--gold-light);width:28px}
.menu__nav a:hover{opacity:1;transform:translateX(10px);color:var(--gold-light)}
.menu__foot{margin-top:auto;padding-top:40px;display:flex;gap:28px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.7)}

/* ═══ hero + panels (shared) ═══ */
.stage{position:relative;background:#111}
.hero{position:relative;color:#fff;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#222}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.06) 38%,rgba(0,0,0,.52) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0)}
.hero__txt{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,5vh,56px);z-index:2}
.hero__meta{display:flex;justify-content:space-between;gap:20px;font-size:clamp(11.5px,1vw,14px);margin-bottom:clamp(16px,3vh,30px)}
.hero__h1{font-size:clamp(40px,11.3vw,64px);line-height:1.02;letter-spacing:-.035em;max-width:11em}
.hero__scroll{display:inline-block;margin-top:clamp(20px,3.4vh,34px);font-size:12.5px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.7)}
.hs-d{display:none}

.panel{position:relative;display:grid;grid-template-columns:72% 28%;width:100%;min-height:67vw;background:var(--bg);color:var(--fg)}
.panel__body{grid-column:1;grid-row:1;position:relative;padding:22px 18px 56px;min-height:67vw}
.panel__img{grid-column:2;grid-row:1;overflow:hidden;position:relative}
.panel__img img{width:100%;height:100%;object-fit:cover}
.panel__h{font-size:clamp(34px,11.4vw,50px);line-height:1.04;letter-spacing:-.035em}
.panel__links{margin-top:20px;display:grid;font-size:14.5px}
.panel__links li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid color-mix(in srgb,currentColor 50%,transparent)}
.panel__links li::after{content:">";opacity:.8;margin-right:6px}
.panel__plus{display:none}
.panel__tag{position:absolute;left:18px;bottom:44px;font-size:13px;line-height:1.35;max-width:8.2em}
.panel__thumb{position:absolute;right:14px;bottom:14px;width:25vw;height:17vw;background:var(--img) center/cover;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.panel__no{position:absolute;left:18px;bottom:18px;font-size:12px;letter-spacing:.04em}
.panel__links ~ .panel__tag,.panel__links ~ .panel__thumb{display:none}

/* ═══ desktop: pinned hero, panels slide in sideways ═══ */
@media (min-width:900px){
  .stage{height:300vh}
  .stage__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
  .hero{position:absolute;inset:0}
  .hero__txt{bottom:clamp(28px,6vh,64px)}
  .hero__meta{justify-content:flex-start;gap:clamp(24px,8vw,160px)}
  .hero__h1{font-size:clamp(46px,6.4vw,118px);max-width:12em}
  .hero__scroll{margin-top:clamp(20px,3vh,34px)}
  .hs-d{display:inline}.hs-m{display:none}
  .rail{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform;transform:translate3d(83vw,0,0);z-index:3}
  .rail::after{content:"";flex:0 0 100vw;background:#fff}
  .panel{flex:0 0 auto;width:max(33vw,380px);height:100%;min-height:0;display:flex;flex-direction:column}
  .panel__img{order:-1;flex:0 0 53%;grid-column:auto}
  .panel__img img{transition:transform 1.2s var(--ease)}
  .panel:hover .panel__img img{transform:scale(1.04)}
  .panel__body{flex:1;min-height:0;padding:clamp(22px,2.2vw,34px)}
  .panel__links{margin-top:0;grid-template-columns:1fr 1fr;gap:14px 22px;width:min(66%,360px);font-size:clamp(13px,.95vw,15px)}
  .panel__links li{padding:0 0 9px}
  .panel__plus{display:block;position:absolute;top:clamp(22px,2.2vw,34px);right:clamp(22px,2.2vw,34px);width:44px;height:44px;border:1px solid currentColor;border-radius:50%;transition:transform .5s var(--ease)}
  .panel__plus::before,.panel__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.4px;background:currentColor;transform:translate(-50%,-50%)}
  .panel__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
  .panel:hover .panel__plus{transform:rotate(90deg)}
  .panel__h{position:absolute;left:clamp(22px,2.2vw,34px);bottom:clamp(44px,6.4vh,64px);font-size:clamp(30px,min(4.4vw,7.6vh),76px);max-width:70%;
    filter:blur(12px);opacity:.35;transition:filter 1s var(--ease),opacity 1s var(--ease)}
  .panel.on .panel__h{filter:none;opacity:1}
  .panel__tag{display:block!important;left:auto;right:clamp(22px,2.2vw,34px);bottom:clamp(44px,6.4vh,64px);text-align:right;max-width:9em}
  .panel__thumb{display:none!important}
  .panel__no{left:clamp(22px,2.2vw,34px);bottom:clamp(18px,2.6vh,28px)}
}

/* ═══ reveals ═══ */
.fade{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.fade.in{opacity:1;transform:none}
html:not(.js) .fade{opacity:1;transform:none}
.reveal-words .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.16em);transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i)*45ms)}
.reveal-words.in .w{opacity:1;filter:none;transform:none}
html:not(.js) .reveal-words .w{opacity:1;filter:none;transform:none}

/* ═══ intro / work / process / contact ═══ */
.intro{background:#fff;padding:clamp(70px,12vw,200px) 0 clamp(50px,8vw,120px)}
.intro__h{font-size:clamp(36px,6vw,104px);line-height:1.02;max-width:12em}
.intro__grid{display:grid;grid-template-columns:minmax(110px,1fr) 3fr;gap:clamp(24px,5vw,80px);margin-top:clamp(40px,7vw,110px)}
.intro__list{font-size:12.5px;line-height:1.5;color:var(--ink2)}
.intro__p{max-width:44em;font-size:clamp(14px,1.05vw,17px);color:var(--ink2)}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:14px}
.more i{display:grid;place-items:center;width:28px;height:28px;background:#e4e0d9;border-radius:50%;transition:transform .4s var(--ease),background .3s}
.more i svg{width:13px;height:13px}
.more:hover i{transform:translateX(6px);background:var(--gold-light)}
.work{background:#fff;padding:clamp(30px,5vw,80px) 0 clamp(80px,12vw,200px)}
.work__h{font-size:clamp(28px,3.6vw,60px);line-height:1.05}
.work .more{margin:20px 0 clamp(30px,5vw,70px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(36px,6vw,96px) clamp(16px,2vw,32px);align-items:start}
.card{display:block;text-align:left;width:100%;opacity:0;--py:0px;--tilt:0deg;translate:0 var(--py);transform:perspective(1100px) rotateX(var(--tilt));transform-origin:50% 100%;will-change:transform,translate;transition:opacity 1.1s var(--ease)}
.card.in{opacity:1}
html:not(.js) .card{opacity:1;transform:none}
.card__img{display:block;overflow:hidden;background:#eee;aspect-ratio:3/2;clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%)}
.card__img img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.18)}

.card__t{display:block;margin-top:14px;font-size:clamp(15px,1.1vw,18px)}
.card__p{display:block;font-size:13px;color:var(--muted)}
.c1{grid-column:1/8}.c2{grid-column:9/13;margin-top:clamp(40px,10vw,160px)}
.c3{grid-column:1/6}.c4{grid-column:6/10;margin-top:clamp(30px,7vw,120px)}
.c5{grid-column:6/13;grid-row:3}.c6{grid-column:1/5;grid-row:3;margin-top:clamp(40px,9vw,140px)}
.c2 .card__img,.c6 .card__img{aspect-ratio:4/5}.c3 .card__img{aspect-ratio:4/3}

.proc{background:var(--night);color:#fff;padding:clamp(70px,10vw,160px) 0}
.proc__h{font-size:clamp(32px,5vw,88px);line-height:1;margin-bottom:clamp(36px,6vw,90px)}
.proc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.proc article{border-top:1px solid rgba(255,255,255,.25);padding-top:20px}
.proc article i{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--gold-light)}
.proc article h3{font-size:clamp(28px,3vw,48px);margin:12px 0 10px}
.proc article p{color:rgba(255,255,255,.72);max-width:24em;font-size:15px}
.proc article:nth-child(2){transition-delay:.1s}.proc article:nth-child(3){transition-delay:.2s}.proc article:nth-child(4){transition-delay:.3s}

.contact{background:#f4f1ec;padding-top:clamp(70px,10vw,160px)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);padding-bottom:clamp(60px,9vw,130px)}
.contact__h{font-size:clamp(34px,5vw,86px);line-height:1}
.contact__p{margin-top:22px;color:var(--ink2);max-width:28em}
.contact__list{margin-top:34px;display:grid}
.contact__list li{display:flex;gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.contact__list span{width:90px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.contact__list a,.contact__list b{font-weight:400;font-size:clamp(16px,1.3vw,20px)}
.contact__list a:hover{color:var(--gold-deep)}
.form{background:#fff;padding:clamp(22px,3vw,46px);display:grid;gap:22px;align-content:start}
.form label{display:grid;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0 10px;border-radius:0;width:100%;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--gold)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form label.bad input{border-bottom-color:#b3402f}
.form__foot{display:flex;justify-content:space-between;align-items:center;gap:20px}
.form__foot small{font-size:12px;color:var(--muted);max-width:16em}
.form button[type=submit]{display:inline-flex;align-items:center;gap:12px;background:var(--gold-deep);color:#fff;padding:15px 26px;border-radius:999px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:background .3s,transform .4s var(--ease)}
.form button[type=submit] svg{width:16px;height:16px}
.form button[type=submit]:hover{background:var(--ink);transform:translateX(3px)}
.form__status{font-size:14px;min-height:1.4em}
.form__status.err{color:#b3402f}.form__status.ok{color:var(--gold-deep)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:26px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot__brand{font-family:var(--head);letter-spacing:-.02em;font-size:1.1rem;color:var(--ink)}
.foot a:hover{color:var(--ink)}

.wafloat{position:fixed;z-index:50;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;align-items:center;gap:10px;background:#157a3d;color:#fff;padding:14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 14px 34px -10px rgba(0,0,0,.45);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .5s,transform .5s var(--ease)}
.wafloat.show{opacity:1;pointer-events:auto;transform:none}
.wafloat svg{width:22px;height:22px}.wafloat span{display:none}
@media (min-width:900px){.wafloat{padding:14px 20px;right:20px;bottom:20px}.wafloat span{display:inline}.wafloat svg{width:20px;height:20px}}

.lb{position:fixed;inset:0;z-index:90;background:rgba(14,13,12,.96);display:grid;place-items:center;padding:60px 70px}
.lb[hidden]{display:none}
.lb__f{margin:0;max-width:min(1400px,100%);max-height:100%;display:grid;gap:12px;justify-items:center}
.lb__f img{max-height:78vh;width:auto;max-width:100%;object-fit:contain}
.lb__f figcaption{display:flex;gap:18px;color:#fff;font-size:14px}
.lb__f figcaption span{color:rgba(255,255,255,.6)}
.lb__x{position:absolute;top:18px;right:24px;color:#fff;font-size:40px;line-height:1;width:48px;height:48px}
.lb__n{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:56px;width:56px;height:80px;opacity:.75}
.lb__n:hover{opacity:1}.lb__n--p{left:8px}.lb__n--n{right:8px}

@media (max-width:899px){
  .hero{height:100vh;height:100svh}
  .intro__grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr;gap:36px}
  .card,.c1,.c2,.c3,.c4,.c5,.c6{grid-column:1;grid-row:auto;margin-top:0}
  .c2 .card__img,.c6 .card__img{aspect-ratio:3/2}
  .proc__grid{grid-template-columns:1fr 1fr}
  .contact__grid{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .lb{padding:56px 12px}.lb__n{font-size:40px;width:40px}
  .rail::after{content:none}
}
@media (max-width:520px){.proc__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .fade,.card,.reveal-words .w{opacity:1;transform:none;filter:none;transition:none}
  .pre{display:none}
  html.loading .hdr,html.loading .hero__meta,html.loading .hero__scroll{opacity:1;transform:none}
}

/* ═══ language switch (both versions) ═══ */
.hdr__r{display:flex;align-items:center;gap:10px}
.langsw{display:grid;place-items:center;height:36px;min-width:44px;padding:0 12px;border-radius:9px;background:rgba(40,38,36,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:500;border:1px solid rgba(255,255,255,.1);transition:background .3s}
.langsw:hover{background:rgba(176,140,90,.9)}
html:lang(en) .langsw{font-family:'Cairo','Inter',sans-serif;font-size:14px}

/* ═══ ARABIC / RTL ═══ */
html[dir=rtl]{--head:'Cairo','Inter',-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;--sans:'Cairo','Inter',-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;--serif:'Amiri','Times New Roman',serif}
html[dir=rtl] *,html[dir=rtl] *::before,html[dir=rtl] *::after{letter-spacing:0!important}
html[dir=rtl] body{line-height:1.8}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{font-weight:500;line-height:1.28}
html[dir=rtl] .hero__h1{line-height:1.3;max-width:13em}
html[dir=rtl] .intro__h{line-height:1.25}
html[dir=rtl] .panel__h{line-height:1.25}
html[dir=rtl] .card__t{font-weight:500}
.ltr,bdi.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
html[dir=rtl] .contact__list .ltr{text-align:right}
html[dir=rtl] .langsw{font-family:'Inter','Cairo',sans-serif;font-size:13px}
html[dir=rtl] .hdr .logo i{margin:0 .2em}
html[dir=rtl] .menu__nav a:hover{transform:translateX(-10px)}
html[dir=rtl] .more svg,html[dir=rtl] .form button[type=submit] svg{transform:scaleX(-1)}
html[dir=rtl] .more:hover i{transform:translateX(-6px)}
html[dir=rtl] .form button[type=submit]:hover{transform:translateX(-3px)}
html[dir=rtl] .form label{text-transform:none;font-size:13px;color:var(--ink2)}
html[dir=rtl] .contact__list span{text-transform:none;font-size:13px;width:80px}
/* opening: words sit on the right, window chamfer on the bottom-left */
html[dir=rtl] .pre__w{left:auto;right:0;text-align:right;align-items:flex-end}
html[dir=rtl] .pre__w--top{transform:translate3d(-31vw,0,0)}
html[dir=rtl] .pre__w--bot{transform:translate3d(-31vw,0,0)}
html[dir=rtl] .pre.split .pre__w--top{transform:translate3d(-8vw,-16vh,0)}
html[dir=rtl] .pre.split .pre__w--bot{transform:translate3d(-50vw,16vh,0)}
html[dir=rtl] .pre.grow .pre__w--top{transform:translate3d(-8vw,-34vh,0)}
html[dir=rtl] .pre.grow .pre__w--bot{transform:translate3d(-50vw,34vh,0)}
html[dir=rtl] .pre__win{clip-path:polygon(14vw 50%,86vw 50%,86vw 50%,calc(14vw + var(--cut)) 50%,14vw 50%)}
html[dir=rtl] .pre.split .pre__win{clip-path:polygon(14vw calc(50% - 13.5vh),86vw calc(50% - 13.5vh),86vw calc(50% + 13.5vh),calc(14vw + var(--cut)) calc(50% + 13.5vh),14vw calc(50% + 13.5vh - var(--cut)))}
html[dir=rtl] .pre.grow .pre__win{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 100%)}
html[dir=rtl] .pre__w,html[dir=rtl] .pre__letters{font-weight:400}
/* mobile cards */
html[dir=rtl] .panel__links li::after{content:"<";margin-right:0;margin-left:6px}
html[dir=rtl] .panel__tag{left:auto;right:18px}
html[dir=rtl] .panel__no{left:auto;right:18px}
html[dir=rtl] .panel__thumb{right:auto;left:14px;clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px))}
html[dir=rtl] .card__img{clip-path:polygon(0 0,100% 0,100% 100%,44px 100%,0 calc(100% - 44px))}
html[dir=rtl] .wafloat{right:auto;left:16px}
html[dir=rtl] .lb__x{right:auto;left:24px}
html[dir=rtl] .lb__n--p{left:auto;right:8px}
html[dir=rtl] .lb__n--n{right:auto;left:8px}
@media (min-width:900px){
  html[dir=rtl] .rail{left:auto;right:0;transform:translate3d(-83vw,0,0)}
  html[dir=rtl] .panel__plus{right:auto;left:clamp(22px,2.2vw,34px)}
  html[dir=rtl] .panel__h{left:auto;right:clamp(22px,2.2vw,34px)}
  html[dir=rtl] .panel__tag{right:auto;left:clamp(22px,2.2vw,34px);text-align:left}
  html[dir=rtl] .panel__no{left:auto;right:clamp(22px,2.2vw,34px)}
  html[dir=rtl] .hero__meta{justify-content:flex-start}
  html[dir=rtl] .wafloat{right:auto;left:20px}
}
@media (max-width:899px){html[dir=rtl] .hero__h1{max-width:100%}}
#lbC{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .hero__h1{max-width:15em}
@media (max-width:899px){
  html[dir=rtl] .panel__h{font-size:clamp(30px,9.4vw,42px)}
  html[dir=rtl] .panel__body{padding-bottom:64px}
  html[dir=rtl] .panel{min-height:72vw}
  html[dir=rtl] .panel__body{min-height:72vw}
}
@media (min-width:900px){html[dir=rtl] .hero__h1{font-size:clamp(44px,5.5vw,104px);max-width:min(13em,76vw)}}
html[dir=rtl] .hero__h1,html[dir=rtl] .intro__h{text-wrap:balance}
@media (min-width:900px){html[dir=rtl] .hero__h1{max-width:min(11em,70vw)}}

/* Arabic: panel titles must never touch the link list */
@media (min-width:900px){
  html[dir=rtl] .panel__h{font-size:clamp(26px,min(3.5vw,5.8vh),64px);line-height:1.22;max-width:78%;bottom:clamp(40px,6vh,60px)}
  html[dir=rtl] .panel__links{width:calc(100% - 110px);gap:10px 22px;font-size:clamp(12.5px,.9vw,14.5px)}
  html[dir=rtl] .panel__links li{white-space:nowrap}
  html[dir=rtl] .panel__body{overflow:hidden}
}
@media (min-width:900px){
  .panel__h{max-width:calc(100% - 9.2em - clamp(44px,4.4vw,68px))}
  .panel__tag{font-size:12.5px;max-width:8.6em}
  html[dir=rtl] .panel__h{max-width:calc(100% - 9.2em - clamp(44px,4.4vw,68px))}
}

/* ═══ TYPOGRAPHY UPGRADE: capitals, tracking, refined hierarchy (Latin only) ═══ */
:root{--pw:clamp(24px,6.6vw,38px)}
.logo{font-size:clamp(13px,1.05vw,16px);font-weight:500;text-transform:uppercase;letter-spacing:.26em}
.logo i{opacity:.55;margin:0 .45em;letter-spacing:0}
.langsw{letter-spacing:0}
.pre__letters{font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.pre__w{font-weight:500;text-transform:uppercase;letter-spacing:.16em;line-height:1.3}
.hero__meta{font-size:clamp(10.5px,.82vw,12.5px);font-weight:500;text-transform:uppercase;letter-spacing:.22em;padding-top:clamp(12px,1.8vh,18px);border-top:1px solid rgba(255,255,255,.38)}
.hero__h1{font-size:clamp(30px,8.6vw,46px);font-weight:500;text-transform:uppercase;letter-spacing:.012em;line-height:1.08;max-width:13em}
.hero__scroll{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.24em;padding-bottom:7px}
@media (min-width:900px){
  .hero__h1{font-size:clamp(36px,4.5vw,84px);line-height:1.06;letter-spacing:.008em;max-width:15em}
  .hero__meta{max-width:min(46vw,760px)}
}
/* Arabic has no capitals: keep it natural, just heavier and cleaner */
html[dir=rtl] .logo,html[dir=rtl] .pre__letters,html[dir=rtl] .pre__w,html[dir=rtl] .hero__meta,html[dir=rtl] .hero__h1,html[dir=rtl] .hero__scroll{text-transform:none}
html[dir=rtl] .hero__h1{font-weight:600}
html[dir=rtl] .pre__letters,html[dir=rtl] .pre__w{font-weight:500}
html[dir=rtl] .logo{font-size:clamp(17px,1.4vw,22px);font-weight:600}
html[dir=rtl] .hero__meta{font-size:clamp(13px,1vw,15px);font-weight:500}
html[dir=rtl] .hero__scroll{font-size:13.5px}
html[dir=rtl] .pre__w{line-height:1.2}
@media (max-width:899px){
  .logo{font-size:12.5px;letter-spacing:.2em}
  .hero__meta{flex-direction:column;gap:5px;letter-spacing:.18em;font-size:10.5px}
  html[dir=rtl] .hero__meta{font-size:13px}
}
/* slightly smaller capitals */
:root{--pw:clamp(21px,5.8vw,34px)}
.hero__h1{font-size:clamp(27px,7.7vw,41px)}
@media (min-width:900px){.hero__h1{font-size:clamp(32px,4vw,74px)}}
html[dir=rtl] .hero__h1{font-size:clamp(34px,9vw,44px)}
@media (min-width:900px){html[dir=rtl] .hero__h1{font-size:clamp(40px,4.8vw,90px)}}