/* =============================================================================
   VISTA INFORMATION — design system
   Colours, type and layout sampled from the Vista Information design.

   SCALING MODEL
   -------------
   The board is authored at 1920px. Every value below is written as
   `design_px / 16` rem, and the root font-size is fluid, so the whole
   composition scales proportionally instead of breaking at arbitrary widths.

     ≥1200px : 1rem = clamp(10px, 0.8333vw, 16px)   → at 1920 this is 16px (1:1)
     <1200px : 1rem = 11px                          → tablet
     ≤640px  : 1rem = 10px                          → phone
   ========================================================================== */

/* -----------------------------------------------------------------  tokens */
:root {
	/* navy ---------------------------------------------------------------- */
	--navy-900: #041a33;
	--navy-800: #072447;
	--navy-700: #082c52;
	--navy-600: #0b345f;
	--navy-500: #16406b;

	/* ink / text ---------------------------------------------------------- */
	--ink: #08315a;
	--ink-d: #062c52;
	--body: #55606b;
	--muted: #7e8c99;
	--steel: #5b7c97;

	/* green --------------------------------------------------------------- */
	--green: #74b643;
	--green-6: #63a436;
	--green-7: #4e8e23;
	--green-05: #eff7e7;
	--green-b: #a9ce85;
	--green-soft: #a9ce96;

	/* accents ------------------------------------------------------------- */
	--cta-a: #062f57;
	--cta-b: #0a6c93;
	--num-blue: #6c9bd8;
	--arrow: #1b7fc4;
	--red: #d9534f;

	/* surfaces ------------------------------------------------------------ */
	--bg: #ffffff;
	--bg-1: #f7f9fa;
	--bg-2: #f1f2f4;
	--bg-3: #f7f8f9;
	--line: #e4e9ee;
	--line-2: #edf1f5;

	--card-tint: linear-gradient(145deg, #dfeaf5 0%, #f1f6fb 44%, #ffffff 100%);
	--quote-tint: linear-gradient(145deg, #eaf3fc 0%, #d6ecf8 55%, #bedcf0 100%);
	--step-tint: linear-gradient(90deg, #eaf3fb 0%, #f4f5f7 42%, #f2f3f5 100%);
	--faq-tint: linear-gradient(90deg, #edf4f9 0%, #f6f7f9 45%, #f4f5f6 100%);

	/* type ---------------------------------------------------------------- */
	--font: "Onest", "Onest Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fs-h1: 4.5rem;        /* 72 */
	--fs-h2: 2.8125rem;     /* 45 */
	--fs-h2-xl: 3rem;       /* 48 */
	--fs-h3: 1.75rem;       /* 28 */
	--fs-eyebrow: 1.75rem;  /* 28 */
	--fs-lead: 1.5rem;      /* 24 */
	--fs-body: 1.5rem;      /* 24 */
	--fs-sm: 1.375rem;      /* 22 */
	--fs-xs: 1.25rem;       /* 20 */
	--fs-2xs: 1.125rem;     /* 18 */

	/* geometry ------------------------------------------------------------ */
	--shell: 111.25rem;     /* 1780 */
	--shell-n: 106.375rem;  /* 1702 */
	--r-sm: .75rem;
	--r-md: 1.25rem;
	--r-lg: 1.75rem;
	--r-xl: 2.25rem;
	--r-pill: 62.5rem;

	--sh-1: 0 .5rem 1.5rem rgba(8, 49, 90, .06);
	--sh-2: 0 1.25rem 3.25rem rgba(8, 49, 90, .12);
	--sh-3: 0 1.75rem 4.5rem rgba(4, 26, 51, .22);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

html {
	font-size: 11px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (min-width: 1200px) { html { font-size: clamp(10px, .8333vw, 16px); } }
@media (max-width: 640px)  { html { font-size: 10px; } }

/* ------------------------------------------------------------------  reset */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--body);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy-800); color: #fff; padding: .75rem 1.25rem; }
.v-skip:focus { left: 1rem; top: 1rem; }

.v-ico { display: inline-flex; }
.v-ico > svg { width: 100%; height: 100%; display: block; }

.v-shell { width: 90%!important; max-width: 100%; margin-inline: auto; }

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */
.v-eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 400;
	line-height: 1.25;
	color: var(--green);
	margin-bottom: .625rem;
}
.v-eyebrow--light { color: var(--green); }

.v-h2 {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.018em;
	color: var(--ink);
}
.v-h2--light { color: #fff; }
.v-h2 em, .v-h2 .g { font-style: normal; color: var(--green); }

.v-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--body); }

/* ==========================================================================
   BUTTONS — navy → teal gradient pill with a white arrow badge
   ========================================================================== */
.v-btn {
	--h: 3.5625rem;      /* 57 */
	--pad: 2.5rem;       /* 40 */
	--badge: 2.8125rem;  /* 45 */
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--h);
	padding-inline: var(--pad) calc(var(--badge) + 1.375rem);
	border-radius: var(--r-pill);
	background: linear-gradient(95deg, var(--cta-a) 0%, #06426c 52%, var(--cta-b) 100%);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.15;
	transition: filter .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
	box-shadow: 0 .5rem 1.5rem rgba(6, 47, 87, .22);
	justify-self: start;                 /* never stretch as a grid item */
	align-self: start;
}
.v-btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 .9rem 2.1rem rgba(6, 47, 87, .3); }
.v-btn:active { transform: translateY(0); }

.v-btn__badge {
	position: absolute;
	right: .4375rem; top: 50%;
	translate: 0 -50%;
	width: var(--badge); height: var(--badge);
	display: grid; place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--cta-a);
	transition: transform .35s var(--ease);
}
.v-btn__badge .v-ico { width: 46%; height: 46%; }
.v-btn:hover .v-btn__badge { transform: rotate(45deg); }
.v-btn__badge:empty { display: none; }

.v-btn--lg { --h: 4.9375rem; --pad: 1.875rem; --badge: 3.875rem; font-size: 1.5625rem; }
.v-btn--lg .v-btn__badge { right: .6875rem; }
.v-btn--sm { --h: 2.75rem; --pad: 1.5rem; --badge: 2.125rem; font-size: var(--fs-xs); }
.v-btn--xs {
	--h: 2.75rem; --badge: 0;
	padding-inline: 1.6875rem;
	font-size: 1.125rem; font-weight: 500;
	box-shadow: none;
}
.v-btn--ring {
    border: 5px solid #C9D2DB;
}
.v-btn--white {
	background: #fff; color: var(--ink); font-weight: 600;
	box-shadow: 0 .5rem 1.5rem rgba(4, 26, 51, .28);
}
.v-btn--white .v-btn__badge { background: linear-gradient(150deg, #86c44f, var(--green-7)); color: #fff; }
.v-btn--white:hover { filter: none; }

/* pill link (Know More) --------------------------------------------------- */
.v-card__more {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 8.5625rem; height: 2.375rem;
	padding-inline: 1.25rem;
	border-radius: var(--r-pill);
	background: #fff;
	border: 1px solid var(--green-b);
	color: var(--green-7);
	font-size: 1.0625rem; font-weight: 500;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.v-card__more:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* round icon button ------------------------------------------------------- */
.v-round {
	width: 4.9375rem; height: 4.9375rem;
	border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(150deg, #86c44f 0%, var(--green-7) 100%);
	color: #fff;
	box-shadow: 0 .5rem 1.25rem rgba(78, 142, 35, .3);
	transition: filter .3s var(--ease), transform .3s var(--ease);
}
.v-round .v-ico { width: 1.875rem; height: 1.875rem; }
.v-round:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ==========================================================================
   HEADER — solid white bar
   ========================================================================== */
.v-header {
	position: sticky; top: 0; z-index: 90;
	height: 5.0625rem;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(12px);
	transition: box-shadow .3s var(--ease);
}
.v-header.is-stuck { box-shadow: 0 .35rem 1.5rem rgba(8, 49, 90, .1); }

/* keep the sticky header clear of the WordPress admin bar when logged in */
.admin-bar .v-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .v-header { top: 46px; } }

.v-header__inner {
	width: 111.5625rem; max-width: calc(100% - 3rem);
	margin-inline: auto; height: 100%;
	display: flex; align-items: center; gap: 2rem;
}
.v-header__brand { flex: 0 0 auto; }
.v-logo { display: block; }
.v-logo img, .custom-logo-link img { width: 7.3125rem; height: auto; }

.v-nav { margin-inline: auto; }
.v-nav__list { display: flex; align-items: center; gap: 3.8125rem; }
.v-nav__item { position: relative; }
.v-nav__link {
	position: relative;
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: var(--fs-xs); font-weight: 400;
	color: var(--steel);
	padding-block: .5rem;
	transition: color .25s var(--ease);
}
.v-nav__link::after {
	content: ""; position: absolute;
	left: 0; right: 100%; bottom: .0625rem;
	height: 1.5px; background: var(--ink);
	transition: right .3s var(--ease);
}
.v-nav__item:hover > .v-nav__link,
.v-nav__item.is-current > .v-nav__link { color: var(--ink); font-weight: 600; }
.v-nav__item:hover > .v-nav__link::after,
.v-nav__item.is-current > .v-nav__link::after { right: 0; }
.v-nav__caret { width: .9rem; height: .9rem; }

.v-nav__sub {
	position: absolute; top: 100%; left: -1rem;
	min-width: max-content; padding: .75rem 0; margin-top: .75rem;
	background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-2);
	opacity: 0; visibility: hidden; transform: translateY(.5rem);
	transition: all .25s var(--ease);
}
.v-nav__item:hover > .v-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.v-nav__sub .v-nav__link { color: var(--ink); padding: .5rem 1.25rem; width: 100%; }
.v-nav__sub .v-nav__link::after { display: none; }
.v-nav__sub .v-nav__item:hover > .v-nav__link { color: var(--green-7); }

.v-header__actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.v-burger { display: none; width: 2.75rem; height: 2.75rem; flex-direction: column; justify-content: center; gap: .3rem; align-items: center; }
.v-burger__bar { display: block; width: 1.5rem; height: 2px; background: var(--ink); border-radius: 2px; }

/* mobile drawer ----------------------------------------------------------- */
.v-drawer { position: fixed; inset: 0; z-index: 200; }
.v-drawer[hidden] { display: none; }
.v-drawer__scrim { position: absolute; inset: 0; background: rgba(4, 26, 51, .55); }
.v-drawer__panel {
	position: absolute; inset: 0 0 0 auto;
	width: min(26rem, 88vw);
	background: #fff; padding: 1.5rem 1.5rem 2rem;
	display: flex; flex-direction: column; gap: 1.5rem;
	transform: translateX(100%);
	animation: v-slide .35s var(--ease) forwards;
	overflow-y: auto;
}
@keyframes v-slide { to { transform: translateX(0); } }
.v-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.v-drawer__close { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--ink); }
.v-drawer__close .v-ico { width: 1.5rem; height: 1.5rem; }
.v-drawer__list { display: flex; flex-direction: column; }
.v-drawer__list .v-nav__link { color: var(--ink); font-size: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line-2); width: 100%; }
.v-drawer__list .v-nav__link::after { display: none; }
.v-drawer__list .v-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 .5rem 1rem; margin: 0; }
.v-drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.v-drawer__mail { display: inline-flex; align-items: center; gap: .5rem; color: var(--body); font-size: 1.25rem; }
.v-drawer__mail .v-ico { width: 1.25rem; height: 1.25rem; color: var(--green-7); }

/* ==========================================================================
   HERO — bright library photography, navy type
   ========================================================================== */
.v-hero {
	position: relative;
	background: #f6f2ec;
	padding-bottom: 5.5rem;
	overflow: hidden;
	isolation: isolate;
}
.v-hero__bg { position: absolute; inset: 0; z-index: -1; }
.v-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.v-hero__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(97deg,
			rgba(255, 255, 255, .98) 0%,
			rgba(255, 255, 255, .96) 24%,
			rgba(255, 255, 255, .78) 36%,
			rgba(255, 255, 255, .18) 50%,
			rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 14%),
		linear-gradient(0deg,
			rgba(28, 26, 24, .72) 0%,
			rgba(28, 26, 24, .62) 20%,
			rgba(28, 26, 24, .34) 34%,
			rgba(28, 26, 24, 0) 48%);
}

.v-hero__inner {
	display: grid;
	grid-template-columns: 1fr 30.375rem;
	align-items: start;
	gap: 3rem;
	padding: 3.875rem 3rem 0;
}
.v-panel__spark {
	width: 2.75rem;
	height: 1.5rem;
	flex: 0 0 2.75rem;

	display: flex;
	align-items: center;
}

.v-panel__spark img {
	display: block;
	width: 2.75rem;
	height: 1.5rem;
	object-fit: contain;
}

.v-panel__spark svg {
	display: none !important;
}
.v-hero__kicker {
	display: flex; align-items: center; gap: .875rem;
	font-size: var(--fs-xs); font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 1.5rem;
}
.v-hero__kicker-rule { width: 2.75rem; height: 3px; background: var(--green); border-radius: 2px; flex: 0 0 auto; }

.v-hero__title {
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: -.028em;
	color: var(--ink-d);
	max-width: 44rem;
	margin-bottom: 1.75rem;
}
.v-hero__title em { font-style: normal; color: var(--green); }
.v-hero__title strong { font-weight: 700; }

.v-hero__intro { max-width: 34.75rem; font-size: var(--fs-body); line-height: 1.6; color: var(--body); margin-bottom: 2.25rem; }

.v-hero__follow {
    background: #027DBB!important;
    border-radius: 6px;
    padding: 7px 20px;
    width: fit-content;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 2.25rem;
}
.v-hero__follow-label { font-size: var(--fs-xs); color: white!Important }
.v-hero__follow-list { display: flex; gap: .5rem; }
.v-hero__follow-list a {
	width: 2.375rem; height: 2.375rem;
	display: grid; place-items: center; border-radius: .5rem;
	background: #0a66c2; color: #fff;
	transition: filter .25s var(--ease), transform .25s var(--ease);
}
.v-hero__follow-list li:nth-child(2) a { background: #1877f2; }
.v-hero__follow-list li:nth-child(3) a { background: var(--ink); }
.v-hero__follow-list li:nth-child(4) a { background: #c13584; }
.v-hero__follow-list .v-ico { width: 1.15rem; height: 1.15rem; }
.v-hero__follow-list a:hover { filter: brightness(1.15); transform: translateY(-2px); }

.v-hero__cta { margin-bottom: 3rem; }

.v-hero__proof { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.v-avatars { display: flex; }
.v-avatars li { margin-left: -.75rem; }
.v-avatars li:first-child { margin-left: 0; }
.v-avatars img { width: 2.375rem; height: 2.375rem; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.v-hero__proof-text { font-size: var(--fs-xs); color: var(--ink); }
.v-stars { display: inline-flex; gap: .175rem; color: #07537c; }
.v-stars .v-ico { width: 1rem; height: 1rem; }

/* ---------------------------------------------------- analytics panel */
.v-panel {
	width: 28.5625rem;
	margin-top: 1.5rem;
	padding: 1.5rem 1.375rem 1.375rem;
	border-radius: 1.75rem;

	background: rgba(255, 255, 255, .38);
	border: 1px solid rgba(255, 255, 255, .62);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);

	box-shadow:
		0 1.5rem 3.5rem rgba(4, 26, 51, .18),
		inset 0 1px 0 rgba(255, 255, 255, .35);

	color: var(--ink);
	overflow: hidden;
}

.v-panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 11.5rem;
	gap: .75rem;
	align-items: start;
}

.v-panel__eyebrow {
	margin: 0 0 .95rem;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #527a9b;
}

.v-panel__value {
	margin: 0;
	font-family: var(--font);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.025em;
	color: #07335d;
}

.v-panel__delta {
	margin: .35rem 0 0;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.35;
	color: #526678;
}

.v-panel__delta b {
	color: #4f9b29;
	font-weight: 600;
}

.v-panel__filters {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin-top: 1rem;
}

.v-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.75rem;
	padding: 0 .75rem;
	border-radius: .5rem;
	font-family: var(--font);
	font-size: .75rem;
	font-weight: 500;
	line-height: 1;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(8, 49, 90, .08);
	color: #5b7c97;
	white-space: nowrap;
}

.v-chip.is-on {
	background: #07365f;
	border-color: #07365f;
	color: #fff;
}

/* Chart image */
.v-panel__donut {
	width: 11.5rem;
	height: 11.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 11.5rem;
	margin-top: .15rem;
}

.v-panel__donut img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.v-panel__donut svg {
	display: none;
}

/* Legend */
.v-panel__legend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem 1.25rem;
	margin: 1rem 0 1.25rem;
	padding: 0;
}

.v-panel__legend li {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: .5rem;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.25;
}

.v-panel__legend i {
	display: block;
	width: .8125rem;
	height: .8125rem;
	flex: 0 0 .8125rem;
	border-radius: .1875rem;
}

.v-panel__legend-name {
	min-width: 0;
	color: #40566b;
	white-space: nowrap;
}

.v-panel__legend-pct {
	margin-left: auto;
	font-weight: 600;
	color: #07335d;
	white-space: nowrap;
}

/* Match Figma legend placement */
.v-panel__legend li:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.v-panel__legend li:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.v-panel__legend li:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

.v-panel__legend li:nth-child(4) {
	grid-column: 1;
	grid-row: 2;
}

.v-panel__legend li:nth-child(5) {
	grid-column: 1;
	grid-row: 3;
}

/* Bottom rows */
.v-panel__rows {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.v-panel__rows li {
	display: flex;
	align-items: center;
	min-height: 3.375rem;
	gap: .7rem;
	padding: .625rem .875rem;
	background: rgba(255, 255, 255, .94);
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: .7rem;
	box-shadow: 0 .25rem .75rem rgba(4, 26, 51, .06);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.v-panel__rows li:hover {
	transform: translateY(-1px);
	box-shadow: 0 .4rem 1rem rgba(4, 26, 51, .1);
}

.v-panel__row-name {
	flex: 0 0 auto;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.2;
	color: #0b3a67;
}

.v-panel__spark {
	width: 2.75rem;
	height: 1.5rem;
	flex: 0 0 2.75rem;
	display: flex;
	align-items: center;
}

.v-panel__spark svg {
	display: block;
	width: 2.75rem;
	height: 1.5rem;
}

.v-panel__row-value {
	margin-left: auto;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: #07335d;
	white-space: nowrap;
}

.v-panel__row-delta {
	min-width: 2.8125rem;
	padding: .2rem .4rem;
	border-radius: .375rem;
	text-align: center;
	font-family: var(--font);
	font-size: .7rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

.v-panel__row-delta.is-up {
	background: #e6f3df;
	color: #4b922d;
}

.v-panel__row-delta.is-down {
	background: #fdeaea;
	color: #d9534f;
}

.v-hero__right {
	display: flex;
	justify-content: flex-end;
}

.v-hero__right .v-panel {
	margin-left: auto;
}

/* ------------------------------------------------- frosted stats panel */
.v-hero__statsbar {
	position: relative;
	width: 61rem;
	margin: -10.5rem 1.9375rem 0 auto;
	padding: 1.75rem 2.25rem 1.5rem;
	display: grid;
	grid-template-columns: 19.25rem repeat(4, 1fr);
	align-items: flex-start;
	border-radius: var(--r-xl);
	background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100%);
	border: 1px solid rgba(255, 255, 255, .42);
	backdrop-filter: blur(10px);
	box-shadow: 0 1rem 2.5rem rgba(4, 20, 40, .18);
}
.v-hero__stats-title { font-size: 1.9375rem; font-weight: 600; line-height: 1.3; color: #fff; padding-right: 2rem; text-shadow: 0 1px 8px rgba(4, 20, 40, .35); }
.v-hero__stats-title span { color: #0c3a6b; }
.v-stats { display: contents; }
.v-stats__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem; padding-inline: .75rem; text-align: center; }
.v-stats__item::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: .25rem; width: 1px; background: rgba(255, 255, 255, .3); }
.v-stats__ico {
	width: 4.75rem; height: 4.75rem;
	border-radius: 50%; background: #fff;
	display: grid; place-items: center;
	color: var(--ink);
	box-shadow: 0 .35rem 1rem rgba(4, 26, 51, .18);
}
.v-stats__ico .v-ico { width: 2.375rem; height: 2.375rem; }
.v-stats__num { font-size: 1.5rem; font-weight: 700; color: #8ecb52; text-shadow: 0 1px 6px rgba(4, 20, 40, .35); }
.v-stats__label { font-size: .9375rem; line-height: 1.25; color: #fff; max-width: 8rem; text-shadow: 0 1px 6px rgba(4, 20, 40, .4); }

/* ==========================================================================
   ABOUT — heading row, then tiles + copy on one row
   ========================================================================== */
.v-about { background: var(--bg); padding-block: 4.375rem 5rem; }
.v-about__head { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; margin-bottom: 2.5rem; }
.v-about__title { max-width: 44rem; }
.v-about__since { display: inline-block; margin-left: .75rem; font-size: var(--fs-lead); font-weight: 400; color: var(--green); }

.v-about__row { display: grid; grid-template-columns: 65.375rem 1fr; gap: 3rem; align-items: start; }
.v-about__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.v-about__body { font-size: var(--fs-body); line-height: 1.6; }

.v-tile { position: relative; }
.v-tile__link { position: relative; display: block; aspect-ratio: 338 / 206; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.v-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.v-tile__link:hover .v-tile__img { transform: scale(1.06); }
.v-tile__shade { position: absolute; inset: auto 0 0; height: 4.5625rem; background: linear-gradient(180deg, rgba(4, 20, 40, 0) 0%, rgba(4, 20, 40, .86) 55%, rgba(4, 20, 40, .93) 100%); }
.v-tile__pill {
	position: absolute; top: .875rem; right: .9375rem;
	display: inline-flex; align-items: center; justify-content: center;
	height: 1.6875rem; padding-inline: 1rem;
	border-radius: var(--r-pill); background: rgba(255, 255, 255, .92);
	color: var(--ink); font-size: .875rem; font-weight: 500;
}
.v-tile__link:hover .v-tile__pill { background: var(--green); color: #fff; }
.v-tile__title { position: absolute; left: 1.25rem; bottom: 1rem; right: 1rem; font-size: 1.5rem; font-weight: 500; color: #fff; line-height: 1.2; }

/* ==========================================================================
   WHY CHOOSE VISTA
   ========================================================================== */
.v-why { background: linear-gradient(100deg, #e8eaec 0%, #f4f5f6 18%, #fdfdfd 46%, #f7f8f9 100%); padding-block: 3rem 4.1875rem; }
.v-why__grid { display: grid; grid-template-columns: 41.5625rem 1fr; gap: 8.625rem; }
.v-why__left .v-h2 { max-width: 41.4375rem; margin-bottom: 3rem; }
.v-why__list { display: flex; flex-direction: column; gap: 2.125rem; }
.v-why__item { display: grid; grid-template-columns: 1.5rem 1fr; gap: .875rem; }
.v-why__bullet { width: .625rem; height: .625rem; margin-top: .7rem; border-radius: 50%; background: var(--green); }
.v-why__item-title { font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.v-why__item-text { font-size: var(--fs-sm); line-height: 1.5; color: var(--body); max-width: 40rem; }

.v-why__right { padding-top: 2.0625rem; }
.v-why__media { position: relative; height: 42.125rem; }
.v-why__img { position: absolute; border-radius: var(--r-md); object-fit: cover; box-shadow: var(--sh-2); }
.v-why__img--a { top: 0; left: 0; width: 42.3125rem; height: 26.875rem; }
.v-why__img--b { top: 12.9375rem; left: 33.3125rem; width: 26.375rem; height: 29.1875rem; }
.v-why__card {
	position: absolute; top: 24.6875rem; left: 9.5rem;
	width: 30.5625rem;
	padding: 1.125rem 2rem 1.375rem;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(8px);
	border-radius: var(--r-md);
	box-shadow: var(--sh-2);
	display: flex; flex-direction: column; gap: .375rem;
}
.v-why__card strong { font-size: 1.375rem; font-weight: 600; color: var(--green); }
.v-why__card span { font-size: var(--fs-xs); line-height: 1.5; color: var(--body); }
.v-why__cta { margin-top: 2.25rem; margin-left: 5.4375rem; }

/* ==========================================================================
   WHO WE SERVE
   ========================================================================== */
.v-sectors {
	background:
		radial-gradient(72% 78% at 34% 26%, #0d3a68 0%, rgba(13, 58, 104, 0) 68%),
		linear-gradient(155deg, #0b3460 0%, #072a55 42%, #091f3a 100%);
	padding-block: 4.375rem 5.625rem;
	color: #fff;
}
.v-sectors__head { text-align: center; margin-bottom: 2.5rem; }
.v-sectors__head .v-h2 { max-width: 70rem; margin-inline: auto; }

.v-tabs { position: relative; }
.v-tabs__frame {
	position: absolute; inset: 1.6875rem 0 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--r-xl);
	pointer-events: none;
}
.v-tabs__bar {
	position: relative; z-index: 2;
	display: flex; justify-content: space-between; align-items: center; gap: .5rem;
	width: min(100%, 96rem);
	margin: 0 auto 3.25rem;
	padding: .3125rem;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, rgba(12, 48, 88, .96) 0%, rgba(10, 40, 74, .96) 100%);
	border: 1px solid rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
	overflow-x: auto;
	scrollbar-width: none;
}
.v-tabs__bar::-webkit-scrollbar { display: none; }
.v-tabs__btn {
	flex: 0 0 auto;
	height: 3rem; padding-inline: 2rem;
	border-radius: var(--r-pill);
	color: rgba(220, 233, 245, .82);
	font-size: var(--fs-xs); font-weight: 400;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: all .3s var(--ease);
}
.v-tabs__btn:hover { color: #fff; }
.v-tabs__btn.is-active {
	background: linear-gradient(180deg, #123a63 0%, #0d2b4a 100%);
	border-color: rgba(255, 255, 255, .3);
	color: #fff; font-weight: 500;
}
.v-tabs__panel[hidden] { display: none; }
.v-tabs__panel { position: relative; z-index: 1; padding: 0 2.5rem 2.5rem; animation: v-fade .45s var(--ease); }
@keyframes v-fade { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }

.v-sectors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.75rem; }
.v-sector {
	position: relative;
	padding: 2.5rem 1.75rem 2.25rem;
	border-radius: var(--r-md);
	background: linear-gradient(160deg, rgba(255, 255, 255, .095) 0%, rgba(255, 255, 255, .035) 100%);
	border: 1px solid rgba(255, 255, 255, .1);
	transition: transform .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.v-sector::before {
	content: "";
	position: absolute; top: -.1875rem; left: 2.375rem;
	width: 5.375rem; height: .4375rem;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, #4a7fae, #7fa9cc);
}
.v-sector:hover { transform: translateY(-6px); border-color: rgba(116, 182, 67, .5); background: rgba(116, 182, 67, .07); }
.v-sector__ico {
	width: 3.375rem; height: 3.375rem;
	display: grid; place-items: center;
	border-radius: .625rem;
	background: linear-gradient(160deg, #eef4fa, #d6e4f0);
	color: var(--ink);
	margin-bottom: 1.375rem;
	box-shadow: 0 .25rem .75rem rgba(4, 26, 51, .25);
}
.v-sector__ico .v-ico { width: 1.875rem; height: 1.875rem; }
.v-sector__title { font-size: 1.4375rem; font-weight: 600; color: #fff; margin-bottom: .625rem; }
.v-sector__text { font-size: var(--fs-xs); line-height: 1.55; color: rgba(214, 228, 240, .68); }

/* ==========================================================================
   OUR PROCESS
   ========================================================================== */
.v-process { background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 40%, #f1f2f4 100%); padding-block: 4rem 4.25rem; }
.v-process__head { display: grid; grid-template-columns: 1fr 42.125rem; gap: 4rem; padding-left: 8.375rem; align-items: start; }
.v-process__head-left .v-h2 { margin: .25rem 0 2.25rem; }
.v-process__head-right { padding-top: 2.75rem; }
.v-process__head-right .v-lead { max-width: 42.125rem; }

.v-timeline { position: relative; width: 95.625rem; margin: -2.375rem auto 0; }
.v-timeline__spine { position: absolute; left: 50%; top: -3.5rem; bottom: -1.5rem; width: 0; translate: -50% 0; border-left: 2px dashed #b7cfe4; }
.v-timeline__badge {
	position: absolute; left: 50%; top: -6.25rem; translate: -50% 0;
	width: 4.25rem; height: 4.25rem;
	display: grid; place-items: center; border-radius: 50%;
	background: linear-gradient(150deg, #86c44f, var(--green-7));
	color: #fff; font-size: 1.25rem; font-weight: 500;
	box-shadow: 0 .5rem 1.25rem rgba(78, 142, 35, .32);
}
.v-timeline__list { display: flex; flex-direction: column; gap: 1rem; }

.v-step { position: relative; display: grid; grid-template-columns: 43.75rem 43.75rem; column-gap: 8.125rem; }
.v-step--left .v-step__card { grid-column: 1; }
.v-step--right .v-step__card { grid-column: 2; }
.v-step__dot {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%;
	width: 1.375rem; height: 1.375rem; border-radius: 50%;
	background: linear-gradient(150deg, #86c44f, var(--green-7));
	box-shadow: 0 0 0 .25rem rgba(116, 182, 67, .18);
}
.v-step__dot::after { content: ""; position: absolute; top: 50%; width: 3.5rem; height: 1px; translate: 0 -50%; }
.v-step--right .v-step__dot::after { left: 100%; background: linear-gradient(90deg, var(--green), rgba(116, 182, 67, 0)); }
.v-step--left .v-step__dot::after { right: 100%; background: linear-gradient(270deg, var(--green), rgba(116, 182, 67, 0)); }

.v-step__card {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: 6.75rem; padding: 1.375rem 1.5rem;
	background: var(--step-tint);
	border-radius: var(--r-md);
	box-shadow: 0 .5rem 1.5rem rgba(8, 49, 90, .05);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.v-step--left .v-step__card { background: linear-gradient(270deg, #eaf3fb 0%, #f4f5f7 42%, #f2f3f5 100%); }
.v-step__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.v-step__pill { flex: 0 0 15.75rem; height: 3.875rem; display: flex; align-items: center; gap: 1.25rem; padding-inline: 1.25rem; border-radius: var(--r-pill); background: #fff; }
.v-step__num { font-size: 2.625rem; font-weight: 300; color: var(--num-blue); line-height: 1; letter-spacing: -.02em; }
.v-step__name { font-size: 1.5rem; font-weight: 600; color: var(--green-6); }
.v-step__desc { font-size: var(--fs-sm); color: var(--body); }

/* ==========================================================================
   PROBLEMS WE SOLVE
   ========================================================================== */
.v-problems { position: relative; color: #fff; background: #021329; padding-block: 2.25rem 3.5rem; overflow: hidden; isolation: isolate; }
.v-problems__bg { position: absolute; inset: 0; z-index: -1; }
.v-problems__bg img { width: 100%; height: 100%; object-fit: cover; }
.v-problems__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 15, 34, .72) 0%, rgba(2, 15, 34, .3) 24%, rgba(2, 15, 34, .5) 42%, rgba(2, 17, 38, .92) 58%, rgba(2, 17, 38, .97) 100%); }
.v-problems__grid { display: grid; grid-template-columns: 1fr 65.375rem; align-items: stretch; }
.v-problems__left { display: flex; flex-direction: column; padding-top: .5rem; padding-right: 3rem; }
.v-problems__left .v-h2 { font-size: var(--fs-h2-xl); max-width: 46.5rem; line-height: 1.26; font-weight: 600; }
.v-problems__left .v-h2 span { color: var(--green); }
.v-problems__cta { margin-top: auto; align-self: flex-start; }

.v-problems__list { display: flex; flex-direction: column; gap: 1.5rem; }
.v-problem {
	display: grid;
	grid-template-columns: 6.0625rem minmax(0, 1fr) 8.125rem 20.5rem;
	align-items: center; gap: 0 1.625rem;
	min-height: 10.125rem;
	padding: 1.25rem 1.5rem 1.25rem 1.875rem;
	border-radius: var(--r-md);
	background: linear-gradient(120deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
	border: 1px solid rgba(255, 255, 255, .08);
	transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.v-problem:hover { background: rgba(255, 255, 255, .09); border-color: rgba(116, 182, 67, .38); transform: translateX(4px); }
.v-problem__ico {
	width: 6.0625rem; height: 6rem;
	display: grid; place-items: center; border-radius: 50%;
	background: linear-gradient(155deg, #86c44f 0%, var(--green-7) 100%);
	color: #fff;
	box-shadow: 0 .5rem 1.25rem rgba(78, 142, 35, .28);
}
.v-problem__ico .v-ico { width: 2.75rem; height: 2.75rem; }
.v-problem__q { font-size: 1.625rem; font-weight: 400; color: #fff; line-height: 1.32; }
.v-problem__arrow { color: var(--arrow); width: 8.125rem; justify-self: center; }
.v-problem__arrow svg { width: 100%; height: auto; }
.v-problem__pill {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; height: 4.9375rem;
	border-radius: var(--r-pill);
	background: linear-gradient(120deg, #7cbf45 0%, #5da12c 55%, var(--green-7) 100%);
	color: #fff; font-size: var(--fs-sm); font-weight: 500; text-align: center;
	box-shadow: 0 .5rem 1.5rem rgba(78, 142, 35, .28);
	transition: filter .3s var(--ease), transform .3s var(--ease);
}
.v-problem__pill:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.v-services { background: var(--bg); padding-block: 5.25rem 5.5rem; }
.v-services .v-shell { width: 101.875rem; }
.v-services__head { display: grid; grid-template-columns: 1fr 42.125rem; gap: 4rem; align-items: end; padding-inline: 2.625rem; margin-bottom: 1.75rem; }
.v-services__head .v-lead { max-width: 42.125rem; padding-bottom: .25rem; }

.v-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 3.125rem; row-gap: 2.25rem; align-items: stretch; }

.v-card {
	position: relative;
	margin-top: 4.25rem;
	padding: 0 1.875rem 2rem;
	border-radius: var(--r-lg);
	background: var(--card-tint);
	display: flex; flex-direction: column;
	min-height: 24.9375rem;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.v-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2);   background: linear-gradient(
        90deg,
        #5DBAF1 0%,
        #EFEFF4 50%,
        #D5F2FF 100%
    ); }
.v-card__media {
	margin: -4.25rem 2.5rem 0 -.5rem;
	border-radius: 1.375rem;
	overflow: hidden;
	background: #fff;
	border: .5rem solid #fff;
	box-shadow: 0 .75rem 2rem rgba(8, 49, 90, .1);
	aspect-ratio: 265 / 169;
}
.v-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: .875rem; transition: transform .7s var(--ease); }
.v-card:hover .v-card__media img { transform: scale(1.06); }
.v-card__title { font-size: var(--fs-h3); font-weight: 600; color: var(--green-6); line-height: 1.25; margin: 1.75rem 0 .75rem; }
.v-card__text { font-size: var(--fs-sm); line-height: 1.45; color: var(--body); }
.v-card .v-card__more { margin: auto 0 0 auto; }

.v-promo { position: relative; grid-column: span 2; align-self: start; margin-top: 4.25rem; min-height: 30.25rem; border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: center; isolation: isolate; }
.v-promo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.v-promo__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6, 33, 62, .95) 0%, rgba(6, 33, 62, .8) 42%, rgba(6, 33, 62, .28) 78%, rgba(6, 33, 62, .1) 100%); }
.v-promo__body { padding: 2.4375rem 2.1875rem; max-width: 32rem; }
.v-promo__title { font-size: 1.875rem; font-weight: 500; line-height: 1.34; color: #fff; margin-bottom: 2rem; }

/* ==========================================================================
   FEATURE ROWS
   ========================================================================== */
.v-feature { padding-block: 5.0625rem 3.9375rem; }
.v-feature--a { background: var(--bg); }
.v-feature--b { background: var(--bg-3); }
.v-feature__grid { display: grid; grid-template-columns: 1fr 48.8125rem; gap: 14.25rem; align-items: start; }
.v-feature--left .v-feature__grid { grid-template-columns: 48.625rem 1fr; }
.v-feature--left .v-feature__text { order: 2; }
.v-feature--left .v-feature__media { order: 1; }

.v-feature__text .v-h2 { max-width: 43.8125rem; margin-bottom: 1.375rem; font-weight: 600; }
.v-feature__text p { font-size: 1.375rem; line-height: 1.6; margin-bottom: 1rem;  }
.v-feature__text p:last-child { margin-bottom: 0; }

.v-feature__media { position: relative; }
.v-feature__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); object-fit: cover; }
.v-feature__cta { position: absolute; bottom: 1.75rem; left: 2.125rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.v-faq { background: var(--bg); padding-block: 4rem 5rem; }
.v-faq__head { text-align: center; max-width: 56rem; margin: 0 auto 2.25rem; }
.v-faq__head .v-h2 { margin-bottom: 1.25rem; }
.v-faq__head .v-lead { max-width: 42.125rem; margin-inline: auto; }

.v-accordion { width: 65.6875rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1.5625rem; }
.v-acc__item { background: var(--faq-tint); border-radius: var(--r-lg); box-shadow: 0 .5rem 1.5rem rgba(8, 49, 90, .05); overflow: hidden; transition: box-shadow .3s var(--ease); }
.v-acc__item.is-open { box-shadow: var(--sh-2); }
.v-acc__h { margin: 0; }
.v-acc__btn {
	width: 100%;
	display: grid; grid-template-columns: 4rem auto 1fr 2.5rem;
	align-items: center; gap: 0 1.25rem;
	min-height: 6.75rem; padding: 1.25rem 1.75rem 1.25rem 1.4375rem;
	text-align: left;
}
.v-acc__num { font-size: 2.5rem; font-weight: 300; color: var(--green-soft); line-height: 1; }
.v-acc__item.is-open .v-acc__num { color: var(--green-6); }
.v-acc__rule { width: 2px; height: 3.375rem; background: var(--green-soft); border-radius: 2px; }
.v-acc__q { font-size: var(--fs-sm); font-weight: 400; color: var(--body); line-height: 1.35; }
.v-acc__item.is-open .v-acc__q { color: var(--ink); font-weight: 500; }
.v-acc__ico { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--green-6); justify-self: end; }
.v-acc__ico .v-ico { width: 1.75rem; height: 1.75rem; }
.v-acc__minus { display: none; }
.v-acc__item.is-open .v-acc__plus { display: none; }
.v-acc__item.is-open .v-acc__minus { display: inline-flex; }

.v-acc__panel[hidden] { display: none; }
.v-acc__body { padding: 0 4.25rem 2rem 9.5rem; }
.v-acc__body p { font-size: var(--fs-xs); line-height: 1.65; color: var(--body); }

.v-faq__cta { text-align: center; margin-top: 3.25rem; }
.v-faq__cta-title { font-size: 2.125rem; font-weight: 600; color: var(--ink); line-height: 1.3; max-width: 32rem; margin: 0 auto 1.75rem; }
.v-faq__cta-title span { color: var(--green); }

/* ==========================================================================
   TESTIMONIALS — light
   ========================================================================== */
.v-quotes { background: var(--bg); padding-block: 4.375rem 5.5rem; overflow: hidden; }
.v-quotes__head { display: grid; grid-template-columns: 1fr 42.125rem; gap: 4rem; align-items: start; margin-bottom: 3rem; }
.v-quotes__title { font-size: 3.125rem; line-height: 1.24; max-width: 43.625rem; color: var(--ink); font-weight: 700; }
.v-quotes__title span { display: inline-block; padding-left: 1.375rem; }
.v-quotes__aside { display: flex; flex-direction: column; gap: 1.75rem; }
.v-quotes__lead { font-size: var(--fs-body); line-height: 1.6; color: var(--body); }
.v-quotes__nav { display: flex; gap: 1.125rem; justify-content: flex-end; }

.v-quotes__viewport { width: 100%; padding-left: max(1.5rem, calc((100% - var(--shell)) / 2 + 1.6875rem)); overflow: hidden; }
.v-quotes__track { display: flex; gap: 1.75rem; transition: transform .6s var(--ease); will-change: transform; }
.v-quote { flex: 0 0 25.3125rem; min-height: 27rem; padding: 2.5rem 2.125rem 2.25rem; border-radius: var(--r-xl); background: var(--quote-tint); display: flex; flex-direction: column; gap: 1.75rem; }
.v-quote__mark { color: var(--green-soft); width: 3.25rem; }
.v-quote__mark .v-ico { width: 3.25rem; height: 2.4375rem; }
.v-quote__text { font-size: var(--fs-sm); line-height: 1.6; color: #4c5760; flex: 1; }
.v-quote__by { display: flex; align-items: center; gap: .875rem; margin: 0; }
.v-quote__by img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.v-quote__by figcaption { display: flex; flex-direction: column; }
.v-quote__by strong { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); }
.v-quote__by span { font-size: 1.0625rem; color: var(--steel); }

/* ==========================================================================
   CONNECT + FOOTER
   ========================================================================== */
.v-footer { background: linear-gradient(180deg, #0c3560 0%, #082345 55%, #07264b 100%); padding-bottom: 2.375rem; color: #fff; }
.v-footer .v-shell, .v-connect .v-shell { width: var(--shell-n); }

.v-connect { padding-block: 3.75rem 4.5rem; }
.v-connect__card {
	position: relative;
	min-height: 40.0625rem;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1.75rem 4rem rgba(2, 15, 34, .34);
	isolation: isolate;
	display: flex; align-items: center;
}
.v-connect__bg { position: absolute; inset: 0; z-index: -2; }
.v-connect__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.v-connect__veil {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(96deg,
		rgba(255, 255, 255, .99) 0%,
		rgba(255, 255, 255, .97) 26%,
		rgba(255, 255, 255, .72) 38%,
		rgba(255, 255, 255, .12) 52%,
		rgba(255, 255, 255, 0) 62%);
}
.v-connect__body { padding: 3.75rem 4.9375rem; max-width: 46rem; }
.v-connect__title { font-size: 3.4375rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--green-6); }
.v-connect__sub { font-size: 1.4375rem; font-weight: 400; color: var(--green-6); margin-top: .5rem; }
.v-connect__text { font-size: var(--fs-body); line-height: 1.62; color: #3f4a55; margin: 2.25rem 0 2.75rem; max-width: 34rem; }

/* footer grid ------------------------------------------------------------- */
.v-footer__rule { height: 1px; background: rgba(255, 255, 255, .14); }
.v-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .78fr) minmax(0, 1.08fr) minmax(0, 1fr); padding-block: 4.5rem 3rem; gap: 2rem; width: 100%; max-width: 100%; box-sizing: border-box; }
.v-footer__logo { margin-bottom: 2.75rem; }
.v-footer__logo .v-logo { display: inline-block; padding: .75rem 1.125rem; background: #fff; border-radius: var(--r-sm); box-shadow: 0 .5rem 1.5rem rgba(2, 15, 34, .25); }
.v-footer__logo img { width: 7.5rem; }
.v-footer__blurb { font-size: var(--fs-sm); line-height: 1.5; color: rgba(226, 236, 246, .86); max-width: 30.625rem; margin-bottom: 2.25rem; }
.v-footer__col--brand .v-btn { --h: 3.6875rem; --pad: 1.5rem; --badge: 2.875rem; font-size: 1.375rem; }

.v-footer__title { font-size: 1.4375rem; font-weight: 600; color: #fff; margin-bottom: 1.5rem; }
.v-footer__list { display: flex; flex-direction: column; gap: 1rem; }
.v-footer__list a, .v-footer__list .v-nav__link { font-size: 1.1875rem; color: rgba(206, 221, 236, .84); transition: color .25s var(--ease), padding-left .25s var(--ease); }
.v-footer__list a:hover, .v-footer__list .v-nav__link:hover { color: var(--green); padding-left: .25rem; }
.v-footer__list .v-nav__link::after { display: none; }

.v-contact { display: flex; flex-direction: column; gap: 1.375rem; }
.v-contact__item { display: grid; grid-template-columns: 2.1875rem 1fr; gap: .9375rem; }
.v-contact__ico { width: 2.1875rem; height: 2.1875rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(150deg, #86c44f, var(--green-7)); color: #fff; }
.v-contact__ico .v-ico { width: 1.0625rem; height: 1.0625rem; }
.v-contact__body { display: flex; flex-direction: column; gap: .05rem; }
.v-contact__label { font-size: 1.1875rem; font-weight: 600; color: #fff; }
.v-contact__role { font-size: 1rem; color: rgba(178, 198, 218, .8); }
.v-contact__value { font-size: 1.1875rem; color: rgba(216, 230, 244, .9); word-break: break-word; }
a.v-contact__value:hover { color: var(--green); }

.v-footer__social { display: flex; align-items: center; gap: 2rem; padding-bottom: 2.25rem; }
.v-footer__social-label { font-size: 1.4375rem; font-weight: 600; color: #fff; }
.v-social { display: flex; gap: .75rem; }
.v-social a { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.v-social .v-ico { width: 1.1875rem; height: 1.1875rem; }
.v-social a:hover { background: var(--green); color: #fff; transform: translateY(-3px); }

.v-footer__legal { padding-top: 1.5rem; text-align: center; font-size: 1rem; color: rgba(178, 198, 218, .72); max-width: 80.5rem; margin-inline: auto; }

/* ==========================================================================
   FLOATING UI
   ========================================================================== */
/* ==========================================================================
   FLOATING SOCIAL MEDIA RAIL
   ========================================================================== */

.v-rail {
	position: fixed;
	right: 1rem;
	top: 8.5rem;
	z-index: 80;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;

	width: 3rem;
	padding: .4rem .3rem;

	border-radius: 2rem;
	background: linear-gradient(
	90deg,
	#08284F 0%,
	#034870 47%,
	#00668E 100%
);
	border: 2px solid rgba(255, 255, 255, .9);

	box-shadow:
		0 .4rem 1rem rgba(4, 26, 51, .2),
		inset 0 0 0 1px rgba(8, 49, 90, .08);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Social buttons */
.v-rail:not(.v-rail--b) .v-rail__btn {
	width: 2.25rem;
	height: 2.25rem;

	display: grid;
	place-items: center;

	flex: 0 0 2.25rem;

	border-radius: 50%;

	background: #1F76A5!important;
	color: #fff;

	box-shadow:
		0 .15rem .35rem rgba(4, 26, 51, .2),
		inset 0 1px 0 rgba(255, 255, 255, .18);

	transition:
		transform .25s var(--ease),
		filter .25s var(--ease),
		background .25s var(--ease);
}

/* Individual social colours */
.v-rail:not(.v-rail--b) .v-rail__btn:nth-child(1) {
	background: #0a66c2;
}

.v-rail:not(.v-rail--b) .v-rail__btn:nth-child(2) {
	background: #087dbb;
}

.v-rail:not(.v-rail--b) .v-rail__btn:nth-child(3) {
	background: #1F76A5;
}

/* Icons */
.v-rail:not(.v-rail--b) .v-rail__btn .v-ico {
	width: 1.25rem;
	height: 1.25rem;
}

/* Hover */
.v-rail:not(.v-rail--b) .v-rail__btn:hover {
	transform: scale(1.08);
	filter: brightness(1.1);
}

/* ==========================================================================
   CALL / WHATSAPP RAIL
   ========================================================================== */

.v-rail--b {
	top: auto;
	bottom: 5.5rem;

	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	width: auto;
	gap: .5rem;
}

.v-rail--b .v-rail__btn {
	width: 2.875rem;
	height: 2.875rem;

	display: grid;
	place-items: center;

	border-radius: 50%;

	background: linear-gradient(
		150deg,
		#86c44f 0%,
		var(--green-7) 100%
	);

	color: #fff;

	box-shadow:
		0 .5rem 1.25rem rgba(2, 15, 34, .22);
}

.v-rail--b .v-rail__btn .v-ico {
	width: 1.25rem;
	height: 1.25rem;
}

.v-rail--b .v-rail__btn:hover {
	transform: translateX(-3px);
	filter: brightness(1.08);
}
/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.v-pagehead { background: linear-gradient(150deg, #0b3460 0%, #072a55 48%, #091f3a 100%); color: #fff; padding-block: 4.5rem 4rem; }
.v-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 4rem; padding-block: 4rem 5rem; }
.v-layout__aside .widget { margin-bottom: 2.5rem; }
.widget-title { font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-bottom: 1rem; }

.v-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 2.5rem; }
.v-post { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.v-post__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.v-post__body { padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.v-post__meta { font-size: 1rem; color: var(--muted); }
.v-post__title { font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.v-post__title a:hover { color: var(--green-7); }
.v-post__excerpt { font-size: var(--fs-xs); }
.v-post .v-card__more { margin-top: auto; align-self: flex-start; }

.v-prose { font-size: var(--fs-xs); line-height: 1.75; }
.v-prose h1, .v-prose h2, .v-prose h3, .v-prose h4 { color: var(--ink); font-weight: 600; line-height: 1.25; margin: 2.25rem 0 1rem; }
.v-prose h2 { font-size: 2.25rem; }
.v-prose h3 { font-size: 1.75rem; }
.v-prose p, .v-prose ul, .v-prose ol { margin-bottom: 1.25rem; }
.v-prose ul, .v-prose ol { padding-left: 1.5rem; list-style: disc; }
.v-prose ol { list-style: decimal; }
.v-prose a { color: var(--green-7); text-decoration: underline; }
.v-prose img { border-radius: var(--r-md); }
.v-prose blockquote { border-left: 3px solid var(--green); padding-left: 1.5rem; font-size: 1.5rem; color: var(--ink); margin: 2rem 0; }
.v-prose__hero { margin-bottom: 2rem; }
.v-empty { font-size: var(--fs-lead); margin-bottom: 1.5rem; }

.v-search { display: flex; gap: .5rem; max-width: 26rem; }
.v-search input { flex: 1; height: 3rem; padding-inline: 1rem; border: 1px solid var(--line); border-radius: var(--r-pill); font: inherit; font-size: 1.25rem; }
.v-search button { width: 3rem; height: 3rem; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.v-search .v-ico { width: 1.15rem; height: 1.15rem; }

.pagination, .comments-pagination { display: flex; gap: .5rem; margin-top: 3rem; }
.pagination .page-numbers, .comments-pagination .page-numbers { min-width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 1.25rem; color: var(--ink); }
.pagination .current { background: var(--green); border-color: var(--green); color: #fff; }

.v-comments { margin-top: 4rem; }
.v-comments__title { font-size: 1.75rem; color: var(--ink); margin-bottom: 1.5rem; }
.v-comments ol { list-style: none; }
.v-comments .comment-body { padding: 1.5rem 0; border-bottom: 1px solid var(--line-2); }
.comment-form input, .comment-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 1.25rem; margin-top: .35rem; }
.comment-form .submit { width: auto; background: var(--green); border: 0; border-radius: var(--r-pill); padding: .85rem 2rem; font-weight: 600; color: #fff; cursor: pointer; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.v-js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.v-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.v-js [data-reveal] { opacity: 1 !important; transform: none !important; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   RESPONSIVE
   Root font-size already shrinks the whole composition; these rules change
   the *layout* where a desktop arrangement stops working.
   ========================================================================== */

/* ------------------------------------------------------- ≤ 1500px */
@media (max-width: 1500px) {
	.v-nav__list { gap: 2.5rem; }
	.v-tabs__btn { padding-inline: 1.375rem; }
}

/* ------------------------------------------------------- ≤ 1199px : tablet */
@media (max-width: 1199px) {
	.v-shell, .v-services .v-shell, .v-footer .v-shell, .v-connect .v-shell,
	.v-header__inner { width: 100%; max-width: calc(100% - 3.5rem); }

	/* hero ------------------------------------------------------------- */
	.v-hero { padding-bottom: 3.5rem; }
	.v-hero__inner { grid-template-columns: 1fr; padding: 3.25rem 0 0; gap: 2.5rem; }
	.v-hero__scrim {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .94) 46%, rgba(255, 255, 255, .8) 72%, rgba(255, 255, 255, .68) 100%);
	}
	.v-hero__title, .v-hero__intro { max-width: 100%; }
	.v-panel { width: min(28.5625rem, 100%); margin-top: 0; }
	.v-panel__grid { grid-template-columns: minmax(0, 1fr) 10rem; }
	.v-panel__donut { width: 10rem; height: 10rem; flex-basis: 10rem; }
	.v-hero__statsbar { width: 100%; margin: 2.5rem 0 0; grid-template-columns: 1fr; gap: 1.75rem; padding: 1.75rem;  border-color: rgba(255, 255, 255, .2); }
	.v-hero__stats-title { padding: 0; }
	.v-hero__stats-title span { color: var(--green); }
	.v-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
	.v-stats__item::before { display: none; }

	/* about ------------------------------------------------------------ */
	.v-about__head { grid-template-columns: 1fr; gap: 1.75rem; }
	.v-about__row { grid-template-columns: 1fr; gap: 2rem; }

	/* why -------------------------------------------------------------- */
	.v-why__grid { grid-template-columns: 1fr; gap: 2.75rem; }
	.v-why__right { padding-top: 0; }
	.v-why__media { height: auto; display: grid; grid-template-columns: 1fr; gap: 1rem; }
	.v-why__img { position: static; width: 100% !important; height: auto !important; aspect-ratio: 16/10; }
	.v-why__img--b { display: none; }
	.v-why__card { position: static; width: 100%; }
	.v-why__cta { margin-left: 0; }

	/* sectors ---------------------------------------------------------- */
	.v-sectors__grid { grid-template-columns: repeat(2, 1fr); }
	.v-tabs__frame { display: none; }
	.v-tabs__bar { justify-content: flex-start; margin-bottom: 2.25rem; }
	.v-tabs__panel { padding: 0; }

	/* process ---------------------------------------------------------- */
	.v-process__head { grid-template-columns: 1fr; padding-left: 0; gap: 1.25rem; }
	.v-process__head-right { padding-top: 0; }
	.v-timeline { width: 100%; margin-top: 3.5rem; }
	.v-timeline__spine { left: .6875rem; top: 0; }
	.v-timeline__badge { display: none; }
	.v-step { grid-template-columns: 1fr; column-gap: 0; padding-left: 3.25rem; }
	.v-step--left .v-step__card, .v-step--right .v-step__card { grid-column: 1; }
	.v-step__dot { left: .6875rem; top: 2.75rem; translate: -50% 0; }
	.v-step__dot::after { display: none; }
	.v-step__card, .v-step--left .v-step__card { flex-wrap: wrap; gap: 1rem; background: var(--step-tint); }
	.v-step__pill { flex: 0 0 auto; }

	/* problems --------------------------------------------------------- */
	.v-problems__grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.v-problems__scrim { background: linear-gradient(180deg, rgba(2, 15, 34, .78) 0%, rgba(2, 17, 38, .93) 40%, rgba(2, 17, 38, .97) 100%); }
	.v-problems__cta { margin-top: 1.5rem; }
	.v-problem { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0 1.25rem; min-height: 0; padding: 1.25rem; }
	.v-problem__ico { width: 4.5rem; height: 4.5rem; }
	.v-problem__ico .v-ico { width: 2rem; height: 2rem; }
	.v-problem__arrow { display: none; }
	.v-problem__pill { width: auto; min-width: 15rem; height: 3.5rem; padding-inline: 1.5rem; }

	/* services --------------------------------------------------------- */
	.v-services__head { grid-template-columns: 1fr; padding-inline: 0; gap: 1rem; }
	.v-services__grid { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; row-gap: 2rem; }
	.v-promo { grid-column: span 2; }

	/* features --------------------------------------------------------- */
	.v-feature__grid, .v-feature--left .v-feature__grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.v-feature--left .v-feature__text { order: 1; }
	.v-feature--left .v-feature__media { order: 2; }
	.v-feature__text .v-h2, .v-feature__text p { max-width: 100%; }
	.v-feature__cta { position: static; margin-top: 1.5rem; }

	/* faq -------------------------------------------------------------- */
	.v-accordion { width: 100%; }
	.v-acc__btn { grid-template-columns: 3rem auto 1fr 2.25rem; min-height: 0; padding: 1.5rem 1.25rem; gap: 0 1rem; }
	.v-acc__num { font-size: 2rem; }
	.v-acc__rule { height: 2.5rem; }
	.v-acc__body { padding: 0 1.5rem 1.75rem 5.25rem; }

	/* quotes ----------------------------------------------------------- */
	.v-quotes__head { grid-template-columns: 1fr; gap: 1.75rem; }
	.v-quotes__nav { justify-content: flex-start; }
	.v-quotes__viewport { padding-left: max(1.75rem, calc((100% - min(100% - 3.5rem, var(--shell))) / 2)); }
	.v-quote { flex: 0 0 min(28rem, 78vw); }

	/* connect + footer -------------------------------------------------- */
	.v-connect__card { min-height: 0; }
	.v-connect__body { padding: 2.75rem 2.5rem; max-width: 100%; }
	.v-connect__bg img { object-position: 76% 50%; }
	.v-connect__veil { background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 62%, rgba(255, 255, 255, .5) 100%); }
	.v-connect__text { max-width: 100%; }
	.v-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; padding-block: 3rem 2rem; }
	.v-footer__col--brand { grid-column: 1 / -1; }

	.v-layout { grid-template-columns: 1fr; }
	.v-rail { display: none; }
}

/* ------------------------------------------------------- ≤ 960px : nav swap */
@media (max-width: 960px) {
	.v-header { height: 4.75rem; }
	.v-nav { display: none; }
	.v-burger { display: flex; }
	.v-header__actions .v-btn--xs { display: none; }

	.v-about__cards { grid-template-columns: 1fr 1fr; }
	.v-sectors__grid { grid-template-columns: 1fr; }
	.v-services__grid { grid-template-columns: 1fr; }
	.v-promo { grid-column: span 1; }
	.v-stats { grid-template-columns: repeat(2, 1fr); }
	.v-quotes__title span { padding-left: 0; }
}

/* ------------------------------------------------------- ≤ 640px : phone */
@media (max-width: 640px) {
	:root {
		--fs-h1: 3.25rem;
		--fs-h2: 2.375rem;
		--fs-h2-xl: 2.5rem;
		--fs-eyebrow: 1.5rem;
	}
	.v-shell, .v-services .v-shell, .v-footer .v-shell, .v-connect .v-shell,
	.v-header__inner { max-width: calc(100% - 2.5rem); }

	.v-btn { --pad: 1.5rem; --badge: 2.5rem; font-size: 1.375rem; }
	.v-btn--lg { --h: 4.25rem; --pad: 1.5rem; --badge: 3.125rem; font-size: 1.4375rem; }

	.v-about, .v-why, .v-sectors, .v-process, .v-services, .v-faq, .v-quotes, .v-feature, .v-connect { padding-block: 4rem; }

	.v-hero__inner { padding-top: 2.75rem; }
	.v-hero__follow { flex-wrap: wrap; }
	.v-panel {
		width: 100%;
		padding: 1.5rem 1.125rem 1.125rem;
		border-radius: 1.5rem;
	}

	.v-panel__grid {
		grid-template-columns: minmax(0, 1fr) 8rem;
		gap: .5rem;
	}

	.v-panel__eyebrow {
		font-size: .75rem;
		margin-bottom: .75rem;
	}

	.v-panel__value {
		font-size: 2.25rem;
	}

	.v-panel__delta {
		font-size: .75rem;
	}

	.v-panel__filters {
		margin-top: .875rem;
	}

	.v-panel__donut {
		width: 11rem;
		height: 11rem;
		flex-basis: 8rem;
	}

	.v-panel__legend {
		grid-template-columns: 1fr 1fr;
		gap: .6rem .75rem;
		margin-top: 1rem;
	}

	.v-panel__legend li {
		font-size: .75rem;
	}

	.v-panel__legend-name {
		white-space: normal;
	}

	.v-panel__row-name,
	.v-panel__row-value {
		font-size: .75rem;
	}

	.v-panel__row-delta {
		font-size: .65rem;
	}
	.v-hero__statsbar { padding: 1.5rem 1.25rem; }
	.v-stats__ico { width: 4rem; height: 4rem; }
	.v-stats__ico .v-ico { width: 2rem; height: 2rem; }

	.v-about__since { display: block; margin: .5rem 0 0; }
	.v-about__cards { grid-template-columns: 1fr; }
	.v-tabs__btn { height: 3.25rem; padding-inline: 1.25rem; }

	.v-card { margin-top: 3.5rem; padding: 0 1.5rem 1.75rem; min-height: 0; }
	.v-card__media { margin: -3.5rem 1.5rem 0 -.25rem; border-width: .375rem; }
	.v-card .v-card__more { margin: 1.5rem 0 0 auto; }
	.v-promo { margin-top: 2rem; min-height: 0; }
	.v-promo__body { padding: 2.25rem 1.5rem; max-width: 100%; }
	.v-promo__scrim { background: linear-gradient(180deg, rgba(6, 33, 62, .93) 0%, rgba(6, 33, 62, .78) 100%); }

	.v-problem { grid-template-columns: 3.75rem 1fr; row-gap: 1.25rem; }
	.v-problem__pill { grid-column: 1 / -1; width: 100%; }
	.v-problem__ico { width: 3.75rem; height: 3.75rem; }
	.v-problem__ico .v-ico { width: 1.75rem; height: 1.75rem; }

	.v-step { padding-left: 2.75rem; }
	.v-step__pill { width: 100%; flex: 1 1 100%; }

	.v-acc__btn { grid-template-columns: 2.75rem 1fr 2rem; }
	.v-acc__rule { display: none; }
	.v-acc__body { padding: 0 1.25rem 1.5rem 4.5rem; }

	.v-quotes__title { font-size: 2.5rem; }
	.v-problems__left .v-h2 br { display: none; }
	.v-quote { flex: 0 0 82vw; min-height: 0; padding: 2rem 1.75rem; }

	.v-connect__title { font-size: 2.75rem; }
	.v-connect__body { padding: 2.25rem 1.75rem; }

	.v-footer__grid { grid-template-columns: 1fr; }
	.v-footer__social { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.v-top { right: .875rem; bottom: .875rem; }
	.v-rail--b { display: none; }
}


/* ==========================================================================
   HERO ANALYTICS PANEL — FIGMA MATCH
   Final visual overrides for the transparent/dark hero panel.
   ========================================================================== */

.v-panel {
	width: 32.875rem;
	max-width: 100%;
	margin-top: 0;
	padding: 1.5rem 1.5rem 1.375rem;
	border-radius: 1.75rem;
	background: rgba(48, 40, 38, .48);
	border: 1px solid rgba(255, 255, 255, .48);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow:
		0 1.25rem 3rem rgba(0, 0, 0, .22),
		inset 0 1px 0 rgba(255, 255, 255, .18);
	color: #fff;
	overflow: hidden;
}

.v-panel__grid {
	grid-template-columns: minmax(0, 1fr) 11.5rem;
	gap: .75rem;
	align-items: start;
}

.v-panel__eyebrow {
	margin: .15rem 0 .9rem;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	color: rgba(255, 255, 255, .92);
}

.v-panel__value {
	margin: 0;
	font-size: 3rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.025em;
	color: #fff;
}

.v-panel__delta {
	margin: .45rem 0 0;
	font-size: .8125rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .92);
}

.v-panel__delta b {
	color: #8ccf45;
	font-weight: 500;
}

.v-panel__filters {
	gap: .375rem;
	margin-top: 1rem;
}

.v-chip {
	height: 1.75rem;
	padding: 0 .75rem;
	border-radius: .5rem;
	background: rgba(255, 255, 255, .88);
	border: 0;
	color: #5c6470;
	font-size: .75rem;
	font-weight: 400;
}

.v-chip.is-on {
	background: #062f55;
	border: 0;
	color: #fff;
	font-weight: 500;
}

/* Use the supplied chart image instead of the SVG donut. */
.v-panel__donut {
	width: 11.5rem;
	height: 11.5rem;
	margin: -.15rem -.15rem 0 0;
	flex: 0 0 11.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.v-panel__donut img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.v-panel__donut svg {
	display: none !important;
}

/* Legend — 2 columns with the Figma ordering. */
.v-panel__legend {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(3, 1.55rem);
	column-gap: 1.25rem;
	row-gap: .05rem;
	margin: .95rem 0 1.05rem;
	padding: .75rem 0 .75rem;
	border-top: 1px solid rgba(255, 255, 255, .32);
	border-bottom: 1px solid rgba(255, 255, 255, .32);
}

.v-panel__legend li {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	font-size: .8125rem;
	line-height: 1.2;
	color: #fff;
}

.v-panel__legend i {
	width: .8125rem;
	height: .8125rem;
	flex: 0 0 .8125rem;
	border-radius: .15rem;
}

.v-panel__legend-name {
	min-width: 0;
	color: rgba(255, 255, 255, .94);
	white-space: nowrap;
}

.v-panel__legend-pct {
	margin-left: auto;
	color: #fff;
	font-weight: 500;
	white-space: nowrap;
}

/* Exact visual order:
   Technology | Financial Service
   Healthcare  | Energy & Utilities
   Consumer Goods
*/
.v-panel__legend li:nth-child(1) { grid-column: 1; grid-row: 1; }
.v-panel__legend li:nth-child(2) { grid-column: 1; grid-row: 2; }
.v-panel__legend li:nth-child(3) { grid-column: 2; grid-row: 1; }
.v-panel__legend li:nth-child(4) { grid-column: 2; grid-row: 2; }
.v-panel__legend li:nth-child(5) { grid-column: 1; grid-row: 3; }

/* Bottom white data rows. */
.v-panel__rows {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.v-panel__rows li {
	display: flex;
	align-items: center;
	min-height: 3.45rem;
	gap: .7rem;
	padding: .625rem .875rem;
	background: rgba(255, 255, 255, .97);
	border: 0;
	border-radius: .7rem;
	box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
}

.v-panel__rows li:hover {
	transform: none;
	box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
}

.v-panel__row-name {
	flex: 0 0 auto;
	font-size: .8125rem;
	font-weight: 500;
	color: #1b1d20;
}

.v-panel__spark {
	width: 2.75rem;
	height: 1.5rem;
	flex: 0 0 2.75rem;
	display: flex;
	align-items: center;
}

.v-panel__spark img {
	display: block;
	width: 2.75rem;
	height: 1.5rem;
	object-fit: contain;
}

.v-panel__spark svg {
	display: none;
}

.v-panel__row-value {
	margin-left: auto;
	font-size: .8125rem;
	font-weight: 500;
	color: #1f2328;
	white-space: nowrap;
}

.v-panel__row-delta {
	min-width: 2.8125rem;
	padding: .2rem .4rem;
	border-radius: .375rem;
	font-size: .7rem;
	font-weight: 500;
	line-height: 1.25;
}

.v-panel__row-delta.is-up {
	background: #e5f1df;
	color: #4d8f34;
}

.v-panel__row-delta.is-down {
	background: #fde9e9;
	color: #d9534f;
}

/* Keep the panel on the right side of the hero. */
.v-hero__right {
	display: flex;
	justify-content: flex-end;
}

.v-hero__right .v-panel {
	margin-left: auto;
}

/* Tablet */
@media (max-width: 1199px) {
	.v-panel {
		width: min(32.875rem, 100%);
	}

	.v-panel__grid {
		grid-template-columns: minmax(0, 1fr) 10rem;
	}

	.v-panel__donut {
		width: 10rem;
		height: 10rem;
		flex-basis: 10rem;
	}
}

/* Mobile */
@media (max-width: 640px) {
	.v-panel {
		width: 100%;
		padding: 1.25rem 1.125rem 1.125rem;
		border-radius: 1.5rem;
	}

	.v-panel__grid {
		grid-template-columns: minmax(0, 1fr) 7.5rem;
		gap: .5rem;
	}

	.v-panel__value {
		font-size: 2.25rem;
	}

	.v-panel__donut {
		width: 11rem;
		height: 11rem;
		flex-basis: 7.5rem;
	}

	.v-panel__legend {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(3, auto);
		column-gap: .75rem;
		row-gap: .35rem;
		padding-block: .65rem;
	}

	.v-panel__legend li {
		font-size: .7rem;
	}

	.v-panel__legend-name {
		white-space: normal;
	}

	.v-panel__rows li {
		min-height: 3.25rem;
		padding-inline: .75rem;
	}
}


/* ==========================================================================
   VISTA HERO ANALYTICS PANEL — FINAL FIGMA OVERRIDE
   Added at the end intentionally so it overrides earlier panel rules.
   ========================================================================== */

.v-panel {
	width: 32.875rem;
	max-width: 100%;
	margin-top: 0;
	padding: 1.5rem 1.5rem 1.375rem;
	box-sizing: border-box;

	border-radius: 1.75rem;

	background: rgba(48, 39, 35, 0.48);
	border: 1px solid rgba(255, 255, 255, 0.48);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	box-shadow:
		0 1.25rem 3rem rgba(0, 0, 0, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);

	color: #fff;
	overflow: hidden;
}

.v-panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 11.5rem;
	gap: .75rem;
	align-items: start;
}

.v-panel__eyebrow {
	margin: .15rem 0 .9rem;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .075em;
	text-transform: uppercase;
	color: #fff;
}

.v-panel__value {
	margin: 0;
	font-family: var(--font);
	font-size: 3rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.025em;
	color: #fff;
}

.v-panel__delta {
	margin: .45rem 0 0;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
}

.v-panel__delta b {
	color: #8CC540;
	font-weight: 500;
}

.v-panel__filters {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin-top: 1rem;
}

.v-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.75rem;
	padding: 0 .75rem;
	border: 0;
	border-radius: .5rem;
	font-family: var(--font);
	font-size: .75rem;
	font-weight: 400;
	line-height: 1;
	background: #fff;
	color: #59616a;
	white-space: nowrap;
}

.v-chip.is-on {
	background: #062F55;
	color: #fff;
	font-weight: 500;
}

/* Chart image */
.v-panel__donut {
	width: 11.5rem;
	height: 11.5rem;
	flex: 0 0 11.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -.1rem;
}

.v-panel__donut img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.v-panel__donut svg {
	display: none !important;
}

/* Legend with horizontal lines only */
.v-panel__legend {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1.55rem 1.55rem 1.55rem;
	column-gap: 1.25rem;
	row-gap: .05rem;
	margin: .95rem 0 1.05rem;
	padding: .75rem 0;
	border-top: 1px solid rgba(255, 255, 255, .35);
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	border-left: 0;
	border-right: 0;
}

.v-panel__legend li {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: .5rem;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.v-panel__legend i {
	display: block;
	width: .8125rem;
	height: .8125rem;
	flex: 0 0 .8125rem;
	border-radius: .15rem;
}

.v-panel__legend-name {
	min-width: 0;
	color: #fff;
	white-space: nowrap;
}

.v-panel__legend-pct {
	margin-left: auto;
	color: #fff;
	font-weight: 400;
	white-space: nowrap;
}

/* Figma legend colours */
.v-panel__legend li:nth-child(1) i {
	background: #014282 !important;
}

.v-panel__legend li:nth-child(2) i {
	background: #47811B !important;
}

.v-panel__legend li:nth-child(3) i {
	background: #85CB50 !important;
}

.v-panel__legend li:nth-child(4) i {
	background: #5DA428 !important;
}

.v-panel__legend li:nth-child(5) i {
	background: #64AAEF !important;
}

/* Figma legend positions:
   Technology          Healthcare
   Financial Service   Energy & Utilities
   Consumer Goods
*/
.v-panel__legend li:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.v-panel__legend li:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}

.v-panel__legend li:nth-child(3) {
	grid-column: 2;
	grid-row: 1;
}

.v-panel__legend li:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}

.v-panel__legend li:nth-child(5) {
	grid-column: 1;
	grid-row: 3;
}

/* Bottom white rows */
.v-panel__rows {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.v-panel__rows li {
	display: flex;
	align-items: center;
	min-height: 3.45rem;
	gap: .7rem;
	padding: .625rem .875rem;
	background: #fff;
	border: 0;
	border-radius: .7rem;
	box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .12);
}

.v-panel__rows li:hover {
	transform: none;
	box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .12);
}

.v-panel__row-name {
	flex: 0 0 auto;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.2;
	color: #202020;
}

.v-panel__spark {
	width: 2.75rem;
	height: 1.5rem;
	flex: 0 0 2.75rem;
	display: flex;
	align-items: center;
}

.v-panel__spark img {
	display: block;
	width: 2.75rem;
	height: 1.5rem;
	object-fit: contain;
}

.v-panel__spark svg {
	display: none !important;
}

.v-panel__row-value {
	margin-left: auto;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.2;
	color: #222;
	white-space: nowrap;
}

.v-panel__row-delta {
	min-width: 2.8125rem;
	padding: .2rem .4rem;
	border-radius: .375rem;
	font-family: var(--font);
	font-size: .7rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

.v-panel__row-delta.is-up {
	background: #E5F1DF;
	color: #4B8F32;
}

.v-panel__row-delta.is-down {
	background: #FDE9E9;
	color: #D9534F;
}

.v-hero__right {
	display: flex;
	justify-content: flex-end;
}

.v-hero__right .v-panel {
	margin-left: auto;
}

/* Tablet */
@media (max-width: 1199px) {
	.v-panel {
		width: min(32.875rem, 100%);
	}

	.v-panel__grid {
		grid-template-columns: minmax(0, 1fr) 10rem;
	}

	.v-panel__donut {
		width: 10rem;
		height: 10rem;
		flex-basis: 10rem;
	}
}

/* Mobile */
@media (max-width: 640px) {
	.v-panel {
		width: 100%;
		padding: 1.25rem 1.125rem 1.125rem;
		border-radius: 1.5rem;
	}

	.v-panel__grid {
		grid-template-columns: minmax(0, 1fr) 7.5rem;
		gap: .5rem;
	}

	.v-panel__value {
		font-size: 2.25rem;
	}

	.v-panel__donut {
		width: 7.5rem;
		height: 7.5rem;
		flex-basis: 7.5rem;
	}

	.v-panel__legend {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		column-gap: .75rem;
		row-gap: .35rem;
		padding-block: .65rem;
	}

	.v-panel__legend li {
		font-size: .7rem;
	}

	.v-panel__legend-name {
		white-space: normal;
	}

	.v-panel__rows li {
		min-height: 3.25rem;
		padding-inline: .75rem;
	}

	.v-panel__row-name,
	.v-panel__row-value {
		font-size: .75rem;
	}
}

/* Small mobile */
@media (max-width: 420px) {
	.v-panel {
		position: relative;
	}

	.v-panel__grid {
		grid-template-columns: 1fr;
	}

	.v-panel__donut {
		position: absolute;
		top: 1.25rem;
		right: 1rem;
		width: 11rem;
		height: 11rem;
	}

	.v-panel__value {
		font-size: 2rem;
	}

	.v-panel__legend {
		grid-template-columns: 1fr;
	}

	.v-panel__legend li:nth-child(1),
	.v-panel__legend li:nth-child(2),
	.v-panel__legend li:nth-child(3),
	.v-panel__legend li:nth-child(4),
	.v-panel__legend li:nth-child(5) {
		grid-column: auto;
		grid-row: auto;
	}
}
/* ==========================================================================
   PROBLEM ROW IMAGE
   ========================================================================== */

.v-problem__ico {
	width: 6.0625rem;
	height: 6rem;

	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 6.0625rem;

	border-radius: 50%;
	overflow: hidden;

	background: transparent;
	box-shadow: none;
}

/* Actual image */
.v-problem__ico img {
	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

	object-fit: contain;

	border-radius: 50%;
}

/* ==========================================================================
   MOBILE RESPONSIVE — FIGMA / iPHONE LAYOUT
   Desktop layout is intentionally untouched.
   ========================================================================== */

@media (max-width: 960px) {

	/* Prevent any child layout from creating horizontal page overflow. */
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
		overscroll-behavior-x: none;
	}

	.v-main,
	.v-header,
	.v-footer,
	.v-connect,
	.v-hero,
	.v-about,
	.v-why,
	.v-sectors,
	.v-process,
	.v-problems,
	.v-services,
	.v-feature,
	.v-faq,
	.v-quotes {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-header__inner {
		width: 100%;
		max-width: calc(100% - 2.5rem);
		min-width: 0;
		gap: 0;
	}

	/* Mobile header: logo stays left, hamburger is always on the right. */
	.v-header__brand {
		flex: 0 0 auto;
		min-width: 0;
	}

	.v-header__actions {
		margin-left: auto;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.v-burger {
		display: flex;
		flex: 0 0 2.75rem;
		margin-left: auto;
	}

	/* Keep hidden desktop navigation from affecting the mobile width. */
	.v-nav {
		display: none !important;
		width: 0;
		min-width: 0;
		margin: 0;
	}

	/* Mobile drawer must stay inside the viewport. */
	.v-drawer,
	.v-drawer__scrim {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.v-drawer__panel {
		right: 0;
		left: auto;
		max-width: 88vw;
		min-width: 0;
	}

	/* Every grid/flex child is allowed to shrink instead of pushing the
	   document wider than the viewport. */
	.v-hero__inner > *,
	.v-hero__left,
	.v-hero__right,
	.v-about__head > *,
	.v-about__row > *,
	.v-why__grid > *,
	.v-sectors__head > *,
	.v-process__head > *,
	.v-services__head > *,
	.v-feature__grid > *,
	.v-faq__head > *,
	.v-quotes__head > *,
	.v-connect__card > *,
	.v-footer__grid > * {
		min-width: 0;
		max-width: 100%;
	}

	/* Horizontal tab strip is intentionally scrollable, but the page itself
	   must never become horizontally scrollable. */
	.v-tabs {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-tabs__bar {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.v-tabs__panel {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding-inline: 0;
	}

	.v-sectors__grid {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		grid-template-columns: 1fr;
	}

	.v-sector {
		min-width: 0;
		width: 100%;
	}

	/* Process/timeline: replace the desktop fixed canvas with a fluid column. */
	.v-timeline {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-step {
		min-width: 0;
		width: 100%;
	}

	.v-step__card,
	.v-step__text {
		min-width: 0;
		max-width: 100%;
	}

	/* Services/cards. */
	.v-services .v-shell {
		width: 100%;
		max-width: calc(100% - 2.5rem);
		min-width: 0;
	}

	.v-services__grid {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-card,
	.v-promo {
		min-width: 0;
		max-width: 100%;
	}

	.v-card__media {
		max-width: calc(100% - .5rem);
	}

	/* Feature rows must never retain desktop column widths. */
	.v-feature__grid,
	.v-feature--left .v-feature__grid {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.v-feature__text,
	.v-feature__media {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-feature__media img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* FAQ becomes fully fluid. */
	.v-accordion {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-acc__item,
	.v-acc__btn,
	.v-acc__panel,
	.v-acc__body {
		max-width: 100%;
		min-width: 0;
	}

	.v-acc__q {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Quotes: cards stay inside the viewport while the carousel remains
	   horizontally clipped. */
	.v-quotes__viewport {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
	}

	.v-quotes__track {
		min-width: 0;
	}

	/* Connect section. */
	.v-connect .v-shell,
	.v-footer .v-shell {
		width: 100%;
		max-width: calc(100% - 2.5rem);
		min-width: 0;
	}

	.v-connect__card {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-connect__body {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	/* Long email/contact strings must wrap rather than create overflow. */
	.v-contact__value,
	.v-drawer__mail,
	.v-footer__list a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Floating desktop social rail is hidden on mobile, as in the reference. */
	.v-rail {
		display: none;
	}

	/* Back-to-top button stays inside the viewport. */
	.v-top {
		right: .875rem;
		max-width: calc(100vw - 1.75rem);
	}

	/* Images/media cannot exceed their parent width. */
	.v-hero img,
	.v-about img,
	.v-why img,
	.v-sectors img,
	.v-process img,
	.v-problems img,
	.v-services img,
	.v-feature img,
	.v-faq img,
	.v-quotes img,
	.v-connect img,
	.v-footer img {
		max-width: 100%;
	}

}

@media (max-width: 640px) {

	/* iPhone-style spacing from the supplied mobile reference. */
	.v-shell,
	.v-services .v-shell,
	.v-footer .v-shell,
	.v-connect .v-shell,
	.v-header__inner {
		width: calc(100% - 2.5rem);
		max-width: calc(100% - 2.5rem);
		margin-inline: auto;
	}

	.v-header {
		height: 5rem;
	}

	.v-header__inner {
		height: 100%;
	}

	.v-logo img,
	.custom-logo-link img {
		width: 7.5rem;
		max-width: 7.5rem;
	}

	.v-burger {
		width: 3rem;
		height: 3rem;
		flex-basis: 3rem;
	}

	.v-burger__bar {
		width: 1.7rem;
		height: 2px;
	}

	/* Hero stacks cleanly and uses the full available phone width. */
	.v-hero {
		padding-bottom: 3rem;
		overflow: hidden;
	}

	.v-hero__inner {
		width: 100%;
		max-width: 100%;
		padding-top: 2.5rem;
		gap: 2rem;
	}

	.v-hero__title {
		font-size: clamp(2.65rem, 9vw, 3.25rem);
		line-height: 1.08;
		max-width: 100%;
	}

	.v-hero__intro {
		max-width: 100%;
		font-size: 1.35rem;
		line-height: 1.55;
	}

	.v-hero__follow {
		max-width: 100%;
	}

	.v-hero__right {
		width: 100%;
		max-width: 100%;
	}

	/* Analytics panel: no fixed desktop width on phones. */
	.v-panel,
	.v-hero__right .v-panel {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		min-width: 0;
	}

	.v-panel__grid {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-panel__legend,
	.v-panel__rows {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-panel__row {
		min-width: 0;
	}

	.v-panel__row-name,
	.v-panel__row-value {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Stats strip becomes one clean vertical block. */
	.v-hero__statsbar {
		width: 100%;
		max-width: 100%;
		margin: 2rem 0 0;
	}

	.v-stats {
		width: 100%;
		max-width: 100%;
		grid-template-columns: 1fr 1fr;
	}

	/* Section spacing similar to the supplied mobile reference. */
	.v-about,
	.v-why,
	.v-sectors,
	.v-process,
	.v-services,
	.v-faq,
	.v-quotes,
	.v-feature,
	.v-connect {
		padding-block: 3.25rem;
	}

	.v-about__head,
	.v-about__row,
	.v-why__grid,
	.v-process__head,
	.v-services__head,
	.v-feature__grid,
	.v-feature--left .v-feature__grid,
	.v-quotes__head {
		width: 100%;
		max-width: 100%;
	}

	.v-about__cards {
		grid-template-columns: 1fr;
	}

	/* Industry tabs and cards. */
	.v-tabs__bar {
		margin-bottom: 1.75rem;
		padding: .25rem;
		border-radius: 999px;
	}

	.v-tabs__btn {
		height: 3rem;
		padding-inline: 1.25rem;
		font-size: 1.1rem;
	}

	.v-sector {
		padding: 2rem 1.5rem 1.75rem;
	}

	.v-sector__ico {
		width: 5rem;
		height: 5rem;
		margin-bottom: 1rem;
	}

	.v-sector__ico img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.v-sector__title {
		font-size: 1.5rem;
	}

	.v-sector__text {
		font-size: 1.15rem;
		line-height: 1.55;
	}

	/* Problems. */
	.v-problems__grid {
		width: 100%;
		max-width: 100%;
	}

	.v-problem {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		grid-template-columns: 4rem minmax(0, 1fr);
	}

	.v-problem__ico {
		width: 4rem;
		height: 4rem;
		flex-basis: 4rem;
	}

	.v-problem__q {
		min-width: 0;
		font-size: 1.4rem;
	}

	.v-problem__pill {
		width: 100%;
		max-width: 100%;
	}

	/* Services. */
	.v-services__grid {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
	}

	.v-card {
		width: 100%;
		margin-top: 3.5rem;
	}

	.v-promo {
		grid-column: auto;
		width: 100%;
		min-height: 22rem;
		margin-top: 2rem;
	}

	/* Process. */
	.v-timeline {
		margin-top: 2.5rem;
	}

	.v-step {
		padding-left: 2.5rem;
	}

	.v-step__card {
		width: 100%;
		max-width: 100%;
	}

	/* Feature / FAQ. */
	.v-feature__text .v-h2,
	.v-feature__text p {
		max-width: 100%;
	}

	.v-accordion {
		width: 100%;
	}

	.v-acc__btn {
		width: 100%;
		grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
		padding: 1.25rem 1rem;
		gap: 0 .75rem;
	}

	.v-acc__q {
		font-size: 1.2rem;
	}

	.v-acc__body {
		padding: 0 1rem 1.5rem 4rem;
	}

	/* Testimonials. */
	.v-quote {
		flex-basis: min(82vw, 30rem);
		max-width: 82vw;
	}

	/* Connect/footer. */
	.v-connect__card {
		border-radius: 1.5rem;
	}

	.v-connect__body {
		padding: 2rem 1.5rem;
	}

	.v-connect__title {
		font-size: 2.65rem;
	}

	.v-footer__grid {
		width: 100%;
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.v-footer__social {
		max-width: 100%;
	}

}

/* Extra-small phones: keep the analytics panel and all content fluid. */
@media (max-width: 420px) {

	.v-panel__grid {
		grid-template-columns: 1fr;
	}

	.v-panel__donut {
		position: absolute;
		top: 1.25rem;
		right: 1rem;
		width:11rem;
		height: 11rem;
	}

	.v-panel__legend {
		grid-template-columns: 1fr 1fr;
	}

	.v-panel__legend li:nth-child(1),
	.v-panel__legend li:nth-child(2),
	.v-panel__legend li:nth-child(3),
	.v-panel__legend li:nth-child(4),
	.v-panel__legend li:nth-child(5) {
		grid-column: auto;
		grid-row: auto;
	}

	.v-panel__value {
		padding-right: 7.5rem;
		font-size: 2rem;
	}

}

/* ========================================================================
   FINAL MOBILE FIXES — hero background + drawer layering + no white drag
   ======================================================================== */

/* The hero artwork must sit above the hero background and behind the content. */
.v-hero__bg {
	z-index: 0;
	pointer-events: none;
}

.v-hero__scrim {
	z-index: 1;
	pointer-events: none;
}

.v-hero__inner,
.v-hero > .v-shell:not(.v-hero__inner) {
	position: relative;
	z-index: 2;
}

/* The mobile drawer panel must always sit above its dark overlay. */
.v-drawer__scrim {
	z-index: 1;
}

.v-drawer__panel {
	z-index: 2;
}

@media (max-width: 960px) {
	/* Keep the whole document locked to the viewport width. */
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Show the actual hero image on mobile instead of washing it out with
	   the desktop/tablet white scrim. */
	.v-hero__bg {
		display: block;
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.v-hero__bg img {
		display: block;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		object-fit: cover;
		object-position: 72% center;
	}

	.v-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, .90) 0%,
				rgba(255, 255, 255, .72) 28%,
				rgba(255, 255, 255, .34) 52%,
				rgba(4, 26, 51, .56) 100%
		);
	}

	/* Drawer: white menu panel on the right, dark scrim behind it. */
	.v-drawer {
		position: fixed;
		inset: 0;
		z-index: 2000;
		width: 100vw;
		max-width: 100vw;
	}

	.v-drawer__scrim {
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.v-drawer__panel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 2;
		width: min(26rem, 88vw);
		max-width: 88vw;
		background: #fff;
	}
}

@media (max-width: 640px) {
	.v-hero__bg img {
		object-position: 68% center;
	}

	/* Keep the mobile hero artwork visible behind the lower part of the
	   composition while maintaining readable text at the top. */
	.v-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, .96) 0%,
				rgba(255, 255, 255, .91) 22%,
				rgba(255, 255, 255, .60) 42%,
				rgba(4, 26, 51, .40) 72%,
				rgba(4, 26, 51, .62) 100%
			);
	}

	.v-drawer__panel {
		width: 88vw;
		max-width: 88vw;
		padding: 1.25rem 1.25rem 1.5rem;
	}
}

/* ========================================================================
   FOOTER WIDTH / COLUMN SAFETY
   Keep the four desktop columns inside the shell at all viewport widths.
   ======================================================================== */
.v-footer__grid > .v-footer__col,
.v-footer__col--contact,
.v-footer__col--brand,
.v-footer__col {
	min-width: 0;
	max-width: 100%;
}

.v-footer__col--contact {
	overflow: hidden;
}

.v-contact__body {
	min-width: 0;
	max-width: 100%;
}

.v-contact__value,
.v-contact__role,
.v-contact__label {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.v-footer__list,
.v-footer__list li,
.v-footer__list a {
	min-width: 0;
	max-width: 100%;
}

.v-footer__social,
.v-footer__legal {
	max-width: 100%;
	box-sizing: border-box;
}

/* ========================================================================
   FINAL MOBILE TYPOGRAPHY + DRAWER LAYER FIX
   Desktop remains unchanged.
   ======================================================================== */
@media (max-width: 640px) {
	/* Keep normal body copy readable on phones. */
	:root {
		--fs-body: 1.6rem;       /* 16px */
		--fs-lead: 1.6rem;       /* 16px */
		--fs-sm: 1.4rem;         /* 14px minimum */
		--fs-xs: 1.4rem;         /* 14px minimum */
		--fs-2xs: 1.4rem;        /* 14px minimum */
	}

	/* Paragraphs must never be smaller than 16px on mobile. */
	p,
	.v-lead,
	.v-hero__intro,
	.v-about__body,
	.v-feature__text p,
	.v-connect__text,
	.v-acc__body p,
	.v-prose,
	.v-prose p,
	.v-card__text,
	.v-sector__text,
	.v-step__desc,
	.v-why__item-text,
	.v-why__card span,
	.v-quotes__lead,
	.v-quote__text {
		font-size: 16px !important;
		line-height: 1.55;
	}

	/* Never allow regular UI/body text to fall below 14px. */
	.v-panel__eyebrow,
	.v-panel__legend li,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta,
	.v-panel__delta,
	.v-panel__filter,
	.v-panel__filters,
	.v-hero__proof-text,
	.v-stats__label,
	.v-about__since,
	.v-tile__title,
	.v-why__item-title,
	.v-why__card strong,
	.v-sector__title,
	.v-step__name,
	.v-problem__q,
	.v-problem__pill,
	.v-card__title,
	.v-promo__title,
	.v-acc__q,
	.v-quote__by strong,
	.v-quote__by span,
	.v-connect__sub,
	.v-footer__blurb,
	.v-footer__title,
	.v-footer__list a,
	.v-contact__label,
	.v-contact__role,
	.v-contact__value,
	.v-footer__social-label,
	.v-footer__legal,
	.v-drawer__list .v-nav__link,
	.v-drawer__mail,
	.v-nav__link,
	.v-btn,
	button,
	input,
	textarea,
	select,
	label {
		font-size: max(14px, 1em) !important;
	}

	/* Specific small values used by the analytics panel. */
	.v-panel__eyebrow,
	.v-panel__delta,
	.v-panel__legend li,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta {
		font-size: 14px !important;
	}

	/* Keep the analytics number visibly larger. */
	.v-panel__value {
		font-size: 30px !important;
	}

	/* Mobile navigation text. */
	.v-drawer__list .v-nav__link {
		font-size: 16px !important;
	}

	.v-drawer__mail {
		font-size: 14px !important;
	}

	/* --------------------------------------------------------------------
	   Drawer layering: panel is always above the scrim.
	   -------------------------------------------------------------------- */
	.v-drawer {
		position: fixed !important;
		inset: 0 !important;
		z-index: 99999 !important;
		isolation: isolate;
	}

	.v-drawer__scrim {
		position: absolute !important;
		inset: 0 !important;
		z-index: 0 !important;
		background: rgba(4, 26, 51, .55);
	}

	.v-drawer__panel {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		z-index: 10 !important;
		width: 88vw !important;
		max-width: 88vw !important;
		background: #fff !important;
		transform: translateX(0) !important;
		box-shadow: -10px 0 30px rgba(4, 26, 51, .18);
	}

	/* Keep the header/menu controls above everything else. */
	.v-header {
		position: relative;
		z-index: 100000;
	}

	.v-burger {
		margin-left: auto !important;
		order: 2;
	}

	.v-header__actions {
		margin-left: auto !important;
	}
}


/* ==========================================================================
   FINAL HERO FIX — PANEL ALIGNMENT + BACKGROUND VISIBILITY
   Added after the existing styles so these rules override earlier
   responsive hero rules without changing the original desktop styling.
   ========================================================================== */

/* Hero stacking */
.v-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.v-hero__bg {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none;
	overflow: hidden;
}

.v-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.v-hero__scrim {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	pointer-events: none;

	/* Desktop: readable text on the left, visible artwork on the right. */
	background:
		linear-gradient(
			97deg,
			rgba(255, 255, 255, .94) 0%,
			rgba(255, 255, 255, .86) 20%,
			rgba(255, 255, 255, .52) 37%,
			rgba(255, 255, 255, .16) 53%,
			rgba(255, 255, 255, 0) 72%
		),
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .18) 0%,
			rgba(255, 255, 255, 0) 35%
		),
		linear-gradient(
			0deg,
			rgba(4, 26, 51, .28) 0%,
			rgba(4, 26, 51, .12) 22%,
			rgba(4, 26, 51, 0) 52%
		);
}

.v-hero__inner,
.v-hero > .v-shell:not(.v-hero__inner) {
	position: relative !important;
	z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   Analytics panel
   -------------------------------------------------------------------------- */

.v-hero__right {
	position: relative;
	z-index: 3;
	min-width: 0;
}

.v-panel {
	position: relative;
	z-index: 3;
}

/* --------------------------------------------------------------------------
   Tablet — center the analytics panel
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {

	.v-hero__right {
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.v-hero__right .v-panel {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.v-hero__bg img {
		object-position: 70% center;
	}

	.v-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, .88) 0%,
				rgba(255, 255, 255, .68) 25%,
				rgba(255, 255, 255, .38) 45%,
				rgba(255, 255, 255, .12) 62%,
				rgba(4, 26, 51, .18) 100%
			);
	}
}

/* --------------------------------------------------------------------------
   Mobile — match the reference composition
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

	.v-hero {
		overflow: hidden !important;
	}

	/* Keep the actual library background visible. */
	.v-hero__bg {
		display: block !important;
		position: absolute !important;
		inset: 0 !important;
		z-index: 0 !important;
		overflow: hidden !important;
	}

	.v-hero__bg img {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: 68% center !important;
	}

	/* White/readable top, progressively more visible image below. */
	.v-hero__scrim {
		position: absolute !important;
		inset: 0 !important;
		z-index: 1 !important;
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, .96) 0%,
				rgba(255, 255, 255, .91) 13%,
				rgba(255, 255, 255, .76) 25%,
				rgba(255, 255, 255, .48) 37%,
				rgba(255, 255, 255, .20) 49%,
				rgba(4, 26, 51, .08) 61%,
				rgba(4, 26, 51, .20) 76%,
				rgba(4, 26, 51, .30) 100%
			);
	}

	.v-hero__inner,
	.v-hero > .v-shell:not(.v-hero__inner) {
		position: relative !important;
		z-index: 2 !important;
	}

	/* Center panel horizontally. */
	.v-hero__right {
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.v-hero__right .v-panel,
	.v-panel {
		width: calc(100% - 1.5rem) !important;
		max-width: 32rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
		min-width: 0 !important;
	}

	/* Prevent panel internals from creating horizontal overflow. */
	.v-panel__grid,
	.v-panel__legend,
	.v-panel__rows {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-panel__legend li,
	.v-panel__rows li {
		min-width: 0;
		max-width: 100%;
	}

	.v-panel__legend-name,
	.v-panel__legend-pct,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.v-panel__spark {
		flex: 0 0 auto;
	}

	.v-panel__spark img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* Keep proof/stats above the background. */
	.v-hero__proof,
	.v-hero__proof-card {
		position: relative;
		z-index: 3;
		width: 100%;
		max-width: 100%;
	}

	/* Follow/social element. */
	.v-hero__follow {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.v-hero__follow-label {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
	}

	.v-hero__follow-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	
		padding: 0;
		margin: 0;
		background: transparent !important;
		border: 0;
		box-shadow: none;
		text-decoration: none;
	}

	.v-hero__follow-link img {
		display: block;
		
		object-fit: contain;
	}

	/* Hamburger stays on the right. */
	.v-burger {
		margin-left: auto !important;
		order: 2;
	}

	.v-header__actions {
		margin-left: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Small phones
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.v-hero__bg img {
		object-position: 67% center !important;
	}

	.v-hero__right .v-panel,
	.v-panel {
		width: calc(100% - 1rem) !important;
		max-width: 32rem !important;
	}

	.v-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, .96) 0%,
				rgba(255, 255, 255, .90) 14%,
				rgba(255, 255, 255, .72) 27%,
				rgba(255, 255, 255, .43) 39%,
				rgba(255, 255, 255, .17) 51%,
				rgba(4, 26, 51, .08) 63%,
				rgba(4, 26, 51, .22) 78%,
				rgba(4, 26, 51, .32) 100%
			);
	}
}

/* --------------------------------------------------------------------------
   Extra-small phones
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {

	.v-hero__right .v-panel,
	.v-panel {
		width: calc(100% - .75rem) !important;
		max-width: 32rem !important;
	}

	.v-panel__grid {
		grid-template-columns: 1fr;
	}

	.v-panel__donut {
		position: absolute;
		top: 1.25rem;
		right: 1rem;
		width: 11rem;
		height: 11rem;
	}

	.v-panel__value {
		padding-right: 7.5rem;
		font-size: 2rem;
	}

	.v-panel__legend {
		grid-template-columns: 1fr 1fr;
	}

	.v-panel__legend li:nth-child(1),
	.v-panel__legend li:nth-child(2),
	.v-panel__legend li:nth-child(3),
	.v-panel__legend li:nth-child(4),
	.v-panel__legend li:nth-child(5) {
		grid-column: auto;
		grid-row: auto;
	}
}

/* --------------------------------------------------------------------------
   Mobile typography
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

	:root {
		--fs-body: 1.6rem;
		--fs-lead: 1.6rem;
		--fs-sm: 1.4rem;
		--fs-xs: 1.4rem;
		--fs-2xs: 1.4rem;
	}

	p,
	.v-lead,
	.v-hero__intro,
	.v-about__body,
	.v-feature__text p,
	.v-connect__text,
	.v-acc__body p,
	.v-prose,
	.v-prose p,
	.v-card__text,
	.v-sector__text,
	.v-step__desc,
	.v-why__item-text,
	.v-why__card span,
	.v-quotes__lead,
	.v-quote__text {
		font-size: 16px !important;
		line-height: 1.55;
	}

	.v-panel__eyebrow,
	.v-panel__legend li,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta,
	.v-panel__delta,
	.v-panel__filter,
	.v-panel__filters,
	.v-hero__proof-text,
	.v-stats__label,
	.v-about__since,
	.v-tile__title,
	.v-why__item-title,
	.v-why__card strong,
	.v-sector__title,
	.v-step__name,
	.v-problem__q,
	.v-problem__pill,
	.v-card__title,
	.v-promo__title,
	.v-acc__q,
	.v-quote__by strong,
	.v-quote__by span,
	.v-connect__sub,
	.v-footer__blurb,
	.v-footer__title,
	.v-footer__list a,
	.v-contact__label,
	.v-contact__role,
	.v-contact__value,
	.v-footer__social-label,
	.v-footer__legal,
	.v-drawer__list .v-nav__link,
	.v-drawer__mail,
	.v-nav__link,
	.v-btn,
	button,
	input,
	textarea,
	select,
	label {
		font-size: max(14px, 1em) !important;
	}

	.v-panel__eyebrow,
	.v-panel__delta,
	.v-panel__legend li,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta {
		font-size: 14px !important;
	}

	.v-panel__value {
		font-size: 30px !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile drawer layering
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {

	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.v-drawer {
		position: fixed !important;
		inset: 0 !important;
		z-index: 99999 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		isolation: isolate;
	}

	.v-drawer__scrim {
		position: absolute !important;
		inset: 0 !important;
		z-index: 0 !important;
		background: rgba(4, 26, 51, .55);
	}

	.v-drawer__panel {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		z-index: 10 !important;
		width: 88vw !important;
		max-width: 88vw !important;
		background: #fff !important;
		transform: translateX(0) !important;
		box-shadow: -10px 0 30px rgba(4, 26, 51, .18);
	}
}

@media (max-width: 640px) {

	.v-drawer__panel {
		width: 88vw !important;
		max-width: 88vw !important;
		padding: 1.25rem 1.25rem 1.5rem;
	}

	.v-header {
		position: relative;
		z-index: 100000;
	}
}

.v-hero__statsbar {
	border: 1px solid rgba(255,255,255,.30) !important;
	border-left-color: rgba(255,255,255,.52) !important;
	border-bottom-color: rgba(255,255,255,.52) !important;

	box-shadow:
		0 1rem 2.5rem rgba(4,20,40,.20),
		inset 1px 0 0 rgba(255,255,255,.10),
		inset 0 -1px 0 rgba(255,255,255,.16);
}


/* ==========================================================================
   FINAL VISTA HERO FIX
   - Center analytics panel on tablet/mobile
   - Make library background more visible
   - Match mobile hero composition
   - Stats card gets the reference-style left/bottom glass border
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO LAYERS
   -------------------------------------------------------------------------- */

.v-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.v-hero__bg {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none;
	overflow: hidden;
}

.v-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.v-hero__scrim {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	pointer-events: none;

	background:
		linear-gradient(
			97deg,
			rgba(255,255,255,.94) 0%,
			rgba(255,255,255,.86) 20%,
			rgba(255,255,255,.52) 37%,
			rgba(255,255,255,.16) 53%,
			rgba(255,255,255,0) 72%
		),
		linear-gradient(
			180deg,
			rgba(255,255,255,.18) 0%,
			rgba(255,255,255,0) 35%
		),
		linear-gradient(
			0deg,
			rgba(4,26,51,.28) 0%,
			rgba(4,26,51,.12) 22%,
			rgba(4,26,51,0) 52%
		);
}

.v-hero__inner,
.v-hero > .v-shell:not(.v-hero__inner) {
	position: relative !important;
	z-index: 2 !important;
}


/* --------------------------------------------------------------------------
   ANALYTICS PANEL — TABLET
   -------------------------------------------------------------------------- */

@media (max-width:1199px) {

	.v-hero__right {
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.v-hero__right .v-panel {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.v-hero__bg img {
		object-position: 70% center;
	}

	.v-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(255,255,255,.88) 0%,
				rgba(255,255,255,.68) 25%,
				rgba(255,255,255,.38) 45%,
				rgba(255,255,255,.12) 62%,
				rgba(4,26,51,.18) 100%
			);
	}
}


/* --------------------------------------------------------------------------
   STATS BAR — DESKTOP
   -------------------------------------------------------------------------- */

.v-hero__statsbar {
	position: relative;
	z-index: 3;

	border: 1px solid rgba(255,255,255,.30) !important;
	border-left-color: rgba(255,255,255,.52) !important;
	border-bottom-color: rgba(255,255,255,.52) !important;

	background:
		linear-gradient(
			115deg,
			rgba(255,255,255,.24) 0%,
			rgba(255,255,255,.12) 100%
		) !important;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	box-shadow:
		0 1rem 2.5rem rgba(4,20,40,.20),
		inset 1px 0 0 rgba(255,255,255,.10),
		inset 0 -1px 0 rgba(255,255,255,.18);

	overflow: hidden;
}


/* Do not put an outer border around the stats list/items. */
.v-stats {
	border: 0 !important;
}

.v-stats__item {
	border: 0 !important;
	box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   MOBILE HERO
   -------------------------------------------------------------------------- */

@media (max-width:640px) {

	.v-hero {
		overflow: hidden !important;
	}

	.v-hero__bg {
		display: block !important;
		position: absolute !important;
		inset: 0 !important;
		z-index: 0 !important;
		overflow: hidden !important;
	}

	.v-hero__bg img {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: 68% center !important;
	}

	/* Stronger image visibility than the previous overlay. */
	.v-hero__scrim {
		position: absolute !important;
		inset: 0 !important;
		z-index: 1 !important;

		background:
			linear-gradient(
				180deg,
				rgba(255,255,255,.96) 0%,
				rgba(255,255,255,.91) 13%,
				rgba(255,255,255,.76) 25%,
				rgba(255,255,255,.48) 37%,
				rgba(255,255,255,.20) 49%,
				rgba(4,26,51,.08) 61%,
				rgba(4,26,51,.20) 76%,
				rgba(4,26,51,.30) 100%
			);
	}

	.v-hero__inner,
	.v-hero > .v-shell:not(.v-hero__inner) {
		position: relative !important;
		z-index: 2 !important;
	}


	/* Center analytics card. */
	.v-hero__right {
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.v-hero__right .v-panel,
	.v-panel {
		width: calc(100% - 1.5rem) !important;
		max-width: 32rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
		min-width: 0 !important;
	}


	/* Keep panel content inside its width. */
	.v-panel__grid,
	.v-panel__legend,
	.v-panel__rows {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.v-panel__legend li,
	.v-panel__rows li {
		min-width: 0;
		max-width: 100%;
	}

	.v-panel__legend-name,
	.v-panel__legend-pct,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.v-panel__spark {
		flex: 0 0 auto;
	}

	.v-panel__spark img {
		display: block;
		max-width: 100%;
		height: auto;
	}


	/* ----------------------------------------------------------------------
	   STATS BAR — MOBILE REFERENCE BORDER
	   ---------------------------------------------------------------------- */

	.v-hero__statsbar {
		border: 1px solid rgba(255,255,255,.30) !important;

		/* Visible left + bottom edge */
		border-left-color: rgba(255,255,255,.58) !important;
		border-bottom-color: rgba(255,255,255,.58) !important;

		border-radius: 1.75rem;

		background:
			linear-gradient(
				145deg,
				rgba(255,255,255,.25) 0%,
				rgba(255,255,255,.16) 48%,
				rgba(255,255,255,.10) 100%
			) !important;

		backdrop-filter: blur(9px);
		-webkit-backdrop-filter: blur(9px);

		box-shadow:
			0 .9rem 2rem rgba(4,20,40,.20),
			inset 1px 0 0 rgba(255,255,255,.12),
			inset 0 -1px 0 rgba(255,255,255,.20);

		overflow: hidden;
	}

	.v-stats {
		border: 0 !important;
	}

	.v-stats__item {
		border: 0 !important;
		box-shadow: none !important;
	}


	/* Keep stats content above the background. */
	.v-hero__stats-title,
	.v-stats,
	.v-stats__item {
		position: relative;
		z-index: 2;
	}


	/* Follow/social */
	.v-hero__follow {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.v-hero__follow-label {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
	}

	.v-hero__follow-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	
		padding: 0;
		margin: 0;
		background: transparent !important;
		border: 0;
		box-shadow: none;
		text-decoration: none;
	}

	.v-hero__follow-link img {
		display: block;
		width: 100px;
		height:auto;
		max-width: 100%;
		object-fit: contain;
	}


	/* Hamburger right */
	.v-burger {
		margin-left: auto !important;
		order: 2;
	}

	.v-header__actions {
		margin-left: auto !important;
	}
}


/* --------------------------------------------------------------------------
   SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width:480px) {

	.v-hero__bg img {
		object-position: 67% center !important;
	}

	.v-hero__right .v-panel,
	.v-panel {
		width: calc(100% - 1rem) !important;
		max-width: 32rem !important;
	}

	.v-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(255,255,255,.96) 0%,
				rgba(255,255,255,.90) 14%,
				rgba(255,255,255,.72) 27%,
				rgba(255,255,255,.43) 39%,
				rgba(255,255,255,.17) 51%,
				rgba(4,26,51,.08) 63%,
				rgba(4,26,51,.22) 78%,
				rgba(4,26,51,.32) 100%
			);
	}

	.v-hero__statsbar {
		border-left-color: rgba(255,255,255,.60) !important;
		border-bottom-color: rgba(255,255,255,.60) !important;
		border-radius: 1.6rem;
	}
}


/* --------------------------------------------------------------------------
   EXTRA SMALL PHONES
   -------------------------------------------------------------------------- */

@media (max-width:420px) {

	.v-hero__right .v-panel,
	.v-panel {
		width: calc(100% - .75rem) !important;
		max-width: 32rem !important;
	}

	.v-panel__grid {
		grid-template-columns: 1fr;
	}

	.v-panel__donut {
		position: absolute;
		top: 1.25rem;
		right: 1rem;
		width: 11rem;
		height: 11rem;
	}

	.v-panel__value {
		padding-right: 7.5rem;
		font-size: 2rem;
	}

	.v-panel__legend {
		grid-template-columns: 1fr 1fr;
	}
}


/* --------------------------------------------------------------------------
   MOBILE TYPOGRAPHY
   -------------------------------------------------------------------------- */

@media (max-width:640px) {

	:root {
		--fs-body: 1.6rem;
		--fs-lead: 1.6rem;
		--fs-sm: 1.4rem;
		--fs-xs: 1.4rem;
		--fs-2xs: 1.4rem;
	}

	p,
	.v-lead,
	.v-hero__intro,
	.v-about__body,
	.v-feature__text p,
	.v-connect__text,
	.v-acc__body p,
	.v-prose,
	.v-prose p,
	.v-card__text,
	.v-sector__text,
	.v-step__desc,
	.v-why__item-text,
	.v-why__card span,
	.v-quotes__lead,
	.v-quote__text {
		font-size: 16px !important;
		line-height: 1.55;
	}

	.v-panel__eyebrow,
	.v-panel__legend li,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta,
	.v-panel__delta,
	.v-panel__filter,
	.v-panel__filters,
	.v-hero__proof-text,
	.v-stats__label,
	.v-about__since,
	.v-tile__title,
	.v-why__item-title,
	.v-why__card strong,
	.v-sector__title,
	.v-step__name,
	.v-problem__q,
	.v-problem__pill,
	.v-card__title,
	.v-promo__title,
	.v-acc__q,
	.v-quote__by strong,
	.v-quote__by span,
	.v-connect__sub,
	.v-footer__blurb,
	.v-footer__title,
	.v-footer__list a,
	.v-contact__label,
	.v-contact__role,
	.v-contact__value,
	.v-footer__social-label,
	.v-footer__legal,
	.v-drawer__list .v-nav__link,
	.v-drawer__mail,
	.v-nav__link,
	.v-btn,
	button,
	input,
	textarea,
	select,
	label {
		font-size: max(14px, 1em) !important;
	}

	.v-panel__eyebrow,
	.v-panel__delta,
	.v-panel__legend li,
	.v-panel__row-name,
	.v-panel__row-value,
	.v-panel__row-delta {
		font-size: 14px !important;
	}

	.v-panel__value {
		font-size: 30px !important;
	}
}


/* --------------------------------------------------------------------------
   MOBILE DRAWER
   -------------------------------------------------------------------------- */

@media (max-width:960px) {

	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.v-drawer {
		position: fixed !important;
		inset: 0 !important;
		z-index: 99999 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		isolation: isolate;
	}

	.v-drawer__scrim {
		position: absolute !important;
		inset: 0 !important;
		z-index: 0 !important;
		background: rgba(4,26,51,.55);
	}

	.v-drawer__panel {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		z-index: 10 !important;
		width: 88vw !important;
		max-width: 88vw !important;
		background: #fff !important;
		transform: translateX(0) !important;
		box-shadow: -10px 0 30px rgba(4,26,51,.18);
	}
}

@media (max-width:640px) {

	.v-drawer__panel {
		width: 88vw !important;
		max-width: 88vw !important;
		padding: 1.25rem 1.25rem 1.5rem;
	}

	.v-header {
		position: relative;
		z-index: 100000;
	}
}

/* ==========================================================================
   FINAL FLOATING RAILS
   - Call + WhatsApp white background container
   - Green circular buttons
   - Desktop / tablet / mobile
   ========================================================================== */

/* Keep both floating rails visible at all breakpoints */
.v-rail {
	display: flex !important;
}


/* ==========================================================================
   CALL + WHATSAPP RAIL
   ========================================================================== */

.v-rail--b {
	position: fixed !important;
	right: 1rem !important;
	bottom: 5.5rem !important;
	top: auto !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;

	width: 48px !important;
	padding: 5px !important;

	background: #fff !important;
	border: 0 !important;
	border-radius: 28px !important;

	box-shadow:
		0 3px 10px rgba(0, 0, 0, .18) !important;

	z-index: 99999 !important;
}


/* Green circular buttons */
.v-rail--b .v-rail__btn {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	padding: 0 !important;
	margin: 0 !important;

	border: 0 !important;
	border-radius: 50% !important;

	background: linear-gradient(
		145deg,
		#82c34a 0%,
		#5c9f2d 100%
	) !important;

	color: #fff !important;

	box-shadow: none !important;
}


/* Icon wrapper */
.v-rail--b .v-rail__btn .v-ico {
	width: 21px !important;
	height: 21px !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	color: #fff !important;
}


/* SVG */
.v-rail--b .v-rail__btn svg {
	width: 21px !important;
	height: 21px !important;

	display: block !important;

	color: #fff !important;
}


/* Hover */
.v-rail--b .v-rail__btn:hover {
	transform: none !important;
	filter: brightness(1.06) !important;
}


/* ==========================================================================
   SOCIAL RAIL
   ========================================================================== */

.v-rail:not(.v-rail--b) {
	display: flex !important;
}


/* ==========================================================================
   SOCIAL + CONTACT FLOATING ICONS
   Larger on tablet and mobile
   ========================================================================== */

@media (max-width: 960px) {

	/* Social media buttons */
	.v-rail:not(.v-rail--b) .v-rail__btn {
		width: 3.25rem !important;
		height: 3.25rem !important;
		flex: 0 0 3.25rem !important;
	}

	/* Social media icons */
	.v-rail:not(.v-rail--b) .v-rail__btn .v-ico {
		width: 1.75rem !important;
		height: 1.75rem !important;
	}

	.v-rail:not(.v-rail--b) .v-rail__btn svg {
		width: 1.75rem !important;
		height: 1.75rem !important;
	}

	/* Make the social rail spacing slightly larger */
	.v-rail:not(.v-rail--b) {
		gap: .7rem !important;
	}


	/* Call + WhatsApp buttons */
	.v-rail--b .v-rail__btn {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
	}

	/* Call + WhatsApp icons */
	.v-rail--b .v-rail__btn .v-ico {
		width: 24px !important;
		height: 24px !important;
	}

	.v-rail--b .v-rail__btn svg {
		width: 24px !important;
		height: 24px !important;
	}
		body .v-rail {
   
     width: auto!important;
     
    padding: 8px!important;
   
}
    .v-hero__right .v-panel, .v-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

	/* Social buttons */
	.v-rail:not(.v-rail--b) .v-rail__btn {
		width: 3.5rem !important;
		height: 3.5rem !important;
		flex: 0 0 3.5rem !important;
	}

	/* Social icons */
	.v-rail:not(.v-rail--b) .v-rail__btn .v-ico {
		width: 1.9rem !important;
		height: 1.9rem !important;
	}

	.v-rail:not(.v-rail--b) .v-rail__btn svg {
		width: 1.9rem !important;
		height: 1.9rem !important;
	}

	/* Spacing between social icons */
	.v-rail:not(.v-rail--b) {
		gap: .75rem !important;
	}


	/* Call + WhatsApp */
	.v-rail--b .v-rail__btn {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
	}

	.v-rail--b .v-rail__btn .v-ico {
		width: 24px !important;
		height: 24px !important;
	}

	.v-rail--b .v-rail__btn svg {
		width: 24px !important;
		height: 24px !important;
	}
		body .v-rail {
   
     width: auto!important;
     
    padding: 8px!important;
   
}
    .v-hero__right .v-panel, .v-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {
    .v-hero__right .v-panel, .v-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
	.v-rail:not(.v-rail--b) .v-rail__btn {
		width: 3.25rem !important;
		height: 3.25rem !important;
		flex-basis: 3.25rem !important;
	}

	.v-rail:not(.v-rail--b) .v-rail__btn .v-ico {
		width: 1.75rem !important;
		height: 1.75rem !important;
	}

	.v-rail:not(.v-rail--b) .v-rail__btn svg {
		width: 1.75rem !important;
		height: 1.75rem !important;
	}
	body .v-rail {
   
     width: auto!important;
     
    padding: 8px!important;
   
}
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 .4rem 1rem rgba(4, 26, 51, .2),
		inset 0 0 0 1px rgba(8, 49, 90, .08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
}

.v-hero__cta {
	cursor: pointer !important;
}

.v-hero__cta .v-btn__badge .v-ico {
	transition: transform 0.25s ease;
}

.v-hero__cta:hover .v-btn__badge .v-ico {
	transform: translate(3px, -3px);
}/* =========================================================
   HERO CTA — CLICKABLE PHONE LINK
   ========================================================= */

.v-hero__bg {
	pointer-events: none !important;
}

.v-hero__scrim {
	pointer-events: none !important;
}

.v-hero__inner {
	position: relative !important;
	z-index: 10 !important;
}

.v-hero__left {
	position: relative !important;
	z-index: 20 !important;
}

.v-hero__cta {
	position: relative !important;
	z-index: 30 !important;
	display: inline-flex !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

.v-hero__cta * {
	pointer-events: none !important;
}

.v-hero__cta:hover {
	cursor: pointer !important;
}