/* Section blocks. Structure and values follow the WordPress build's
   GenerateBlocks patterns (measured at 1440px and 375px). */

/* ---------- shell ---------- */
.vsec {
	position: relative;
	padding: var(--pt, 6rem) 2rem var(--pb, 8rem);
	background-color: var(--bg, transparent);
}
@media (max-width: 767px) {
	.vsec {
		padding: var(--ptm, var(--pt, 6rem)) 1.5rem var(--pbm, var(--pb, 6rem));
	}
}
.vsec__layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.vsec__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vsec__inner {
	position: relative;
	z-index: 1;
}
.vsec__divider {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	line-height: 0;
}
.vsec__divider--top {
	top: 0;
}
.vsec__divider--bottom {
	bottom: 0;
}
.vsec__divider .shape {
	display: block;
}
.vsec__divider svg {
	width: 100%;
	height: 2rem;
	fill: currentColor;
}
.vsec--light,
.vsec--light h2,
.vsec--light h3,
.vsec--light .gbp-section__tagline,
.vsec--light .gbp-section__text--lg {
	color: var(--base-3);
}

/* ---------- shared pieces ---------- */
/* measured per section: heading gap, heading width, paragraph gap */
.vsec h2 {
	margin-bottom: var(--h2mb, 2rem);
	max-width: var(--h2w, none);
}
.vsec :is(.v-head, .v-areas-head, .v-testimonial) > :is(.gbp-section__text--lg, .v-testimonial__intro) {
	max-width: var(--pw, none);
}
.vsec :is(.v-head--center, .v-areas-head, .v-testimonial) > * {
	margin-inline: auto;
}
.vsec .v-prose p {
	margin-bottom: var(--pmb, 1rem);
}
.vsec .gbp-section__tagline {
	margin-bottom: var(--tagmb, 2rem);
}
.v-head {
	margin-bottom: 3rem;
}
.v-head--center {
	text-align: center;
	margin-bottom: 5rem;
}
.v-head--center .gbp-section__text--lg {
	max-width: 840px;
	margin-inline: auto;
}
.v-head .gbp-section__text--lg {
	margin-bottom: 30px;
}
.v-prose > :last-child {
	margin-bottom: 0;
}
.v-prose p {
	margin-bottom: 1rem;
}
.v-prose a {
	font-weight: 700;
	color: inherit;
}
.v-prose ul {
	margin: 0 0 1rem 1.25em;
}
.v-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 2rem;
	row-gap: 1rem;
}
.v-btns--hero {
	column-gap: 3rem;
	margin-bottom: 4rem;
	color: var(--accent-2);
}
/* red "secondary" buttons (phone / free report) */
.v-btn--red {
	background-color: #c90000;
	color: var(--base-3);
	align-items: center;
	column-gap: 0.5em;
}
.v-btn--red:is(:hover, :focus) {
	background-color: var(--contrast-3);
	color: var(--global-color-10);
}
.v-btn--phone {
	padding-left: 1rem;
}
.v-btn--phone .shape {
	font-size: 1.4em;
}
/* text link with arrow */
.v-link {
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	color: var(--contrast);
	font-size: 1rem;
	font-weight: 600;
	line-height: 27px;
	transition: all 0.35s ease-in-out;
}
.v-link .shape {
	color: var(--accent-2);
	transition: transform 0.5s ease;
}
.v-link:is(:hover, :focus) {
	color: var(--accent-2);
}
.v-link:is(:hover, :focus) .shape {
	transform: translate3d(3px, 0, 0);
}
.vsec--light .v-link,
.hero .v-link {
	color: var(--base-3);
}
.hero .v-link:is(:hover, :focus) {
	color: var(--base-3);
}

/* video facade (the original YouTube-style poster) */
.v-video {
	margin-bottom: 2rem;
	border: 1px solid #000;
	border-radius: 5px;
	overflow: hidden;
}
.v-video__facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
}
.v-video--vertical .v-video__facade {
	aspect-ratio: 9 / 16;
	max-width: 405px;
}
.v-video__facade img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-video__facade .yt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	pointer-events: none;
}
.v-video__facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- hero ---------- */
.hero .vsec__inner {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 2em;
	row-gap: 1em;
}
.hero--form .vsec__inner {
	grid-template-columns: 3fr 2fr;
}
.hero .gbp-section__tagline {
	color: var(--base-3);
}
.hero h1 {
	width: 90%;
}
.hero__lede {
	color: var(--base-3);
	margin-bottom: 2rem;
}
.hero__lede p {
	margin: 0;
}
.hero__form {
	position: relative;
	z-index: 10;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: -6rem 0 -4rem;
	padding: 4rem 1rem;
	background-image: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
}
.hero__form h2 {
	color: var(--base-3);
	font-size: 1.5rem;
	margin-bottom: 1rem;
	text-align: center;
}
@media (max-width: 1024px) {
	.hero h1 {
		width: unset;
	}
	.hero--form .vsec__inner {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	.hero h1 {
		font-size: 2.5rem;
	}
	.v-btns--hero {
		flex-direction: column;
		align-items: center;
		margin-bottom: 0;
		row-gap: 2rem;
	}
	.v-btns--hero .v-btn--phone {
		align-self: stretch;
		display: flex;
		margin-bottom: 1.5rem;
	}
	.hero__form {
		display: none;
	}
}

/* ---------- split: copy beside media ---------- */
.v-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 5rem;
	row-gap: 3rem;
	align-items: start;
}
.v-split--center {
	align-items: center;
}
.v-split--text {
	grid-template-columns: minmax(0, 1fr);
	max-width: 840px;
}
.v-split__media img {
	display: block;
	width: 100%;
	height: auto;
}
.v-split__media iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 5px;
}

.v-split .v-prose + .v-btns,
.v-split .v-checks + .v-btns {
	margin-top: 0;
}
.v-split .v-prose {
	margin-bottom: 2rem;
}
.v-split .v-prose p {
	margin-bottom: 1rem;
}
.v-split .v-prose p:last-child {
	margin-bottom: 0;
}
@media (max-width: 1024px) {
	.v-split {
		grid-template-columns: 1fr;
	}
}

/* small icon checklist (icon + bold title + subtitle) */
.v-checks {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	margin-bottom: 2rem;
}
.v-check {
	display: flex;
	align-items: center;
	column-gap: 20px;
}
.v-check__icon {
	display: flex;
	flex: none;
	color: var(--accent-2);
	font-size: 32px;
}
.v-check .gbp-section__text--lg {
	margin-bottom: 4px;
}
.v-check .gbp-section__text-sm2 {
	margin: 0;
	color: inherit;
}

/* ---------- features: heading + media | icon rows ---------- */
.v-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 5em;
	row-gap: 3em;
}

.v-features__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 5px;
}
.v-features__media iframe {
	display: block;
	width: 100%;
	height: 370px;
	border: 0;
	border-radius: 5px;
}
.v-feature {
	display: flex;
	align-items: flex-start;
	column-gap: 2rem;
}
.v-feature + .v-feature + .v-feature {
	margin-top: 0;
}
.v-feature:nth-child(2):not(:last-child) {
	margin: 2rem 0;
	padding: 2rem 0;
	border-top: 1px solid var(--base);
	border-bottom: 1px solid var(--base);
}
.v-feature__icon {
	display: flex;
	flex: none;
	padding: 12px;
	border-radius: 100%;
	background-color: var(--accent-2);
	color: var(--base-3);
	font-size: 32px;
}
.v-feature h3 {
	margin-bottom: 1rem;
}
.v-feature p,
.v-feature .v-prose {
	margin-bottom: 1rem;
}
@media (max-width: 1024px) {
	.v-features {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	.v-feature {
		column-gap: 1.25rem;
	}
}

/* ---------- cards ---------- */
.v-cards {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: 3rem;
}
/* service cards: photo | text, red bottom rule, whole card turns red on hover */
.v-scard {
	display: grid;
	grid-template-columns: 2fr 3fr;
	overflow: hidden;
	background-color: var(--base-3);
	border-bottom: 4px solid var(--accent-2);
	border-radius: 5px;
	box-shadow: 0 0 25px -5px rgba(16, 16, 20, 0.06);
	color: var(--contrast-2);
	transition: all 0.35s ease-in-out;
}
.v-scard:is(:hover, :focus) {
	background-color: var(--accent-2);
	color: var(--base-3);
}
.v-scard--dark {
	background-color: var(--contrast-2);
	color: var(--base-3);
}
.v-scard__photo {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.v-scard__text {
	padding: 1.5rem;
}
.v-scard h3 {
	margin-bottom: 1rem;
	color: inherit;
	font-size: 1.6rem;
}
.v-scard p {
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1.5em;
}
.v-scard__cta {
	display: inline-flex;
	align-items: center;
	column-gap: 0.5em;
	margin: 0 !important;
}
.v-scard__cta .shape {
	font-size: 16px;
}
.v-scard:is(:hover, :focus) h3,
.v-scard--dark h3 {
	color: var(--base-3);
}
@media (max-width: 1024px) {
	.v-cards {
		grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.v-cards {
		grid-template-columns: 1fr;
	}
	.v-scard {
		display: flex;
		flex-direction: column;
	}
	.v-scard__photo {
		height: 150px;
		width: auto;
	}
}

/* post / project cards: photo top, white body, link pinned to the bottom */
.v-pcard {
	display: flex;
	flex-direction: column;
}
.v-pcard__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1.91;
	object-fit: cover;
	border-radius: 4px 4px 0 0;
}
.v-pcard__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 2rem;
	background-color: var(--base-3);
	border-radius: 0 0 4px 4px;
}
.v-pcard h3 {
	margin-bottom: 2rem;
}
.v-pcard h3 a {
	color: var(--contrast-2);
}
.v-pcard h3 a:hover {
	color: var(--accent-2);
}
.v-pcard .v-link {
	margin-top: auto;
}

/* ---------- centred video testimonial ---------- */
.v-testimonial {
	text-align: center;
}
.v-testimonial h2 {
	max-width: 600px;
	margin: 0 auto 2rem;
}
.v-testimonial__intro {
	max-width: 900px;
	margin: 0 auto 3rem;
}
.v-testimonial__intro p:last-child {
	margin-bottom: 0;
}
.v-testimonial .v-video {
	max-width: 960px;
	margin: 0 auto 2rem;
}
.v-testimonial__quote {
	max-width: 840px;
	margin: 0 auto 2rem;
}
.v-testimonial__name {
	margin-bottom: 1rem;
}
.v-testimonial__logo {
	display: inline-block;
}
.v-testimonial__logo img {
	width: 175px;
	height: auto;
}
.vsec--light .v-testimonial__intro,
.vsec--light .v-testimonial__name {
	color: var(--base-3);
}

/* ---------- photo + dark panel call-to-action ---------- */
.v-ctapanel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v-ctapanel__photo {
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 4px 0 0 4px;
}
.v-ctapanel__body {
	padding: 4rem;
	background-color: var(--contrast-3);
	border-radius: 0 4px 4px 0;
	color: var(--base-3);
}
.v-ctapanel__body h2,
.v-ctapanel__body h3 {
	color: var(--base-3);
}
.v-ctapanel__body .v-prose p {
	margin-bottom: 1.5em;
}
.v-ctapanel__body .gbp-button--primary {
	margin-bottom: 3rem;
}
.v-phonecard {
	display: flex;
	align-items: center;
	column-gap: 1rem;
	border-radius: 4px;
	color: var(--base-3);
}
.v-phonecard:hover {
	color: var(--base-3);
}
.v-phonecard .v-feature__icon {
	flex: none;
}
.v-phonecard p {
	margin: 0 0 0.1rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--base-3);
}
.v-phonecard h3 {
	margin: 0;
}
@media (max-width: 767px) {
	.v-ctapanel {
		grid-template-columns: 1fr;
	}
	.v-ctapanel__photo {
		min-height: 220px;
		border-radius: 4px 4px 0 0;
	}
	.v-ctapanel__body {
		padding: 3rem 1.5rem;
		border-radius: 0 0 4px 4px;
	}
}

/* ---------- service areas ---------- */
.v-areas-head {
	text-align: center;
	margin-bottom: 4rem;
}
.v-areas-head .gbp-section__text--lg {
	max-width: 900px;
	margin: 0 auto 30px;
}
.v-areas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3rem;
	max-width: 952px;
	margin: 4rem auto 0;
}
.v-areas ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}
.v-areas li {
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	margin-bottom: 1.5em;
}
.v-areas a {
	color: var(--accent);
	font-weight: 500;
}
.v-areas a:hover {
	color: var(--accent-2);
}
@media (max-width: 767px) {
	.v-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 2rem;
	}
}

/* ---------- device-specific pieces ---------- */
@media (max-width: 767px) {
	.v-only-desktop {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.v-only-mobile {
		display: none !important;
	}
}

/* ---------- tablet + phone rules (from the original's breakpoints) ---------- */
@media (max-width: 767px) {
	.vsec h2 {
		max-width: var(--h2wm, none);
	}
	.vsec :is(.v-head, .v-areas-head, .v-testimonial) > :is(.gbp-section__text--lg, .v-testimonial__intro) {
		max-width: var(--pwm, none);
	}
	.vsec[style*="--pfsm"] :is(.v-head, .v-areas-head, .v-testimonial) > :is(.gbp-section__text--lg, .v-testimonial__intro) {
		font-size: var(--pfsm);
	}
}
@media (max-width: 1024px) {
	.v-testimonial h2 {
		max-width: 80%;
	}
	.v-testimonial__intro {
		max-width: 100%;
	}
	.v-testimonial__quote {
		max-width: 95%;
	}
	.v-ctapanel {
		grid-template-columns: 1fr;
	}
	.v-ctapanel__photo {
		min-height: 600px;
		border-radius: 4px 4px 0 0;
	}
	.v-ctapanel__body {
		border-radius: 0 0 4px 4px;
	}
	.v-cards[style*="--cols:3"] {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	/* split: media first, stacked full-width buttons */
	.v-split > div:not(.v-split__media) {
		order: 1;
	}
	.v-split .v-btns {
		flex-direction: column;
		align-items: stretch;
		row-gap: 2rem;
	}
	.v-split .v-btns .v-link {
		align-self: center;
	}
	.v-check {
		align-items: flex-start;
	}
	.v-check__icon {
		margin-top: 5px;
	}
	.v-feature {
		flex-direction: column;
		row-gap: 1rem;
	}
	.v-testimonial h2,
	.v-testimonial__quote {
		max-width: 100%;
	}
	.v-testimonial__intro {
		font-size: 0.8rem;
		line-height: 1.45;
	}
	.v-ctapanel__photo {
		min-height: 400px;
	}
	.v-ctapanel__body {
		padding: 2rem;
	}
	.v-phonecard p {
		font-size: 1rem;
		text-align: left;
	}
	.v-phonecard h3 {
		text-align: left;
	}
	.v-scard h3 {
		font-size: clamp(1.313rem, 1.157vw + 0.757rem, 1.625rem);
	}
}