/* ==========================================================================
   VSL UK Technology Appointment Setting landing page (page-vsl-uk-tech.php)
   Builds on vsl-clutch-page.css + vsl-ai-leadgen-page.css; everything here
   is scoped to .vsl-uk-tech and uses the vut- prefix.

   Contrast: brand orange #fe8e06 on white is 2.3:1 (fails WCAG AA), so on
   this page orange is used for fills, icons and text on dark grounds only.
   Orange text on white uses --vut-orange-text (#a85400, 5.3:1) and orange
   buttons carry navy text (4.9:1).
   ========================================================================== */
.vsl-uk-tech {
	--vut-ink: #353c3e;           /* brand charcoal (--vc-navy) */
	--vut-ink-2: #22282a;
	--vut-orange-text: #a85400;
	--vut-tint: #f6f8fb;
}

/* A third-party stylesheet (main.chunk.css) sets `body span { font-size:
   x-small }` below 400px, which shrinks every unsized span (e.g. the H1's
   second line). Class-level rules below still win over this reset. */
.vsl-uk-tech span { font-size: inherit; }

/* The theme adds a marker via li::before on content lists. */
.vsl-uk-tech ul li::before,
.vsl-uk-tech ol li::before { content: none; display: none; }
.vsl-uk-tech ul,
.vsl-uk-tech ol { list-style: none; margin: 0; padding: 0; }

/* ---------- shared bits ---------- */
.vsl-uk-tech .vut-section { padding: 72px 0; background: #fff; }
.vsl-uk-tech .vut-section--tint { background: var(--vut-tint); }

.vsl-uk-tech .vut-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.vsl-uk-tech .vut-head__sub { margin: 12px 0 0; font-size: 16px; color: var(--vc-muted); line-height: 1.6; }


.vsl-uk-tech .vut-h2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.018em;
	color: var(--vc-navy);
	margin: 0;
	text-transform: none;
}
.vsl-uk-tech .vut-h2--light { color: #fff; }
/* balanced line breaks: no stranded single words under headings */
.vsl-uk-tech .vut-h2,
.vsl-uk-tech .vut-trust__title,
.vsl-uk-tech .vc-final__title,
.vsl-uk-tech .vc-faq__title { text-wrap: balance; }
.vsl-uk-tech .vut-prose p,
.vsl-uk-tech .vut-head__sub,
.vsl-uk-tech .vc-final__sub { text-wrap: pretty; }
.vsl-uk-tech .vut-h3 {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vc-navy);
	margin: 0 0 10px;
	text-transform: none;
	letter-spacing: 0;
}

/* Primary button: orange fill, navy text (accessible) */
.vsl-uk-tech .vut-btn {
	background: var(--vc-orange);
	border-color: var(--vc-orange);
	color: var(--vc-navy);
	padding: 16px 26px;
	font-size: 14px;
	letter-spacing: 0.04em;
	box-shadow: 0 10px 24px rgba(254, 142, 6, 0.28);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.vsl-uk-tech .vut-btn:hover,
.vsl-uk-tech .vut-btn:focus-visible {
	background: #ffa22e;
	color: var(--vc-navy);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(254, 142, 6, 0.36);
}
.vsl-uk-tech .vut-btn i { transition: transform 0.2s ease; }
.vsl-uk-tech .vut-btn:hover i { transform: translateX(3px); }

.vsl-uk-tech .vut-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 15px;
	color: var(--vc-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--vc-orange);
	padding-bottom: 2px;
}
.vsl-uk-tech .vut-link:hover { color: var(--vut-orange-text); }
.vsl-uk-tech .vut-link--light { color: #fff; }
.vsl-uk-tech .vut-link--light:hover { color: var(--vc-orange); }

.vsl-uk-tech a:focus-visible,
.vsl-uk-tech summary:focus-visible {
	outline: 3px solid var(--vc-orange);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.vsl-uk-tech .vut-hero {
	position: relative;
	background:
		radial-gradient(circle at 78% 18%, rgba(254, 142, 6, 0.16), transparent 42%),
		radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px) 0 0 / 22px 22px,
		linear-gradient(150deg, #3b4346 0%, var(--vut-ink) 45%, var(--vut-ink-2) 100%);
	color: #fff;
	padding: 44px 0 56px;
	overflow: hidden;
}
/* orange rule along the bottom edge, as on the brand's other bands */
.vsl-uk-tech .vut-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--vc-orange), #ffb347);
}
/* copy + trust line (left) beside the visual (fixed-width right column) */
.vsl-uk-tech .vut-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: 56px;
	align-items: start;              /* keeps the CTA high; visual top aligns with the subhead */
}
/* Two-line headline (client request): "Experienced UK Callers" /
   "Properly Qualified Opportunities", orange accents as in the graphic.
   It spans the full container above the split, so both lines stay whole
   at a large size (line 2 is ~16.25em wide). Live text, the real H1. */
.vsl-uk-tech .vut-hero__title {
	font-family: 'Open Sans', sans-serif;
	font-size: clamp(40px, 4.4vw, 58px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-transform: none;
	color: #fff;
	margin: 0 0 30px;
}
.vsl-uk-tech .vut-hero__line { display: block; }
.vsl-uk-tech .vut-hero__accent { color: var(--vc-orange); }
.vsl-uk-tech .vut-hero__sub {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
	margin: 0 0 12px;
}
.vsl-uk-tech .vut-hero__intro {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.84);
	margin: 0 0 24px;
	max-width: 560px;
}
.vsl-uk-tech .vut-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
}
/* trust line (brief): 2x2 under the CTAs, above the fold */
.vsl-uk-tech .vut-hero__proof {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	max-width: 560px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.vsl-uk-tech .vut-hero__proof li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}
.vsl-uk-tech .vut-hero__proof i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(254, 142, 6, 0.14);
	color: var(--vc-orange);
	font-size: 14px;
}
.vsl-uk-tech .vut-hero__proof strong { color: #fff; font-weight: 700; }
.vsl-uk-tech .vut-hero__proof a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(254, 142, 6, 0.6);
}
.vsl-uk-tech .vut-hero__proof a:hover { border-bottom-color: var(--vc-orange); }

/* ---------- hero visual: map + photo + report card + chip ----------
   Everything is positioned in % of .vut-visual so the composition scales
   as one piece. Rule: nothing overlaps the caller's face or head. The
   map sits beside the photo (left), the chip on the jacket edge below
   it, and the report card over the laptop, bottom right. The photo file
   has the original graphic's leftover map and labels blurred out. */
.vsl-uk-tech .vut-visual {
	position: relative;
	max-width: 440px;
	margin-left: auto;
	aspect-ratio: 5 / 6;
}
.vsl-uk-tech .vut-visual__map {
	position: absolute;
	left: -2%;
	top: 5%;
	width: 40%;
	height: auto;
	z-index: 0;
	pointer-events: none;
}
.vsl-uk-tech .vut-visual__photo {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 66%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.vsl-uk-tech .vut-visual__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	filter: saturate(0.72) contrast(1.04);   /* tone the navy toward the charcoal brand */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
	mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
/* charcoal wash at the foot so the desk blends into the band */
.vsl-uk-tech .vut-visual__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 62%, rgba(34, 40, 42, 0.75) 100%);
	pointer-events: none;
}

.vsl-uk-tech .vut-dash {
	position: absolute;
	bottom: 3%;                /* over the laptop, clear of face and hands */
	right: -10%;
	z-index: 3;
	width: 40%;
	padding: 12px 14px 13px;
	background: rgba(34, 40, 42, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
}
.vsl-uk-tech .vut-dash__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	gap: 8px;
}
.vsl-uk-tech .vut-dash__live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--vc-orange);
	letter-spacing: 0.08em;
}
.vsl-uk-tech .vut-dash__live::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vc-orange);
	box-shadow: 0 0 0 3px rgba(254, 142, 6, 0.25);
}
.vsl-uk-tech .vut-dash__chart {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 42px;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.vsl-uk-tech .vut-dash__chart i {
	flex: 1;
	border-radius: 2px 2px 0 0;
	background: rgba(255, 255, 255, 0.22);
}
.vsl-uk-tech .vut-dash__chart i:last-child { background: var(--vc-orange); }
.vsl-uk-tech .vut-dash__rows li {
	display: grid;
	grid-template-columns: 58px 1fr;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
}
.vsl-uk-tech .vut-dash__rows li:last-child { margin-bottom: 0; }
.vsl-uk-tech .vut-dash__rows b {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}
.vsl-uk-tech .vut-dash__rows b i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--vc-orange), #ffb347);
	transform-origin: left;
	animation: vutGrow 1.1s 0.3s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes vutGrow { from { transform: scaleX(0); } }

.vsl-uk-tech .vut-chip {
	position: absolute;
	left: 0;
	top: 60%;                  /* under the map, on the jacket edge */
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 10px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
	color: var(--vc-navy);
}
.vsl-uk-tech .vut-chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vc-orange);
	color: var(--vc-navy);
	font-size: 14px;
}
.vsl-uk-tech .vut-chip strong { display: block; font-size: 13px; line-height: 1.25; }
.vsl-uk-tech .vut-chip small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--vc-muted); }

/* ==========================================================================
   2. CLUTCH TRUST STRIP
   ========================================================================== */
.vsl-uk-tech .vut-trust { background: var(--vut-tint); padding: 56px 0 48px; }
.vsl-uk-tech .vut-trust__title {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--vc-navy);
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px;
	text-transform: none;
}
.vsl-uk-tech .vut-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.vsl-uk-tech .vut-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--vc-line);
	border-top: 4px solid var(--vc-orange);
	border-radius: 14px;
	padding: 24px 26px 20px;
	box-shadow: 0 10px 26px rgba(16, 40, 73, 0.06);
	overflow: hidden;
}
/* oversized quote glyph, top right: fills the short cards' space with
   intent instead of leaving an empty middle */
.vsl-uk-tech .vut-quote::before {
	content: '\201C';
	display: block;                   /* the li::before reset above hides it otherwise */
	position: absolute;
	top: -18px;
	right: 14px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 120px;
	line-height: 1;
	color: var(--vc-orange);
	opacity: 0.14;
	pointer-events: none;
}
.vsl-uk-tech .vut-quote__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vut-orange-text);
}
.vsl-uk-tech .vut-quote__text {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-family: 'Open Sans', sans-serif;   /* theme blockquotes are serif */
	font-size: 20px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--vc-navy);
	background: none;
	quotes: none;
}
.vsl-uk-tech .vut-quote__text::before,
.vsl-uk-tech .vut-quote__text::after { content: none; }
.vsl-uk-tech .vut-quote__result {
	margin: 0 0 14px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--vc-navy);
	background: var(--vc-orange-soft);
	border-radius: 8px;
}
/* attribution sits in a footer pinned to the card bottom, above a rule */
.vsl-uk-tech .vut-quote__cite {
	margin: auto 0 10px;
	padding-top: 16px;
	border-top: 1px solid var(--vc-line);
	font-size: 14px;
	line-height: 1.45;
	color: var(--vc-muted);
}
.vsl-uk-tech .vut-quote__cite strong { color: var(--vc-navy); }
/* "Verified review" pill + Clutch wordmark, bottom of each quote card */
.vsl-uk-tech .vut-quote__src {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	text-decoration: none;
}
.vsl-uk-tech .vut-quote__verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 4px;
	border-radius: 999px;
	background: rgba(0, 176, 80, 0.1);
	color: #00733a;                  /* 5.6:1 on the pale green */
	font-size: 12px;
	font-weight: 700;
}
.vsl-uk-tech .vut-quote__verified i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--vc-green);
	color: #fff;
	font-size: 9px;
}
.vsl-uk-tech .vut-quote__src img { height: 14px; width: auto; opacity: 0.85; transition: opacity 0.2s ease; }
.vsl-uk-tech .vut-quote__src:hover img { opacity: 1; }

/* Clutch rating badge: brand | score + stars | CTA */
.vsl-uk-tech .vut-rating {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
	max-width: 880px;
	margin: 32px auto 0;
	padding: 20px 26px;
	background: #fff;
	border: 1px solid var(--vc-line);
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(34, 40, 42, 0.08);
}
.vsl-uk-tech .vut-rating__brand {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 28px;
	border-right: 1px solid var(--vc-line);
}
.vsl-uk-tech .vut-rating__brand img { height: 24px; width: auto; }
.vsl-uk-tech .vut-rating__brand span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vc-muted);
	white-space: nowrap;
}
.vsl-uk-tech .vut-rating__score { display: flex; align-items: center; gap: 16px; min-width: 0; }
.vsl-uk-tech .vut-rating__num {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--vc-navy);
}
.vsl-uk-tech .vut-rating__detail { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* five stars drawn twice: grey track, then Clutch red clipped to the score */
.vsl-uk-tech .vut-rating__stars {
	position: relative;
	display: inline-block;
	width: max-content;
	font-family: 'FontAwesome';
	font-size: 18px;
	line-height: 1;
	letter-spacing: 3px;
	color: #dfe3e8;
}
.vsl-uk-tech .vut-rating__stars::before { content: '\f005\f005\f005\f005\f005'; }
.vsl-uk-tech .vut-rating__stars::after {
	content: '\f005\f005\f005\f005\f005';
	position: absolute;
	left: 0;
	top: 0;
	width: var(--vut-fill, 96%);
	overflow: hidden;
	white-space: nowrap;
	color: #e62415;                  /* Clutch star red */
}
.vsl-uk-tech .vut-rating__text { font-size: 14.5px; line-height: 1.4; color: var(--vc-muted); }
.vsl-uk-tech .vut-rating__text strong { color: var(--vc-navy); }
.vsl-uk-tech .vut-rating__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border: 2px solid var(--vc-navy);
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--vc-navy);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.vsl-uk-tech .vut-rating__cta:hover { background: var(--vc-navy); color: #fff; }
.vsl-uk-tech .vut-rating__cta i { font-size: 11px; }

/* ==========================================================================
   4. PROBLEM
   ========================================================================== */
/* Story (left) beside the reasons panel (right) */
.vsl-uk-tech .vut-problem__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	margin-bottom: 40px;
}
.vsl-uk-tech .vut-prose .vut-h2 { margin-bottom: 20px; }
.vsl-uk-tech .vut-prose p { font-size: 16.5px; line-height: 1.7; color: #4a545c; margin: 0 0 16px; }
.vsl-uk-tech .vut-prose p:last-child { margin-bottom: 0; }

.vsl-uk-tech .vut-reasons {
	padding: 28px 30px 12px;
	background: var(--vut-tint);
	border: 1px solid var(--vc-line);
	border-radius: 16px;
}
.vsl-uk-tech .vut-reasons__title { font-size: 19px; margin-bottom: 8px; }
.vsl-uk-tech .vut-reasons__list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--vc-line);
}
.vsl-uk-tech .vut-reasons__list li:first-child { border-top: 0; }
.vsl-uk-tech .vut-reasons__list i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #fff;
	border: 1px solid rgba(254, 142, 6, 0.3);
	color: var(--vut-orange-text);
	font-size: 15px;
}
.vsl-uk-tech .vut-reasons__list p { margin: 5px 0 0; font-size: 15px; line-height: 1.55; color: #3d474f; }

/* Preparation note: same neutral card as the reasons panel; heading
   (left) beside the paragraph (right) keeps the line length readable */
.vsl-uk-tech .vut-callout {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	gap: 40px;
	align-items: center;
	padding: 30px 34px;
	background: var(--vut-tint);
	border: 1px solid var(--vc-line);
	border-radius: 16px;
}
.vsl-uk-tech .vut-callout__title { margin: 0; font-size: 21px; line-height: 1.3; }
.vsl-uk-tech .vut-callout p { margin: 0; font-size: 16px; line-height: 1.7; color: #4a545c; max-width: 64ch; }
.vsl-uk-tech .vut-callout strong { color: var(--vc-navy); font-weight: 700; font-size: inherit; }

/* ==========================================================================
   5. DIFFERENCE TABLE
   ========================================================================== */
/* The eight advantages: still a real <table> in the markup (with ARIA
   table roles so restyling doesn't drop its semantics), laid out as a
   two-column grid of cards: title on top, explanation directly below. */
.vsl-uk-tech .vut-table,
.vsl-uk-tech .vut-table tbody,
.vsl-uk-tech .vut-table tr,
.vsl-uk-tech .vut-table th,
.vsl-uk-tech .vut-table td { display: block; }
.vsl-uk-tech .vut-table { max-width: 1040px; margin: 0 auto; border: 0; background: none; }
/* column headers stay for assistive tech and parsers, hidden visually */
.vsl-uk-tech .vut-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.vsl-uk-tech .vut-table tbody {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.vsl-uk-tech .vut-table tbody tr {
	padding: 22px 26px 22px 24px;
	background: #fff;
	border: 1px solid var(--vc-line);
	border-radius: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vsl-uk-tech .vut-table tbody tr:hover {
	border-color: rgba(254, 142, 6, 0.45);
	box-shadow: 0 12px 28px rgba(34, 40, 42, 0.07);
}
.vsl-uk-tech .vut-table th,
.vsl-uk-tech .vut-table td { padding: 0; border: 0; background: none; text-align: left; }
.vsl-uk-tech .vut-table tbody th {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vc-navy);
}
.vsl-uk-tech .vut-table tbody th i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--vc-orange);
	color: var(--vc-navy);
	font-size: 11px;
}
.vsl-uk-tech .vut-table td {
	margin-top: 8px;
	padding-left: 36px;                 /* aligns under the title text */
	font-size: 15.5px;
	line-height: 1.6;
	color: #3d474f;
}

.vsl-uk-tech .vut-inline-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 26px;
	margin-top: 36px;
}

/* ==========================================================================
   6. SUBSCRIPTION BAND
   ========================================================================== */
.vsl-uk-tech .vut-sub { background: linear-gradient(160deg, var(--vut-ink) 0%, var(--vut-ink-2) 100%); }
.vsl-uk-tech .vut-sub__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 48px;
	align-items: start;
}
.vsl-uk-tech .vut-sub__body p { font-size: 16.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.86); margin: 0 0 16px; }
.vsl-uk-tech .vut-sub__body p:nth-of-type(2) { color: #fff; font-weight: 600; }
.vsl-uk-tech .vut-sub__body .vut-link { margin-top: 6px; }
.vsl-uk-tech .vut-sub {
	background:
		radial-gradient(circle at 12% 100%, rgba(254, 142, 6, 0.14), transparent 40%),
		linear-gradient(160deg, var(--vut-ink) 0%, var(--vut-ink-2) 100%);
}
.vsl-uk-tech .vut-sub__points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 26px;
}
.vsl-uk-tech .vut-sub__points li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
}
.vsl-uk-tech .vut-sub__points i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vc-orange);
	color: var(--vc-navy);
	font-size: 11px;
}

/* ==========================================================================
   7. PROCESS
   ========================================================================== */
.vsl-uk-tech .vut-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	counter-reset: vut-step;
}
.vsl-uk-tech .vut-steps__list li {
	position: relative;
	overflow: hidden;
	counter-increment: vut-step;
	padding: 26px 24px 24px;
	background: #fff;
	border: 1px solid var(--vc-line);
	border-radius: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* orange accent rule that extends on hover */
.vsl-uk-tech .vut-steps__list li::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 56px;
	height: 3px;
	background: var(--vc-orange);
	transition: width 0.3s ease;
}
.vsl-uk-tech .vut-steps__list li:hover::before { width: 100%; }
/* faint oversized step number, top right */
.vsl-uk-tech .vut-steps__list li::after {
	content: '0' counter(vut-step);
	position: absolute;
	top: 6px;
	right: 16px;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(53, 60, 62, 0.06);
	pointer-events: none;
}
.vsl-uk-tech .vut-steps__list li:hover { border-color: rgba(254, 142, 6, 0.45); box-shadow: 0 16px 32px rgba(34, 40, 42, 0.08); transform: translateY(-2px); }
.vsl-uk-tech .vut-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--vc-orange);
	color: var(--vc-navy);
	font-size: 17px;
	font-weight: 800;
}
.vsl-uk-tech .vut-steps__list p { margin: 0; font-size: 15px; line-height: 1.6; color: #4a545c; }

/* ==========================================================================
   8. WHO IT'S FOR
   ========================================================================== */
.vsl-uk-tech .vut-who__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px;
	max-width: 1040px;
	margin: 0 auto;
}
.vsl-uk-tech .vut-who__grid li {
	grid-column: span 2;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--vc-line);
	border-radius: 14px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--vc-navy);
}
/* 3 + 2 layout: centre the second row */
.vsl-uk-tech .vut-who__grid li:nth-child(4) { grid-column: 2 / span 2; }
.vsl-uk-tech .vut-who__grid i {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--vc-orange-soft);
	color: var(--vut-orange-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

/* ==========================================================================
   9. CASE STUDIES + READING
   ========================================================================== */
.vsl-uk-tech .vut-cases__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.vsl-uk-tech .vut-cases__grid a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 22px 20px;
	background: #fff;
	border: 1px solid var(--vc-line);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vsl-uk-tech .vut-cases__grid a:hover {
	border-color: rgba(254, 142, 6, 0.5);
	box-shadow: 0 16px 32px rgba(16, 40, 73, 0.08);
	transform: translateY(-2px);
}
.vsl-uk-tech .vut-cases__sector {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vc-muted);
	margin-bottom: 8px;
}
.vsl-uk-tech .vut-cases__grid p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #4a545c; }
.vsl-uk-tech .vut-cases__more { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--vut-orange-text); }

.vsl-uk-tech .vut-reading {
	margin-top: 34px;
	padding: 22px 26px;
	border: 1px dashed #cfd5dd;
	border-radius: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 26px;
}
.vsl-uk-tech .vut-reading__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vc-muted);
}
.vsl-uk-tech .vut-reading ul { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.vsl-uk-tech .vut-reading a {
	font-size: 15px;
	font-weight: 600;
	color: var(--vc-navy);
	text-decoration: underline;
	text-decoration-color: rgba(254, 142, 6, 0.7);
	text-underline-offset: 3px;
}
.vsl-uk-tech .vut-reading a:hover { color: var(--vut-orange-text); }

/* ==========================================================================
   10. FINAL CTA: navy instead of the Clutch page's orange band, so the
   white copy passes contrast; the orange button keeps navy text.
   ========================================================================== */
.vsl-uk-tech .vut-final { background: linear-gradient(160deg, var(--vut-ink) 0%, var(--vut-ink-2) 100%); }
.vsl-uk-tech .vut-final .vc-final__sub { max-width: 680px; margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.86); }
.vsl-uk-tech .vut-final .vc-btn--final-primary {
	background: var(--vc-orange);
	border-color: var(--vc-orange);
	color: var(--vc-navy);
}
.vsl-uk-tech .vut-final .vc-btn--final-primary:hover { background: #ffa22e; color: var(--vc-navy); }
.vsl-uk-tech .vut-final__note { margin: 18px 0 0; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   11. BOOK / DISCUSS
   ========================================================================== */
.vsl-uk-tech .vut-book { background: var(--vut-tint); }
.vsl-uk-tech .vut-book__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 24px;
	align-items: start;
}
.vsl-uk-tech .vut-book__cal,
.vsl-uk-tech .vut-book__form {
	background: #fff;
	border: 1px solid var(--vc-line);
	border-radius: 16px;
	padding: 24px 24px 10px;
	scroll-margin-top: 90px;
}
.vsl-uk-tech .vut-book__form { padding-bottom: 24px; }
.vsl-uk-tech .vut-book .vut-h3 i { color: var(--vut-orange-text); margin-right: 6px; }
.vsl-uk-tech .vut-book__formsub { margin: -4px 0 16px; font-size: 14px; color: var(--vc-muted); }

/* CF7 form */
.vsl-uk-tech .vut-form p { margin: 0 0 14px; }
.vsl-uk-tech .vut-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--vc-navy);
}
.vsl-uk-tech .vut-form label .vut-opt { font-weight: 400; color: var(--vc-muted); }
.vsl-uk-tech .vut-form input[type="text"],
.vsl-uk-tech .vut-form input[type="email"],
.vsl-uk-tech .vut-form input[type="tel"],
.vsl-uk-tech .vut-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 15px;
	color: var(--vc-navy);
	background: #fff;
	border: 1px solid #c5ccd5;
	border-radius: 8px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vsl-uk-tech .vut-form textarea { height: 110px; resize: vertical; }
.vsl-uk-tech .vut-form input:focus,
.vsl-uk-tech .vut-form textarea:focus {
	outline: none;
	border-color: var(--vc-orange);
	box-shadow: 0 0 0 3px rgba(254, 142, 6, 0.25);
}
.vsl-uk-tech .vut-form input[type="submit"] {
	width: 100%;
	padding: 15px 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vc-navy);
	background: var(--vc-orange);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.vsl-uk-tech .vut-form input[type="submit"]:hover { background: #ffa22e; }
/* CF7's spinner would wrap under the full-width button; overlay it instead */
.vsl-uk-tech .vut-form p:has(> input[type="submit"]) { position: relative; }
.vsl-uk-tech .vut-form .wpcf7-spinner { position: absolute; right: 12px; top: 50%; margin: -12px 0 0; }
.vsl-uk-tech .vut-form .wpcf7-not-valid-tip { font-size: 13px; color: #c62828; margin-top: 4px; }
.vsl-uk-tech .vut-form .vut-privacy { font-size: 12.5px; line-height: 1.5; color: var(--vc-muted); margin: 10px 0 0; }
.vsl-uk-tech .vut-form .vut-privacy a { color: var(--vc-navy); }

/* ==========================================================================
   12. FAQ: heading element inside <summary>
   ========================================================================== */
.vsl-uk-tech .vut-faq__q {
	margin: 0;
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: inherit;
}
/* The AI page caps answers at 68ch with a rule flush to the card edge;
   here the answer lines up under its question and uses the card width. */
.vsl-uk-tech .vc-faq__a { max-width: none; margin: 0 26px 24px; padding: 0 0 0 16px; }
.vsl-uk-tech .vc-faq__a p { font-size: 15.5px; line-height: 1.65; color: #4a545c; }


/* ==========================================================================
   STICKY MOBILE CTA (JS toggles .is-visible)
   ========================================================================== */
.vsl-uk-tech .vut-sticky { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.vsl-uk-tech .vut-dash { width: 46%; right: -4%; padding: 10px 11px 11px; }
	.vsl-uk-tech .vut-dash__head { font-size: 9.5px; letter-spacing: 0.08em; }
	.vsl-uk-tech .vut-dash__rows li { grid-template-columns: 52px 1fr; font-size: 10.5px; }
	.vsl-uk-tech .vut-chip { left: 0; }
	.vsl-uk-tech .vut-hero__grid { gap: 32px; }
	.vsl-uk-tech .vut-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vsl-uk-tech .vut-book__grid { grid-template-columns: 1fr; }
}

/* Tablet portrait: two columns leave the visual too narrow (the report
   card covers the caller's face), so stack copy then visual. */
@media (max-width: 900px) and (min-width: 781px) {
	.vsl-uk-tech .vut-hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.vsl-uk-tech .vut-visual { max-width: 460px; margin: 0 auto; }
	.vsl-uk-tech .vut-dash { width: 44%; padding: 12px 14px 13px; }
	.vsl-uk-tech .vut-dash__head { font-size: 10.5px; letter-spacing: 0.12em; }
	.vsl-uk-tech .vut-dash__rows li { grid-template-columns: 58px 1fr; font-size: 11px; }
}

@media (max-width: 860px) {
	.vsl-uk-tech .vut-quotes { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
	.vsl-uk-tech .vut-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vsl-uk-tech .vut-who__grid { grid-template-columns: 1fr 1fr; }
	.vsl-uk-tech .vut-who__grid li,
	.vsl-uk-tech .vut-who__grid li:nth-child(4) { grid-column: auto; }
	.vsl-uk-tech .vut-who__grid li:last-child { grid-column: 1 / -1; }
	.vsl-uk-tech .vut-sub__grid { grid-template-columns: 1fr; gap: 24px; }
	.vsl-uk-tech .vut-problem__grid { grid-template-columns: 1fr; gap: 32px; }
	.vsl-uk-tech .vut-callout { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 780px) {
	.vsl-uk-tech .vc-wrap { padding: 0 18px; }
	.vsl-uk-tech .vut-section { padding: 52px 0; }
	.vsl-uk-tech .vut-head { margin-bottom: 28px; }
	.vsl-uk-tech .vut-h2 { font-size: 25px; }

	/* Hero: single column, graphic beneath the intro copy (client brief).
	   display:contents lets the CTAs/assurances drop below the image so the
	   order is copy -> graphic -> CTA on small screens. */
	.vsl-uk-tech .vut-hero { padding: 34px 0 40px; }
	.vsl-uk-tech .vut-hero__grid { grid-template-columns: 1fr; gap: 0; }
	.vsl-uk-tech .vut-hero__copy { display: contents; }
	.vsl-uk-tech .vut-hero__title { font-size: clamp(26px, 7vw, 32px); margin-bottom: 16px; }
	.vsl-uk-tech .vut-hero__sub { order: 3; font-size: 17px; }
	.vsl-uk-tech .vut-hero__intro { order: 4; font-size: 15px; margin-bottom: 22px; }
	.vsl-uk-tech .vut-hero__media { order: 5; margin-bottom: 26px; }
	.vsl-uk-tech .vut-visual { max-width: 420px; margin: 0 auto; }
	.vsl-uk-tech .vut-dash { right: -2%; bottom: 4%; width: 50%; padding: 9px 10px 10px; }
	.vsl-uk-tech .vut-dash__head { font-size: 9px; margin-bottom: 7px; }
	.vsl-uk-tech .vut-dash__chart { height: 30px; margin-bottom: 7px; }
	.vsl-uk-tech .vut-dash__rows li { grid-template-columns: 50px 1fr; font-size: 10px; margin-bottom: 4px; }
	.vsl-uk-tech .vut-chip { left: 0; top: 58%; padding: 8px 12px 8px 8px; }
	.vsl-uk-tech .vut-chip__icon { width: 28px; height: 28px; font-size: 12px; }
	.vsl-uk-tech .vut-chip strong { font-size: 12px; }
	.vsl-uk-tech .vut-chip small { font-size: 10.5px; }
	.vsl-uk-tech .vut-hero__ctas { order: 6; flex-direction: column; align-items: stretch; text-align: center; }
	.vsl-uk-tech .vut-hero__ctas .vut-link { align-self: center; }
	.vsl-uk-tech .vut-hero__proof { order: 7; grid-template-columns: 1fr; gap: 12px; margin-top: 26px; padding-top: 22px; }

	.vsl-uk-tech .vut-trust { padding: 40px 0 36px; }
	.vsl-uk-tech .vut-trust__title { font-size: 20px; }
	.vsl-uk-tech .vut-rating { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; text-align: center; justify-items: center; }
	.vsl-uk-tech .vut-rating__brand { align-items: center; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--vc-line); width: 100%; }
	.vsl-uk-tech .vut-rating__score { flex-direction: column; gap: 8px; }
	.vsl-uk-tech .vut-rating__detail { align-items: center; }
	.vsl-uk-tech .vut-rating__cta { width: 100%; justify-content: center; }
	.vsl-uk-tech .vut-quote__text { font-size: 17px; }


	/* Advantage cards: single column */
	.vsl-uk-tech .vut-table tbody { grid-template-columns: 1fr; gap: 12px; }
	.vsl-uk-tech .vut-table tbody tr { padding: 18px 18px 18px 16px; }
	.vsl-uk-tech .vut-table tbody th { font-size: 16px; }
	.vsl-uk-tech .vut-table td { font-size: 15px; }
	.vsl-uk-tech .vut-inline-cta { flex-direction: column; align-items: stretch; text-align: center; }
	.vsl-uk-tech .vut-inline-cta .vut-link { align-self: center; }

	.vsl-uk-tech .vut-steps__list { grid-template-columns: 1fr; gap: 14px; }
	.vsl-uk-tech .vut-steps__list li { padding: 20px 20px 18px 74px; }
	.vsl-uk-tech .vut-steps__num { position: absolute; left: 20px; top: 20px; margin: 0; }

	.vsl-uk-tech .vut-who__grid { grid-template-columns: 1fr; }
	.vsl-uk-tech .vut-cases__grid { grid-template-columns: 1fr; }
	.vsl-uk-tech .vut-callout { padding: 22px 20px; }
	.vsl-uk-tech .vut-reasons { padding: 22px 18px 6px; }
	.vsl-uk-tech .vut-problem__grid { margin-bottom: 28px; }
	.vsl-uk-tech .vut-sub__points { grid-template-columns: 1fr; }
	.vsl-uk-tech .vut-steps__list li::after { font-size: 48px; }
	.vsl-uk-tech .vut-reading { padding: 18px; }
	.vsl-uk-tech .vut-reading ul { flex-direction: column; }

	.vsl-uk-tech .vut-book__cal,
	.vsl-uk-tech .vut-book__form { padding: 18px 14px 6px; }
	.vsl-uk-tech .vut-book__form { padding-bottom: 18px; }

	.vsl-uk-tech .vc-final__title { font-size: 27px; }

	.vsl-uk-tech .vut-sticky {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(11, 29, 54, 0.96);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
		transform: translateY(110%);
		transition: transform 0.25s ease;
	}
	.vsl-uk-tech .vut-sticky.is-visible { transform: translateY(0); }
	.vsl-uk-tech .vut-sticky .vut-btn { display: flex; width: 100%; min-height: 48px; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vsl-uk-tech *,
	.vsl-uk-tech *::before,
	.vsl-uk-tech *::after { transition: none !important; animation: none !important; }
}