/* ==========================================================================
   Digital Maheshwari — Clients (/clients)
   Loaded only on the clients page, after landing.css and portfolio.css
   (it reuses .pf-browser and .pf-project__link from portfolio.css).
   Uses the shared tokens in variables.css; no new colours.
   ========================================================================== */

/* ---- Shared section head ---- */
.cl-section-head { max-width: 720px; margin-bottom: var(--dm-space-8); }
.cl-section-head h2 { margin-bottom: var(--dm-space-3); }
.cl-section-head p { color: var(--dm-text-muted); margin: 0; }
.cl-section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dm-space-8); align-items: end; }
.section--ink .cl-section-head p { color: rgba(248, 248, 251, 0.72); }

/* ---- Hero ---- */
.cl-hero { padding-block: var(--dm-space-5) var(--dm-space-8); overflow: hidden; }
.cl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--dm-space-8); align-items: center; }
.cl-hero__h1 { font-size: var(--dm-h1); margin: 0 0 var(--dm-space-4); }
.cl-hero__statement { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.2; color: var(--dm-gold-dark); margin: 0 0 var(--dm-space-5); max-width: 18ch; }
.cl-hero__lead { font-size: 1.1rem; line-height: 1.7; color: var(--dm-text-muted); max-width: 52ch; margin-bottom: var(--dm-space-6); }
.cl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--dm-space-3); }
.cl-hero__actions .btn svg { width: 16px; height: 16px; }

/* Layered website previews */
.cl-stack { position: relative; min-height: 470px; }
.cl-stack__item { position: absolute; margin: 0; width: 74%; transition: transform var(--dm-duration-slow) var(--dm-ease); }
.cl-stack__item .pf-browser { box-shadow: var(--dm-shadow-lg); }
.cl-stack__item--1 { left: 13%; top: 22%; z-index: 4; }
.cl-stack__item--2 { left: 0; top: 0; z-index: 3; transform: rotate(-3deg); opacity: 0.94; }
.cl-stack__item--3 { right: 0; top: 4%; z-index: 2; transform: rotate(3deg); opacity: 0.9; }
.cl-stack__item--4 { right: 4%; bottom: 0; z-index: 1; transform: rotate(-1.5deg); opacity: 0.85; }
.cl-stack:hover .cl-stack__item--1 { transform: translateY(-8px); }
.cl-stack:hover .cl-stack__item--2 { transform: rotate(-5deg) translateX(-10px); }
.cl-stack:hover .cl-stack__item--3 { transform: rotate(5deg) translateX(10px); }

/* Logo marquee */
.cl-marquee { margin-top: var(--dm-space-8); border-block: 1px solid var(--dm-border); background: var(--dm-surface); overflow: hidden; }
.cl-marquee__track { display: flex; width: max-content; animation: cl-marquee 48s linear infinite; }
.cl-marquee:hover .cl-marquee__track, .cl-marquee:focus-within .cl-marquee__track { animation-play-state: paused; }
.cl-marquee__set { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.cl-marquee__set li { display: grid; place-items: center; height: 104px; padding-inline: var(--dm-space-8); border-right: 1px solid var(--dm-border); }
.cl-marquee__set img { max-height: 46px; max-width: 170px; width: auto; filter: grayscale(1); opacity: 0.75; transition: filter var(--dm-duration) var(--dm-ease), opacity var(--dm-duration) var(--dm-ease); }
.cl-marquee__set li:hover img { filter: none; opacity: 1; }
@keyframes cl-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cl-marquee__track { animation: none; width: auto; }
  .cl-marquee__set { flex-wrap: wrap; justify-content: center; }
  .cl-marquee__set[aria-hidden="true"] { display: none; }
}

/* ---- Partnerships + engagement map ---- */
.cl-partner__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--dm-space-8); align-items: center; }
.cl-partner__copy .lead { font-family: var(--dm-font-display); font-size: 1.4rem; line-height: 1.35; color: var(--dm-ink); }
.cl-map { background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: var(--dm-space-6); overflow-x: auto; }
.cl-map__table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cl-map__table th, .cl-map__table td { padding: var(--dm-space-3) var(--dm-space-2); text-align: center; }
.cl-map__table thead th { vertical-align: bottom; font-size: 0.72rem; font-weight: 700; line-height: 1.3; color: var(--dm-text-muted); text-transform: none; border-bottom: 1px solid var(--dm-border); }
.cl-map__table thead th span { display: block; max-width: 8ch; margin-inline: auto; }
.cl-map__table tbody th { text-align: left; font-size: var(--dm-body-sm); font-weight: 700; color: var(--dm-ink); white-space: nowrap; padding-right: var(--dm-space-4); }
.cl-map__table tbody tr + tr > * { border-top: 1px solid var(--dm-border); }
.cl-map__dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--dm-border-strong); }
.is-on .cl-map__dot { background: var(--dm-gold); border-color: var(--dm-gold); }
.cl-map__scale { display: flex; justify-content: space-between; margin-top: var(--dm-space-4); padding-top: var(--dm-space-3); border-top: 1px dashed var(--dm-border-strong); font-size: var(--dm-caption); color: var(--dm-text-muted); }

/* ---- Featured client case studies ---- */
.cl-case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--dm-space-8); align-items: start; padding-block: var(--dm-space-8); border-top: 1px solid var(--dm-border); }
.cl-case:first-of-type { border-top: 0; padding-top: 0; }
.cl-case--flip .cl-case__media { order: 2; }
.cl-case__media { position: sticky; top: 110px; }
.cl-case__media .pf-browser { display: block; }
a.pf-browser:hover { transform: translateY(-6px); box-shadow: 0 32px 70px rgba(12, 18, 32, 0.22); }
a.pf-browser:hover .pf-browser__screen img { transform: scale(1.03); }
.cl-case__media .pf-browser__bar, .cl-case__media .pf-browser__screen { display: flex; }
.cl-case__media .pf-browser__screen { display: block; }

.cl-case__id { display: flex; align-items: center; gap: var(--dm-space-5); margin-bottom: var(--dm-space-5); }
.cl-case__logo { max-height: 52px; max-width: 150px; width: auto; object-fit: contain; flex-shrink: 0; }
.cl-case__name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); margin: 0; }
.cl-case__industry { margin: var(--dm-space-1) 0 0; font-size: var(--dm-body-sm); font-weight: 700; color: var(--dm-oxblood); }
.cl-case__headline { font-family: var(--dm-font-display); font-size: 1.35rem; line-height: 1.3; color: var(--dm-ink); margin-bottom: var(--dm-space-4); padding-left: var(--dm-space-4); border-left: 3px solid var(--dm-gold); }
.cl-case__desc { color: var(--dm-text-muted); line-height: 1.7; }

.cl-case__work { margin-top: var(--dm-space-6); }
.cl-case__work-title { font-size: var(--dm-body-sm); font-weight: 700; color: var(--dm-ink); margin: 0 0 var(--dm-space-3); font-family: var(--dm-font-body, inherit); }
.cl-work { margin: 0; border-top: 1px solid var(--dm-border); }
.cl-work__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--dm-space-4); padding-block: var(--dm-space-3); border-bottom: 1px solid var(--dm-border); }
.cl-work dt { font-size: var(--dm-caption); font-weight: 700; color: var(--dm-gold-dark); padding-top: 0.3rem; }
.cl-work dd { margin: 0; }
.cl-work ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cl-work li { font-size: var(--dm-caption); font-weight: 600; color: var(--dm-ink); padding: 0.3rem 0.7rem; border-radius: var(--dm-radius-full); background: var(--dm-surface); border: 1px solid var(--dm-border); }
.cl-case__links { margin-top: var(--dm-space-6); }

/* Lead case: full-width dark panel */
.cl-case--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--dm-ink); border-radius: var(--dm-radius-lg); padding: var(--dm-space-8); border-top: 0; margin-bottom: var(--dm-space-8); }
.cl-case--lead:first-of-type { padding-top: var(--dm-space-8); }
.cl-case--lead .cl-case__name, .cl-case--lead .cl-case__work-title { color: var(--dm-text-inverse); }
.cl-case--lead .cl-case__industry { color: var(--dm-gold-light); }
.cl-case--lead .cl-case__headline { color: var(--dm-text-inverse); }
.cl-case--lead .cl-case__desc { color: rgba(248, 248, 251, 0.74); }
.cl-case--lead .cl-case__logo { background: #fff; padding: 8px 12px; border-radius: var(--dm-radius-sm); max-height: 60px; }
.cl-case--lead .cl-work, .cl-case--lead .cl-work__row { border-color: rgba(248, 248, 251, 0.14); }
.cl-case--lead .cl-work dt { color: var(--dm-gold-light); }
.cl-case--lead .cl-work li { background: rgba(248, 248, 251, 0.06); border-color: rgba(248, 248, 251, 0.16); color: var(--dm-text-inverse); }
.cl-case--lead .pf-project__link { color: var(--dm-text-inverse); border-color: rgba(248, 248, 251, 0.3); }
.cl-case--lead .pf-project__link:hover { color: var(--dm-gold-light); }
.cl-case--lead .cl-case__media { top: 110px; }
.cl-case--lead + .cl-case { border-top: 0; padding-top: 0; }

.cl-featured__more { margin: var(--dm-space-6) 0 0; }

/* ---- Capabilities ---- */
.cl-caps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--dm-border); border-left: 1px solid var(--dm-border); }
.cl-cap { padding: var(--dm-space-6); border-right: 1px solid var(--dm-border); border-bottom: 1px solid var(--dm-border); transition: background var(--dm-duration) var(--dm-ease); }
.cl-cap:hover { background: var(--dm-surface); }
.cl-cap__title { font-size: 1.35rem; margin-bottom: var(--dm-space-4); }
.cl-cap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dm-space-2); }
.cl-cap__list li { font-size: var(--dm-body-sm); color: var(--dm-text); padding-left: var(--dm-space-4); position: relative; }
.cl-cap__list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1px; background: var(--dm-gold); }
.cl-cap__list a { color: var(--dm-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--dm-border-strong); text-underline-offset: 3px; transition: color var(--dm-duration-fast) var(--dm-ease), text-decoration-color var(--dm-duration-fast) var(--dm-ease); }
.cl-cap__list a:hover { color: var(--dm-gold-dark); text-decoration-color: var(--dm-gold); }
.cl-caps__foot { margin: var(--dm-space-6) 0 0; }

/* ---- Process: horizontal numbered sequence ---- */
.cl-process .cl-section-head { margin-bottom: var(--dm-space-7); }
.cl-steps { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(248, 248, 251, 0.3) transparent; padding-bottom: var(--dm-space-4); }
.cl-steps:focus-visible { outline: 2px solid var(--dm-gold); outline-offset: 4px; }
.cl-steps__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); list-style: none; margin: 0; padding: 0 max(var(--dm-gutter), calc((100vw - var(--dm-container)) / 2 + var(--dm-gutter))); min-width: max-content; }
.cl-step { scroll-snap-align: start; position: relative; padding: var(--dm-space-7) var(--dm-space-6) 0 0; width: 280px; }
.cl-step::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(248, 248, 251, 0.2); }
.cl-step::after { content: ''; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--dm-gold); }
.cl-step__num { display: block; font-family: var(--dm-font-display); font-size: 2.75rem; font-weight: 600; line-height: 1; color: var(--dm-gold-light); margin-bottom: var(--dm-space-4); }
.cl-step__title { font-size: 1.2rem; color: var(--dm-text-inverse); margin-bottom: var(--dm-space-2); }
.cl-step p { font-size: var(--dm-body-sm); line-height: 1.65; color: rgba(248, 248, 251, 0.72); margin: 0; }

/* ---- More clients + client index ---- */
.cl-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dm-space-5); margin-bottom: var(--dm-space-8); }
.cl-more__card { padding: var(--dm-space-6); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); background: var(--dm-surface); display: flex; flex-direction: column; gap: var(--dm-space-3); }
.cl-more__logo { max-height: 44px; max-width: 150px; width: auto; object-fit: contain; }
.cl-more__name { font-size: 1.3rem; margin: 0; }
.cl-more__industry { font-size: var(--dm-body-sm); font-weight: 700; color: var(--dm-oxblood); margin: 0; }
.cl-more__desc { font-size: var(--dm-body-sm); color: var(--dm-text-muted); margin: 0; }
.cl-more__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cl-more__tags li { font-size: var(--dm-caption); padding: 0.25rem 0.6rem; border-radius: var(--dm-radius-full); border: 1px solid var(--dm-border); }
.cl-more__card .pf-project__link { margin-top: auto; align-self: flex-start; }

.cl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dm-ink); }
.cl-list__row { display: grid; grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--dm-space-5); align-items: center; padding-block: var(--dm-space-5); border-bottom: 1px solid var(--dm-border); transition: background var(--dm-duration) var(--dm-ease); }
.cl-list__row:hover { background: var(--dm-surface); }
.cl-list__logo { display: flex; align-items: center; height: 44px; }
.cl-list__logo img { max-height: 40px; max-width: 130px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter var(--dm-duration) var(--dm-ease), opacity var(--dm-duration) var(--dm-ease); }
.cl-list__row:hover .cl-list__logo img { filter: none; opacity: 1; }
.cl-list__name { font-family: var(--dm-font-display); font-size: 1.3rem; font-weight: 600; color: var(--dm-ink); }
.cl-list__industry, .cl-list__scope { font-size: var(--dm-body-sm); color: var(--dm-text-muted); }
.cl-list__link { justify-self: end; display: inline-flex; align-items: center; gap: var(--dm-space-2); font-size: var(--dm-body-sm); font-weight: 600; color: var(--dm-ink); }
.cl-list__link svg { width: 14px; height: 14px; transition: transform var(--dm-duration) var(--dm-ease); }
.cl-list__link:hover { color: var(--dm-gold-dark); }
.cl-list__link:hover svg { transform: translate(2px, -2px); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .cl-hero__grid, .cl-partner__grid { grid-template-columns: minmax(0, 1fr); }
  .cl-section-head--split { grid-template-columns: minmax(0, 1fr); gap: var(--dm-space-3); }
  .cl-stack { min-height: 0; aspect-ratio: 16 / 11; max-width: 640px; }
  .cl-case, .cl-case--lead { grid-template-columns: minmax(0, 1fr); gap: var(--dm-space-6); }
  .cl-case--flip .cl-case__media { order: 0; }
  .cl-case__media { position: static; }
  .cl-case--lead { padding: var(--dm-space-6); }
  .cl-caps__grid, .cl-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-list__row { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); }
  .cl-list__scope { display: none; }
  .cl-list__industry { display: none; }
}
@media (max-width: 640px) {
  .cl-hero { padding-bottom: var(--dm-space-7); }
  .cl-stack { aspect-ratio: 16 / 12; }
  .cl-stack__item { width: 82%; }
  .cl-stack__item--4 { display: none; }
  .cl-marquee__set li { height: 84px; padding-inline: var(--dm-space-6); }
  .cl-marquee__set img { max-height: 36px; max-width: 130px; }
  .cl-map { padding: var(--dm-space-4); }
  .cl-case--lead { padding: var(--dm-space-5); border-radius: var(--dm-radius); }
  .cl-case__id { flex-direction: column; align-items: flex-start; gap: var(--dm-space-3); }
  .cl-work__row { grid-template-columns: minmax(0, 1fr); gap: var(--dm-space-2); }
  .cl-caps__grid, .cl-more { grid-template-columns: minmax(0, 1fr); }
  .cl-step { width: 250px; }
  .cl-list__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--dm-space-3); }
  .cl-list__logo { display: none; }
  .cl-list__link { font-size: var(--dm-caption); }
}

/* ---- Fixes: steps scroll inside the container; map fits its card ---- */
.cl-steps__track { padding: 0; }
.cl-step { width: 260px; }
.cl-map__table { min-width: 0; table-layout: fixed; }
.cl-map__table thead th:first-child, .cl-map__table tbody th { width: 30%; }
.cl-map__table tbody th { white-space: normal; line-height: 1.3; }
.cl-map__table th, .cl-map__table td { padding-inline: 4px; }
@media (max-width: 640px) {
  .cl-map__table { min-width: 500px; }
}
.cl-map__table thead th span[aria-hidden] { max-width: none; }
@media (max-width: 640px) {
  .cl-map__table { min-width: 0; }
  .cl-map__table thead th { font-size: 0.62rem; }
  .cl-map__table thead th:first-child, .cl-map__table tbody th { width: 32%; }
  .cl-map__table tbody th { font-size: var(--dm-caption); }
  .cl-map__dot { width: 13px; height: 13px; }
}
@media (max-width: 640px) {
  .cl-map__table thead th { height: 74px; padding-bottom: var(--dm-space-2); }
  .cl-map__table thead th span[aria-hidden] { writing-mode: vertical-rl; transform: rotate(180deg); margin-inline: auto; font-size: 0.68rem; white-space: nowrap; }
}
.cl-case { scroll-margin-top: 100px; }