/* ==========================================================
   EYJAZ — Portfolio
   التوجّه: «لوحات على قماش داكن» — كل قسم لوحة بنفس الحواف والهوامش
   ونفس رأس القسم (رقم + موجة + تسمية + عنوان)، والموجة هي العنصر المتكرر.
   Palette: Blue #136CFC · Dark Blue #152641 · Green #C3F84A · Light Blue #E8F4FC
   ========================================================== */

@font-face { font-family: "Qahwa"; src: url("../fonts/qahwa-regular.otf") format("opentype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Naskh"; src: url("../fonts/thick-naskh-swash.otf") format("opentype"); font-weight: 100 900; font-display: swap; }

:root {
  --blue: #136CFC;
  --navy: #152641;
  --lime: #C3F84A;
  --ice: #E8F4FC;
  --ink: #070D18;            /* نص داكن / أزرار */
  --canvas: #03070E;         /* القماش خلف اللوحات */
  --surf: #0A1426;           /* سطح اللوحات الداكنة */
  --deep: #0B1526;
  --paper: #F2F7FD;          /* سطح اللوحات الفاتحة */
  --ar: "Naskh", "Segoe UI", Tahoma, serif;
  --en: "Archivo", "Segoe UI", sans-serif;
  --wrap: min(1500px, 100vw - 110px);
  --gut: clamp(10px, 1vw, 16px);
  --r: clamp(26px, 2.6vw, 42px);
  --pad: clamp(80px, 8vw, 140px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
html.lock { overflow: hidden; }
body { margin: 0; padding-top: var(--gut); font-family: var(--ar); font-weight: 400; font-synthesis: none; color: #fff; background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px); background-size: 28px 28px; pointer-events: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.num { font-family: var(--en); font-weight: 600; font-stretch: 88%; letter-spacing: -.04em; direction: ltr; unicode-bidi: isolate; }

/* ==================== PANELS — نظام اللوحات ==================== */
.pnl { position: relative; margin: 0 var(--gut) var(--gut); border-radius: var(--r); overflow: hidden; isolation: isolate;
  --fg: #fff; --sub: #A9C4EA; --acc: var(--lime); --lab: rgba(255, 255, 255, .72); color: var(--fg); }
.pnl-ink { background: var(--surf); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.pnl-paper { background: var(--paper); --fg: var(--ink); --sub: var(--blue); --acc: var(--blue); --lab: rgba(7, 13, 24, .55); }
.pnl-sky { background: var(--blue); --sub: #DCEBFF; --lab: #fff; }
.pnl-lime { background: var(--lime); --fg: var(--ink); --sub: rgba(7, 13, 24, .62); --acc: var(--ink); --lab: var(--ink); }

/* رأس القسم — واحد في كل الموقع */
.sh { position: relative; z-index: 2; text-align: center; }
.sh-top { display: inline-flex; align-items: center; gap: 12px; direction: ltr; color: var(--lab); }
.sh-top b { font: 700 13px/1 var(--en); color: var(--acc); letter-spacing: .04em; }
.sh-top span { font: 600 12px/1 var(--en); letter-spacing: .24em; text-transform: uppercase; }
.sh-w { width: 34px; height: 10px; color: var(--acc); overflow: visible; }
.sh-t { margin-top: clamp(14px, 1.4vw, 22px); font: 400 clamp(48px, 6vw, 104px)/1.18 var(--ar); color: var(--fg); text-wrap: balance; }
.sh-t em { display: block; margin: clamp(10px, 1vw, 16px) auto 0; max-width: 34em; font: 400 clamp(19px, 1.65vw, 27px)/1.6 var(--ar); color: var(--sub); }

/* أزرار */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding-inline: 24px 7px; border-radius: 999px; font: 400 19px/1 var(--ar); white-space: nowrap; transition: transform .35s var(--ease), background .25s, color .25s; }
.btn i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; transition: transform .45s var(--ease); }
.btn i svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-2px); }
.btn:hover i { transform: rotate(-45deg) scale(1.06); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime i { background: var(--ink); color: var(--lime); }
.btn-navy { background: var(--ink); color: #fff; }
.btn-navy i { background: var(--lime); color: var(--ink); }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); direction: ltr; padding-inline: 7px 24px; flex-direction: row-reverse; font: 600 16px/1 var(--en); }
.btn-line i { background: var(--ink); color: var(--lime); }
.btn-line:hover i, .btn-navy:hover i { transform: scale(1.08); }

/* ظهور عند التمرير */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

/* شريط تقدّم التمرير */
.prog { position: fixed; z-index: 70; inset: 0 0 auto 0; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: 100% 50%; pointer-events: none; }

/* ==================== NAV ==================== */
.nav { position: fixed; z-index: 60; top: calc(var(--gut) + 12px); left: 50%; translate: -50% 0; width: min(1500px, 100vw - 80px); height: 62px; padding-inline: 22px 7px; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; border: 1px solid transparent; color: #fff; transition: background .4s, border-color .4s, translate .5s var(--ease); }
.nav.stuck { background: rgba(5, 10, 20, .88); border-color: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.nav.hide { translate: -50% -120px; }
.nav-logo svg { width: 64px; height: 40px; color: #fff; }
.nav-links { display: flex; gap: 4px; position: absolute; left: 50%; translate: -50% 0; }
.nav-links a { padding: 8px 17px 11px; border-radius: 999px; font-size: 19px; color: rgba(255, 255, 255, .8); transition: color .25s, background .25s; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-links a.on { color: var(--lime); background: rgba(255, 255, 255, .08); }

/* ==================== HERO ==================== */
.hero { height: calc(100svh - var(--gut) * 2); min-height: 680px; max-height: 1500px; background: #081226; --H: clamp(250px, 38vh, 410px); }
.hero-glow { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 34% 52% at 50% 50%, rgba(19, 108, 252, .95) 0%, rgba(19, 108, 252, .55) 38%, rgba(19, 108, 252, 0) 72%),
    radial-gradient(ellipse 70% 80% at 50% 52%, rgba(21, 38, 65, .9) 0%, rgba(7, 13, 24, 0) 70%); }
.hero-glow::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; }
.hero-type { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; direction: ltr; text-align: center; font: 800 clamp(96px, max(13.4vw, 12.5vh), 270px)/.86 var(--en); font-stretch: 62%; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, #2C7CFF 6%, #7FB2FF 52%, #E8F4FC 96%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.hero-type span { display: block; opacity: 0; transform: translateY(.18em); animation: typeIn 1.2s var(--ease) forwards paused; }
html.ready .hero-type span, html.ready .hc-in { animation-play-state: running; }
.hero-type span:nth-child(2) { animation-delay: .1s; }
.hero-type span:nth-child(3) { animation-delay: .2s; }
@keyframes typeIn { to { opacity: 1; transform: none; } }

.hero-track { position: absolute; inset: 0; z-index: 2; direction: ltr; cursor: grab; touch-action: pan-y; user-select: none; }
.hero-track.drag { cursor: grabbing; }
.hc { position: absolute; left: 0; top: 50%; height: var(--H); margin-top: calc(var(--H) / -2 + 6px); will-change: transform; border-radius: 24px; }
.hc-in { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--deep); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08) inset; opacity: 0; transform: translateY(70px) scale(.94); animation: cardIn 1.1s var(--ease) forwards paused; animation-delay: calc(.25s + var(--i) * .06s); transition: translate .5s var(--ease), box-shadow .5s; }
@keyframes cardIn { to { opacity: 1; transform: none; } }
.hc:hover .hc-in { translate: 0 -10px; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .8), 0 0 0 1.5px rgba(195, 248, 74, .8) inset; }
.hc-in img, .hc-in video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hc-in::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(7, 13, 24, .55)); pointer-events: none; }
.hc-top { position: absolute; z-index: 2; top: 12px; inset-inline: 12px; display: flex; justify-content: space-between; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 10.5px/1 var(--en); letter-spacing: .1em; color: #fff; }
.chip svg { width: 10px; height: 10px; }
.hc-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; transition: background .3s, color .3s, transform .45s var(--ease); }
.hc-ic svg { width: 13px; height: 13px; transform: scaleX(-1); }
.hc:hover .hc-ic { background: var(--lime); color: var(--ink); transform: rotate(45deg); }
.hc-bot { position: absolute; z-index: 2; bottom: 12px; left: 12px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hc-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.hc-av svg { width: 14px; height: 14px; }
.hc[data-kind="film"] .hc-av { background: var(--blue); color: #fff; }
.hc-tx { min-width: 0; text-align: left; }
.hc-tx b { display: block; font: 400 16px/1.25 var(--ar); direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.hc-tx i { display: block; margin-top: 2px; font: 600 8.5px/1 var(--en); letter-spacing: .16em; font-style: normal; opacity: .8; }

.hero-bub { position: absolute; z-index: 3; top: 7%; right: 6%; width: min(27vw, 430px); height: auto; mix-blend-mode: screen; pointer-events: none; animation: bub 16s ease-in-out infinite; opacity: 0; transition: opacity 1.6s .5s; }
.hero-bub.in { opacity: 1; }
@keyframes bub { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -14px 18px; rotate: 5deg; } }

.hl { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--en); letter-spacing: .22em; color: rgba(255, 255, 255, .9); direction: ltr; transition: color .25s; }
.hl::before { content: ""; width: 26px; height: 8px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .15)); transition: width .4s var(--ease), background .25s; }
.hl:hover { color: var(--lime); }
.hl:hover::before { width: 40px; background: var(--lime); }
.hl-1 { top: 17%; left: 15%; }
.hl-2 { top: 17%; right: 37%; }
.hl-3 { bottom: 9%; left: 19%; }
.hl-4 { bottom: 5%; right: 8%; }

.hero-cap { position: absolute; z-index: 4; bottom: 4%; left: 50%; translate: -50% 0; width: min(680px, 80vw); text-align: center; }
.hero-cap h1 { font: 400 clamp(21px, 1.75vw, 28px)/1.5 var(--ar); color: #fff; text-wrap: balance; }
.hero-cap p { margin-top: 8px; font: 600 10.5px/1 var(--en); letter-spacing: .26em; color: rgba(255, 255, 255, .55); }

/* ==================== 01 ABOUT ==================== */
.abt { padding-block: clamp(80px, 8vw, 140px) clamp(40px, 4vw, 70px); text-align: center; }
.abt::before, .abt::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.abt::before { width: 46vw; height: 46vw; top: -12vw; right: -10vw; background: radial-gradient(closest-side, rgba(19, 108, 252, .17), rgba(19, 108, 252, 0)); }
.abt::after { width: 40vw; height: 40vw; top: 8vw; left: -12vw; background: radial-gradient(closest-side, rgba(195, 248, 74, .2), rgba(195, 248, 74, 0)); }
.abt-bg { position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(21, 38, 65, .2) 1.1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 62% 46% at 50% 26%, #000 20%, transparent 74%); mask-image: radial-gradient(ellipse 62% 46% at 50% 26%, #000 20%, transparent 74%); }
.abt-in { position: relative; }
.abt-h { position: relative; margin: clamp(18px, 1.8vw, 28px) auto 0; font: 400 clamp(46px, 6vw, 100px)/1.3 var(--ar); color: var(--ink); isolation: isolate; }
.abt-h > span { display: block; }
.abt-h .mute { margin-top: .08em; font-size: .9em; color: #9AA7BA; }
.abt-h mark { position: relative; background: none; color: var(--ink); padding-inline: .08em; }
.abt-h mark::before { content: ""; position: absolute; z-index: -1; inset: .34em -.04em .12em; border-radius: .16em; background: var(--lime); transform: rotate(-2deg) scaleX(0); transform-origin: 100% 50%; transition: transform .9s var(--ease) .55s; }
.abt-h .rv.in mark::before { transform: rotate(-2deg) scaleX(1); }

/* صور داخل العنوان */
.mp { display: inline-block; position: relative; width: 1.7em; height: .84em; margin-inline: .08em; vertical-align: -.06em; border-radius: 999px; overflow: hidden; background: var(--deep); rotate: -3deg; scale: 0; transition: scale .8s cubic-bezier(.3, 1.5, .5, 1), rotate .5s var(--ease), width .6s var(--ease); }
.mp img, .mp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-b { box-shadow: 0 0 0 .05em var(--paper), 0 0 0 .095em var(--blue); }
.mp-l { box-shadow: 0 0 0 .05em var(--paper), 0 0 0 .095em var(--lime); rotate: 3deg; }
.mp-s img { object-position: 85% 40%; }
.rv.in .mp { scale: 1; }
.rv.in .mp:nth-of-type(1) { transition-delay: .25s, 0s, 0s; }
.rv.in .mp:nth-of-type(2) { transition-delay: .4s, 0s, 0s; }
.mp:hover { rotate: 0deg; width: 2.3em; transition-delay: 0s; }

/* بطاقات عائمة حول العنوان */
.abt-fl { position: absolute; z-index: 0; margin: 0; width: clamp(110px, 10.5vw, 176px); padding: 7px 7px 0; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -22px rgba(7, 13, 24, .35), 0 0 0 1px rgba(21, 38, 65, .07); rotate: var(--r); translate: 0 var(--py, 0px); animation: flo 9s ease-in-out infinite; will-change: translate; }
.abt-fl img { width: 100%; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; border-radius: 10px; }
.abt-fl figcaption { padding: 7px 2px 8px; font: 600 9px/1 var(--en); letter-spacing: .18em; color: #5B6B84; text-align: left; direction: ltr; }
.abt-fl figcaption::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--blue); }
.abt-fl-1 { --r: -9deg; top: clamp(60px, 6vw, 110px); left: max(24px, 50% - 700px); }
.abt-fl-2 { --r: 8deg; --ar: 1 / 1.15; top: clamp(50px, 5vw, 90px); right: max(24px, 50% - 710px); animation-delay: -3s; }
.abt-fl-3 { --r: 6deg; --ar: 9 / 14; width: clamp(88px, 8vw, 132px); top: clamp(240px, 22vw, 390px); left: max(70px, 50% - 610px); animation-delay: -5s; }
.abt-fl-3 figcaption::before { background: var(--lime); box-shadow: 0 0 0 1px rgba(7, 13, 24, .25); }
.abt-fl-4 { --r: -7deg; --ar: 9 / 15; width: clamp(84px, 7.6vw, 124px); top: clamp(230px, 20.5vw, 370px); right: max(80px, 50% - 600px); animation-delay: -7s; }
.abt-fl-4 img { object-position: top; }
@keyframes flo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.bento { position: relative; z-index: 1; margin-top: clamp(40px, 4vw, 66px); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; text-align: start; perspective: 1400px; }
.bt { position: relative; display: block; border-radius: 26px; overflow: hidden; padding: 26px; min-height: clamp(360px, 30vw, 440px); transition: transform .35s var(--ease), box-shadow .5s, opacity .9s var(--ease) var(--d, 0s); }
.bt.in { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); }
.bt.in:hover { --ty: -6px; box-shadow: 0 34px 60px -30px rgba(7, 13, 24, .45); }
.bt::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.bt:hover::after { opacity: 1; }
.bt .num { display: block; font-size: clamp(64px, 6.6vw, 104px); line-height: .95; }
.bt-k { display: block; font-size: 20px; opacity: .85; }
.bt-p { display: block; font: 400 20px/1.6 var(--ar); }
.bt-a { background: var(--blue); color: var(--ink); padding: 14px; display: flex; align-items: flex-end; }
.bt-a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 0; transition: transform 1.2s var(--ease); }
.bt-a:hover img { transform: scale(1.05); }
.bt-tag { position: absolute; top: 24px; inset-inline-start: 26px; font: 800 22px/1 var(--en); font-stretch: 110%; color: #fff; letter-spacing: .01em; }
.bt-go { position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--ink); display: grid; place-items: center; transition: background .3s, transform .45s var(--ease); }
.bt-go svg { width: 17px; height: 17px; }
.bt-a:hover .bt-go { background: var(--lime); transform: rotate(-45deg); }
.bt-in { position: relative; z-index: 1; width: 100%; background: #fff; border-radius: 18px; padding: 18px 22px 20px; }
.bt-in .num { font-size: clamp(54px, 5vw, 76px); }
.bt-in span { display: block; margin-top: 8px; font: 400 19px/1.6 var(--ar); color: #3E4E66; }
.bt-go-k { background: var(--ink); color: #fff; }
.bt-b:hover .bt-go-k { background: var(--blue); transform: rotate(-45deg); }
.bt-b { background: #fff; color: var(--ink); display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(21, 38, 65, .08) inset; }
.bt-b .num { margin-top: 10px; }
.bt-faces { position: absolute; left: 0; bottom: -9%; width: 66%; aspect-ratio: 1 / 1.05; direction: ltr; }
.bt-faces img { position: absolute; left: 50%; bottom: 0; width: 64%; border-radius: 10px; box-shadow: 0 18px 30px -14px rgba(7, 13, 24, .45); transform-origin: 50% 120%; translate: -50% 0; transition: rotate .6s var(--ease), translate .6s var(--ease); }
.bt-faces img:nth-child(1) { rotate: -16deg; }
.bt-faces img:nth-child(2) { rotate: 12deg; }
.bt-faces img:nth-child(3) { rotate: -2deg; }
.bt-b:hover .bt-faces img:nth-child(1) { rotate: -24deg; }
.bt-b:hover .bt-faces img:nth-child(2) { rotate: 20deg; }
.bt-b:hover .bt-faces img:nth-child(3) { translate: -50% -14px; }
.bt-b .bt-p { margin-top: auto; max-width: 8em; color: #4B5B73; }
.bt-col { display: grid; grid-template-rows: 1fr auto; gap: 16px; perspective: 1400px; }
.bt-c { background: var(--lime); color: var(--ink); min-height: 0; display: flex; flex-direction: column; }
.bt-c .num { margin-top: 10px; }
.bt-c .bt-p { margin-top: auto; padding-top: 18px; max-width: 7em; }
.bt-reel { position: absolute; left: 22px; bottom: -14%; width: 50%; aspect-ratio: 1.5 / 1; direction: ltr; }
.bt-reel img { position: absolute; bottom: 0; width: 38%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; border: 3px solid var(--ink); background: var(--ink); transition: translate .6s var(--ease), rotate .6s var(--ease); }
.bt-reel img:nth-child(1) { left: 0; rotate: -9deg; translate: 0 8%; }
.bt-reel img:nth-child(2) { left: 31%; z-index: 1; }
.bt-reel img:nth-child(3) { left: 62%; rotate: 9deg; translate: 0 8%; }
.bt-c:hover .bt-reel img:nth-child(1) { rotate: -14deg; translate: -8% 2%; }
.bt-c:hover .bt-reel img:nth-child(2) { translate: 0 -10%; }
.bt-c:hover .bt-reel img:nth-child(3) { rotate: 14deg; translate: 8% 2%; }
.bt-pl { position: absolute; z-index: 2; left: 50%; top: 34%; translate: -50% -50%; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); box-shadow: 0 0 0 5px rgba(195, 248, 74, .9); transition: transform .5s var(--ease); }
.bt-pl svg { width: 18px; height: 18px; }
.bt-c:hover .bt-pl { transform: scale(1.14); }
.bt-d { background: var(--ink); color: #fff; min-height: clamp(96px, 8vw, 120px); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; font-size: 22px; }
.bt-d > span, .bt-d .num { position: relative; z-index: 1; }
.bt-d .num { font-size: clamp(34px, 3vw, 46px); color: var(--lime); }
.bt-site { position: absolute; inset: 0 auto 0 0; width: 62%; height: 100%; object-fit: cover; object-position: 0 18%; opacity: .55; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%); mask-image: linear-gradient(90deg, #000 30%, transparent 92%); transition: opacity .4s, scale .8s var(--ease); }
.bt-d:hover .bt-site { opacity: .85; scale: 1.05; }

/* ==================== 02 IDENTITY — خزانة الفولدرات ==================== */
.idn { padding-top: var(--pad); padding-bottom: 0; }
.idn::before { content: ""; position: absolute; z-index: -1; inset: -20% 10% auto; height: 70%; background: radial-gradient(ellipse at 50% 0, rgba(19, 108, 252, .22), transparent 65%); pointer-events: none; }
.cab { position: relative; margin-top: clamp(60px, 6vw, 110px); height: calc(var(--step) * 2 + var(--th) + clamp(170px, 15vw, 230px)); --th: clamp(52px, 4.4vw, 66px); --step: clamp(118px, 10vw, 150px); }
.fd { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--i) * var(--step)); z-index: calc(var(--i) + 1); display: block; width: 100%; padding: 0; text-align: start; cursor: pointer; perspective: 2600px; perspective-origin: 50% 0; transform: translateY(var(--fy, 0px)); transition: transform .7s var(--ease), opacity .5s, filter .5s; }
.cab:not(.in) .fd { --fy: 110%; }
.cab.in .fd { transition-delay: calc(var(--i) * .12s); }
.cab.in .fd.ready { transition-delay: 0s; }
.fd-back { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.fd-back path { fill: var(--fc); filter: drop-shadow(0 -10px 24px rgba(0, 0, 0, .28)); }
.fd-back .hl { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; filter: none; }

/* علامة التبويب */
.fd-tab { position: absolute; z-index: 4; top: 0; height: var(--th); left: var(--t0); width: var(--tw); display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--ft); direction: ltr; pointer-events: none; }
.fd-tab b { font: 800 clamp(17px, 1.6vw, 24px)/1 var(--en); font-stretch: 92%; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; }
.fd-tab i { width: 10px; height: 10px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); flex: none; }

/* الأوراق داخل الفولدر */
.fd-pp { position: absolute; z-index: 2; top: calc(var(--th) - clamp(46px, 4vw, 70px)); left: var(--px); width: clamp(260px, 26vw, 400px); height: clamp(180px, 16vw, 250px); pointer-events: none; direction: ltr; }
.fd-pp img { position: absolute; top: 0; width: 42%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; border: 5px solid #fff; background: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .6s var(--ease); }
.fd-pp img:nth-child(1) { left: 0; transform: translateY(18px) rotate(-9deg); }
.fd-pp img:nth-child(2) { left: 29%; transform: translateY(0) rotate(2deg); z-index: 1; }
.fd-pp img:nth-child(3) { left: 58%; transform: translateY(22px) rotate(10deg); }
.fd:hover .fd-pp img:nth-child(1), .fd.lift .fd-pp img:nth-child(1) { transform: translateY(-16px) rotate(-14deg); }
.fd:hover .fd-pp img:nth-child(2), .fd.lift .fd-pp img:nth-child(2) { transform: translateY(-34px) rotate(0deg); }
.fd:hover .fd-pp img:nth-child(3), .fd.lift .fd-pp img:nth-child(3) { transform: translateY(-12px) rotate(15deg); }

/* الغطاء الأمامي */
.fd-front { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; top: calc(var(--th) + 18px); border-radius: 26px 26px 0 0; background: var(--ff); box-shadow: 0 -1px 0 rgba(255, 255, 255, .22) inset, 0 -16px 30px -18px rgba(0, 0, 0, .55); transform-origin: 50% 100%; transition: transform .75s cubic-bezier(.3, 1.3, .4, 1); }
.fd-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain); opacity: .12; mix-blend-mode: overlay; }
.fd-lab { position: absolute; top: 16px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; color: var(--ft); }
.fd-lab b { font: 400 clamp(20px, 1.8vw, 27px)/1.2 var(--ar); }
.fd-lab span { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--en); letter-spacing: .2em; direction: ltr; opacity: .75; }
.fd-lab span svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.fd:hover .fd-lab span svg { transform: rotate(-45deg); }

.fd:hover, .fd.lift { --fy: -10px; }
.fd.dim { --fy: 70px; filter: brightness(.55) saturate(.7); }
.fd.open { --fy: -48px; }
.fd-front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%); opacity: 0; transition: opacity .6s; pointer-events: none; }
.fd.open .fd-front { transform: rotateX(-34deg); }
.fd.open .fd-front::after { opacity: 1; }
.fd.open .fd-pp img { transform: translateY(-70px) rotate(0deg) !important; }

/* تنبيه «اضغط على الفولدر» */
.cab-hint { position: absolute; z-index: 20; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .4s, transform 1s var(--ease); transform: translate(var(--hx, 0px), var(--hy, 0px)); }
.cab.in .cab-hint { opacity: 1; }
.cab-hint.off { opacity: 0 !important; }
.cab-hint .hand { position: absolute; left: -6px; top: -4px; width: 46px; height: 46px; max-width: none; color: #fff; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transform-origin: 30% 10%; }
.cab-hint .hand path { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.cab-hint .rip { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; }
.cab-hint.tap .hand { animation: tapHand .9s var(--ease); }
.cab-hint.tap .rip { animation: tapRip .9s ease-out .18s; }
.cab-hint .say { position: absolute; left: 42px; top: 24px; padding: 7px 16px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 400 17px/1 var(--ar); white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
@keyframes tapHand { 0% { transform: none; } 30% { transform: translate(-2px, -2px) scale(.86) rotate(-6deg); } 55% { transform: none; } 100% { transform: none; } }
@keyframes tapRip { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }

/* ==================== COLLAGE OVERLAY ==================== */
.cl { overflow: hidden; opacity: 1; }
.cl-bg { position: absolute; inset: 0; background: var(--cb); transition: background .6s; }
.cl-bg::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
.cl-pat { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.cl.shown .cl-pat { opacity: 1; }
.cl-bar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(18px, 2.4vw, 36px) 30px; color: var(--ct); opacity: 0; transition: opacity .5s .2s; pointer-events: none; background: linear-gradient(180deg, var(--cb-solid, transparent) 35%, transparent); }
.cl.shown .cl-bar { opacity: 1; pointer-events: auto; }
.cl-bar .xb { background: var(--cbtn); color: var(--ct); }
.cl-bar .xb:hover { background: var(--lime); color: var(--ink); }
.cl-ttl { font: 600 11px/1 var(--en); letter-spacing: .22em; direction: ltr; opacity: .7; }
.cl-nav { display: flex; gap: 8px; direction: ltr; }
.cl-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.cl-board { position: relative; width: min(100vw - 56px, 1480px); margin: 84px auto 70px; direction: ltr; }
.it { position: absolute; margin: 0; transform-origin: 50% 50%; rotate: var(--r, 0deg); will-change: transform; }
.it img { display: block; width: 100%; height: auto; }
.it.zoom { cursor: zoom-in; }
.it.zoom:hover { z-index: 90 !important; }
.it.pic { transition: scale .5s var(--ease), box-shadow .5s; }
.it.pic.zoom:hover { scale: 1.035; }
.it .tape { position: absolute; z-index: 2; top: -14px; left: 50%; width: 34%; height: 28px; translate: -50% 0; rotate: -4deg; background: rgba(255, 250, 235, .62); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.it .tape.r { left: auto; right: -8%; top: 8%; rotate: 42deg; width: 28%; }
.it .tape.l { left: 4%; translate: 0; top: -10px; rotate: -38deg; width: 26%; }
.it.tx { text-align: center; color: var(--ct); }
.it.tx b { display: block; font: 400 clamp(26px, 2.8vw, 44px)/1.3 var(--ar); }
.it.tx i { display: block; margin-top: 4px; font: 600 clamp(10px, .8vw, 12px)/1 var(--en); letter-spacing: .3em; font-style: normal; opacity: .75; }
.it.logo img { filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .12)); }
.it.cut img { filter: drop-shadow(0 30px 40px rgba(60, 0, 0, .35)); }
.it.deco { pointer-events: none; }

/* عيّنات الألوان */
.sw { display: flex; gap: 10px; }
.sw span { flex: 1; aspect-ratio: .74; border-radius: 10px; background: var(--c); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06); display: flex; align-items: flex-end; padding: 10px; font: 600 10px/1.3 var(--en); letter-spacing: .08em; color: var(--t, #fff); }
.sw.round span { aspect-ratio: 1; border-radius: 50%; justify-content: center; align-items: center; padding: 0; }

/* بطاقة الملف */
.lcard { padding: clamp(18px, 1.6vw, 26px); border-radius: 16px; background: var(--lcb); color: var(--lct); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45); text-align: right; direction: rtl; }
.lcard h4 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 800 clamp(18px, 1.5vw, 24px)/1 var(--en); letter-spacing: -.01em; text-transform: uppercase; direction: ltr; }
.lcard h4 small { font: 600 11px/1 var(--en); letter-spacing: .2em; opacity: .6; }
.lcard p { margin: 10px 0 0; font: 400 clamp(17px, 1.3vw, 21px)/1.55 var(--ar); opacity: .9; }
.lcard .pdf { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; direction: ltr; justify-content: flex-end; }
.lcard .pdf a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; font: 600 10.5px/1 var(--en); letter-spacing: .08em; opacity: .85; transition: background .25s, color .25s, opacity .25s; }
.lcard .pdf a svg { width: 13px; height: 13px; }
.lcard .pdf a:hover { opacity: 1; background: var(--lct); color: var(--lcb); }

/* ---- Marlow: ورق مطبوع ولاصق على كريمي بباترن المتاهة */
.b-marlow { --cb: #F3EFE9; --ct: #6E1223; --cbtn: rgba(110, 18, 35, .1); --lcb: #6E1223; --lct: #F3EFE9; }
.b-marlow .cl-pat { background: url("../portfolio/marlow-maze.svg") center / 520px repeat; opacity: 0; }
.b-marlow.shown .cl-pat { opacity: .07; }
.b-marlow .pic { padding: .55%; background: #fff; box-shadow: 0 30px 50px -28px rgba(60, 10, 20, .55), 0 2px 4px rgba(60, 10, 20, .12); }
/* ---- Melon Pop: ملصقات على أحمر البطيخ */
.b-melon { --cb: #DF5251; --ct: #fff; --cbtn: rgba(255, 255, 255, .16); --lcb: #fff; --lct: #1a1a1a; }
.b-melon .cl-pat { background: url("../work/brands/melon/pattern-white.webp") center / 360px repeat; }
.b-melon.shown .cl-pat { opacity: .2; }
.b-melon .pic { padding: .7%; border-radius: 22px; background: #fff; box-shadow: 0 30px 44px -26px rgba(80, 0, 0, .6); }
.b-melon .pic img { border-radius: 15px; }
.b-melon .deco img { filter: invert(1); opacity: .9; }
.b-melon .phrase { padding: 16px 20px 14px; border-radius: 16px; background: #fff; box-shadow: 0 24px 40px -24px rgba(80, 0, 0, .6); }
/* ---- L'obsc: إطارات ذهبية رفيعة على خمري */
.b-lobsc { --cb: radial-gradient(ellipse 80% 60% at 50% 0, #5A0B1B, #430312 60%, #2E020C); --ct: #CDA179; --cbtn: rgba(205, 161, 121, .14); --lcb: #F3E9D6; --lct: #430312; }
.b-lobsc .cl-pat { background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(205, 161, 121, .16) calc(50% - .5px), rgba(205, 161, 121, .16) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent 49.9%, rgba(205, 161, 121, .08) 50%, transparent 50.1%); }
.b-lobsc.shown .cl-pat { opacity: 1; }
.b-lobsc .pic { padding: .7%; background: #2E020C; outline: 1px solid rgba(205, 161, 121, .7); outline-offset: -5px; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .8); }
.b-lobsc .it.tx b { color: #F3E9D6; }

/* ==================== 03 POSTERS ==================== */
.pst { padding: clamp(80px, 7vw, 120px) 0 30px; text-align: center; --ph: clamp(240px, 21.5vw, 390px); --R: calc(var(--ph) * 3.4); }
/* السماء: طبقتان تتحركان بسرعتين مختلفتين، وتنجرف مع سحب البوسترات */
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sky-l { position: absolute; top: 0; bottom: 0; left: 0; background-repeat: repeat-x; will-change: transform; }
.sky-back { background-image: url("sky-tile.webp"); background-size: auto 100%; }
.sky-front { top: auto; height: 62%; background-image: url("clouds-front.webp"); background-size: auto 100%; background-position: left bottom; opacity: .9; filter: blur(1.5px); }
.sky::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .14; mix-blend-mode: overlay; }
.ring { position: relative; height: calc(var(--ph) * 1.27); margin-top: clamp(16px, 2vw, 34px); perspective: 1500px; perspective-origin: 50% 46%; direction: ltr; touch-action: pan-y; cursor: grab; user-select: none; }
.ring.drag { cursor: grabbing; }
.ring-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(var(--R)); pointer-events: none; }
.pc { position: absolute; left: 50%; top: 50%; height: var(--ph); border-radius: 12px; overflow: hidden; background: #0B1A3A; box-shadow: 0 34px 50px -26px rgba(4, 26, 84, .7); backface-visibility: hidden; will-change: transform, opacity; pointer-events: auto; }
.pc img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, var(--sheen, 0)) 48%, transparent 66%); pointer-events: none; }
.pst-now { position: relative; z-index: 2; margin-top: 2px; color: var(--ink); text-shadow: 0 0 18px #fff, 0 0 8px #fff; }
.pst-now b { display: block; font: 400 28px/1.35 var(--ar); }
.pst-now span { display: block; margin-top: 2px; font: 600 11px/1.4 var(--en); letter-spacing: .18em; color: #1D3A6E; direction: ltr; }
.pst-foot { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 7px; border-radius: 999px; background: rgba(7, 13, 24, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.rb { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background .25s, color .25s, transform .35s var(--ease); }
.rb svg { width: 20px; height: 20px; }
.rb:hover { background: var(--lime); color: var(--ink); transform: scale(1.08); }
.pst-idx { display: flex; gap: 6px; direction: ltr; }
.pst-idx button { width: 34px; height: 45px; border-radius: 8px; overflow: hidden; opacity: .45; transition: opacity .3s, box-shadow .3s; }
.pst-idx button img { width: 100%; height: 100%; object-fit: cover; }
.pst-idx button:hover { opacity: .9; }
.pst-idx button.on { opacity: 1; box-shadow: 0 0 0 2px var(--lime); }

/* ==================== 04 VIDEO ADS ==================== */
.flm { --sh: clamp(360px, 36vw, 540px); }
.flm-stage { position: relative; height: min(94svh, 1000px); min-height: 640px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.flm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flm-shade { position: absolute; inset: 0; background:
    radial-gradient(ellipse 55% 50% at 50% 42%, rgba(7, 13, 24, .6), rgba(7, 13, 24, 0) 75%),
    linear-gradient(180deg, rgba(10, 20, 38, .45) 0%, rgba(10, 20, 38, 0) 22%, rgba(10, 20, 38, 0) 48%, var(--surf) 96%); }
.flm-copy { position: relative; padding-bottom: calc(var(--sh) * .3); }
.flm-copy .sh-t { text-shadow: 0 4px 40px rgba(7, 13, 24, .6); }
.flm-copy .sh-t em { color: #E6F0FF; }
.flm-copy .btn { margin-top: 26px; }
.flm-tc { position: absolute; z-index: 2; top: 30px; left: 34px; display: flex; gap: 14px; align-items: center; font: 600 11px/1 var(--en); letter-spacing: .2em; direction: ltr; color: rgba(255, 255, 255, .8); }
.flm-tc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: blink 1.4s steps(2) infinite; }
.flm-tc b { font-weight: 600; color: var(--lime); }
@keyframes blink { 50% { opacity: .2; } }
.flm-body { position: relative; z-index: 2; margin-top: calc(var(--sh) * -.34); padding-bottom: clamp(50px, 5vw, 90px); }
.slats { display: flex; gap: 12px; height: var(--sh); direction: ltr; }
.sl { position: relative; flex: 1 1 0; min-width: 0; height: 100%; border-radius: 22px; overflow: hidden; background: var(--deep); transition: flex .7s var(--ease), box-shadow .5s; }
.sl.on { flex: 0 0 calc(var(--sh) * .5625); box-shadow: 0 0 0 2px var(--lime), 0 30px 70px -30px rgba(195, 248, 74, .35); }
.sl img, .sl video { position: absolute; top: 0; left: 50%; height: 100%; width: calc(var(--sh) * .5625); max-width: none; translate: -50% 0; object-fit: cover; }
.sl video { opacity: 0; transition: opacity .5s; }
.sl.on video.ready { opacity: 1; }
.sl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 13, 24, .1) 40%, rgba(7, 13, 24, .82)); transition: opacity .5s; }
.sl:not(.on)::after { background: linear-gradient(180deg, rgba(7, 13, 24, .35), rgba(7, 13, 24, .8)); }
.sl-n { position: absolute; z-index: 2; top: 16px; left: 16px; font: 600 11px/1 var(--en); letter-spacing: .14em; color: #fff; }
.sl-t { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; opacity: 0; translate: 0 10px; transition: opacity .4s, translate .5s var(--ease); direction: rtl; text-align: right; }
.sl.on .sl-t { opacity: 1; translate: 0 0; transition-delay: .2s; }
.sl-t b { display: block; font: 400 21px/1.35 var(--ar); }
.sl-t i { display: block; margin-top: 3px; font: 600 10.5px/1 var(--en); letter-spacing: .14em; font-style: normal; opacity: .75; direction: ltr; text-align: right; }
.sl-pl { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.sl-pl svg { width: 17px; height: 17px; }
.sl-v { position: absolute; z-index: 2; left: 50%; bottom: 18px; translate: -50% 0; writing-mode: vertical-rl; rotate: 180deg; font: 400 16px/1 var(--ar); color: rgba(255, 255, 255, .9); white-space: nowrap; transition: opacity .3s; }
.sl.on .sl-v { opacity: 0; }
.flm-foot { margin-top: 22px; display: flex; justify-content: space-between; font: 600 11px/1 var(--en); letter-spacing: .2em; color: rgba(255, 255, 255, .5); direction: ltr; }

/* ==================== 05 WEB ==================== */
.web { padding-block: var(--pad) clamp(50px, 5vw, 90px); }
.web .sh { margin-bottom: clamp(36px, 3.6vw, 60px); }
.web-box { width: var(--wrap); margin-inline: auto; padding: 12px; border-radius: 40px; background: var(--ink); color: #fff; }
.web-in { position: relative; padding: clamp(18px, 1.8vw, 26px) clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px); border: 1px solid rgba(255, 255, 255, .24); border-radius: 30px; overflow: hidden; }
.web-in::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .12; mix-blend-mode: overlay; pointer-events: none; }
.web-bar { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(16px, 1.8vw, 26px); }
.web-name { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--en); font-stretch: 105%; direction: ltr; }
.web-name svg { width: 22px; height: 19px; color: var(--lime); }
.web-tabs { display: flex; gap: 4px; }
.web-tabs button { padding: 7px 18px 10px; border-radius: 999px; font-size: 19px; color: rgba(255, 255, 255, .7); transition: color .25s, background .25s; }
.web-tabs button:hover { color: #fff; }
.web-tabs button.on { background: rgba(255, 255, 255, .1); color: var(--lime); }
.web-visit { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 18px 14px; border-radius: 999px; border: 1.5px solid var(--lime); font-size: 18px; transition: background .25s, color .25s; }
.web-visit svg { width: 14px; height: 14px; }
.web-visit:hover { background: var(--lime); color: var(--ink); }
.web-grid { position: relative; display: grid; grid-template-columns: 1.34fr .5fr .5fr; grid-template-rows: 1fr 1fr; gap: clamp(12px, 1.3vw, 18px); height: clamp(440px, 42vw, 620px); }
.wt { position: relative; border-radius: 28px; overflow: hidden; display: block; }
.wt-main { grid-row: 1 / 3; background: var(--deep); }
.wt-shot { position: absolute; inset: 0; overflow: hidden; }
.wt-shot img { width: 100%; height: auto; max-width: none; transition: transform 1.2s var(--ease), opacity .4s; will-change: transform; }
.wt-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 13, 24, 0) 40%, rgba(7, 13, 24, .9) 72%, rgba(7, 13, 24, .97)); transition: opacity .5s; pointer-events: none; }
.wt-main:hover::after { opacity: 0; }
.wt-notch { position: absolute; z-index: 2; top: 0; inset-inline-start: 0; width: 92px; height: 92px; background: var(--ink); border-end-end-radius: 34px; display: grid; place-items: start; }
.wt-notch::before, .wt-notch::after { content: ""; position: absolute; width: 26px; height: 26px; background: radial-gradient(circle at 0 100%, transparent 25.5px, var(--ink) 26px); }
.wt-notch::before { top: 0; inset-inline-start: 100%; }
.wt-notch::after { top: 100%; inset-inline-start: 0; }
.wt-notch i { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.wt-notch svg { width: 32px; height: 32px; }
.wt-go { position: absolute; z-index: 2; top: 20px; inset-inline-end: 20px; width: 52px; height: 52px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: rgba(7, 13, 24, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s, color .3s, transform .5s var(--ease); }
.wt-go svg { width: 22px; height: 22px; }
.wt-main:hover .wt-go { background: var(--lime); color: var(--ink); transform: rotate(-45deg); }
.wt-cap { position: absolute; z-index: 2; inset-inline: 30px; bottom: 26px; transition: opacity .4s, translate .5s var(--ease); }
.wt-cap b { display: block; font: 400 clamp(32px, 3.4vw, 54px)/1.3 var(--ar); }
.wt-cap span { display: block; margin-top: 2px; font: 400 21px/1.4 var(--ar); color: rgba(255, 255, 255, .85); }
.wt-main:hover .wt-cap { opacity: 0; translate: 0 14px; }
.wt-live { grid-column: 2 / 4; background: var(--lime); color: var(--ink); direction: ltr; }
.wt-wave { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 56%; height: 46%; }
.wt-dot { position: absolute; top: 50%; left: 52%; translate: -50% -50%; height: 62%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); transition: transform .6s var(--ease); }
.wt-dot svg { width: 40%; height: 40%; }
.wt-live:hover .wt-dot { transform: rotate(-14deg) scale(1.06); }
.wt-live b { position: absolute; top: 50%; right: 8%; translate: 0 -50%; font: 800 clamp(30px, 3.4vw, 54px)/1 var(--en); letter-spacing: -.02em; }
.wt-k { position: absolute; top: 20px; left: 24px; font: 600 10.5px/1 var(--en); letter-spacing: .2em; opacity: .75; direction: ltr; }
.wt-lab { position: absolute; z-index: 2; bottom: 16px; inset-inline-start: 22px; font-size: clamp(19px, 1.8vw, 26px); }
.wt-phone { background: linear-gradient(160deg, #26364F, #111C2E); }
.ph { position: absolute; top: 16%; left: 50%; translate: -50% 0; width: 56%; aspect-ratio: 780 / 1688; border-radius: 22px; border: 5px solid #05090F; overflow: hidden; background: #000; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); transition: translate .7s var(--ease); }
.ph img { width: 100%; }
.wt-phone:hover .ph { translate: -50% -12%; }
.wt-phone::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(7, 13, 24, .9)); }
.wt-stat { background: #0F1A2C; border: 1px solid rgba(255, 255, 255, .08); }
.wt-stat .wt-k { color: var(--lime); opacity: 1; }
.bars { position: absolute; inset: 52px 20px 56px; display: flex; align-items: flex-end; gap: 8px; direction: ltr; }
.bars i { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #46566F, #1B2A42); transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease); }
.bars i.hi { background: linear-gradient(180deg, var(--lime), #5E7A18); }
.web-box.in .bars i { transform: none; }
.web-box.in .bars i:nth-child(2) { transition-delay: .1s; }
.web-box.in .bars i:nth-child(3) { transition-delay: .2s; }
.web-box.in .bars i:nth-child(4) { transition-delay: .3s; }
.bars em { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 600 9px/1 var(--en); letter-spacing: .06em; font-style: normal; color: rgba(255, 255, 255, .85); }
.bars i.hi em { color: var(--ink); }

/* ==================== 06 CONTACT ==================== */
.cta { padding: clamp(90px, 9vw, 160px) clamp(24px, 4vw, 60px); text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .35; mix-blend-mode: soft-light; pointer-events: none; }
.cta-mk { position: absolute; z-index: -1; right: -3%; bottom: -16%; width: min(42vw, 600px); height: min(36vw, 510px); color: rgba(7, 13, 24, .07); rotate: 8deg; }
.cta-h { font-size: clamp(56px, 8vw, 140px); }
.cta-acts { position: relative; z-index: 2; margin-top: clamp(30px, 3.4vw, 54px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-acts .btn { height: 60px; font-size: 21px; padding-inline: 30px 10px; }
.cta-acts .btn-line { padding-inline: 10px 30px; font-size: 17px; }
.cta-acts .btn i { width: 42px; height: 42px; }
.cta-acts .btn i svg { width: 19px; height: 19px; }
.cta-badge { position: absolute; z-index: 1; top: clamp(26px, 3vw, 48px); left: clamp(26px, 3vw, 48px); width: clamp(120px, 11vw, 180px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); display: grid; place-items: center; direction: ltr; box-shadow: 0 30px 60px -24px rgba(7, 13, 24, .55); }
.cta-badge > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.cta-badge text { font: 700 15.5px var(--en); letter-spacing: .24em; fill: var(--lime); }
.cta-badge i { width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.cta-badge i svg { width: 52%; height: 52%; }
@keyframes spin { to { transform: rotate(360deg); } }

.foot { color: #fff; overflow: hidden; }
.foot-giant { direction: ltr; text-align: center; font: 800 clamp(130px, 24.6vw, 480px)/.8 var(--en); font-stretch: 112%; letter-spacing: -.02em; margin: clamp(30px, 4vw, 60px) 0 -.08em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .26); user-select: none; }
.foot-row { position: relative; width: var(--wrap); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, .12); font: 600 11px/1 var(--en); letter-spacing: .18em; color: rgba(255, 255, 255, .55); direction: ltr; }
.foot-row a { font: 400 18px/1 var(--ar); letter-spacing: 0; transition: color .25s; }
.foot-row a:hover { color: var(--lime); }

/* ==================== OVERLAYS ==================== */
.ov { position: fixed; inset: 0; z-index: 100; opacity: 0; transition: opacity .45s var(--ease); }
.ov[hidden] { display: none; }
.ov.open { opacity: 1; }
.xb { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, color .25s, transform .35s var(--ease); }
.xb svg { width: 20px; height: 20px; }
.xb:hover { background: var(--lime); color: var(--ink); transform: scale(1.06); }

.lb, .pl { background: rgba(3, 7, 14, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 50px); direction: ltr; }
.lb-x { position: absolute; top: 24px; right: 24px; z-index: 3; }
.lb-fig, .pl-fig { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; translate: 0 18px; transition: translate .6s var(--ease); }
.ov.open .lb-fig, .ov.open .pl-fig { translate: 0 0; }
.lb-fig img { height: min(82vh, 1100px); width: auto; max-width: 72vw; object-fit: contain; border-radius: 14px; box-shadow: 0 50px 90px -30px #000; }
.pl-fig video { height: min(82vh, 1100px); width: auto; max-width: 78vw; border-radius: 18px; background: #000; box-shadow: 0 50px 90px -30px #000; }
.pl.wide .pl-fig video { height: auto; width: min(76vw, 1400px); max-height: 80vh; }
.lb figcaption, .pl figcaption { display: flex; align-items: baseline; gap: 14px; color: #fff; direction: rtl; }
.lb figcaption b, .pl figcaption b { font: 400 24px/1.2 var(--ar); }
.lb figcaption span, .pl figcaption span { font: 600 11px/1 var(--en); letter-spacing: .18em; color: rgba(255, 255, 255, .55); direction: ltr; }
.lb-p, .lb-n { position: relative; z-index: 2; flex: none; }
.pl-bg { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(70px) saturate(1.3) brightness(.55); opacity: .5; }


/* ==================== BRAND FILE — فصول الهوية داخل الكولاج ==================== */
.cl-cue { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: -20px auto 0; color: var(--ct); font: 400 20px/1 var(--ar); opacity: .8; }
.cl-cue i { width: 1.5px; height: 46px; background: currentColor; transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.cl-doc { position: relative; z-index: 1; width: min(100vw - 56px, 1380px); margin: 0 auto; padding: 40px 0 150px; direction: rtl; color: var(--ct); }
.ch { position: relative; padding-top: clamp(80px, 8vw, 140px); }
.ch-h { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 28px; margin-bottom: clamp(30px, 3vw, 50px); padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.ch-n { grid-row: 1 / 3; font: 700 clamp(64px, 7vw, 120px)/.8 var(--dsp); color: var(--acc2); direction: ltr; }
.ch-h h3 { margin: 0; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font: 400 clamp(38px, 4vw, 66px)/1.2 var(--ar); }
.ch-h h3 em { font: var(--lbl-font); font-style: normal; letter-spacing: var(--lbl-ls); text-transform: uppercase; color: var(--acc2); direction: ltr; }
.ch-h p { margin: 0; max-width: 40em; font: 400 clamp(18px, 1.35vw, 22px)/1.6 var(--ar); opacity: .78; }

/* شبكة 12 عمود */
.g { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.4vw, 22px); align-items: start; }
.g > * { grid-column: span var(--s, 4); min-width: 0; }
.g.mid { align-items: center; }
.g.st { align-items: stretch; }
.cap { display: block; margin-top: 10px; font: 400 17px/1.4 var(--ar); opacity: .75; }
.cap b { font: var(--lbl-font); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-inline-start: 8px; opacity: .8; }

/* صورة داخل الفصول */
.fr { position: relative; margin: 0; }
.fr img { display: block; width: 100%; height: auto; }
.fr.zoom { cursor: zoom-in; }
.fr.cov img { height: 100%; object-fit: cover; }
.fr.plain { box-shadow: none !important; background: none !important; padding: 0 !important; outline: 0 !important; }

/* ظهور داخل ملف الهوية */
.r2 { opacity: 0; transform: translateY(40px) rotate(var(--rr, 0deg)); transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.r2.in { opacity: 1; transform: rotate(var(--rr, 0deg)); }

/* بطاقة نص */
.card { padding: clamp(22px, 2vw, 34px); border-radius: var(--card-r); background: var(--card-bg); color: var(--card-fg); }
.card h4 { margin: 0 0 12px; font: var(--lbl-font); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; direction: ltr; text-align: right; }
.card p { margin: 0; font: 400 clamp(19px, 1.45vw, 24px)/1.65 var(--ar); }
.card ul { margin: 0; padding: 0; list-style: none; }
.card li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--card-rule); font: 400 19px/1.4 var(--ar); }
.card li:first-child { border-top: 0; }
.card li span { font: var(--lbl-font); font-size: 13px; letter-spacing: .06em; direction: ltr; opacity: .8; }

/* عيّنات الألوان الكبيرة */
.swc { position: relative; border-radius: var(--card-r); overflow: hidden; background: var(--c); color: var(--t, #fff); min-height: clamp(240px, 22vw, 340px); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 0 0 1px var(--swb, transparent) inset; }
.swc b { font: 400 clamp(26px, 2.2vw, 36px)/1.2 var(--ar); }
.swc b small { display: block; margin-top: 4px; font: var(--lbl-font); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; direction: ltr; text-align: right; }
.swc dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font: 600 12px/1.4 "Archivo", sans-serif; letter-spacing: .06em; direction: ltr; text-align: left; }
.swc dt { opacity: .6; }
.swc dd { margin: 0; }
.swc .pct { position: absolute; top: 18px; left: 22px; font: 700 clamp(30px, 3vw, 50px)/1 "Archivo", sans-serif; letter-spacing: -.03em; direction: ltr; opacity: .9; }
.ratio { display: flex; height: 18px; border-radius: 999px; overflow: hidden; margin-top: 18px; direction: ltr; box-shadow: 0 0 0 1px var(--rule); }
.ratio i { flex: var(--f); background: var(--c); }

/* عيّنات الخط */
.type { padding: clamp(22px, 2vw, 32px); border-radius: var(--card-r); background: var(--card-bg); color: var(--card-fg); min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.type .smp { font-size: clamp(44px, 4.6vw, 84px); line-height: 1.05; overflow-wrap: anywhere; }
.type .nm { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--card-rule); }
.type .nm b { font: 700 16px/1.2 "Archivo", sans-serif; letter-spacing: .02em; direction: ltr; }
.type .nm span { font: 400 18px/1.3 var(--ar); opacity: .75; }

/* شريط صفحات البروفايل */
.deck { position: relative; }
.deck-in { display: flex; gap: clamp(14px, 1.4vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 26px; direction: ltr; scrollbar-width: thin; scrollbar-color: var(--acc2) transparent; cursor: grab; }
.deck-in.drag { cursor: grabbing; scroll-snap-type: none; }
.deck-in::-webkit-scrollbar { height: 6px; }
.deck-in::-webkit-scrollbar-thumb { background: var(--acc2); border-radius: 9px; }
.pg { flex: 0 0 min(64vw, 900px); scroll-snap-align: center; margin: 0; }
.pg img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--pg-r, 10px); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .6); pointer-events: none; }
.pg figcaption { margin-top: 10px; font: var(--lbl-font); font-size: 11px; letter-spacing: .2em; opacity: .65; }
.deck-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; direction: ltr; }
.deck-bar .ct { font: 700 14px/1 "Archivo", sans-serif; letter-spacing: .08em; }
.deck-bar .bt2 { display: flex; gap: 8px; }
.deck-bar button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--cbtn); color: var(--ct); transition: background .25s, color .25s; }
.deck-bar button:hover { background: var(--lime); color: var(--ink); }
.deck-bar button svg { width: 18px; height: 18px; }
.lang { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--cbtn); }
.lang button { width: auto; height: 34px; padding: 0 14px; border-radius: 999px; font: 700 12px/1 "Archivo", sans-serif; letter-spacing: .12em; background: none; }
.lang button.on { background: var(--ct); color: var(--cb-solid); }

/* جدول مواصفات */
.spec { width: 100%; border-collapse: collapse; font: 400 19px/1.4 var(--ar); }
.spec th { font: var(--lbl-font); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-align: right; opacity: .65; padding: 0 0 10px; }
.spec td { padding: 12px 0; border-top: 1px solid var(--card-rule); }
.spec td.n { font: 600 15px/1.4 "Archivo", sans-serif; letter-spacing: .02em; direction: ltr; text-align: right; }

/* ورقة طباعة بعلامات قص */
.sheetp { position: relative; padding: clamp(28px, 3vw, 54px); background: #fff; border-radius: 4px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .5); color: #222; }
.sheetp::before, .sheetp::after { content: ""; position: absolute; inset: 14px; pointer-events: none;
  background:
    linear-gradient(#999, #999) 0 0 / 18px 1px no-repeat, linear-gradient(#999, #999) 0 0 / 1px 18px no-repeat,
    linear-gradient(#999, #999) 100% 0 / 18px 1px no-repeat, linear-gradient(#999, #999) 100% 0 / 1px 18px no-repeat,
    linear-gradient(#999, #999) 0 100% / 18px 1px no-repeat, linear-gradient(#999, #999) 0 100% / 1px 18px no-repeat,
    linear-gradient(#999, #999) 100% 100% / 18px 1px no-repeat, linear-gradient(#999, #999) 100% 100% / 1px 18px no-repeat; }
.sheetp::after { display: none; }
.sheetp .sl2 { position: absolute; top: 18px; left: 40px; font: 600 10px/1 "Archivo", sans-serif; letter-spacing: .2em; color: #888; direction: ltr; }
.sheetp .g { gap: 26px 30px; }

/* قائمة الملفات */
.files { display: flex; flex-wrap: wrap; gap: 10px; direction: ltr; }
.files a { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 14px; border-radius: 999px; border: 1.5px solid currentColor; font: 600 12px/1 "Archivo", sans-serif; letter-spacing: .08em; transition: background .25s, color .25s; }
.files a svg { width: 17px; height: 17px; }
.files a:hover { background: var(--ct); color: var(--cb-solid); }

/* فهرس الفصول العائم */
.toc { position: absolute; z-index: 6; left: 50%; bottom: 22px; translate: -50% 120px; display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--toc-bg); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: translate .6s var(--ease); direction: rtl; max-width: calc(100vw - 40px); overflow-x: auto; scrollbar-width: none; }
.toc.on { translate: -50% 0; }
.toc button { flex: none; padding: 8px 16px 11px; border-radius: 999px; font: 400 17px/1 var(--ar); color: var(--toc-fg); opacity: .7; transition: opacity .25s, background .25s, color .25s; white-space: nowrap; }
.toc button:hover { opacity: 1; }
.toc button.on { opacity: 1; background: var(--toc-on); color: var(--toc-onfg); }

/* ---------- MARLOW: مطبوعات ولاصق على كريمي ---------- */
.b-marlow { --dsp: "Cormorant Garamond", Georgia, serif; --lbl-font: 600 13px/1 "Cormorant Garamond", Georgia, serif; --lbl-ls: .26em; --acc2: #9A3848; --rule: rgba(110, 18, 35, .18);
  --card-bg: #6E1223; --card-fg: #F3EFE9; --card-rule: rgba(243, 239, 233, .2); --card-r: 4px; --cb-solid: #F3EFE9; --toc-bg: rgba(110, 18, 35, .92); --toc-fg: #F3EFE9; --toc-on: #F3EFE9; --toc-onfg: #6E1223; --pg-r: 2px; }
.b-marlow .ch-n { font-weight: 500; font-style: italic; }
.b-marlow .fr:not(.plain) { padding: 8px; background: #fff; box-shadow: 0 30px 50px -30px rgba(60, 10, 20, .55), 0 2px 4px rgba(60, 10, 20, .1); rotate: var(--tilt, 0deg); transition: rotate .6s var(--ease), scale .6s var(--ease); }
.b-marlow .fr:not(.plain):hover { rotate: 0deg; scale: 1.02; z-index: 3; }
.b-marlow .fr.tp::before { content: ""; position: absolute; z-index: 2; top: -13px; left: 50%; width: 90px; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(255, 250, 235, .7); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.b-marlow .maze { border-radius: 4px; min-height: 380px; background: url("../work/brands/marlow/maze.svg") center / 480px repeat; }
.b-marlow .maze.a { background-color: #F3EFE9; box-shadow: 0 0 0 1px rgba(110, 18, 35, .15) inset; }
.b-marlow .maze.b { background-color: #6E1223; background-blend-mode: soft-light; }
.b-marlow .pin { font: 400 clamp(46px, 5vw, 86px)/1 "Pinyon Script", cursive; }
/* ---------- MELON: ملصقات مدوّرة على الأحمر ---------- */
.b-melon { --dsp: "Anton", Impact, sans-serif; --lbl-font: italic 400 15px/1 "Playfair Display", Georgia, serif; --lbl-ls: .02em; --acc2: #141414; --rule: rgba(255, 255, 255, .35);
  --card-bg: #fff; --card-fg: #141414; --card-rule: rgba(20, 20, 20, .12); --card-r: 24px; --cb-solid: #DF5251; --toc-bg: rgba(20, 20, 20, .88); --toc-fg: #fff; --toc-on: #fff; --toc-onfg: #DF5251; --pg-r: 18px; }
.b-melon .ch-n { font-weight: 400; color: #fff; -webkit-text-stroke: 0; opacity: .95; }
.b-melon .ch-h h3 em { text-transform: none; color: #fff; font-size: 26px; }
.b-melon .fr:not(.plain) { padding: 7px; border-radius: 24px; background: #fff; box-shadow: 0 30px 44px -26px rgba(80, 0, 0, .6); rotate: var(--tilt, 0deg); transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1), scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.b-melon .fr:not(.plain) img { border-radius: 17px; }
.b-melon .fr:not(.plain):hover { rotate: calc(var(--tilt, 0deg) * -1); scale: 1.04; z-index: 3; }
.b-melon .tile { border-radius: 24px; min-height: 300px; background-size: 260px; background-repeat: repeat; box-shadow: 0 30px 44px -26px rgba(80, 0, 0, .5); }
.b-melon .lg-t { border-radius: 24px; min-height: 190px; display: grid; place-items: center; padding: 30px; }
.b-melon .lg-t img { max-height: 110px; width: auto; max-width: 100%; }
.b-melon .stick { position: relative; min-height: 420px; border-radius: 24px; background: #FBEAE8; overflow: hidden; }
.b-melon .stick img { position: absolute; width: var(--w); left: var(--x); top: var(--y); rotate: var(--r); animation: wig 4s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes wig { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(4deg); } }
/* ---------- L'OBSC: إطارات ذهبية على الخمري ---------- */
.b-lobsc { --dsp: "Poppins", sans-serif; --lbl-font: 500 12px/1 "Poppins", sans-serif; --lbl-ls: .3em; --acc2: #CDA179; --rule: rgba(205, 161, 121, .3);
  --card-bg: #F3E9D6; --card-fg: #430312; --card-rule: rgba(67, 3, 18, .15); --card-r: 2px; --cb-solid: #430312; --toc-bg: rgba(20, 0, 6, .85); --toc-fg: #F3E9D6; --toc-on: #CDA179; --toc-onfg: #2E020C; --pg-r: 2px; }
.b-lobsc .ch-n { font-weight: 300; }
.b-lobsc .ch-h h3 { color: #F3E9D6; }
.b-lobsc .fr:not(.plain) { padding: 10px; background: #2E020C; outline: 1px solid rgba(205, 161, 121, .6); outline-offset: -5px; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .8); transition: outline-color .4s, translate .6s var(--ease); }
.b-lobsc .fr:not(.plain):hover { outline-color: #CDA179; translate: 0 -6px; }
.b-lobsc .fr.light { background: #F3E9D6; }

.cl.closing .cl-doc, .cl.closing .cl-cue, .cl.closing .toc { opacity: 0; transition: opacity .3s; }
.fd-lab b small { display: block; margin-top: 4px; font: 400 15px/1.3 var(--ar); opacity: .72; }

/* ==================== BOOT + CURSOR ==================== */
.boot { position: fixed; inset: 0; z-index: 200; background: var(--canvas); display: grid; place-content: center; justify-items: center; gap: 26px; transition: transform .9s cubic-bezier(.7, 0, .2, 1), border-radius .9s; }
.boot svg { width: 66px; height: 56px; color: var(--lime); animation: bootMk 1.1s var(--ease) infinite alternate; }
.boot span { width: 132px; height: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.boot i { display: block; height: 100%; background: var(--lime); transform-origin: left; animation: bootBar 1.5s var(--ease) forwards; }
html.ready .boot { transform: translateY(-101%); border-radius: 0 0 50% 50% / 0 0 14% 14%; pointer-events: none; }
@keyframes bootMk { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bootBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.cur { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; will-change: transform; }
.cur span { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 14px 4px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 400 17px/1 var(--ar); white-space: nowrap; transform: scale(0); transform-origin: 0 0; transition: transform .35s var(--ease); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.cur.on span { transform: scale(1); }
.cur.down span { transform: scale(.82); }
@media (hover: none) { .cur { display: none; } }

/* ==================== TABLET ==================== */
@media (max-width: 1100px) {
  :root { --wrap: calc(100vw - 64px); }
  .abt-fl-3, .abt-fl-4 { display: none; }
  .abt-fl-1 { left: 14px; } .abt-fl-2 { right: 14px; }
  .nav { width: calc(100vw - 44px); }
  .nav-links a { padding: 8px 12px 11px; font-size: 18px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bt-col { grid-column: 1 / 3; grid-template-rows: none; grid-template-columns: 1.4fr 1fr; }
  .bt-c { min-height: 250px; }
  .bt-reel { width: 38%; bottom: -22%; }
  .bt-site { opacity: .38; }
  .hl-1 { left: 6%; } .hl-3 { left: 8%; }
  .web-grid { grid-template-columns: 1.2fr .5fr .5fr; height: clamp(420px, 56vw, 560px); }
  .pst-idx button { width: 28px; height: 37px; }
  .sl-v { font-size: 14px; }
  .cta-badge { width: 110px; }
}
@media (max-width: 900px) {
  .bt-faces { width: 54%; }
  .bt-b .bt-p { max-width: 6.4em; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .abt-fl { display: none; }
  .web-tabs button { padding: 7px 12px 10px; }
  .lb-p, .lb-n { position: absolute; bottom: 24px; }
  .lb-p { left: 24px; } .lb-n { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}
.b-lobsc .sw span { box-shadow: 0 0 0 1px rgba(205, 161, 121, .65), 0 16px 30px -16px rgba(0, 0, 0, .6); }
.lgt { display: grid; place-items: center; min-height: 260px; padding: 40px; }
.lgt img { max-height: 230px; width: auto; max-width: 100%; }
/* جولة 6 */
.g.st > .fr { align-self: start; }
.fr.eq img { aspect-ratio: 3 / 4; object-fit: cover; }
.b-marlow .maze { min-height: clamp(320px, 30vw, 460px); background: #6E1223 url("../work/brands/marlow/maze-wine.webp") center / cover no-repeat; }
.lgt.big { min-height: clamp(320px, 34vw, 520px); }
.lgt.big img { max-height: none; width: min(56%, 620px); }
.lgt img { max-height: none; width: min(62%, 380px); }
.b-lobsc .it.logo img { filter: none; }
/* ميلون: الفصول على أحمر سادة بدل الباترن عشان تنقرأ المعلومات */
.b-melon .cl-doc::before { content: ""; position: absolute; z-index: -1; top: -160px; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: linear-gradient(180deg, rgba(223, 82, 81, 0), #DF5251 160px); pointer-events: none; }
.b-melon .ch-h p { opacity: .92; }
.b-melon .cl-cue { color: #fff; }