/* =========================================================
   TESTIMONIALS — .cg-testimonials-v2
   Elementor widget. A scoped port of the testimonials section
   from the reference build (D:/Raghesh/Color Graphics/new —
   index.html `<section class="cg-testimonials">` plus the
   "TESTIMONIALS — cg-testimonials" block of assets/css/style.css).

   Only the section-specific rules are ported. Everything the
   section leans on already ships globally with this theme, with
   the same values as the reference, so it is reused rather than
   redefined (no duplicate design system):
     - tokens.css : --n-0/25/600/700/800/900/950,
                    --accent-100/300/500, --border-subtle,
                    --border-strong, --text-muted, --font-mono
     - style.css  : --font-display, and the .cg-container helper

   `.cg-min0` (min-width:0) is global in the theme too, but is
   inlined into the scoped rule below so the widget never depends
   on a global utility class existing.

   BREAKPOINTS. This section's own are 1199px and 1023px — the
   points at which the reference's slider really changes (its
   _tPerView() returns 3 at >=1200, 2 at >=1024, otherwise 1) —
   plus 999px for typography, which matches the rest of the site.
   They are NOT the theme's usual 1239/999 pair, and deliberately
   so: shifting them would move the 3->2 and 2->1 hand-offs and
   change the design between 1200-1239px and 1000-1023px.

   The @keyframes are name-spaced (cg-tv2-marquee) so they cannot
   collide with the global cgMarquee the reference site defines.
   ========================================================= */

.cg-testimonials-v2 {
  position: relative;
  padding-top: var(--cg-tv2-pad-top, 128px);
  padding-bottom: var(--cg-tv2-pad-bottom, 112px);
  background: var(--cg-tv2-bg, var(--n-25));
  color: var(--n-950);
  /* The reference clips here so the off-screen slides and the decorative
     dot field cannot widen the page. Only the horizontal axis is clipped
     in this port, so the section is always free to grow taller. */
  overflow-x: clip;
  overflow-y: visible;
}
@media (max-width: 999px) {
  .cg-testimonials-v2 {
    padding-top: var(--cg-tv2-pad-top, 72px);
    padding-bottom: var(--cg-tv2-pad-bottom, 64px);
  }
}

.cg-testimonials-v2 *,
.cg-testimonials-v2 *::before,
.cg-testimonials-v2 *::after { box-sizing: border-box; }

/* Editor-only placeholder when nothing is configured. */
.cg-testimonials-v2__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 40px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  color: var(--n-600);
  border: 1px dashed var(--border-subtle);
}

/* Visually hidden, still announced. */
.cg-testimonials-v2__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.cg-testimonials-v2__head {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 36fr) minmax(0, 22fr);
  column-gap: var(--cg-tv2-head-gap, 64px);
  row-gap: 32px;
  align-items: start;
}
@media (max-width: 1239px) {
  .cg-testimonials-v2__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--cg-tv2-head-gap, 40px);
  }
}
@media (max-width: 1023px) {
  .cg-testimonials-v2__head { grid-template-columns: 1fr; }
}

/* Without the decorative column the head is a two-up, and without the
   lede column it is a single column, so no empty track is ever held open. */
.cg-testimonials-v2__head--no-decor { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.cg-testimonials-v2__head--single { grid-template-columns: 1fr; }
@media (max-width: 1023px) {
  .cg-testimonials-v2__head--no-decor { grid-template-columns: 1fr; }
}

.cg-testimonials-v2__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cg-tv2-kicker-color, var(--accent-500));
}

.cg-testimonials-v2__kicker-rule {
  display: block;
  width: var(--cg-tv2-rule-w, 34px);
  height: var(--cg-tv2-rule-h, 3px);
  margin-top: 14px;
  background: var(--cg-tv2-rule-color, var(--accent-500));
}

.cg-testimonials-v2__title {
  margin: 36px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.04em;
  color: var(--n-950);
}
@media (max-width: 999px) {
  .cg-testimonials-v2__title { font-size: clamp(28px, 7.4vw, 36px); }
}
/* One authored line per block, exactly as the reference's three spans. */
.cg-testimonials-v2__title span { display: block; }
.cg-testimonials-v2__accent { font-style: normal; color: var(--cg-tv2-accent, var(--accent-500)); }
.cg-testimonials-v2__title--flush { margin-top: 0; }

.cg-testimonials-v2__lede-col { padding-top: 16px; }
@media (max-width: 1023px) {
  .cg-testimonials-v2__lede-col { padding-top: 0; }
}

.cg-testimonials-v2__lede {
  margin: 0;
  max-width: var(--cg-tv2-lede-max, 42ch);
  font-size: 17px;
  line-height: 1.8;
  color: var(--n-600);
  text-wrap: pretty;
}
@media (max-width: 999px) {
  .cg-testimonials-v2__lede { font-size: 15px; }
}

/* --- customer count --- */
.cg-testimonials-v2__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
@media (max-width: 999px) {
  .cg-testimonials-v2__meta { margin-top: 24px; }
}

.cg-testimonials-v2__avatars { display: flex; align-items: center; }
.cg-testimonials-v2__avatars img {
  width: var(--cg-tv2-avatar, 40px);
  height: var(--cg-tv2-avatar, 40px);
  border-radius: 50%;
  border: 2px solid var(--cg-tv2-bg, var(--n-25));
  object-fit: cover;
}
.cg-testimonials-v2__avatars img + img,
.cg-testimonials-v2__avatars .cg-testimonials-v2__avatar-count {
  margin-left: var(--cg-tv2-avatar-overlap, -12px);
}
.cg-testimonials-v2__avatar-count {
  width: var(--cg-tv2-avatar, 40px);
  height: var(--cg-tv2-avatar, 40px);
  border-radius: 50%;
  background: var(--cg-tv2-count-bg, var(--accent-500));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cg-tv2-bg, var(--n-25));
}
.cg-testimonials-v2__meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- decorative column (desktop only, as in the reference) --- */
.cg-testimonials-v2__decor {
  position: relative;
  justify-self: end;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding-top: 6px;
}
/* The reference renders this only at >=1200px (a tShowDecor guard).
   Reproduced in CSS so the markup stays server-rendered. */
@media (max-width: 1199px) {
  .cg-testimonials-v2__decor { display: none; }
}

.cg-testimonials-v2__decor-dots {
  position: absolute;
  right: 120px; top: -14px;
  width: 130px; height: 120px;
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(to bottom left, #000, transparent);
  mask-image: linear-gradient(to bottom left, #000, transparent);
  pointer-events: none;
}
.cg-testimonials-v2__decor-quote {
  position: relative;
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  line-height: .72;
  color: var(--accent-100);
}
.cg-testimonials-v2__decor-counter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cg-testimonials-v2__decor-n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--accent-500); }
.cg-testimonials-v2__decor-rule { display: block; width: 1px; height: 54px; background: var(--border-strong); }
.cg-testimonials-v2__decor-total { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--text-muted); }

/* ---------------------------------------------------------
   SLIDER RAIL
   --cg-tv2-per-view is what the JS reads AND what sizes a slide,
   so the CSS and the transform maths can never disagree.
   --------------------------------------------------------- */

.cg-testimonials-v2__rail {
  position: relative;
  max-width: 1440px;
  margin: 72px auto 0;
  padding-left: 96px;
  padding-right: 96px;
  --cg-tv2-per-view: var(--cg-tv2-pv-desktop, 3);
  --cg-tv2-gap: var(--cg-tv2-gap-desktop, 14px);
}
@media (max-width: 1199px) {
  .cg-testimonials-v2__rail {
    padding-left: 20px;
    padding-right: 20px;
    --cg-tv2-per-view: var(--cg-tv2-pv-tl, 2);
    --cg-tv2-gap: var(--cg-tv2-gap-tl, 14px);
  }
}
@media (max-width: 1023px) {
  .cg-testimonials-v2__rail {
    --cg-tv2-per-view: var(--cg-tv2-pv-tp, 1);
    --cg-tv2-gap: var(--cg-tv2-gap-tp, 14px);
  }
}
@media (max-width: 999px) {
  .cg-testimonials-v2__rail {
    margin-top: 48px;
    --cg-tv2-gap: var(--cg-tv2-gap-mobile, 8px);
  }
}
@media (max-width: 767px) {
  .cg-testimonials-v2__rail {
    --cg-tv2-per-view: var(--cg-tv2-pv-mobile, 1);
  }
}

.cg-testimonials-v2__viewport { overflow: hidden; padding: 6px 0 10px; }

.cg-testimonials-v2__track {
  display: flex;
  align-items: stretch;
  /* transform + transition are written by the JS. */
}

.cg-testimonials-v2__slide {
  flex: 0 0 calc(100% / var(--cg-tv2-per-view, 3));
  max-width: calc(100% / var(--cg-tv2-per-view, 3));
  padding: 0 var(--cg-tv2-gap, 14px);
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.cg-testimonials-v2__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cg-tv2-card-bg, var(--n-0));
  border: var(--cg-tv2-card-border-w, 1px) solid var(--cg-tv2-card-border, var(--border-subtle));
  border-radius: var(--cg-tv2-card-radius, 12px);
  padding: var(--cg-tv2-card-pad, 34px 32px);
  min-height: var(--cg-tv2-card-min-h, 0);
  box-shadow: none;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
@media (max-width: 999px) {
  .cg-testimonials-v2__card { padding: var(--cg-tv2-card-pad, 28px 24px); }
}

.cg-testimonials-v2__card.is-featured {
  border-color: var(--cg-tv2-featured-border, var(--accent-300));
  background: var(--cg-tv2-featured-bg, var(--cg-tv2-card-bg, var(--n-0)));
  box-shadow: 0 14px 36px rgba(11, 12, 15, .07);
}

.cg-testimonials-v2__card-n {
  position: absolute;
  top: 24px; right: 26px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--cg-tv2-card-n-color, var(--accent-100));
}

/* The star badge only appears on the featured card, and only in the
   three-up layout — the reference's `is-star` guard. */
.cg-testimonials-v2__star {
  display: none;
  position: absolute;
  top: 22px; right: 22px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cg-tv2-star-bg, var(--accent-500));
  color: var(--cg-tv2-star-color, #fff);
  align-items: center;
  justify-content: center;
}
.cg-testimonials-v2__card.is-star .cg-testimonials-v2__star { display: flex; }
.cg-testimonials-v2__star svg { display: block; }

.cg-testimonials-v2__quote-mark {
  font-family: var(--font-display);
  font-size: var(--cg-tv2-mark-size, 46px);
  font-weight: 700;
  line-height: .5;
  color: var(--cg-tv2-mark-color, var(--accent-500));
}

.cg-testimonials-v2__quote {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--n-800);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
@media (max-width: 999px) {
  .cg-testimonials-v2__quote { font-size: 15px; }
}

/* `margin: auto 0 20px` is what pushes the client block to the bottom of
   a stretched card — that is the reference's equal-height mechanism. */
.cg-testimonials-v2__card-hr {
  display: block;
  height: 1px;
  background: var(--border-subtle);
  margin: auto 0 20px;
}

.cg-testimonials-v2__client { display: flex; align-items: center; gap: 14px; }
.cg-testimonials-v2__client img {
  width: var(--cg-tv2-client-avatar, 48px);
  height: var(--cg-tv2-client-avatar, 48px);
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
}
/* min-width:0 so a long unbroken name cannot widen the card. */
.cg-testimonials-v2__client-body { min-width: 0; }
.cg-testimonials-v2__client-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--n-950);
  overflow-wrap: anywhere;
}
.cg-testimonials-v2__client-role {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cg-testimonials-v2__client-logo {
  margin-top: 18px;
  height: 20px;
  width: auto;
  object-fit: contain;
  opacity: .6;
  filter: grayscale(1);
}

/* ---------------------------------------------------------
   ARROWS (desktop) / FLOW BUTTONS (below 1200)
   --------------------------------------------------------- */

.cg-testimonials-v2__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--cg-tv2-arrow, 52px);
  height: var(--cg-tv2-arrow, 52px);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cg-tv2-arrow-border, var(--border-subtle));
  background: var(--cg-tv2-arrow-bg, var(--n-0));
  color: var(--cg-tv2-arrow-color, var(--n-900));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, opacity 200ms ease;
}
@media (max-width: 1199px) {
  .cg-testimonials-v2__arrow { display: none; }
}
.cg-testimonials-v2__arrow:hover { border-color: var(--cg-tv2-arrow-hover, var(--n-900)); }
.cg-testimonials-v2__arrow:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.cg-testimonials-v2__arrow--prev { left: 0; }
.cg-testimonials-v2__arrow--next {
  right: 0;
  border-color: var(--cg-tv2-arrow-next-border, var(--accent-500));
  color: var(--cg-tv2-arrow-next-color, var(--accent-500));
}
.cg-testimonials-v2__arrow--next:hover { background: var(--accent-500); color: #fff; }
/* Only reachable when looping is off and the slider is at an end. */
.cg-testimonials-v2__arrow[disabled] {
  opacity: var(--cg-tv2-arrow-disabled, .35);
  cursor: default;
}
.cg-testimonials-v2__arrow[disabled]:hover {
  border-color: var(--cg-tv2-arrow-border, var(--border-subtle));
  background: var(--cg-tv2-arrow-bg, var(--n-0));
  color: var(--cg-tv2-arrow-color, var(--n-900));
}

.cg-testimonials-v2__dots-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  padding-left: 64px;
  padding-right: 64px;
}
@media (max-width: 1239px) {
  .cg-testimonials-v2__dots-row { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 999px) {
  .cg-testimonials-v2__dots-row {
    margin-top: 28px;
    padding-left: 20px;
    padding-right: 20px;
    /* gap: 18px; */
    gap: 2px;
    flex-wrap: wrap;
  }
}
.cg-testimonials-v2__dots-row:empty { display: none; }

.cg-testimonials-v2__counter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-right: 6px;
  white-space: nowrap;
}
/* The reference shows this counter only where the decor column is hidden. */
.cg-testimonials-v2__counter--dots { display: none; }
@media (max-width: 1199px) {
  .cg-testimonials-v2__counter--dots { display: inline; }
}
.cg-testimonials-v2__counter-accent { color: var(--accent-500); }

.cg-testimonials-v2__dots { display: flex; justify-content: center; gap: var(--cg-tv2-dot-gap, 10px); flex-wrap: wrap; }
.cg-testimonials-v2__dot {
  width: var(--cg-tv2-dot-w, 16px);
  height: var(--cg-tv2-dot-h, 3px);
  border: 0;
  padding: 0;
  background: var(--cg-tv2-dot-color, var(--border-strong));
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: width 300ms cubic-bezier(.16, 1, .3, 1), background 300ms ease;
}
.cg-testimonials-v2__dot.is-active {
  width: var(--cg-tv2-dot-w-active, 28px);
  background: var(--cg-tv2-dot-active, var(--accent-500));
}
.cg-testimonials-v2__dot:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 3px; }

.cg-testimonials-v2__flow-btn {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cg-tv2-arrow-border, var(--border-subtle));
  background: var(--cg-tv2-arrow-bg, var(--n-0));
  color: var(--cg-tv2-arrow-color, var(--n-900));
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 1199px) {
  .cg-testimonials-v2__flow-btn { display: flex; }
}
.cg-testimonials-v2__flow-btn--next {
  border-color: var(--cg-tv2-arrow-next-border, var(--accent-500));
  color: var(--cg-tv2-arrow-next-color, var(--accent-500));
}
.cg-testimonials-v2__flow-btn:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.cg-testimonials-v2__flow-btn[disabled] { opacity: var(--cg-tv2-arrow-disabled, .35); cursor: default; }

/* ---------------------------------------------------------
   TRUSTED BY INDUSTRY LEADERS — a CSS marquee, not a slider.
   The reference duplicates the logo set and animates the track
   from 0 to -50%, which is why the duplicate half exists.
   --------------------------------------------------------- */

.cg-testimonials-v2__strip {
  max-width: 1440px;
  margin: 88px auto 0;
}
@media (max-width: 999px) {
  .cg-testimonials-v2__strip { margin-top: 56px; }
}

.cg-testimonials-v2__strip-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  border-top: 1px solid var(--cg-tv2-strip-border, var(--border-subtle));
  padding-top: 36px;
}
@media (max-width: 999px) {
  .cg-testimonials-v2__strip-inner { gap: 20px; padding-top: 28px; }
}

.cg-testimonials-v2__strip-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--n-700);
}

.cg-testimonials-v2__marquee-mask {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cg-testimonials-v2__marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: cg-tv2-marquee var(--cg-tv2-marquee-dur, 48s) linear infinite;
  animation-play-state: var(--cg-tv2-marquee-state, running);
  animation-direction: var(--cg-tv2-marquee-dir, normal);
}
.cg-testimonials-v2__marquee-mask:hover .cg-testimonials-v2__marquee-track--pausable {
  animation-play-state: paused;
}

@keyframes cg-tv2-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.cg-testimonials-v2__marquee-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--cg-tv2-logo-gap, 40px);
  height: var(--cg-tv2-logo-h, 30px);
}
@media (max-width: 999px) {
  .cg-testimonials-v2__marquee-logo {
    padding: 0 var(--cg-tv2-logo-gap, 22px);
    height: var(--cg-tv2-logo-h, 26px);
  }
}

.cg-testimonials-v2__marquee-logo img {
  max-height: 100%;
  max-width: var(--cg-tv2-logo-max-w, 150px);
  width: auto;
  object-fit: contain;
  opacity: var(--cg-tv2-logo-opacity, .45);
  filter: grayscale(1);
  transition: opacity 200ms ease, filter 200ms ease;
}
@media (max-width: 999px) {
  .cg-testimonials-v2__marquee-logo img { max-width: var(--cg-tv2-logo-max-w, 120px); }
}

/* A linked logo is a real anchor, so it gets a hover/focus affordance the
   plain ones do not. */
a.cg-testimonials-v2__marquee-logo:hover img,
a.cg-testimonials-v2__marquee-logo:focus-visible img {
  opacity: var(--cg-tv2-logo-opacity-hover, 1);
  filter: grayscale(0);
}
a.cg-testimonials-v2__marquee-logo:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }

/* ---------------------------------------------------------
   MOTION PREFERENCES
   The reference stops the marquee outright and skips autoplay
   under reduced motion; the slider itself stays fully usable.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cg-testimonials-v2__marquee-track { animation: none; transform: none; }
  .cg-testimonials-v2__track { transition: none !important; }
  .cg-testimonials-v2__dot,
  .cg-testimonials-v2__card,
  .cg-testimonials-v2__arrow { transition-duration: 1ms; }
}