/* ==========================================================================
   Location page flexible block library
   Shared by the City Lander and City + Service Sub-page templates so any
   future /locations/ page is built from this same block set.
   Brand tokens match style.css: navy #002A3F, gold #FFB605, Proxima Nova.
   ========================================================================== */

.vnd-block {
	padding: 70px 0;
}

.vnd-block-heading {
	font-family: 'Proxima Nova', sans-serif;
	color: #002A3F;
	font-size: 34px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.vnd-block-heading-center {
	text-align: center;
}

.vnd-block-body {
	font-size: 18px;
	line-height: 1.6;
	color: #333;
	margin-bottom: 25px;
}

.vnd-block-intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
	font-size: 18px;
	color: #333;
}

/* ---- Sub-page breadcrumbs ---- */
.vnd-location-breadcrumbs {
	background: #002A3F;
	padding: 16px 0;
	margin-top: -102px;
	padding-top: 210px;
	font-size: 14px;
	color: #cfd8de;
}

.vnd-location-breadcrumbs .breadcrumbs-link {
	color: #FFB605;
}

.vnd-location-breadcrumbs-sep {
	margin: 0 8px;
	color: #5a7280;
}

/* ---- Hero ---- */
.vnd-block-hero {
	position: relative;
	padding: 190px 0 90px;
	margin-top: -102px;
	background-color: #002A3F;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}

.vnd-block-hero-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.vnd-block-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 42, 63, 0.88) 0%, rgba(0, 42, 63, 0.55) 60%, rgba(0, 42, 63, 0.25) 100%);
	pointer-events: none;
}

.vnd-block-hero .container {
	position: relative;
}

/* Bootstrap's col-lg-* classes only carry gutter padding at the lg breakpoint
   and above; without a base col class, mobile viewports get zero horizontal
   padding on these columns. Restore it explicitly at all sizes. */
.vnd-block .row > [class*="col-lg-"] {
	padding-left: 12px;
	padding-right: 12px;
}

.vnd-block-hero-breadcrumb {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 16px;
}

.vnd-block-hero-breadcrumb-link {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	transition: color .15s ease, border-color .15s ease;
}

.vnd-block-hero-breadcrumb-link:hover,
.vnd-block-hero-breadcrumb-link:focus-visible {
	color: #fff;
	border-color: #fff;
}

.vnd-block-hero-breadcrumb-sep {
	color: rgba(255, 255, 255, 0.45);
	margin: 0 2px;
}

.vnd-block-hero-breadcrumb-current {
	color: #fff;
}

.vnd-block-hero-eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFB605;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.vnd-block-hero-eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	background: #FFB605;
	transform: skewX(-20deg);
}

.vnd-block-hero-heading {
	font-size: 48px;
	font-weight: 700;
	color: #fff !important;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.vnd-block-hero-subheading {
	font-size: 20px;
	color: #f0f3f6;
	max-width: 60ch;
	margin-bottom: 30px;
}

/* ---- Text + Image ---- */
.vnd-block-ti-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.vnd-block-text-image .vnd-block-ti-text {
	padding: 20px 0;
}

/* ---- Stat Row ---- */
.vnd-block-stat-row {
	background-color: #f5f6f8;
}

.vnd-stat-grid {
	display: grid;
	gap: 30px;
	text-align: center;
	grid-template-columns: repeat(2, 1fr);
}

.vnd-stat-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.vnd-stat-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.vnd-stat-number {
	font-size: 42px;
	font-weight: 700;
	color: #FFB605;
	font-family: 'Proxima Nova', sans-serif;
}

.vnd-stat-label {
	font-size: 16px;
	color: #002A3F;
	margin-top: 6px;
}

/* ---- Service Grid ---- */
.vnd-service-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.vnd-service-card {
	display: block;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 4px;
	padding: 30px 24px;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}

a.vnd-service-card:hover {
	box-shadow: 8px 8px 0px 0px #002A3F;
	transform: translate(-2px, -2px);
	text-decoration: none;
	color: inherit;
}

.vnd-service-card-icon {
	width: 44px;
	height: 44px;
	object-fit: contain;
	margin-bottom: 16px;
}

.vnd-service-card-icon-svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, #002A3F 0%, #34A5A6 100%);
	color: #fff;
	box-shadow: 0 8px 16px -8px rgba(0, 42, 63, 0.45);
}

.vnd-service-card-icon-svg svg {
	width: 24px;
	height: 24px;
}

/* Alternate the icon tile gradient by position so a grid of cards doesn't
   read as one repeated stamp. */
.vnd-service-card:nth-child(2) .vnd-service-card-icon-svg,
.vnd-cs-card:nth-child(2) .vnd-service-card-icon-svg {
	background: linear-gradient(135deg, #FA8400 0%, #FFB605 100%);
	box-shadow: 0 8px 16px -8px rgba(250, 132, 0, 0.45);
}

.vnd-service-card:nth-child(3) .vnd-service-card-icon-svg {
	background: linear-gradient(135deg, #34A5A6 0%, #6ACDEB 100%);
	box-shadow: 0 8px 16px -8px rgba(52, 165, 166, 0.45);
}

.vnd-service-card-title {
	font-size: 20px;
	font-weight: 700;
	color: #002A3F;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.vnd-service-card-desc {
	font-size: 15px;
	color: #4a5568;
	margin: 0;
}

/* ---- CTA Banner ---- */
.vnd-block-cta-dark {
	background-color: #002A3F;
	color: #fff;
}

.vnd-block-cta-dark .vnd-block-heading,
.vnd-block-cta-dark .vnd-block-cta-body {
	color: #fff;
}

.vnd-block-cta-light {
	background-color: #f5f6f8;
}

.vnd-block-cta-body {
	font-size: 18px;
	margin: 0;
	color: #333;
}

.vnd-block-cta-action {
	text-align: right;
}

.vnd-block-cta-action .vnd-btn,
.vnd-block-hero-cta {
	display: inline-block;
	text-align: center;
}

/* ---- FAQ ---- */
.vnd-faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.vnd-faq-item {
	border-bottom: 1px solid #e4e7ec;
}

.vnd-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: none;
	padding: 22px 0;
	font-size: 18px;
	font-weight: 700;
	color: #002A3F;
	text-align: left;
	cursor: pointer;
	font-family: 'Proxima Nova', sans-serif;
}

.vnd-faq-toggle {
	flex: 0 0 auto;
	font-size: 24px;
	color: #FFB605;
	line-height: 1;
	transition: transform .15s ease;
}

.vnd-faq-item.is-open .vnd-faq-toggle {
	transform: rotate(45deg);
}

.vnd-faq-answer {
	padding: 0 0 22px;
	color: #4a5568;
	font-size: 16px;
	line-height: 1.6;
}

/* ---- Founders / Why VND ---- */
.vnd-block-founders {
	background-color: #f5f6f8;
}

.vnd-founders-photo-col img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 24px;
}

.vnd-founders-quote {
	margin: 0 0 12px;
	padding: 0;
	border: none;
	font-size: 22px;
	font-weight: 700;
	font-style: italic;
	color: #002A3F;
	line-height: 1.4;
}

.vnd-founders-names {
	font-size: 16px;
	font-weight: 700;
	color: #002A3F;
	text-transform: uppercase;
}

.vnd-founders-title {
	font-size: 14px;
	color: #5b6472;
}

.vnd-founders-history-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: #8a919c;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vnd-founders-history-link:hover {
	color: #FFB605;
}

.vnd-founders-reasons-col {
	padding-left: 40px;
}

.vnd-founders-reasons {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, 1fr);
}

.vnd-founders-reason-title {
	font-size: 17px;
	font-weight: 700;
	color: #002A3F;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.vnd-founders-reason-desc {
	font-size: 15px;
	color: #4a5568;
	margin: 0;
}

/* ---- Founders compact variant: small "meet the team" card ---- */
/* Photo is a rectangular crop on the left, not a small round avatar — a
   round crop at this size clipped faces on some source photos. */
.vnd-block-founders-compact {
	padding: 50px 0;
}

.vnd-founders-compact-card {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 24, 33, 0.04), 0 6px 20px -8px rgba(20, 24, 33, 0.10);
}

.vnd-founders-compact-photo {
	flex: 0 0 280px;
	width: 280px;
	min-height: 260px;
	object-fit: cover;
}

.vnd-founders-compact-text {
	min-width: 0;
	padding: 32px 36px;
}

.vnd-founders-compact-card .vnd-founders-quote {
	font-size: 17px;
	margin-bottom: 8px;
}

.vnd-founders-compact-card .vnd-founders-names {
	font-size: 14px;
}

.vnd-founders-compact-card .vnd-founders-title {
	margin-bottom: 10px;
}

.vnd-founders-compact-body {
	font-size: 15px;
	line-height: 1.6;
	color: #4a5568;
	margin: 0 0 10px;
}

.vnd-founders-compact-card .vnd-link {
	font-size: 14px;
	font-weight: 700;
	color: #002A3F;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vnd-founders-compact-card .vnd-link:hover {
	color: #FFB605;
}

/* ---- Proof of Work ---- */
.vnd-pow-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(4, 1fr);
}

.vnd-pow-card {
	display: block;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, transform .15s ease;
}

a.vnd-pow-card:hover {
	box-shadow: 6px 6px 0px 0px #002A3F;
	transform: translate(-2px, -2px);
	text-decoration: none;
	color: inherit;
}

.vnd-pow-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: #eef0f4;
}

.vnd-pow-card-name {
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 700;
	color: #002A3F;
	text-align: center;
	text-transform: uppercase;
}

.vnd-pow-portfolio-link-wrap {
	text-align: center;
	margin-top: 24px;
}

.vnd-pow-portfolio-link {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: #8a919c;
	text-decoration: underline;
}

.vnd-pow-portfolio-link:hover {
	color: #FFB605;
}

/* ---- City lander -> sub-page cross-links ----
   Auto-generated from published child location pages (see
   location-city-template.php). Uses auto-fit instead of a fixed 3-col
   grid so it still looks intentional with only 1-2 sub-pages live,
   and grows into a full grid as more are published. */
.vnd-block-city-services .vnd-service-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
	justify-content: center;
}

/* ---- Free Technology Assessment landing page ---- */
/* .vnd-block-hero sets margin-top:-102px (tuned for a transparent nav on
   other hero usages) plus padding-top:260px, but this page's fixed header
   is only ~77px tall - the smaller 170px override below used to leave the
   form card's top edge underlapping the header. Decoupled from the base
   hero's negative margin and given real clearance instead. */
.vnd-fta-hero {
	margin-top: -40px;
	padding: 150px 0 110px;
}

.vnd-fta-hero-row {
	align-items: flex-start;
}

.vnd-fta-hero .vnd-block-hero-subheading {
	max-width: 46ch;
	/* Default hero subheading spacing (30px) was pushing "No cost. No
	   obligation." down toward the logo marquee below it instead of
	   staying close to the paragraph it belongs to. */
	margin-bottom: 10px;
}

.vnd-fta-form-card {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 8px;
	padding: 22px 22px;
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

.vnd-fta-form-title {
	font-family: 'Proxima Nova', sans-serif;
	color: #002A3F;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
}

.vnd-fta-form-card .wpcf7 {
	background: transparent !important;
}

/* CF7 wraps each field in its own <p>; the browser default ~1em margin on
   those was the source of the "empty space under the heading" and the
   oversized gap under the submit button, on top of the form-control's own
   margin-bottom. Collapse it down to one consistent, small gap. */
.vnd-fta-form-card form p {
	margin: 0 0 10px;
}

.vnd-fta-form-card form p:last-child {
	margin-bottom: 0;
}

.vnd-fta-form-card .wpcf7-form-control {
	width: 100%;
	border: 1px solid #d7dce3;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 14px;
	background: #fff !important;
	color: #002A3F;
}

.vnd-fta-form-card select.wpcf7-form-control {
	background: #fff;
}

.vnd-fta-form-card textarea.wpcf7-form-control {
	height: 52px;
	min-height: 52px;
	resize: none;
}

body #assessment-form .wpcf7-submit {
	position: relative;
	width: 100%;
	background: #FFB605 !important;
	color: #002A3F;
	border: none !important;
	border-radius: 4px;
	padding: 13px 40px 13px 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
}

.vnd-fta-form-card .wpcf7-submit:hover {
	background: #e6a405;
}

/* The site-wide "send arrow" script (see contact-template.php /
   WPCode global footer) inserts an <img class="send-arrow"> as the submit
   button's next sibling on every CF7 form on the site. Because this
   button is full-width, that image had nowhere to sit but on its own line
   below it. Rather than touch the global script, pull it inside the
   button's bottom-right corner here, scoped to this page's form only. */
.vnd-fta-form-card form p:has(> .wpcf7-submit) {
	position: relative;
}

.vnd-fta-form-card .send-arrow {
	position: absolute;
	right: 14px;
	bottom: 12px;
	width: 16px !important;
	height: auto;
	margin: 0 !important;
	pointer-events: none;
}

.vnd-fta-form-card .wpcf7-not-valid-tip {
	font-size: 12px;
	margin: -6px 0 8px;
}

.vnd-fta-form-card .wpcf7-response-output {
	margin-top: 10px;
	font-size: 13px;
	border-radius: 4px;
}

/* ---- Client logo marquee, overlapping the bottom of the form card ----
   Positioned absolutely against the hero's container (not the document
   flow) so it can run under the form's lower edge per feedback - the form
   card's own opaque white background is what visually "covers" it where
   the two overlap, via a higher z-index, not any special clipping. */
.vnd-fta-marquee {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 1;
	/* Matches the 12px Bootstrap row-child gutter the hero text column gets
	   (measured live: eyebrow left edge sits exactly 12px right of the
	   container edge this absolutely-positioned block starts from), so the
	   heading below lines up with "FREE TECHNOLOGY ASSESSMENT" above it. */
	padding-left: 12px;
	padding-right: 12px;
}

.vnd-fta-marquee-heading {
	text-align: left;
	font-family: 'Proxima Nova', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #FFB605;
	margin-bottom: 16px;
}

.vnd-fta-marquee-track-wrap {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.vnd-fta-marquee-track {
	display: flex;
	align-items: center;
	gap: 30px;
	width: max-content;
	animation: vnd-fta-marquee-scroll 32s linear infinite;
}

.vnd-fta-marquee-logo {
	width: 130px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	background: #fff;
	border-radius: 10px;
	padding: 14px;
}

.vnd-fta-marquee-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@keyframes vnd-fta-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.vnd-fta-marquee-track {
		animation: none;
	}
}

/* ---- Problem section + Why VND credentials card side by side: the pain
   points get the wider column, Why VND is a distinct bordered card next to
   it rather than its own full-width section. ---- */
.vnd-fta-problem-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	align-items: start;
}

.vnd-fta-problem-main .vnd-block-heading {
	text-align: left;
}

.vnd-fta-why-card {
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	padding: 26px 24px;
	box-shadow: 0 12px 30px -18px rgba(0, 42, 63, 0.25);
}

.vnd-fta-why-photo {
	width: 100%;
	height: 190px;
	object-fit: cover;
	object-position: center 25%;
	border-radius: 8px;
	margin-bottom: 16px;
}

.vnd-fta-why-title {
	font-family: 'Proxima Nova', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #002A3F;
	margin-bottom: 8px;
}

.vnd-fta-why-body {
	font-size: 13.5px;
	color: #5a7280;
	margin: 0 0 16px;
}

.vnd-fta-why-btn {
	display: inline-block;
	padding: 10px 20px !important;
	font-size: 12.5px !important;
}

@media (max-width: 767px) {
	.vnd-fta-problem-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Unified "What We Review" section: text + icons on the left, a
   decorative graphic panel on the right instead of a second text column ---- */
.vnd-fta-review-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 40px;
	align-items: center;
}

.vnd-fta-review-graphic {
	position: relative;
	min-height: 320px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(160deg, #0b3652, #002A3F 65%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.vnd-fta-review-graphic-overlay {
	display: none;
}

.vnd-fta-flow-svg {
	width: 100%;
	height: auto;
	max-width: 420px;
}

.vnd-fta-flow-label {
	font-family: 'Proxima Nova', sans-serif;
	font-size: 13px;
	font-weight: 700;
	fill: #e8edfc;
}

.vnd-fta-flow-label-muted {
	fill: #8b93a1;
	font-weight: 600;
}

.vnd-fta-flow-label-sm {
	font-size: 11.5px;
}

.vnd-fta-walkaway {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #e0e3e9;
}

.vnd-fta-walkaway-label {
	display: block;
	font-family: 'Proxima Nova', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: #002A3F;
	margin-bottom: 10px;
}

.vnd-fta-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vnd-fta-pill {
	font-size: 12.5px;
	color: #002A3F;
	background: #fff;
	border: 1px solid #e0e3e9;
	border-radius: 100px;
	padding: 6px 14px;
}

@media (max-width: 767px) {
	.vnd-fta-review-grid {
		grid-template-columns: 1fr;
	}

	.vnd-fta-review-graphic {
		min-height: 240px;
	}
}

/* ---- 6th "get a quote" CTA card, styled apart from the 5 informational
   assessment cards next to it ---- */
.vnd-fta-quote-card {
	background: #002A3F;
	border-color: #002A3F;
}

.vnd-fta-quote-card .vnd-service-card-title,
.vnd-fta-quote-card .vnd-service-card-desc {
	color: #fff;
}

.vnd-fta-quote-cta {
	display: inline-block;
	margin-top: 10px;
	font-family: 'Proxima Nova', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #FFB605;
}

/* ---- Slim "What We Don't Review" row ---- */
.vnd-fta-not-row {
	padding: 22px 0;
}

.vnd-fta-not-label {
	font-family: 'Proxima Nova', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: #002A3F;
	margin-bottom: 6px;
}

.vnd-fta-not-text {
	font-size: 13.5px;
	color: #8b93a1;
	max-width: 90ch;
	margin: 0;
}

.vnd-fta-icon-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.vnd-fta-icon-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.vnd-fta-icon-list svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 2px;
	color: #FFB605;
}

.vnd-fta-icon-list div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vnd-fta-icon-list strong {
	font-size: 14.5px;
	color: #002A3F;
}

.vnd-fta-icon-list span {
	font-size: 13.5px;
	color: #5a7280;
}

.vnd-fta-pain-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, 1fr);
	max-width: 900px;
	margin: 0 auto;
}

.vnd-fta-pain-item {
	background: #f5f6f8;
	border-left: 3px solid #FFB605;
	border-radius: 4px;
	padding: 14px 18px;
	font-size: 15px;
	color: #333;
}

.vnd-fta-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.vnd-fta-list li {
	padding-left: 26px;
	position: relative;
	font-size: 16px;
	color: #333;
}

.vnd-fta-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #FFB605;
}

/* Same fixed-button overlap issue as the location pages, scoped to this
   campaign landing page only. */
@media (max-width: 767px) {
	body.page-template-free-site-analysis-template .callNow,
	body.page-template-free-site-analysis-template .scheduleNow {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.vnd-fta-pain-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Responsive ---- */
/* The site-wide floating Call Now / Schedule Zoom buttons sit fixed at a
   mid-viewport height and overlap block content on narrow screens (same
   issue previously fixed page-scoped on the WordPress campaign lander).
   Hide them below 768px on location pages so they don't cover text. */
@media (max-width: 767px) {
	body.single-location .callNow,
	body.single-location .scheduleNow {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.vnd-block {
		padding: 45px 0;
	}

	.vnd-block-hero {
		padding: 150px 0 60px;
	}

	.vnd-location-breadcrumbs {
		padding-top: 130px;
	}

	.vnd-block-hero-heading {
		font-size: 32px;
	}

	.vnd-stat-grid,
	.vnd-stat-grid-3,
	.vnd-stat-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.vnd-service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.vnd-block-text-image .row {
		flex-direction: column-reverse;
	}

	.vnd-block-ti-left .row {
		flex-direction: column-reverse;
	}

	.vnd-block-ti-image {
		margin-bottom: 24px;
	}

	.vnd-block-cta-action {
		text-align: left;
		margin-top: 20px;
	}

	.vnd-founders-reasons-col {
		padding-left: 0;
		margin-top: 30px;
	}

	.vnd-founders-reasons {
		grid-template-columns: 1fr;
	}

	.vnd-pow-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.vnd-founders-compact-card {
		flex-direction: column;
		text-align: center;
	}

	.vnd-founders-compact-photo {
		flex-basis: auto;
		width: 100%;
		min-height: 200px;
	}

	.vnd-founders-compact-text {
		padding: 24px;
	}
}

@media (max-width: 575px) {
	.vnd-stat-grid,
	.vnd-stat-grid-3,
	.vnd-stat-grid-4,
	.vnd-service-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Text + Image: full width (text-only) variant ---- */
.vnd-block-ti-full .vnd-block-ti-text {
	text-align: center;
}

/* ---- Case Studies ---- */
.vnd-cs-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.vnd-cs-card {
	display: block;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 4px;
	padding: 26px 24px;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}

.vnd-cs-card-project {
	padding: 0;
	overflow: hidden;
}

.vnd-cs-card-project .vnd-cs-card-body {
	padding: 18px 20px;
}

.vnd-cs-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center top;
	background-color: #eef0f4;
}

a.vnd-cs-card:hover {
	box-shadow: 8px 8px 0px 0px #002A3F;
	transform: translate(-2px, -2px);
}

.vnd-cs-card-name {
	font-size: 16px;
	font-weight: 700;
	color: #002A3F;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.vnd-cs-card-project .vnd-cs-card-name {
	margin-bottom: 0;
}

.vnd-cs-card-desc {
	font-size: 14.5px;
	color: #4a5568;
	margin: 0;
}

/* ---- AI Highlight ---- */
.vnd-block-ai-highlight {
	padding-top: 0;
}

.vnd-ai-highlight-card {
	display: flex;
	align-items: center;
	gap: 24px;
	background: linear-gradient(135deg, #002A3F 0%, #0b4c6e 100%);
	border-radius: 8px;
	padding: 36px 40px;
	color: #fff;
}

.vnd-ai-highlight-badge {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.04em;
}

.vnd-ai-highlight-text {
	flex: 1 1 auto;
}

.vnd-ai-highlight-text .vnd-block-heading {
	color: #fff;
	margin-bottom: 6px;
}

.vnd-ai-highlight-body {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
}

.vnd-ai-highlight-link {
	display: inline-block;
	margin-top: 10px;
	color: #FFB605;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.vnd-ai-highlight-link:hover,
.vnd-ai-highlight-link:focus {
	color: #fff;
	text-decoration: underline;
}

.vnd-ai-highlight-cta {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.vnd-cs-grid {
		grid-template-columns: 1fr;
	}

	.vnd-ai-highlight-card {
		flex-direction: column;
		text-align: center;
		padding: 28px 24px;
	}
}

/* ---- CTA + Why VND (two columns: quote CTA wide, Why VND card narrow) ---- */
.vnd-ctawhy-grid {
	align-items: stretch;
}

.vnd-ctawhy-cta {
	background-color: #002A3F;
	color: #fff;
	border-radius: 10px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vnd-ctawhy-cta .vnd-block-heading,
.vnd-ctawhy-cta .vnd-block-cta-body {
	color: #fff;
}

.vnd-ctawhy-cta .vnd-btn {
	align-self: flex-start;
}

.vnd-block-cta-why-us .vnd-fta-why-card {
	display: flex;
	flex-direction: column;
}

@media (max-width: 767px) {
	.vnd-ctawhy-cta {
		padding: 30px 26px;
	}
}

/* ---- Section rhythm (Industries pages only): alternate a light background
   behind the two Service Grid sections (pain points, then service fit) so
   the page doesn't read as one long white scroll. Targets fixed positions
   in the known block sequence rather than every block, since Hero, AI
   Highlight, and CTA + Why VND already carry their own strong backgrounds. ---- */
.page-template-industries-flex-template-php .vnd-block:nth-of-type(3),
.page-template-industries-flex-template-php .vnd-block:nth-of-type(5) {
	background-color: #f5f6f8;
}

/* ---- Scroll-reveal (Industries pages only, see template-parts/industry-blocks/render.php) ---- */
.vnd-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s ease;
}

.vnd-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vnd-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* AI App Rescue page: a legacy global rule (.page-id-43961 h1 { line-height: 0.7 !important }) squeezes the hero H1 lines together. Restore normal spacing. */
body.page-id-43961 h1.vnd-block-hero-heading {
	line-height: 1.15 !important;
	margin-top: 10px;
}