/**
 * Case Study listing + detail styling. Uses the theme's theme.json tokens
 * (CSS custom properties) so colors/typography stay consistent with the site.
 */

:root {
	--vcs-max: 1444px;
	--vcs-pad: clamp(1rem, 5vw, 6rem);
	/* How far THE CLIENT card hangs below the detail hero photo. The card is
	   absolutely positioned, so this is fixed regardless of how long its copy
	   runs — which is why whatever follows the hero clears it with a fixed
	   value rather than a fluid one. Anything that changes the card's
	   `bottom` offset has to change this too. */
	--vcs-hero-overhang: 191px;
}

/* ============================================================ LISTING HERO */
/* Frame 14326:8963 is 640px tall on a near-black bed with an orange glow rising
   out of the bottom centre; ours was a flat ink-deep navy 375px tall.
   Gradient derived from the frame rather than eyeballed: sampling the centre
   column gives (3,3,3) at the top, still neutral at 40%, then (34,13,4) at 70%,
   (72,31,12) at 90% and (90,31,4) at the bottom edge. Solving those against
   #ff6300 over black puts the glow at ~0.35 alpha where it meets the bottom and
   fading out by ~45% height. Horizontally it peaks dead centre and is down to
   (12,4,1) at both edges. */
.cs-listing-hero {
	background-color: #050505;
	background-image: radial-gradient(78% 58% at 50% 100%, rgba(255, 99, 0, 0.38) 0%, rgba(255, 99, 0, 0.1) 45%, transparent 74%);
	color: #fff;
	text-align: center;
	min-height: 640px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 7vw, 6rem) var(--vcs-pad);
}
.cs-listing-hero .cs-breadcrumb {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 2rem;
}
.cs-listing-hero .cs-breadcrumb a { color: rgba(255, 255, 255, 0.6); text-decoration: underline; text-underline-offset: 3px; }
.cs-listing-hero .cs-breadcrumb a:hover { color: #fff; }
.cs-listing-hero .cs-breadcrumb .sep { color: var(--wp--preset--color--brand, #ff6300); margin: 0 0.4rem; }
.cs-listing-hero h1 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(2rem, 4.4vw, 3.5625rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 auto 2rem;
	max-width: 20ch;
}
.cs-listing-hero p.cs-sub {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1rem, 1.3vw, 1.375rem);
	color: rgba(255, 255, 255, 0.72);
	/* The frame sets this sentence on ONE line, 933px wide. Our body face runs
	   wider at the same size -- 1004px at 20px -- so width and height cannot both
	   match. Keeping 22px, which is what the frame's ink height measures, and
	   widening the cap enough to hold the single line. */
	max-width: 1160px;
	margin: 0 auto;
}

/* ============================================================ GRID WRAP */
.vcs-grid-wrap {
	background: #f7f7f8;
	/* WordPress's block gap put 24px of the hero's dark section between the hero
	   and this block; the filter band has to butt straight against it. */
	margin-top: 0;
	/* No top padding: the filter below is a full-bleed WHITE band that has to
	   butt straight against the hero, per frame 14326:8975 where the tab row
	   sits at y=640, the hero's exact bottom edge. */
	padding: 0 var(--vcs-pad) clamp(3rem, 6vw, 5rem);
}
.vcs-grid-wrap > * { max-width: var(--vcs-max); margin-inline: auto; }

/* ---- Filter bar ---- */
/* The frame puts this row on plain white directly under the hero, not in a
   rounded bordered card sitting on the grey grid bed -- that box is what read as
   the section being "separated". Escapes the wrap's constrained column so the
   white runs edge to edge, then re-applies the inset as padding. 32px of breathing
   room above and below, matching the frame's 120px band around a 56px row. */
.vcs-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 32px max(var(--vcs-pad), calc(50vw - (var(--vcs-max) / 2)));
	background: #fff;
	border: 0;
	border-radius: 0;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.vcs-filter__tabs { display: flex; flex-wrap: wrap; gap: 16px; }
/* Pill geometry read off the frame: the active chip is 158x56 and the next
   starts at x=174, so 16px apart; text sits 24px in; the border samples #ececec. */
.vcs-tab {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #17181c);
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	height: 56px;
	/* 22px, not the frame's 24px. The frame lays out 7 categories; the taxonomy
	   has 9 (an "All" reset plus SaaS), which overran the row by 6px and bumped
	   the results/sort meta onto a second line. 2px a side buys it back. */
	padding: 0 22px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vcs-tab:hover { border-color: #d8d8dc; }
/* Active chip carries an 8px white dot before the label (frame: ellipse at x=24,
   label at x=44, so a 12px gap). */
.vcs-tab.is-active {
	background: var(--wp--preset--color--brand, #ff6300);
	border-color: var(--wp--preset--color--brand, #ff6300);
	color: #fff;
	gap: 12px;
}
.vcs-tab.is-active::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
}
.vcs-filter__meta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-right: 0.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	color: var(--wp--preset--color--mute, #5a5a63);
}
.vcs-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 56px;
	padding: 0 20px;
	border: 1px solid #ececec;
	border-radius: 10px;
	background: #fff;
}
.vcs-sort select {
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink, #17181c);
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

/* ---- Card grid ---- */
.vcs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* [hidden] is how the filter JS takes cards out (card.hidden = !show), but the
   attribute only works through the UA's low-priority [hidden]{display:none},
   which ANY author display rule outranks -- including the display:flex right
   below. Without this the filter set the attribute on the right cards and the
   count updated, while every card stayed on screen. */
.vcs-card[hidden] { display: none; }
.vcs-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececee;
	border-radius: 18px;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
.vcs-card__logo { margin-bottom: 1.5rem; }
.vcs-card__logo img {
	/* Frame 14326:9005 measures its wordmarks 40-56px tall and up to 292px wide
	   (KISSA 153x54, CleverTap 156x56, SAMPLRR 292x40); the 42/190 cap here was
	   shrinking all of them. */
	max-height: 56px;
	width: auto;
	max-width: 292px;
	object-fit: contain;
}
.vcs-card__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.85rem;
}
.vcs-card__title a { color: var(--wp--preset--color--ink, #17181c); text-decoration: none; }
.vcs-card__title a:hover { color: var(--wp--preset--color--brand, #ff6300); }
.vcs-card__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--wp--preset--color--mute, #5a5a63);
	margin: 0 0 1.5rem;
	/* The frame truncates the blurb to three lines with an ellipsis so every card
	   keeps its stats and image on the same baseline; ours ran to full length and
	   pushed those down by card. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.vcs-card__stats {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
}
.vcs-stat { min-width: 80px; max-width: 240px; }
.vcs-stat__val {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	/* Client asked for this smaller. Deliberately below the frame, which
	   measures ~26px: that size assumes the short metrics it shows ("3.5+",
	   "95%", "$20K / mo"), whereas several studies store a whole phrase as the
	   value (Ubora: "New Website Launched"), and at 28px bold those wrapped to
	   two lines and dominated the card. 22px still reads as the card's loudest
	   element without swamping the title above it. */
	font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--ink, #17181c);
}
.vcs-stat__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	color: var(--wp--preset--color--mute, #5a5a63);
	margin-top: 0.2rem;
}
.vcs-card__media { display: block; margin-top: auto; border-radius: 12px; overflow: hidden; }
.vcs-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.vcs-empty { text-align: center; color: var(--wp--preset--color--mute, #5a5a63); padding: 3rem 0; }

/* ============================================================ DETAIL HERO */
.vcs-hero { background: var(--wp--preset--color--ink-deep, #0e0f13); color: #fff; }
.vcs-hero__inner {
	max-width: var(--vcs-max);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--vcs-pad) clamp(2.5rem, 5vw, 4rem);
}
.vcs-hero__logo { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.vcs-hero__logo img { max-height: 40px; width: auto; }
.vcs-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
}
.vcs-hero__title {
	font-family: var(--wp--preset--font-family--sans);
	/* ~42px at 1440, read off frame 14326:8445: its two title lines have a 55px
	   pitch and the descender-bearing line measures 38.4px of ink, both of which
	   put the face at about 42px. Ours was 52px and ran the Ubora title to four
	   lines where the frame holds two. */
	font-size: clamp(1.75rem, 3vw, 2.625rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 20ch;
}
/* THE CLIENT card, overlaid on the hero photo per the frame. Geometry is exact:
   the card is 646x352 at x=120 while the image ends at y=1139, so 161px of it
   sits over the photo and 191px hangs below into the section that follows.
   Expressed as a share of the card height (352) so it holds at any width:
   bottom:-54.3% == -191px. Content is real -- heading from cs_result (30/30),
   body from the excerpt -- so no new fields were needed. */
.vcs-hero__media { position: relative; }
.vcs-hero__client {
	position: absolute;
	/* Align the card's left edge with the hero title above it. The title sits in
	   the constrained column while this card is positioned against the full-bleed
	   media, so a plain --vcs-pad only lined them up by coincidence at 1440: at
	   1920 the title starts at 238px and the card sat at 96px, 142px adrift.
	   Tracking the column's own edge keeps them together at any width. */
	left: max(var(--vcs-pad), calc((100% - var(--vcs-max)) / 2));
	bottom: calc(var(--vcs-hero-overhang) * -1);
	width: min(646px, calc(100% - var(--vcs-pad) * 2));
	box-sizing: border-box;
	background: #fff;
	padding: clamp(1.75rem, 3vw, 2.5rem);
}
.vcs-hero__client-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink, #17181c);
	margin: 0 0 1rem;
}
.vcs-hero__client-head {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink, #17181c);
	margin: 0 0 1rem;
}
.vcs-hero__client-body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--mute, #5a5a63);
	margin: 0;
}
/* The card overhangs the hero, so the next section has to clear it. */
.vcs-hero + * { margin-top: var(--vcs-hero-overhang); }
@media (max-width: 780px) {
	.vcs-hero__client { position: static; width: auto; }
	.vcs-hero + * { margin-top: 0; }
}

/* ====================================================== DETAIL META STRIP */
/* Frame 14326:8463: four label/value columns in a 1050px column centred in the
   1440px frame, sitting under THE CLIENT card. Vertical placement is measured
   off the frame rather than guessed: the hero photo ends at y=1139, the card
   bottom lands at 1330 (the 191px overhang above) and this strip's first line
   of text starts at 1359 — so 220px of clearance, of which 191px is the card
   and 29px is the real gap. It is padding, not margin, so it replaces the
   `.vcs-hero + *` clearance instead of stacking on top of it. */
.vcs-meta { background: var(--wp--preset--color--canvas, #fff); }
.vcs-hero + .vcs-meta {
	margin-top: 0;
	padding-top: calc(var(--vcs-hero-overhang) + 29px);
}
.vcs-meta__list {
	display: grid;
	/* The frame's four columns are 262.5px each and butt straight up against
	   one another; the gap is ours, so a long "Industry" value cannot run into
	   the next column's text when the viewport tightens. */
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 1.5rem;
	width: min(1050px, 100% - var(--vcs-pad) * 2);
	/* margin-block:0 matters — the UA's 1em list margin otherwise pushes the
	   strip 16px past the clearance measured off the frame. */
	margin: 0 auto;
	padding: 0 0 96px;
	list-style: none;
}
.vcs-meta__item { display: flex; flex-direction: column; gap: 1rem; }
.vcs-meta__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--mute, #596168);
}
.vcs-meta__value {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #142029);
	margin: 0;
}
.vcs-meta__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--brand, #ff6300);
	text-decoration: none;
}
.vcs-meta__cta:hover,
.vcs-meta__cta:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* The exported arrow uses preserveAspectRatio="none", so the box has to carry
   the glyph's own ratio or it stretches. */
.vcs-meta__arrow {
	flex: none;
	width: 15px;
	height: auto;
	aspect-ratio: 14.73 / 13.2;
	transition: transform 0.2s ease;
}
.vcs-meta__cta:hover .vcs-meta__arrow { transform: translateX(4px); }
@media (max-width: 1024px) {
	.vcs-meta__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
	/* Card is static below this width, so there is no overhang left to clear. */
	.vcs-hero + .vcs-meta { padding-top: clamp(2.5rem, 7vw, 4rem); }
	.vcs-meta__list { padding-bottom: clamp(2.5rem, 7vw, 4rem); }
}
@media (max-width: 560px) {
	.vcs-meta__list { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.vcs-meta__arrow { transition: none; }
	.vcs-meta__cta:hover .vcs-meta__arrow { transform: none; }
}

/* ===================================================== DETAIL RESULTS BAND */
/* Frame 14326:8491: a full-bleed photo dissolving into black, with the heading
   block left and a 2x2 stat grid right, both sitting in the black lower half.
   The frame's bed is pure black rather than ink-deep — the scrim resolves to
   rgb(0,0,0) and any navy in it would show as a seam against the photo. */
.vcs-results {
	position: relative;
	background: #000;
	color: #fff;
	overflow: hidden;
	/* Where the copy starts: y=539 of the frame's 939. Held in a property
	   because the scrim below has to resolve to solid black just above this
	   line — at 1440 that reproduces the frame, and at 390 it is what keeps the
	   heading off the photo instead of on a face. Floored at 15rem so a phone
	   still gets a readable strip of image rather than a sliver. */
	--vcs-results-top: clamp(15rem, 37vw, 33.7rem);
	padding: var(--vcs-results-top) var(--vcs-pad) clamp(3rem, 6.4vw, 5.75rem);
}
/* Sized to the photo region, not the whole band. Covering the full height means
   a wide landscape shot gets scaled until only a thin top slice is visible above
   the scrim — at 390 that slice was ceiling and a blown-out window, with the
   subjects buried under the black. Bounding the image to roughly the exposed
   area lets object-fit crop toward the middle of the frame, where the subject
   actually is. Everything below is the section's own black. */
.vcs-results__bg {
	position: absolute;
	inset: 0 0 auto;
	width: 100%;
	height: calc(var(--vcs-results-top) + 6rem);
	object-fit: cover;
	object-position: center;
}
/* The frame's scrim, node 14326:8492: clear at the top, solid black by the time
   it reaches the copy. The frame's stops (black from 46% up, clear by 92%) are
   percentages of a fixed 939px band, which breaks the moment the band is a
   different height — at 390 that put the heading on the photo. Anchoring the
   black to --vcs-results-top instead reproduces the frame at 1440 (black lands
   at 453px against the frame's 458) and holds at every other width. The 5rem
   lead-in is the frame's own gap between "fully black" and "copy starts". */
.vcs-results::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(23, 23, 23, 0) 0,
		rgba(0, 0, 0, 0.28) calc(var(--vcs-results-top) * 0.5),
		rgb(0, 0, 0) calc(var(--vcs-results-top) - 5rem)
	);
}
.vcs-results__inner {
	position: relative;
	/* Above the scrim. */
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(2.5rem, 5vw, 4rem);
	width: min(1143px, 100%);
	margin-inline: auto;
}
.vcs-results__copy { max-width: 519px; }
.vcs-results__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 1rem;
}
.vcs-results__head {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	line-height: 1.375;
	letter-spacing: -0.015em;
	margin: 0 0 1.5rem;
}
/* The frame's #bababc on black is white at ~73%; as an alpha it stays correct
   if the bed is ever darkened or lightened. Matches .vcs-hero__tags' approach. */
.vcs-results__body,
.vcs-rstat__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.73);
	margin: 0;
}
.vcs-results__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 1.3125rem;
	width: min(416px, 100%);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vcs-rstat { display: flex; flex-direction: column; gap: 1rem; }
/* Grid items stretch to the row's height, so pushing the label down keeps the
   labels on one line across a row even when a neighbouring figure wraps to two
   — "Under ₹800" next to "48,000+" otherwise drags its label out of alignment. */
.vcs-rstat__label { margin-top: auto; }
.vcs-rstat__val {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.0375em;
}
/* Only a trailing "+" takes the gradient — the frame shows "Top" plain, so this
   is the rule rather than a per-stat exception. background-clip:text needs a
   transparent fill, so the brand colour is set first as the fallback for
   engines that ignore it. */
.vcs-rstat__plus {
	color: var(--wp--preset--color--brand, #ff6300);
	background-image: linear-gradient(102deg, #ff4400 3%, #ff9d00 97%);
	-webkit-background-clip: text;
	background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.vcs-rstat__plus { color: transparent; }
}
@media (max-width: 900px) {
	.vcs-results__inner { flex-direction: column; }
	.vcs-results__copy { max-width: none; }
	.vcs-results__stats { width: 100%; }
}
@media (max-width: 480px) {
	.vcs-results__stats { grid-template-columns: 1fr; gap: 2rem; }
}
.vcs-hero__tags {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	white-space: nowrap;
}
.vcs-hero__media img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; }

/* ============================================================ SINGLE BODY */
/* Body flows full-width so the align:full dark bands (Solution / Results) can
   break edge-to-edge; regular sections are capped via the content-size var. */
.single-case_study .wp-block-post-content {
	--wp--style--global--content-size: 860px;
	padding-block: clamp(2rem, 4vw, 3.25rem);
}
.vcs-sec { padding-inline: var(--vcs-pad); }
.vcs-sec + .vcs-sec { padding-top: clamp(1rem, 2vw, 1.75rem); }

/* Section eyebrow (small label) + heading */
.vcs-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand, #ff6300);
	margin: 0 0 0.6rem;
}
.single-case_study .wp-block-post-content h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 1rem;
}
.vcs-lead { font-size: 1.05rem; font-weight: 500; margin: 0 0 1rem; }

/* ✓ solution bullets — brand check markers */
.vcs-checks { list-style: none; padding-left: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.85rem; }
.vcs-checks li { position: relative; padding-left: 1.9rem; line-height: 1.6; }
.vcs-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand, #ff6300);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1L11.9 3.5 13 4.6z'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1L11.9 3.5 13 4.6z'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* Technology stack chips */
.vcs-tech { list-style: none; padding-left: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vcs-tech li {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	padding: 0.4rem 0.85rem;
	border-radius: 8px;
	background: rgba(28, 28, 33, 0.06);
}

/* Dark full-bleed bands: Strategic Solution + Results */
.vcs-sol,
.vcs-results-band {
	--wp--style--global--content-size: 1120px;
	padding-block: clamp(3rem, 6vw, 5rem);
	padding-inline: clamp(1rem, 5vw, 3rem);
	margin-block: clamp(2rem, 4vw, 3.5rem);
}
.vcs-sol .vcs-tech li,
.vcs-results-band .vcs-tech li { background: rgba(255, 255, 255, 0.09); }

/* Results stat grid */
.vcs-results-band .vcs-results {
	list-style: none;
	padding-left: 0;
	margin: 1.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
}
.vcs-results-band .vcs-results li {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	border-top: 2px solid var(--wp--preset--color--brand, #ff6300);
	padding-top: 0.85rem;
}

/* ============================================================ RELATED */
.vcs-related {
	background: #fff8f3;
	padding: clamp(3rem, 6vw, 5rem) var(--vcs-pad);
}
.vcs-related > * { max-width: var(--vcs-max); margin-inline: auto; }
.vcs-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.vcs-related__pill {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #17181c);
	border: 1px solid #e2ddd6;
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	margin-bottom: 0.85rem;
}
.vcs-related__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
}
.vcs-related__viewall {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--brand, #ff6300);
	border-radius: 8px;
	padding: 0.7rem 1.4rem;
	text-decoration: none;
	white-space: nowrap;
}
.vcs-related__viewall:hover { background: #e35800; }

/* ============================================================ RESPONSIVE */
@media (max-width: 860px) {
	.vcs-grid { grid-template-columns: 1fr; }
	.vcs-hero__row { flex-direction: column; align-items: flex-start; }
	.vcs-hero__tags { white-space: normal; }
	.vcs-card__stats { gap: 0.75rem; }
}
@media (max-width: 520px) {
	.vcs-filter { flex-direction: column; align-items: stretch; }
	.vcs-filter__meta { justify-content: space-between; }
}