/* EXA NOTION — site styles. Single dark identity by design (owner brief). */
@font-face{font-family:"Thmanyah Sans";src:url("../fonts/thmanyahsans-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("../fonts/thmanyahsans-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("../fonts/thmanyahsans-Medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("../fonts/thmanyahsans-Bold.woff") format("woff");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#040506; --bg-2:#0c0e11; --bg-3:#121418;
  --ink:#f3f2ee; --ink-2:#cfd0cc; --muted:#9a9da1; --dim:#6c7075;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.2);
  --glass:rgba(22,24,27,.52); --glass-2:rgba(14,15,18,.74); --glass-hi:rgba(255,255,255,.07);
  --orange:#f39a35; --orange-2:#ffb45e; --orange-soft:rgba(243,154,53,.12);
  --radius:18px; --radius-s:12px;
  --gutter:clamp(16px,4vw,64px); --max:1560px;
  --header:78px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --font:"Thmanyah Sans",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  --blur:blur(22px) saturate(150%);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scrollbar-color:#3a3d42 var(--bg);scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:300;font-size:16px;line-height:1.75;overflow-x:hidden;min-height:100svh}
html.lock,html.lock body{overflow:hidden}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:700;text-wrap:balance;overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:8px}
::selection{background:var(--orange);color:#111}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;z-index:200;inset-inline-start:12px;top:-60px;padding:10px 14px;border-radius:10px;background:var(--orange);color:#111;font-weight:500}
.skip:focus{top:12px}
[lang=en] .ar-only,[lang=ar] .en-only{display:none!important}
.latin{direction:ltr;unicode-bidi:isolate}

/* ---------- texture: grain + faint EXA machine from the earlier version ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.18;mix-blend-mode:screen;background:url("../img/texture.webp") 0 0/256px repeat}
.weave{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(255,255,255,.014) 0 1px,transparent 1px 5px)}
.page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60vw 50vh at 85% -5%,rgba(243,154,53,.06),transparent 70%),radial-gradient(50vw 60vh at 0% 100%,rgba(90,120,120,.04),transparent 70%)}
body[data-view=home] .page-bg,body[data-view=home] .grain,body[data-view=home] .rail{display:none}

/* ---------- glass ---------- */
.glass{background:var(--glass);border:1px solid var(--line-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.28)}

/* ---------- header ---------- */
.site-header{position:fixed;z-index:60;top:0;inset-inline:0;height:calc(var(--header) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;transition:background .4s,border-color .4s}
.site-header.scrolled{background:linear-gradient(rgba(7,8,10,.86),rgba(7,8,10,.55));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body[data-view=home] .site-header{background:linear-gradient(rgba(0,0,0,.35),transparent)}
.brand{justify-self:start;display:block;width:84px;flex:none}
.brand img{width:100%;height:auto}
.center-group{display:flex;align-items:center;gap:10px}
.nav{display:flex;align-items:center;gap:2px;height:44px;padding:4px;border-radius:15px}
.nav a{position:relative;display:flex;align-items:center;height:100%;padding:0 clamp(14px,1.6vw,26px);border-radius:11px;white-space:nowrap;font-size:.95rem;font-weight:400;color:var(--muted);
  transition:color .35s,background .35s,transform .45s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--orange);background:var(--orange-soft);transform:scale(1.05)}
.lang{height:44px;padding:0 13px;border-radius:13px;display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:500;letter-spacing:.04em;direction:ltr;white-space:nowrap}
.lang b{font-weight:500;color:var(--dim);transition:color .3s}
.lang b.on{color:var(--orange)}
.lang i{font-style:normal;color:var(--muted);font-size:.85rem}
.end-group{justify-self:end;display:flex;align-items:center;gap:10px}
.home-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:opacity .35s,transform .45s var(--ease),border-color .3s}
.home-btn img{width:20px;height:20px;object-fit:contain}
.home-btn:hover{border-color:rgba(243,154,53,.55);transform:translateY(-2px)}
body[data-view=home] .home-btn{opacity:0;pointer-events:none;transform:scale(.85)}
.menu-btn{width:46px;height:46px;border-radius:50%;display:grid;place-content:center;gap:6px}
.menu-btn span{display:block;width:18px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease),width .4s var(--ease)}
.menu-btn span+span{width:12px;margin-inline-start:auto}
.menu-btn:hover span+span{width:18px}
@media (max-width:1060px){.nav{display:none}}

/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none;opacity:0;background:rgba(4,5,6,.92);
  transition:opacity .45s var(--ease),visibility 0s .45s}
.menu::before{content:"";position:absolute;inset:0;-webkit-backdrop-filter:blur(26px) saturate(80%);backdrop-filter:blur(26px) saturate(80%)}
.menu.open{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .45s var(--ease),visibility 0s}
.menu .menu-inner{transform:translateY(-10px);transition:transform .6s var(--ease)}
.menu.open .menu-inner{transform:none}
.menu-inner{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:env(safe-area-inset-top,0px) var(--gutter) env(safe-area-inset-bottom,0px)}
.menu-top{height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line)}
.menu-top .brand{width:84px}
.close-btn{justify-self:end;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.close-btn svg{width:16px;height:16px}
.menu-list{align-self:center;width:100%;max-width:760px;margin-inline-start:0;list-style:none;padding:0;margin-block:0}
.menu-list li{border-bottom:1px solid var(--line);overflow:hidden}
.menu-list a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:clamp(10px,1.6vh,18px);font-size:clamp(1.9rem,1.2rem + 2.6vw,3.6rem);font-weight:400;line-height:1.3;
  transform:translateY(105%);transition:transform 0s .45s,color .3s,padding .5s var(--ease)}
.menu.open .menu-list a{transition:transform .8s var(--ease),color .3s,padding .5s var(--ease)}
.menu.open .menu-list a{transform:none}
.menu.open .menu-list li:nth-child(1) a{transition-delay:.08s,0s,0s}.menu.open .menu-list li:nth-child(2) a{transition-delay:.13s,0s,0s}.menu.open .menu-list li:nth-child(3) a{transition-delay:.18s,0s,0s}.menu.open .menu-list li:nth-child(4) a{transition-delay:.23s,0s,0s}.menu.open .menu-list li:nth-child(5) a{transition-delay:.28s,0s,0s}.menu.open .menu-list li:nth-child(6) a{transition-delay:.33s,0s,0s}
.menu-list a:hover,.menu-list a[aria-current=page]{color:var(--orange);padding-inline-start:14px}
.menu-list .arrow{width:18px;height:18px;flex:none;transition:transform .5s var(--ease)}
.menu-list a:hover .arrow{transform:rotate(-45deg)}

.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:18px 22px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.menu-foot a{color:var(--ink)}
.menu-social{display:flex;gap:10px}

/* ---------- main & transitions ---------- */
main{position:relative;z-index:2;min-height:100svh}
main.leaving{opacity:0;transform:translateY(10px);transition:opacity .28s,transform .28s}
main.entering{animation:enter .7s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(16px)}}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.page{padding-block:calc(var(--header) + clamp(48px,8vh,96px)) clamp(64px,10vh,120px)}

/* word reveal, direction-aware */
.rv .w{display:inline-block;white-space:nowrap}
.rv .c{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(var(--oy,40%)) scale(.96);transition:opacity .9s var(--ease),filter 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i)*var(--st,32ms) + var(--d,0ms));will-change:transform,filter}
.rv.in .c{opacity:1;filter:blur(0);transform:none}
.wr .t{opacity:.14;filter:blur(5px);transition:opacity .7s ease,filter .8s ease;transition-delay:calc(var(--i)*38ms + var(--d,0ms))}
.wr.in .t{opacity:1;filter:blur(0)}
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top;line-height:1.3}
.roll>span{display:block;transition:transform .55s var(--ease)}
.roll::after{content:attr(data-t);position:absolute;inset-inline:0;top:100%;transition:transform .55s var(--ease)}
a:hover>.roll>span,a:hover>.roll::after,a:focus-visible>.roll>span,a:focus-visible>.roll::after{transform:translateY(-100%)}
.fade{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.fade.in{opacity:1;transform:none}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:500;color:var(--orange)}
[lang=en] .eyebrow{letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}
.eyebrow img{width:26px;height:26px;object-fit:contain}
.h-page{font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem);line-height:1.28;margin-block:14px 16px;max-width:18ch}
[lang=en] .h-page{line-height:1.1;letter-spacing:-.02em}
.lead{font-size:clamp(1rem,.95rem + .25vw,1.14rem);color:var(--muted);max-width:62ch;line-height:1.9}
[lang=en] .lead{line-height:1.7}
.section-h{font-size:clamp(1.35rem,1.1rem + 1vw,2rem);line-height:1.35;margin-bottom:18px}
.page-head{display:grid;gap:4px;margin-bottom:clamp(36px,6vh,64px)}
.temp{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px dashed rgba(243,154,53,.55);color:var(--orange-2);font-size:.72rem;font-weight:500;line-height:1.5;white-space:nowrap;background:rgba(243,154,53,.06)}
body:not(.review) .temp{display:none}

/* ---------- scroll rail (moving side bar) ---------- */
.rail{position:fixed;z-index:40;inset-inline-end:10px;top:calc(var(--header) + 16px);bottom:24px;width:3px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.rail i{position:absolute;inset-inline:0;top:0;height:100%;border-radius:3px;background:linear-gradient(var(--orange),#c96f15);transform-origin:top;transform:scaleY(var(--p,0))}
body[data-view=home] .rail{display:none}
@media (max-width:640px){.rail{inset-inline-end:4px;width:2px}}

/* ---------- home / hero ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#020303}
.stage-bg{position:absolute;inset:0;background:radial-gradient(70vw 60vh at 50% 40%,rgba(243,154,53,.035),transparent 70%),#030405}
.stage-bg::after{content:"";position:absolute;inset:0;background:url("../img/texture.webp") 0 0/256px repeat;mix-blend-mode:screen;opacity:.34}
.stage-veil{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity 1.1s var(--ease);background:radial-gradient(120% 90% at 50% 30%,rgba(3,4,5,.78),rgba(2,2,3,.93))}
.stage-veil::after{content:"";position:absolute;inset:0;background:url("../img/texture.webp") 0 0/256px repeat;mix-blend-mode:screen;opacity:.26}
.stage.veiled .stage-veil{opacity:1}
.stage .reel iframe,.stage .reel video,.stage .reel-poster{transition:opacity .9s ease,filter 1.2s var(--ease),transform 1.4s var(--ease)}
.stage.veiled .reel iframe,.stage.veiled .reel video,.stage.veiled .reel-poster{filter:blur(26px) saturate(.85);transform:translate(-50%,-50%) scale(1.08)}
.stage.veiled .reel-poster{transform:scale(1.08)}
.stage.veiled .reel-fail,.stage.veiled .reel-load{display:none!important}
.home-ui{position:fixed;inset:0;z-index:4;pointer-events:none}
.home-ui>*{pointer-events:auto}
.reel{position:absolute;inset:0;overflow:hidden;z-index:1}
.reel iframe,.reel video{position:absolute;top:50%;left:50%;border:0;pointer-events:none;opacity:0;transform:translate(-50%,-50%);object-fit:cover}
.reel.playing iframe,.reel.playing video{opacity:1}
.reel.playing iframe{opacity:1}
.reel-poster{position:absolute;inset:0;background:transparent center/cover no-repeat;transition:opacity .9s ease,transform 1.6s var(--ease);transform:scale(1.03)}
.reel.playing .reel-poster{opacity:0;transform:scale(1)}
.reel-poster::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(0,0,0,.35))}
.reel-load{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;opacity:0;transition:opacity .4s}
.reel.loading .reel-load{opacity:1}
.reel-load::after{content:"";position:absolute;inset:0;width:40%;background:var(--orange);animation:load 1.1s var(--ease-io) infinite}
@keyframes load{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
.reel-fail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;text-align:center;gap:14px;padding:22px 26px;border-radius:var(--radius);max-width:min(420px,86vw)}
.reel.failed .reel-fail{display:grid}
.reel-fail a{color:var(--orange)}
.switch{position:absolute;z-index:5;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:18px}
.switch button{position:relative;height:46px;padding:0 clamp(16px,2vw,26px);border-radius:13px;font-size:.92rem;font-weight:500;color:var(--muted);white-space:nowrap;direction:ltr;transition:color .35s,background .45s var(--ease)}
.switch button:hover{color:var(--ink)}
.switch button[aria-pressed=true]{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.switch button[aria-pressed=true]::after{content:"";position:absolute;left:50%;bottom:6px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--orange)}
.sound{position:absolute;z-index:5;inset-inline-end:var(--gutter);bottom:calc(30px + env(safe-area-inset-bottom,0px));height:40px;padding:0 14px;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-2)}
.sound svg{width:16px;height:16px}
.hero-tag{position:absolute;z-index:5;inset-inline-end:var(--gutter);top:calc(var(--header) + 14px)}
.social{position:absolute;z-index:6;inset-inline-start:var(--gutter);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.social a,.sicon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--ink);transition:transform .45s var(--ease),background .35s,color .35s,border-color .35s}
.social a:hover,.sicon:hover{transform:translateY(-2px) scale(1.06);background:rgba(243,154,53,.14);border-color:rgba(243,154,53,.55);color:var(--orange-2)}
.social svg,.sicon svg{width:19px;height:19px}
@media (max-width:640px){
  .social{top:auto;bottom:calc(98px + env(safe-area-inset-bottom,0px));transform:none;gap:8px}
  .social a{width:38px;height:38px;border-radius:12px}
  .switch{width:calc(100% - 2*var(--gutter));justify-content:space-between}
  .switch button{flex:1;padding:0 8px;font-size:.86rem}
  .sound{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
  .reel-load{bottom:92px}
}

/* ---------- filters ---------- */
.filters{display:flex;gap:4px;padding:5px;border-radius:16px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:clamp(26px,4vh,40px)}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;height:40px;padding:0 17px;border-radius:11px;font-size:.9rem;color:var(--muted);white-space:nowrap;transition:color .3s,background .35s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed=true]{color:var(--orange);background:var(--orange-soft)}
/* «جديد»: a glass pill with its own warm edge, a live dot and a count */
.filters .f-new{display:inline-flex;align-items:center;gap:8px;position:relative;color:var(--ink);
  background:linear-gradient(135deg,rgba(243,154,53,.16),rgba(255,255,255,.03) 60%);border:1px solid rgba(243,154,53,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 18px rgba(243,154,53,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.filters .f-new .nd{width:7px;height:7px;border-radius:50%;background:var(--orange);position:relative}
.filters .f-new .nd::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--orange);opacity:0;animation:ndPulse 2.4s var(--ease) infinite}
.filters .f-new small{font-size:.72rem;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(243,154,53,.18);color:var(--orange);font-feature-settings:"tnum"}
.filters .f-new[aria-pressed=true]{background:linear-gradient(135deg,rgba(243,154,53,.3),rgba(243,154,53,.08));color:#fff;border-color:rgba(243,154,53,.6)}
@keyframes ndPulse{0%{transform:scale(.6);opacity:.8}70%,100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.filters .f-new .nd::after{animation:none}}
.count{font-size:.8rem;color:var(--dim);margin-inline-start:6px}
.empty{padding:48px 0;color:var(--muted)}

/* ---------- project grid & cards ---------- */
.grid{display:grid;gap:clamp(18px,2vw,28px) clamp(14px,1.4vw,22px);grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1500px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1180px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grid{grid-template-columns:minmax(0,1fr)}}
.card-wrap{position:relative;min-width:0}
.card{display:grid;gap:12px;align-content:start;perspective:900px;-webkit-tap-highlight-color:transparent}
.card-media{position:relative;aspect-ratio:16/9;border-radius:var(--radius-s);overflow:hidden;background:var(--bg-3);border:1px solid var(--line);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transform-style:preserve-3d;transition:box-shadow .5s,border-color .5s;will-change:transform}
.card-media img{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:filter .5s}
.card-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 60%);opacity:0;transition:opacity .45s}
.card:hover .card-media,.card:focus-visible .card-media{border-color:rgba(243,154,53,.45);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.card:hover .card-media::after{opacity:1}
.card:focus-visible{outline:none}
.card-body{display:grid;gap:3px;padding-inline:2px}
.card h3{font-size:clamp(1rem,.92rem + .3vw,1.12rem);font-weight:500;line-height:1.5}
.card .alt{font-size:.82rem;color:var(--muted);line-height:1.5}
.card .tags{font-size:.7rem;letter-spacing:.12em;color:var(--dim);direction:ltr;text-align:start;text-transform:uppercase;margin-top:3px}
[dir=rtl] .card .tags{text-align:right}
.badge-new{position:absolute;z-index:2;top:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 10px;border-radius:999px;font-size:.72rem;font-weight:500;color:#fff;
  background:rgba(20,14,8,.42);border:1px solid rgba(243,154,53,.5);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.35)}
.badge-new i{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.badge-new.inline{position:relative;top:auto;inset-inline-start:auto;margin-inline-start:10px;vertical-align:middle}
.ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;padding:12px;color:var(--muted);font-size:.78rem;
  background:radial-gradient(circle at 70% 20%,rgba(243,154,53,.1),transparent 55%),linear-gradient(135deg,#15171b,#0b0c0e)}
.ph::before{content:"";position:absolute;inset:0;background:url("../img/texture.webp") 0 0/256px repeat;mix-blend-mode:screen;opacity:.6}
.ph img{position:relative;width:48px;height:auto;opacity:.75;inset:auto}
.ph span{position:relative}

/* ---------- dialogs (project + service) ---------- */
.dialog{position:fixed;inset:0;z-index:80;display:none}
.dialog.open{display:block}
.dialog-bg{position:absolute;inset:0;background:rgba(3,4,5,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .45s}
.dialog.shown .dialog-bg{opacity:1}
.dialog-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(16px,4vh,48px) var(--gutter)}
.dialog-panel{position:relative;max-width:1180px;margin:0 auto;border-radius:22px;background:rgba(12,13,16,.94);border:1px solid var(--line-2);box-shadow:0 40px 120px rgba(0,0,0,.6);overflow:hidden;
  transform:translateY(40px) scale(.985);opacity:0;transition:transform .7s var(--ease),opacity .5s}
.dialog.shown .dialog-panel{transform:none;opacity:1}
.dialog-panel .weave{opacity:.5}
.dialog-close{position:sticky;top:12px;z-index:5;float:inline-end;margin:12px 12px -58px 0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
[dir=rtl] .dialog-close{margin:12px 0 -58px 12px}
.dialog-close svg{width:15px;height:15px}

/* project detail (shared by dialog and full page) */
.pd{position:relative}
.pd-video{position:relative;aspect-ratio:16/9;max-height:74vh;width:100%;background:#000;overflow:hidden}
.pd-video img{width:100%;height:100%;object-fit:cover;opacity:.9}
.pd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dialog .pd-video{max-height:min(64vh,calc(100vh - 220px))}
.pd-video .own-video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.pd-video .play.is-off small{max-width:min(82%,420px);text-align:center;line-height:1.5}
.embed-off{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;display:grid;gap:6px;text-align:center;padding:18px 22px;border-radius:16px;max-width:min(86%,440px)}
.embed-off b{font-weight:500;font-size:.95rem}
.embed-off small{color:var(--muted);font-size:.82rem}
.play{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;color:#fff;background:radial-gradient(circle,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.play i{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--ease),background .3s}
.play:hover i{transform:scale(1.08);background:rgba(243,154,53,.25)}
.play i svg{width:24px;height:24px}
.play i svg{margin:0 0 0 4px}
.play small{font-size:.8rem;color:var(--ink-2)}
.pd-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding:clamp(24px,4vw,52px)}
@media (max-width:900px){.pd-body{grid-template-columns:minmax(0,1fr)}}
.pd .pd-title{font-size:clamp(1.55rem,1.15rem + 1.6vw,2.5rem);line-height:1.4;margin-block:12px 6px;max-width:26ch}
[lang=en] .pd .pd-title{line-height:1.18}
.pd .alt-title{font-size:clamp(.95rem,.9rem + .3vw,1.15rem);color:var(--muted);font-weight:400;line-height:1.6;margin-bottom:18px}
.pd .desc{color:var(--ink-2);line-height:1.95;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:.8rem;color:var(--ink-2);background:rgba(255,255,255,.03)}
.credits{display:grid;align-content:start;border-top:1px solid var(--line)}
.credit{display:grid;grid-template-columns:minmax(96px,.8fr) minmax(0,1.4fr);gap:12px;padding-block:13px;border-bottom:1px solid var(--line);font-size:.92rem;align-items:center}
.credit dt{color:var(--dim)}
.credit dd{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.credit .pending{color:var(--dim);font-style:normal}
.credit .clogo{height:28px;width:auto;max-width:90px;object-fit:contain;opacity:.9}
.frames{padding:0 clamp(24px,4vw,52px) clamp(28px,4vw,52px)}
.frames h2{font-size:1.1rem;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.frame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}
.frame-grid button{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--bg-3)}
.frame-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.frame-grid button:hover img{transform:scale(1.04)}
.frame-slot{aspect-ratio:16/9;border-radius:10px;border:1px dashed var(--line-2);display:grid;place-items:center;color:var(--dim);font-size:.8rem;text-align:center;padding:10px}
.pd-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pd-nav a{display:grid;gap:4px;padding:22px clamp(24px,4vw,52px);transition:background .3s}
.pd-nav a:hover{background:rgba(255,255,255,.03)}
.pd-nav a+a{border-inline-start:1px solid var(--line);text-align:end}
.pd-nav small{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:.8rem}
.pd-nav a+a small{justify-content:flex-end}
.pd-nav small img{width:26px;height:auto}
.pd-nav span{font-weight:500;line-height:1.5}
.pd-page .dialog-panel{transform:none;opacity:1;margin-top:0}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;margin-bottom:18px}
.back:hover{color:var(--orange)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:95;display:none;background:rgba(2,3,4,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transition:opacity .28s ease}
.lightbox.open{display:grid;grid-template-rows:1fr auto auto;justify-items:center;align-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) 76px calc(12px + env(safe-area-inset-bottom,0px))}
.lightbox.shown{opacity:1}
.lb-stage{width:100%;height:100%;min-height:0;display:grid;place-items:center;touch-action:pan-y;overflow:hidden}
.lb-stage img{max-width:min(100%,1800px);max-height:100%;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 90px #000;user-select:none;-webkit-user-drag:none;cursor:grab;will-change:transform}
.lb-stage img:active{cursor:grabbing}
.lb-cap{margin:12px 0 0;font-size:.9rem;color:var(--muted);text-align:center;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-thumbs{display:flex;gap:8px;margin-top:12px;max-width:min(92vw,760px);overflow-x:auto;scrollbar-width:none;padding:4px}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumbs button{flex:none;width:86px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--line-2);opacity:.45;transition:opacity .3s,border-color .3s,transform .4s var(--ease)}
.lb-thumbs button img{width:100%;height:100%;object-fit:cover}
.lb-thumbs button:hover{opacity:.8}
.lb-thumbs button[aria-current=true]{opacity:1;border-color:var(--orange);transform:translateY(-2px)}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;z-index:2}
.lb-btn img{width:26px;height:auto}
.lb-close{top:calc(14px + env(safe-area-inset-top,0px));inset-inline-end:16px}
.lb-close svg{width:15px;height:15px}
.lb-prev{inset-inline-start:14px;top:50%;margin-top:-50px}
.lb-next{inset-inline-end:14px;top:50%;margin-top:-50px}
[dir=rtl] .lb-prev img,[dir=rtl] .lb-next img{transform:scaleX(-1)}
@media (max-width:760px),(hover:none){.lightbox.open{padding-inline:10px}.lb-prev,.lb-next{display:none}.lb-thumbs button{width:64px}}
.lb-count{position:absolute;top:calc(28px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);font-size:.82rem;color:var(--muted);direction:ltr;font-feature-settings:"tnum"}

/* ---------- services ---------- */
.families{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:980px){.families{grid-template-columns:minmax(0,1fr)}}
.family{position:relative;overflow:hidden;border-radius:24px;padding:clamp(26px,3.4vw,48px);display:grid;align-content:start;gap:8px;min-height:100%}
.family::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-20%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(243,154,53,.12),transparent);pointer-events:none}
.family-icon{width:72px;height:72px;object-fit:contain;margin-bottom:10px}
.family h2{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.3}
.family .en-name{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);direction:ltr;text-align:start}
[dir=rtl] .family .en-name{text-align:right}
.family>p{color:var(--muted);max-width:44ch;margin-bottom:14px}
.svc-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.svc-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line);transition:color .3s,padding .45s var(--ease)}
.svc-list a:hover,.svc-list a:focus-visible{color:var(--orange);padding-inline-start:10px}
.svc-list .nm{display:grid;gap:1px}
.svc-list .nm b{font-weight:500;font-size:1rem;line-height:1.5}
.svc-list .nm small{font-size:.76rem;color:var(--dim);direction:ltr;text-align:start}
[dir=rtl] .svc-list .nm small{text-align:right}
.plus{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:1rem;line-height:1;transition:transform .45s var(--ease),border-color .3s}
.svc-list a:hover .plus{transform:rotate(90deg);border-color:var(--orange)}
.svc{padding:clamp(26px,4vw,56px)}
.svc .svc-title{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);line-height:1.35;margin-block:10px 4px}
.svc .alt-title{color:var(--muted);margin-bottom:18px}
.svc-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px);margin-top:30px}
@media (max-width:760px){.svc-cols{grid-template-columns:minmax(0,1fr)}}
.svc h2{font-size:1.02rem;font-weight:500;margin-bottom:12px;color:var(--ink)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:0}
.steps li{position:relative;padding-block:10px;padding-inline-start:26px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.steps li::before{content:"";position:absolute;inset-inline-start:4px;top:1.15em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--orange)}
.steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:7.5px;top:calc(1.15em + 10px);bottom:-1.15em;width:1px;background:rgba(243,154,53,.35)}
.dl{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.reel-slot{margin-top:34px;aspect-ratio:21/9;border-radius:16px;border:1px dashed var(--line-2);display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:var(--muted);padding:16px;
  background:radial-gradient(circle at 50% 40%,rgba(243,154,53,.07),transparent 60%)}
.reel-slot img{width:54px;height:auto;opacity:.85}
@media (max-width:560px){.reel-slot{aspect-ratio:16/10}}

/* ---------- about ---------- */
.about-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
@media (max-width:900px){.about-hero{grid-template-columns:minmax(0,1fr)}}
.motion-logo{width:min(190px,48%);justify-self:end;aspect-ratio:900/390}
[dir=ltr] .motion-logo{justify-self:end}
.motion-logo video,.motion-logo img{width:100%;height:100%;object-fit:contain}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-block:clamp(48px,8vh,96px)}
@media (max-width:760px){.pillars{grid-template-columns:minmax(0,1fr)}}
.pillar{border-radius:20px;padding:clamp(22px,3vw,38px);display:grid;gap:10px;align-content:start}
.pillar h3{font-size:1.25rem}
.pillar p{color:var(--muted);line-height:1.9}
.logo-field{position:relative;border-radius:24px;padding:clamp(24px,4vw,56px);overflow:hidden;margin-top:18px}
.logo-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,14px);--cols:6}
.logo-wall>*{flex:0 0 calc((100% - (var(--cols) - 1)*clamp(8px,1.2vw,14px))/var(--cols))}
@media (max-width:1100px){.logo-wall{--cols:5}}
@media (max-width:820px){.logo-wall{--cols:4}}
@media (max-width:560px){.logo-wall{--cols:3}}
.logo-cell{aspect-ratio:3/2;border-radius:14px;display:grid;place-items:center;padding:clamp(10px,1.4vw,18px);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  transform:translate3d(var(--lx,0),var(--ly,0),0);transition:transform .9s var(--ease),background .4s,border-color .4s}
.logo-cell img{max-height:100%;width:auto;max-width:100%;object-fit:contain;opacity:.55;filter:grayscale(1);transition:opacity .4s,transform .6s var(--ease)}
.logo-cell:hover,.logo-cell.lit{background:rgba(243,154,53,.06);border-color:rgba(243,154,53,.3)}
.logo-cell:hover img,.logo-cell.lit img{opacity:1;transform:scale(1.06)}

/* ---------- careers / contact ---------- */
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.apply{border-radius:24px;padding:clamp(24px,3.4vw,44px);display:grid;gap:16px}
.apply-icon{width:56px;height:auto}
.apply h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);line-height:1.4}
.apply ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink-2)}
.apply ul li{display:flex;gap:10px;align-items:baseline}
.apply ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange);transform:translateY(-2px)}
.spec{display:flex;flex-wrap:wrap;gap:8px}
.spec button{padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:.86rem;color:var(--ink-2);transition:.3s}
.spec button[aria-pressed=true]{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.mail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.mail-row .addr{direction:ltr;font-size:1.05rem;user-select:all;overflow-wrap:anywhere}
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:14px;font-weight:500;font-size:.95rem;white-space:nowrap;transition:transform .4s var(--ease),background .3s,color .3s}
.btn-primary{background:var(--orange);color:#1a1004}
.btn-primary:hover{background:var(--orange-2);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn svg{width:16px;height:16px}
[dir=rtl] .btn .arr{transform:scaleX(-1)}
.big-mail{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;border-bottom:1px solid var(--line-2);font-size:clamp(1.4rem,1rem + 2.4vw,3rem);font-weight:300;direction:ltr;overflow-wrap:anywhere;transition:color .3s}
.big-mail:hover{color:var(--orange)}
.big-mail svg{width:.7em;height:.7em;flex:none}
.contact-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px}
@media (max-width:640px){.contact-meta{grid-template-columns:minmax(0,1fr)}}
.contact-meta h3{font-size:.85rem;font-weight:500;color:var(--dim);margin-bottom:8px}
.map-card{border-radius:24px;overflow:hidden;display:grid}
.map-visual{position:relative;aspect-ratio:16/10;background:#0b0d10;overflow:hidden}
.map-visual::before{content:"";position:absolute;inset:-20%;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px);transform:rotate(-12deg)}
.map-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(243,154,53,.16),transparent 45%)}
.map-visual img{position:absolute;left:50%;top:50%;width:64px;transform:translate(-50%,-60%);z-index:2}
.map-body{padding:22px 24px;display:grid;gap:12px}
.copy-note{font-size:.8rem;color:var(--orange-2);min-height:1.2em}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);background:linear-gradient(rgba(5,6,7,.4),#050607)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:28px;padding-block:44px 22px}
@media (max-width:900px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-in{grid-template-columns:minmax(0,1fr)}}
.foot-brand{display:grid;gap:10px;align-content:start}
.foot-logo{width:150px;aspect-ratio:900/390}
.foot-logo video,.foot-logo img{width:100%;height:100%;object-fit:contain}
.foot small{display:block;font-size:.78rem;color:var(--dim);margin-bottom:6px}
.foot p,.foot a{font-size:.9rem;color:var(--ink-2)}
.foot a:hover{color:var(--orange)}
.foot .mail{direction:ltr;display:inline-block}
.foot-social{display:flex;gap:8px;flex-wrap:wrap}
.foot-social .sicon{width:38px;height:38px;border-radius:12px}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:16px 26px;border-top:1px solid var(--line);font-size:.78rem;color:var(--dim)}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:120;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;padding:10px 16px;border-radius:12px;font-size:.88rem;transition:.4s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- review banner ---------- */
.review-bar{position:fixed;z-index:70;inset-inline-start:50%;bottom:0;transform:translateX(50%);display:none}

/* ---------- toolbar: search · sort · grid/list ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-14px 0 clamp(24px,4vh,36px)}
.tb-icon{width:18px;height:18px;object-fit:contain;flex:none;opacity:.9}
.search,.sort{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px}
.search{flex:1 1 240px;max-width:420px}
.search input,.sort select{background:none;border:0;color:var(--ink);font:inherit;font-size:.92rem;min-width:0;width:100%;outline:none}
.search input::placeholder{color:var(--dim)}
.search:focus-within,.sort:focus-within{border-color:rgba(243,154,53,.55)}
.sort select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:6px}
.sort select option{background:#111;color:var(--ink)}
.viewtg{display:flex;gap:3px;padding:4px;border-radius:14px;margin-inline-start:auto}
.viewtg button{width:38px;height:36px;border-radius:10px;display:grid;place-items:center;opacity:.55;transition:opacity .3s,background .3s}
.viewtg button[aria-pressed=true]{opacity:1;background:var(--orange-soft)}
.f-favs{display:inline-flex!important;align-items:center;gap:6px}
.f-favs[hidden]{display:none!important}
.f-favs svg{width:14px;height:14px}
@media (max-width:560px){.viewtg{margin-inline-start:0}.search{flex-basis:100%;max-width:none}}

/* ---------- favourite (heart icon from the sheet style) ---------- */
.fav{position:absolute;z-index:3;top:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(8,9,11,.55);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:scale(.9);transition:opacity .3s,transform .4s var(--ease),color .3s}
.card-wrap:hover .fav,.fav:focus-visible,.fav[aria-pressed=true]{opacity:1;transform:none}
@media (hover:none){.fav{opacity:1;transform:none}}
.fav svg,.fav-d svg{width:17px;height:17px}
.fav[aria-pressed=true] svg path,.fav-d[aria-pressed=true] svg path{fill:var(--orange);stroke:var(--orange)}
.card-watch{position:absolute;z-index:2;inset-inline-start:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:.74rem;
  background:rgba(8,9,11,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
.cw-icon{width:15px;height:auto}
.card:hover .card-watch,.card:focus-visible .card-watch{opacity:1;transform:none}

/* ---------- list view ---------- */
.grid.as-list{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
.grid.as-list .card{grid-template-columns:minmax(120px,220px) minmax(0,1fr);align-items:center;gap:clamp(14px,2vw,28px);padding-block:14px;border-bottom:1px solid var(--line)}
.grid.as-list .card-media{border-radius:10px}
.grid.as-list .card h3{font-size:clamp(1.02rem,.95rem + .4vw,1.3rem)}
.grid.as-list .fav{top:22px;inset-inline-start:calc(clamp(120px,22%,220px) - 46px);inset-inline-end:auto}
.grid.as-list .card-watch{display:none}
@media (max-width:480px){.grid.as-list .card{grid-template-columns:110px minmax(0,1fr)}.grid.as-list .fav{inset-inline-start:74px}}

/* ---------- project detail extras ---------- */
.pd-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.icon-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--ink);transition:border-color .3s,transform .4s var(--ease)}
.icon-btn:hover{border-color:rgba(243,154,53,.55);transform:translateY(-2px)}
.ib-icon{width:20px;height:20px;object-fit:contain}
.credit .sep{color:var(--dim)}
.entities{padding:0 clamp(24px,4vw,52px) clamp(24px,3vw,40px)}
.entities h2,.frames h2{font-size:1.1rem;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ent-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:12px}
.ent{margin:0;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:18px;display:grid;gap:12px;justify-items:center;text-align:center}
.ent-logo{height:92px;width:100%;display:grid;place-items:center}
.ent-logo img{max-height:92px;max-width:78%;width:auto;object-fit:contain}
.ent figcaption{display:grid;gap:2px}
.ent b{font-weight:500;font-size:.95rem}
.ent small{color:var(--dim);font-size:.78rem}
.gallery{display:grid;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr))}
.gallery button{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg-3);grid-column:span 2}
.gallery button img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s}
.gallery button:hover img{transform:scale(1.04)}
.gallery button:first-child{grid-column:span 6}
/* the first frame is full width; the rest fill even rows */
.gallery.g2 button:nth-child(n+2){grid-column:span 6}
.gallery.g3 button:nth-child(n+2),.gallery.g5 button:nth-child(n+2),.gallery.g6 button:nth-child(n+5){grid-column:span 3}
.gallery.g4 button:nth-child(n+2),.gallery.g6 button:nth-child(-n+4):nth-child(n+2),.gallery.g7 button:nth-child(n+2){grid-column:span 2}
.gallery.g6 button:nth-child(n+5){grid-column:span 3}
.gallery .frame-slot{grid-column:span 6}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery button,.gallery[class] button:nth-child(n){grid-column:span 1}.gallery button:first-child{grid-column:span 2!important}.gallery .frame-slot{grid-column:span 2}}
.svc-reel{margin-top:30px;border-radius:16px;overflow:hidden;aspect-ratio:16/9;max-height:none}

/* ---------- menu icons ---------- */
.mi{display:inline-flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
.mi-icon{width:clamp(26px,2.4vw,38px);height:auto;flex:none;opacity:.9;transition:transform .5s var(--ease)}
.menu-list a:hover .mi-icon{transform:scale(1.08) rotate(-4deg)}

/* ---------- about: numbers & team ---------- */
.eyebrow-h{display:flex;align-items:center;gap:12px}
.sh-icon{width:30px;height:auto}
.stats,.team{margin-block:clamp(40px,7vh,80px)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px}
.stat{border-radius:20px;padding:24px;display:grid;gap:6px}
.stat b{font-size:clamp(2rem,1.4rem + 2vw,3.2rem);font-weight:700;color:var(--orange);line-height:1.1}
.stat span{color:var(--muted)}
.team-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:18px}
.member{margin:0;display:grid;gap:10px}
.m-photo{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--bg-3);border:1px solid var(--line);display:grid;place-items:center;font-size:2.4rem;color:var(--dim)}
.m-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}
.member b{font-weight:500}.member small{display:block;color:var(--muted)}
.hint{display:flex;align-items:center;gap:12px;padding:16px 18px;margin-block:18px;border:1px dashed var(--line-2);border-radius:16px}
.bm-icon{width:.8em;height:auto;flex:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv .c,.wr .t,.fade{transform:none!important;opacity:1!important;filter:none!important}
  .card-media,.logo-cell{transform:none!important}
}
.dialog-scroll:focus{outline:none}

@media (min-width:900px){.menu-list{margin-inline-start:clamp(0px,6vw,110px);width:calc(100% - clamp(0px,6vw,110px))}}
.own-video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
.play.is-off{cursor:default}
.play.is-off i{opacity:.55}
/* ---------- join form ---------- */
.apply-head{display:flex;align-items:center;gap:14px}
.apply-head h2{margin-top:2px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid;gap:6px;font-size:.85rem;color:var(--muted);min-width:0}
.fld input,.fld select,.fld textarea{width:100%;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .25s,background .25s}
.fld textarea{resize:vertical;min-height:96px;line-height:1.7}
.fld select{appearance:none;-webkit-appearance:none}
.fld select option{background:#111}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--orange);background:rgba(0,0,0,.5)}
.fld.invalid input,.fld.invalid select{border-color:#ff6b5e}
.fld.file input{padding:9px}
.fld small{color:var(--dim)}
.fl{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);cursor:pointer}
.consent input{accent-color:var(--orange);width:18px;height:18px;margin-top:3px;flex:none}
.hp{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form-msg{min-height:1.2em;font-size:.88rem;color:var(--orange-2)}
.form-msg.err{color:#ff8a7e}
#joinSend{justify-self:start}
#joinSend:disabled{opacity:.5}
.sent{display:grid;gap:10px;justify-items:start;padding-block:30px}
.sent img{width:56px}
.join-points{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:var(--ink-2)}
.join-points li{display:flex;gap:10px;align-items:baseline}
.join-points li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange);transform:translateY(-2px)}
.note-s{font-size:.85rem;color:var(--dim)}
/* motion polish */
.reel video.retiring{transition:opacity .8s ease;z-index:0}
.reel video:not(.retiring){z-index:1}
.menu-btn,.home-btn,.lang,.switch button,.social a,.sicon,.icon-btn,.nav a,.filters button,.viewtg button,.btn{transition-property:color,background,border-color,transform,translate,opacity,box-shadow;transition-duration:.35s,.35s,.35s,.45s,.5s,.35s,.35s;transition-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){.menu-btn,.home-btn,.lang,.switch button,.social a,.sicon,.icon-btn,.nav a,.filters button,.viewtg button,.btn{translate:none!important}}

/* dashboard preview bar */
.preview-bar{position:fixed;z-index:90;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;font-size:.84rem;max-width:calc(100vw - 24px);border-color:rgba(243,154,53,.5)}
[dir=rtl] .preview-bar{padding:8px 16px 8px 8px}
.preview-bar i{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;box-shadow:0 0 10px var(--orange)}
.preview-bar button{flex:none;height:32px;padding:0 14px;border-radius:999px;background:var(--orange);color:#1a1004;font-weight:500;font-size:.8rem}
@media (max-width:560px){.preview-bar span{font-size:.76rem;line-height:1.35}}

/* service samples: showreel clip + frames from related projects */
.svc-sample{margin-top:30px;display:grid;gap:14px}
.svc-clip{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line)}
.svc-clip video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.svc-clip .clip-play{transition:opacity .35s}
.svc-clip.on .clip-play{opacity:0;pointer-events:none}
.clip-tag{position:absolute;top:12px;inset-inline-start:12px;padding:5px 12px;border-radius:999px;font-size:.76rem;color:var(--ink-2);pointer-events:none}
.clip-sound{position:absolute;bottom:12px;inset-inline-end:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;z-index:2}
.clip-sound svg{width:18px;height:18px}
.svc-works-h{font-size:1.02rem;font-weight:500;margin:10px 0 0}
.svc-works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.svc-works .sw{display:grid;gap:6px;color:inherit;text-decoration:none;min-width:0}
.sw-img{aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg-3)}
.sw-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sw:hover .sw-img img{transform:scale(1.04)}
.sw-t{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw:hover .sw-t{color:var(--orange)}
@media (max-width:640px){.svc-works{grid-template-columns:repeat(2,minmax(0,1fr))}}

.map-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;filter:invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.95)}
.wa-num{color:var(--ink);text-decoration:none;font-feature-settings:"tnum";unicode-bidi:isolate}.wa-num:hover{color:var(--orange)}
.credit.role-text dd{line-height:1.7}

/* opening logo animation: first load of a visit only */
.intro{position:fixed;inset:0;z-index:300;background:#000;display:grid;place-items:center;transition:opacity .7s var(--ease),visibility 0s .7s;cursor:pointer}
.intro video{width:100%;height:100%;object-fit:cover}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.no-intro .intro{display:none}
html:not(.no-intro):not(.intro-over) body{overflow:hidden}
.to-projects .arrow{width:16px;height:16px}
[dir=rtl] .to-projects .arrow{transform:scaleX(-1)}

/* display-size slider (projects toolbar): wedge track, play-knob thumb */
.zoom{display:flex;align-items:center;height:44px;padding:0 10px;border-radius:14px;margin-inline-start:auto}
.zoom[hidden]{display:none}
.zoom~.viewtg{margin-inline-start:0}
.zoom input{-webkit-appearance:none;appearance:none;width:clamp(64px,6vw,84px);height:20px;background:transparent;cursor:pointer;direction:ltr}
.zoom input::-webkit-slider-runnable-track{height:7px;background:url(../identity/zoom-track.svg) center/100% 100% no-repeat;opacity:.85}
.zoom input::-moz-range-track{height:7px;background:url(../identity/zoom-track.svg) center/100% 100% no-repeat;opacity:.85}
.zoom input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-4px;border:0;background:url(../identity/zoom-knob.svg) center/contain no-repeat;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:transform .25s var(--ease)}
.zoom input::-moz-range-thumb{width:15px;height:15px;border:0;background:url(../identity/zoom-knob.svg) center/contain no-repeat;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.zoom input:hover::-webkit-slider-thumb,.zoom input:active::-webkit-slider-thumb{transform:scale(1.18)}
.zoom input:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:8px}
.grid.zoomed{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))!important}
.grid.zoomed[data-cols="6"] .card-body,.grid.zoomed[data-cols="7"] .card-body{font-size:.86em}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}