/* ==========================================================================
   FIRST OWNER MEDIA — CLIENT CASE STUDY PAGES

   Chheyon clients yahi ek file use karte hain. Har page apne brand ka rang
   body par --cs me deta hai (wahi rang jo work page ke card par hai), aur
   logo ka tile bhi wahi treatment use karta hai — plate ka tint, bevel aur
   halki parchhai. Isliye card se page par aane par kuch badla hua nahi
   lagta.
   ========================================================================== */

.client-page {
  --cs: var(--color-blue-primary);
  --cs-plate: #F2F5FA;

  --cs-ink: #05060A;
  --cs-paper: #FBFBFD;
  --cs-paper-2: #F3F6FB;
  --cs-line: rgba(5, 6, 10, 0.10);
  --cs-muted: #646B78;

  --cs-dark: #07080C;
  --cs-dark-2: #101725;

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

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

.client-page .bg-dotted-texture { opacity: 0.3; }

.client-page .header {
  position: sticky;
  top: 0;
  background: rgba(251, 251, 253, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cs-line);
}

.client-page .nav-link.is-current { position: relative; color: var(--color-blue-primary); }
.client-page .nav-link.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-blue-primary);
}

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

.cs-h2 {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cs-ink);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.cs-hero {
  position: relative;
  overflow: hidden;
  padding: 46px 0 58px;
  border-bottom: 1px solid var(--cs-line);
  background:
    radial-gradient(70% 90% at 88% 0%, color-mix(in srgb, var(--cs) 16%, transparent), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--cs-paper) 100%);
}

.cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: center;
}

.cs-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cs-muted);
}
.cs-crumb a { color: var(--cs-muted); text-decoration: none; }
.cs-crumb a:hover { color: var(--cs); }
.cs-crumb b { color: var(--cs-ink); font-weight: 700; }
.cs-crumb span { opacity: 0.4; }

.cs-cat {
  display: inline-block;
  margin-top: 24px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cs) 12%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--cs) 26%, transparent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cs) 78%, #000000);
}

.cs-title {
  margin: 16px 0 0;
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: var(--cs-ink);
}

.cs-lede {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.7;
  color: var(--cs-muted);
}

.cs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.4s var(--cs-ease),
    box-shadow 0.4s var(--cs-ease),
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}
.cs-btn svg { width: 16px; height: 16px; }
.cs-btn:hover { transform: translateY(-2px); }

.cs-btn-solid {
  background: var(--cs);
  color: #FFFFFF;
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--cs) 90%, transparent);
}
.cs-btn-line {
  border-color: var(--cs-line);
  background: #FFFFFF;
  color: var(--cs-ink);
}
.cs-btn-line:hover { border-color: color-mix(in srgb, var(--cs) 45%, transparent); color: var(--cs); }

.cs-btn-ghost {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.cs-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* ---- Logo plate — work page wale card jaisa hi ---- */
.cs-plate {
  display: grid;
  place-items: center;
  height: 240px;
  border-radius: 22px;
  border: 1px solid var(--cs-line);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
    var(--cs-plate);
  overflow: hidden;
}

.cs-tile {
  padding: 14px 16px;
  border-radius: 18px;
  background: #FFFFFF;
  transform: rotateX(5deg) rotateY(-8deg);
  box-shadow:
    0 1px 2px rgba(6, 12, 22, 0.16),
    0 10px 20px -12px rgba(6, 12, 22, 0.45),
    0 26px 40px -20px color-mix(in srgb, var(--cs) 55%, rgba(6, 12, 22, 0.55)),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(6, 12, 22, 0.06);
}
.cs-tile.is-round { padding: 8px; border-radius: 50%; }

.cs-logo {
  display: block;
  max-width: 100%;
  max-height: calc(240px * var(--cs-cap, 0.62) - 28px);
  width: auto;
  object-fit: contain;
}

.cs-mono {
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--cs);
}

/* ==========================================================================
   BODY
   ========================================================================== */
.cs-body { padding: 64px 0; }

.cs-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 46px;
  align-items: start;
}

.cs-story p {
  margin: 0 0 16px;
  font-size: 1.02rem;
  line-height: 1.78;
  color: #374151;
}
.cs-story .cs-h2 { margin-top: 34px; }
.cs-story .cs-h2:first-child { margin-top: 0; }

.cs-side {
  padding: 26px 24px;
  border: 1px solid var(--cs-line);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 20px 40px -34px rgba(5, 6, 10, 0.6);
}

.cs-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cs-line);
}
.cs-fact strong {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--cs);
}
.cs-fact span {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.cs-did { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cs-did li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #374151;
}
.cs-did svg {
  width: 20px; height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cs) 12%, transparent);
  color: var(--cs);
  stroke-width: 3.2;
}

/* ==========================================================================
   REELS
   ========================================================================== */
.cs-reels {
  padding: 64px 0;
  background: var(--cs-paper-2);
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line);
}

.cs-reels-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}
.cs-reels-head .cs-h2 { margin-bottom: 0; }

.cs-more-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cs);
  text-decoration: none;
}
.cs-more-link svg { width: 15px; height: 15px; }
.cs-more-link:hover { gap: 11px; }

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.cs-card { margin: 0; cursor: pointer; }

.cs-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #0B0D12;
  box-shadow: 0 18px 36px -26px rgba(5, 6, 10, 0.7);
  transition: transform 0.5s var(--cs-ease), box-shadow 0.5s var(--cs-ease);
}
.cs-card:hover .cs-frame {
  transform: translateY(-6px);
  box-shadow: 0 30px 52px -28px color-mix(in srgb, var(--cs) 70%, rgba(5, 6, 10, 0.7));
}

.cs-poster, .cs-prev {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cs-prev { opacity: 0; transition: opacity 0.4s ease; }
.cs-card.is-playing .cs-prev { opacity: 1; }

.cs-num {
  position: absolute;
  top: 12px; left: 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.cs-play {
  position: absolute;
  right: 12px; bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cs-ink);
  transition: transform 0.4s var(--cs-ease), background 0.3s ease;
}
.cs-play svg { width: 17px; height: 17px; }
.cs-card:hover .cs-play { transform: scale(1.08); background: #FFFFFF; }

.cs-meta { padding: 14px 4px 0; }
.cs-meta h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}
.cs-meta p {
  margin: 5px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--cs-muted);
}

/* ==========================================================================
   BAKI CLIENTS
   ========================================================================== */
.cs-others { padding: 64px 0; }

.cs-others-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}

.cs-other {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 14px;
  padding: 18px 20px;
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  background: #FFFFFF;
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.4s var(--cs-ease),
    border-color 0.35s ease,
    box-shadow 0.4s var(--cs-ease);
}

/* Us brand ke rang ka halka sa wash, hover par baayein se bhar jaata hai */
.cs-other::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg,
    color-mix(in srgb, var(--cs) 13%, transparent) 0%,
    transparent 64%);
  opacity: 0;
  transition: opacity 0.4s var(--cs-ease);
}

/* Baayein kinare par brand ki patli lakeer, upar se neeche khulti hui */
.cs-other::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cs);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.45s var(--cs-ease);
}

/* Text aur arrow wash ke upar rahein */
.cs-other > * { position: relative; z-index: 1; }

.cs-other span {
  grid-column: 1;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--cs-ink);
  transition: color 0.35s var(--cs-ease);
}

.cs-other small {
  grid-column: 1;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--cs-muted);
}

.cs-other svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--cs);
  transition: transform 0.4s var(--cs-ease);
}

.cs-other:hover,
.cs-other:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cs) 38%, transparent);
  box-shadow: 0 18px 34px -26px color-mix(in srgb, var(--cs) 80%, rgba(5, 6, 10, 0.6));
}

.cs-other:hover::before,
.cs-other:focus-visible::before { opacity: 1; }

.cs-other:hover::after,
.cs-other:focus-visible::after { transform: scaleY(1); }

.cs-other:hover svg,
.cs-other:focus-visible svg { transform: translate(3px, -3px); }

.cs-other:hover span,
.cs-other:focus-visible span { color: var(--cs); }

@media (prefers-reduced-motion: reduce) {
  .cs-other,
  .cs-other:hover,
  .cs-other:focus-visible { transform: none; }
  .cs-other::after { transition: none; }
  .cs-other:hover svg { transform: none; }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cs-cta { padding: 20px 0 60px; }

.cs-cta-in {
  padding: 52px 44px;
  border-radius: 26px;
  text-align: center;
  color: #FFFFFF;
  background:
    radial-gradient(85% 120% at 14% 0%, color-mix(in srgb, var(--cs) 45%, transparent), transparent 58%),
    linear-gradient(160deg, var(--cs-dark) 0%, var(--cs-dark-2) 100%);
}
.cs-cta-in h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cs-cta-in p {
  max-width: 58ch;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.72);
}
.cs-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.cs-cta-in .cs-btn-solid { background: #FFFFFF; color: var(--cs-ink); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.cs-lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.cs-lb[hidden] { display: none; }

.cs-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.82);
  backdrop-filter: blur(8px);
}

.cs-lb-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 300px;
  gap: 0;
  max-width: min(980px, 100%);
  max-height: 86vh;
  border-radius: 22px;
  overflow: hidden;
  background: #0E131C;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9);
  animation: csPop 0.35s var(--cs-ease) both;
}

@keyframes csPop {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: none; }
}

.cs-lb-stage { background: #000000; display: grid; place-items: center; }
.cs-lb-stage video {
  display: block;
  max-height: 86vh;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

.cs-lb-info {
  padding: 28px 26px;
  align-self: center;
  color: #FFFFFF;
}
.cs-lb-brand {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cs) 40%, #FFFFFF);
}
.cs-lb-name {
  margin: 12px 0 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.cs-lb-note {
  margin: 10px 0 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}
.cs-lb-count {
  display: block;
  margin-top: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.cs-lb-close,
.cs-lb-nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s var(--cs-ease);
}
.cs-lb-close:hover,
.cs-lb-nav:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
.cs-lb-close svg, .cs-lb-nav svg { width: 20px; height: 20px; }

.cs-lb-close { top: 22px; right: 22px; }
.cs-lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.cs-lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.cs-lb-prev:hover, .cs-lb-next:hover { transform: translateY(-50%) scale(1.06); }
.cs-lb-nav[hidden] { display: none; }

body.cs-locked { overflow: hidden; }

/* ==========================================================================
   REVEAL
   ========================================================================== */
.cs-card, .cs-did li, .cs-other, .cs-cta-in, .cs-side, .cs-story { opacity: 0; translate: 0 16px; }

.is-in .cs-card,
.is-in .cs-did li,
.is-in .cs-other {
  animation: csIn 0.55s var(--cs-ease) calc(0.04s + var(--i, 0) * 0.07s) both;
}
.is-in .cs-story { animation: csIn 0.6s var(--cs-ease) 0.02s both; }
.is-in .cs-side { animation: csIn 0.6s var(--cs-ease) 0.12s both; }
.is-in .cs-cta-in { animation: csIn 0.65s var(--cs-ease) 0.05s both; }

@keyframes csIn { to { opacity: 1; translate: 0 0; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .cs-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .cs-plate { height: 200px; order: -1; }
  .cs-body-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cs-lb-panel { grid-template-columns: minmax(0, 1fr); max-height: 92vh; overflow-y: auto; }
  .cs-lb-stage video { max-height: 62vh; }
}

@media (max-width: 720px) {
  .cs-hero { padding: 32px 0 44px; }
  .cs-body, .cs-reels, .cs-others { padding: 46px 0; }
  .cs-cta { padding: 10px 0 52px; }
  .cs-cta-in { padding: 36px 22px; }
  .cs-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .cs-actions .cs-btn, .cs-cta-actions .cs-btn { width: 100%; justify-content: center; }
  .cs-lb { padding: 0; }
  .cs-lb-panel { border-radius: 0; max-width: 100%; height: 100%; max-height: 100%; }
  .cs-lb-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card, .cs-did li, .cs-other, .cs-cta-in, .cs-side, .cs-story {
    opacity: 1;
    translate: none;
    animation: none;
  }
  .cs-btn:hover, .cs-other:hover { transform: none; }
  .cs-card:hover .cs-frame { transform: none; }
  .cs-lb-panel { animation: none; }
}

/* ==========================================================================
   "NOT ON THIS PAGE"
   Page jaan-bujh ke poora kissa nahi kehta. Ye block wahi batata hai ki
   kya roka gaya hai, aur seedha poochhne ka raasta deta hai.
   ========================================================================== */

.cs-tease {
  position: relative;
  margin-top: 34px;
  padding: 26px 28px 24px;
  border: 1px solid var(--cs-line);
  border-left: 3px solid var(--cs);
  border-radius: 0 16px 16px 0;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--cs) 6%, transparent), transparent 62%),
    #FFFFFF;
}

.cs-tease-label {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cs);
}

.cs-tease p {
  margin: 0;
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  line-height: 1.75;
  color: var(--cs-ink);
}

.cs-tease-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 40px;
  background: var(--cs-ink);
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.35s var(--cs-ease), transform 0.35s var(--cs-ease),
              box-shadow 0.35s var(--cs-ease);
}

.cs-tease-cta svg { width: 16px; height: 16px; }

.cs-tease-cta:hover {
  background: var(--cs);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--cs) 34%, transparent);
}

@media (max-width: 620px) {
  .cs-tease { padding: 22px 20px 20px; }
  .cs-tease-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-tease-cta { transition: none; }
}

/* ==========================================================================
   HERO KA DOOSRA DAUR
   Khaali jagah bhari gayi: peeche us client ka apna frame (halka sa),
   buttons ke neeche ek patti, aur plate ke upar haath se likha note.
   ========================================================================== */

/* Client ke reel ka poster, bahut halka — page uska apna lagta hai */
.cs-hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(52%, 700px);
  background-image: var(--cs-shot);
  background-size: cover;
  background-position: var(--cs-shot-pos, center);

  /* Blur + halka rang udaana zaroori hai. Bina iske reel ke poster ke
     bade akshar halke hone par bhi padhe jaate hain, aur lagta hai kisi
     aur ka adhoora text chipka reh gaya. Blur ke baad wahi tasveer sirf
     roshni aur gehrai deti hai. */
  filter: blur(var(--cs-shot-blur, 26px)) saturate(0.78) brightness(1.04);
  transform: scale(1.06);          /* blur ke kinare andar rahen */
  opacity: var(--cs-shot-fade, 0.34);

  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 48%);
  pointer-events: none;
  z-index: 0;
}

/* Tasveer ke upar brand ka rang — panel ek hi mizaj ka lagta hai */
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* garam parat — tasveer ka apna rang page ke saath ghul jaye */
    linear-gradient(200deg, color-mix(in srgb, var(--cs) 26%, transparent), transparent 62%),
    radial-gradient(56% 74% at 96% 4%, color-mix(in srgb, var(--cs) 22%, transparent), transparent 68%),
    /* baayen taraf kaagaz me ghulti hui, taaki headline saaf padhe */
    linear-gradient(90deg, var(--cs-paper) 26%, color-mix(in srgb, var(--cs-paper) 55%, transparent) 46%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.cs-hero > * { position: relative; z-index: 1; }

/* ---- Buttons ke neeche ki patti ---- */
.cs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--cs-line);
}

/* Namune wale hisse sirf ?preview=1 par dikhne chahiye. Neeche wale
   .cs-strip-item par apna display: flex tha, jo browser ke [hidden] ko
   haraa deta tha — isliye "40K+ views" har client page par asli lagkar
   dikh raha tha, jabki wo humara likha hua namuna hai. */
.cs-strip-item[hidden] { display: none; }

.cs-strip-item {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cs-strip-item svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--cs);
}
.cs-strip-item span {
  display: grid;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--cs-muted);
}
.cs-strip-item b {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

/* ---- Plate + haath se likha note ---- */
.cs-plate-wrap { position: relative; }

.cs-note {
  position: absolute;
  top: -34px; right: 6px;
  max-width: 190px;
  text-align: right;
  font-family: 'Caveat', cursive;
  font-size: 1.28rem;
  line-height: 1.15;
  color: color-mix(in srgb, var(--cs) 72%, #000000);
  pointer-events: none;
}
.cs-note svg {
  display: block;
  width: 64px; height: 32px;
  margin: 2px 0 0 auto;
  opacity: 0.7;
}

/* ---- Side card ka "kis liye" ---- */
.cs-aim {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cs) 8%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--cs) 20%, transparent);
}
.cs-aim svg { width: 20px; height: 20px; color: var(--cs); margin-top: 2px; }
.cs-aim b {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--cs) 74%, #000000);
}
.cs-aim p {
  margin: 5px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--cs-muted);
}

/* ---- Client ke apne shabd ---- */
.cs-quote {
  position: relative;
  margin: 30px 0 0;
  padding: 26px 28px;
  border-left: 3px solid var(--cs);
  border-radius: 0 16px 16px 0;
  background: color-mix(in srgb, var(--cs) 7%, #FFFFFF);
}
.cs-quote-tag {
  position: absolute;
  top: 20px; right: 22px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cs-muted);
}
.cs-quote > svg {
  width: 26px; height: 26px;
  color: color-mix(in srgb, var(--cs) 45%, transparent);
}
.cs-quote blockquote {
  margin: 10px 0 0;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.7;
  color: #374151;
}
.cs-quote figcaption {
  display: grid;
  margin-top: 16px;
}
.cs-quote figcaption b { font-size: 0.92rem; font-weight: 800; color: var(--cs-ink); }
.cs-quote figcaption small { font-size: 0.78rem; color: var(--cs-muted); }

@media (max-width: 1000px) {
  .cs-hero::after { width: 100%; opacity: 0.1; -webkit-mask-image: none; mask-image: none; }
  .cs-note { position: static; max-width: none; text-align: left; margin-bottom: 10px; }
  .cs-note svg { margin: 2px auto 0 0; transform: scaleX(-1); }
}

@media (max-width: 560px) {
  .cs-strip { gap: 12px 20px; }
  .cs-strip-item { width: calc(50% - 10px); }
}

/* Preview me hi dikhne wali cheezon par ek patli si nishani — taaki
   screenshot dekhte waqt yaad rahe ki ye abhi namuna hai */
body.is-preview [data-preview] { position: relative; }
body.is-preview .cs-quote.is-sample::after {
  content: "sample — real quote aane par live hoga";
  position: absolute;
  left: 28px; bottom: 10px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cs) 55%, #FFFFFF);
}
body.is-preview .cs-quote.is-sample { padding-bottom: 34px; }

/* ==========================================================================
   CLIENT KI APNI WEBSITE

   Case study me hum apna kaam khud bata rahe hote hain. Ye ek kadam aage
   hai — seedha unke apne page par le jaata hai, jahan wahi kaam live laga
   hua hai. Isliye ye button jaisa nahi, ek "proof" wali patti jaisa dikhta
   hai: brand ka rang, aur hover par halka sa uthta hua.

   Doosre case study pages par bhi wahi markup chipka do — rang --cs se
   apne aap aa jayega.
   ========================================================================== */

.cs-live {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 12px 16px 12px 13px;
  border: 1px solid color-mix(in srgb, var(--cs) 28%, transparent);
  border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cs) 9%, #FFFFFF), #FFFFFF);
  text-decoration: none;
  max-width: 100%;
  transition:
    transform 0.4s var(--cs-ease),
    box-shadow 0.4s var(--cs-ease),
    border-color 0.4s var(--cs-ease);
}

.cs-live:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cs) 50%, transparent);
  box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--cs) 85%, transparent);
}

.cs-live-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cs) 14%, #FFFFFF);
  color: color-mix(in srgb, var(--cs) 85%, #000000);
}
.cs-live-ico svg { width: 18px; height: 18px; }

.cs-live-txt { min-width: 0; }

.cs-live-txt b {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cs-ink);
}

.cs-live-txt span {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--cs-muted);
  /* Lamba naam ho to ek hi line me kaat do, patti todne se behtar hai */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-live-go {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  margin-left: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cs) 12%, #FFFFFF);
  color: color-mix(in srgb, var(--cs) 85%, #000000);
  transition: transform 0.4s var(--cs-ease), background 0.4s var(--cs-ease);
}
.cs-live-go svg { width: 15px; height: 15px; }

.cs-live:hover .cs-live-go {
  transform: translate(2px, -2px);
  background: color-mix(in srgb, var(--cs) 22%, #FFFFFF);
}

@media (max-width: 560px) {
  .cs-live { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-live:hover,
  .cs-live:hover .cs-live-go { transform: none; }
}

/* ==========================================================================
   KAAM KE SAATH USKA LIKHA HUA

   Reels ke bagal me us brand ke article. Reel dikhata hai ki kya banaya,
   article batata hai ki aisa kyun banaya — dono saath me hi poori baat
   banti hai.

   Posts /api/posts se aate hain (client.js). Us brand ka koi post na ho to
   jagah khali nahi chhodte — ek seedhi line reh jaati hai.
   ========================================================================== */

.cs-work { display: block; }

/* Pehle likha hua, phir kaam. Isliye article poori chaudai me upar
   baithta hai aur reels uske neeche apni poori jagah lete hain. */
.cs-reads {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 40px;
  padding: 26px 28px 24px;
  border: 1px solid var(--cs-line);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(5, 6, 10, 0.04);
}

.cs-reads-title {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

.cs-reads-head { min-width: 0; }

.cs-reads-body {
  min-width: 0;
  padding-left: 26px;
  border-left: 1px solid var(--cs-line);
}

.cs-reads-sub {
  margin-top: 8px;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--cs-muted);
}

.cs-reads-list { min-width: 0; }

.cs-reads-empty {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #94A3B8;
}

/* ---- Ek post ---- */
.cs-read {
  display: block;
  padding: 12px 0;
  border-bottom: 1px dashed var(--cs-line);
  text-decoration: none;
  color: inherit;
}

.cs-read:last-of-type { border-bottom: none; }

.cs-read-tag {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs);
}

.cs-read-title {
  display: block;
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--cs-ink);
  transition: color 0.3s var(--cs-ease);
}

.cs-read:hover .cs-read-title { color: var(--cs); }

.cs-read-meta {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--cs-muted);
}

.cs-reads-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--cs);
  text-decoration: none;
}

.cs-reads-all svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s var(--cs-ease);
}

.cs-reads-all:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   CHHOTI SCREEN — pehle kaam, uske baad uska likha hua
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .cs-reads {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cs-reads-body {
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid var(--cs-line);
  }
}

@media (max-width: 560px) {
  .cs-reads { padding: 22px 20px 18px; }
}


/* ==========================================================================
   "WHAT WE DID" — ab story ke andar, "How the work went" ke neeche

   Pehle ye side card me chhota sa pada tha. Ye hamara apna kaam hai,
   isliye ab poori chaudai leta hai aur page ka sabse bhara hua block hai.
   Rang wahi --cs hai jo har client ka apna accent hai.
   ========================================================================== */

.cs-did-block {
  position: relative;
  margin: 34px 0 10px;
  padding: 28px 30px 26px 34px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--cs) 26%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cs) 10%, #FFFFFF) 0%,
    #FFFFFF 72%
  );
  box-shadow: 0 26px 50px -36px color-mix(in srgb, var(--cs) 80%, transparent);
  overflow: hidden;
}

/* Baayin taraf accent ki patti */
.cs-did-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--cs),
    color-mix(in srgb, var(--cs) 35%, transparent)
  );
}

.cs-did-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--cs);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cs) 90%, transparent);
}
.cs-did-kicker svg { width: 14px; height: 14px; }

/* Do column — chaudai mil gayi hai to list ko bhi use karne do */
.cs-did-block .cs-did {
  margin-top: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 30px;
}

.cs-did-block .cs-did li {
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #1F2937;
}

.cs-did-block .cs-did svg {
  width: 22px; height: 22px;
  background: var(--cs);
  color: #FFFFFF;
}

/* Andar wala "kis liye" ab block ka footer hai */
.cs-did-block .cs-aim {
  margin-top: 24px;
  padding-top: 20px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border: 0;
  border-top: 1px dashed color-mix(in srgb, var(--cs) 32%, transparent);
  border-radius: 0;
  background: none;
}

@media (max-width: 720px) {
  .cs-did-block {
    padding: 22px 20px 20px 24px;
    border-radius: 16px;
  }
  .cs-did-block .cs-did { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* Facts card ab akela hai — uske neeche ki lakeer ab kuch alag nahi karti */
.cs-facts:last-child { padding-bottom: 0; border-bottom: 0; }

/* ==========================================================================
   BODY — khaali safed jagah ko design mila

   Pehle ye section sirf dotted safed tha, aur "How the work went" ke
   neeche ek bada khaali gaddha reh jaata tha. Ab:
     - halka sa brand-rang ka panel, taaki section apni pehchaan de
     - daayen kinare par teen shabd jo is case ki jaan hain
   Shabd har page apne deta hai (--cs-w1/2/3), CSS ek hi hai.
   ========================================================================== */

.cs-body {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(64% 48% at 6% 0%, color-mix(in srgb, var(--cs) 7%, transparent), transparent 62%),
    linear-gradient(180deg, var(--cs-paper) 0%, #FFFFFF 58%);
}

.cs-body > * { position: relative; z-index: 1; }

/* Daayen kinare par khadi patti — case ke teen shabd */
.cs-words {
  position: absolute;
  top: 50%;
  right: clamp(12px, 3vw, 46px);
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--cs) 40%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.cs-words span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cs) 52%, transparent);
  white-space: nowrap;
}

/* Chhoti screen par ye sirf raasta rokti hai */
@media (max-width: 1240px) { .cs-words { display: none; } }

/* ==========================================================================
   REELS KE BAAD — AAGE KA RASTA

   Reel khatam hone ke theek baad visitor sabse zyada tayyar hota hai, aur
   abhi wahan se seedha "who else" chala jaata tha. Ab wahin do raaste
   hain: apne liye yahi chahiye, ya baaki kaam dekhna hai.
   ========================================================================== */

.cs-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--cs-line);
}

.cs-next-line {
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--cs-muted);
}

.cs-next-line b {
  display: block;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
  margin-bottom: 4px;
}

.cs-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 720px) {
  .cs-next {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .cs-next-actions { width: 100%; }
  .cs-next-actions .cs-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   PROJECT, IN SHORT

   Kaam ka byora ek jagah — kis industry ka, kitna banaya, kis naap me,
   kahan chalta hai — aur uske neeche wahi chaar kadam jo work page par
   likhe hain, taaki kahani aur tareeka dono ek hi page par mil jaayein.
   ========================================================================== */

.cs-detail {
  padding: 82px 0 84px;
  border-top: 1px solid var(--cs-line);
}

.cs-spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 30px;
  border: 1px solid var(--cs-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--cs-line);
}

.cs-spec-row {
  padding: 20px 22px;
  background: #FFFFFF;
}

.cs-spec dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.cs-spec dd {
  margin: 8px 0 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--cs-ink);
}

.cs-spec dd a {
  color: var(--cs);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--cs-ease);
}

.cs-spec dd a:hover { border-bottom-color: var(--cs); }

/* ---- Chaar kadam ---- */
.cs-h3 {
  margin-top: 54px;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--cs-ink);
}

.cs-run {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.cs-step {
  padding: 22px 20px 20px;
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  background: #FFFFFF;
}

.cs-step-n {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--cs);
}

.cs-step h4 {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

.cs-step p {
  margin-top: 8px;
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--cs-muted);
}

@media (max-width: 1000px) {
  .cs-spec { grid-template-columns: repeat(2, 1fr); }
  .cs-run { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .cs-detail { padding-top: 62px; }
  .cs-spec { grid-template-columns: 1fr; }
  .cs-run { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   ACCENT KO PADHNE LAAYAK BANAO

   Har client ka apna rang hai aur kuch (Shobha ka sona, Red Carpet ka
   halka gold) safed par itne halke padte hain ki chhota text dhundhla ho
   jaata hai — naapa to 2.75 nikla, jabki 4.5 chahiye.

   Rang badla nahi hai; sirf text aur bhare hue button ke liye usi rang ka
   gehra roop use ho raha hai. Border, icon, tile, glow — wahan wahi chamak
   rehti hai, kyunki wahan padhna nahi hota.
   ========================================================================== */

.client-page {
  --cs-ink-a: color-mix(in srgb, var(--cs) 68%, #000000);
}

/* Accent me likha hua text */
.cs-cat,
.cs-more-link,
.cs-reads-all,
.cs-strip-item b,
.cs-fact strong,
.cs-spec dd a,
.cs-aim b,
.cs-read:hover .cs-read-title,
.cs-crumb a:hover,
.cs-btn-line:hover { color: var(--cs-ink-a); }

/* Safed text jin par accent ka bharav hai */
.cs-btn-solid,
.cs-did-kicker { background: var(--cs-ink-a); }

/* Ye grey #94A3B8 tha — safed par 2.56 */
.cs-reads-empty { color: #64748B; }