/* ==========================================================================
   FIRST OWNER MEDIA — WORK PORTFOLIO PAGE
   Light editorial hero + dark cinema reel wall + lightbox.
   Brand tokens styles.css se aate hain; yahan sirf is page ka layer hai.
   ========================================================================== */

.work-page {
  --wk-ink: #05060A;
  --wk-ink-soft: #121620;
  --wk-paper: #FBFBFD;
  --wk-line: rgba(5, 6, 10, 0.10);
  --wk-muted: #6B7280;
  --wk-blue: var(--color-blue-primary);
  --wk-gold: #C8A96B;

  /* dark band tokens */
  --wk-dark: #07080C;
  --wk-dark-2: #0D0F15;
  --wk-dark-line: rgba(255, 255, 255, 0.10);
  --wk-dark-muted: rgba(255, 255, 255, 0.55);

  --wk-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--wk-paper);
}

.work-page .bg-dotted-texture { opacity: 0.32; }

/* work.css sirf is page par load hota hai, isliye html par lagana safe hai */
html { scroll-behavior: smooth; }
#reels { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Sticky header — line aur shadow sirf scroll hone par, warna page top par
   bevajah bhaari lagta hai. .is-stuck work.js lagata hai. */
.work-page .header {
  position: sticky;
  top: 0;
  background: rgba(251, 251, 253, 0.92);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease, height 0.35s var(--wk-ease);
}

.work-page .header.is-stuck {
  /* Reels rangeen hain — header thos rahega tabhi wo shaant dikhega */
  background: rgba(251, 251, 253, 0.98);
  backdrop-filter: blur(18px) saturate(0.82);
  -webkit-backdrop-filter: blur(18px) saturate(0.82);
  border-bottom-color: var(--wk-line);
  box-shadow: 0 8px 26px rgba(5, 6, 10, 0.07);
}
.work-page .nav-link.is-current { color: var(--wk-blue); }
.work-page .nav-link.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--wk-blue); border-radius: 2px;
}
.work-page .nav-link.is-current { position: relative; }

.wk-shell { width: min(92%, 1320px); margin: 0 auto; position: relative; z-index: 2; }

/* Shared serif accent */
.wk-serif {
  font-family: 'Instrument Serif', 'Instrument Fallback', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--wk-blue);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.wk-hero {
  position: relative;
  z-index: 10;
  padding: 54px 0 70px;
  overflow: hidden;
}

.wk-hero::before {
  content: "";
  position: absolute;
  top: -220px; right: -140px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(18, 100, 244, 0.14), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}

.wk-back {
  display: flex; width: fit-content;
  align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--wk-muted); text-decoration: none;
  transition: color 0.3s var(--wk-ease), gap 0.3s var(--wk-ease);
}
.wk-back svg { width: 15px; height: 15px; }
.wk-back:hover { color: var(--wk-blue); gap: 12px; }

.wk-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--wk-line);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wk-ink);
}
.wk-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wk-blue);
  box-shadow: 0 0 0 0 rgba(18, 100, 244, 0.5);
  animation: wkPulse 2.4s infinite;
}
@keyframes wkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(18, 100, 244, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(18, 100, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 100, 244, 0); }
}

.wk-title {
  margin-top: 22px;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--wk-ink);
  max-width: 16ch;
}
.wk-title .wk-serif { font-size: 1.06em; }

.wk-lede {
  margin-top: 22px;
  max-width: 56ch;
  font-size: clamp(0.98rem, 1.35vw, 1.14rem);
  line-height: 1.7;
  color: var(--wk-muted);
}

.wk-stats {
  display: flex; flex-wrap: wrap;
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--wk-line);
  border-bottom: 1px solid var(--wk-line);
}
.wk-stat {
  flex: 1 1 140px;
  padding: 22px 24px 20px 0;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.wk-stat + .wk-stat { padding-left: 28px; }
.wk-stat + .wk-stat::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 1px; background: var(--wk-line);
}
.wk-stat strong {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--wk-ink);
}
.wk-pc { color: var(--wk-blue); font-size: 0.62em; vertical-align: 0.42em; margin-left: 1px; }
.wk-stat span {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wk-muted);
}

/* ---- Client strip (styles.css ke .cl-* styles reuse karta hai) ---- */
.wk-clients { margin-top: 40px; }

/* 6 cards — desktop par 3x2 better baithta hai. Media query me isliye hai
   ki styles.css ke 2-col / 1-col mobile rules specificity me na haar jayein. */
@media (min-width: 981px) {
  .wk-clients .cl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wk-clients .cl-card { min-height: 178px; }

/* Reveal — homepage par ye .portfolio.is-in se chalta tha, yahan apna hook */
.wk-clients.is-in .cl-strip-head {
  animation: pfCardIn 0.6s var(--wk-ease) 0.1s both;
}
.wk-clients.is-in .cl-card {
  animation: pfCardIn 0.6s var(--wk-ease) calc(0.18s + var(--i) * 0.07s) both;
}

.wk-scroll-cue {
  display: flex; align-items: center; gap: 12px;
  margin-top: 34px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--wk-muted);
}
.wk-scroll-line {
  width: 54px; height: 1px; background: var(--wk-ink); opacity: 0.28;
  position: relative; overflow: hidden;
}
.wk-scroll-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--wk-blue);
  transform: translateX(-100%);
  animation: wkSweep 2.2s var(--wk-ease) infinite;
}
@keyframes wkSweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Hero entry animation */
.wk-back, .wk-hero .wk-eyebrow, .wk-title, .wk-lede, .wk-stats, .wk-scroll-cue {
  animation: wkUp 0.85s var(--wk-ease) both;
}
.wk-back { animation-delay: 0.05s; }
.wk-hero .wk-eyebrow { animation-delay: 0.12s; }
.wk-title { animation-delay: 0.2s; }
.wk-lede { animation-delay: 0.3s; }
.wk-stats { animation-delay: 0.4s; }
.wk-scroll-cue { animation-delay: 0.5s; }

@keyframes wkUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   REEL WALL (dark band)
   ========================================================================== */
.wk-wall {
  position: relative;
  z-index: 10;
  background: var(--wk-dark);
  color: #fff;
  padding: 82px 0 0;
  border-radius: 34px 34px 0 0;
  overflow: hidden;
  isolation: isolate;
}
.wk-wall::before {
  /* fine grain so the dark band feels like film, not flat paint */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.wk-wall-glow {
  position: absolute;
  top: -180px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 480px;
  background: radial-gradient(ellipse at center, rgba(18, 100, 244, 0.30), transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.wk-wall-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--wk-dark-line);
}
.wk-wall-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wk-gold);
}
.wk-wall-label svg { width: 15px; height: 15px; }
.wk-wall-title {
  margin-top: 12px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -0.035em;
  color: #fff;
}
.wk-wall-note {
  font-size: 0.86rem; color: var(--wk-dark-muted);
  max-width: 30ch; line-height: 1.6;
}

/* Filters */
.wk-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 26px 0 38px;
}
.wk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 40px;
  border: 1px solid var(--wk-dark-line);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  transition: all 0.35s var(--wk-ease);
}
.wk-chip-n {
  font-size: 0.68rem; font-weight: 800;
  padding: 1px 7px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.35s var(--wk-ease);
}
.wk-chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }
.wk-chip.is-active {
  background: #fff; color: var(--wk-ink); border-color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.wk-chip.is-active .wk-chip-n { background: var(--wk-blue); color: #fff; }

/* Grid */
.wk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding-bottom: 70px;
}

.wk-card {
  cursor: pointer;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--wk-ease), transform 0.7s var(--wk-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.wk-grid.is-in .wk-card { opacity: 1; transform: none; }

/* filter hide/show */
.wk-card.is-hidden { display: none; }
.wk-card.is-refilter { animation: wkPop 0.5s var(--wk-ease) both; }
@keyframes wkPop {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Tilt card par nahi, andar ke frame par lagta hai — card ka apna
   transform reveal animation ka hai, dono ek hi property par takrate. */
.wk-card { perspective: 1000px; }

.wk-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--wk-dark-2);
  border: 1px solid var(--wk-dark-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform-style: preserve-3d;
  transition: transform 0.55s var(--wk-ease), box-shadow 0.55s var(--wk-ease), border-color 0.55s var(--wk-ease);
}

/* Cursor ke saath jhukte waqt transition chhota — warna jhukav peechhe rehta hai */
.wk-card.is-tilting .wk-frame { transition: transform 0.12s linear, box-shadow 0.55s var(--wk-ease), border-color 0.55s var(--wk-ease); }
.wk-frame::after {
  /* bottom scrim so meta stays readable over any frame */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(5, 6, 10, 0.75), transparent);
  opacity: 0.85;
  transition: opacity 0.45s var(--wk-ease);
  pointer-events: none;
}

.wk-poster, .wk-prev {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wk-prev { opacity: 0; transition: opacity 0.5s var(--wk-ease); }
.wk-poster { transition: transform 0.8s var(--wk-ease), opacity 0.5s var(--wk-ease); }

.wk-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}

.wk-num {
  position: absolute; top: 12px; left: 14px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.wk-play {
  position: absolute; right: 12px; bottom: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  color: #fff;
  z-index: 3;
  transition: all 0.45s var(--wk-ease);
}
.wk-play svg { width: 17px; height: 17px; fill: currentColor; }

.wk-card:hover .wk-frame,
.wk-card:focus-visible .wk-frame {
  transform: translateY(-8px);
  border-color: rgba(18, 100, 244, 0.55);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(18, 100, 244, 0.3);
}
.wk-card:hover .wk-poster { opacity: 0; transform: scale(1.05); }
.wk-card:hover .wk-prev,
.wk-card.is-playing .wk-prev { opacity: 1; }
.wk-card.is-playing .wk-poster { opacity: 0; }
.wk-card:hover .wk-frame::after { opacity: 1; }
.wk-card:hover .wk-play { background: var(--wk-blue); border-color: var(--wk-blue); transform: scale(1.1); }
.wk-card:hover .wk-sheen { animation: wkSheen 0.9s var(--wk-ease) forwards; }
@keyframes wkSheen {
  to { transform: translateX(120%); }
}

.wk-meta { padding: 14px 4px 0; }
.wk-brand {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wk-gold);
}
.wk-name {
  margin-top: 6px;
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: -0.02em; color: #fff;
  transition: color 0.35s var(--wk-ease);
}
.wk-card:hover .wk-name { color: #9FC2FF; }
.wk-cat {
  display: block; margin-top: 5px;
  font-size: 0.78rem; color: var(--wk-dark-muted);
}

.wk-empty {
  padding: 50px 0 80px;
  text-align: center;
  color: var(--wk-dark-muted);
  font-size: 0.95rem;
}

/* Marquee */
.wk-marquee {
  position: relative; z-index: 2;
  border-top: 1px solid var(--wk-dark-line);
  border-bottom: 1px solid var(--wk-dark-line);
  padding: 20px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.wk-marquee-track {
  display: flex; align-items: center; gap: 30px;
  width: max-content;
  animation: wkMarquee 34s linear infinite;
}
.wk-marquee-track span {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}
.wk-mq-dot { color: var(--wk-blue) !important; }
@keyframes wkMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.wk-process {
  position: relative; z-index: 10;
  background: var(--wk-paper);
  padding: 84px 0 78px;
}
.wk-eyebrow-dark { background: #fff; }

.wk-sec-title {
  margin-top: 20px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.08; color: var(--wk-ink);
  max-width: 20ch;
}

.wk-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.wk-step {
  padding: 26px 22px 28px;
  border: 1px solid var(--wk-line);
  border-radius: 18px;
  background: #fff;
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--wk-ease), transform 0.7s var(--wk-ease), box-shadow 0.45s var(--wk-ease), border-color 0.45s var(--wk-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.wk-steps.is-in .wk-step { opacity: 1; transform: none; }
.wk-step:hover {
  border-color: rgba(18, 100, 244, 0.4);
  box-shadow: 0 20px 44px rgba(5, 6, 10, 0.08);
}
.wk-step-n {
  font-family: 'Instrument Serif', 'Instrument Fallback', Georgia, serif;
  font-size: 2.1rem; color: var(--wk-blue);
  line-height: 1;
}
.wk-step h3 {
  margin-top: 14px;
  font-size: 1.06rem; font-weight: 700; letter-spacing: -0.02em;
}
.wk-step p {
  margin-top: 9px;
  font-size: 0.88rem; line-height: 1.65; color: var(--wk-muted);
}

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
.wk-cta {
  position: relative; z-index: 10;
  background: var(--wk-ink);
  color: #fff;
  padding: 62px 0;
  border-radius: 34px 34px 0 0;
}
.wk-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap;
}
.wk-cta-title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.12;
  max-width: 18ch;
}
.wk-cta-sub {
  margin-top: 12px;
  font-size: 0.95rem; line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  max-width: 46ch;
}
.wk-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.wk-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px;
  border-radius: 40px;
  font-size: 0.92rem; font-weight: 700;
  text-decoration: none;
  transition: all 0.35s var(--wk-ease);
}
.wk-btn svg { width: 17px; height: 17px; }
.wk-btn-primary { background: var(--wk-blue); color: #fff; box-shadow: 0 14px 34px rgba(18, 100, 244, 0.38); }
.wk-btn-primary:hover { background: #0A52D4; transform: translateY(-3px); }
.wk-btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.28); color: #fff; }
.wk-btn-ghost:hover { background: #fff; color: var(--wk-ink); border-color: #fff; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.wk-lb {
  position: fixed; inset: 0; z-index: 400;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
/* display:grid upar [hidden] ko override kar deta hai, isliye explicit rule */
.wk-lb[hidden] { display: none; }
.wk-lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 5, 8, 0.88);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.45s var(--wk-ease);
}
.wk-lb.is-open .wk-lb-backdrop { opacity: 1; }

.wk-lb-panel {
  position: relative;
  justify-self: center;
  display: flex; gap: 26px; align-items: center;
  max-width: 860px; width: 100%;
  opacity: 0; transform: translateY(22px) scale(0.97);
  transition: opacity 0.5s var(--wk-ease), transform 0.5s var(--wk-ease);
}
.wk-lb.is-open .wk-lb-panel { opacity: 1; transform: none; }

.wk-lb-stage {
  flex: 0 0 auto;
  width: min(42vw, 360px);
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 110px);
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.wk-lb-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }

.wk-lb-info { flex: 1 1 auto; min-width: 0; color: #fff; }
.wk-lb-brand {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wk-gold);
}
.wk-lb-name {
  margin-top: 10px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.12;
}
.wk-lb-note {
  margin-top: 12px;
  font-size: 0.95rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  max-width: 44ch;
}
.wk-lb-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wk-lb-count {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}
.wk-lb-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 40px;
  background: var(--wk-blue); color: #fff;
  font-size: 0.88rem; font-weight: 700; text-decoration: none;
  transition: all 0.35s var(--wk-ease);
}
.wk-lb-cta svg { width: 16px; height: 16px; }
.wk-lb-cta:hover { background: #0A52D4; transform: translateY(-2px); }

.wk-lb-close {
  position: absolute; top: 20px; right: 22px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff; cursor: pointer;
  z-index: 3;
  transition: all 0.35s var(--wk-ease);
}
.wk-lb-close:hover { background: #fff; color: var(--wk-ink); transform: rotate(90deg); }

.wk-lb-nav {
  position: relative; z-index: 3;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff; cursor: pointer;
  transition: all 0.35s var(--wk-ease);
}
.wk-lb-nav:hover { background: var(--wk-blue); border-color: var(--wk-blue); }
.wk-lb-nav svg { width: 22px; height: 22px; }

body.wk-locked { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .wk-grid { grid-template-columns: repeat(3, 1fr); }
  .wk-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* fixed tab chhoti screen par content ke upar aa jaata hai —
     WhatsApp float button waise bhi yahi kaam karta hai */
  .work-page .connect-tab { display: none; }

  .wk-hero { padding: 36px 0 54px; }
  .wk-stat { flex-basis: 45%; padding-right: 14px; }
  .wk-stat:nth-child(3) { padding-left: 0; }
  .wk-stat:nth-child(3)::before { display: none; }

  .wk-wall { padding-top: 60px; border-radius: 26px 26px 0 0; }
  .wk-wall-note { max-width: none; }
  .wk-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .wk-frame { border-radius: 14px; }
  .wk-name { font-size: 0.92rem; }

  .wk-lb { grid-template-columns: 1fr; padding: 16px; }
  .wk-lb-panel { flex-direction: column; gap: 16px; max-width: 420px; }
  .wk-lb-stage { width: 100%; max-width: 300px; max-height: 52vh; }
  .wk-lb-info { text-align: center; }
  .wk-lb-note { display: none; }
  .wk-lb-foot { justify-content: center; margin-top: 14px; padding-top: 14px; }
  .wk-lb-nav {
    position: fixed; bottom: 22px;
    width: 46px; height: 46px;
  }
  .wk-lb-prev { left: 22px; }
  .wk-lb-next { right: 22px; }
}

@media (max-width: 520px) {
  .wk-title { font-size: clamp(2.1rem, 10vw, 3rem); }
  .wk-steps { grid-template-columns: 1fr; }
  .wk-cta-actions { width: 100%; }
  .wk-btn { flex: 1 1 auto; justify-content: center; }
  .wk-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .wk-filters::-webkit-scrollbar { display: none; }
  .wk-chip { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .work-page *, .work-page *::before, .work-page *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .wk-card { opacity: 1; transform: none; }
  .wk-step { opacity: 1; transform: none; }
}

/* ==========================================================================
   CLIENT STRIP — LOGO CARDS
   Har card ek brand plate hai: upar logo apne tint par, neeche naam aur
   count. Jiska logo nahi uska monogram usi plate par baithta hai, isliye
   chheyon cards ek set lagte hain.

   Har card apna accent deta hai (--cl-accent, --cl-plate), isse chheyon
   alag mehsoos hote hain bina layout todhe.
   ========================================================================== */

.wk-clients .cl-row {
  gap: 16px;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.wk-clients .cl-card {
  --cl-accent: var(--wk-blue);
  --cl-plate: #F2F5FA;

  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid var(--wk-line);
  box-shadow: 0 10px 26px -20px rgba(6, 12, 22, 0.55);
  transition:
    transform 0.5s var(--wk-ease),
    box-shadow 0.5s var(--wk-ease),
    border-color 0.5s ease;
}

.wk-clients .cl-card:hover,
.wk-clients .cl-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--cl-accent) 38%, transparent);
  box-shadow: 0 26px 46px -24px color-mix(in srgb, var(--cl-accent) 70%, rgba(6, 12, 22, 0.6));
}

.wk-clients .cl-card:focus-visible {
  outline: 2px solid var(--cl-accent);
  outline-offset: 3px;
}

/* Neeche accent line — hover par poori khulti hai */
.wk-clients .cl-card::before {
  top: auto;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--cl-accent), color-mix(in srgb, var(--cl-accent) 35%, #FFFFFF));
  transform: scaleX(0);
}

.wk-clients .cl-card:hover::before,
.wk-clients .cl-card:focus-visible::before { transform: scaleX(1); }

/* ---- Logo plate ----
   Plate ek chhota sa kamra hai: peeche halki rings, neeche farsh.
   Logo us farsh par khada ek tile hai — isliye chipkaya hua nahi lagta. */
.cl-media {
  position: relative;
  display: grid;
  place-items: center;
  /* Pakki height — percentage max-height tabhi resolve hoti hai, warna
     square logo apni poori chaudai le leta hai aur plate se bahar nikal jaata hai. */
  --cl-plate-h: clamp(148px, 13vw, 186px);
  height: var(--cl-plate-h);
  padding: 22px;
  border-bottom: 1px solid var(--wk-line);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
    linear-gradient(to bottom, transparent 54%, color-mix(in srgb, var(--cl-accent) 10%, transparent) 100%),
    var(--cl-plate);
  overflow: hidden;
}

/* Halki radial rings — plate khaali na lage */
.cl-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, transparent 27%, color-mix(in srgb, var(--cl-accent) 12%, transparent) 27.6%, transparent 28.4%),
    radial-gradient(circle at 50% 52%, transparent 38%, color-mix(in srgb, var(--cl-accent) 9%, transparent) 38.6%, transparent 39.4%),
    radial-gradient(circle at 50% 52%, transparent 50%, color-mix(in srgb, var(--cl-accent) 7%, transparent) 50.6%, transparent 51.4%);
  opacity: 0.9;
  transform: scale(1);
  transition: transform 0.9s var(--wk-ease), opacity 0.6s ease;
}

.wk-clients .cl-card:hover .cl-media::before {
  transform: scale(1.18);
  opacity: 1;
}

/* Accent ka halka glow, hover par jagta hai */
.cl-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--cl-accent) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.55s ease;
}

.wk-clients .cl-card:hover .cl-media::after { opacity: 1; }

/* ---- 3D stage ---- */
.cl-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  perspective: 720px;
  perspective-origin: 50% 42%;
}

/* Tile = logo ka jism. Bevel, parchhai aur gloss yahin se aate hain. */
.cl-tile {
  position: relative;
  max-width: 76%;
  /* Khada (portrait) logo --cl-logo-cap badha kar thodi zyada height le
     sakta hai, warna wide wordmarks ke aage wo bahut chhota lagta hai. */
  max-height: calc(var(--cl-plate-h) * var(--cl-logo-cap, 0.62));
  padding: 11px 13px;
  border-radius: 16px;
  /* JS logo ke kinare ka rang yahan bhar deta hai, isliye image ka kinara
     tile me ghul jaata hai. Na padh sake to safed. */
  background: var(--tile-bg, #FFFFFF);
  overflow: hidden;
  backface-visibility: hidden;
  transform:
    rotateX(var(--tilt-x, 5deg))
    rotateY(var(--tilt-y, -8deg));
  box-shadow:
    0 1px 2px rgba(6, 12, 22, 0.16),
    0 8px 16px -10px rgba(6, 12, 22, 0.45),
    0 22px 34px -18px color-mix(in srgb, var(--cl-accent) 55%, rgba(6, 12, 22, 0.55)),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(6, 12, 22, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition:
    transform 0.55s var(--wk-ease),
    box-shadow 0.55s var(--wk-ease);
}

.cl-tile.is-round { padding: 6px; border-radius: 50%; }

/* Halke tile ka kinara — warna safed logo safed plate me ghul jaata hai */
.cl-tile.is-light {
  box-shadow:
    0 1px 2px rgba(6, 12, 22, 0.14),
    0 8px 16px -10px rgba(6, 12, 22, 0.4),
    0 22px 34px -18px color-mix(in srgb, var(--cl-accent) 50%, rgba(6, 12, 22, 0.5)),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(6, 12, 22, 0.1),
    inset 0 0 0 1px rgba(6, 12, 22, 0.07);
}

/* Gehre logo par safed kinara, halke par gehra — bevel dono par dikhe */
.cl-tile.is-dark {
  box-shadow:
    0 1px 2px rgba(6, 12, 22, 0.2),
    0 8px 16px -10px rgba(6, 12, 22, 0.5),
    0 22px 34px -18px color-mix(in srgb, var(--cl-accent) 55%, rgba(6, 12, 22, 0.6)),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Tile ke upar se guzarti roshni ki lakeer */
.cl-tile::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.55) 46%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 66%
  );
  transform: translateX(-130%);
  transition: transform 0.9s var(--wk-ease);
  pointer-events: none;
}

/* Cursor ke peeche chalti chamak — glass jaisa mehsoos */
.cl-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    64% 64% at var(--glare-x, 30%) var(--glare-y, 22%),
    rgba(255, 255, 255, 0.42),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.wk-clients .cl-card:hover .cl-tile,
.wk-clients .cl-card:focus-visible .cl-tile {
  /* Hover par tile seedha khada hota hai aur thoda upar aa jaata hai */
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-5px)
    scale(1.06);
  box-shadow:
    0 2px 3px rgba(6, 12, 22, 0.18),
    0 14px 24px -12px rgba(6, 12, 22, 0.5),
    0 34px 48px -20px color-mix(in srgb, var(--cl-accent) 72%, rgba(6, 12, 22, 0.6)),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(6, 12, 22, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Cursor ke saath jhukte waqt transition chhoti — warna tile peeche reh jaata hai */
.wk-clients .cl-card:hover .cl-tile { transition-duration: 0.16s, 0.55s; }
.wk-clients .cl-card:hover .cl-tile::before { transform: translateX(130%); }
.wk-clients .cl-card:hover .cl-tile::after { opacity: 1; }

/* Gol tile ki padding chhoti hai — kataai bhi utni hi */
.cl-tile.is-round .cl-logo {
  max-height: calc(var(--cl-plate-h) * var(--cl-logo-cap, 0.62) - 12px);
}

.cl-logo {
  display: block;
  max-width: 100%;
  /* tile ki padding kaat kar — warna logo tile ke kinare par kat jaata hai */
  max-height: calc(var(--cl-plate-h) * var(--cl-logo-cap, 0.62) - 24px);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Jiska logo nahi — naam ke do akshar, usi tile par */
.cl-mono {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 20px;
  background: linear-gradient(160deg, #FFFFFF 0%, color-mix(in srgb, var(--cl-accent) 7%, #FFFFFF) 100%);
  font-family: var(--font-display, inherit);
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--cl-accent);
}

/* ---- Body ---- */
.wk-clients .cl-card > :not(.cl-media):not(.cl-num) {
  position: relative;
  z-index: 2;
}

.wk-clients .cl-num {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 16px;
  font-family: var(--font-display, inherit);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--cl-accent) 62%, var(--wk-muted));
}

.wk-clients .cl-name {
  margin: 18px 20px 0;
  font-size: 1.16rem;
  line-height: 1.25;
  color: var(--wk-ink);
  transition: color 0.35s ease;
}

.wk-clients .cl-card:hover .cl-name { color: var(--cl-accent); }

.wk-clients .cl-cat {
  margin: 5px 20px 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--wk-muted);
}

.wk-clients .cl-foot {
  margin: 16px 20px 0;
  padding: 13px 0 16px;
  border-top: 1px solid var(--wk-line);
}

.wk-clients .cl-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wk-muted);
}

/* Chhota live dot — card idle me bhi zinda lagta hai */
.wk-clients .cl-count::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cl-accent);
  animation: clPulse 2.6s ease-out infinite;
}

@keyframes clPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cl-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.wk-clients .cl-go {
  width: 34px;
  height: 34px;
  background: color-mix(in srgb, var(--cl-accent) 12%, #FFFFFF);
  color: var(--cl-accent);
}

.wk-clients .cl-card:hover .cl-go,
.wk-clients .cl-card:focus-visible .cl-go {
  background: var(--cl-accent);
  color: #FFFFFF;
  transform: translate(2px, -2px) scale(1.06);
}

/* ---- Jinke paas reel nahi ---- */
.wk-clients .cl-card:disabled { cursor: default; opacity: 0.72; }
.wk-clients .cl-card:disabled:hover { transform: none; box-shadow: none; }
.wk-clients .cl-card:disabled .cl-count::before { display: none; }

/* ---- Responsive ---- */
@media (max-width: 560px) {
  .wk-clients .cl-row { gap: 12px; }
  .wk-clients .cl-card { border-radius: 16px; }
  .cl-media { --cl-plate-h: 150px; padding: 18px; }
  .wk-clients .cl-name { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-clients .cl-card:hover { transform: none; }
  .cl-tile { transform: none; }
  .wk-clients .cl-card:hover .cl-tile { transform: none; }
  .wk-clients .cl-card:hover .cl-tile::before { transform: translateX(-130%); }
  .wk-clients .cl-card:hover .cl-media::before { transform: none; }
  .wk-clients .cl-count::before { animation: none; }
}

/* ==========================================================================
   HERO — do column: text bayein, reel posters dayein
   Pehle hero ek hi column tha aur desktop par dayein ka aadha page khali
   pada rehta tha. Ab wahan teen posters ka fanned stack hai.
   ========================================================================== */

.wk-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: 40px;
}

.wk-hero-copy { min-width: 0; }

/* ---- Poster stack ---- */
.wk-hero-art {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1 / 0.92;
  perspective: 1200px;
}

.wk-art-glow {
  position: absolute;
  inset: 8% 4% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 100, 244, 0.30), transparent 68%);
  filter: blur(34px);
  pointer-events: none;
}

.wk-art-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 43%;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: var(--wk-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 26px 60px rgba(5, 6, 10, 0.26);
  transition: transform 0.8s var(--wk-ease), box-shadow 0.8s var(--wk-ease);
}

.wk-art-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Teeno ki jagah aur jhukav ----

   Pehle ye sirf rotate + scale tha — teen kaagaz mez par pade hon jaise.
   Ab har card sach me MUD-ta hai (rotateY) aur alag gehrai par baithta
   hai (translateZ), isliye beech wala saamne aata hua aur kinare wale
   peeche jaate hue lagte hain.

   Har card apni jagah custom property me deta hai aur transform ek hi
   baar likha gaya hai. Float alag "translate" property par chalta hai,
   transform par nahi — warna chalti hui animation 3D pose ko haraa deti
   aur sab wapas sapaat ho jaata. */
.wk-art-card {
  transform:
    translate(calc(-50% + var(--x, 0%)), calc(-50% + var(--y, 0%)))
    rotateY(var(--ry, 0deg))
    rotateZ(var(--rz, 0deg))
    translateZ(var(--z, 0px))
    scale(var(--s, 1));
}

.wk-art-back {
  --x: -64%; --y: -4%; --ry: 20deg; --rz: -9deg; --z: -110px; --s: 0.92;
  z-index: 1;
  filter: saturate(0.82) brightness(0.94);
}

.wk-art-front {
  --x: 64%; --y: 4%; --ry: -20deg; --rz: 9deg; --z: -110px; --s: 0.92;
  z-index: 2;
  filter: saturate(0.82) brightness(0.94);
}

.wk-art-lead {
  --ry: -4deg; --rz: -2deg; --z: 60px;
  z-index: 3;
  box-shadow:
    0 10px 24px rgba(5, 6, 10, 0.2),
    0 40px 84px rgba(5, 6, 10, 0.34);
}

/* Kinare par roshni ki patli lakeer — isi se kaagaz "mota" lagta hai */
.wk-art-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Mudte hue card ka andar ka rukh gehra — jaise roshni beech se aa rahi
   ho aur ye do mud ke chhaya me ja rahe hon */
.wk-art-back::after,
.wk-art-front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}
.wk-art-back::after  { background: linear-gradient(90deg, transparent 40%, rgba(5, 6, 10, 0.32)); }
.wk-art-front::after { background: linear-gradient(270deg, transparent 40%, rgba(5, 6, 10, 0.32)); }

/* Halka sa saans lene jaisa float — teeno alag rafter par.
   "translate" property transform se alag hai, dono saath chalte hain. */
@keyframes wkFloatA { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes wkFloatB { 0%, 100% { translate: 0 0; } 50% { translate: 0 12px; } }
@keyframes wkFloatC { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.wk-art-back  { animation: wkFloatA 7.5s ease-in-out 1.2s infinite; }
.wk-art-front { animation: wkFloatB 8.4s ease-in-out 1.6s infinite; }
.wk-art-lead  { animation: wkFloatC 6.8s ease-in-out 1s infinite; }

/* Hover par float ruk jaata hai. Yahan transform mat do — chalti
   animation regular declaration ko haraa deti hai, to woh lagta hi nahi. */
.wk-hero-art:hover .wk-art-card { animation-play-state: paused; }
.wk-hero-art:hover .wk-art-lead { box-shadow: 0 40px 84px rgba(5, 6, 10, 0.4); }

/* Stack bhi hero ke baaki hisson ke saath hi andar aaye */
/* Bina perspective ke rotateY sirf chaudai ghatata hai — mudta hua
   nahi lagta. Yahi do line poore stack ko 3D banati hain. */
.wk-hero-art {
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
  animation: wkUp 1s var(--wk-ease) 0.35s both;
}

/* Andar ka ghera — mouse ke hisaab se work.js do number bhejta hai.
   Stage ghumta hai, card nahi, isliye unka 3D pose jaisa ka taisa. */
.wk-art-turn {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--turn-x, 0deg)) rotateY(var(--turn-y, 0deg));
  transition: transform 0.7s var(--wk-ease);
}

/* Mouse card par chalte waqt turant follow kare */
.wk-hero-art.is-turning .wk-art-turn { transition: transform 0.12s linear; }

@media (prefers-reduced-motion: reduce) {
  .wk-art-turn { transform: none; transition: none; }
}

@media (max-width: 1024px) {
  .wk-hero-top { grid-template-columns: 1fr; gap: 0; }
  .wk-hero-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-art-back, .wk-art-front, .wk-art-lead, .wk-hero-art { animation: none; }
}

/* ==========================================================================
   HERO STACK ab dabane layak hai

   Pehle ye <figure> thi — sirf dekhne ki cheez. Ab <button> hai, isliye
   dikhna bhi chahiye ki ise daba sakte ho: haath ka ishara, play ka
   nishaan, aur upar aate hi thoda ujaala.
   ========================================================================== */

.wk-art-card {
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  text-align: inherit;
}

/* Keyboard se aane par saaf dikhe ki abhi kaun sa card chuna hua hai */
.wk-art-card:focus-visible {
  outline: 3px solid var(--color-blue-primary, #1264F4);
  outline-offset: 4px;
}

/* Play ka nishaan — beech me, halka sa kaanch jaisa */
.wk-art-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0B0F1A;
  box-shadow: 0 10px 26px rgba(5, 6, 10, 0.34);
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.35s var(--wk-ease), scale 0.35s var(--wk-ease);
}
.wk-art-play svg { width: 22px; height: 22px; margin-left: 2px; }

/* Beech wale card par hamesha dikhta hai — wahi sabse aage hai, aur usi
   se pata chalta hai ki poora stack dabane layak hai */
.wk-art-lead .wk-art-play { opacity: 0.94; scale: 1; }

.wk-art-card:hover .wk-art-play,
.wk-art-card:focus-visible .wk-art-play { opacity: 1; scale: 1.06; }

/* Jis card par mouse ho wo thoda aage aa jaye */
.wk-art-card:hover { filter: none; }
.wk-art-card:hover .wk-art-play { background: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .wk-art-play { transition: none; }
}

/* Akela link tha aur 19px ka — ungli ke liye upar-neeche jagah di.
   Dikhne me waisa hi, margin se naap wapas seedha kar diya. */
.wk-back { padding: 6px 0; margin-top: -6px; }