/* ══════════════════════════════════════════════════════════════════
   BRAND SCAPE — PORTFOLIO (modern / animated)
   Namespaced `pf-` components. Loaded only on portfolio.php, after
   inner-modern.css + inner-extra.css, so nothing here fights the
   shared inner-page theme — it only adds to it.
   ══════════════════════════════════════════════════════════════════ */

.page-portfolio {
  --pf-gold:#c9a84c;
  --pf-cyan:#22d3ee;
  --pf-violet:#8b5cf6;
  --pf-pink:#f43f9d;
  --pf-blue:#3b46ff;
  --pf-card:#0b0917;
  --pf-ease:cubic-bezier(.22,1,.36,1);
}

/* The shared inner-page hero is replaced wholesale on this page. */
.page-portfolio .pg-hero { display:none; }
.page-portfolio [hidden] { display:none !important; }

/* Scroll-reveal state (JS adds .in). Gated on `html.js-reveal`, which the
   header sets inline before paint, so a blocked or failed script can never
   leave the grid permanently invisible. */
.js-reveal .pf-card,
.js-reveal [data-reveal] { opacity:0; }
.js-reveal [data-reveal] {
  transform:translateY(22px);
  transition:opacity .8s var(--pf-ease) var(--d,0ms),transform .8s var(--pf-ease) var(--d,0ms);
}
.js-reveal [data-reveal].in { opacity:1; transform:none; }

/* ══ 1. HERO ══════════════════════════════════════════════════════ */
.pf-hero {
  position:relative;
  min-height:clamp(560px,88svh,940px);
  display:flex; align-items:flex-end;
  padding:11rem 0 3.4rem;
  overflow:clip;
  isolation:isolate;
}
.pf-hero-media { position:absolute; inset:0; z-index:0; overflow:hidden; }
.pf-hero-media img {
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); opacity:0;
  animation:pf-ken 2.2s var(--pf-ease) forwards, pf-drift 26s 2.2s ease-in-out infinite alternate;
}
@keyframes pf-ken   { to { transform:scale(1.04); opacity:.5; } }
@keyframes pf-drift { to { transform:scale(1.12) translate3d(-1.5%,-1.5%,0); } }

/* Aurora blobs — the page's signature ambient motion. */
.pf-aurora { position:absolute; inset:-20% -10%; z-index:1; filter:blur(70px); opacity:.62; pointer-events:none; }
.pf-aurora span { position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.pf-aurora span:nth-child(1) { width:46vw; height:46vw; left:-6%;  top:2%;      background:radial-gradient(circle,rgba(59,70,255,.85),transparent 66%);  animation:pf-blob-a 19s ease-in-out infinite alternate; }
.pf-aurora span:nth-child(2) { width:40vw; height:40vw; right:-4%; top:-8%;     background:radial-gradient(circle,rgba(244,63,157,.70),transparent 66%); animation:pf-blob-b 23s ease-in-out infinite alternate; }
.pf-aurora span:nth-child(3) { width:34vw; height:34vw; left:34%;  bottom:-14%; background:radial-gradient(circle,rgba(34,211,238,.55),transparent 66%); animation:pf-blob-c 27s ease-in-out infinite alternate; }
@keyframes pf-blob-a { to { transform:translate3d(16%,10%,0) scale(1.18); } }
@keyframes pf-blob-b { to { transform:translate3d(-14%,14%,0) scale(.86); } }
@keyframes pf-blob-c { to { transform:translate3d(10%,-16%,0) scale(1.2); } }

/* Scrim. With no hero photo set the aurora *is* the artwork, so it only gets
   enough of a wash to keep the headline legible; a photo needs the heavier
   treatment to stop the text fighting the image. */
.pf-hero::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(100deg,rgba(5,4,9,.55) 0%,rgba(5,4,9,.2) 52%,transparent 80%),
    linear-gradient(180deg,rgba(5,4,9,.4) 0%,transparent 32%,rgba(5,4,9,.72) 86%,var(--bg) 100%);
}
.pf-hero.has-media::after {
  background:
    linear-gradient(105deg,rgba(5,4,9,.92) 0%,rgba(5,4,9,.62) 46%,rgba(5,4,9,.34) 76%,rgba(5,4,9,.6) 100%),
    linear-gradient(180deg,rgba(5,4,9,.55) 0%,transparent 30%,rgba(5,4,9,.86) 84%,var(--bg) 100%);
}
/* Fine film grain keeps the big flat gradients from banding. */
.pf-grain {
  position:absolute; inset:-100%; z-index:3; pointer-events:none; opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
  animation:pf-grain 900ms steps(4) infinite;
}
@keyframes pf-grain {
  0%   { transform:translate3d(0,0,0) }
  25%  { transform:translate3d(-2%,1%,0) }
  50%  { transform:translate3d(1%,-2%,0) }
  75%  { transform:translate3d(-1%,-1%,0) }
  100% { transform:translate3d(2%,1%,0) }
}

.pf-hero-inner { position:relative; z-index:4; width:min(1320px,92vw); margin-inline:auto; }

.pf-eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#d9f4fb; padding:.55rem 1.05rem; border-radius:100px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}
.pf-eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--pf-cyan); box-shadow:0 0 14px 3px var(--pf-cyan); animation:pf-pulse 2.4s var(--pf-ease) infinite; }
@keyframes pf-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.6)} }

.pf-hero h1 {
  font-family:var(--disp); font-weight:900;
  font-size:clamp(2.7rem,7.6vw,6.4rem); line-height:.98; letter-spacing:-.045em;
  margin:1.5rem 0 0; max-width:17ch; text-wrap:balance;
}
/* Per-word mask reveal — words are wrapped server-side. */
.pf-word { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; }
.pf-word > span {
  display:inline-block; transform:translateY(105%);
  animation:pf-word-up .95s var(--pf-ease) forwards;
  animation-delay:calc(var(--w,0) * 70ms + 180ms);
}
@keyframes pf-word-up { to { transform:translateY(0); } }
.pf-shine {
  background:linear-gradient(105deg,var(--pf-cyan),#fff 38%,var(--pf-violet) 72%,var(--pf-pink));
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:pf-shift 9s ease-in-out infinite;
}
@keyframes pf-shift { 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} }

.pf-hero-sub {
  max-width:58ch; margin:1.6rem 0 0; color:#d6d3e6;
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.68;
}
.pf-hero-cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem; }

/* Hero stat rail */
.pf-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; margin-top:3.2rem;
  border:1px solid rgba(255,255,255,.1); border-radius:20px;
  background:rgba(255,255,255,.08); overflow:hidden;
  backdrop-filter:blur(12px);
}
.pf-stat { padding:1.35rem 1.5rem; background:rgba(8,6,18,.72); position:relative; }
.pf-stat b {
  display:block; font-family:var(--disp); font-weight:900;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1; letter-spacing:-.03em;
  background:linear-gradient(140deg,#fff 20%,var(--pf-cyan));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pf-stat span { display:block; margin-top:.5rem; color:var(--muted); font-size:.74rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.pf-stat::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--pf-blue),var(--pf-pink)); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--pf-ease); }
.pf-stat:hover::after { transform:scaleX(1); }

.pf-scroll-cue { position:absolute; left:50%; bottom:1.5rem; z-index:4; translate:-50% 0; display:grid; justify-items:center; gap:.55rem; color:var(--faint); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; }
.pf-scroll-cue i { display:block; width:1px; height:42px; background:linear-gradient(180deg,transparent,var(--pf-cyan)); animation:pf-cue 2.2s ease-in-out infinite; }
@keyframes pf-cue { 0%,100%{opacity:.25;transform:scaleY(.4);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} }

/* ══ 2. CLIENT MARQUEE ════════════════════════════════════════════ */
.pf-marquee { position:relative; z-index:3; padding:1.5rem 0; border-block:1px solid var(--line); background:rgba(255,255,255,.02); overflow:hidden; }
.pf-marquee::before, .pf-marquee::after { content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none; }
.pf-marquee::before { left:0;  background:linear-gradient(90deg,var(--bg),transparent); }
.pf-marquee::after  { right:0; background:linear-gradient(270deg,var(--bg),transparent); }
.pf-mq-track { display:flex; width:max-content; gap:3rem; animation:pf-marquee 48s linear infinite; }
.pf-marquee:hover .pf-mq-track { animation-play-state:paused; }
@keyframes pf-marquee { to { transform:translate3d(-50%,0,0); } }
.pf-mq-item {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--disp); font-weight:700; font-size:.92rem; letter-spacing:.02em;
  color:var(--faint); white-space:nowrap; text-decoration:none; transition:color .35s;
}
.pf-mq-item:hover { color:var(--ink); }
.pf-mq-item img { height:22px; width:auto; max-width:76px; object-fit:contain; opacity:.55; filter:grayscale(1) brightness(1.8); transition:opacity .35s,filter .35s; }
.pf-mq-item:hover img { opacity:1; filter:none; }
.pf-mq-item::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--pf-gold); opacity:.5; }

/* ══ 3. STICKY FILTER BAR ═════════════════════════════════════════ */
.pf-work { position:relative; padding:0 0 4rem; --pf-nav:88px; scroll-margin-top:var(--pf-nav); }
/* The site header is `position:fixed` at 88–100px tall, so the bar parks
   just below it instead of sliding underneath. */
.pf-filter-wrap { position:sticky; top:var(--pf-nav); z-index:60; padding:1rem 0 .9rem; transition:background .35s,border-color .35s; border-bottom:1px solid transparent; border-radius:0 0 18px 18px; }
.pf-filter-wrap.is-stuck { border-bottom-color:var(--line); background:rgba(5,4,9,.88); backdrop-filter:blur(16px); }
.pf-shell { width:min(1320px,92vw); margin-inline:auto; }
.pf-filter {
  position:relative; display:flex; gap:.3rem; padding:.4rem;
  border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.045);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pf-filter::-webkit-scrollbar { display:none; }
/* Sliding indicator — JS drives --x / --w. */
.pf-pill {
  position:absolute; z-index:0; top:.4rem; bottom:.4rem; left:0;
  width:var(--w,0px); transform:translate3d(var(--x,0px),0,0);
  border-radius:100px; background:linear-gradient(120deg,var(--pf-blue),var(--pf-violet) 52%,var(--pf-pink));
  box-shadow:0 10px 30px -12px rgba(139,92,246,.85);
  transition:transform .55s var(--pf-ease),width .55s var(--pf-ease),opacity .3s;
  opacity:0;
}
.pf-pill.ready { opacity:1; }
.pf-tab {
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5rem;
  flex:0 0 auto; padding:.72rem 1.15rem; border:0; border-radius:100px;
  background:none; cursor:pointer; color:var(--muted);
  font-family:var(--body); font-size:.87rem; font-weight:600; white-space:nowrap;
  transition:color .35s;
}
.pf-tab:hover { color:var(--ink); }
.pf-tab[aria-selected="true"] { color:#fff; }
.pf-tab em { font-style:normal; font-size:.68rem; font-weight:700; padding:.08rem .45rem; border-radius:100px; background:rgba(255,255,255,.1); opacity:.85; }
.pf-tab .pf-dot { width:7px; height:7px; border-radius:50%; background:var(--tc,var(--pf-cyan)); box-shadow:0 0 10px 1px var(--tc,var(--pf-cyan)); }
.pf-tab[aria-selected="true"] .pf-dot { background:#fff; box-shadow:0 0 10px 1px rgba(255,255,255,.9); }

/* ══ 4. SECTION HEAD ══════════════════════════════════════════════ */
.pf-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding:2.6rem 0 1.8rem; }
.pf-sec-head h2 { font-family:var(--disp); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.5rem); letter-spacing:-.03em; margin:0; text-wrap:balance; }
.pf-sec-head p { color:var(--muted); font-size:.96rem; line-height:1.6; margin:.6rem 0 0; max-width:62ch; }
.pf-sec-count { font-family:var(--disp); font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:#cfeaf3; padding:.5rem 1rem; border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.04); white-space:nowrap; }

/* ══ 5. WORK GRID ═════════════════════════════════════════════════ */
/* 12-col with dense packing: featured items take a wider tile and the next
   standard card backfills the gap they leave, so the rhythm varies without
   ever punching a hole in the grid. */
.pf-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-flow:row dense; gap:1.5rem; }
.pf-card { grid-column:span 4; }
.pf-card.is-wide { grid-column:span 6; }
@media (max-width:1100px) { .pf-card, .pf-card.is-wide { grid-column:span 6; } }
@media (max-width:680px)  { .pf-grid { gap:1.1rem; } .pf-card, .pf-card.is-wide { grid-column:span 12; } }

.pf-card {
  position:relative; display:block; border-radius:22px; overflow:hidden;
  background:var(--pf-card); border:1px solid var(--line);
  cursor:pointer; text-decoration:none; color:inherit; text-align:left;
  transition:opacity .7s var(--pf-ease),transform .7s var(--pf-ease),border-color .4s,box-shadow .5s;
  will-change:transform,opacity;
}
.js-reveal .pf-card { transform:translateY(38px) scale(.97); }
.pf-card.in { opacity:1; transform:none; transition-delay:calc(var(--i,0) * 55ms); }
.pf-card:hover { border-color:rgba(255,255,255,.24); box-shadow:0 40px 80px -40px rgba(139,92,246,.75); }
.pf-card:focus-visible { outline:2px solid var(--pf-cyan); outline-offset:3px; }
/* Cursor-tracking spotlight (JS sets --mx/--my). */
.pf-card > .pf-glow {
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.11),transparent 62%);
  transition:opacity .45s;
}
.pf-card:hover > .pf-glow { opacity:1; }

.pf-thumb { position:relative; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg,#0d0b1c,#161029); }
.pf-card.is-wide .pf-thumb { aspect-ratio:16/10; }
.pf-thumb img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 1.1s var(--pf-ease),filter .6s;
  filter:saturate(.92);
}
.pf-card:hover .pf-thumb img { transform:scale(1.09); filter:saturate(1.12); }
.pf-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(6,5,14,.8) 100%); }
.pf-initials { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--disp); font-weight:900; font-size:3rem; letter-spacing:-.04em; opacity:.9; }

.pf-index { position:absolute; z-index:3; top:.9rem; right:1.05rem; font-family:var(--disp); font-weight:800; font-size:.7rem; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.pf-chip {
  position:absolute; z-index:3; top:.9rem; left:1rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.62rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:100px; color:#fff;
  background:rgba(8,6,18,.62); border:1px solid color-mix(in srgb,var(--cc,#22d3ee) 55%,transparent);
  backdrop-filter:blur(8px);
  transform:translateY(-6px); opacity:0; transition:transform .45s var(--pf-ease),opacity .45s;
}
.pf-card.in .pf-chip { transform:none; opacity:1; transition-delay:calc(var(--i,0) * 55ms + 220ms); }

/* ── Video work ──────────────────────────────────────────────────
   Videography sits in the same grid as stills, so it carries a play
   affordance: the still alone gives no clue there is footage behind it. */
.pf-play {
  position:absolute; z-index:3; inset:0; margin:auto;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:rgba(12,8,26,.55); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  transition:transform .45s var(--pf-ease),background .35s,border-color .35s;
}
.pf-play svg { width:22px; height:22px; margin-left:2px; }
/* Halo pulse, so it reads as "playable" rather than as a static icon. */
.pf-play::after {
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--cc,#9b6cf5);
  animation:pf-play-pulse 2.6s var(--pf-ease) infinite;
}
@keyframes pf-play-pulse {
  0%   { transform:scale(1);    opacity:.75 }
  70%  { transform:scale(1.55); opacity:0 }
  100% { transform:scale(1.55); opacity:0 }
}
.pf-card.is-video:hover .pf-play { transform:scale(1.12); background:var(--cc,#9b6cf5); border-color:transparent; }
.pf-card.is-wide .pf-play { width:68px; height:68px; }
.pf-card.is-wide .pf-play svg { width:26px; height:26px; }
/* Clip count sits opposite the index so the two never collide. */
.pf-clips {
  position:absolute; z-index:3; bottom:.85rem; right:1rem;
  font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:100px; color:#fff;
  background:rgba(8,6,18,.6); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px);
}

.pf-body { position:relative; z-index:3; padding:1.2rem 1.3rem 1.35rem; }
.pf-client { font-family:var(--disp); font-weight:800; font-size:1.16rem; line-height:1.2; letter-spacing:-.02em; margin:0; }
.pf-tagline { color:var(--muted); font-size:.88rem; line-height:1.55; margin:.45rem 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pf-view { display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem; font-size:.8rem; font-weight:700; color:var(--cc,#bfe9f5); }
.pf-view svg { width:15px; height:15px; transition:transform .4s var(--pf-ease); }
.pf-card:hover .pf-view svg { transform:translateX(5px); }
/* Bottom accent sweep in the card's category colour. */
.pf-card::before {
  content:""; position:absolute; z-index:5; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--cc,#22d3ee),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--pf-ease);
}
.pf-card:hover::before { transform:scaleX(1); }

/* Filter transition states */
.pf-card.is-out { opacity:0; transform:translateY(14px) scale(.96); transition-duration:.28s; transition-delay:0ms; pointer-events:none; }
.pf-card.is-hidden { display:none; }

.pf-empty { padding:3.5rem 0; text-align:center; color:var(--muted); }

/* ══ 6. BY-CLIENT ═════════════════════════════════════════════════ */
.pf-clients { display:flex; flex-wrap:wrap; gap:.6rem; }
.pf-cchip {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem 1.05rem; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted);
  font-family:var(--body); font-size:.85rem; font-weight:600;
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--pf-ease);
}
.pf-cchip:hover { color:var(--ink); transform:translateY(-2px); border-color:rgba(255,255,255,.24); }
.pf-cchip.is-active { color:#fff; border-color:rgba(139,92,246,.6); background:linear-gradient(120deg,rgba(59,70,255,.32),rgba(244,63,157,.2)); }
.pf-cchip img { height:19px; width:auto; max-width:56px; object-fit:contain; filter:grayscale(1) brightness(1.9); opacity:.7; }
.pf-cchip.is-active img { filter:none; opacity:1; }
.pf-cchip em { font-style:normal; font-size:.68rem; font-weight:700; padding:.08rem .45rem; border-radius:100px; background:rgba(255,255,255,.1); }
.pf-client-head { display:flex; align-items:center; gap:.9rem; margin:2.2rem 0 1.4rem; }
.pf-client-head img { height:32px; width:auto; max-width:110px; object-fit:contain; }
.pf-client-head h3 { font-family:var(--disp); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; margin:0; }
.pf-client-head span { color:var(--faint); font-size:.78rem; }

/* ══ 7. LIGHTBOX ══════════════════════════════════════════════════ */
.pf-lb { position:fixed; inset:0; z-index:2000; display:none; place-items:center; padding:1.5rem; background:rgba(3,2,8,.86); backdrop-filter:blur(16px); }
.pf-lb.open { display:grid; animation:pf-fade .3s ease forwards; }
@keyframes pf-fade { from{opacity:0} to{opacity:1} }
.pf-lb-inner {
  position:relative; width:min(1180px,94vw); max-height:88svh;
  display:grid; grid-template-columns:1.12fr .88fr;
  border:1px solid rgba(255,255,255,.13); border-radius:26px; overflow:hidden;
  background:linear-gradient(158deg,#0d0a1c,#090713);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
  animation:pf-lb-in .5s var(--pf-ease) forwards;
}
@keyframes pf-lb-in { from{opacity:0;transform:translateY(26px) scale(.965)} to{opacity:1;transform:none} }
.pf-lb-media { position:relative; min-height:300px; background:#080612; overflow:hidden; }
.pf-lb-media img { width:100%; height:100%; object-fit:cover; animation:pf-lb-ken 9s ease-out forwards; }
@keyframes pf-lb-ken { from{transform:scale(1.06)} to{transform:scale(1)} }
.pf-lb-fallback { display:grid; place-items:center; height:100%; font-family:var(--disp); font-weight:900; font-size:4rem; }
.pf-lb-info { padding:2.1rem 2.2rem; overflow-y:auto; }
.pf-lb-info::-webkit-scrollbar { width:6px; }
.pf-lb-info::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:8px; }
.pf-lb-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pf-lb-cat { font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .8rem; border-radius:100px; border:1px solid var(--line); color:var(--cc,#bfe9f5); }
.pf-lb-counter { font-size:.72rem; color:var(--faint); font-variant-numeric:tabular-nums; }
.pf-lb-info h2 { font-family:var(--disp); font-weight:900; font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.1; letter-spacing:-.03em; margin:1.1rem 0 0; }
.pf-lb-tag { color:#d9d5ea; font-size:1rem; line-height:1.6; margin:.7rem 0 0; }
.pf-lb-desc { color:var(--muted); font-size:.92rem; line-height:1.7; margin:.9rem 0 0; }
.pf-lb-more { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.pf-lb-more-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.pf-lb-more-head span { font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.pf-lb-more-head a { font-size:.74rem; font-weight:700; color:var(--pf-cyan); text-decoration:none; }
.pf-lb-more-head a:hover { text-decoration:underline; }
.pf-lb-strip { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none; }
.pf-lb-strip::-webkit-scrollbar { display:none; }
.pf-lb-mini { flex:0 0 108px; border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; background:rgba(255,255,255,.03); transition:transform .3s var(--pf-ease),border-color .3s; }
.pf-lb-mini:hover { transform:translateY(-3px); border-color:rgba(139,92,246,.6); }
.pf-lb-mini .t { height:62px; display:grid; place-items:center; background:#100d20; font-size:1.3rem; overflow:hidden; }
.pf-lb-mini .t img { width:100%; height:100%; object-fit:cover; }
.pf-lb-mini .m { padding:.45rem .55rem .55rem; }
.pf-lb-mini .m i { display:block; font-style:normal; font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.pf-lb-mini .m b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.66rem; font-weight:600; color:var(--muted); line-height:1.35; margin-top:.15rem; }
.pf-lb-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.pf-lb-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem; border-radius:100px; font-size:.85rem; font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .35s var(--pf-ease),box-shadow .35s,background .35s,border-color .3s; }
.pf-lb-btn.primary { color:#fff; background:linear-gradient(120deg,var(--pf-blue),var(--pf-violet) 55%,var(--pf-pink)); background-size:180% 180%; box-shadow:0 14px 34px -14px rgba(139,92,246,.9); }
.pf-lb-btn.primary:hover { background-position:100% 0; transform:translateY(-2px); }
.pf-lb-btn.ghost { color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.05); }
.pf-lb-btn.ghost:hover { border-color:rgba(255,255,255,.28); transform:translateY(-2px); }
.pf-lb-x, .pf-lb-nav {
  position:absolute; z-index:6; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; cursor:pointer; color:#fff;
  border:1px solid rgba(255,255,255,.16); background:rgba(10,8,20,.7); backdrop-filter:blur(10px);
  font-size:1.05rem; transition:background .3s,transform .35s var(--pf-ease),opacity .3s;
}
.pf-lb-x { top:1.1rem; right:1.2rem; }
.pf-lb-x:hover { background:var(--pf-pink); transform:rotate(90deg); }
.pf-lb-nav { top:50%; margin-top:-23px; }
.pf-lb-prev { left:1.2rem; }
.pf-lb-next { right:1.2rem; }
.pf-lb-nav:hover:not(:disabled) { background:var(--pf-violet); transform:scale(1.08); }
.pf-lb-nav:disabled { opacity:.25; cursor:default; }

/* ══ 8. CTA ═══════════════════════════════════════════════════════ */
.pf-cta { padding:1rem 0 6rem; }
.pf-cta-card {
  position:relative; overflow:clip; border-radius:34px; padding:clamp(3rem,6vw,5.2rem) 2rem;
  text-align:center; border:1px solid var(--line);
  background:linear-gradient(140deg,#0c0a1e,#140b22);
}
.pf-cta-card::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(75% 90% at 18% 8%,rgba(59,70,255,.5),transparent 56%),
             radial-gradient(75% 90% at 86% 28%,rgba(244,63,157,.42),transparent 54%);
  animation:pf-cta-glow 12s ease-in-out infinite alternate;
}
@keyframes pf-cta-glow { to { transform:scale(1.12) translate3d(2%,-2%,0); } }
.pf-cta-card > * { position:relative; z-index:2; }
.pf-cta-card h2 { font-family:var(--disp); font-weight:900; font-size:clamp(1.9rem,5vw,3.4rem); line-height:1.05; letter-spacing:-.035em; margin:1.2rem auto 0; max-width:20ch; }
.pf-cta-card p { max-width:54ch; margin:1.2rem auto 0; color:#d8d5e8; font-size:1.02rem; line-height:1.65; }
.pf-cta-btns { display:flex; justify-content:center; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }

/* Magnetic buttons (JS sets --tx/--ty) */
.pf-magnetic { transform:translate3d(var(--tx,0),var(--ty,0),0); transition:transform .45s var(--pf-ease); }

/* Scroll progress line */
.pf-progress { position:fixed; top:0; left:0; height:2px; z-index:1200; width:100%; transform:scaleX(var(--p,0)); transform-origin:left; background:linear-gradient(90deg,var(--pf-cyan),var(--pf-violet),var(--pf-pink)); pointer-events:none; }

/* ══ 9. RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width:900px) {
  .pf-hero { padding:8.5rem 0 2.6rem; min-height:auto; }
  .pf-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pf-lb-inner { grid-template-columns:1fr; max-height:92svh; }
  .pf-lb-media { max-height:34svh; min-height:180px; }
  .pf-lb-info { padding:1.5rem 1.4rem 1.8rem; }
  .pf-lb-nav { width:40px; height:40px; margin-top:-20px; }
  .pf-scroll-cue { display:none; }
}
@media (max-width:560px) {
  .pf-hero h1 { font-size:clamp(2.2rem,10vw,3.2rem); }
  .pf-sec-head { padding-top:2rem; }
  .pf-lb { padding:.6rem; }
}

/* ══ 10. REDUCED MOTION ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  .page-portfolio *, .page-portfolio *::before, .page-portfolio *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .pf-word > span { transform:none; }
  .js-reveal .pf-card, .js-reveal [data-reveal] { opacity:1 !important; transform:none !important; }
  .pf-hero-media img { opacity:.5; transform:scale(1.04); }
}