/* Case study pages. Works in both directions; all UI colour comes from the site's design tokens below. */

/* Tokens mirror the live site's design system (dark theme): page #0B0B0B, surfaces #151515/#1C1C1C,
   accent #039900 (hover #5EBE5C), text #E3E3E3, Cairo everywhere, 18px controls, 26px cards. */
:root{
  color-scheme: dark;
  --ink:#0B0B0B; --ink-2:#151515; --surface:#151515; --surface-alt:#1C1C1C; --elevated:#262626;
  --line:rgba(245,243,239,.10); --line-2:rgba(245,243,239,.20);
  --mist:#E3E3E3; --soft:rgba(227,227,227,.78); --moss:rgba(227,227,227,.55);
  --accent:#039900; --accent-hover:#5EBE5C; --accent-ink:#0B0B0B; --accent-line:rgba(3,153,0,.3);
  --display:'Cairo',system-ui,sans-serif;
  --body:'Cairo',system-ui,sans-serif;
  --mono:'Cairo',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
  --rc:18px; --rcard:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:124px}
html, body{overflow-x:clip}
body{margin:0; background:var(--ink); color:var(--mist); font-family:var(--body); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; height:auto}
button{font:inherit; color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
b{font-weight:600; color:var(--mist)}

.ambient{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(50% 40% at 85% 0%, rgba(3,153,0,.10), transparent 70%), radial-gradient(40% 35% at 5% 100%, rgba(3,153,0,.06), transparent 70%), var(--ink);}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{max-width:1280px; margin-inline:auto; padding-inline:var(--gutter)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); background:rgba(11,11,11,.6); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:18px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand img{height:40px; width:auto}
.site-links{display:flex; gap:2px; margin-inline-start:auto}
.site-links a, .foot-links a{white-space:nowrap; text-decoration:none; color:var(--soft); font-size:14px; padding:7px 12px; border-radius:999px; transition:color .3s, background .3s}
.site-links a:hover, .site-links a.on{color:var(--mist); background:rgba(227,227,227,.08)}
.site-links a.on{color:var(--accent)}
.subnav{border-top:1px solid var(--line); background:rgba(11,11,11,.35)}
.subnav .wrap{min-height:48px; gap:14px}
.sub-back{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--moss); font-size:13.5px; flex:none; transition:color .3s}
.sub-back:hover{color:var(--mist)}
.sub-back svg{width:16px; height:16px}
html[dir="rtl"] .sub-back svg{transform:scaleX(-1)}
.sub-title{flex:none; font-family:var(--display); font-weight:600; font-size:14.5px; padding-inline-start:14px; border-inline-start:1px solid var(--line-2); display:flex; align-items:baseline; gap:8px; white-space:nowrap}
.sub-title small{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:400}
.nav-links{display:flex; gap:2px; margin-inline-start:auto; overflow-x:auto; scrollbar-width:none; min-width:0}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{white-space:nowrap; text-decoration:none; color:var(--moss); font-size:13.5px; padding:6px 12px; border-radius:999px; transition:color .3s, background .3s}
.nav-links a:hover,.nav-links a.on{color:var(--mist); background:rgba(227,227,227,.08)}
.nav-lang{flex:none; text-decoration:none; font-size:13.5px; color:var(--moss); padding:7px 10px}
.nav-lang:hover{color:var(--mist)}
.nav-cta{flex:none; text-decoration:none; font-size:14px; font-weight:600; padding:9px 20px; border-radius:var(--rc); background:var(--accent); color:var(--accent-ink); transition:background .25s}
.nav-cta:hover{background:var(--accent-hover)}
.nav-menu{display:none; flex:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px}
.nav-menu i{display:block; width:16px; height:1.5px; background:var(--mist); transition:transform .3s, opacity .3s}
.nav.menu-open .nav-menu i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.menu-open .nav-menu i:nth-child(2){opacity:0}
.nav.menu-open .nav-menu i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-drawer{display:none; border-top:1px solid var(--line)}
.nav-drawer .wrap{display:flex; flex-direction:column; padding-block:8px 14px}
.nav-drawer a{text-decoration:none; color:var(--soft); padding:11px 4px; border-bottom:1px solid var(--line); font-size:15.5px}
.nav-drawer a.on{color:var(--accent)}
.nav-progress{position:absolute; inset-inline-start:0; bottom:-1px; height:2px; width:0; background:var(--accent); transition:width .15s linear}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); direction:ltr; unicode-bidi:isolate; display:inline-block}
.kicker{display:flex; align-items:center; gap:12px; color:var(--moss); font-size:14px; margin-bottom:10px}
.kicker i{width:34px; height:1px; background:currentColor; display:block}
.sec-title{font-family:var(--display); font-weight:600; font-size:clamp(34px,5.4vw,76px); line-height:1.04; margin:0; letter-spacing:-.01em; text-wrap:balance}
.sec-title small{display:block; font-family:var(--mono); font-size:clamp(12px,1vw,14px); letter-spacing:.2em; font-weight:400; color:var(--accent); margin-top:14px; text-transform:uppercase}
html[lang="ar"] .sec-title small{direction:ltr; text-align:right}
.sec-lede{color:var(--soft); max-width:62ch; margin-top:18px; font-size:clamp(15.5px,1.3vw,17.5px)}
.sec-lede p{margin:0 0 12px}
.sec-head{margin-bottom:clamp(26px,4vw,48px)}
.cs-sec{position:relative; padding-block:clamp(72px,10vw,140px) 0}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line-2); background:rgba(227,227,227,.04); border-radius:999px; padding:7px 14px; font-size:14px; cursor:pointer; transition:all .3s; line-height:1.4}
.chip:hover{border-color:var(--mist)}
.chip.on{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600}
.chip.is-static{cursor:default}
.chip span{opacity:.6; font-family:var(--mono); font-size:12px}
.specs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line-2); margin:0}
.specs div{padding:12px 0; border-bottom:1px solid var(--line)}
.specs div:nth-child(odd){padding-inline-end:16px}
.specs dt{font-size:12.5px; color:var(--moss)}
.specs dd{margin:0; font-weight:500}
.brand-mark{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--accent); color:var(--accent-ink); font-size:14px; font-weight:700; font-family:var(--display)}
.swatches{display:flex; gap:10px; flex-wrap:wrap}
.sw{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px; color:var(--moss); direction:ltr; background:none; border:0; padding:0; cursor:copy; align-items:flex-start}
.sw i{width:52px; height:52px; border-radius:14px; display:block; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 24px -12px rgba(0,0,0,.8); transition:transform .3s var(--ease)}
.sw:hover i{transform:translateY(-3px)}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; min-height:48px; padding:12px 22px; border-radius:var(--rc); border:1px solid rgba(227,227,227,.2); transition:all .25s}
.btn:hover{border-color:rgba(227,227,227,.4); background:var(--surface-alt)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn svg{width:18px; height:18px}
html[dir="rtl"] .btn svg, html[dir="rtl"] .pillar-go svg, html[dir="rtl"] .next-proj i svg{transform:scaleX(-1)}
.cf-btn{width:48px; height:48px; border-radius:50%; border:1px solid var(--line-2); background:rgba(21,21,21,.65); cursor:pointer; display:grid; place-items:center; transition:background .3s, border-color .3s, transform .3s}
.cf-btn:hover{background:rgba(227,227,227,.1); border-color:var(--mist)}
.cf-btn:active{transform:scale(.94)}
.cf-btn svg{width:18px; height:18px}
html[dir="rtl"] .cf-btn[data-d] svg, html[dir="rtl"] .cn-prev svg, html[dir="rtl"] .cn-next svg, html[dir="rtl"] .lb .prev svg, html[dir="rtl"] .lb .next svg{transform:scaleX(-1)}

/* ---------- hero + ring ---------- */
.cs-hero{position:relative; overflow:hidden; padding-block:clamp(40px,7vw,90px) clamp(20px,4vw,50px)}
.cs-hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(20px,4vw,60px); align-items:center}
.cs-hero h1{font-family:var(--display); font-weight:600; font-size:clamp(40px,5.8vw,86px); line-height:1.02; margin:18px 0 22px; letter-spacing:-.015em; text-wrap:balance}
.cs-hero h1 em{font-style:normal; display:block; color:var(--accent); padding-bottom:.08em}
.lede{font-size:clamp(16px,1.45vw,19px); color:var(--soft); max-width:44ch; margin:0 0 30px; font-weight:300}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; max-width:560px}
.stat{background:rgba(21,21,21,.78); padding:16px 14px}
.stat b{display:block; font-family:var(--display); font-size:clamp(24px,2.6vw,34px); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.stat small{color:var(--moss); font-size:12.5px; line-height:1.4; display:block; margin-top:4px}
.ring-stage{position:relative; height:clamp(360px,44vw,560px); perspective:1500px; perspective-origin:50% 38%}
.ring-tilt{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s var(--ease)}
.ring{--cw:clamp(104px,12vw,168px); --ch:calc(var(--cw) * 1.25); --r:calc(var(--cw) * var(--n) * .18 + 40px);
  position:absolute; left:50%; top:46%; width:var(--cw); height:var(--ch); margin-left:calc(var(--cw) / -2); margin-top:calc(var(--ch) / -2);
  transform-style:preserve-3d; animation:spin 50s linear infinite}
.ring.is-wide{--cw:clamp(170px,19vw,270px); --ch:calc(var(--cw) * .5625); --r:calc(var(--cw) * var(--n) * .17 + 30px)}
.ring-stage:hover .ring, .ring.off{animation-play-state:paused}
.ring figure{position:absolute; inset:0; margin:0; border-radius:12px; overflow:hidden; cursor:zoom-in;
  transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08)}
.ring figure img{width:100%; height:100%; object-fit:cover}
.ring figure::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(255,255,255,.2), transparent 35%)}
.ring-floor{position:absolute; left:50%; top:78%; width:78%; height:120px; transform:translateX(-50%) rotateX(80deg); background:radial-gradient(closest-side, rgba(3,153,0,.35), transparent); filter:blur(8px); opacity:.8}
@keyframes spin{to{transform:rotateY(-360deg)}}

/* ---------- overview ---------- */
.ov-top{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(28px,4vw,52px)}
.ov-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px)}
.ov-card{position:relative; padding:clamp(22px,2.4vw,32px); border-radius:var(--rcard); border:1px solid var(--line); background:linear-gradient(160deg, rgba(227,227,227,.06), rgba(227,227,227,.015))}
.ov-card h3{font-family:var(--display); font-size:clamp(20px,1.8vw,24px); margin:14px 0 10px; line-height:1.25}
.ov-card p{color:var(--soft); margin:0 0 12px; font-size:15.5px}
.ov-n{font-family:var(--mono); font-size:13px; color:var(--accent)}
.ov-services{margin-top:26px}

/* ---------- pillars (bento) ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
.pillar{position:relative; display:flex; flex-direction:column; text-align:start; border-radius:var(--rcard); overflow:hidden; border:1px solid var(--line); background:rgba(21,21,21,.6); padding:0; cursor:pointer; transition:transform .5s var(--ease), border-color .4s}
.pillar:hover{transform:translateY(-6px); border-color:var(--accent-line); background:var(--surface-alt)}
.pillar-img{display:block; aspect-ratio:4/5; overflow:hidden}
.pillar-img img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.pillar:hover .pillar-img img{transform:scale(1.06)}
.pillar-body{display:flex; flex-direction:column; gap:6px; padding:18px 18px 22px; position:relative}
.pillar-body small{font-family:var(--mono); color:var(--accent-hover); font-size:12px; letter-spacing:.08em}
.pillar-body b{font-family:var(--display); font-size:clamp(19px,1.6vw,23px); line-height:1.25}
.pillar-body > span{color:var(--soft); font-size:14.5px; line-height:1.6}
.pillar-go{position:absolute; inset-inline-end:16px; top:-24px; width:48px; height:48px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(3,153,0,.6)}
.pillar-go svg{width:20px; height:20px}

/* ---------- coverflow ---------- */
.c-head{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(24px,4vw,44px)}
.cf{--cw:clamp(210px,31vw,380px); position:relative}
.cf-stage{position:relative; height:calc(var(--cw) * 1.25 + 70px); perspective:1600px; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab}
.cf-stage:active{cursor:grabbing}
.cf-item{position:absolute; left:50%; top:50%; width:var(--cw); aspect-ratio:4/5; margin:0; transition:transform .75s var(--ease), opacity .6s, filter .6s; transform-style:preserve-3d}
.cf-item .card{position:absolute; inset:0; border-radius:16px; overflow:hidden; background:#111; box-shadow:0 50px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08)}
.cf-item img{width:100%; height:100%; object-fit:cover; pointer-events:none}
.cf-item .card::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 32%, transparent 70%, rgba(255,255,255,.05))}
.cf-item.is-center .card{box-shadow:0 60px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14), 0 0 90px -30px rgba(3,153,0,.45)}
.cf-bar{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:6px}
.cf-count{font-family:var(--mono); font-size:14px; min-width:88px; text-align:center; direction:ltr; font-variant-numeric:tabular-nums; color:var(--moss)}
.cf-count b{color:var(--mist); font-weight:500}
.cf-caption{text-align:center; min-height:56px; margin-top:14px; padding-inline:var(--gutter)}
.cf-caption strong{display:block; font-family:var(--display); font-weight:700; font-size:clamp(18px,1.8vw,22px)}
.cf-caption span{color:var(--moss); font-size:15px}
.c-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); margin-top:clamp(36px,5vw,64px)}
.c-body h3{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--accent); margin:0 0 10px}
.c-body p{margin:0 0 22px; color:var(--soft); max-width:62ch}
.cf-live{margin-bottom:22px}
.cf-live-t{font-family:var(--display)!important; font-size:clamp(22px,2vw,28px)!important; color:var(--mist)!important; margin:0 0 6px!important; letter-spacing:0!important}
.cf-live-n{min-height:1.8em}
.caption-card{position:relative; border-radius:var(--rcard); padding:22px 22px 18px; background:linear-gradient(160deg, rgba(227,227,227,.07), rgba(227,227,227,.02)); border:1px solid var(--line); margin-top:18px}
.caption-card .ig{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.caption-card .ig .brand-mark{width:34px; height:34px}
.caption-card .ig b{font-size:14px; display:block; line-height:1.3}
.caption-card .ig small{color:var(--moss); font-size:12px}
.caption-card pre{margin:0; white-space:pre-wrap; font-family:var(--body); font-size:14.5px; line-height:1.85; color:var(--mist)}
.caption-card .tags{color:#8fc6ff; font-size:13.5px; margin-top:10px}
.caption-card .label{position:absolute; top:-11px; inset-inline-start:20px; font-size:12px; background:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:1px 12px; color:var(--moss)}

/* ---------- instagram post ---------- */
.ig-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:center}
.ig-wrap{perspective:1600px}
.ig-phone{--pw:clamp(280px,30vw,380px); width:var(--pw); margin-inline:auto; border-radius:46px; padding:12px; background:linear-gradient(145deg,#2b2b2b,#0e0e0e 45%,#1f1f1f);
  box-shadow:0 70px 120px -30px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 0 0 5px #050505; transform:rotateY(-10deg) rotateX(4deg); transition:transform 1s var(--ease)}
html[dir="rtl"] .ig-phone{transform:rotateY(10deg) rotateX(4deg)}
.ig-wrap:hover .ig-phone{transform:none}
.ig-screen{border-radius:36px; overflow:hidden; background:#000; padding-top:30px}
.ig-top{display:flex; align-items:center; gap:10px; padding:8px 12px}
.ig-top b{font-size:13px; display:block; line-height:1.2}
.ig-top small{font-size:11px; color:#9aa}
.ig-top .brand-mark{width:32px; height:32px; box-shadow:0 0 0 2px #000, 0 0 0 3.5px var(--accent)}
.ig-dots3{margin-inline-start:auto; color:#ccc; letter-spacing:1px}
.ig-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:4/5; direction:ltr}
.ig-track::-webkit-scrollbar{display:none}
.ig-slide{flex:0 0 100%; scroll-snap-align:center}
.ig-slide img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.ig-actions{display:flex; align-items:center; gap:14px; padding:10px 12px 4px; position:relative}
.ig-actions svg{width:23px; height:23px}
.ig-actions svg:last-child{margin-inline-start:auto}
.ig-pips{position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:4px}
.ig-pips i{width:6px; height:6px; border-radius:50%; background:#555; transition:background .3s, transform .3s}
.ig-pips i.on{background:#4aa3ff; transform:scale(1.15)}
.ig-cap{padding:4px 12px 18px; font-size:12.5px; line-height:1.6; color:#e8e8e8; max-height:120px; overflow:auto}
.ig-cap .tags{display:block; color:#8fc6ff; margin-top:4px}
.ig-hint{text-align:center; color:var(--moss); font-size:13.5px; margin-top:18px}
.ig-list{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px}
.ig-list button{width:100%; display:grid; grid-template-columns:auto 1fr; gap:0 12px; align-items:baseline; text-align:start; background:none; border:0; border-bottom:1px solid var(--line); padding:10px 2px; cursor:pointer; transition:color .3s}
.ig-list span{font-family:var(--mono); font-size:12px; color:var(--moss); grid-row:span 2}
.ig-list b{font-weight:600; font-size:15px; transition:color .3s}
.ig-list small{color:var(--moss); font-size:13px; grid-column:2; line-height:1.5}
.ig-list button:hover b, .ig-list button.on b{color:var(--accent)}
.ig-list button.on span{color:var(--accent)}

/* ---------- stack ---------- */
.htabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:clamp(20px,3vw,36px); scrollbar-width:thin}
.htab{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(227,227,227,.03); cursor:pointer; transition:all .35s}
.htab i{width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c)}
.htab b{font-weight:600; font-size:15px}
.htab small{font-family:var(--mono); font-size:11.5px; color:var(--moss); direction:ltr}
.htab:hover{border-color:var(--line-2)}
.htab.on{border-color:var(--accent-line); background:var(--surface-alt)}
.stack-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.stack{--cw:clamp(230px,30vw,400px); position:relative; width:var(--cw); aspect-ratio:4/5; margin-inline:auto; perspective:1400px; cursor:pointer}
.stack-in{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s ease}
.stack .s-card{position:absolute; inset:0; border-radius:18px; overflow:hidden; transition:transform .8s var(--ease), filter .6s; box-shadow:0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1)}
.stack .s-card img{width:100%; height:100%; object-fit:cover}
.stack .glare{position:absolute; inset:0; border-radius:18px; pointer-events:none; mix-blend-mode:soft-light; transform:translateZ(1px); background:radial-gradient(circle at var(--gx,30%) var(--gy,20%), rgba(255,255,255,.55), transparent 45%)}
.stack-hint{text-align:center; margin-top:22px; color:var(--moss); font-size:13.5px}
.stack-dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.stack-dots i{width:22px; height:3px; border-radius:3px; background:var(--line-2); transition:background .3s}
.stack-dots i.on{background:var(--accent)}
.h-info h3{font-family:var(--display); font-weight:600; font-size:clamp(32px,4.2vw,56px); line-height:1.05; margin:0 0 6px}
.h-info .en{font-family:var(--mono); letter-spacing:.12em; font-size:13px; color:var(--accent-hover); text-transform:uppercase}
.ta-badge{display:inline-flex; align-items:baseline; gap:8px; margin:18px 0; padding:8px 16px; border-radius:var(--rc); background:var(--surface-alt); border:1px solid var(--accent-line)}
.ta-badge b{font-family:var(--display); font-size:24px; font-weight:800; font-variant-numeric:tabular-nums}
.ta-badge span{font-family:var(--mono); font-size:12px; color:var(--moss)}
.h-info p{color:var(--soft); margin:0 0 18px; max-width:52ch}
.h-info .design-note{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:14.5px; color:var(--moss)}
.ta{margin-top:clamp(48px,6vw,80px); padding:clamp(20px,3vw,32px); border-radius:var(--rcard); border:1px solid var(--line); background:var(--surface)}
.ta-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 30px; align-items:end; margin-bottom:26px}
.ta-head h3{font-family:var(--display); margin:0; font-size:clamp(20px,2vw,26px)}
.ta-head p{margin:0; color:var(--moss); max-width:60ch; font-size:14.5px}
.ta-scale{position:relative; direction:ltr; height:160px; margin-inline:30px}
.ta-track{position:absolute; left:0; right:0; top:102px; height:6px; border-radius:6px; background:linear-gradient(90deg, #f6e1a8, #f2b63d 45%, #b8641e 80%, #6b2d0c)}
.ta-tick{position:absolute; top:116px; transform:translateX(-50%); font-family:var(--mono); font-size:12px; color:var(--moss)}
.ta-pin{position:absolute; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; cursor:pointer; background:none; border:0; padding:0}
.ta-pin span{font-size:12.5px; white-space:nowrap; padding:3px 10px; border-radius:999px; border:1px solid var(--line-2); background:rgba(11,11,11,.85); transition:all .3s}
html[lang="ar"] .ta-pin span{direction:rtl}
.ta-pin i{width:1px; background:var(--line-2); display:block}
.ta-pin em{width:14px; height:14px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px rgba(11,11,11,.9), 0 0 16px var(--c)}
.ta-pin.on span{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600}

/* ---------- timeline ---------- */
.tl{position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; padding-bottom:18px; cursor:grab}
.tl.dragging{cursor:grabbing; user-select:none}
.tl-track{display:flex; gap:clamp(16px,2vw,26px); padding-inline:max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))); width:max-content; position:relative}
.tl-line{position:absolute; inset-inline:0; top:31px; height:1px; background:linear-gradient(90deg, transparent, var(--line-2) 10%, var(--line-2) 90%, transparent)}
.tl-card{width:clamp(270px,26vw,340px); flex:none}
.tl-when{display:flex; align-items:baseline; gap:10px; margin-bottom:22px; position:relative; padding-top:4px}
.tl-when::before{content:""; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--ink), 0 0 18px rgba(3,153,0,.6); position:absolute; top:22px; inset-inline-start:0}
.tl-when b{font-family:var(--display); font-size:clamp(28px,3vw,40px); line-height:1.1; color:var(--accent-hover); padding-inline-start:26px}
.tl-when small{color:var(--moss); font-size:13px}
.tl-pics{position:relative; aspect-ratio:4/5; margin-bottom:18px}
.tl-pic{position:absolute; inset:0; border-radius:16px; overflow:hidden; box-shadow:0 30px 50px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); transition:transform .7s var(--ease);
  transform:translate(calc(var(--j) * 10px), calc(var(--j) * -8px)) rotate(calc(var(--j) * 2.2deg)); z-index:calc(10 - var(--j))}
.tl-pic img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.tl-card:hover .tl-pic{transform:translate(calc(var(--j) * 36%), calc(var(--j) * -4px)) rotate(calc(var(--j) * 4deg)) scale(.62); transform-origin:0 50%}
.tl-card h3{font-family:var(--display); font-size:21px; margin:0 0 6px; line-height:1.3}
.tl-card p{margin:0; color:var(--soft); font-size:14.5px}

/* ---------- palette ---------- */
.pals{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
.pal{display:grid; grid-template-columns:clamp(88px,9vw,120px) minmax(0,1fr); gap:18px; padding:14px; border-radius:var(--rcard); border:1px solid var(--line); background:rgba(21,21,21,.55); align-items:center}
.pal-img{border-radius:12px; overflow:hidden; aspect-ratio:4/5}
.pal-img img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.pal-body b{font-family:var(--display); font-size:18px; display:block}
.pal-body small{color:var(--moss); font-size:13px; display:block; margin-bottom:12px; line-height:1.5}
.pal-bar{display:flex; height:64px; border-radius:12px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); direction:ltr}
.pal-bar button{flex:1; border:0; cursor:copy; position:relative; transition:flex .5s var(--ease); padding:0}
.pal-bar button:hover{flex:2.2}
.pal-bar span{position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10.5px; padding:1px 6px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; opacity:0; transition:opacity .3s; white-space:nowrap}
.pal-bar button:hover span{opacity:1}

/* ---------- phones + flip ---------- */
.phones-grid, .flip-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.flip-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:clamp(20px,4vw,40px)}
.phones{position:relative; display:flex; justify-content:center; align-items:center; perspective:1600px; min-height:clamp(440px,52vw,640px)}
.phone{--pw:clamp(170px,19vw,250px); position:relative; width:var(--pw); aspect-ratio:9/19.5; border-radius:calc(var(--pw) * .16); padding:calc(var(--pw) * .04);
  background:linear-gradient(145deg,#2b2b2b,#0e0e0e 45%,#1f1f1f); box-shadow:0 60px 100px -30px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 0 0 5px #050505; transition:transform 1s var(--ease)}
.phone .screen{position:relative; width:100%; height:100%; border-radius:calc(var(--pw) * .125); overflow:hidden; background:#000}
.phone .screen img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.phone .island{position:absolute; top:calc(var(--pw) * .06); left:50%; width:30%; height:calc(var(--pw) * .085); transform:translateX(-50%); border-radius:999px; background:#000; z-index:2}
.phone .bars{position:absolute; top:calc(var(--pw) * .1); left:8%; right:8%; display:flex; gap:3px; z-index:2}
.phone .bars i{flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.45)}
.phone .bars i:first-child{background:#fff}
.phone.a{transform:rotateY(22deg) rotateZ(-3deg) translateZ(-40px) translateX(-14%)}
.phone.b{transform:rotateY(-22deg) rotateZ(3deg) translateZ(20px) translateX(14%); z-index:2}
.phones:hover .phone.a{transform:rotateY(10deg) rotateZ(-1deg) translateX(-6%)}
.phones:hover .phone.b{transform:rotateY(-10deg) rotateZ(1deg) translateX(6%)}
.phone-label{position:absolute; bottom:-34px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11.5px; color:var(--moss); white-space:nowrap}
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:22px 0}
.facts div{background:rgba(21,21,21,.8); padding:14px 16px}
.facts small{color:var(--moss); font-size:12.5px; display:block}
.facts b{font-weight:600}
.flip{--cw:clamp(230px,28vw,380px); width:var(--cw); aspect-ratio:4/5; perspective:1400px; margin-inline:auto; cursor:pointer}
.flip-in{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1.1s cubic-bezier(.3,.8,.2,1)}
.flip.back .flip-in{transform:rotateY(180deg)}
.flip-face{position:absolute; inset:0; border-radius:18px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1)}
.flip-face img{width:100%; height:100%; object-fit:cover}
.flip-face.back{transform:rotateY(180deg)}
.toggle{display:inline-flex; padding:4px; border-radius:999px; border:1px solid var(--line-2); background:rgba(227,227,227,.04); margin-top:22px}
.toggle button{border:0; background:none; padding:8px 18px; border-radius:999px; cursor:pointer; font-size:14px; color:var(--moss); transition:all .3s}
.toggle button.on{background:var(--accent); color:var(--accent-ink); font-weight:600}

/* ---------- marquee ---------- */
.mq{display:grid; gap:14px; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); direction:ltr}
.mq-row{display:flex; width:max-content}
.mq-track{display:flex; gap:14px; padding-inline-end:14px; animation:mq 70s linear infinite}
.mq-row.rev .mq-track{animation-direction:reverse; animation-duration:80s}
.mq:hover .mq-track{animation-play-state:paused}
.mq-cell{height:clamp(190px,22vw,300px); border-radius:14px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.mq-cell img{height:100%; width:100%; object-fit:cover; cursor:zoom-in; transition:transform .6s var(--ease)}
.mq-cell:hover img{transform:scale(1.05)}
@keyframes mq{to{transform:translateX(-100%)}}

/* ---------- feed ---------- */
.feed-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:center}
.feed-wrap{perspective:1600px}
.feed-phone{--pw:clamp(270px,30vw,370px); width:var(--pw); margin-inline:auto; border-radius:44px; padding:12px; aspect-ratio:9/19.5;
  background:linear-gradient(145deg,#2b2b2b,#0e0e0e 45%,#1f1f1f); box-shadow:0 70px 120px -30px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 0 0 5px #050505;
  transform:rotateX(8deg) rotateY(-14deg) rotateZ(2deg); transition:transform 1s var(--ease)}
.feed-wrap:hover .feed-phone{transform:none}
.feed-screen{height:100%; border-radius:34px; overflow:hidden; background:#000; display:flex; flex-direction:column}
.feed-top{padding:38px 14px 10px; display:flex; align-items:center; gap:12px}
.feed-top .brand-mark{width:54px; height:54px; font-size:22px; box-shadow:0 0 0 2px #000, 0 0 0 4px var(--accent)}
.feed-top b{display:block; font-size:14px; line-height:1.3}
.feed-top small{color:#9aa; font-size:11px; font-family:var(--mono)}
.feed-tabs{display:flex; justify-content:center; padding:6px 0; border-top:1px solid #222; border-bottom:1px solid #fff; margin:0 0 2px}
.feed-tabs svg{width:18px; height:18px}
.feed-cells{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; overflow:hidden; flex:1; align-content:start; direction:ltr}
.feed-cells img{aspect-ratio:4/5; object-fit:cover; width:100%; cursor:zoom-in}

/* ---------- gallery ---------- */
.g-filters{margin-bottom:26px}
.g-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(150px,17vw,220px),1fr)); gap:10px; grid-auto-flow:dense}
.g-cell{margin:0; border-radius:12px; overflow:hidden; aspect-ratio:4/5; background:#151515; transition:opacity .4s, transform .5s var(--ease)}
.g-cell.wide{grid-column:span 2; aspect-ratio:16/9.6}
.g-cell img{width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:transform .7s var(--ease)}
.g-cell:hover img{transform:scale(1.05)}
.g-cell.hide{display:none}

/* ---------- compare ---------- */
.cmp-grid, .lp-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.cmp{--p:50%; position:relative; width:min(100%,460px); margin-inline:auto; border-radius:20px; overflow:hidden; box-shadow:0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); user-select:none; direction:ltr}
.cmp-img{position:absolute; inset:0}
.cmp-img img{width:100%; height:100%; object-fit:cover}
.cmp-top{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp-handle{position:absolute; top:0; bottom:0; left:var(--p); width:2px; background:#fff; transform:translateX(-1px); pointer-events:none; box-shadow:0 0 20px rgba(0,0,0,.6)}
.cmp-handle span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; color:#111; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.cmp-handle svg{width:16px; height:16px}
.cmp input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.cmp-tag{position:absolute; top:14px; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); color:#fff; pointer-events:none}
.cmp-tag.start{left:14px}
.cmp-tag.end{right:14px}
.cmp-hint{color:var(--moss); font-size:13.5px; margin:14px 0 18px; display:flex; align-items:center; gap:8px}
.cmp-hint::before{content:""; width:22px; height:1px; background:currentColor}

/* ---------- loupe ---------- */
.lp{position:relative; width:min(100%,480px); margin-inline:auto; border-radius:20px; overflow:hidden; box-shadow:0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); cursor:none}
.lp > img{width:100%; height:100%; object-fit:cover}
.lp-lens{position:absolute; width:170px; height:170px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .25s; background-repeat:no-repeat; box-shadow:0 0 0 3px #fff, 0 20px 50px rgba(0,0,0,.6); transform:translate(-50%,-50%)}
.lp.on .lp-lens{opacity:1}
.lp-pt{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:0; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:13px; cursor:pointer; box-shadow:0 0 0 6px rgba(3,153,0,.3); animation:pulse 2.4s infinite}
.lp-pt.on{background:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(3,153,0,.1)}}
.lp-notes{list-style:none; padding:0; margin:0; display:grid; gap:4px}
.lp-notes li{display:grid; grid-template-columns:32px 1fr; gap:12px; padding:12px; border-radius:14px; transition:background .3s}
.lp-notes li.on{background:rgba(227,227,227,.06)}
.lp-notes span{width:28px; height:28px; border-radius:50%; background:rgba(3,153,0,.2); color:var(--accent-hover); display:grid; place-items:center; font-size:13px; font-weight:700}
.lp-notes b{display:block; margin-bottom:2px}
.lp-notes p{margin:0; color:var(--soft); font-size:14.5px}

/* ---------- cinema ---------- */
.cn-stage{position:relative; max-width:1400px; margin-inline:auto; aspect-ratio:16/9; overflow:hidden; border-radius:clamp(0px,2vw,24px)}
.cn-slide{position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.06); transition:opacity .9s ease, transform 1.4s var(--ease)}
.cn-slide.on{opacity:1; transform:none; z-index:1}
.cn-slide img{width:100%; height:100%; object-fit:cover; cursor:zoom-in}
.cn-prev, .cn-next{position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(11,11,11,.55); backdrop-filter:blur(8px)}
.cn-prev{inset-inline-start:clamp(10px,2vw,24px)}
.cn-next{inset-inline-end:clamp(10px,2vw,24px)}
html[dir="rtl"] .cn-prev svg{transform:scaleX(-1)}
.cn-cap{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; margin-top:26px}
.cn-count{font-family:var(--mono); font-size:14px; color:var(--moss); direction:ltr; padding-top:6px}
.cn-count b{color:var(--mist); font-size:28px; font-family:var(--display)}
.cn-cap strong{display:block; font-family:var(--display); font-size:clamp(22px,2.4vw,32px); line-height:1.2}
.cn-cap span{color:var(--accent); font-size:14px}
.cn-cap p{color:var(--soft); margin:8px 0 0; max-width:70ch}
.cn-thumbs{display:flex; gap:10px; margin-top:22px; overflow-x:auto; scrollbar-width:thin; padding-bottom:6px}
.cn-thumbs button{flex:0 0 clamp(120px,13vw,170px); border:0; padding:0; background:none; cursor:pointer; text-align:start; opacity:.5; transition:opacity .3s}
.cn-thumbs button.on, .cn-thumbs button:hover{opacity:1}
.cn-thumbs img{aspect-ratio:16/9; object-fit:cover; width:100%; border-radius:8px; box-shadow:0 0 0 1px var(--line-2)}
.cn-thumbs button.on img{box-shadow:0 0 0 2px var(--accent)}
.cn-thumbs span{display:block; font-size:12.5px; color:var(--moss); margin-top:6px; line-height:1.4}

/* ---------- brands list ---------- */
.br-wrap{position:relative}
.br-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2)}
.br-row{border-bottom:1px solid var(--line)}
.br-row > button{width:100%; display:grid; grid-template-columns:48px minmax(0,1.3fr) minmax(0,1fr) auto; gap:16px; align-items:baseline; padding:clamp(16px,2vw,24px) 4px; background:none; border:0; text-align:start; cursor:pointer}
.br-n{font-family:var(--mono); font-size:13px; color:var(--moss)}
.br-row b{font-family:var(--display); font-size:clamp(22px,3vw,40px); line-height:1.15; transition:color .3s, transform .5s var(--ease); display:inline-block}
.br-row small{color:var(--moss); font-size:14.5px}
.br-row em{font-style:normal; font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.06em}
.br-row > button:hover b, .br-row.on b{color:var(--accent); transform:translateX(10px)}
html[dir="rtl"] .br-row > button:hover b, html[dir="rtl"] .br-row.on b{transform:translateX(-10px)}
.br-inline{display:none}
.br-float{position:fixed; left:0; top:0; width:clamp(300px,34vw,520px); pointer-events:none; z-index:30; opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity .3s, transform .4s var(--ease)}
.br-float.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.br-float img{border-radius:14px; box-shadow:0 40px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); width:100%}

/* ---------- quote ---------- */
.cs-quote{margin:0; padding-block:clamp(20px,4vw,40px); max-width:980px}
.cs-quote p{font-family:var(--display); font-weight:700; font-size:clamp(26px,3.6vw,50px); line-height:1.25; margin:0; text-wrap:balance}
.cs-quote p b{color:var(--accent-hover); font-weight:inherit}
.cs-quote footer{margin-top:18px; color:var(--moss); font-family:var(--mono); font-size:13px}

/* ---------- close ---------- */
.t-close{padding-bottom:clamp(60px,8vw,100px)}
.close-title{font-family:var(--display); font-weight:600; font-size:clamp(38px,6.6vw,92px); line-height:1.02; margin:14px 0 24px; text-wrap:balance}
.close-title em{font-style:normal; color:var(--accent-hover)}
.t-close p{color:var(--soft); max-width:62ch}
.deliver{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-top:36px}
.deliver div{background:rgba(21,21,21,.8); padding:20px}
.deliver b{font-family:var(--display); font-size:clamp(22px,2.4vw,30px); display:block; font-variant-numeric:tabular-nums}
.deliver small{color:var(--moss); font-size:13.5px}
.close-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.next-proj{display:grid; grid-template-columns:clamp(90px,10vw,130px) 1fr auto; gap:22px; align-items:center; margin-top:clamp(50px,7vw,90px); padding:16px; border-radius:var(--rcard); border:1px solid var(--line); text-decoration:none; background:rgba(21,21,21,.5); transition:border-color .4s, transform .5s var(--ease)}
.next-proj:hover{border-color:var(--accent); transform:translateY(-4px)}
.np-img{border-radius:14px; overflow:hidden; aspect-ratio:4/5}
.np-img img{width:100%; height:100%; object-fit:cover}
.next-proj small{display:block; color:var(--moss); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.next-proj b{font-family:var(--display); font-size:clamp(22px,3vw,38px); line-height:1.15}
.next-proj i{width:54px; height:54px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center}
.next-proj i svg{width:22px; height:22px}
.cs-foot{border-top:1px solid var(--line); padding-block:26px; color:var(--moss); font-size:13px}
.cs-foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px}
.foot-links{display:flex; flex-wrap:wrap; gap:2px}
.foot-links a{color:var(--moss); font-size:13px; padding:4px 10px}
.foot-links a:hover{color:var(--mist)}
.cs-foot .m{font-family:var(--mono); direction:ltr; unicode-bidi:isolate}

/* ---------- lightbox + toast ---------- */
.lb{position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(0,0,0,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:opacity .35s}
.lb.open{opacity:1; pointer-events:auto}
.lb figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px}
.lb img{max-height:82vh; max-width:min(92vw,1100px); width:auto; border-radius:14px; box-shadow:0 40px 120px rgba(0,0,0,.8); transform:scale(.96); transition:transform .45s var(--ease)}
.lb.open img{transform:none}
.lb figcaption{color:var(--soft); font-size:14px; text-align:center; max-width:80vw}
.lb .cf-btn{position:absolute; top:50%; transform:translateY(-50%)}
.lb .prev{inset-inline-start:clamp(10px,3vw,40px)}
.lb .next{inset-inline-end:clamp(10px,3vw,40px)}
.lb .x{top:clamp(12px,3vw,30px); transform:none; inset-inline-end:clamp(12px,3vw,30px)}
.lb .lb-count{position:absolute; bottom:clamp(14px,3vw,30px); left:50%; transform:translateX(-50%)}
.toast{position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); background:var(--accent); color:var(--accent-ink); padding:9px 18px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:all .35s var(--ease); z-index:120}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* reveal */
.rv{transition:transform 1s var(--ease), opacity 1s}
.js .rv.pre{transform:translateY(28px); opacity:.2}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-links{display:none}
  .nav-menu{display:flex}
  .nav.menu-open .nav-drawer{display:block}
  .brand{margin-inline-end:auto}
  .sub-title{display:none}
}
@media (max-width:900px){
  .cs-hero .wrap, .ov-top, .c-head, .c-body, .stack-grid, .phones-grid, .flip-grid, .feed-grid, .ig-grid, .cmp-grid, .lp-grid{grid-template-columns:minmax(0,1fr)}
  .ov-grid{grid-template-columns:minmax(0,1fr)}
  .pals{grid-template-columns:minmax(0,1fr)}
  .ring-stage{height:clamp(320px,80vw,460px)}
  .ring{--cw:clamp(96px,22vw,150px)}
  .ring.is-wide{--cw:clamp(150px,34vw,230px)}
  .deliver{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf{--cw:clamp(200px,58vw,340px)}
  .phones{min-height:clamp(380px,100vw,560px)}
  .phone{--pw:clamp(140px,38vw,220px)}
  .ig-list{grid-template-columns:minmax(0,1fr)}
  .br-row > button{grid-template-columns:36px minmax(0,1fr); row-gap:4px}
  .br-row small, .br-row em{grid-column:2}
  .br-row.on .br-inline{display:block; padding:0 0 18px}
  .br-inline img{border-radius:12px}
  .br-float{display:none}
  .cn-cap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specs{grid-template-columns:minmax(0,1fr)}
  .specs div:nth-child(odd){padding-inline-end:0}
  .sub-back{font-size:0; gap:0}
  .sub-back svg{width:20px; height:20px}
  .nav-cta{padding:7px 12px; font-size:12.5px}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .pillar{flex-direction:row}
  .pillar-img{width:38%; flex:none; aspect-ratio:auto}
  .pillar-go{display:none}
  .pal{grid-template-columns:76px minmax(0,1fr)}
  .next-proj{grid-template-columns:80px 1fr}
  .next-proj i{display:none}
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deliver{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lp{cursor:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- service & country pages (_cases/landing.php) ---------- */
.faq{display:grid; gap:12px; max-width:980px}
.faq-item{border:1px solid var(--line); border-radius:var(--rc); background:rgba(21,21,21,.5); transition:border-color .3s}
.faq-item[open]{border-color:var(--accent-line)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-family:var(--display); font-weight:600; font-size:clamp(17px,1.6vw,20px); line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:20px; height:20px; flex:none; color:var(--accent-hover); transition:transform .3s var(--ease)}
.faq-item[open] summary svg{transform:rotate(90deg)}
html[dir="rtl"] .faq-item summary svg{transform:scaleX(-1)}
html[dir="rtl"] .faq-item[open] summary svg{transform:scaleX(-1) rotate(90deg)}
.faq-a{padding:0 22px 18px; color:var(--soft)}
.faq-a p{margin:0 0 10px}

.pj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.pj-card{position:relative; display:grid; grid-template-rows:auto 1fr; border-radius:var(--rcard); border:1px solid var(--line); background:rgba(21,21,21,.5); overflow:hidden; text-decoration:none; transition:border-color .4s, transform .5s var(--ease)}
.pj-card:hover{border-color:var(--accent); transform:translateY(-4px)}
.pj-img{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--surface-alt)}
.pj-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.pj-card:hover .pj-img img{transform:scale(1.04)}
.pj-meta{display:grid; gap:4px; padding:16px 18px 20px; padding-inline-end:64px}
.pj-meta small{color:var(--moss); font-size:13px}
.pj-meta b{font-family:var(--display); font-size:19px; line-height:1.3}
.pj-meta em{font-style:normal; color:var(--soft); font-size:14.5px}
.pj-card > i{position:absolute; inset-inline-end:16px; bottom:18px; width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center}
.pj-card > i svg{width:18px; height:18px}
html[dir="rtl"] .pj-card > i svg, html[dir="rtl"] .ln-card i svg{transform:scaleX(-1)}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; counter-reset:none}
.st-item{display:grid; gap:12px; align-content:start; padding:clamp(20px,2.2vw,28px); border-radius:var(--rcard); border:1px solid var(--line); background:linear-gradient(160deg, rgba(227,227,227,.05), rgba(227,227,227,.01))}
.st-n{font-family:var(--display); font-weight:700; font-size:15px; color:var(--accent-hover); letter-spacing:.08em}
.st-item h3{font-family:var(--display); font-size:clamp(19px,1.7vw,22px); margin:0; line-height:1.3}
.st-item p{margin:0; color:var(--soft); font-size:15.5px}

.ln-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.ln-card{position:relative; display:grid; gap:6px; align-content:start; min-height:120px; padding:20px 22px; padding-inline-end:64px; border-radius:var(--rc); border:1px solid var(--line); background:rgba(21,21,21,.5); text-decoration:none; transition:border-color .4s, transform .5s var(--ease)}
.ln-card:hover{border-color:var(--accent); transform:translateY(-3px)}
.ln-card b{font-family:var(--display); font-size:19px; line-height:1.3}
.ln-card span{color:var(--soft); font-size:14.5px; line-height:1.6}
.ln-card i{position:absolute; inset-inline-end:18px; top:20px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--accent-hover); transition:background .3s, color .3s}
.ln-card:hover i{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.ln-card i svg{width:16px; height:16px}

.vc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.vc-card{margin:0; display:grid; gap:16px; align-content:space-between; padding:clamp(22px,2.4vw,30px); border-radius:var(--rcard); border:1px solid var(--line); background:rgba(21,21,21,.5)}
.vc-card blockquote{margin:0; font-size:16.5px; line-height:1.7}
.vc-card blockquote p{margin:0 0 8px}
.vc-card blockquote p:first-child::before{content:"“"; color:var(--accent-hover); font-family:var(--display); font-weight:700; margin-inline-end:4px}
.vc-card figcaption{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; border-top:1px solid var(--line); padding-top:14px}
.vc-card figcaption b{font-size:15px}
.vc-card figcaption span{color:var(--moss); font-size:14px}

/* pricing table with a CSS-only currency switch (_cases/landing.php cs_sec_pricing) */
.pr{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pr-radio{position:absolute; opacity:0; pointer-events:none}
.pr > label{cursor:pointer; border:1px solid var(--line-2); border-radius:999px; padding:6px 16px; font-size:14px; transition:all .25s}
.pr-radio:checked + label{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600}
.pr-radio:focus-visible + label{outline:2px solid var(--accent); outline-offset:3px}
.pr-body{flex:1 1 100%; display:grid; gap:18px; margin-top:14px}
.pr-group{border:1px solid var(--line); border-radius:var(--rcard); background:rgba(21,21,21,.5); padding:clamp(18px,2.4vw,28px)}
.pr-group h3{font-family:var(--display); font-size:clamp(19px,1.8vw,23px); margin:0 0 6px}
.pr-note{color:var(--moss); font-size:14px; margin:0 0 10px}
.pr-group ul{list-style:none; margin:0; padding:0; display:grid}
.pr-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
.pr-row:first-child{border-top:0}
.pr-row h4{margin:0; font-size:16.5px; font-weight:600}
.pr-row h4 em{font-style:normal; font-size:12px; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:1px 10px; margin-inline-start:6px}
.pr-row p{margin:4px 0 0; color:var(--soft); font-size:14.5px}
.pr-row.is-featured h4{color:var(--accent-hover)}
.pr-price{flex:none; text-align:end; font-family:var(--display); font-size:20px; white-space:nowrap}
.pr-v{display:none; font-weight:700}
.pr-foot{flex:1 1 100%; color:var(--moss); font-size:13.5px; margin:10px 0 0}
.pr:has(.pr-radio[data-c="SAR"]:checked) .pr-v[data-c="SAR"],
.pr:has(.pr-radio[data-c="KWD"]:checked) .pr-v[data-c="KWD"],
.pr:has(.pr-radio[data-c="AED"]:checked) .pr-v[data-c="AED"],
.pr:has(.pr-radio[data-c="EGP"]:checked) .pr-v[data-c="EGP"],
.pr:has(.pr-radio[data-c="USD"]:checked) .pr-v[data-c="USD"]{display:inline}
@media (max-width:560px){ .pr-row{flex-direction:column; align-items:flex-start} .pr-price{text-align:start} }