/* 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 #C8A45C (hover #D9C289), 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:#C8A45C; --accent-hover:#D9C289; --accent-ink:#0B0B0B; --accent-line:rgba(200,164,92,.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(200,164,92,.10), transparent 70%), radial-gradient(40% 35% at 5% 100%, rgba(200,164,92,.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; will-change:transform}
.ring.is-wide{--cw:clamp(170px,19vw,270px); --ch:calc(var(--cw) * .5625); --r:calc(var(--cw) * var(--n) * .17 + 30px)}
.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(200,164,92,.35), transparent); filter:blur(8px); opacity:.8}

/* ---------- 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(200,164,92,.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(200,164,92,.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(200,164,92,.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}
.g-grid.is-bento{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px}
.g-grid.is-bento .g-cell, .g-grid.is-even .g-cell{grid-column:auto; aspect-ratio:auto; border-radius:var(--rcard)}
.g-grid.is-bento .g-cell{aspect-ratio:16/10}
.g-grid.is-bento .g-cell:first-child{grid-row:span 2; aspect-ratio:auto; height:100%}
.g-grid.is-even{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.g-grid.is-even .g-cell{aspect-ratio:16/10}
.g-grid figcaption{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(200,164,92,.3); animation:pulse 2.4s infinite}
.lp-pt.on{background:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(200,164,92,.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(200,164,92,.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}
.cn-thumbs button img{opacity:.5; transition:opacity .3s}
.cn-thumbs button.on img, .cn-thumbs button:hover img{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(--soft); 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}
.yx-badge{display:inline-flex; align-items:center; border-radius:5px; overflow:hidden; text-decoration:none; direction:rtl; box-shadow:0 2px 6px rgba(0,0,0,.15)}
.yx-badge .yx-t{background:#1a1a1a; color:#cfcfcf; font-size:10px; font-weight:700; padding:4px 9px}
.yx-badge .yx-l{background:#0f0f10; display:inline-flex; align-items:center; padding:4px 10px}
.yx-badge img{height:18px; width:auto; display:block}

/* ---------- 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} }

/* ---------- film + reels (production case studies) ---------- */
.film-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(22px,3vw,40px)}
.film-grid.is-portrait{grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:center}
.film{margin:0; position:relative; border-radius:var(--rcard); overflow:hidden; border:1px solid var(--line); background:#000; box-shadow:0 40px 90px -40px rgba(200,164,92,.35)}
.film video{display:block; width:100%; height:auto; max-height:82vh; background:#000; object-fit:contain}
.film-grid.is-portrait .film{max-width:440px; justify-self:center; width:100%}
.film figcaption{padding:12px 18px; font-size:13.5px; color:var(--moss); border-top:1px solid var(--line); background:var(--surface)}
.film-head .facts{margin-top:22px}
.reels{display:flex; gap:clamp(14px,1.8vw,22px); overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.reels.is-single{justify-content:center}
.reel{margin:0; flex:0 0 clamp(220px,24vw,300px); scroll-snap-align:start; display:grid; gap:12px}
.reel video{width:100%; aspect-ratio:9 / 16; object-fit:cover; border-radius:28px; border:1px solid var(--line-2); background:#000; box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.reel figcaption{font-size:13.5px; line-height:1.6; color:var(--soft); display:flex; gap:10px; align-items:baseline}
.reel figcaption span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); flex:none}
@media (max-width:860px){
  .film-grid.is-portrait{grid-template-columns:minmax(0,1fr)}
  .reel{flex-basis:72vw}
}

/* ---------- header: identical to the React site header ---------- */
.nav{position:sticky; top:0; z-index:50; background:#171717; border-bottom:1px solid rgba(245,243,239,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:1660px; margin-inline:auto; padding:12px 18px}
@media (min-width:768px){.nav-row{padding-inline:28px}}
@media (min-width:1024px){.nav-row{padding-inline:86px}}
.nav .brand img{height:52px; width:auto; max-width:200px; object-fit:contain}
.nav .site-links{display:flex; align-items:center; gap:4px; margin:0}
.nav .site-links a{position:relative; padding:8px 16px; font-size:15px; font-weight:500; color:#F5F3EF; background:none; border-radius:0}
.nav .site-links a::after{content:""; position:absolute; bottom:4px; left:16px; right:16px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.nav .site-links a:hover{background:none; color:#F5F3EF}
.nav .site-links a:hover::after, .nav .site-links a.on::after{transform:scaleX(1)}
.nav .site-links a.on{color:#F5F3EF; background:none}
.nav-end{display:flex; align-items:center; gap:12px; flex:none}
.nav .nav-lang{display:inline-flex; align-items:center; justify-content:center; height:36px; min-width:38px; padding:0 9px; border-radius:18px; border:1px solid rgba(227,227,227,.1); background:rgba(227,227,227,.05); color:#E6E6E6; font-size:15px; font-weight:500; transition:border-color .3s, background .3s}
.nav .nav-lang:hover{border-color:rgba(200,164,92,.3); background:rgba(227,227,227,.1); color:#E6E6E6}
.nav .nav-cta{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:18px; font-size:15px; font-weight:500; letter-spacing:.01em}
.nav .nav-cta svg{width:16px; height:16px; transition:transform .3s}
.nav .nav-cta:hover svg{transform:translate(2px,-2px)}
html[dir="rtl"] .nav .nav-cta svg{transform:scaleX(-1)}
html[dir="rtl"] .nav .nav-cta:hover svg{transform:scaleX(-1) translate(2px,-2px)}
/* The project bar (back link + sections) slides in once the hero is scrolled past. */
.nav .subnav{max-height:0; overflow:hidden; opacity:0; border-top-color:transparent; transition:max-height .45s var(--ease), opacity .3s, border-color .3s}
.nav.sub-on .subnav{max-height:60px; opacity:1; border-top-color:var(--line)}
.nav-drawer .wrap a{color:#F5F3EF}
@media (max-width:1023px){
  .nav .site-links{display:none}
  .nav .nav-cta{display:none}
  .nav .nav-menu{display:flex}
  .nav.menu-open .nav-drawer{display:block}
  .nav .brand img{height:42px}
}
@media (min-width:1024px){.nav .site-links{display:flex} .nav .nav-menu{display:none} .nav .brand{margin-inline-end:0}}
.nav-row{line-height:1.5}
.nav .site-links{gap:4px}
.nav .site-links a{padding:8px 8.8px}
.nav .site-links a::after{left:8.8px; right:8.8px}
.nav .nav-cta{height:44.75px; padding:0 18px; gap:8px}
@media (max-width:1023px){.nav .nav-lang{display:none}}

/* ===== EPH metallic gold buttons: every solid accent button on the site ===== */
:is(a, button).bg-accent-300,
:is(a, button).ds-primary-button.bg-accent-300,
.nav-cta, .btn.primary, .gold-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #1B1305 !important;
  font-weight: 700 !important;
  background-color: #C9A04A !important;
  background-image: linear-gradient(115deg, #8C6420 0%, #D9B159 18%, #FFF0B3 34%, #D4A646 50%, #A97B26 66%, #F6DC8B 84%, #9A7024 100%) !important;
  background-size: 220% 100% !important;
  background-position: 0% 50%;
  border: 1px solid rgba(255, 228, 150, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, .75), inset 0 -2px 6px rgba(110, 72, 12, .45), 0 10px 30px -10px rgba(214, 168, 70, .75), 0 0 26px -8px rgba(245, 205, 110, .55) !important;
  text-shadow: 0 1px 0 rgba(255, 244, 210, .55);
  transition: background-position .9s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, transform .4s cubic-bezier(.22, 1, .36, 1), filter .4s !important;
}
:is(a, button).bg-accent-300::after,
.nav-cta::after, .btn.primary::after, .gold-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 48%, rgba(255, 250, 225, .35) 54%, transparent 62%);
  transform: translateX(-120%);
  animation: eph-gold-sheen 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
  mix-blend-mode: soft-light;
}
:is(a, button).bg-accent-300:hover,
.nav-cta:hover, .btn.primary:hover, .gold-btn:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  filter: saturate(1.15) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .9), inset 0 -2px 6px rgba(110, 72, 12, .4), 0 16px 40px -10px rgba(226, 178, 76, .9), 0 0 40px -6px rgba(255, 214, 120, .7) !important;
}
:is(a, button).bg-accent-300:disabled { filter: grayscale(.4) brightness(.8); transform: none; }
@keyframes eph-gold-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { :is(a, button).bg-accent-300::after, .nav-cta::after, .btn.primary::after, .gold-btn::after { animation: none; } }

/* Calmer type scale: headings sized like an editorial page, not a billboard. */
.sec-title{font-size:clamp(26px,3vw,42px); line-height:1.2; font-weight:600; letter-spacing:0}
.cs-hero h1{font-size:clamp(30px,3.6vw,52px); line-height:1.15; letter-spacing:0; margin:14px 0 18px}
.cs-hero h1 em{font-size:.72em; font-weight:500; margin-top:6px}
.close-title{font-size:clamp(28px,3.4vw,48px); line-height:1.2}
.cn-cap strong{font-size:clamp(18px,1.6vw,22px)}
html[lang="ar"]{--display:'Tajawal',system-ui,sans-serif; --body:'Tajawal',system-ui,sans-serif; --mono:'Tajawal',system-ui,sans-serif}
html[lang="ar"] .sec-title, html[lang="ar"] .cs-hero h1, html[lang="ar"] .close-title{line-height:1.45}

/* ---------- Light theme (html[data-theme="light"], set by theme.js from the visitor's choice) ---------- */
html[data-theme="light"]{
  color-scheme: light;
  --ink:#F5F3EF; --ink-2:#FFFFFF; --surface:#FFFFFF; --surface-alt:#EFEAE0; --elevated:#FFFFFF;
  --line:rgba(23,23,23,.10); --line-2:rgba(23,23,23,.20);
  --mist:#141414; --soft:rgba(20,20,20,.80); --moss:rgba(20,20,20,.62);
  --accent:#735518; --accent-hover:#5E4512; --accent-ink:#FFFFFF; --accent-line:rgba(115,85,24,.3);
}
html[data-theme="light"] .ambient{background:radial-gradient(50% 40% at 85% 0%, rgba(201,160,74,.14), transparent 70%), radial-gradient(40% 35% at 5% 100%, rgba(201,160,74,.08), transparent 70%), var(--ink)}
html[data-theme="light"] .grain{opacity:.02}
html[data-theme="light"] .nav{background:rgba(245,243,239,.92); border-bottom-color:rgba(23,23,23,.08)}
html[data-theme="light"] .nav .site-links a, html[data-theme="light"] .nav .site-links a:hover, html[data-theme="light"] .nav .site-links a.on{color:#2B2B2B}
html[data-theme="light"] .nav .nav-lang{color:#2B2B2B; border-color:rgba(23,23,23,.12); background:rgba(23,23,23,.04)}
html[data-theme="light"] .nav-menu i{background:#2B2B2B}
html[data-theme="light"] .nav-drawer .wrap a{color:#2B2B2B}
html[data-theme="light"] .subnav{background:rgba(245,243,239,.7)}
html[data-theme="light"] :is(.stat,.pillar,.pal,.facts div,.deliver div,.next-proj,.faq-item,.pj-card,.ln-card,.vc-card,.pr-group,.ov-card){background:#FFFFFF}
html[data-theme="light"] .cf-btn{background:rgba(255,255,255,.85); color:#141414; border-color:rgba(23,23,23,.15)}
html[data-theme="light"] .cn-prev, html[data-theme="light"] .cn-next{background:rgba(255,255,255,.8)}
html[data-theme="light"] .ta-pin span{background:rgba(255,255,255,.92)}
html[data-theme="light"] .film{box-shadow:0 40px 90px -45px rgba(140,106,34,.45)}
html[data-theme="light"] .reel video{border-color:rgba(23,23,23,.12); box-shadow:0 30px 60px -34px rgba(0,0,0,.35)}
html[data-theme="light"] .mq-cell{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
html[data-theme="light"] .lb{background:rgba(245,243,239,.97)}
html[data-theme="light"] .ring-floor{opacity:.5}

/* Theme toggle in the header */
.nav-theme{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:50%; border:1px solid rgba(227,227,227,.1); background:rgba(227,227,227,.05); color:#E6E6E6; font:500 13px/1 var(--body); cursor:pointer}
.nav-theme svg{width:15px; height:15px}
html[data-theme="light"] .nav-theme{color:#2B2B2B; border-color:rgba(23,23,23,.12); background:rgba(23,23,23,.04)}
.facts:has(> div:only-child){grid-template-columns:minmax(0,1fr)}

/* ---------- Header: the same floating glass capsule as the main site ---------- */
.nav{background:transparent; border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none; padding:12px 12px 0; pointer-events:none}
.nav > *{pointer-events:auto}
.nav-row{max-width:1240px; border-radius:999px; border:1px solid rgba(245,243,239,.09); background:rgba(23,23,23,.62); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); padding:8px; padding-inline-start:22px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset; transition:background .5s, box-shadow .5s}
.nav.sub-on .nav-row, .nav.scrolled .nav-row{background:rgba(23,23,23,.86); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -22px rgba(0,0,0,.65)}
.nav .brand img{height:44px}
.nav .site-links{gap:2px}
.nav .site-links a{padding:8px 16px; font-size:14px; border-radius:999px; color:rgba(245,243,239,.78); transition:color .3s, background .3s}
.nav .site-links a:hover{color:#F5F3EF; background:rgba(245,243,239,.06)}
.nav .site-links a.on{color:var(--accent); background:none}
.nav .site-links a::after{left:50%; right:auto; bottom:2px; width:4px; height:4px; border-radius:50%; transform:translate(-50%,3px); opacity:0; transition:opacity .3s, transform .3s}
.nav .site-links a:hover::after{transform:translate(-50%,3px); opacity:0}
.nav .site-links a.on::after{transform:translate(-50%,0); opacity:1}
.nav-end{gap:8px}
.nav .nav-lang{border-radius:999px}
.nav .nav-cta{height:40px; border-radius:999px; padding:0 18px; font-size:14px}
.nav .subnav{max-width:1240px; margin:8px auto 0; border-radius:18px; border:1px solid rgba(245,243,239,.08); background:rgba(23,23,23,.86); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
.nav-drawer{max-width:1240px; margin:8px auto 0; border-radius:22px; border:1px solid rgba(245,243,239,.08); background:rgba(23,23,23,.95)}
.nav-progress{display:none}
.nav-menu{border-radius:50%}
html[data-theme="light"] .nav-row{background:rgba(245,243,239,.72); border-color:rgba(23,23,23,.08); box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
html[data-theme="light"] .nav.sub-on .nav-row, html[data-theme="light"] .nav.scrolled .nav-row{background:rgba(245,243,239,.9); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 36px -24px rgba(0,0,0,.35)}
html[data-theme="light"] .nav .site-links a{color:rgba(23,23,23,.78)}
html[data-theme="light"] .nav .site-links a:hover{color:#171717; background:rgba(23,23,23,.05)}
html[data-theme="light"] .nav .site-links a.on{color:var(--accent)}
html[data-theme="light"] .nav .subnav, html[data-theme="light"] .nav-drawer{background:rgba(245,243,239,.92); border-color:rgba(23,23,23,.08)}
@media (max-width:767px){.nav{padding:10px 10px 0} .nav-row{padding-inline-start:16px} .nav .brand img{height:38px}}

/* ---------- Mobile menu: a side drawer, not a drop-down ---------- */
.nav-shade{display:none}
@media (max-width:1023px){
  .nav-shade{display:block; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s; pointer-events:auto}
  .nav .nav-drawer, .nav.menu-open .nav-drawer{display:flex}
  .nav-drawer{position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:61; width:min(86vw,360px); max-width:none; margin:0; flex-direction:column; gap:18px; padding:22px; overflow-y:auto; border:0; border-inline-start:1px solid rgba(200,164,92,.18); border-start-start-radius:28px; border-end-start-radius:28px; border-start-end-radius:0; border-end-end-radius:0; background:rgba(23,23,23,.98); box-shadow:0 30px 80px rgba(0,0,0,.5); transform:translateX(100%); visibility:hidden; transition:transform .5s var(--ease), visibility .5s; pointer-events:auto}
  html[dir="rtl"] .nav-drawer{transform:translateX(-100%)}
  .nav.menu-open .nav-shade{opacity:1; visibility:visible}
  .nav.menu-open .nav-drawer{transform:none; visibility:visible}
  .drawer-head{display:flex; align-items:center; justify-content:space-between}
  .drawer-head .brand img{height:40px; width:auto}
  .drawer-close{width:40px; height:40px; border-radius:50%; border:1px solid rgba(245,243,239,.12); background:none; color:#F5F3EF; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
  .drawer-close svg{width:18px; height:18px}
  .nav-drawer .wrap{display:flex; flex-direction:column; align-items:stretch; padding:0; margin:0; width:100%; max-width:none}
  .nav-drawer .drawer-head .brand{border:0; padding:0}
  .nav-drawer .wrap a{display:block; width:100%; text-align:start; padding:15px 2px; font-size:17px; font-weight:500; border-bottom:1px solid rgba(245,243,239,.06); border-radius:0}
  .nav-drawer .wrap a.on{color:var(--accent)}
  .nav-drawer .drawer-cta{display:inline-flex; justify-content:center; margin-top:auto; height:46px; border-radius:999px}
  html[data-theme="light"] .nav-drawer{background:rgba(245,243,239,.98); border-color:rgba(140,106,34,.2)}
  html[data-theme="light"] .drawer-close{color:#171717; border-color:rgba(23,23,23,.12)}
  html[data-theme="light"] .nav-drawer .wrap a{border-bottom-color:rgba(23,23,23,.08)}
}
html.menu-open [data-wa-float]{opacity:0; pointer-events:none}

/* The hero ring keeps its size; cs.js scales a ring down (--fit) only when it is wider than its column. */
.ring{scale:var(--fit,1)}
.cs-hero .wrap > .rv{position:relative; z-index:2}

/* ---------- Full site footer on project pages (mirrors the main site's footer) ---------- */
.cs-sitefoot{background:#111; color:#E6E6E6; padding-top:64px; margin-top:0}
.cs-sitefoot .sf-grid{display:grid; grid-template-columns:1.3fr 1fr 1.2fr .9fr 1.3fr; gap:36px}
.cs-sitefoot .sf-brand img{height:52px; width:auto; display:block}
.cs-sitefoot .sf-brand p{margin:18px 0 0; max-width:280px; font-size:14px; line-height:1.8; color:rgba(245,243,239,.8)}
.cs-sitefoot h4{margin:0 0 18px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#F5F3EF}
html[lang="ar"] .cs-sitefoot h4{letter-spacing:0}
.cs-sitefoot .sf-links{display:flex; flex-direction:column; gap:14px}
.cs-sitefoot .sf-links a{padding:0; font-size:14px; color:rgba(245,243,239,.82); text-decoration:none; background:none; border-radius:0; transition:color .3s}
.cs-sitefoot .sf-links a:hover, .cs-sitefoot .sf-links a.on{color:var(--accent); background:none}
.cs-sitefoot .sf-item{margin-bottom:12px}
.cs-sitefoot .sf-item span{display:block; font-size:12px; color:rgba(245,243,239,.6); margin-bottom:3px}
.cs-sitefoot .sf-item a{font-size:14px; color:#F5F3EF; text-decoration:none}
.cs-sitefoot .sf-item a:hover{color:var(--accent)}
.cs-sitefoot .sf-bottom{margin-top:56px; border-top:1px solid rgba(245,243,239,.08); padding-block:28px 28px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.cs-sitefoot .sf-bottom p{margin:0; font-size:13px; color:rgba(245,243,239,.75)}
html[data-theme="light"] .cs-sitefoot{background:#EDEAE3; color:#171717}
html[data-theme="light"] .cs-sitefoot .sf-brand p, html[data-theme="light"] .cs-sitefoot .sf-links a{color:rgba(23,23,23,.8)}
html[data-theme="light"] .cs-sitefoot h4, html[data-theme="light"] .cs-sitefoot .sf-item a{color:#171717}
html[data-theme="light"] .cs-sitefoot .sf-item span, html[data-theme="light"] .cs-sitefoot .sf-bottom p{color:rgba(23,23,23,.65)}
html[data-theme="light"] .cs-sitefoot .sf-bottom{border-top-color:rgba(23,23,23,.1)}
@media (max-width:1023px){.cs-sitefoot .sf-grid{grid-template-columns:1fr 1fr} .cs-sitefoot .sf-brand{grid-column:1/-1}}
@media (max-width:560px){.cs-sitefoot .sf-grid{grid-template-columns:1fr} .cs-sitefoot .sf-bottom{padding-bottom:90px}}

/* ---------- Behind the scenes with one or two clips: phone(s) + a strip of their stills ---------- */
.bts-stage{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); align-items:start}
.bts-phone{margin:0; display:grid; gap:12px}
.bts-phone video{width:100%; aspect-ratio:9 / 16; object-fit:cover; border-radius:26px; border:1px solid rgba(200,164,92,.35); background:#000; box-shadow:0 0 0 6px rgba(245,243,239,.03), 0 40px 80px -40px rgba(200,164,92,.45)}
.bts-phone figcaption{font-size:13.5px; line-height:1.6; color:var(--soft); display:flex; gap:10px; align-items:baseline}
.bts-phone figcaption span, .bts-still span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent)}
.bts-still{position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--line-2); aspect-ratio:9 / 16; background:#000}
.bts-still img{width:100%; height:100%; object-fit:cover; opacity:.82; transform:scale(1.02); transition:opacity .5s, transform 1.2s var(--ease)}
.bts-still:hover img{opacity:1; transform:scale(1.07)}
.bts-still::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); pointer-events:none}
.bts-still span{position:absolute; bottom:14px; inset-inline-start:16px; z-index:1}
.bts-1 .bts-still:nth-child(3){margin-top:clamp(24px,4vw,60px)}
.bts-1 .bts-still:nth-child(2), .bts-1 .bts-still:nth-child(4){margin-top:clamp(12px,2vw,28px)}
html[data-theme="light"] .bts-phone video{box-shadow:0 0 0 6px rgba(23,23,23,.03), 0 40px 80px -44px rgba(140,106,34,.35)}
@media (max-width:767px){
  .bts-stage{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px}
  .bts-phone, .bts-still{flex:0 0 62vw; scroll-snap-align:start; margin-top:0 !important}
}

/* Service pages: three stats, four overview cards and five steps fill their rows. */
.stats:has(> .stat:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.ov-grid:has(> .ov-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){.steps:has(> .st-item:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:900px){.ov-grid:has(> .ov-card:nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.stats:has(> .stat:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} .stats > .stat:nth-child(3):last-child{grid-column:1/-1}}
.pj-grid:has(> .pj-card:nth-child(3):last-child), .ln-grid:has(> .ln-card:nth-child(3):last-child){grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.crumbs{margin:0 0 18px}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13px; color:var(--mute, #8a8a8a)}
.crumbs li{display:inline-flex; align-items:center; gap:10px}
.crumbs li + li::before{content:"›"; color:var(--accent); opacity:.8}
html[dir="rtl"] .crumbs li + li::before{content:"‹"}
.crumbs a{color:inherit; text-decoration:none; transition:color .3s}
.crumbs a:hover{color:var(--accent-hover)}
.crumbs [aria-current]{color:var(--soft)}

/* The hero ring is turned by cs.js: it rotates by itself, stops on hover and can be dragged (mouse or finger). */
.ring-stage{touch-action:pan-y; cursor:grab}
.ring-stage.is-dragging, .ring-stage.is-dragging *{cursor:grabbing !important; user-select:none}
.ring figure img{-webkit-user-drag:none; user-select:none}
.ring-hint{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); margin:0; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); opacity:.75; pointer-events:none; white-space:nowrap}
html[dir="rtl"] .ring-hint{letter-spacing:0; font-size:13px}
.ring-hint span{color:var(--accent-hover); font-size:16px; letter-spacing:0}

/* ---------- results (social media projects): number cards, before/after table, notes, client links ---------- */
.res-grid{display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rcard); overflow:hidden; margin-top:40px}
.res-card{background:var(--surface); padding:28px 26px 26px; display:flex; flex-direction:column; gap:6px}
.res-card b{font-family:var(--display); font-size:clamp(40px,4.4vw,62px); line-height:1; font-weight:600; color:var(--accent); direction:ltr; unicode-bidi:isolate; text-align:start}
[dir="rtl"] .res-card b{text-align:right}
.res-card span{font-weight:600; margin-top:10px}
.res-card small{color:var(--moss); font-size:13px; line-height:1.5}
.res-table{margin-top:28px; border:1px solid var(--line); border-radius:var(--rcard); overflow-x:auto; background:var(--surface)}
.res-table table{width:100%; border-collapse:collapse; font-size:15px; min-width:420px}
.res-table caption{caption-side:bottom; text-align:start; color:var(--moss); font-size:13px; padding:12px 22px 16px}
.res-table th, .res-table td{padding:14px 22px; border-bottom:1px solid var(--line); text-align:start; font-weight:500}
.res-table thead th{color:var(--moss); font-size:13px; font-weight:500}
.res-table tbody tr:last-child th, .res-table tbody tr:last-child td{border-bottom:0}
.res-table .num{text-align:end; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
.res-table td.num:last-child{color:var(--accent); font-weight:600}
.res-notes{margin-top:30px; max-width:860px; color:var(--soft)}
.res-notes p{margin:0 0 14px}
.res-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.res-links .btn svg{width:16px; height:16px}
[dir="rtl"] .res-links .btn svg{transform:scaleX(-1)}
@media (max-width:900px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .res-card:last-child:nth-child(odd){grid-column:span 2}}
@media (max-width:640px){.res-card{padding:22px 20px} .res-table th, .res-table td{padding:12px 16px}}

/* ---------- bars: proportional rows, single or before/after (fill animates only when the section is revealed) ---------- */
.bars{margin-top:36px; display:grid; gap:12px}
.bar-row{display:grid; grid-template-columns:minmax(150px,240px) 1fr auto; align-items:center; gap:22px; padding:16px 22px; border:1px solid var(--line); border-radius:var(--rc); background:var(--surface)}
.bar-label{font-weight:600}
.bar-track{display:block; height:8px; border-radius:99px; background:rgba(227,227,227,.07); overflow:hidden}
.bar-track i{display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, var(--accent), var(--accent-hover)); transition:width 1.2s var(--ease) .15s}
[dir="rtl"] .bar-track i{background:linear-gradient(270deg, var(--accent), var(--accent-hover)); margin-inline-start:0}
.bar-track i.is-before{background:rgba(227,227,227,.32)}
.bar-num{font-family:var(--display); font-weight:600; font-size:clamp(18px,1.8vw,24px); color:var(--accent); direction:ltr; unicode-bidi:isolate; min-width:4ch; text-align:end}
.bar-num.is-before{color:var(--moss); font-size:15px}
.bar-row.is-pair .bar-tracks{display:grid; gap:7px}
.bar-row.is-pair .bar-nums{display:grid; gap:2px; justify-items:end}
.js .bars.pre .bar-track i{width:0}
.bar-legend{display:flex; gap:22px; margin-top:26px; color:var(--moss); font-size:13px}
.bar-legend span{display:inline-flex; align-items:center; gap:8px}
.bar-legend i{width:22px; height:6px; border-radius:99px; background:var(--accent); display:block}
.bar-legend i.is-before{background:rgba(227,227,227,.32)}
.bar-note{color:var(--moss); font-size:13px; margin:14px 0 0}
@media (max-width:640px){.bar-row{grid-template-columns:1fr auto; gap:10px 16px} .bar-row .bar-track, .bar-row .bar-tracks{grid-column:1 / -1; grid-row:2}}

/* ---------- lines: the campaign's own headlines, drifting ---------- */
.lines{display:grid; gap:14px; margin-top:34px; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.lines-row{display:flex; width:max-content; animation:lines-run 60s linear infinite}
.lines-row.rev{animation-direction:reverse; animation-duration:72s}
.lines-track{display:flex; gap:14px; padding-inline-end:14px}
.line-chip{white-space:nowrap; border:1px solid var(--accent-line); background:rgba(200,164,92,.06); color:var(--mist); border-radius:999px; padding:12px 22px; font-weight:600; font-size:clamp(14px,1.3vw,17px)}
.lines:hover .lines-row{animation-play-state:paused}
@keyframes lines-run{from{transform:translateX(0)} to{transform:translateX(-50%)}}
[dir="rtl"] .lines-row{animation-name:lines-run-rtl}
@keyframes lines-run-rtl{from{transform:translateX(0)} to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.lines-row{animation:none; flex-wrap:wrap; width:auto}}

/* ---------- points: what was delivered ---------- */
.pt-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- more work ---------- */
.more-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.more-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:34px}
.more-card{display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit}
.more-img{position:relative; display:block; aspect-ratio:16/10; border-radius:var(--rcard); overflow:hidden; background:var(--surface)}
.more-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.more-card:hover .more-img img{transform:scale(1.04)}
.more-tag{position:absolute; top:14px; inset-inline-start:14px; background:rgba(11,11,11,.72); color:var(--accent); border:1px solid var(--accent-line); border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600}
.more-card b{font-size:18px; line-height:1.45}
.more-go{display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:14px; font-weight:600}
.more-go svg{width:16px; height:16px}
[dir="rtl"] .more-go svg{transform:scaleX(-1)}
@media (max-width:900px){.more-grid{grid-template-columns:1fr}}

/* ---------- brand: client logo + brand colours (click a chip to copy its HEX) ---------- */
.brand-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(22px,4vw,56px); margin-top:36px; align-items:start}
.brand-logos{display:grid; gap:16px}
.brand-logo{margin:0; border:1px solid var(--line); border-radius:var(--rcard); overflow:hidden; background:var(--surface)}
.brand-logo img{width:100%; height:auto; display:block}
.brand-logo figcaption{padding:12px 18px; color:var(--moss); font-size:13px}
.brand-colors small{display:block; color:var(--moss); font-size:13px; margin-bottom:14px}
.brand-chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.brand-chip{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:start; border:1px solid var(--line); border-radius:var(--rc); background:var(--surface); padding:0 0 14px; overflow:hidden; cursor:copy; transition:transform .3s var(--ease), border-color .3s}
.brand-chip:hover{transform:translateY(-3px); border-color:var(--line-2)}
.brand-chip-sw{display:block; width:100%; height:88px; background:var(--c); margin-bottom:8px}
.brand-chip.is-light .brand-chip-sw{box-shadow:inset 0 -1px 0 var(--line)}
.brand-chip b, .brand-chip code{padding-inline:14px}
.brand-chip b{font-size:14px}
.brand-chip code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--moss); direction:ltr}
@media (max-width:900px){.brand-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- igprofile: an Instagram profile screen in the app's light UI ---------- */
.igp-phone{background:#111}
.igp-screen{height:100%; border-radius:34px; overflow:hidden; background:#fff; color:#0f1419; display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:11px; line-height:1.35}
.igp-screen svg{width:18px; height:18px; flex:none}
.igp-screen b{color:#0f1419}  /* the app's own text colour, in both site themes */
.igp-status{display:flex; justify-content:space-between; align-items:center; padding:12px 22px 4px; font-size:11px}
.igp-status span{display:flex; align-items:center; gap:4px}
.igp-status svg{width:13px; height:13px}
.igp-bat{width:20px; height:10px; border:1.5px solid #0f1419; border-radius:3px; position:relative; display:block}
.igp-bat::after{content:''; position:absolute; inset:1.5px 4px 1.5px 1.5px; background:#0f1419; border-radius:1px}
.igp-head{display:flex; align-items:center; gap:10px; padding:6px 12px 8px}
.igp-head b{flex:1; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.igp-top{display:flex; align-items:center; gap:16px; padding:2px 14px 8px}
.igp-av{flex:none; width:68px; height:68px; border-radius:50%; padding:3px; background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.igp-av img{width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid #fff; background:#fff}
.igp-stats{flex:1; display:flex; justify-content:space-around; text-align:center}
.igp-stats b{display:block; font-size:13px}
.igp-stats small{font-size:10.5px; color:#3c4043}
.igp-name b{display:block; font-size:12.5px}
.igp-name small, .igp-bio small{color:#737373; font-size:10.5px}
.igp-bio{padding:0 14px 8px}
.igp-bio b{display:block; font-size:12px}
.igp-bio p{margin:2px 0 0; color:#0f1419}
.igp-place{display:block; color:#00376b; font-weight:600; margin-top:2px}
.igp-btns{display:flex; gap:5px; padding:0 14px 10px}
.igp-btns span{flex:1; display:grid; place-items:center; height:26px; border-radius:7px; background:#efefef; font-weight:600; font-size:11px}
.igp-btns .is-follow{background:#0095f6; color:#fff}
.igp-btns .igp-more{flex:0 0 30px}
.igp-btns svg{width:14px; height:14px}
.igp-hls{display:flex; gap:12px; padding:0 14px 10px; overflow:hidden}
.igp-hl{display:flex; flex-direction:column; align-items:center; gap:4px; width:52px; flex:none}
.igp-hl i{width:50px; height:50px; border-radius:50%; border:1px solid #dbdbdb; padding:2px; display:block}
.igp-hl img{width:100%; height:100%; border-radius:50%; object-fit:cover}
.igp-hl small{font-size:9.5px; max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.igp-tabs{display:flex; border-top:1px solid #efefef}
.igp-tabs span{flex:1; display:grid; place-items:center; padding:7px 0; color:#a8a8a8; border-bottom:1px solid transparent}
.igp-tabs span.on{color:#0f1419; border-bottom-color:#0f1419}
.igp-grid{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; align-content:start; overflow:hidden}
.igp-grid img{width:100%; aspect-ratio:4/5; object-fit:cover; cursor:zoom-in}
.igp-nav{display:flex; justify-content:space-around; align-items:center; padding:9px 8px 16px; border-top:1px solid #efefef; background:#fff}
.igp-nav svg{width:20px; height:20px}
.igp-me{width:22px; height:22px; border-radius:50%; overflow:hidden; border:1.5px solid #0f1419; display:block}
.igp-me img{width:100%; height:100%; object-fit:cover}
.brand-mark.has-img{padding:0; overflow:hidden; background:#fff}
.brand-mark.has-img img{width:100%; height:100%; object-fit:cover; border-radius:50%}
@media (max-width:760px){.g-grid.is-bento{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto} .g-grid.is-bento .g-cell:first-child{grid-column:1 / -1; grid-row:auto; aspect-ratio:16/10; height:auto}}