/* =====================================================================
   Portfolio (EN + AR) — design F "Orbit"
   hero ring of real concept covers · crossing tapes · case-study reel ·
   poster tickets with giant numerals · sticky control deck · 4 filterable
   collections (288 concept designs) · lightbox · final poster statement.
   Bootstrap-safe class names (pf- prefix). Logical properties throughout.
   ===================================================================== */

/* ---------- HERO ---------- */
.pf-hero .ph__copy .eyebrow { color: var(--fg); }
.pf-hero .ph__lead { max-width: 40em; font-size: clamp(16.5px, 1.25vw, 19.5px); }
.pf-hero__note { position: relative; z-index: 3; max-width: 46em; font-size: 15.5px; line-height: 1.75; font-weight: 500; color: var(--fg); opacity: .92; }
.pf-hero__slot .ring { --n: 8; --R: clamp(108px, 14vw, 230px); --cw: clamp(58px, 6vw, 100px); --ch: calc(var(--cw) * 1.25); }
.pf-hero__slot .rc__img img { object-position: top center; }
.pf-hero .ph__core { font-size: clamp(96px, 13vw, 210px); }

.pf-jump { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--fg); margin-top: clamp(6px, 1.5vw, 18px); position: relative; z-index: 3; }
.pf-jump a { display: grid; align-content: start; gap: 2px; padding: 12px clamp(8px, 1.4vw, 18px) 4px; min-height: 44px; text-decoration: none; color: var(--fg); font-size: 14px; font-weight: 650; line-height: 1.25; border-inline-start: 1px solid var(--rule); transition: background-color .3s, color .3s; border-radius: 0 0 14px 14px; }
.pf-jump a:first-child { border-inline-start: 0; padding-inline-start: 0; }
.pf-jump strong { font: 400 clamp(40px, 5.4vw, 84px)/.9 var(--f-num); letter-spacing: .01em; transition: transform .5s var(--ease); display: block; }
.pf-jump a:hover strong { transform: translateY(-4px); color: var(--deep); }

/* ---------- TAPES ---------- */
.pf-tapes { margin-block: -6px 0; z-index: 2; background: linear-gradient(to bottom, transparent 50%, var(--deep) 50%); }

/* ---------- CASE STUDIES · reel ---------- */
.pf-cases { overflow: clip; padding-bottom: clamp(48px, 6vw, 96px); }
.pf-cases__head { margin-bottom: 18px; }
.pf-cases__head .lede { max-width: 46em; }
.pf-cases__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: clamp(10px, 2vw, 22px); }
.pf-cases__hint { font-size: 13.5px; color: var(--fg-2); margin-inline-end: auto; }
.pf-cs__sub { font: 400 clamp(26px, 3vw, 40px)/1.1 var(--f-display); text-transform: var(--display-case); color: var(--fg); width: 100%; }
.pf-cs__sub small { font: 500 .45em/1 var(--f-body); color: var(--fg-2); vertical-align: middle; }
:root:lang(ar) .pf-cs__sub { font-weight: 800; line-height: 1.4; }
.pf-reel .fr { position: relative; color: var(--ink); }
.pf-reel .fr__art { padding: 0; }
.pf-reel .fr__art > img { object-position: top center; transition: transform 1.2s var(--ease); }
.pf-reel .fr:hover .fr__art > img { transform: scale(1.04); }
.pf-cs__cap { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; flex: 1; }
.pf-cs__n { position: absolute; inset-inline-end: 14px; top: -54px; font: 400 64px/1 var(--f-num); color: var(--cream); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 20px rgb(0 0 0 / .35); }
.pf-cs__meta { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--b1-ink); line-height: 1.35; padding-inline-end: 66px; }
.pf-cs__title { font: 400 clamp(22px, 1.8vw, 27px)/1.02 var(--f-display); text-transform: var(--display-case); letter-spacing: .005em; }
:root:lang(ar) .pf-cs__title { font-weight: 800; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; }
.pf-cs__p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pf-cs__go { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pf-cs__go i { transition: transform .4s var(--ease); }
.pf-reel .fr:hover .pf-cs__go i { transform: translateX(calc(5px * var(--dir))); }
/* rail (touch / tablet / no JS): native swipe with snap */
.pf-reel .ribbon__track { gap: 14px; scroll-padding-inline: var(--g); }
.pf-reel .fr { flex: 0 0 min(84vw, 400px); }
/* desktop: concave 3D reel from the first paint (portfolio.js starts WSR.reel ≥1024 px). Not in a viewport taller than
   1500 px (crawler render): the kit keeps the rail there so no card is hidden (same media query as site.js) */
@media (min-width: 1024px) and (max-height: 1500px) {
  html.js .pf-reel { --fw: clamp(360px, 29vw, 430px); height: var(--rh, calc(var(--fw) * .625 + 340px)); perspective: 1500px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; }
  html.js .pf-reel .ribbon__track { display: block; overflow: visible; padding: 0; position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-style: preserve-3d; }
  html.js .pf-reel .fr { position: absolute; top: 16px; left: calc(var(--fw) / -2); width: var(--fw); height: calc(var(--fw) * .625 + 300px); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  html.js .pf-reel:not(.is-3d) .fr:nth-child(n+2) { visibility: hidden; }
}
html:not(.js) .pf-cases__hint, html:not(.js) .pf-cases .reel__ctrl { display: none; }

/* ---------- DESIGN WORK · poster tickets ---------- */
.pf-intro { overflow: clip; }
.pf-intro .marq { top: 30%; }
.pf-intro__head { position: relative; max-width: 980px; }
.pf-intro .lede { max-width: 46em; color: var(--ink); }
.pf-intro .lede a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; }
.pf-intro .lede a:hover { color: var(--deep); }
.pf-tix { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.pf-tix__item { --pad: clamp(16px, 1.6vw, 24px); --nsz: clamp(84px, 9.6vw, 168px); --tear-y: calc(var(--pad) + var(--nsz) * .84 + clamp(14px, 1.6vw, 22px)); position: relative; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; min-height: clamp(260px, 26vw, 360px); padding: var(--pad); background: var(--paper); color: var(--ink); border-radius: 24px; text-decoration: none; isolation: isolate; overflow: clip;
  -webkit-mask: radial-gradient(circle 13px at 0 var(--tear-y, 58%), #0000 98%, #000) , radial-gradient(circle 13px at 100% var(--tear-y, 58%), #0000 98%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 13px at 0 var(--tear-y, 58%), #0000 98%, #000) intersect, radial-gradient(circle 13px at 100% var(--tear-y, 58%), #0000 98%, #000);
  transition: transform .6s var(--ease); }
.pf-tix__item:hover { transform: translateY(-6px) rotate(calc(-1deg * var(--dir))); }
.pf-tix__item:focus-visible { outline-offset: 4px; }
.pf-tix__num { position: relative; z-index: 1; font: 400 var(--nsz)/.84 var(--f-num); color: transparent; -webkit-text-stroke: 2px var(--ink); width: fit-content; direction: ltr; letter-spacing: -.01em; }
.pf-tix__num::after { content: attr(data-n); position: absolute; inset: 0; color: var(--deep); -webkit-text-stroke: 0; clip-path: inset(calc((1 - var(--fill, 1)) * 100%) 0 0 0); }
.pf-tix__item--dash .pf-tix__num::after, .pf-tix__item--pack .pf-tix__num::after { color: var(--b2); -webkit-text-stroke: 2px var(--ink); }
.pf-tix__tear { display: block; height: 0; border-top: 2px dashed color-mix(in oklab, var(--ink) 28%, transparent); margin: clamp(14px, 1.6vw, 22px) calc(-1 * var(--pad)) 14px; }
.pf-tix__label { font: 400 clamp(24px, 2.2vw, 34px)/1 var(--f-display); text-transform: var(--display-case); }
:root:lang(ar) .pf-tix__label { font-weight: 800; line-height: 1.35; font-size: clamp(21px, 1.9vw, 28px); }
.pf-tix__sub { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 6px; }
.pf-tix__fan { position: absolute; inset-inline-end: clamp(10px, 1.4vw, 20px); top: clamp(14px, 1.6vw, 22px); width: 44%; aspect-ratio: 1; z-index: 0; pointer-events: none; }
.pf-tix__fan img { position: absolute; inset-inline-end: 0; top: 0; width: 78%; height: auto; border-radius: 8px; box-shadow: 0 10px 22px -10px color-mix(in oklab, var(--ink) 60%, transparent); transform-origin: 50% 120%; transition: transform .7s var(--ease); background: var(--cream-2); }
.pf-tix__item--fly .pf-tix__fan img { width: 54%; }
.pf-tix__fan img:nth-child(1) { transform: rotate(calc(-14deg * var(--dir))) translate(calc(-10% * var(--dir)), 6%); }
.pf-tix__fan img:nth-child(2) { transform: rotate(calc(-4deg * var(--dir))) translateY(2%); }
.pf-tix__fan img:nth-child(3) { transform: rotate(calc(7deg * var(--dir))); }
.pf-tix__item:hover .pf-tix__fan img:nth-child(1) { transform: rotate(calc(-24deg * var(--dir))) translate(calc(-30% * var(--dir)), 10%); }
.pf-tix__item:hover .pf-tix__fan img:nth-child(2) { transform: rotate(calc(-9deg * var(--dir))) translate(calc(-12% * var(--dir)), 0); }
.pf-tix__item:hover .pf-tix__fan img:nth-child(3) { transform: rotate(calc(10deg * var(--dir))) translate(calc(6% * var(--dir)), -4%); }
.pf-tix__go { position: absolute; inset-inline-end: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cream); font-size: 17px; transition: transform .5s var(--ease), background-color .3s; }
.pf-tix__item:hover .pf-tix__go { transform: rotate(calc(-45deg * var(--dir))); background: var(--deep); }

/* ---------- CONTROL DECK (sticky on desktop) ---------- */
.pf-work { position: relative; }
.pf-deck { position: relative; z-index: 20; padding-inline: var(--g); margin-block: -34px; pointer-events: none; }
.pf-deck__in { pointer-events: auto; max-width: var(--max); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px; background: var(--ink); color: var(--cream); border-radius: 28px; box-shadow: 0 24px 40px -22px color-mix(in oklab, var(--ink) 80%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--cream) 10%, transparent); }
.pf-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 650; color: var(--on-deep-2); white-space: nowrap; transition: background-color .3s, color .3s; }
.pf-tab:hover { color: var(--cream); background: color-mix(in oklab, var(--cream) 10%, transparent); }
.pf-tab[aria-pressed="true"] { background: var(--b2); color: var(--ink); }
.pf-tab__n { font: 400 15px/1 var(--f-num); opacity: .75; }
.pf-tab:focus-visible { outline-color: var(--b2); outline-offset: 1px; }
.pf-search { position: relative; flex: 0 1 300px; min-width: 200px; }
.pf-search i { position: absolute; inset-inline-start: 16px; top: 50%; translate: 0 -50%; color: var(--b2); font-size: 15px; pointer-events: none; }
.pf-search input { width: 100%; min-height: 44px; border: 0; border-radius: 999px; padding-inline: 42px 16px; background: color-mix(in oklab, var(--cream) 10%, transparent); color: var(--cream); font: 500 15px/1.2 var(--f-body); outline: none; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .3s, background-color .3s; }
.pf-search input::placeholder { color: color-mix(in oklab, var(--cream) 62%, transparent); }
.pf-search input:focus-visible { box-shadow: inset 0 0 0 2px var(--b2); background: color-mix(in oklab, var(--cream) 14%, transparent); }
.pf-search input::-webkit-search-cancel-button { filter: invert(1); cursor: pointer; }
.pf-deck__count { flex: none; padding-inline: 8px 14px; font-size: 13px; color: var(--on-deep-2); white-space: nowrap; }
.pf-deck__count b { font: 400 22px/1 var(--f-num); color: var(--b2); margin-inline-end: 4px; display: inline-block; min-width: 3ch; text-align: end; }
.pf-deck__empty { display: none; pointer-events: auto; max-width: var(--max); margin: 8px auto 0; padding: 12px 18px; border-radius: 18px; background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.pf-deck__empty.is-on { display: block; }
html:not(.js) .pf-deck, html:not(.js) .pf-tools { display: none; }
@media (min-width: 1024px) {
  .pf-deck { position: sticky; top: calc(var(--nav-h) + 6px); }
}

/* ---------- COLLECTIONS ---------- */
.pf-coll { --card-bg: var(--paper); --card-fg: var(--ink); --card-fg2: var(--ink-2); --card-line: var(--line); --card-acc: var(--b1-ink); --card-px: var(--b2-ink); }
.pf-coll.band--ink, .pf-coll.band--deep { --card-bg: color-mix(in oklab, var(--cream) 7%, transparent); --card-fg: var(--cream); --card-fg2: var(--on-deep-2); --card-line: var(--line-deep); --card-acc: var(--b2-lite); --card-px: var(--b2-lite); }
.pf-coll { padding-top: calc(var(--sec) + 20px); }
.pf-coll.is-off { display: none; }
.pf-coll__head { align-items: end; }
.pf-coll__head .lede { max-width: 44em; }
.pf-coll__n { font: 400 clamp(90px, 13vw, 210px)/.8 var(--f-num); color: transparent; -webkit-text-stroke: 2px color-mix(in oklab, var(--fg) 55%, transparent); direction: ltr; user-select: none; margin-inline-start: auto; }
.pf-coll__n span { display: inline-block; }
.pf-tools { display: grid; gap: 12px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 14px; font-weight: 650; color: var(--fg-2); white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; }
.pf-chip:hover { color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.pf-chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.pf-chip__n { font: 400 .95em/1 var(--f-num); opacity: .7; }
.pf-tools__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pf-select { position: relative; }
.pf-select select { appearance: none; min-height: 44px; padding-inline: 18px 42px; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); font: 650 14px/1.2 var(--f-body); cursor: pointer; }
.pf-select select:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.pf-select i { position: absolute; inset-inline-end: 16px; top: 50%; translate: 0 -50%; color: var(--b2); font-size: 12px; pointer-events: none; }
.pf-tools__count { font-size: 14px; font-weight: 650; }
.pf-tools__count span { font: 400 24px/1 var(--f-num); color: var(--acc); margin-inline-end: 3px; }
.pf-tools__note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); margin-inline-start: auto; }
.pf-tools__note i { color: var(--acc); }

.pf-grid { display: grid; gap: clamp(10px, 1.2vw, 16px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.pf-grid--dash { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pf-grid--fly { grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); }

.pf-card { position: relative; display: flex; flex-direction: column; background: var(--card-bg); color: var(--card-fg); border-radius: 18px; box-shadow: 0 0 0 1px var(--card-line); transition: transform .5s var(--ease), box-shadow .4s; isolation: isolate; }
.pf-card.is-filtered { display: none; }
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--card-line), 0 26px 40px -26px color-mix(in oklab, var(--ink) 60%, transparent); }
.pf-card:has(.pf-card__title a:focus-visible) { outline: 3px solid var(--acc); outline-offset: 3px; }
.pf-card__media { position: relative; margin: 6px 6px 0; border-radius: 13px; overflow: hidden; background: var(--cream-2); }
.pf-card--web .pf-card__media { padding-top: 16px; background: color-mix(in oklab, var(--ink) 86%, var(--cream)); }
.pf-card--web .pf-card__media::before { content: ""; position: absolute; inset-inline-start: 9px; top: 5px; width: 30px; height: 6px; background: radial-gradient(circle 3px at 3px 3px, var(--b2) 98%, #0000) 0 0 / 12px 6px repeat-x; opacity: .9; }
.pf-card--dash .pf-card__media { background: #0e0c16; }
.pf-card__media img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease); background: color-mix(in oklab, var(--cream-2) 70%, var(--ink) 4%); }
.pf-card:hover .pf-card__media img { transform: scale(1.045); }
.pf-card__badge { position: absolute; inset-inline-start: 8px; bottom: 8px; display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 82%, transparent); color: var(--cream); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root:lang(ar) .pf-card__badge { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.pf-zoom { position: absolute; z-index: 3; inset-inline-end: 8px; top: 8px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--paper) 92%, transparent); color: var(--ink); font-size: 16px; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5); transition: transform .45s var(--ease), background-color .3s; }
.pf-card--web .pf-zoom { top: 24px; }
.pf-zoom:hover { background: var(--b2); transform: scale(1.08) rotate(90deg); }
.pf-zoom:focus-visible { outline: 3px solid var(--b2); outline-offset: 2px; }
.pf-card__body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; }
.pf-card__ind { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--card-acc); line-height: 1.3; }
:root:lang(ar) .pf-card__ind { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.pf-card__title { font: 400 clamp(19px, 1.5vw, 23px)/1.02 var(--f-display); text-transform: var(--display-case); letter-spacing: .005em; overflow-wrap: anywhere; }
:root:lang(ar) .pf-card__title { font-weight: 800; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.4; }
.pf-card__title a { text-decoration: none; color: inherit; }
.pf-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.pf-card__title a:focus-visible { outline: 0; }
.pf-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--card-fg2); }
.pf-sw { display: inline-flex; flex: none; }
.pf-sw i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--card-bg), inset 0 0 0 1px color-mix(in oklab, var(--ink) 25%, transparent); margin-inline-end: -3px; }
.pf-card__est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 12.5px; font-weight: 700; color: var(--card-px); line-height: 1.5; }
.pf-card__est > span { white-space: nowrap; }
.pf-card__est > span:last-child { flex-basis: 100%; font-weight: 600; color: var(--card-fg2); }
.pf-card__est > .pf-sep:nth-last-child(2) { display: none; }
.pf-sep { opacity: .5; }
.pf-card__est .pf-sep:has(+ .is-empty) { visibility: hidden; }
.pf-card__from .pf-card__px { font-weight: inherit; }
.pf-card__cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--card-fg); }
.pf-card__cta i { transition: transform .4s var(--ease); font-size: 14px; }
.pf-card:hover .pf-card__cta i { transform: translateX(calc(5px * var(--dir))); }
.pf-empty { display: none; margin-top: 18px; padding: 16px 20px; border-radius: 18px; background: var(--card-bg); box-shadow: 0 0 0 1px var(--card-line); font-weight: 600; }
.pf-empty.is-on { display: block; }
.pf-reset { min-height: 44px; padding: 0 14px; margin-inline-start: 4px; border-radius: 999px; background: var(--b2); color: var(--ink); font-weight: 700; font-size: 14px; }
.pf-reset:hover { background: var(--hot-lite); }
.pf-more { margin-top: clamp(20px, 3vw, 34px); display: flex; justify-content: center; }

/* filtered-in items pop (only items that were hidden) */
@keyframes pfPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.pf-card.is-pop { animation: pfPop .5s var(--ease) both; }

/* ---------- entrance states (portfolio.js adds them only below the fold, normal-height viewports) ---------- */
.pf-card.pf-pre { opacity: 0; transform: translateY(34px) rotate(calc(var(--r, 0) * 1deg)); }
.pf-card.pf-in { opacity: 1; transform: none; transition: opacity .7s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.pf-card--dash.pf-pre { transform: none; opacity: 1; }
.pf-card--dash.pf-pre .pf-card__media img { transform: scaleY(.03); filter: brightness(2.4) saturate(0); }
.pf-card--dash.pf-pre .pf-card__body { opacity: 0; }
.pf-card--dash.pf-in .pf-card__media img { transition: transform .8s cubic-bezier(.2, .9, .2, 1) var(--d, 0s), filter 1.1s ease var(--d, 0s); }
.pf-card--dash.pf-in .pf-card__body { transition: opacity .6s ease calc(var(--d, 0s) + .25s); }
.pf-card--fly.pf-pre { transform: translate(calc(var(--r, 1) * -26px), 40px) rotate(calc(var(--r, 1) * -7deg)); }
.pf-card--pack.pf-pre { transform: perspective(900px) rotateX(64deg) translateY(20px); transform-origin: 50% 0; }

/* ---------- LIGHTBOX ---------- */
.pf-lb { width: min(1180px, calc(100vw - 20px)); height: min(94vh, 1400px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 26px; background: var(--ink); color: var(--cream); overflow: hidden; box-shadow: 0 40px 120px -30px rgb(0 0 0 / .7); }
.pf-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: pfLbIn .45s var(--ease) both; }
.pf-lb::backdrop { background: color-mix(in oklab, var(--deep) 84%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes pfLbIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.pf-lb__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line-deep); }
[dir="rtl"] .pf-lb__bar { padding: 10px 20px 10px 10px; }
.pf-lb__cap { flex: 1 1 260px; min-width: 0; font-weight: 650; font-size: 15px; line-height: 1.35; }
.pf-lb__pos { font: 400 18px/1 var(--f-num); color: var(--b2); direction: ltr; unicode-bidi: isolate; }
.pf-lb__acts { display: flex; align-items: center; gap: 6px; }
.pf-lb__btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-deep); color: var(--cream); font-size: 17px; transition: background-color .3s, color .3s; }
.pf-lb__btn:hover { background: var(--b2); color: var(--ink); box-shadow: none; }
.pf-lb__close { background: var(--cream); color: var(--ink); }
.pf-lb__open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--b2); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.pf-lb__open:hover { background: var(--hot-lite); }
.pf-lb :focus-visible { outline-color: var(--b2); }
.pf-lb__view { overflow: auto; overscroll-behavior: contain; padding: clamp(10px, 2vw, 24px); display: grid; justify-items: center; align-items: start; }
.pf-lb__view img { width: 100%; max-width: 1100px; height: auto; border-radius: 12px; background: color-mix(in oklab, var(--cream) 8%, transparent); }
.pf-lb__view.is-portrait img { max-width: min(760px, 100%); }
.pf-lb__view.is-loading img { opacity: .55; filter: blur(2px); transition: opacity .3s, filter .3s; }
.pf-lb__hint { padding: 8px 20px 12px; font-size: 12.5px; color: var(--on-deep-2); }
.pf-lb__hint kbd { font: 600 11.5px/1 var(--f-body); padding: 3px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-deep); }
html.pf-lb-open { overflow: hidden; }

/* ---------- FINAL ---------- */
.pf-final .final__title .f1 { font-size: calc(var(--W) / 4.55); line-height: .9; }
.pf-final .final__title .f2 { font-size: calc(var(--W) / 6.1); line-height: 1.02; margin-top: -.07em; }
.pf-final .final__title .f2 em { font-size: 1em; line-height: 1; color: var(--deep); }
:root:lang(ar) .pf-final .final__title .f1 { font-size: clamp(54px, 13vw, 190px); }
:root:lang(ar) .pf-final .final__title .f2 { font-size: clamp(50px, 13vw, 176px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1023px) {
  .pf-tix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-deck__in { border-radius: 24px; }
  .pf-search { flex: 1 1 100%; }
  .pf-deck__count { margin-inline-start: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pf-grid--web, .pf-grid--pack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-grid--fly { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-grid--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-card__title { font-size: 19px; }
}
@media (max-width: 767px) {
  .pf-jump { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 6px; }
  .pf-jump a { grid-column: span 2; padding-inline: 10px; }
  .pf-jump a:nth-child(4), .pf-jump a:nth-child(5) { grid-column: span 3; }
  .pf-jump a:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .pf-hero .ph__slot { min-height: 220px; margin-block: -10px -20px; }
  .pf-coll__n { display: none; }
  .pf-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); scroll-padding-inline: var(--g); }
  .pf-chips::-webkit-scrollbar { display: none; }
  .pf-tools__note { margin-inline-start: 0; }
  .pf-grid, .pf-grid--dash, .pf-grid--fly { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pf-card { border-radius: 15px; }
  .pf-card__media { margin: 4px 4px 0; border-radius: 11px; }
  .pf-card__body { padding: 10px 10px 12px; gap: 4px; }
  .pf-card__title { font-size: 17.5px; }
  :root:lang(ar) .pf-card__title { font-size: 15px; }
  .pf-card__meta { font-size: 11.5px; }
  .pf-card__est { font-size: 11.5px; gap: 0 5px; }
  .pf-card__badge { font-size: 9.5px; min-height: 20px; padding: 0 7px; inset-inline-start: 6px; bottom: 6px; }
  .pf-zoom { width: 40px; height: 40px; font-size: 14px; inset-inline-end: 4px; top: 4px; }
  .pf-card--web .pf-zoom { top: 20px; }
  .pf-card__cta { display: none; }
  .pf-lb { width: 100vw; height: 100dvh; border-radius: 0; }
  .pf-lb__hint { display: none; }
  .pf-lb__cap { font-size: 14px; flex-basis: 100%; }
  .pf-lb__acts { margin-inline-start: auto; }
}
@media (max-width: 420px) {
  .pf-tix { gap: 8px; }
  .pf-tix__item { --pad: 14px; --nsz: 72px; min-height: 220px; border-radius: 18px; }
  .pf-tix__label { font-size: 21px; }
  .pf-tix__sub { font-size: 12px; }
  .pf-tix__go { width: 40px; height: 40px; inset-inline-end: 10px; bottom: 10px; }
  .pf-deck__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-card.pf-pre, .pf-card--dash.pf-pre .pf-card__media img, .pf-card--dash.pf-pre .pf-card__body { opacity: 1 !important; transform: none !important; filter: none !important; }
  .pf-tix__item:hover, .pf-card:hover { transform: none; }
}