/* Layout: a dark cinema "house" — wide headline slabs, a red cut line running through each section like an edit timeline */
:root{
  --ink:#0A0A0A; --ink-2:#121111; --line:#2A2626; --bone:#F3F0E9; --mute:#9C9690;
  --red:#E8291F; --red-deep:#B00D0D;
  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Archivo",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --stretch:125%; --caps:uppercase; --track:.16em;
  color-scheme:dark;
}
html[dir="rtl"]{
  --f-display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --stretch:100%; --caps:none; --track:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:var(--track);text-transform:var(--caps);color:var(--mute)}
html[dir="rtl"] .label{font-size:13px}
.label b{color:var(--red);font-weight:500}
h1,h2,h3{font-family:var(--f-display);font-stretch:var(--stretch);font-weight:900;line-height:.98;margin:0;text-transform:var(--caps);text-wrap:balance;letter-spacing:-.01em}
html[dir="rtl"] :is(h1,h2,h3){letter-spacing:0;line-height:1.2}
h2{font-size:clamp(34px,6.2vw,76px)}
html[dir="rtl"] h2{font-size:clamp(32px,5.6vw,66px)}
h2 em{font-style:normal;color:var(--red)}
p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.flip{display:inline-block}
html[dir="rtl"] .flip{transform:scaleX(-1)}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;direction:ltr}
.brand img{height:26px;width:auto}
.brand span{font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:20px;letter-spacing:.02em}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{text-decoration:none;font-size:13px;letter-spacing:var(--track);text-transform:var(--caps);color:var(--mute);transition:color .2s}
html[dir="rtl"] .navlinks a{font-size:15px}
.navlinks a:hover{color:var(--bone)}
.lang{background:transparent;border:1px solid var(--line);padding:8px 12px;cursor:pointer;font-family:"IBM Plex Sans Arabic","Archivo",sans-serif;font-weight:600;font-size:14px;letter-spacing:0;line-height:1;transition:border-color .2s}
.lang:hover{border-color:var(--bone)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:var(--bone);text-decoration:none;font-weight:700;font-size:13px;letter-spacing:var(--track);text-transform:var(--caps);padding:12px 20px;border:0;cursor:pointer;transition:background .2s}
html[dir="rtl"] .btn{font-size:15px;font-weight:600}
.btn:hover{background:var(--red-deep)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--bone)}
@media (max-width:860px){.navlinks a.nl{display:none}}
@media (max-width:400px){.navlinks .btn{display:none}}

/* hero */
.hero{position:relative;padding-block:clamp(56px,10vw,120px) clamp(48px,7vw,90px);overflow:hidden}
.hero .mark-bg{position:absolute;inset-inline-end:-6%;top:6%;width:min(52vw,560px);opacity:.09;pointer-events:none}
.hero .label{margin-bottom:28px}
.hero h1{font-size:clamp(46px,11vw,150px);line-height:.88}
html[dir="rtl"] .hero h1{font-size:clamp(48px,11vw,140px);line-height:1.12}
.hero h1 span{display:block}
.hero h1 .r{color:var(--red)}
.hero-foot{margin-top:clamp(36px,5vw,60px);display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-end;justify-content:space-between}
.hero-foot p{max-width:46ch;color:var(--mute);font-size:18px}
.hero-foot p strong{color:var(--bone);font-weight:600}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.lockup{margin-top:28px;display:flex;align-items:center;gap:18px;direction:ltr;justify-content:flex-start}
html[dir="rtl"] .lockup{justify-content:flex-end}
.lockup i{display:block;width:56px;height:1.5px;background:var(--red)}
.lockup span{font-family:"Archivo",sans-serif;font-weight:500;font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--red);padding-left:.42em}
html[dir="rtl"] .strip-track span{font-family:"Alexandria","Archivo",sans-serif;font-weight:800}
/* tagline strip */
.strip{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding-block:16px;background:var(--ink-2);direction:ltr}
.strip-track{display:inline-flex;gap:40px;animation:slide 32s linear infinite;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(18px,2.4vw,28px);text-transform:uppercase}
.strip-track i{font-style:normal;color:var(--red)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
section.block{padding-block:clamp(70px,10vw,130px);border-bottom:1px solid var(--line)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 60px;align-items:end;margin-bottom:clamp(40px,6vw,70px)}
.head .label{grid-column:1/-1}
.head p{color:var(--mute);max-width:52ch}
@media (max-width:820px){.head{grid-template-columns:minmax(0,1fr)}}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 70px;align-items:start}
.about-grid .lead{font-size:clamp(20px,2.2vw,26px);line-height:1.5;max-width:34ch}
.about-grid .lead em{font-style:normal;color:var(--red)}
.stat{border-inline-start:2px solid var(--red);padding-inline-start:24px;display:grid;gap:10px}
.stat .n{font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(80px,12vw,150px);line-height:.85;direction:ltr;text-align:start}
html[dir="rtl"] .stat .n{text-align:right}
.stat .n sup{color:var(--red);font-size:.45em;vertical-align:top;margin-left:4px}
.stat .t{font-weight:700;letter-spacing:var(--track);text-transform:var(--caps);font-size:14px}
html[dir="rtl"] .stat .t{font-size:17px}
.stat p{color:var(--mute);font-size:15px}
.values{margin-top:56px;display:flex;flex-wrap:wrap;gap:12px}
.values span{border:1px solid var(--line);padding:10px 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:var(--track);text-transform:var(--caps)}
html[dir="rtl"] .values span{font-size:14px}
.values span:first-child{border-color:var(--red);color:var(--red)}
@media (max-width:820px){.about-grid{grid-template-columns:minmax(0,1fr)}}

/* services */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.svc article{padding:32px 26px 36px;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:18px;transition:background .25s}
.svc article:last-child{border-inline-end:0}
.svc article:hover{background:var(--ink-2)}
.svc .k{font-family:var(--f-mono);font-size:12px;color:var(--red);letter-spacing:var(--track);text-transform:var(--caps)}
html[dir="rtl"] .svc .k{font-size:14px}
.svc h3{font-size:22px;line-height:1.1}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--mute);font-size:15px}
.svc li::before{content:"— ";color:var(--red)}
@media (max-width:960px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}.svc article:nth-child(2){border-inline-end:0}.svc article:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.svc{grid-template-columns:minmax(0,1fr)}.svc article{border-inline-end:0;border-bottom:1px solid var(--line)}}

/* process */
.tl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.tl::before{content:"";position:absolute;inset-inline:0;top:9px;height:2px;background:var(--red)}
.tl div{position:relative;padding-top:40px;padding-inline-end:16px}
.tl div::before{content:"";position:absolute;top:2px;inset-inline-start:0;width:16px;height:16px;background:var(--ink);border:2px solid var(--red);transform:rotate(45deg)}
.tl div:last-child::before{background:var(--red)}
.tl .k{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mute);letter-spacing:.14em}
.tl h3{font-size:clamp(18px,2vw,24px);margin-top:8px}
.tl p{color:var(--mute);font-size:14px;margin-top:10px;max-width:24ch}
@media (max-width:820px){
  .tl{grid-template-columns:minmax(0,1fr);gap:28px;padding-inline-start:34px}
  .tl::before{inset-inline:9px auto;top:0;bottom:0;width:2px;height:auto}
  .tl div{padding-top:0}
  .tl div::before{inset-inline-start:-32px;top:4px}
  .tl p{max-width:40ch}
}

/* works */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.reel{position:relative;aspect-ratio:9/12;max-width:100%;background:var(--ink-2);border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;padding:22px;overflow:hidden;transition:border-color .25s}
.reel::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--red) 22%,transparent),transparent 60%);opacity:.5;transition:opacity .3s}
.reel:hover{border-color:var(--red)}
.reel:hover::after{opacity:1}
.reel .top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.reel .num{font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(56px,7vw,92px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.reel:hover .num{color:var(--red);-webkit-text-stroke-color:var(--red)}
.reel .plat{font-family:var(--f-mono);font-size:11px;letter-spacing:var(--track);text-transform:var(--caps);color:var(--mute);border:1px solid var(--line);padding:5px 9px}
.reel .play{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--bone);display:grid;place-items:center;align-self:center;transition:background .25s,border-color .25s}
.reel .play svg{width:18px;height:18px;margin-left:3px;fill:var(--bone)}
.reel:hover .play{background:var(--red);border-color:var(--red)}
.reel .bot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.reel .bot b{font-weight:700;letter-spacing:.1em;text-transform:var(--caps);font-size:14px}
html[dir="rtl"] .reel .bot b{letter-spacing:0;font-size:16px}
.reel .bot span{font-family:var(--f-mono);font-size:12px;color:var(--mute);white-space:nowrap}
@media (max-width:820px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.works{grid-template-columns:minmax(0,1fr)}.reel{aspect-ratio:16/10}}
.heritage{margin-top:clamp(50px,7vw,80px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 40px;align-items:center;border:1px solid var(--line);padding:clamp(24px,4vw,40px);background:var(--ink-2)}
.heritage .big{font-family:var(--f-display);font-stretch:var(--stretch);font-weight:900;font-size:clamp(22px,3vw,34px);text-transform:var(--caps);line-height:1.15;max-width:22ch}
.heritage .big em{font-style:normal;color:var(--red)}
.heritage p{color:var(--mute);max-width:54ch}
.heritage .roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.heritage .roles span{font-family:var(--f-mono);font-size:11px;letter-spacing:var(--track);text-transform:var(--caps);border:1px solid var(--line);padding:7px 11px;color:var(--bone)}
html[dir="rtl"] .heritage .roles span{font-size:13px}
@media (max-width:820px){.heritage{grid-template-columns:minmax(0,1fr)}}

/* articles */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post{background:transparent;border:1px solid var(--line);text-align:start;padding:28px 24px;display:flex;flex-direction:column;gap:16px;cursor:pointer;transition:border-color .25s,background .25s}
.post:hover{border-color:var(--red);background:var(--ink-2)}
.post .meta{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:12px;color:var(--mute);letter-spacing:var(--track);text-transform:var(--caps)}
html[dir="rtl"] .post .meta{font-size:13px}
.post .meta b{color:var(--red);font-weight:500}
.post h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15}
html[dir="rtl"] .post h3{line-height:1.4}
.post p{color:var(--mute);font-size:15px}
.post .more{margin-top:auto;font-weight:700;font-size:13px;letter-spacing:var(--track);text-transform:var(--caps);display:flex;gap:8px;align-items:center}
html[dir="rtl"] .post .more{font-size:15px}
.post:hover .more{color:var(--red)}
@media (max-width:900px){.posts{grid-template-columns:minmax(0,1fr)}}

/* why */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.why div{background:var(--ink);padding:34px 28px;display:grid;gap:12px;align-content:start}
.why h3{font-size:20px}
.why p{color:var(--mute);font-size:15px}
@media (max-width:820px){.why{grid-template-columns:minmax(0,1fr)}}

/* contact */
.contact{padding-block:clamp(80px,12vw,160px)}
.contact h2{font-size:clamp(46px,10vw,140px);line-height:.88}
html[dir="rtl"] .contact h2{font-size:clamp(44px,9vw,120px);line-height:1.15}
.contact h2 .r{color:var(--red)}
.contact-row{margin-top:50px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.social{border:1px solid var(--line);padding:22px;text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:border-color .2s,background .2s}
.social b{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.social span{font-family:var(--f-mono);font-size:12px;color:var(--mute)}
a.social:hover{border-color:var(--red);background:var(--ink-2)}
a.social:hover span{color:var(--red)}
.social.soon{opacity:.5}
@media (max-width:900px){.contact-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.contact-row{grid-template-columns:minmax(0,1fr)}}

footer{border-top:1px solid var(--line)}
footer .wrap{padding-block:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}

.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}
@keyframes rise{from{transform:translateY(24px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* multi-page additions */
.navlinks a.nl.active{color:var(--bone)}
.navlinks a.nl.active::after{content:"";display:block;height:2px;background:var(--red);margin-top:4px}
a.lang{text-decoration:none;color:var(--bone)}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);width:40px;height:38px;place-items:center;cursor:pointer;color:var(--bone)}
.menu-btn svg{width:18px;height:18px}
.mobile-panel{display:none}
@media (max-width:860px){
  .menu-btn{display:grid}
  nav.open .mobile-panel{display:flex}
  .mobile-panel{position:absolute;inset-inline:0;top:100%;flex-direction:column;background:var(--ink);border-bottom:1px solid var(--line);padding-block:8px 18px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .mobile-panel a{padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--f-display);font-stretch:var(--stretch);font-weight:800;font-size:22px;text-transform:var(--caps)}
  .mobile-panel a.active{color:var(--red)}
  .mobile-panel a:last-child{border-bottom:0}
}
nav .wrap{position:relative}

.page-hero{padding-block:clamp(56px,9vw,110px) clamp(44px,6vw,76px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero .label{margin-bottom:24px}
.page-hero h1{font-size:clamp(42px,8.4vw,112px);line-height:.92}
html[dir="rtl"] .page-hero h1{font-size:clamp(40px,7.6vw,100px);line-height:1.18}
.page-hero h1 em{font-style:normal;color:var(--red)}
.page-hero .intro{margin-top:28px;max-width:56ch;color:var(--mute);font-size:clamp(17px,1.8vw,20px)}
.page-hero .mark-bg{position:absolute;inset-inline-end:-4%;top:10%;width:min(36vw,380px);opacity:.07;pointer-events:none}

.more-link{display:inline-flex;align-items:center;gap:10px;margin-top:40px;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:var(--track);text-transform:var(--caps);padding-bottom:6px;border-bottom:1.5px solid var(--red);transition:color .2s}
html[dir="rtl"] .more-link{font-size:16px}
.more-link:hover{color:var(--red)}

.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px 70px;align-items:start}
.story .copy{display:grid;gap:20px;font-size:18px;color:#D6D1C9;max-width:60ch}
@media (max-width:820px){.story{grid-template-columns:minmax(0,1fr)}}

.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,6vw,64px)}
.checks div{background:var(--ink);padding:26px 22px;display:grid;gap:10px;align-content:start}
.checks b{font-family:var(--f-display);font-stretch:var(--stretch);font-weight:800;font-size:18px;text-transform:var(--caps)}
.checks span{color:var(--mute);font-size:15px}
@media (max-width:900px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.checks{grid-template-columns:minmax(0,1fr)}}

a.post{text-decoration:none;color:inherit}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:var(--track);text-transform:var(--caps);color:var(--mute)}
html[dir="rtl"] .crumbs{font-size:14px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--bone)}
.article{max-width:740px;margin:0 auto;padding-block:clamp(44px,7vw,90px) clamp(60px,8vw,100px)}
.article h1{font-size:clamp(34px,5.6vw,62px);line-height:1.02;margin-block:22px 28px}
html[dir="rtl"] .article h1{line-height:1.3}
.article .lede{font-size:clamp(19px,2.2vw,23px);border-inline-start:2px solid var(--red);padding-inline-start:18px;margin-bottom:36px}
.article .body{display:grid;gap:22px;color:#D6D1C9;font-size:18px;line-height:1.8}
.article .body h2{font-size:clamp(20px,2.4vw,26px);margin:16px 0 -6px;color:var(--bone);line-height:1.2}
html[dir="rtl"] .article .body h2{line-height:1.45}
.article .end{margin-top:54px;padding:30px;border:1px solid var(--line);background:var(--ink-2);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.article .end p{font-family:var(--f-display);font-stretch:var(--stretch);font-weight:800;font-size:20px;text-transform:var(--caps);max-width:26ch}

.notfound{padding-block:clamp(90px,14vw,180px)}
.notfound h1{font-size:clamp(80px,18vw,220px);line-height:.85;color:var(--red);font-family:"Archivo",sans-serif;font-stretch:125%}
.notfound p{margin-block:24px 34px;color:var(--mute);font-size:19px}

/* standalone resets */
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.navlinks a.nl{position:relative}
.navlinks a.nl.active::after{position:absolute;inset-inline:0;bottom:-6px;margin:0}
.lockup span{white-space:nowrap}
@media (max-width:520px){.lockup{gap:12px}.lockup i{width:28px}.lockup span{letter-spacing:.3em;font-size:11px}}

.navlinks a.btn{color:var(--bone)}

/* language switch */
.lang-switch{display:inline-flex;border:1px solid var(--line);font-family:"Archivo","IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:13px;line-height:1}
.lang-switch>*{padding:9px 12px;text-decoration:none;color:var(--mute);letter-spacing:.06em}
.lang-switch span[lang="ar"],.lang-switch a[lang="ar"]{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:15px;padding-block:7px}
.lang-switch .on{background:var(--bone);color:var(--ink)}
.lang-switch a:hover{color:var(--bone)}

/* calm layout */
section.block{padding-block:clamp(90px,13vw,170px)}
.head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:clamp(44px,6vw,72px);max-width:900px}
.head .label{grid-column:auto}
.head p{font-size:clamp(17px,1.8vw,20px);max-width:40ch}
.hero-foot p{font-size:clamp(17px,1.9vw,20px);max-width:38ch}
.intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:50px 80px;align-items:center}
.intro h2{margin-bottom:22px}
.intro p{color:var(--mute);font-size:clamp(17px,1.8vw,20px);max-width:36ch}
.intro .stat .t{max-width:22ch;line-height:1.5}
@media (max-width:820px){.intro{grid-template-columns:minmax(0,1fr)}}
.svc article{padding:40px 28px 44px;gap:14px}
.svc h3{font-size:clamp(22px,2.4vw,30px)}
.svc p{color:var(--mute);font-size:16px}
.why div{padding:44px 32px}
.why h3{font-size:clamp(22px,2.4vw,28px)}
.why p{font-size:16px}
.heritage{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.heritage p{font-size:17px}
.story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;margin-bottom:clamp(50px,7vw,80px)}
.story .copy{font-size:clamp(18px,2vw,21px)}
@media (max-width:820px){.heritage,.story{grid-template-columns:minmax(0,1fr)}}
.checks div{padding:30px 24px}
.contact-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
@media (max-width:460px){.contact-row{grid-template-columns:minmax(0,1fr)}}
.page-hero .intro{display:block}

/* simple hero */
.hero{padding-block:clamp(70px,11vw,140px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px 80px;align-items:center}
.hero-copy .label{margin-bottom:22px}
.hero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.04;max-width:16ch}
html[dir="rtl"] .hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.3}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-copy p{margin-top:20px;color:var(--mute);font-size:clamp(16px,1.6vw,19px);max-width:34ch}
.hero-copy .cta-row{margin-top:34px}
.hero-mark{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(28px,4vw,48px) 20px;border:1px solid var(--line);background:radial-gradient(80% 70% at 50% 30%,color-mix(in srgb,var(--red) 10%,transparent),transparent 70%),var(--ink-2);direction:ltr}
.hero-mark img{width:clamp(70px,9vw,110px);height:auto}
.hero-mark .word{font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(44px,6vw,76px);line-height:.9;letter-spacing:.01em}
.hero-mark .sub{font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.hero-mark .tag{display:flex;align-items:center;gap:12px;font-family:"Archivo",sans-serif;font-weight:500;font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.hero-mark .tag i{width:26px;height:1.5px;background:var(--red);display:block}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-mark{order:-1;padding:30px 16px}.hero-mark .sub{font-size:10px;letter-spacing:.32em}.hero-mark .tag{font-size:10px;letter-spacing:.28em}}
/* calmer headings sitewide */
h2{font-size:clamp(28px,4vw,50px)}
html[dir="rtl"] h2{font-size:clamp(28px,3.8vw,46px)}
.page-hero h1{font-size:clamp(34px,5.4vw,70px)}
html[dir="rtl"] .page-hero h1{font-size:clamp(34px,5vw,64px)}
.contact h2{font-size:clamp(38px,6vw,80px)}
html[dir="rtl"] .contact h2{font-size:clamp(36px,5.6vw,72px)}
.stat .n{font-size:clamp(64px,8vw,110px)}
.reel .num{font-size:clamp(44px,5vw,70px)}

/* phone + whatsapp */
.contact-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.social.primary{background:var(--red);border-color:var(--red)}
.social.primary span{color:var(--bone)}
a.social.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
a.social.primary:hover span{color:var(--bone)}
.social span[dir="ltr"]{font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.04em}
.wa-float{position:fixed;z-index:55;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-end:max(20px,env(safe-area-inset-right,0px));width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .2s}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:scale(1.06)}
html[dir="rtl"] .wa-float{inset-inline-end:auto;inset-inline-start:max(20px,env(safe-area-inset-left,0px))}
.social span[dir="ltr"]{font-family:"Archivo",sans-serif;font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--bone);opacity:.85;white-space:nowrap}
footer .label span[dir="ltr"]{font-family:"Archivo",sans-serif;letter-spacing:.04em}

/* contact cards v2 */
.contact-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;gap:12px}
.social{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:24px 26px;min-height:104px}
.social b{font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
html[dir="rtl"] .social b{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:17px;font-weight:600;letter-spacing:0;text-transform:none}
.social span[dir="ltr"]{font-size:16px;opacity:.75}
html[dir="rtl"] .social span[dir="ltr"]{align-self:flex-start}
@media (max-width:560px){.contact-row{grid-template-columns:minmax(0,1fr)}}
footer .wrap{padding-bottom:calc(26px + 70px)}

.social span[dir="ltr"],footer span[dir="ltr"]{direction:ltr;unicode-bidi:isolate}

/* service cards (links) */
.svc .svc-card{padding:40px 28px 40px;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:background .25s}
.svc .svc-card:last-child{border-inline-end:0}
.svc .svc-card:hover{background:var(--ink-2)}
.svc .svc-card h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15}
.svc .svc-card p{color:var(--mute);font-size:16px}
.svc .svc-card .more{margin-top:auto;padding-top:10px;display:flex;gap:8px;align-items:center;font-weight:700;font-size:12px;letter-spacing:var(--track);text-transform:var(--caps);color:var(--bone)}
html[dir="rtl"] .svc .svc-card .more{font-size:15px}
.svc .svc-card:hover .more{color:var(--red)}
.svc.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.svc .svc-card:nth-child(2){border-inline-end:0}.svc .svc-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.svc.three{grid-template-columns:minmax(0,1fr)}.svc.three .svc-card{border-inline-end:0;border-bottom:1px solid var(--line)}}
@media (max-width:520px){.svc .svc-card{border-inline-end:0;border-bottom:1px solid var(--line)}}
/* service detail */
.svc-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;align-items:start}
.svc-detail .for{color:var(--mute);font-size:clamp(17px,1.8vw,19px);margin-block:18px 30px;max-width:34ch}
.inc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.inc li{padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;display:flex;gap:14px;align-items:center}
.inc li::before{content:"";width:8px;height:8px;background:var(--red);transform:rotate(45deg);flex:none}
@media (max-width:820px){.svc-detail{grid-template-columns:minmax(0,1fr)}}
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:600;font-size:clamp(17px,1.8vw,20px);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--mute);padding-bottom:22px;max-width:60ch}
.quote-btn{margin-top:34px}
/* contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px 70px;align-items:start}
.contact-side{display:grid;gap:12px}
@media (max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.quote{display:grid;gap:10px}
.quote label{font-size:14px;color:var(--mute);margin-top:10px}
.quote input,.quote select,.quote textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--bone);font:inherit;font-size:16px;padding:14px 16px;border-radius:0;appearance:none;-webkit-appearance:none}
.quote select{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
html[dir="rtl"] .quote select{background-position:20px 50%,25px 50%}
.quote input:focus,.quote select:focus,.quote textarea:focus{outline:none;border-color:var(--red)}
.quote .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.quote .two label{display:block}
@media (max-width:520px){.quote .two{grid-template-columns:minmax(0,1fr)}}
.quote .btn{margin-top:18px;justify-content:center;padding-block:16px}
.f-note{color:var(--mute);font-size:13px}
.f-err{color:var(--red);font-size:14px}

/* single language button */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:38px;padding:0 12px;border:1px solid var(--line);text-decoration:none;color:var(--bone);font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;transition:border-color .2s,color .2s}
.lang-btn[lang="ar"]{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:15px;letter-spacing:0}
.lang-btn:hover{border-color:var(--red);color:var(--red)}

/* services grid fits any count */
.svc,.svc.three{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc .svc-card,.svc .svc-card:nth-child(n),.svc.three .svc-card{border:0;background:var(--ink)}
.svc .svc-card:hover{background:var(--ink-2)}
@media (max-width:520px){.svc,.svc.three{grid-template-columns:minmax(0,1fr)}}
.svc{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svc{grid-template-columns:minmax(0,1fr)}}

/* real video cards */
.reel.vid{padding:0;cursor:pointer;aspect-ratio:9/16;font:inherit;color:var(--bone);text-align:start;background:#000}
.reel.vid::after{display:none}
.reel.vid video.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel.vid .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%);z-index:1}
.reel.vid .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;z-index:2;background:rgba(10,10,10,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.reel.vid:hover .play{background:var(--red)}
.reel.vid .cap{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:20px;display:grid;gap:4px}
.reel.vid .cap b{font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;letter-spacing:.02em}
.reel.vid .cap span{font-size:15px;color:var(--bone)}
.reel.vid .cap i{font-style:normal;font-size:12px;color:var(--mute);letter-spacing:.04em}
@media (max-width:420px){.reel.vid{aspect-ratio:4/5}}
.more-link.ig{margin-top:36px}
.player{padding:0;border:0;background:transparent;max-width:min(92vw,440px);width:100%;overflow:visible}
.player::backdrop{background:rgba(0,0,0,.88)}
.player video{width:100%;max-height:86vh;display:block;background:#000}
.close-player{position:absolute;top:-48px;inset-inline-end:0;width:40px;height:40px;border:1px solid var(--line);background:var(--ink);color:var(--bone);display:grid;place-items:center;cursor:pointer}

/* logo without box */
.hero-mark{border:0;background:radial-gradient(60% 55% at 50% 40%,color-mix(in srgb,var(--red) 9%,transparent),transparent 72%);padding-block:10px}
@media (max-width:860px){.hero-mark{padding:10px 0 4px}}

/* hero logo = original lockup image, bg matches page */
.hero-mark{background:none;border:0;padding:0;display:flex;justify-content:center;align-items:center}
.hero-mark img{width:min(100%,400px);height:auto}
.hero-grid{align-items:center}
@media (max-width:860px){.hero-mark img{width:min(78%,300px)}}
.hero-mark img{width:min(100%,340px)}
@media (max-width:860px){.hero-mark img{width:min(70%,270px)}}

/* hero: centered stack on all screens */
.hero{padding-block:clamp(56px,8vw,110px) clamp(56px,8vw,100px)}
.hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(36px,4vw,56px)}
.hero-mark{order:-1}
.hero-mark img{width:clamp(200px,20vw,280px)}
.hero-copy{display:flex;flex-direction:column;align-items:center;max-width:760px}
.hero h1{font-size:clamp(30px,3.6vw,48px);max-width:none;line-height:1.1}
html[dir="rtl"] .hero h1{font-size:clamp(32px,3.6vw,48px);line-height:1.35}
.hero-copy p{max-width:44ch;margin-inline:auto}
.hero-copy .cta-row{justify-content:center}
@media (max-width:860px){.hero-mark img{width:min(64%,250px)}}
.hero{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,90px)}
.hero-grid{gap:clamp(28px,3vw,40px)}
.hero-mark img{width:clamp(190px,16vw,240px)}
.hero-copy .label{margin-bottom:16px}
@media (max-height:820px) and (min-width:861px){.hero-mark img{width:200px}}

/* ===== premium layer: illustrations, depth, refined motion ===== */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero{background:radial-gradient(50% 60% at 50% 30%,color-mix(in srgb,var(--red) 13%,transparent),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.18;-webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent)}
.hero .wrap{position:relative;z-index:1}
section.block{position:relative}
h2 em,.hero h1 em{background:linear-gradient(90deg,var(--red),#FF6A55);-webkit-background-clip:text;background-clip:text;color:transparent}

/* illustration frames */
.art,.svc-art,.post-art,.ph-art,.cover-art,.proc-art{display:block;overflow:hidden;background:#0d0c0c}
.art img,.svc-art img,.post-art img,.ph-art img,.cover-art img,.proc-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* service cards with artwork */
.svc,.svc.three{gap:18px;background:none;border:0}
.svc .svc-card,.svc .svc-card:nth-child(n),.svc.three .svc-card{border:1px solid var(--line);background:linear-gradient(180deg,#121111,#0b0b0b);padding:0;gap:0;overflow:hidden;transition:border-color .35s,transform .35s,box-shadow .35s}
.svc-card .svc-art{aspect-ratio:3/2;border-bottom:1px solid var(--line)}
.svc-card .svc-body{display:flex;flex-direction:column;gap:12px;padding:26px 26px 30px;flex:1}
.svc .svc-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--red) 70%,var(--line));box-shadow:0 24px 60px -24px rgba(232,41,31,.35);background:linear-gradient(180deg,#151313,#0b0b0b)}
.svc-card:hover .svc-art img{transform:scale(1.06)}

/* article cards with covers */
.post{padding:0;overflow:hidden;background:linear-gradient(180deg,#121111,#0b0b0b);transition:border-color .35s,transform .35s,box-shadow .35s}
.post>*:not(.post-art){margin-inline:24px}
.post .post-art{aspect-ratio:3/2;border-bottom:1px solid var(--line);margin-bottom:6px}
.post .more{margin-bottom:26px}
.post:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(232,41,31,.35)}
.post:hover .post-art img{transform:scale(1.06)}

/* page hero with artwork */
.page-hero.has-art .ph-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.page-hero .ph-art{aspect-ratio:3/2;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(232,41,31,.45)}
.page-hero.has-art .mark-bg{display:none}
@media (max-width:860px){.page-hero.has-art .ph-grid{grid-template-columns:minmax(0,1fr)}.page-hero .ph-art{order:2}}

/* article cover */
.cover-art{aspect-ratio:16/9;border:1px solid var(--line);margin:0 0 34px}
.cover-art img{object-fit:cover}

/* process with artwork */
.proc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 60px;align-items:center;margin-bottom:clamp(40px,6vw,70px)}
.proc-head .head{margin-bottom:0}
.proc-art{aspect-ratio:3/2;border:1px solid var(--line)}
@media (max-width:820px){.proc-head{grid-template-columns:minmax(0,1fr)}}

/* refined details */
.why div,.checks div{transition:background .3s}
.why div:hover{background:#111010}
.reel.vid{transition:border-color .35s,transform .35s,box-shadow .35s}
.reel.vid:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(232,41,31,.4)}
.btn{box-shadow:0 10px 30px -12px rgba(232,41,31,.6)}
.btn.ghost{box-shadow:none}
.contact{background:radial-gradient(40% 60% at 15% 40%,color-mix(in srgb,var(--red) 10%,transparent),transparent 70%)}
@media (prefers-reduced-motion:reduce){.svc .svc-card:hover,.post:hover,.reel.vid:hover{transform:none}}
.svc.three{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}

/* ===== photo layer ===== */
.hero.has-bg{background:#050505}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.55;transform:scale(1.04);animation:heroZoom 18s ease-out both}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 45%,rgba(10,10,10,.35),rgba(10,10,10,.9) 80%),linear-gradient(180deg,rgba(10,10,10,.2),#0A0A0A 96%)}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1.04)}}
.hero.has-bg::after{z-index:0}
.intro-side{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.intro-art{aspect-ratio:4/5;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(232,41,31,.45);max-width:300px}
.intro-art img{object-fit:cover}
@media (max-width:820px){.intro-side{grid-template-columns:minmax(0,1fr)}.intro-art{max-width:none;aspect-ratio:16/10}}
.contact.has-bg{position:relative;overflow:hidden}
.contact-bg{position:absolute;inset:0 0 0 auto;width:55%;z-index:0}
html[dir="rtl"] .contact-bg{inset:0 auto 0 0}
.contact-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.contact-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0A0A0A,rgba(10,10,10,.4) 60%,rgba(10,10,10,.75))}
html[dir="rtl"] .contact-bg::after{background:linear-gradient(270deg,#0A0A0A,rgba(10,10,10,.4) 60%,rgba(10,10,10,.75))}
.contact .wrap{position:relative;z-index:1}
@media (max-width:820px){.contact-bg{width:100%;opacity:.6}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
.intro-side{grid-template-columns:260px auto;justify-content:start}
.intro-art{width:260px;height:325px;aspect-ratio:auto;max-width:none}
.intro-art img{width:100%;height:100%}
@media (max-width:820px){.intro-side{grid-template-columns:minmax(0,1fr)}.intro-art{width:100%;height:auto;aspect-ratio:16/10}}

/* article body: subheads, lists, links, FAQ, topic chips */
.article .body h3{font-size:clamp(18px,2vw,21px);color:var(--bone);margin:6px 0 -10px;line-height:1.35}
html[dir="rtl"] .article .body h3{line-height:1.6}
.article .body ul,.article .body ol{display:grid;gap:10px;padding-inline-start:1.3em;margin:0}
.article .body ul{list-style:none;padding-inline-start:0}
.article .body ul li{position:relative;padding-inline-start:22px}
.article .body ul li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:9px;height:2px;background:var(--red)}
.article .body ol li::marker{color:var(--red);font-family:var(--f-mono);font-weight:500}
.article .body a,.article .lede a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s}
.article .body a:hover,.article .lede a:hover{color:var(--red)}
.article .post-faq{display:grid;gap:22px;border-top:1px solid var(--line);padding-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{border:1px solid var(--line);padding:8px 16px;font-size:14px;color:var(--mute);text-decoration:none;transition:border-color .2s,color .2s}
.chip:hover,.chip.on{border-color:var(--red);color:var(--bone)}

/* hero: the hook catching a client (We catch client) */
.hero-bg.catch{background:#050505}
.hero-bg.catch .hero-media{position:absolute;max-width:none;left:50%;top:0;height:100%;width:auto;transform:none;opacity:0;transition:opacity .8s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);mask-composite:intersect}
.hero-bg.catch .hero-media.on{opacity:1}
.hero-bg.catch::after{background:linear-gradient(180deg,rgba(5,5,5,0) 55%,rgba(5,5,5,.3) 80%,#0A0A0A 99%)}


/* Arabic strip runs with the reading direction (right to left order, moving right) */
html[dir="rtl"] .strip{direction:rtl}
html[dir="rtl"] .strip-track{animation-name:slide-rtl}
@keyframes slide-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* hero: room above the word for the client's head, arm and hook */
.hero.hero-catch{padding-top:clamp(130px,14vw,190px)}

/* contact photo on phones: show the camera, not a stray slice of the softbox */
@media (max-width:820px){.contact-bg img{object-position:74% 30%;opacity:.42}}

/* contact: a clear framed photo (camera ready = "جاهز؟") beside the text, not a dim background */
.contact-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
.contact-main{min-width:0}
.contact-main .contact-row{max-width:none}
.contact-pic{margin:0;aspect-ratio:1/1;border:1px solid var(--line);overflow:hidden;box-shadow:0 40px 90px -40px rgba(232,41,31,.45)}
.contact-pic{order:2}
.contact-pic img{width:100%;height:100%;object-fit:cover;object-position:82% 40%;filter:brightness(1.15) contrast(1.05)}
@media (max-width:820px){.contact-wrap{grid-template-columns:minmax(0,1fr);gap:34px}
 html[dir="rtl"] .contact-pic,.contact-pic{order:-1;aspect-ratio:16/10}
 .contact-pic img{object-position:80% 45%}}

/* the half-cropped watermark mark read as a stain on the page heroes — removed */
.hero .mark-bg,.page-hero .mark-bg{display:none}

/* intro photo on phones: show the whole portrait (it was cropped to 16:10, cutting the head) */
.intro-art img{display:block}
@media (max-width:820px){.intro-art{width:100%;height:auto;aspect-ratio:4/5}}

/* hero: image and HOK sit higher */
.hero.hero-catch{padding-top:clamp(64px,8vw,110px)}

/* reading bar */
.read-bar{position:fixed;inset-inline:0;top:0;height:3px;z-index:60;pointer-events:none}
.read-bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:right;box-shadow:0 0 12px rgba(232,41,31,.6)}
html[dir="ltr"] .read-bar i{transform-origin:left}

/* article H1 in the reference question style */
.article h1{font-family:"Alexandria",var(--f-display);font-weight:800;font-size:clamp(30px,4.6vw,50px);letter-spacing:0}
html[dir="rtl"] .article h1{line-height:1.42}

/* the table of contents jumps to each section */
.article .body ul.toc{border:1px solid var(--line);background:var(--ink-2);padding:20px 22px;gap:8px}
.article .body ul.toc a{color:var(--bone);text-decoration:none;border-bottom:1px solid transparent}
.article .body ul.toc a:hover{color:var(--red);border-color:var(--red)}
.article .body h2{scroll-margin-top:90px}

/* a photo under every H2: topic photo, its own crop, number and hook */
.sec-vis{position:relative;margin:4px 0 2px;aspect-ratio:16/7;border:1px solid var(--line);overflow:hidden;background:#0b0b0b;direction:ltr}
.sec-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.35) contrast(1.08) saturate(.9)}
.sec-vis .sv-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.7) 0%,rgba(8,8,8,.15) 40%,rgba(8,8,8,0) 70%),linear-gradient(0deg,rgba(8,8,8,.45),transparent 40%)}
.sec-vis.l .sv-shade{background:linear-gradient(270deg,rgba(8,8,8,.7) 0%,rgba(8,8,8,.15) 40%,rgba(8,8,8,0) 70%),linear-gradient(0deg,rgba(8,8,8,.45),transparent 40%)}
.sec-vis .sv-num{position:absolute;left:5%;bottom:-.16em;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(80px,14vw,150px);line-height:1;color:transparent;-webkit-text-stroke:1.6px rgba(242,238,230,.55)}
.sec-vis.l .sv-num{left:auto;right:5%}
.sec-vis .sv-hook{position:absolute;left:calc(5% + clamp(150px,26vw,280px));top:0;height:62%;color:var(--red);filter:drop-shadow(0 0 10px rgba(232,41,31,.6))}
.sec-vis.l .sv-hook{left:auto;right:calc(5% + clamp(150px,26vw,280px))}
.sec-vis .sv-hook svg{height:100%;width:auto}
.sec-vis .sv-brand{position:absolute;right:14px;top:12px;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:11px;letter-spacing:.22em;color:rgba(242,238,230,.6)}
.sec-vis.l .sv-brand{right:auto;left:14px}

/* article search */
.art-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--ink-2);padding:0 18px;margin-bottom:22px}
.art-search:focus-within{border-color:var(--red)}
.art-search svg{width:20px;height:20px;color:var(--mute);flex:none}
.art-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--bone);font:inherit;font-size:17px;padding:16px 0}
.no-hits{color:var(--mute);padding:20px 0}

/* hero bigger on laptops */
@media (min-width:861px){.hero-mark img{width:min(100%,430px)}}
@media (min-width:1300px){.hero-mark img{width:min(100%,480px)}}
.hero.hero-catch{padding-top:clamp(70px,8.5vw,120px)}
@media (min-width:1300px){.hero-mark img{width:min(100%,420px)}}
@media (min-width:861px){.hero.hero-catch{padding-top:clamp(150px,13vw,210px)}}
/* less flat black around the hero: soft light and red glow spreading to the sides */
.hero.hero-catch{background:
  radial-gradient(38% 70% at 50% 32%,rgba(90,110,140,.20),transparent 70%),
  radial-gradient(60% 55% at 50% 62%,rgba(232,41,31,.13),transparent 72%),
  radial-gradient(90% 60% at 50% 100%,rgba(232,41,31,.07),transparent 70%),
  #0A0A0A}
.hero-bg.catch{background:
  radial-gradient(34% 75% at 50% 34%,rgba(80,100,130,.22),transparent 72%),
  radial-gradient(55% 55% at 50% 62%,rgba(232,41,31,.14),transparent 72%),
  radial-gradient(100% 50% at 50% 100%,rgba(232,41,31,.08),transparent 70%),
  #070707}
@media (min-width:1300px){.hero-mark img{width:min(100%,390px)}}
@media (min-width:861px){.hero.hero-catch{padding-top:clamp(140px,12vw,180px)}}

/* reading mode button (beside the language button) */
.read-btn{gap:7px;background:none;cursor:pointer;font-family:"IBM Plex Sans Arabic","Archivo",sans-serif;font-size:14px;letter-spacing:0}
.read-btn svg{width:17px;height:17px}
.read-btn[aria-pressed="true"]{border-color:var(--red);color:var(--red)}
@media (max-width:860px){.read-btn span{display:none}.read-btn{min-width:40px;padding:0 10px}}
/* reading mode: warm paper, dark ink, bigger calmer text */
html.reading body{background:#F3EEE5}
html.reading main .article{color:#1d1b19}
html.reading .article h1,html.reading .article .body h2,html.reading .article .body h3{color:#141210}
html.reading .article .body{color:#2b2825;font-size:19.5px;line-height:1.95}
html.reading .article .lede{color:#1d1b19}
html.reading .article .crumbs,html.reading .article .crumbs a,html.reading .article .label{color:#6b655d}
html.reading .article .body a{color:#B5170F}
html.reading .article .body ul.toc{background:#EAE3D7;border-color:#d8cfc0}
html.reading .article .body ul.toc a{color:#1d1b19}
html.reading .article .end{background:#EAE3D7;border-color:#d8cfc0}
html.reading .article .end p{color:#141210}
html.reading .post-faq h3{color:#141210}
html.reading .sec-vis,html.reading .cover-art{border-color:#d8cfc0}
html.reading main + section.block{background:#0A0A0A}
/* section photos: brand mood (darker, warm red cast) */
.sec-vis img{filter:grayscale(.35) brightness(.82) contrast(1.08) sepia(.12)}
.sec-vis::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,41,31,.16),transparent 55%);mix-blend-mode:soft-light;pointer-events:none}
.sec-vis .sv-credit{position:absolute;bottom:8px;inset-inline-end:12px;z-index:2;font-size:11px;color:rgba(242,238,230,.7);font-family:"IBM Plex Sans Arabic",sans-serif;direction:rtl}
.sec-vis.r .sv-credit{right:12px;left:auto}.sec-vis.l .sv-credit{left:12px;right:auto}
.sec-vis .sv-credit a{color:inherit;text-decoration:none}
.sec-vis .sv-credit a:hover{color:#fff;text-decoration:underline}

/* clients hanging on our hooks */
.clients .head{text-align:center;margin-bottom:0}
.clients{padding-top:clamp(56px,7vw,96px)}
.cl-row{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:0 clamp(20px,4vw,56px)}
.cl{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:210px;transform-origin:50% 0;animation:clSwing 5.5s ease-in-out var(--d) infinite}
.cl-hang{position:relative;display:block;width:62px;height:104px;margin-top:clamp(56px,7vw,96px);color:rgba(242,238,230,.7)}
.cl-line{position:absolute;bottom:calc(100% - 3px);left:calc(54% - 1px);width:1.5px;height:clamp(56px,7vw,96px);background:linear-gradient(180deg,rgba(242,238,230,0),rgba(242,238,230,.5))}
.cl-hk{position:absolute;top:0;left:0;width:62px;height:auto;filter:drop-shadow(0 0 10px rgba(232,41,31,.45))}
.cl-front{clip-path:inset(69% 0 0 0);filter:none}
.cl-cord{position:absolute;top:43px;left:50%;width:120px;height:61px;margin-left:-60px;overflow:visible}
.cl-logo{display:flex;align-items:flex-start;justify-content:center;width:100%;height:calc(clamp(70px,7vw,88px) * var(--s,1))}
.cl-logo img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:50% 0;filter:brightness(0) invert(1) sepia(.18) brightness(.96);opacity:.94;transition:filter .4s,opacity .4s}
.cl:hover .cl-logo img{filter:none;opacity:1}
@keyframes clSwing{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@media (prefers-reduced-motion:reduce){.cl{animation:none}}
@media (max-width:600px){.cl-row{grid-template-columns:repeat(2,1fr);gap:0 14px}.cl-logo{height:calc(60px * var(--s,1))}.cl-hang{transform:scale(.85);transform-origin:50% 0;margin-bottom:-14px}}

/* hero photo: light reaches the top edge under the menu */
.hero-bg.catch .hero-media{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 80%,transparent)}
/* red gradient words: give the text box room so Arabic dots under the letters are not cut */
h2 em,.hero h1 em{padding:.12em .06em .3em;margin:-.12em -.06em -.3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* second row: shorter line so it doesn't run into the logos above */
.cl{--lh:clamp(56px,7vw,96px)}
.cl-hang{margin-top:var(--lh)}.cl-line{height:var(--lh)}
@media (min-width:601px){.cl:nth-child(n+4){--lh:44px}}
@media (max-width:600px){.cl:nth-child(n+3){--lh:34px}}
/* call button: sits right above the WhatsApp button, calls straight away */
.call-float{position:fixed;z-index:55;bottom:calc(86px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(232,41,31,.35);transition:transform .2s}
.call-float svg{width:24px;height:24px}
.call-float:hover{transform:scale(1.06)}
.social .ic{width:22px;height:22px;flex:none}
.call-float{inset-inline-end:max(20px,env(safe-area-inset-right,0px))}
html[dir="rtl"] .call-float{inset-inline-end:auto;inset-inline-start:max(20px,env(safe-area-inset-left,0px))}