/* ==========================================================================
   Clients — the people we build with
   hero · logo ecosystem · numbers · large testimonial · client stories ·
   partnership statement · closing CTA
   The testimonial markup reuses js/testimonials.js, so the .t-* hooks
   (t-slider, t-card, t-slide, t-count__sep, is-active/is-leaving/is-playing)
   keep their names — only the styling is this page's own.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */
.cl-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; padding: calc(var(--header-h) + clamp(2rem, 7vh, 5rem)) 0 clamp(1.75rem, 4vh, 3rem); background: var(--black); color: var(--white); }
.cl-hero__glow { position: absolute; left: 20%; right: -14%; bottom: -34%; z-index: -1; height: 88%; background: radial-gradient(36% 46% at 42% 50%, rgb(107 63 212 / 0.42), transparent 70%), radial-gradient(30% 40% at 78% 42%, rgb(58 126 246 / 0.32), transparent 70%); pointer-events: none; }
.cl-hero__inner { display: flex; flex: 1; flex-direction: column; }
.cl-hero__label { display: flex; align-items: center; gap: 1.25rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.cl-hero__label span:first-child { color: var(--white); }
.cl-hero__label span + span::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 1.25rem; background: currentColor; vertical-align: middle; }
.cl-hero__title { margin-block: auto; padding-block: clamp(2.5rem, 7vh, 5rem); font-size: clamp(3rem, 0.5rem + 9.6vw, 12.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; }
.cl-hero__title .mask { display: block; width: fit-content; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.cl-hero__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; }
.cl-hero__lead { max-width: 22em; font-size: clamp(1.15rem, 0.85rem + 0.9vw, 2rem); line-height: 1.3; letter-spacing: -0.025em; color: rgb(255 255 255 / 0.78); }
.cl-hero__next { display: inline-flex; align-items: center; gap: 0.9rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgb(255 255 255 / 0.3); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: border-color 0.35s; }
.cl-hero__next svg { width: 1.3rem; height: 0.65rem; rotate: 90deg; transition: translate 0.5s var(--ease-out); }
.cl-hero__next:is(:hover, :focus-visible) { border-color: var(--white); }
.cl-hero__next:is(:hover, :focus-visible) svg { translate: 0 0.25rem; }

@media (prefers-reduced-motion: no-preference) {
  .js .cl-hero__title .mask > span { transform: translate3d(0, 110%, 0); }
  .is-loaded .cl-hero__title .mask > span { transform: none; transition: transform 1.3s var(--ease-out) calc(var(--d) * 130ms + 150ms); }
}

/* ==========================================================================
   Client ecosystem — scattered, monochrome, colour on hover
   ========================================================================== */
.cl-eco { background: var(--off-white); color: var(--black); padding-block: clamp(4rem, 8vw, 9rem) clamp(5rem, 10vw, 11rem); }
.cl-eco__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: end; gap: 1.25rem clamp(2rem, 6vw, 8rem); }
.cl-eco__head .d-eyebrow { grid-column: 1 / -1; }
.cl-eco__title { font-size: clamp(2.4rem, 0.9rem + 4.7vw, 6.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; }
.cl-eco__title .mask { display: block; width: fit-content; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.cl-eco__aside { max-width: 26em; font-size: clamp(1rem, 0.85rem + 0.35vw, 1.25rem); line-height: 1.45; color: #5e5e5e; }

.cl-field { --px: 0; --py: 0; position: relative; container-type: inline-size; aspect-ratio: 16 / 9; margin-top: clamp(3rem, 6vw, 6rem); }
.cl-field__web { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-web__lines path { fill: none; stroke: rgb(0 0 0 / 0.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cl-web__dots circle { fill: rgb(0 0 0 / 0.28); }
.cl-web__pulse { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0.06 0.94; stroke-dashoffset: 0.06; opacity: 0; }

.cl { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1cqi); transform: translate3d(calc(var(--px) * var(--depth, 1) * 1.1cqi), calc(var(--py) * var(--depth, 1) * 0.8cqi), 0); transition: transform 0.9s var(--ease-out); }
.cl img { width: 100%; height: auto; filter: grayscale(1); opacity: 0.5; transition: filter 0.5s, opacity 0.5s, scale 0.7s var(--ease-out); }
.cl:is(:hover, :focus-visible) img { filter: none; opacity: 1; scale: 1.04; }
.cl-field:has(.cl:hover) .cl:not(:hover) img { opacity: 0.2; }
.cl:focus-visible { outline-offset: 0.75rem; }

@media (prefers-reduced-motion: no-preference) {
  .cl { animation: cl-float var(--t, 15s) var(--ease-in-out) var(--d, 0s) infinite alternate; }
  .cl-web__pulse { opacity: 1; animation: cl-pulse 9s var(--ease-in-out) 2s infinite; }
  .cl-eco.is-paused .cl, .cl-eco.is-paused .cl-web__pulse { animation-play-state: paused; }
  @keyframes cl-float { to { translate: 0 -1.4cqi; } }
  @keyframes cl-pulse { 0% { stroke-dashoffset: 0.06; opacity: 0.9; } 70% { stroke-dashoffset: -0.94; opacity: 0.9; } 70.1%, 100% { opacity: 0; } }
}

/* ==========================================================================
   Numbers
   ========================================================================== */
.cl-num { background: var(--black); color: var(--white); padding-block: clamp(4.5rem, 9vw, 10rem); }
.cn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 5vw, 5rem); }
.cn__item { position: relative; padding-top: clamp(1.25rem, 2vw, 2rem); border-top: 1px solid rgb(255 255 255 / 0.4); }
.cn__item::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--purple), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) calc(var(--i) * 140ms + 0.2s); }
.cn__item.is-in::after { transform: none; }
.cn__v { display: flex; align-items: baseline; gap: 0.12em; font-size: clamp(3.2rem, 1.2rem + 7vw, 10rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.cn__v small { font-size: 0.3em; font-weight: 600; letter-spacing: -0.01em; color: rgb(255 255 255 / 0.6); }
.cn__k { margin-top: clamp(0.75rem, 1.5vw, 1.25rem); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }

/* ==========================================================================
   Testimonial — one quote, most of the screen
   ========================================================================== */
.cl-t { position: relative; isolation: isolate; overflow: clip; background: var(--violet); color: var(--white); padding-block: clamp(4.5rem, 9vw, 10rem); }
.cl-t__mark { position: absolute; left: clamp(-1rem, 2vw, 4rem); top: clamp(1rem, 4vw, 5rem); z-index: -1; width: clamp(11rem, 30vw, 34rem); aspect-ratio: 48 / 40; color: #7f62f2; pointer-events: none; }
.cl-t__mark svg { width: 100%; height: 100%; fill: currentColor; }

.t-slider { position: relative; }
.t-card { display: grid; align-items: center; min-height: min(58svh, 32rem); touch-action: pan-y; }
.t-card:focus-visible { outline-offset: 1.5rem; }
.t-card__slides { display: grid; }
.t-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease-soft), visibility 0s linear 0.5s; }
.t-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s var(--ease-soft) 0.12s, visibility 0s; }
.t-slide__heading { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); }
.t-slide blockquote p { max-width: 17em; margin-top: clamp(1rem, 2.2vw, 2rem); font-size: clamp(1.6rem, 0.8rem + 2.9vw, 4.5rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.04em; }
.t-slide figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.75rem); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); }
.t-slide figcaption b { font-weight: 600; color: var(--white); }

.t-controls { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid rgb(255 255 255 / 0.28); }
.t-btn { display: grid; place-items: center; width: 3.25rem; height: 2.5rem; color: var(--white); opacity: 0.65; transition: opacity 0.3s, transform 0.5s var(--ease-out); }
.t-btn svg { width: 2.4rem; height: 1.2rem; }
.t-btn--prev svg { rotate: 180deg; }
.t-btn:is(:hover, :focus-visible) { opacity: 1; transform: translateX(4px); }
.t-btn--prev:is(:hover, :focus-visible) { transform: translateX(-4px); }
.t-count { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.t-count__sep { position: relative; width: clamp(3rem, 8vw, 7rem); height: 1px; background: rgb(255 255 255 / 0.3); overflow: hidden; }
.t-count__sep::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; }
.t-slider.is-playing .t-count__sep::after { animation: t-progress var(--t-interval, 7s) linear forwards; }
.t-slider.is-playing.is-paused .t-count__sep::after { animation-play-state: paused; }
@keyframes t-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .t-slide__body > * { transform: translate3d(calc(var(--dir, 1) * 2.5rem), 0, 0); transition: transform 1s var(--ease-out); }
  .t-slide.is-leaving .t-slide__body > * { transform: translate3d(calc(var(--dir, 1) * -2.5rem), 0, 0); transition-duration: 0.6s; }
  .t-slide.is-active .t-slide__body > * { transform: none; }
  .t-slide.is-active .t-slide__body > :nth-child(2) { transition-delay: 0.06s; }
  .t-slide.is-active .t-slide__body > :nth-child(3) { transition-delay: 0.12s; }
}

/* ==========================================================================
   Client stories
   ========================================================================== */
.cl-story { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 10vw, 11rem); }
.st { margin-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--black); }
.st__item { position: relative; display: grid; grid-template-columns: clamp(2.5rem, 4.5vw, 4.5rem) minmax(0, 1.2fr) minmax(0, 2.3fr) clamp(6.5rem, 10vw, 10rem); align-items: start; gap: 1rem clamp(1.5rem, 3vw, 3rem); padding-block: clamp(1.75rem, 3vw, 3rem); border-bottom: 1px solid var(--border-light); }
.st__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-out); }
.st__no { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; color: #8a8a8a; font-variant-numeric: tabular-nums; transition: color 0.35s; }
.st__name { font-size: clamp(1.45rem, 1rem + 1.5vw, 2.9rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; transition: transform 0.7s var(--ease-out), color 0.35s; }
.st__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st__link:focus-visible { outline: none; }
.st__item:has(.st__link:focus-visible) { outline: 2px solid var(--blue-bright); outline-offset: 0.5rem; }
.st__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem clamp(1.25rem, 2.5vw, 2.5rem); }
.st__grid dt { margin-bottom: 0.45rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; transition: color 0.35s; }
.st__grid dd { font-size: 0.95rem; line-height: 1.45; color: #4d4d4d; }
.st__go { justify-self: end; display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em; color: var(--accent); }
.st__go svg { width: 1.5rem; height: 0.75rem; }

@media (hover: hover) and (pointer: fine) {
  .st__go { opacity: 0; translate: -0.5rem 0; transition: opacity 0.4s var(--ease-soft), translate 0.6s var(--ease-out); }
  .st__item:hover .st__go { opacity: 1; translate: none; }
  .st__item:hover::after { transform: none; }
  .st__item:hover .st__name { color: var(--accent); transform: translateX(clamp(0.35rem, 1vw, 1rem)); }
  .st__item:hover .st__no { color: var(--accent); }
  .st__item:hover .st__grid dt { color: var(--accent); }
  .st:hover .st__item:not(:hover) .st__name { color: #a0a0a0; }
}

/* ==========================================================================
   Partnership
   ========================================================================== */
.cl-part { background: var(--black); color: var(--white); padding-block: clamp(5rem, 10vw, 12rem); }
.cl-part__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; gap: 2.5rem clamp(2rem, 6vw, 8rem); }
.cl-part__title { font-size: clamp(2.4rem, 0.8rem + 5.2vw, 7.25rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; }
.cl-part__title .mask { display: block; width: fit-content; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.cl-part__title .mask:last-child > span { color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.55); }
.cl-part__body p { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.45rem); line-height: 1.45; color: rgb(255 255 255 / 0.66); }
.cl-arc { position: relative; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(2rem, 3.5vw, 3rem); }
.cl-arc::before { content: ""; position: absolute; left: 0; right: 0; top: 1.1rem; z-index: -1; height: 1px; background: rgb(255 255 255 / 0.18); }
.cl-arc li { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.55rem 0.95rem; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; background: var(--black); font-size: var(--fs-small); font-weight: 600; }
.cl-arc li b { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; color: var(--blue-bright); }

.cl-cta .s-cta__text strong { font-weight: 600; color: var(--black); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .cl-eco__head, .cl-part__grid { grid-template-columns: 1fr; }
  .st__item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .st__name { grid-column: 2; }
  .st__grid { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.75rem; }
  .st__go { grid-column: 2; justify-self: start; margin-top: 0.5rem; }
}

@media (max-width: 48em) {
  .cl-field { aspect-ratio: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.75rem, 6vw, 3rem) clamp(1.5rem, 8vw, 3rem); }
  .cl-field__web { display: none; }
  .cl { position: static; width: calc(var(--w) * 2.9cqi); }
  .cn { grid-template-columns: 1fr; gap: 2rem; }
  .st__grid { grid-template-columns: 1fr; gap: 1rem; }
  .t-card { min-height: 0; }
  .t-slide blockquote p { max-width: none; }
  .t-count { margin-left: 0; }
  .t-controls { flex-wrap: wrap; }
}