/* Customers (21517) — Elementor adapter. Grid classes on containers must
   beat the .e-con flex default regardless of load order. */
/* Elementor's frontend.min.css declares `.e-con.e-flex{display:flex}` at the
   same 0-2-0 specificity as `.e-con.velp-cf-quotes` and loads AFTER this file,
   so an equal-specificity grid rule loses on source order — the container stays
   flex and every grid property on the children (grid-column-start below) is
   silently inert. Adding .e-flex makes these 0-3-0 so they win regardless of
   load order. */
.e-con.e-flex.velp-cf-cards-4,
.e-con.e-flex.velp-cf-quotes,
.e-con.velp-cf-cards-4,
.e-con.velp-cf-quotes { display: grid; }

/* customers-faqs.css declares the 3 tracks on the bare class (0-1-0). Elementor
   ships the container as .e-flex and sets its own flex/grid props at higher
   specificity, which can leave the element display:grid with no explicit
   template — a single implicit column, so the trailing-pair placement below has
   no column 3 to flow into. Restate the tracks at .e-con specificity. */
.e-con.e-flex.velp-cf-quotes,
.e-con.velp-cf-quotes {
	grid-template-columns: repeat(3, 1fr);
	column-gap: 26px;
	row-gap: 46px;
}

/* Flex items don't margin-collapse: the section h2's 14px bottom margin no
   longer collapses into the quote grid's 44px top margin (44 total in the
   PHP layout) — compensate so the gap stays 14 + 30 = 44. */
.e-con.velp-cf-quotes { margin-top: 30px; }

/* Classed paragraphs are :last-child of their widget, so global.css
   p:last-child{margin-bottom:0} eats their class margin — restore it on
   the wrapper (which carries the copied class). Must be 0-3-0: Elementor's
   .e-con .elementor-widget.elementor-widget{margin-block-end:0} outranks
   a plain .elementor-widget.CLASS restore. */
.e-con .elementor-widget.velp-cf-hero-sub { margin-bottom: 46px; line-height: 1.65; }
/* line-height: in the PHP page the label got 1.6 from the global
   p{line-height:var(--line-height-default)} element rule; the keydesign
   wrapper rule would force 1.75 (the class pins no line-height) */
.e-con .elementor-widget.velp-cf-strip-label { margin-bottom: 22px; line-height: 1.6; }

/* keydesign forces text-editor <p> color:inherit and paints the wrapper
   var(--color-text) — restore the light-on-navy color (size/line-height
   come from the shared vel-cta-card :has(p) rule; the p keeps its own
   margin because .vel-cta-card p outranks p:last-child by load order). */
.e-con.vel-cta-card .elementor-widget-text-editor:has(p) {
	color: rgba(255, 255, 255, 0.72);
}

/* keydesign also sets line-height:var(--line-height-paragraph) on every
   text-editor wrapper; in the PHP page these elements (stat spans, quote
   figcaptions, eyebrows, card h3s) inherited the body value instead —
   restore normal inheritance for widgets whose metrics aren't already
   pinned by a classed-p or :has(p) rule. */
.vel-main .elementor-widget-text-editor:not(:has(p)) { line-height: inherit; }

/* ---- Trust strip: real wordmarks (interim 1x crops from the design frame) ---- */
.velp-cf-logo-strip img { height: 40px; width: auto; display: block; }

/* ---- Quote wall rhythm (design: equal-height rows of three) ----
   customers-faqs.css sets align-items:start, which lets every card size to its
   own copy and rags the rows. Stretch the row instead and let the figure fill
   the widget wrapper (the figure is a direct child of .elementor-widget). */
#testimonials .e-con.velp-cf-quotes { align-items: stretch; }
#testimonials .velp-cf-quotes > .elementor-widget { display: flex; }
.velp-cf-quotes .vel-quote-card { flex: 1 1 auto; }

.remaining-quotes{display: flex !important; justify-content: center;}

/* Design centers the short final row (a trailing row of two under the 3-up
   grid). Done by placing that row's first card in column 2 so the last card
   flows into column 3 — NOT with transform: an Elementor entrance animation
   (fadeInUp) animates `transform` on this same widget and ends on
   `transform: none`, so the animation beat the offset while running and
   handed it back on the final frame — the card rose on the left, then
   snapped to center. Grid placement is untouched by the animation, so the
   pair is centered for the whole rise.

   Counts from the END only (:nth-last-child), never :nth-child: leading
   siblings in the container (Elementor shape/background divs, or a widget
   that isn't .elementor-widget) offset a forward count and silently break
   the match. Position 2 from the end is the first card of a trailing pair.

   Not scoped to #testimonials either — the section ID doesn't survive an
   Elementor rebuild, and every other rule in this file works without it.

   The :first-child term is what makes this count-independent. It matches
   only when the FIRST card also sits at a 3n+2 position from the end, i.e.
   total ≡ 2 (mod 3) — exactly when the last row holds two. Guarding with
   :not(:nth-last-child(3n+2)) on the target card instead does NOT work:
   position 2 trivially satisfies 3n+2 (n=0), so that test is true for every
   total and the pair would center even on a full final row. */
.e-con.velp-cf-quotes > .elementor-widget:first-child:nth-last-child(3n+2) ~ .elementor-widget:nth-last-child(2) {
	grid-column-start: 2;
}

/* customers-faqs.css collapses the grid to a single column at 900px, where
   starting at column 2 would leave an empty first row. */
@media (max-width: 900px) {
	.velp-cf-quotes > .elementor-widget:nth-last-child(2) {
		grid-column-start: auto;
	}
   .e-con.e-flex.velp-cf-quotes,
   .e-con.velp-cf-quotes {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* ---- Case studies: same card grid, link pinned to the card foot ---- */
.e-con.velp-cf-cases { display: grid; align-items: stretch; }
.velp-cf-cases > .elementor-widget { display: flex; }
.velp-cf-cases .velp-cf-quote-link { margin-top: auto; }


@media (max-width: 600px) {
.e-con.e-flex.velp-cf-quotes,
   .e-con.velp-cf-quotes {
      grid-template-columns: repeat(1, 1fr);
   }
}