/* ═══════════════════════════════════════════════════════════════════
   PORTFOLIO-BRANDS.CSS  v5  —  Tasreea Portfolio
   High-End Creative Agency Experience
   ═══════════════════════════════════════════════════════════════════
   §0  TOKENS + KEYFRAMES
   §1  HERO — Two-Column Cinematic
   §2  HERO VISUAL STACK
   §3  TOOL BADGES
   §4  FILTER BAR
   §5  BRAND CARDS
   §6  MODAL
   §7  GALLERY — MASONRY
   §8  LIGHTBOX
   §9  CTA / UTILS
   §10 TABLET  ≤1100px
   §11 MOBILE  ≤767px
   §12 TINY    ≤400px
   §13 A11Y + PERF
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   §0  TOKENS + KEYFRAMES
   ══════════════════════════════════════════════════════════════════ */
:root {
  --or:     #F59E0B;
  --or2:    #E57000;
  --or-lt:  #FBBF24;
  --or-gl:  rgba(245,158,11,.26);
  --or-bd:  rgba(245,158,11,.30);
  --or-sf:  rgba(245,158,11,.10);
  --bg:     #0A0A0A;
  --bg2:    #0B1020;
  --sur:    #111111;
  --sur2:   #1A2030;
  --gl:     rgba(255,255,255,.04);
  --gl2:    rgba(255,255,255,.07);
  --bd:     rgba(255,255,255,.07);
  --bd2:    rgba(255,255,255,.13);
  --in:     inset 0 1px 0 rgba(255,255,255,.07);
  --tx:     #EDEFF4;
  --tx2:    #A6ADC0;
  --tx3:    #64748B;
  --e:      cubic-bezier(.4,0,.2,1);
  --spr:    cubic-bezier(.34,1.56,.64,1);
  --out:    cubic-bezier(.16,1,.3,1);
  --sh:
    0 1px 2px rgba(0,0,0,.35),
    0 8px 28px -4px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.04),
    var(--in);
  --sh-hov:
    0 4px 8px rgba(0,0,0,.4),
    0 20px 56px -6px rgba(0,0,0,.48),
    0 0 0 1px rgba(245,158,11,.18),
    0 0 40px rgba(245,158,11,.10),
    var(--in);
}

@keyframes pbPulse  { 0%,100%{opacity:.62;transform:scale(1) translate(var(--tx,0),var(--ty,0))} 50%{opacity:1;transform:scale(1.09) translate(var(--tx,0),var(--ty,0))} }
@keyframes pbFloat  { 0%,100%{transform:translateY(0) rotate(var(--r,0deg))} 50%{transform:translateY(-14px) rotate(var(--r,0deg))} }
@keyframes pbReveal { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes pbScale  { from{opacity:0;transform:scale(.9)}         to{opacity:1;transform:none} }
@keyframes pbCardIn { from{opacity:0;transform:translateY(28px) scale(.97)} to{opacity:1;transform:none} }
@keyframes pbShim   { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes pbBlink  { 0%,100%{opacity:1;box-shadow:0 0 8px var(--or)} 50%{opacity:.28;box-shadow:none} }
@keyframes pbScroll { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes pbModIn  { from{opacity:0;transform:translateY(28px) scale(.94)} to{opacity:1;transform:none} }
@keyframes pbGallIn { from{opacity:0;transform:scale(.93) translateY(16px)} to{opacity:1;transform:none} }
@keyframes pbLbIn   { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
@keyframes pbBarFill{ from{width:0} to{width:var(--w,0)} }
@keyframes pbSpin   { to{transform:rotate(360deg)} }

/* ══════════════════════════════════════════════════════════════════
   §1  HERO — Two-Column Cinematic
   ══════════════════════════════════════════════════════════════════ */
.pb-hero {
  padding: calc(var(--header-h,70px) + 32px) 0 48px;
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  isolation: isolate;
}

/* Background */
.pb-bg { position:absolute;inset:0;pointer-events:none;z-index:0; }
.pb-bg-grid {
  display: none;
}
.pb-bg-glow {
  position:absolute;border-radius:50%;filter:blur(90px);
  pointer-events:none;will-change:opacity,transform;
  animation:pbPulse var(--dur,8s) ease-in-out infinite var(--del,0s);
}
.pb-glow-c { --dur:7s;--del:0s; width:650px;height:550px;top:-100px;right:0%;background:radial-gradient(ellipse,rgba(245,158,11,.18) 0%,transparent 65%); }
.pb-glow-r { --dur:10s;--del:3s;width:400px;height:350px;bottom:-60px;left:5%;background:radial-gradient(ellipse,rgba(245,158,11,.10) 0%,transparent 65%); }
.pb-glow-l { --dur:12s;--del:1.5s;width:300px;height:280px;top:30%;left:2%;background:radial-gradient(ellipse,rgba(59,130,246,.065) 0%,transparent 65%); }
.pb-canvas  { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6; }

/* Hero two-column layout */
.pb-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative; z-index: 2;
}

/* LEFT */
.pb-hero-left { display:flex;flex-direction:column;align-items:flex-start; }

.pb-eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:rgba(245,158,11,.09);border:1px solid var(--or-bd);
  font-size:.78rem;font-weight:700;color:var(--or);letter-spacing:.06em;
  margin-bottom:22px;animation:pbReveal .55s ease both;
  text-transform:uppercase;
}
.pb-eyebrow-dot {
  width:7px;height:7px;border-radius:50%;
  background:var(--or);flex-shrink:0;
  animation:pbBlink 2s ease-in-out infinite;
}

.pb-hero-h1 {
  font-size:clamp(3.2rem,6vw,5.6rem);
  font-weight:900;letter-spacing:-.045em;line-height:1.18;
  color:var(--tx);margin:0 0 20px;
  animation:pbReveal .6s ease .08s both;
}
.pb-hero-h1-accent {
  display:block;
  margin-top:0.15em;
  padding-bottom:0.18em;
  background:linear-gradient(120deg,#FFD080 0%,#F59E0B 50%,#FF5500 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.pb-hero-desc {
  font-size:clamp(.95rem,1.4vw,1.06rem);color:var(--tx2);
  line-height:1.82;max-width:420px;margin:0 0 32px;
  animation:pbReveal .6s ease .16s both;
}

/* Stats */
.pb-hero-stats {
  display:flex;align-items:center;gap:20px;
  padding:14px 22px;border-radius:14px;
  background:var(--gl);border:1px solid var(--bd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.04);
  margin-bottom:28px;
  animation:pbReveal .6s ease .22s both;
}
.pb-hstat    { text-align:center; }
.pb-hstat-n  { font-size:1.5rem;font-weight:900;color:var(--or);line-height:1;font-family:var(--font-num,inherit); }
.pb-hstat-l  { font-size:.7rem;color:var(--tx2);margin-top:4px;font-weight:600;white-space:nowrap; }
.pb-hstat-sep{ width:1px;height:30px;background:var(--bd); }

/* Actions */
.pb-hero-actions {
  display:flex;gap:12px;flex-wrap:wrap;
  animation:pbReveal .6s ease .28s both;
}

/* Scroll hint */
.pb-scroll-hint {
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
}
.pb-scroll-line {
  width:1.5px;height:36px;
  background:linear-gradient(to bottom,var(--or),transparent);
  animation:pbScroll 2.2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════
   §2  HERO VISUAL STACK (right column)
   ══════════════════════════════════════════════════════════════════ */
.pb-hero-right {
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:480px;
  animation:pbReveal .8s ease .12s both;
}

/* Glow behind stack */
.pb-visual-glow {
  position:absolute;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.22) 0%,transparent 65%);
  filter:blur(60px);animation:pbPulse 4s ease-in-out infinite;
  pointer-events:none;
}

/* Stacked cards */
.pb-stack { position:relative;z-index:2;width:340px;max-width:100%; }

.pb-stack-card {
  background:rgba(10,14,30,.82);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(245,158,11,.18);
  border-radius:18px;padding:18px;
  box-shadow:
    0 24px 64px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.07);
  position:absolute;width:100%;
  transition:transform .4s var(--spr);
}
.pb-stack-card:hover { transform:translateY(-5px) !important; }

.pb-sc-1 { top:0;    z-index:3; animation:pbFloat 5s ease-in-out infinite; }
.pb-sc-2 { top:120px;z-index:2; animation:pbFloat 6s ease-in-out infinite 1.2s; }
.pb-sc-3 { top:228px;z-index:1; animation:pbFloat 7s ease-in-out infinite 2.4s; }

/* Make right column tall enough for stack */
.pb-hero-right { min-height:460px; }
.pb-stack       { position:relative;width:340px;height:360px; }

/* Card header */
.pb-sc-header {
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.pb-sc-avatar {
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:900;
  box-shadow:0 0 0 2px rgba(255,255,255,.1);
}
.pb-sc-brand { font-size:.88rem;font-weight:800;color:var(--tx); }
.pb-sc-sub   { font-size:.7rem;color:var(--tx2);margin-top:2px; }
.pb-sc-badge {
  margin-inline-start:auto;width:22px;height:22px;border-radius:50%;
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);
  color:#22c55e;font-size:.72rem;display:flex;align-items:center;justify-content:center;
}

/* Preview thumbs */
.pb-sc-preview { display:flex;gap:6px; }
.pb-sc-thumb {
  flex:1;height:52px;border-radius:8px;
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.06));
  border:1px solid rgba(245,158,11,.15);
}
.t1 { background:linear-gradient(135deg,#E4002B,#b30000); }
.t2 { background:linear-gradient(135deg,#F59E0B,#E57000); }
.t3 { background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); }

/* Progress bars in card 2 */
.pb-sc-bar-wrap { display:flex;flex-direction:column;gap:6px; }
.pb-sc-bar-label{ display:flex;justify-content:space-between;font-size:.68rem;color:var(--tx2);margin-bottom:2px; }
.pb-sc-bar      { height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden; }
.pb-sc-bar-fill {
  height:100%;border-radius:999px;
  animation:pbBarFill 1.5s var(--out) .5s both;
}

/* Stat chip */
.pb-hero-chip {
  position:absolute;
  bottom:-14px;left:-16px;z-index:4;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;
  background:rgba(10,14,30,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--or-bd);
  box-shadow:0 10px 36px rgba(0,0,0,.4),0 0 20px rgba(245,158,11,.08);
  animation:pbFloat 4.5s ease-in-out infinite;
}
.pb-chip-emoji { font-size:1.4rem;flex-shrink:0; }
.pb-chip-val   { font-size:1.1rem;font-weight:900;color:var(--or);line-height:1; }
.pb-chip-lbl   { font-size:.68rem;color:var(--tx2);margin-top:3px; }

/* ══════════════════════════════════════════════════════════════════
   §3  TOOL BADGES
   ══════════════════════════════════════════════════════════════════ */
.pb-tool-badge {
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:12px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  font-size:.8rem;font-weight:800;letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
  white-space:nowrap;
}
.pb-tool-dot {
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.pb-dot-ai { background:#F59E0B;box-shadow:0 0 8px #F59E0B; }
.pb-dot-ae { background:#9B8EC4;box-shadow:0 0 8px #9B8EC4; }
.pb-dot-ps { background:#4BA3FF;box-shadow:0 0 8px #4BA3FF; }

.pb-badge-ai  {
  top:6%;right:-8px;color:#F59E0B;
  background:rgba(245,158,11,.13);
  border-color:rgba(245,158,11,.3);
  animation:pbFloat 6s ease-in-out infinite;
}
.pb-badge-ae  {
  top:40%;right:-22px;color:#9B8EC4;
  background:rgba(155,142,196,.13);
  border-color:rgba(155,142,196,.28);
  animation:pbFloat 8s ease-in-out infinite 1.4s;
}
.pb-badge-ps  {
  top:68%;right:-8px;color:#4BA3FF;
  background:rgba(75,163,255,.13);
  border-color:rgba(75,163,255,.28);
  animation:pbFloat 7s ease-in-out infinite 2.8s;
}
.pb-badge-fig {
  top:8%;left:2%;color:var(--tx);
  background:rgba(0,196,204,.10);
  border-color:rgba(0,196,204,.25);
  animation:pbFloat 9s ease-in-out infinite .6s;
}

/* ══════════════════════════════════════════════════════════════════
   §4  FILTER BAR
   ══════════════════════════════════════════════════════════════════ */
.pb-section  { padding-top:0; }

.pb-filters {
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-bottom:36px;padding:12px 14px;
  background:var(--surface-1,#131B2D);
  border:1px solid var(--border,rgba(255,255,255,.07));
  border-radius:16px;
  position:sticky;top:var(--header-h,70px);z-index:50;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 28px rgba(0,0,0,.3);
}
.pb-f {
  padding:8px 17px;border-radius:10px;
  border:1.5px solid var(--bd);
  background:transparent;color:var(--tx2);
  font-family:inherit;font-size:.84rem;font-weight:700;
  cursor:pointer;transition:all .18s var(--e);
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.pb-f:hover  { border-color:rgba(245,158,11,.4);color:var(--or);background:var(--or-sf); }
.pb-f.active { background:var(--or);border-color:var(--or);color:#fff;box-shadow:0 4px 18px rgba(245,158,11,.42); }
.pb-f-sort {
  margin-inline-start:auto;flex-shrink:0;
  display:flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:10px;
  border:1.5px solid var(--bd);background:transparent;
  color:var(--tx2);font-family:inherit;font-size:.84rem;font-weight:700;
  cursor:pointer;transition:all .18s var(--e);white-space:nowrap;
}
.pb-f-sort:hover { border-color:rgba(245,158,11,.35);color:var(--or); }

/* ══════════════════════════════════════════════════════════════════
   §5  BRAND CARDS
   ══════════════════════════════════════════════════════════════════ */
.pb-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-bottom: 20px;
}

/* Card */
.pb-card {
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:18px;
  padding:24px 20px 18px;
  position:relative;overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;
  animation:pbCardIn .44s ease both;
  box-shadow:var(--sh);
  transition:
    transform .32s var(--spr),
    box-shadow .32s var(--e),
    border-color .22s;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.pb-card::before {
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(245,158,11,.075) 0%,transparent 52%);
  opacity:0;transition:opacity .3s var(--e);pointer-events:none;
}
.pb-card:hover {
  transform:translateY(-8px) scale(1.012);
  border-color:rgba(245,158,11,.4);
  box-shadow:var(--sh-hov);
}
.pb-card:hover::before { opacity:1; }
.pb-card > * { position:relative;z-index:1; }

/* Badge */
.pb-badge {
  position:absolute;top:14px;right:14px;z-index:2;
  padding:3px 9px;border-radius:999px;
  background:rgba(245,158,11,.11);border:1px solid rgba(245,158,11,.28);
  font-size:.63rem;font-weight:800;color:var(--or);
  display:flex;align-items:center;gap:4px;letter-spacing:.02em;
}
.pb-badge::before {
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--or);box-shadow:0 0 6px var(--or);flex-shrink:0;
}

/* Logo */
.pb-logo {
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:8px auto 20px;
  font-size:1rem;font-weight:900;letter-spacing:-.02em;
  background:#FFFFFF;
  border:2.5px solid rgba(255,255,255,0.90);
  box-shadow:
    0 0 0 4px rgba(245,158,11,0.22),
    0 12px 32px rgba(0,0,0,0.55);
  transition:transform .36s var(--spr),box-shadow .3s var(--e);
  overflow:hidden;flex-shrink:0;
  position:relative;
}
/* Image logos — يملأ الدايرة كامل */
.pb-logo img {
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  display:block;
}
/* Initial letter — when no image */
.pb-logo span {
  font-size:2rem;font-weight:900;
  letter-spacing:-.03em;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
  user-select:none;line-height:1;
}
.pb-card:hover .pb-logo {
  transform:scale(1.1) translateY(-4px);
  box-shadow:0 0 0 8px rgba(245,158,11,.16),0 18px 40px rgba(0,0,0,.5);
}

/* Text */
.pb-cname { font-size:1.08rem;font-weight:800;color:var(--tx);text-align:center;margin-bottom:5px;letter-spacing:-.01em; }
.pb-ctag  { font-size:.7rem;font-weight:600;color:var(--or);text-align:center;margin-bottom:8px;letter-spacing:.02em;opacity:.88; }
.pb-cdesc {
  font-size:.78rem;color:var(--tx2);line-height:1.65;
  text-align:center;margin-bottom:15px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;
}

/* Service icons */
/* pb-csvcs removed */

/* Divider */
.pb-cdiv { height:1px;background:var(--bd);margin:0 0 14px; }

/* CTA — slide fill */
.pb-cbtn {
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px 16px;border-radius:12px;
  background:rgba(245,158,11,.09);border:1.5px solid rgba(245,158,11,.28);
  color:var(--or);font-family:inherit;font-size:.86rem;font-weight:700;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .28s var(--out),border-color .2s,box-shadow .28s;
  -webkit-tap-highlight-color:transparent;
}
.pb-cbtn::before {
  content:'';position:absolute;inset:0;background:var(--or);
  transform:scaleX(0);transform-origin:right;
  transition:transform .28s var(--out);z-index:0;
}
.pb-cbtn:hover::before   { transform:scaleX(1);transform-origin:left; }
.pb-cbtn:hover           { color:#fff;border-color:var(--or);box-shadow:0 4px 22px rgba(245,158,11,.44); }
.pb-cbtn span,.pb-cbtn svg { position:relative;z-index:1;transition:transform .26s var(--spr); }
.pb-cbtn:hover svg { transform:translateX(-4px); }

/* Empty */
.pb-empty     { text-align:center;padding:80px 20px;grid-column:1/-1; }
.pb-empty-ico { font-size:3rem;margin-bottom:14px;display:block; }
.pb-empty-h   { font-size:1.05rem;font-weight:800;color:var(--tx);margin-bottom:6px; }
.pb-empty-p   { font-size:.86rem;color:var(--tx2); }

/* ══════════════════════════════════════════════════════════════════
   §6  MODAL  — Fixed Sticky CTA + Scrollable Body
   ══════════════════════════════════════════════════════════════════ */

/* Overlay */
.pb-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(3,7,18,.92);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--e);
}
.pb-modal:not([hidden]) { opacity: 1; pointer-events: all; }
.pb-modal-bg { position: absolute; inset: 0; cursor: pointer; }

/* Modal box — fixed height flex column */
.pb-modal-box {
  position: relative; z-index: 1;
  background: var(--bg-2,#0E1525);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  width: 100%; max-width: 920px;
  /* KEY: fixed height, do NOT set overflow here */
  height: min(90vh, 900px);
  display: flex; flex-direction: column;
  overflow: hidden;          /* clip, not scroll */
  box-shadow: 0 36px 90px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.04);
  transform: scale(.93) translateY(24px);
  transition: transform .38s var(--spr);
}
.pb-modal:not([hidden]) .pb-modal-box {
  transform: scale(1) translateY(0);
  animation: pbModIn .38s var(--spr) both;
}

/* ① Sticky top bar — flex-shrink:0 so it never shrinks */
.pb-modal-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: var(--bg-2,#0E1525);
  backdrop-filter: blur(16px);
  z-index: 10;
}
.pb-modal-back {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 10px;
  border: 1px solid var(--bd2); background: transparent;
  color: var(--text-2,#CBD5E1); font-family: inherit;
  font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: all .18s;
  -webkit-tap-highlight-color: transparent;
}
.pb-modal-back:hover { background: var(--surface-hover,#1B273F); color: var(--text,#F1F5F9); }
.pb-modal-x {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--bd2); background: transparent;
  color: var(--tx2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; -webkit-tap-highlight-color: transparent;
}
.pb-modal-x:hover { background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.35); color: #EF4444; }

/* ② Scrollable body — flex:1 takes remaining height */
.pb-modal-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(245,158,11,.3) transparent;
}
.pb-modal-scroll::-webkit-scrollbar       { width: 5px; }
.pb-modal-scroll::-webkit-scrollbar-track { background: transparent; }
.pb-modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(245,158,11,.3);
  border-radius: 999px;
}

/* ③ Sticky bottom CTA — flex-shrink:0 */
.pb-mfoot {
  flex-shrink: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: var(--bg-2,#0E1525);
  position: relative; z-index: 5;
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.pb-mfoot-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}

/* Gallery spacer — extra bottom padding so last row shows above CTA */
.pb-gallery-spacer { height: 8px; }

/* Brand hero — FIXED no overflow:hidden */
.pb-mhero {
  display: flex; align-items: flex-start; gap: 22px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  /* NO overflow:hidden — was clipping text */
  background: linear-gradient(135deg, rgba(245,158,11,.055) 0%, transparent 55%);
}

/* Logo wrap with ring glow */
.pb-mhero-logo-wrap {
  position: relative; flex-shrink: 0;
  width: 108px; height: 108px;
}
.pb-mhero-logo {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em;
  background: #FFFFFF;
  border: 3px solid rgba(255,255,255,0.85);
  overflow: hidden;
  box-shadow:
    0 0 0 6px rgba(245,158,11,0.22),
    0 12px 36px rgba(0,0,0,.5);
  position: relative; z-index: 2;
}
.pb-mhero-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}
/* Animated ring */
.pb-mhero-logo-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(245,158,11,.3);
  box-shadow: 0 0 20px rgba(245,158,11,.15);
  animation: pbPulse 3s ease-in-out infinite;
  z-index: 1; pointer-events: none;
}

.pb-mhero-info {
  flex: 1; min-width: 0;
  /* Ensure text doesn't get cut */
  overflow: visible;
}
.pb-mhero-name {
  font-size: 1.7rem; font-weight: 900;
  color: var(--text,#F1F5F9);
  margin: 0 0 5px;
  letter-spacing: -.028em;
  white-space: normal;      /* allow wrap */
  word-break: break-word;
}
.pb-mhero-tag  {
  font-size: .82rem; font-weight: 700;
  color: var(--or); margin-bottom: 8px;
  letter-spacing: .025em;
}
.pb-mhero-desc {
  font-size: .88rem; color: var(--text-3,#94A3B8);
  line-height: 1.72; margin-bottom: 14px;
  word-break: break-word;
}
.pb-mhero-svcs { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-msvc-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25);
  font-size: .73rem; font-weight: 700; color: var(--or);
}

/* Stats */
.pb-mstats {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.pb-mstat {
  padding: 16px 12px; text-align: center;
  border-inline-end: 1px solid rgba(255,255,255,.07);
}
.pb-mstat:last-child { border-inline-end: none; }
.pb-mstat-n {
  font-size: 1.5rem; font-weight: 900; color: var(--or);
  font-family: var(--font-num,inherit); line-height: 1;
}
.pb-mstat-l { font-size: .72rem; color: var(--text-4,#64748B); margin-top: 4px; font-weight: 600; }

/* Tabs */
.pb-mtabs {
  display: flex; gap: 2px; padding: 12px 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  overflow-x: auto; scrollbar-width: none;
  flex-shrink: 0;
}
.pb-mtabs::-webkit-scrollbar { display: none; }
.pb-mtab {
  padding: 9px 18px; border-radius: 10px 10px 0 0; border: none;
  background: transparent; color: var(--tx2);
  font-family: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer; transition: all .18s;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.pb-mtab:hover  { color: var(--text,#F1F5F9); }
.pb-mtab.active { color: var(--or); border-bottom-color: var(--or); }

/* ══════════════════════════════════════════════════════════════════
   §7  GALLERY — MASONRY (inside scrollable modal)
   ══════════════════════════════════════════════════════════════════ */

.pb-mgallery {
  padding: 18px 18px 10px;
  columns: 3;
  column-gap: 10px;
}

/* Empty state */
.pb-mg-empty {
  column-span: all;
  text-align: center; padding: 48px 20px;
  color: var(--tx2); font-size: .87rem;
}

/* Skeleton */
.pb-mgskel {
  display: block; width: 100%; margin-bottom: 10px;
  border-radius: 12px; break-inside: avoid;
  background: linear-gradient(90deg,
    var(--surface-2,#182338) 25%,
    var(--surface-3,#1F2C45) 50%,
    var(--surface-2,#182338) 75%);
  background-size: 200% 100%;
  animation: pbShim 1.4s infinite;
}

/* Gallery item — KEY: must have intrinsic height */
.pb-mgi {
  display: block; width: 100%;
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2,#182338);
  cursor: pointer;
  position: relative;
  break-inside: avoid;
  /* Animation */
  animation: pbGallIn .35s ease both;
  transition: transform .3s var(--spr), box-shadow .3s;
}
.pb-mgi:hover {
  transform: scale(1.025) translateY(-3px);
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  z-index: 2;
}

/* Images — natural height preserved */
.pb-mgi img {
  width: 100%;
  height: auto;           /* natural aspect ratio */
  display: block;
  object-fit: cover;
  transition: transform .45s var(--e);
}
.pb-mgi:hover img { transform: scale(1.08); }

/* Overlay */
.pb-mgi-ov {
  position: absolute; inset: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .22s;
}
.pb-mgi:hover .pb-mgi-ov { background: rgba(0,0,0,.36); }

/* Zoom icon */
.pb-mgi-zoom {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(245,158,11,.9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.72); font-size: .88rem;
  transition: all .26s var(--spr);
}
.pb-mgi:hover .pb-mgi-zoom { opacity: 1; transform: scale(1); }

/* Caption */
.pb-mgi-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 10px 9px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: #fff; font-size: .74rem; font-weight: 700;
  opacity: 0; transition: opacity .22s;
  pointer-events: none;
}
.pb-mgi:hover .pb-mgi-cap { opacity: 1; }

/* Video card */
.pb-mgi-video {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  aspect-ratio: 16/9; gap: 10px;
  background: var(--surface-3,#1F2C45);
}
.pb-mgi-play {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(245,158,11,.9);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  box-shadow: 0 0 22px rgba(245,158,11,.45);
  transition: transform .22s var(--spr), box-shadow .22s;
}
.pb-mgi:hover .pb-mgi-play { transform: scale(1.12); box-shadow: 0 0 34px rgba(245,158,11,.65); }
.pb-mgi-vlbl { font-size: .74rem; color: var(--tx2); font-weight: 600; }

/* Video player (embedded) */
.pb-mgi-video-player {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
  overflow: hidden;
}
.pb-mgi-video-player video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pb-mgi-video-thumb {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity .22s;
}
.pb-mgi-video-thumb.hidden { opacity: 0; pointer-events: none; }
.pb-mgi-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .22s;
}
.pb-mgi-play-overlay.hidden { opacity: 0; pointer-events: none; }


/* Video wrap — same hover as image items */
.pb-mgi-video-wrap {
  display: block; width: 100%;
  margin-bottom: 10px;
  border-radius: 12px; overflow: hidden;
  background: var(--sur2,#1A2030);
  cursor: pointer; position: relative;
  break-inside: avoid;
  animation: pbGallIn .35s ease both;
  transition: transform .3s var(--spr), box-shadow .3s;
}
.pb-mgi-video-wrap:hover {
  transform: scale(1.025) translateY(-3px);
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  z-index: 2;
}
.pb-mgi-video-player {
  width: 100%; aspect-ratio: 4/3;
  background: #000; position: relative; overflow: hidden;
}
.pb-mgi-video-player video {
  width: 100%; height: 100%; object-fit: cover; display: none;
}
.pb-mgi-video-thumb {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity .3s;
}
.pb-mgi-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28);
  transition: opacity .22s;
}

/* ══════════════════════════════════════════════════════════════════
   §8  LIGHTBOX
   ══════════════════════════════════════════════════════════════════ */
.pb-lb {
  position:fixed;inset:0;z-index:20000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.97);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  opacity:0;pointer-events:none;
  transition:opacity .26s var(--e);
}
.pb-lb:not([hidden]) { opacity:1;pointer-events:all; }
.pb-lb-bg { position:absolute;inset:0;cursor:pointer; }

.pb-lb-x {
  position:absolute;top:18px;left:18px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .18s;backdrop-filter:blur(8px);font-size:1rem;
}
.pb-lb-x:hover { background:#EF4444;border-color:#EF4444; }
.pb-lb-arr {
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--spr);backdrop-filter:blur(8px);font-size:1.5rem;
}
.pb-lb-arr:hover { background:var(--or);border-color:var(--or);transform:translateY(-50%) scale(1.08); }
.pb-lb-prev { right:18px; }
.pb-lb-next { left:18px; }
.pb-lb-stage { position:relative;z-index:1;max-width:920px;width:100%;text-align:center; }
.pb-lb-img {
  max-width:100%;max-height:82vh;border-radius:14px;object-fit:contain;
  display:block;margin:0 auto;
  box-shadow:0 30px 90px rgba(0,0,0,.8);
  transition:opacity .22s;
  animation:pbLbIn .28s ease;
}
.pb-lb-video {
  max-width:100%;
  max-height:85vh;
  width:100%;
  border-radius:14px;
  display:block;
  margin:0 auto;
  background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.9);
  outline:none;
  animation:pbLbIn .28s ease;
}
/* Wider stage for video */
.pb-lb-stage:has(.pb-lb-video:not([style*="display:none"])) {
  max-width: min(960px, 95vw);
}
.pb-lb-cap     { margin-top:16px;display:flex;align-items:center;justify-content:center;gap:16px; }
.pb-lb-title   { font-size:.9rem;font-weight:700;color:rgba(255,255,255,.65); }
.pb-lb-ctr     { font-size:.72rem;color:rgba(255,255,255,.38);font-weight:600; }

/* ══════════════════════════════════════════════════════════════════
   §9  CTA / UTILS
   ══════════════════════════════════════════════════════════════════ */
.pb-cta-section { padding-top: 80px; }
.pb-cta-emoji   { font-size:2.2rem;margin-bottom:10px; }
.pb-cta-h2      { margin:12px 0 14px; }
.pb-cta-p       { max-width:500px;margin:0 auto; }

/* ══════════════════════════════════════════════════════════════════
   §10  TABLET  ≤1100px
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .pb-grid { grid-template-columns:repeat(3,1fr); }
  .pb-hero-right { display:none; }
  .pb-hero-layout { grid-template-columns:1fr; }
  .pb-hero-left { align-items:center;text-align:center; }
  .pb-hero-desc { max-width:560px; }
  .pb-hero { min-height:auto; }
}
@media(max-width:900px) {
  .pb-grid      { grid-template-columns:repeat(2,1fr);gap:16px; }
  .pb-mgallery  { column-count:2; }
  .pb-mstats    { grid-template-columns:repeat(2,1fr); }
  .pb-mhero     { gap:18px; }
}

/* ══════════════════════════════════════════════════════════════════
   §11  MOBILE  ≤767px
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:767px) {
  /* Hero */
  .pb-hero      { padding:calc(var(--header-h,60px) + 44px) 0 44px;min-height:auto; }
  .pb-hero-layout { grid-template-columns:1fr; }
  .pb-hero-right  { display:none; }
  .pb-hero-left   { align-items:center;text-align:center; }
  .pb-hero-h1   { font-size:clamp(2.6rem,9vw,3.6rem); }
  .pb-hero-desc { font-size:.92rem;max-width:90%; }
  .pb-hero-stats{ flex-wrap:wrap;gap:14px;padding:12px 16px; }
  .pb-hero-actions { justify-content:center; }
  .pb-scroll-hint { display:none; }
  .pb-eyebrow   { font-size:.72rem; }

  /* Filter */
  .pb-filters {
    padding:10px 12px;gap:6px;
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;top:52px;border-radius:12px;
    -webkit-overflow-scrolling:touch;
  }
  .pb-filters::-webkit-scrollbar { display:none; }
  .pb-f       { padding:7px 13px;font-size:.79rem;flex-shrink:0;border-radius:9px; }
  .pb-f-sort  { flex-shrink:0;padding:7px 11px;border-radius:9px; }

  /* Cards */
  .pb-grid  { grid-template-columns:1fr 1fr;gap:11px; }
  .pb-card  { padding:16px 14px 14px;border-radius:14px; }
  .pb-logo  { width:62px;height:62px; }
  .pb-cname { font-size:.92rem; }
  .pb-ctag  { font-size:.66rem; }
  .pb-cdesc { font-size:.74rem;-webkit-line-clamp:2; }
  .pb-badge { top:12px;right:12px;font-size:.58rem;padding:2px 7px; }

  .pb-cbtn  { padding:10px 12px;font-size:.81rem;border-radius:10px; }

  /* Modal — full height bottom sheet on mobile */
  .pb-modal        { padding: 0; align-items: flex-end; }
  .pb-modal-box    {
    border-radius: 22px 22px 0 0;
    width: 100%; max-width: 100%;
    height: 96dvh;         /* full screen minus a little */
    max-height: 96dvh;
  }
  .pb-mhero        { flex-direction: column; text-align: center; gap: 12px; padding: 18px 16px 14px; }
  .pb-mhero-logo-wrap { margin: 0 auto; }
  .pb-mhero-logo-wrap { width: 82px; height: 82px; }
  .pb-mhero-name   { font-size: 1.3rem; }
  .pb-mhero-svcs   { justify-content: center; }
  .pb-mstats       { grid-template-columns: repeat(2,1fr); }
  .pb-mstat-n      { font-size: 1.3rem; }
  .pb-mgallery     { columns: 2; column-gap: 8px; padding: 14px 12px 10px; }
  .pb-mgskel       { height: 110px !important; }
  .pb-mfoot        { padding: 10px 14px 16px; }
  .pb-mtab         { padding: 8px 12px; font-size: .8rem; }
  .pb-modal-bar    { padding: 10px 14px; }
  .pb-mhero-name   { word-break: break-word; }

  /* Lightbox */
  .pb-lb-arr { display:none; }
  .pb-lb-img { max-height:72vh;border-radius:10px; }
}

/* ══════════════════════════════════════════════════════════════════
   §12  TINY  ≤400px
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:400px) {
  .pb-grid     { grid-template-columns:1fr; }
  .pb-mgallery { column-count:1; }
  .pb-hero-stats{ gap:10px;padding:10px 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   §13  A11Y + PERF
   ══════════════════════════════════════════════════════════════════ */
.pb-f:focus-visible,.pb-card:focus-visible,.pb-cbtn:focus-visible,
.pb-mtab:focus-visible,.pb-mgi:focus-visible,
.pb-modal-back:focus-visible,.pb-modal-x:focus-visible,
.pb-lb-x:focus-visible,.pb-lb-arr:focus-visible {
  outline:2px solid var(--or);outline-offset:2px;
}
.pb-bg-glow,.pb-fi,.pb-modal-box,.pb-stack-card { will-change:transform,opacity;backface-visibility:hidden; }
.pb-mgallery { contain:layout style; }
.pb-grid     { contain:layout; }

/* ── Preview Thumbnails ──────────────────────────────── */
.pb-previews {
  display:flex;gap:6px;margin:10px 0 4px;
  width:100%;justify-content:center;
}
.pb-preview-thumb {
  width:52px;height:38px;border-radius:6px;
  background-size:cover;background-position:center;
  background-color:var(--surface-3);
  border:1px solid var(--bdr);
  flex-shrink:0;
  transition:transform .2s,box-shadow .2s;
}
.pb-card:hover .pb-preview-thumb {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.pb-preview-more {
  width:52px;height:38px;border-radius:6px;
  background:var(--surface-3);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:800;color:var(--tx-2);
  flex-shrink:0;
}

/* ── Modal Breadcrumb ────────────────────────────────── */
.pb-breadcrumb {
  display:flex;align-items:center;
  padding:0 0 16px;
  font-size:0.82rem;
  border-bottom:1px solid var(--bdr);
  margin-bottom:4px;
}
.pb-bc-home:hover { color:var(--or) !important; }

/* ── Active Filter Button ────────────────────────────── */
.pb-filter-btn.active {
  background:var(--or) !important;
  border-color:var(--or) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(245,158,11,0.35) !important;
}

@media(prefers-reduced-motion:reduce) {
  .pb-card,.pb-bg-glow,.pb-tool-badge,.pb-stack-card,
  .pb-modal-box,.pb-mgi,.pb-hero-chip { animation:none!important;transition:none!important; }
}
.pb-hero,.pb-filters,.pb-grid,.pb-modal { overflow-x:hidden;max-width:100vw; }