/**
 * VCI homepage — Figma-aligned layout and responsive refinements.
 * Scoped to .vci-home--* sections only.
 */

/* -------------------------------------------------------------------------
   Design tokens (reference; inline blocks still set base colors)
   ------------------------------------------------------------------------- */
:root {
	--vci-ink: #2d2828;
	--vci-body: #646464;
	--vci-muted: #808080;
	--vci-surface: #f9f9f9;
	--vci-brand: #b34b2b;
	--vci-stroke-grid: #776F6D;
	--vci-stroke-hairline: #d3d3d3;
	--vci-radius-card: 10px;
	--vci-container: 1280px;
	--vci-gutter: clamp(1.25rem, 4.2vw, 5rem);
	/* Figma Desktop/Button — shared by all .vci-home CTAs */
	--vci-btn-pad-y: 15px;
	--vci-btn-pad-x: 24px;
	--vci-btn-outline-stroke: #d6d2d1;
}

/* -------------------------------------------------------------------------
   Buttons — Figma Desktop/Button (12 Semibold, lh 1, tracking 10%, pill)
   Same padding on primary + outline; inline block styles overridden here
   ------------------------------------------------------------------------- */
.vci-home .wp-block-button__link {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--vci-btn-pad-y) var(--vci-btn-pad-x) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-radius: 99px !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.vci-home .wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px !important;
	border-style: solid !important;
	border-color: var(--vci-btn-outline-stroke) !important;
}

.vci-home .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: 1px solid var(--vci-brand) !important;
}

/* -------------------------------------------------------------------------
   Hero + “Why VCI” grid (.vci-home--hero)
   ------------------------------------------------------------------------- */
.vci-home--hero.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
}

@media (min-width: 1320px) {
	.vci-home--hero.wp-block-group.alignfull {
		padding-left: max(1.25rem, calc((100vw - var(--vci-container)) / 2)) !important;
		padding-right: max(1.25rem, calc((100vw - var(--vci-container)) / 2)) !important;
	}
}

/* Hero row: three columns */
.vci-home--hero .wp-block-columns.are-vertically-aligned-center {
	gap: 1.25rem;
	align-items: center;
}

.vci-home--hero .wp-block-columns.are-vertically-aligned-center .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--vci-radius-card);
	object-fit: cover;
}

/* Hero side images: parallax (JS sets inline transform; off if reduced motion or under 782px) */
@media (prefers-reduced-motion: no-preference) {
	@media (min-width: 782px) {
		.vci-home--hero .wp-block-columns.are-vertically-aligned-center .wp-block-image img {
			will-change: transform;
		}
	}
}

/* Side rails: proportional widths closer to Figma (~23% / 54% / 23%) */
@media (min-width: 782px) {
	.vci-home--hero .wp-block-columns.are-vertically-aligned-center > .wp-block-column:nth-child(1),
	.vci-home--hero .wp-block-columns.are-vertically-aligned-center > .wp-block-column:nth-child(3) {
		flex: 0 0 23% !important;
		max-width: 23%;
	}

	.vci-home--hero .wp-block-columns.are-vertically-aligned-center > .wp-block-column:nth-child(2) {
		flex: 1 1 54% !important;
		max-width: 54%;
	}
}

/* Display headline: fluid scale (Figma 80px desktop) */
.vci-home--hero .wp-block-columns.are-vertically-aligned-center h1.wp-block-heading {
	font-size: clamp(2.125rem, 3.5vw + 1rem, 5rem) !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
	max-width: 58.0625rem;
	margin-left: auto;
	margin-right: auto;
}

/* Body copy under hero headline (~560px in Figma); keep H1 full width */
.vci-home--hero .wp-block-columns.are-vertically-aligned-center .wp-block-group > p.has-text-align-center {
	max-width: 35rem;
	margin-left: auto;
	margin-right: auto;
}

/* Mobile / tablet: stack hero, hide side imagery, lead with copy */
@media (max-width: 781px) {
	.vci-home--hero .wp-block-columns.are-vertically-aligned-center {
		flex-direction: column;
	}

	.vci-home--hero .wp-block-columns.are-vertically-aligned-center > .wp-block-column:nth-child(1),
	.vci-home--hero .wp-block-columns.are-vertically-aligned-center > .wp-block-column:nth-child(3) {
		display: none;
	}

	.vci-home--hero .wp-block-columns.are-vertically-aligned-center > .wp-block-column:nth-child(2) {
		flex-basis: 100% !important;
		max-width: 100%;
	}
}

/* About / “Why VCI” intro block inside hero (single direct group) */
.vci-home--hero > .wp-block-group {
	width: 100%;
}

.vci-home--hero > .wp-block-spacer {
	height: clamp(3rem, 8vw, 6rem) !important;
}

/* “Why VCI” values grid — single grid, 3 / 2 / 1 columns + Figma hairline borders */
.vci-home--values-grid-wrap {
	width: 100%;
}

.vci-values-grid {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 auto;
	width: 100%;
	max-width: var(--vci-container);
	border-top: 1px solid var(--vci-stroke-grid);
	border-left: 1px solid var(--vci-stroke-grid);
	box-sizing: border-box;
}

@media (min-width: 782px) {
	.vci-values-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vci-values-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vci-values-grid__cell {
	margin: 0;
	background: var(--vci-surface);
	border-right: 1px solid var(--vci-stroke-grid);
	border-bottom: 1px solid var(--vci-stroke-grid);
	padding: clamp(2rem, 5vw, 3.625rem) clamp(1.25rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem;
	text-align: center;
	box-sizing: border-box;
	min-width: 0;
}

.vci-values-grid__icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	object-fit: contain;
	display: block;
}

.vci-values-grid__text {
	margin: 0;
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	line-height: 1.2;
	color: var(--vci-ink);
	max-width: 22rem;
	hyphens: auto;
	word-break: break-word;
}

/* -------------------------------------------------------------------------
   About Us — editor grid (.vci-home--about-us)
   Figma: outer border + hairlines between rows/columns (no double lines)
   Top half: light surface; bottom half: dark (--vci-ink)
   ------------------------------------------------------------------------- */
.vci-home--about-us.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
	background: linear-gradient(
		to bottom,
		var(--vci-surface) 0%,
		var(--vci-surface) 50%,
		var(--vci-ink) 50%,
		var(--vci-ink) 100%
	) !important;
}

.vci-home--about-us .wp-block-group.is-layout-grid {
	display: grid;
	/* Mobile: 1 column — override editor inline grid-template-columns */
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	border-top: 1px solid var(--vci-stroke-grid);
	border-left: 1px solid var(--vci-stroke-grid);
	gap: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--vci-container);
	margin-left: auto;
	margin-right: auto;
}

/* Tablet: 2 columns */
@media (min-width: 782px) {
	.vci-home--about-us .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
	.vci-home--about-us .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

.vci-home--about-us .wp-block-group.is-layout-grid > * {
	border-right: 1px solid var(--vci-stroke-grid);
	border-bottom: 1px solid var(--vci-stroke-grid);
	box-sizing: border-box;
	min-width: 0;
	margin: 0 !important;
	padding: clamp(1.5rem, 4vw, 3.625rem) clamp(1rem, 2.5vw, 2.5rem);
	background-color: var(--vci-surface);
}

.vci-home--about-us .wp-block-group.is-layout-grid > .wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.vci-home--about-us .wp-block-group.is-layout-grid > p {
	text-align: center;
}

.vci-home--about-us .wp-block-group.is-layout-grid p {
	margin: 0;
	max-width: 22rem;
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	line-height: 1.2;
	color: var(--vci-ink);
	hyphens: auto;
	word-break: break-word;
}

/* -------------------------------------------------------------------------
   Industry / manifesto (.vci-home--industry)
   ------------------------------------------------------------------------- */
.vci-home--industry.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
}

.vci-home--industry.wp-block-group.alignfull > * {
	max-width: 47rem;
	margin-left: auto;
	margin-right: auto;
}

.vci-home--industry.wp-block-group.alignfull > .wp-block-heading {
	width: 100%;
	text-align: left;
}

/* Signature line: match Figma body XL (20/30), not oversized display */
.vci-home--industry > p.has-text-color:last-of-type {
	font-size: 1.25rem !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	margin-top: 1.5rem !important;
	margin-bottom: 3rem !important;
}

@media (max-width: 600px) {
	.vci-home--industry h2.wp-block-heading {
		font-size: clamp(1.75rem, 6vw, 3rem) !important;
	}
}

/* -------------------------------------------------------------------------
   Testimonials (.vci-home--testimonials)
   ------------------------------------------------------------------------- */
.vci-home--testimonials.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
}

.vci-home--testimonials > h2.wp-block-heading {
	margin-top: 0;
}

.vci-home--testimonials > .wp-block-columns {
	gap: 1.25rem;
	align-items: stretch;
}

.vci-home--testimonials > .wp-block-columns > .wp-block-column > .wp-block-group {
	height: 100%;
	box-sizing: border-box;
}

@media (max-width: 781px) {
	.vci-home--testimonials > .wp-block-columns {
		flex-direction: column;
	}

	.vci-home--testimonials h2.wp-block-heading {
		font-size: clamp(1.75rem, 6vw, 3rem) !important;
		margin-bottom: 1.5rem !important;
	}
}

/* -------------------------------------------------------------------------
   Our approach (.vci-home--approach)
   ------------------------------------------------------------------------- */
.vci-home--approach.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
	padding-top: clamp(4rem, 10vw, 8rem) !important;
	padding-bottom: clamp(3rem, 8vw, 6rem) !important;
}

/* Equal-height columns on wide layouts so sticky media can travel the full section height */
.vci-home--approach > .wp-block-columns {
	gap: clamp(2rem, 5vw, 4rem);
	align-items: stretch !important;
}

.vci-home--approach > .wp-block-columns > .wp-block-column {
	align-self: stretch !important;
}

.vci-home--approach__media {
	position: sticky;
	top: clamp(0.75rem, 3vw, 1.5rem);
	aspect-ratio: 1 / 1;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	border-radius: var(--vci-radius-card);
}

.vci-home--approach__media .wp-block-image {
	margin: 0;
	height: 100%;
}

.vci-home--approach__media .wp-block-image img,
.vci-home--approach__video {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: inherit;
	object-fit: cover;
}
.vci-home--approach__media video {
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
}

/* Step list: Figma-style dividers between items */
.vci-home--approach ul {
	list-style: none;
	padding-left: 0 !important;
	margin-left: 0 !important;
	margin-bottom: 0;
	display: flex;
    flex-direction: column;
    gap: 30px;
}

.vci-home--approach ul li {
	position: relative;
	padding-top: 0;
	margin-top: 1.25rem;
}

.vci-home--approach ul li:first-child {
	margin-top: 0;
}

.vci-home--approach__step-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    color: #2d2828;
    font-weight: 300;
    line-height: 1.15;
    flex-direction: column;
}

.vci-home--approach__step-number {
    display: inline-flex;
    align-items: center;
    font-size: clamp(2rem, 1.55rem + 1.6vw, 3rem);
    letter-spacing: -0.03em;
    color: #e8b589;
    flex-shrink: 0;
    width: 100%;
    white-space: nowrap;
}
.vci-home--approach__step-number-inner {
    min-width: 24px;
}
.vci-home--approach__step-number::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    margin-top: 30px;
    margin-left: 0.75rem;
    background-color: var(--vci-stroke-hairline);
}

.vci-home--approach__step-title {
	font-size: clamp(1.5rem, 1.42rem + 1.1vw, 2rem);
	letter-spacing: -0.02em;
}

.vci-home--approach__step-description, .vci-home--approach__step-title {
    padding-left: 48px;
	display: inline-block;

}
.vci-home--approach__intro-column {
	position: relative;
}

.vci-home--approach__intro {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.vci-home--approach__intro-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.vci-home--approach__intro-cta {
	flex: 0 0 auto;
	margin-left: auto;
	position: absolute;
    right: 0;
    top: 0;
    margin-top: 0;
}

.vci-home--approach__intro-cta .wp-block-button__link {
	background: transparent;
	color: #2d2828;
	border: 1px solid #2d2828;
	border-radius: 9999px;
	padding: 0.65rem 1.15rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

.vci-home--approach__intro-cta .wp-block-button__link:hover,
.vci-home--approach__intro-cta .wp-block-button__link:focus-visible {
	background: #2d2828;
	color: #fff;
}

@media (max-width: 781px) {
	.vci-home--approach > .wp-block-columns {
		flex-direction: column;
		align-items: stretch;
	}

	.vci-home--approach > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100%;
	}

	.vci-home--approach__media {
		position: relative;
		top: auto;
	}

	.vci-home--approach__intro {
		display: block;
	}
	
	.vci-home--approach__step-number::after {
		margin-top: 0rem;
	}

	.vci-home--approach__step-description, .vci-home--approach__step-title {
		padding-left: 36px;
		transform: translateY(-1rem);
	}

	.vci-home--approach__intro-cta {
		margin: 1.5rem 0 0;
		position: relative;
		top: unset;
		right: unset;
	}

	.vci-home--approach h2.wp-block-heading {
		font-size: clamp(1.75rem, 6vw, 3rem) !important;
	}
}

/* -------------------------------------------------------------------------
   Results strip + CTA (.vci-home--results)
   ------------------------------------------------------------------------- */
.vci-home--results.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
}

.vci-home--results > .wp-block-columns {
	gap: 1.5rem;
	align-items: flex-start;
}

@media (min-width: 782px) {
	.vci-home--results > .wp-block-columns .wp-block-buttons {
		justify-content: flex-end;
	}
}

@media (max-width: 781px) {
	.vci-home--results > .wp-block-columns {
		flex-direction: column;
		margin-bottom: 2rem !important;
	}

	.vci-home--results > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100%;
	}

	.vci-home--results .wp-block-buttons {
		justify-content: flex-start !important;
	}

	.vci-home--results h2.wp-block-heading {
		font-size: clamp(1.75rem, 6vw, 3rem) !important;
	}
}

/* Gallery: horizontal scroll like Figma strip; snap on touch */
.vci-home--results .wp-block-gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1.25rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding-bottom: 0.5rem;
}

.vci-home--results .wp-block-gallery figure.wp-block-image {
	flex: 0 0 min(85vw, 23.25rem);
	max-width: min(85vw, 23.25rem);
	scroll-snap-align: start;
	margin: 0 !important;
}

.vci-home--results .wp-block-gallery figure.wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 15rem;
	object-fit: cover;
	border-radius: var(--vci-radius-card);
}

@media (min-width: 1280px) {
	.vci-home--results .wp-block-gallery {
		flex-wrap: wrap;
		overflow-x: visible;
		justify-content: flex-start;
	}

	.vci-home--results .wp-block-gallery figure.wp-block-image {
		flex: 1 1 calc(33.333% - 0.875rem);
		max-width: calc(33.333% - 0.875rem);
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
   Link grid section (.vci-home--philosophy)
   ------------------------------------------------------------------------- */
.vci-home--philosophy.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
}

.vci-home--philosophy h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--larken);
	color: #f9f9f9;
}

.vci-home--philosophy .vci-philosophy-link-item__title {
	color: #f9f9f9;
}

.vci-home--philosophy .vci-philosophy-link-item__description {
	color: rgba(249, 249, 249, 0.88);
}

@media (max-width: 781px) {
	.vci-home--philosophy > .wp-block-columns {
		flex-direction: column;
	}

	.vci-home--philosophy > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* -------------------------------------------------------------------------
   How to begin (.vci-home--how-to-begin)
   ------------------------------------------------------------------------- */
.vci-home--how-to-begin.wp-block-group.alignfull {
	box-sizing: border-box;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
}

.vci-home--how-to-begin h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--larken);
	font-weight: 400;
	letter-spacing: -0.02em;
}

.vci-home--how-to-begin .vci-home--how-to-begin__features {
	position: relative;
	/* Columns in pattern use 32px horizontal gap. */
	--vci-how-to-begin-columns-gap: 32px;
	--vci-how-to-begin-bracket-drop: 20px;
	--vci-how-to-begin-bracket-radius: 9px;
	/* Center of first/last icon in a 3-col row with two gaps. */
	--vci-how-to-begin-bracket-offset: calc((100% - (2 * var(--vci-how-to-begin-columns-gap))) / 6);
	padding-top: calc(var(--vci-how-to-begin-bracket-drop) + clamp(1.5rem, 4vw, 2rem));
}

/* Wide bracket with rounded corners + center tick (matches SVG reference). */
.vci-home--how-to-begin .vci-home--how-to-begin__features::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--vci-how-to-begin-bracket-offset);
	right: var(--vci-how-to-begin-bracket-offset);
	height: var(--vci-how-to-begin-bracket-drop);
	border-top: 1px solid var(--vci-stroke-grid);
	border-left: 1px solid var(--vci-stroke-grid);
	border-right: 1px solid var(--vci-stroke-grid);
	border-top-left-radius: var(--vci-how-to-begin-bracket-radius);
	border-top-right-radius: var(--vci-how-to-begin-bracket-radius);
	box-sizing: border-box;
	background: linear-gradient(var(--vci-stroke-grid), var(--vci-stroke-grid)) 50% 0 / 1px 100% no-repeat;
	opacity: 0.88;
	pointer-events: none;
}

.vci-home--how-to-begin .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--vci-brand) !important;
	color: #f9f9f9 !important;
	border-color: var(--vci-brand) !important;
}

.vci-home--how-to-begin .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.vci-home--how-to-begin .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	filter: brightness(0.94);
}

.vci-home--how-to-begin .vci-home--how-to-begin__icon {
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
}

.vci-home--how-to-begin .vci-home--how-to-begin__icon img {
	width: 5rem;
	height: 5rem;
	object-fit: contain;
	display: block;
}

/* Keep the three feature columns visually aligned (icon + copy). */
.vci-home--how-to-begin .vci-home--how-to-begin__features .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.vci-home--how-to-begin .vci-home--how-to-begin__features .wp-block-column p {
	max-width: 16.5rem;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 781px) {
	.vci-home--how-to-begin .vci-home--how-to-begin__features {
		/* Mobile: keep decoration and align it to section's left side. */
		padding-top: 0;
		padding-left: clamp(2rem, 7.2vw, 2.45rem);
		max-width: 50%;
	}

	.vci-home--how-to-begin .vci-home--how-to-begin__features::before {
		display: block;
		left: 0;
		right: auto;
		top: 10%;
		bottom: 10%;
		width: clamp(0.95rem, 4.1vw, 1.25rem);
		height: 80%;
		border-top: 1px solid var(--vci-stroke-grid);
		border-left: 1px solid var(--vci-stroke-grid);
		border-right: 0;
		border-bottom: 1px solid var(--vci-stroke-grid);
		border-top-left-radius: var(--vci-how-to-begin-bracket-radius);
		border-bottom-left-radius: var(--vci-how-to-begin-bracket-radius);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		background:
			linear-gradient(var(--vci-stroke-grid), var(--vci-stroke-grid)) right center / clamp(0.95rem, 4.1vw, 1.25rem) 1px no-repeat;
	}

	.vci-home--how-to-begin .vci-home--how-to-begin__features .wp-block-columns {
		flex-direction: column;
		gap: 1.75rem;
	}

	.vci-home--how-to-begin .vci-home--how-to-begin__features .wp-block-column {
		flex-basis: 100% !important;
		align-items: flex-start;
		text-align: left;
	}

	.vci-home--how-to-begin .vci-home--how-to-begin__icon {
		margin-left: 0;
		margin-right: 0;
	}

	.vci-home--how-to-begin .vci-home--how-to-begin__features .wp-block-column p {
		max-width: 14.5rem;
		margin-left: 0;
		margin-right: 0;
		margin-top:0;
		margin-bottom: 30px;
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
   Running marquee (.vci-home--running-marquee)
   ------------------------------------------------------------------------- */
.vci-home--running-marquee.wp-block-group.alignfull {
	box-sizing: border-box;
	overflow: hidden;
}

.vci-home--running-marquee .wp-block-vci-running-marquee {
	overflow: hidden;
	font-family: var(--wp--preset--font-family--larken);
	font-size: clamp(2.1rem, 1.6rem + 2.8vw, 4rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.04;
}


.vci-home--running-marquee .wp-block-vci-running-marquee .vci-running-marquee__splide .splide__slide {
	justify-content: center;
	width: auto !important;
}

@media (max-width: 450px) {
	.vci-home--how-to-begin .vci-home--how-to-begin__features {
		/* Mobile: keep decoration and align it to section's left side. */
		padding-top: 0;
		padding-left: clamp(2rem, 7.2vw, 2.45rem);
		max-width: 75%;
	}
}

/* -------------------------------------------------------------------------
   Booking hero (.vci-home--booking)
   ------------------------------------------------------------------------- */
.vci-home--booking.wp-block-cover.alignfull {
	box-sizing: border-box;
	min-height: clamp(24rem, 44vw, 32rem) !important;
	padding-left: var(--vci-gutter) !important;
	padding-right: var(--vci-gutter) !important;
}

.vci-home--booking .wp-block-cover__background {
	opacity: 0.42 !important;
}

.vci-home--booking .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--vci-container);
	margin-left: auto;
	margin-right: auto;
}


.vci-home--booking h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--larken);
	font-size: clamp(2rem, 3.6vw + 0.8rem, 3rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.02em !important;
	margin-left: auto;
	margin-right: auto;
}

.vci-home--booking .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(249, 249, 249, 0.7) !important;
	color: #f9f9f9 !important;
	background: transparent !important;
}

.vci-home--booking .wp-block-button.is-style-outline .wp-block-button__link:hover,
.vci-home--booking .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: #f9f9f9 !important;
	background: rgba(249, 249, 249, 0.16) !important;
	color: #fff !important;
}

.vci-home--booking p {
	color: rgba(249, 249, 249, 0.9) !important;
}

@media (max-width: 781px) {
	.vci-home--booking {
		padding-top: var(--wp--preset--spacing--xx-large) !important;
		padding-bottom: var(--wp--preset--spacing--xx-large) !important;
	}
	
	.vci-home--booking.wp-block-cover.alignfull {
		min-height: 22rem !important;
	}

	.vci-home--booking h2.wp-block-heading {
		font-size: clamp(1.75rem, 7vw, 2.6rem) !important;
	}
}

/* -------------------------------------------------------------------------
   Timeline section (.timeline-section) — scroll-progress vertical line
   JS sets --vci-timeline-line-top, --vci-timeline-line-height, --vci-timeline-progress
   ------------------------------------------------------------------------- */
.timeline-section {
	position: relative;
	/* Space for 1px line + gap before main content */
	--vci-timeline-content-gap: clamp(0.75rem, 2.4vw, 1.5rem);
	padding-left: calc(1px + var(--vci-timeline-content-gap));
	box-sizing: border-box;
}

.timeline-section::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--vci-timeline-line-top, 0px);
	width: 1px;
	height: var(--vci-timeline-line-height, 0px);
	background-color: var(--vci-stroke-hairline);
	transform: scaleY(var(--vci-timeline-progress, 0));
	transform-origin: top left;
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.timeline-section {
		--vci-timeline-progress: 1 !important;
	}
}