/* ===========================================================================
   WORK / PORTFOLIO PAGE — page-scoped stylesheet.
   Loaded ONLY on /work/ (see pages_work.py). Nothing here is referenced by,
   or overrides, any class used on another page — every new class is
   prefixed .wp- (Work Page) to guarantee zero collision with evitex.css /
   evitex-site.css. Reuses existing shared components as-is: .panel (demo
   visual placeholders), .plg (real platform logos), .vcard (reel cards),
   .r/.stagger/[data-io] (scroll reveal — driven by evitex.js, already global),
   [data-tilt]/[data-parallax] (pointer effects — already global).
   =========================================================================== */

/* --- 1. demo ribbon — the one thing every card must carry ----------------- */
.wp-demo{
  position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(11,27,58,.55);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:5px 11px 5px 9px;border-radius:999px;
}
.wp-demo i{width:5px;height:5px;border-radius:50%;background:var(--cyan);flex-shrink:0;}
.wp-demo--light{color:var(--ink);background:rgba(255,255,255,.86);border-color:var(--line);}
.wp-demo--light i{background:var(--blue);}

/* --- 2. section heading + intro (reuses .eyebrow/.h-lead type, new layout) - */
.wp-sechead{max-width:640px;margin-bottom:clamp(28px,3.6vw,44px);}
.wp-sechead .eyebrow{display:flex;align-items:center;gap:10px;}
.wp-sechead .eyebrow b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:#B6C2D8;letter-spacing:0;}
.wp-sechead h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.035em;margin:8px 0 12px;}
.wp-sechead p{font-size:16px;color:var(--muted);line-height:1.65;}

/* --- 3. HERO — compact intro with a floating platform-badge constellation - */
.wp-hero{position:relative;overflow:hidden;padding:118px 0 clamp(48px,5vw,64px);}
.wp-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(760px 380px at 84% -10%,rgba(43,178,231,.12),transparent 62%),
             linear-gradient(180deg,var(--paper-2) 0%,#FBFDFF 60%,var(--paper) 100%);
}
.wp-hero__in{position:relative;z-index:1;max-width:760px;}
.wp-hero .crumb{margin-bottom:20px;}
.wp-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.06;letter-spacing:-.04em;margin-bottom:18px;}
.wp-hero p{font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);line-height:1.65;max-width:56ch;}
.wp-hero__float{position:absolute;z-index:0;pointer-events:none;}
.wp-hero__chip{
  display:flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--sh-2);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;
  color:var(--ink);white-space:nowrap;animation:wpBob var(--dur,9s) ease-in-out var(--del,0s) infinite;
}
.wp-hero__chip .plg{--w:64px;--hm:18px;}
.wp-hero__chip .plg--sq{--w:20px;--hm:20px;}
@keyframes wpBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (max-width:1080px){.wp-hero__float{display:none;}}
@media (prefers-reduced-motion:reduce){.wp-hero__chip{animation:none;}}

/* --- 4. category divider strip (small nav between the four sections) ------ */
.wp-jump{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);}
.wp-jump__row{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none;}
.wp-jump__row::-webkit-scrollbar{display:none;}
.wp-jump a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);}
.wp-jump a:hover,.wp-jump a.is-on{border-color:var(--blue);color:var(--blue);background:var(--paper-2);}
.wp-jump a i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;}
@media (max-width:640px){.wp-jump{top:60px;}}

/* ===========================================================================
   5. E-COMMERCE — an asymmetric showcase, not a 3-col grid
   =========================================================================== */
.wp-ecom{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:16px;}
.wp-ecom__card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;text-align:left;width:100%;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease);
}
.wp-ecom__card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:#D4E0F4;}
.wp-ecom__card--lead{grid-row:1 / 3;}
.wp-ecom__vis{position:relative;display:block;width:100%;}
.wp-ecom__card--lead .wp-ecom__vis .panel{aspect-ratio:16/12;}
.wp-ecom__vis .panel{transition:transform 1s var(--ease-out);}
.wp-ecom__vis img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--ease-out);}
.wp-ecom__card--lead .wp-ecom__vis img{aspect-ratio:16/12;}
.wp-ecom__card:hover .wp-ecom__vis .panel{transform:scale(1.045);}
.wp-ecom__card:hover .wp-ecom__vis img{transform:scale(1.045);}
.wp-ecom__badge{position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border-radius:12px;background:#fff;box-shadow:var(--sh-2);display:grid;place-items:center;padding:8px;}
.wp-ecom__badge .plg{--w:100%;--hm:100%;}
.wp-ecom__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.wp-ecom__card--lead .wp-ecom__body{padding:24px 26px 28px;}
.wp-ecom__meta{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:8px;}
.wp-ecom__body h3{font-size:18px;letter-spacing:-.026em;margin-bottom:8px;}
.wp-ecom__card--lead h3{font-size:clamp(21px,2vw,25px);}
.wp-ecom__body p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px;}
.wp-ecom__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.wp-ecom__tags span{font-size:11.5px;font-weight:500;color:var(--muted);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 10px;}
.wp-ecom__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line-soft);}
.wp-ecom__go{display:inline-flex;align-items:center;gap:7px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13.5px;color:var(--blue);}
.wp-ecom__go svg{width:15px;height:15px;transition:transform .35s var(--ease-out);}
.wp-ecom__card:hover .wp-ecom__go svg{transform:translateX(3px);}
@media (max-width:960px){
  .wp-ecom{grid-template-columns:1fr 1fr;}
  .wp-ecom__card--lead{grid-column:1 / 3;grid-row:auto;}
  .wp-ecom__card--lead .wp-ecom__vis .panel,
  .wp-ecom__card--lead .wp-ecom__vis img{aspect-ratio:21/9;}
}
@media (max-width:620px){.wp-ecom{grid-template-columns:1fr;}.wp-ecom__card--lead{grid-column:auto;}}

/* ===========================================================================
   6. PERFORMANCE MARKETING — featured creative + variations rail
   =========================================================================== */
.wp-perf{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,36px);align-items:stretch;}
.wp-perf__feat{
  position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;box-shadow:var(--sh-2);
}
.wp-perf__feat .panel{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;transition:transform 1.1s var(--ease-out);}
.wp-perf__feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out);}
.wp-perf__feat:hover .panel{transform:scale(1.05);}
.wp-perf__feat:hover img{transform:scale(1.05);}
.wp-perf__feat__ov{position:relative;z-index:2;padding:clamp(22px,2.6vw,32px);background:linear-gradient(0deg,rgba(6,14,32,.92) 0%,rgba(6,14,32,.5) 55%,transparent 100%);color:#fff;}
.wp-perf__feat__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 13px 6px 7px;margin-bottom:14px;}
.wp-perf__feat__badge .plg{--w:64px;--hm:16px;filter:brightness(0) invert(1);}
.wp-perf__feat h3{color:#fff;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.03em;margin-bottom:8px;}
.wp-perf__feat p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.6;max-width:46ch;margin-bottom:16px;}
.wp-perf__feat__tags{display:flex;flex-wrap:wrap;gap:6px;}
.wp-perf__feat__tags span{font-size:11.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 10px;}

.wp-perf__rail{display:flex;flex-direction:column;gap:12px;}
.wp-perf__row{
  position:relative;display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:#fff;text-align:left;width:100%;flex:1;
  transition:border-color .35s var(--ease),transform .35s var(--ease-out),box-shadow .35s var(--ease);
}
.wp-perf__row:hover{border-color:#D4E0F4;transform:translateX(3px);box-shadow:var(--sh-1);}
.wp-perf__row__vis{position:relative;flex:none;width:96px;border-radius:10px;overflow:hidden;}
.wp-perf__row__vis .panel{aspect-ratio:1/1;border-radius:0;}
.wp-perf__row__vis img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0;}
.wp-perf__row__badge{position:absolute;left:6px;top:6px;z-index:2;background:#fff;border-radius:7px;padding:3px;box-shadow:var(--sh-1);}
.wp-perf__row__badge .plg{--w:34px;--hm:12px;}
.wp-perf__row__badge .plg--sq{--w:14px;--hm:14px;}
.wp-perf__row__body{min-width:0;flex:1;}
.wp-perf__row__body b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:3px;}
.wp-perf__row__body span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;}
@media (max-width:900px){.wp-perf{grid-template-columns:1fr;}.wp-perf__feat{min-height:300px;}}
@media (max-width:480px){.wp-perf__row__vis{width:76px;}}

/* ===========================================================================
   7. SOCIAL MEDIA — shared bits (the three subsections are in section 10).
   The old single mixed auto-scroll stream (.wp-social__row/__item) was
   replaced by profiles / reels / posts and its CSS removed.
   =========================================================================== */
.wp-social__hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--muted-2);}
.wp-social__hint svg{width:14px;height:14px;}
@media (hover:hover){.wp-social__hint{display:none;}}

.wp-igcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(24px,3vw,32px);padding:clamp(18px,2.2vw,24px);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(160deg,#fff,var(--paper-2));}
.wp-igcard p{font-size:14px;color:var(--muted);flex:1;min-width:200px;}
.wp-igcard b{color:var(--ink);}

/* ===========================================================================
   8. WEB DEVELOPMENT — large device mockups
   =========================================================================== */
.wp-web{display:flex;flex-direction:column;gap:clamp(40px,4.6vw,60px);}
.wp-web__item{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3.4vw,48px);align-items:center;}
.wp-web__item:nth-child(even){grid-template-columns:1fr 1.4fr;}
.wp-web__item:nth-child(even) .wp-web__devices{order:2;}
.wp-web__item:nth-child(even) .wp-web__body{order:1;}

.wp-web__devices{position:relative;}
.wp-web__desktop{display:block;width:100%;text-align:left;position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:#fff;}
.wp-web__bar{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line-soft);background:#FCFDFF;}
.wp-web__bar span{width:8px;height:8px;border-radius:50%;background:var(--line);}
.wp-web__bar i{flex:1;height:19px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-soft);}
.wp-web__desktop .panel{border-radius:0;aspect-ratio:16/10.4;transition:transform 1s var(--ease-out);}
.wp-web__desktop img{display:block;width:100%;aspect-ratio:16/10.4;object-fit:cover;border-radius:0;transition:transform 1s var(--ease-out);}
.wp-web__item:hover .wp-web__desktop .panel{transform:scale(1.03);}
.wp-web__item:hover .wp-web__desktop img{transform:scale(1.03);}
.wp-web__mobile{position:absolute;right:-8%;bottom:-11%;width:26%;min-width:104px;border-radius:20px;overflow:hidden;border:6px solid #0B1B3A;box-shadow:var(--sh-3);background:#0B1B3A;}
.wp-web__mobile .panel{border-radius:0;aspect-ratio:9/17;}
.wp-web__mobile img{display:block;width:100%;aspect-ratio:9/17;object-fit:cover;border-radius:0;}
.wp-web__item:nth-child(even) .wp-web__mobile{right:auto;left:-8%;}
.wp-web__body{min-width:0;}
.wp-web__meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.wp-web__body h3{font-size:clamp(21px,2.3vw,27px);letter-spacing:-.03em;margin-bottom:10px;}
.wp-web__body p{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:18px;max-width:48ch;}
.wp-web__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.wp-web__tags span{font-size:12px;font-weight:500;color:var(--text);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:5px 11px;}
.wp-web__acts{display:flex;flex-wrap:wrap;gap:10px;}
@media (max-width:860px){
  .wp-web__item,.wp-web__item:nth-child(even){grid-template-columns:1fr;}
  .wp-web__item:nth-child(even) .wp-web__devices,.wp-web__item:nth-child(even) .wp-web__body{order:0;}
  .wp-web__mobile,.wp-web__item:nth-child(even) .wp-web__mobile{width:30%;right:2%;left:auto;}
}

/* ===========================================================================
   9. PROJECT DETAIL MODAL additions (base .modal/.mcase are shared+untouched)
   =========================================================================== */
.wp-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0;}
.wp-mgrid button{display:block;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-soft);padding:0;}
.wp-mgrid .panel{aspect-ratio:4/3;border-radius:0;transition:transform .4s var(--ease-out);}
.wp-mgrid button:hover .panel{transform:scale(1.06);}
.wp-mfacts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px;}
.wp-mfacts span{font-size:12.5px;font-weight:500;color:var(--text);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:5px 12px;}
.wp-mlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.wp-munset{margin-top:14px;font-size:13px;color:var(--muted-2);}

/* --- generic empty-state note, matches the site's .slot-note convention --- */
.wp-note{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;border:1px dashed #C9D6EE;border-radius:var(--r-md);background:var(--paper-2);font-size:13px;color:var(--muted);line-height:1.55;}
.wp-note svg{width:16px;height:16px;color:var(--cyan-ink);flex-shrink:0;margin-top:1px;}

/* ===========================================================================
   10. SOCIAL MEDIA — three distinct subsections (profiles / reels / posts)
   Replaces the earlier single mixed auto-scroll stream. Each subsection has
   its own numbered eyebrow (01/02/03) and its own visual treatment so they
   read as different kinds of work, not one blended feed.
   =========================================================================== */
.wp-social__sub{padding-top:clamp(36px,4.2vw,54px);}
/* Each subsection sits in its own sibling .wrap (full-bleed for the reels
   auto-scroll in between), so ":first-child" matched every subsection's own
   wrap independently — wrongly zeroing the top padding on Social Content &
   Creative too, not just the genuinely-first Social Media Profiles. That
   insufficient spacing was the real cause of it overlapping the reels row
   once the reels grew taller. Targeting the true first subsection by id is
   unambiguous regardless of how each subsection is wrapped. */
#social-profiles.wp-social__sub{padding-top:0;}
.wp-social__subhead{max-width:600px;margin-bottom:clamp(22px,2.6vw,30px);}
.wp-social__subhead .eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;}
.wp-social__subhead .eyebrow b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:#B6C2D8;letter-spacing:0;}
.wp-social__subhead h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.03em;margin:6px 0 8px;}
.wp-social__subhead p{font-size:14.5px;color:var(--muted);line-height:1.6;}

/* --- 01 profiles: a clean, unlimited-length responsive grid --------------- */
.wp-profiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.wp-profile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--sh-1);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .35s var(--ease);}
.wp-profile:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#D4E0F4;}
.wp-profile__vis{position:relative;aspect-ratio:1/1;}
.wp-profile__vis .panel,.wp-profile__vis img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;}
.wp-profile__plat{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:5px;padding:6px 8px;border-radius:999px;background:rgba(11,27,58,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;}
.wp-profile__plat svg{width:13px;height:13px;}
.wp-profile__body{flex:1;display:flex;flex-direction:column;padding:16px 18px 18px;}
.wp-profile__meta{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:6px;}
.wp-profile__body h3{font-size:16.5px;letter-spacing:-.024em;margin-bottom:6px;}
.wp-profile__body p{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px;}
.wp-profile__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
.wp-profile__unset{font-size:12.5px;color:var(--muted-2);}
@media (max-width:1080px){.wp-profiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.wp-profiles{grid-template-columns:1fr;}}

/* --- 02 reels: noticeably larger 9:16 auto-scroll -------------------------
   Same drive mechanism as the homepage marquee (evitex.js) and the earlier
   [data-wp-scroll] module (work.js) — only the tile size changed here. */
.wp-reels{position:relative;}
.wp-reels::before,.wp-reels::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:4%;min-width:18px;pointer-events:none;}
.wp-reels::before{left:0;background:linear-gradient(90deg,var(--paper),transparent);}
.wp-reels::after{right:0;background:linear-gradient(270deg,var(--paper),transparent);}
.wp-reels__row{position:relative;overflow:hidden;padding:8px 0 16px;touch-action:pan-y;}
/* clip only sideways where supported; older browsers keep the plain hidden box (padding above leaves lift room) */
@supports (overflow-x:clip){.wp-reels__row{overflow:visible;overflow-x:clip;padding-bottom:0;}}
.wp-reels__row .wp-social__track{display:flex;gap:16px;width:max-content;will-change:transform;cursor:grab;}
.wp-reels__row.is-drag .wp-social__track{cursor:grabbing;}
.wp-reel{position:relative;flex:none;width:262px;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-1);isolation:isolate;display:block;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);}
.wp-reel:hover{transform:translateY(-5px) scale(1.015);box-shadow:var(--sh-3);}
.wp-reel .panel,.wp-reel img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;transition:transform 1s var(--ease-out);}
.wp-reel:hover .panel,.wp-reel:hover img{transform:scale(1.06);}
.wp-reel__play{position:absolute;left:50%;top:44%;z-index:3;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;transform:translate(-50%,-50%);transition:transform .4s var(--ease-out),background .3s var(--ease);}
.wp-reel:hover .wp-reel__play{transform:translate(-50%,-50%) scale(1.1);background:var(--blue);border-color:var(--blue);}
.wp-reel__play svg{width:19px;height:19px;color:#fff;margin-left:3px;}
.wp-reel__ov{position:absolute;inset:auto 0 0 0;z-index:2;padding:44px 14px 14px;background:linear-gradient(0deg,rgba(6,14,32,.9),transparent);color:#fff;}
.wp-reel__ov b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;letter-spacing:-.015em;line-height:1.3;}
.wp-reel__ov span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.78);margin-top:4px;}
.wp-reel__ov svg{width:12px;height:12px;flex-shrink:0;}
@media (max-width:640px){.wp-reel{width:208px;}}

/* --- 03 posts & creative: manual carousel with native swipe --------------- */
.wp-slider{position:relative;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;}
.wp-slider__view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--r-lg);}
.wp-slider__view::-webkit-scrollbar{display:none;}
.wp-slider__track{display:flex;gap:16px;padding:8px 2px 26px;}
.wp-slider__nav{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);display:grid;place-items:center;flex-shrink:0;transition:border-color .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);}
.wp-slider__nav:hover{border-color:var(--blue);box-shadow:var(--sh-2);}
.wp-slider__nav:active{transform:scale(.94);}
.wp-slider__nav svg{width:17px;height:17px;color:var(--ink);}
.wp-slider__nav:disabled{opacity:.35;pointer-events:none;}
.wp-slider__dots{display:flex;justify-content:center;gap:7px;margin-top:0;}
.wp-slider__nav--prev svg{transform:rotate(180deg);}
.wp-slider.is-static{grid-template-columns:1fr;}
.wp-slider.is-static .wp-slider__nav{display:none;}
.wp-slider__dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s var(--ease),transform .3s var(--ease-out),width .3s var(--ease-out);}
.wp-slider__dot.is-on{background:var(--blue);width:20px;border-radius:4px;}

.wp-post{position:relative;flex:0 0 calc((100% - 32px) / 3);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);}
/* inside a scroll container the card can't cast --sh-2's 48px outer layer without it being cut flat,
   so the hover shadow is --sh-2's own first two layers, which fit inside the track's bottom room */
.wp-post:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(11,27,58,.04),0 8px 18px rgba(11,27,58,.09);}
.wp-post__vis{position:relative;display:block;width:100%;aspect-ratio:4/5;}
.wp-post__vis .panel,.wp-post__vis img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;transition:transform .8s var(--ease-out);}
.wp-post:hover .wp-post__vis .panel,.wp-post:hover .wp-post__vis img{transform:scale(1.05);}
.wp-post__stack{position:absolute;right:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#fff;background:rgba(11,27,58,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;padding:4px 9px;}
.wp-post__stack svg{width:11px;height:11px;}
.wp-post__body{padding:14px 16px 16px;}
.wp-post__meta{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:6px;}
.wp-post__meta svg{width:13px;height:13px;}
.wp-post__body h4{font-size:14.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;line-height:1.35;}
@media (max-width:900px){.wp-post{flex-basis:calc((100% - 16px) / 2);}}
@media (max-width:560px){.wp-post{flex-basis:84%;}}
@media (max-width:760px){
  .wp-slider{grid-template-columns:1fr;}
  .wp-slider__nav{display:none;}
}

/* Part 2 fix: keep .plg logos in the perf row badges at their true proportions */
.wp-perf__row__badge .plg img{aspect-ratio:auto;height:auto;object-fit:fill;}