/* Homepage composition. Content is visible before and without JavaScript. */
.home-main {
	overflow: clip;
}

.home-work__ambient,
.home-work__orbit {
	pointer-events: none;
	transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* Tighten the space before Services without shifting the hero landing. */
.home-agency {
	padding-bottom: calc(var(--vionario-space-section) * 0.5);
}

.home-agency__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: center;
}

.home-agency__emphasis {
	color: var(--vionario-color-muted);
}

.home-agency__description {
	max-width: 33rem;
	margin-top: 1.2rem;
	margin-bottom: 1.7rem;
	color: var(--vionario-color-muted);
}

.home-agency__principles {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid rgb(162 177 201 / 16%);
	border-radius: 0.25rem 2rem 0.25rem 0.25rem;
	background: linear-gradient(140deg, rgb(14 27 51 / 80%), rgb(10 19 39 / 30%));
}

.home-agency__principles::before {
	position: absolute;
	top: -1px;
	left: 2rem;
	width: 5rem;
	height: 1px;
	background: var(--vionario-color-cyan);
	content: "";
}

.home-agency__principles-label {
	margin: 0 0 1.75rem;
	color: var(--vionario-color-muted);
	font-size: 0.75rem;
	line-height: 1.6;
}

.home-agency__principle {
	display: flex;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-top: 1px solid rgb(162 177 201 / 15%);
}

.home-agency__principle:last-child {
	padding-bottom: 0;
}

.home-agency__marker {
	padding-top: 0.2rem;
	color: var(--vionario-color-cyan);
	font-size: 0.65rem;
	font-variant-numeric: tabular-nums;
}

.home-agency__principle h3 {
	margin: 0 0 0.65rem;
	font-size: 1rem;
	font-weight: 550;
	letter-spacing: -0.025em;
}

.home-agency__principle p {
	margin: 0;
	color: var(--vionario-color-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

.home-section-intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.home-section-intro > div {
	max-width: 42rem;
}

.home-section-intro .section-heading {
	margin-bottom: 0;
}

.home-section-intro > p {
	max-width: 23rem;
	margin: 0 0 0.25rem;
	color: var(--vionario-color-muted);
	font-size: 0.9375rem;
	line-height: 1.8;
}

.home-section-intro > .text-link {
	flex-shrink: 0;
}

.home-services {
	border-top: 1px solid rgb(162 177 201 / 12%);
	border-bottom: 1px solid rgb(162 177 201 / 12%);
	background: linear-gradient(180deg, #081022, var(--vionario-color-background));
}

.home-services__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.home-services__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2rem;
}

.home-services__foot > p {
	max-width: 36rem;
	margin: 0;
	color: var(--vionario-color-muted);
	font-size: 0.875rem;
}

.home-work {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.home-work__ambient {
	position: absolute;
	z-index: -1;
	inset: -20% -10%;
	background: radial-gradient(ellipse at 55% 54%, rgb(40 123 255 / 11%), transparent 62%), radial-gradient(ellipse at 94% 36%, rgb(120 102 255 / 7%), transparent 35%);
}

.home-work__orbit {
	position: absolute;
	z-index: -1;
	top: 8%;
	right: -18%;
	width: min(70vw, 58rem);
	aspect-ratio: 1;
}

.home-work__orbit > span {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgb(66 232 255 / 13%);
	border-radius: 50%;
	box-shadow: 0 0 0 3.5rem rgb(40 123 255 / 3%), 0 0 0 7rem rgb(40 123 255 / 2%);
	transform: rotate(-30deg) scaleY(0.55);
}

.home-work__content {
	position: relative;
}

.home-work__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.25rem, 3vw, 3rem);
}

.home-work__grid > :nth-child(2) {
	margin-top: 5rem;
}

.home-work__note {
	max-width: 42rem;
	margin: 2rem 0 0;
	color: var(--vionario-color-muted);
	font-size: 0.8rem;
	line-height: 1.7;
}

.home-process {
	border-top: 1px solid rgb(162 177 201 / 12%);
	border-bottom: 1px solid rgb(162 177 201 / 12%);
	background: var(--vionario-color-secondary);
}

.home-process__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-process__step {
	position: relative;
	padding-top: 2rem;
	border-top: 1px solid rgb(162 177 201 / 25%);
}

.home-process__step::before {
	position: absolute;
	top: -3px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--vionario-color-cyan);
	content: "";
}

.home-process__number {
	display: block;
	margin-bottom: 1.75rem;
	color: var(--vionario-color-muted);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.home-process__step h3 {
	margin: 0 0 0.85rem;
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	font-weight: 550;
	letter-spacing: -0.025em;
}

.home-process__step p {
	margin: 0;
	color: var(--vionario-color-muted);
	font-size: 0.875rem;
	line-height: 1.8;
}

.home-insights__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.home-insights__empty {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
	padding: clamp(2rem, 5vw, 4rem);
	border: 1px solid rgb(162 177 201 / 17%);
	border-radius: 0.75rem;
	background: linear-gradient(115deg, rgb(14 27 51 / 70%), rgb(10 19 39 / 40%));
}

.home-insights__empty h3 {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.045em;
}

.home-insights__empty p:last-child {
	max-width: 38rem;
	margin-bottom: 0;
	color: var(--vionario-color-muted);
	font-size: 0.9375rem;
}

.home-insights__graphic {
	position: relative;
	width: 100%;
	max-width: 15rem;
	min-height: 10rem;
	margin-inline: auto;
}

.home-insights__graphic > span {
	position: absolute;
	inset: 0.5rem 2rem 1rem;
	border: 1px solid rgb(66 232 255 / 30%);
	border-radius: 0.35rem;
	background: linear-gradient(130deg, rgb(40 123 255 / 12%), rgb(10 19 39 / 80%));
	transform: rotate(-15deg) translate(-1rem, 0.5rem);
}

.home-insights__graphic > span:nth-child(2) {
	border-color: rgb(40 123 255 / 50%);
	transform: rotate(-5deg);
}

.home-insights__graphic > span:nth-child(3) {
	border-color: rgb(162 177 201 / 35%);
	background: repeating-linear-gradient(0deg, transparent 0 1.3rem, rgb(162 177 201 / 12%) 1.3rem calc(1.3rem + 1px)), var(--vionario-color-surface);
	transform: rotate(7deg) translate(1rem, -0.5rem);
}


@media (max-width: 1100px) {


	.home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem 2rem;
	}
}

@media (max-width: 900px) {
	.home-agency__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	.home-agency__intro {
		max-width: 40rem;
	}

	.home-section-intro {
		align-items: flex-start;
		flex-direction: column;
		gap: 1.5rem;
	}

	.home-section-intro > p {
		max-width: 36rem;
	}

	.home-insights__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {


	.home-services__foot {
		align-items: flex-start;
		flex-direction: column;
	}

	.home-work__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.home-work__grid > :nth-child(2) {
		margin-top: 0;
	}

	.home-work__orbit {
		top: 18%;
		right: -50%;
		width: 100%;
	}

	.home-insights__empty {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.home-insights__graphic {
		max-width: 12rem;
		min-height: 8rem;
		margin-inline: 0;
	}

	.home-work [data-parallax-layer] {
		transform: none;
	}
}

@media (max-width: 480px) {


	.home-services__grid,
	.home-process__steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.home-process__steps {
		gap: 2.5rem;
	}

	.home-process__step {
		padding-top: 1.25rem;
	}

	.home-process__number {
		margin-bottom: 1rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	.home-work [data-parallax-layer] {
		transform: none;
	}

}

/* Signature hero: filled ribbon sculptures, contained branding, and independent depth. */
.home-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(46rem, calc(100svh - 5.5rem), 62rem);
	padding-top: clamp(3rem, 5vw, 5rem);
	overflow: hidden;
	border-bottom: 1px solid rgb(162 177 201 / 12%);
	background: var(--vionario-color-background);
}
.home-hero::after {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	height: 13%;
	background: linear-gradient(0deg, var(--vionario-color-background), transparent);
	content: "";
	pointer-events: none;
}
.home-hero__atmosphere {
	position: absolute;
	z-index: -1;
	inset: -10% -5%;
	background: radial-gradient(ellipse at 79% 48%, rgb(40 123 255 / 16%), transparent 42%), radial-gradient(ellipse at 63% 26%, rgb(66 232 255 / 5%), transparent 38%), radial-gradient(ellipse at 90% 80%, rgb(120 102 255 / 6%), transparent 32%);
	transform: translate3d(0, var(--parallax-y, 0px), 0);
	pointer-events: none;
}
.home-hero__horizon {
	position: absolute;
	z-index: 0;
	right: -5%;
	bottom: 18%;
	width: 56%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(66 232 255 / 16%), transparent);
	transform: rotate(-20deg);
	pointer-events: none;
}
.home-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
	padding-bottom: clamp(3rem, 6vw, 6rem);
}
.home-hero__copy { position: relative; z-index: 3; }
.home-hero__eyebrow { margin-bottom: 1.75rem; font-size: 0.68rem; }
.home-hero h1 {
	max-width: 14ch;
	margin: 0;
	font-size: clamp(3rem, 5.6vw, 5.5rem);
	font-weight: 550;
	line-height: 1.025;
	letter-spacing: -0.065em;
	text-wrap: balance;
}
.home-hero h1 > span { color: #8bdcff; }
@supports (background-clip: text) {
	.home-hero h1 > span {
		background: linear-gradient(110deg, #c6eaff 5%, #77d9ff 45%, #42e8ff 92%);
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
.home-hero__lead { max-width: 29rem; margin-block: 1.75rem 2rem; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.8; }
.home-hero .button-row { gap: 0.85rem; }
.home-hero .button { padding-inline: 1.3rem; gap: 0.9rem; font-size: 0.82rem; }
.home-hero__visual {
	position: relative;
	z-index: 1;
	width: calc(100% + 7rem);
	min-width: 0;
	margin-left: -4rem;
	align-self: center;
}
.home-hero__stage { position: relative; width: 100%; aspect-ratio: 1; }
.hero-sculpture__light {
	position: absolute;
	z-index: 0;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 58% 52%, rgb(40 123 255 / 10%), transparent 67%);
	pointer-events: none;
}
.hero-sculpture__ribbon, .hero-sculpture__glass, .home-hero__logo-plane {
	position: absolute;
	transform: translate3d(0, var(--parallax-y, 0px), 0);
	pointer-events: none;
}
.hero-sculpture__ribbon { inset: 0; }
.hero-sculpture__ribbon img { width: 100%; height: auto; }
.hero-sculpture__ribbon--back { z-index: 1; opacity: 0.68; }
.hero-sculpture__ribbon--back img { transform: rotate(12deg) scale(0.94); }
.hero-sculpture__ribbon--mid { z-index: 3; }
.hero-sculpture__ribbon--front { z-index: 5; }
.home-hero__logo-plane { z-index: 4; top: 34%; left: 34%; width: 35%; }
.home-hero__logo { display: block; width: 100%; height: auto; }
.hero-sculpture__glass { width: 22%; aspect-ratio: 0.8; }
.hero-sculpture__glass--back { z-index: 2; top: 17%; right: 6%; }
.hero-sculpture__glass--front { z-index: 6; left: 9%; bottom: 18%; width: 23%; aspect-ratio: 1.4; }
.hero-reflection {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgb(160 221 255 / 26%);
	border-radius: 0.75rem;
	background: linear-gradient(135deg, rgb(245 249 255 / 10%), rgb(40 123 255 / 2%) 34%, rgb(5 10 22 / 42%) 72%, rgb(66 232 255 / 9%));
	box-shadow: inset 1px 1px 0 rgb(245 249 255 / 12%), inset -1px -1px 0 rgb(40 123 255 / 9%), 12px 22px 30px rgb(2 6 15 / 24%);
	transform: perspective(700px) rotateY(-28deg) rotateX(9deg) rotateZ(14deg);
}
.hero-sculpture__glass--front .hero-reflection {
	background: linear-gradient(130deg, rgb(245 249 255 / 10%), rgb(5 10 22 / 65%) 52%, rgb(40 123 255 / 10%));
	transform: perspective(700px) rotateY(24deg) rotateX(13deg) rotateZ(-14deg);
}
.hero-reflection__edge {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(214 250 255 / 70%), transparent);
}
.hero-reflection__band {
	position: absolute;
	top: 37%;
	left: -37%;
	width: 160%;
	height: 54%;
	border: 18px solid rgb(40 123 255 / 19%);
	border-top-color: rgb(66 232 255 / 32%);
	border-bottom-color: transparent;
	border-radius: 50%;
	transform: rotate(-36deg);
}
.hero-reflection__sheen {
	position: absolute;
	top: -40%;
	left: 5%;
	width: 46%;
	height: 180%;
	background: linear-gradient(90deg, transparent, rgb(245 249 255 / 7%) 47%, rgb(245 249 255 / 14%) 50%, transparent 56%);
	transform: translate3d(calc(var(--parallax-y, 0px) * 0.25), 0, 0) rotate(24deg);
}
.hero-sculpture__orbit {
	position: absolute;
	z-index: 0;
	inset: 10%;
	border: 1px solid rgb(66 232 255 / 7%);
	border-radius: 50%;
	transform: rotate(-30deg) scaleY(0.7);
	pointer-events: none;
}
.home-hero__visual-caption { display: block; margin-top: -1.5rem; text-align: center; color: var(--vionario-color-muted); font: 400 0.58rem/1.6 var(--vionario-font-mono); letter-spacing: 0.17em; text-transform: uppercase; }
.home-hero__foot {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding-block: 1.35rem;
	border-top: 1px solid rgb(162 177 201 / 14%);
	color: var(--vionario-color-muted);
	font: 400 0.65rem/1.6 var(--vionario-font-mono);
	letter-spacing: 0.025em;
}
.home-hero__foot > p { margin: 0; }
.home-hero__scroll { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; color: var(--vionario-color-text); text-decoration: none; }
.home-hero__scroll > span { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 1px solid var(--vionario-color-border-strong); border-radius: 50%; transition: border-color 180ms, color 180ms; }
.home-hero__scroll:hover > span { border-color: var(--vionario-color-cyan); color: var(--vionario-color-cyan); }

/* Portrait tablet and mobile have their own stacked art composition. */
@media (min-width: 100rem) {
	.home-hero__visual { width: calc(100% + 9rem); margin-left: -3rem; }
	.home-hero h1 { font-size: 5.7rem; }
}
@media (min-width: 48rem) and (max-width: 68.75rem) {
	.home-hero { min-height: 45rem; }
	.home-hero__layout { grid-template-columns: minmax(0, 1.17fr) minmax(0, 0.83fr); }
	.home-hero h1 { font-size: clamp(2.8rem, 5.6vw, 4rem); }
	.home-hero__visual { width: calc(100% + 5rem); margin-left: -2.5rem; }
	.home-hero .button-row { align-items: flex-start; gap: 0.75rem; }
	.home-hero .button { font-size: 0.78rem; padding-inline: 1rem; }
	.home-hero__visual-caption { max-width: 80%; margin-inline: auto; font-size: 0.52rem; }
}
@media (max-width: 47.99rem) {
	.home-hero { min-height: 0; padding-top: 2.5rem; }
	.home-hero__layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 1.75rem; }
	.home-hero__copy { max-width: 36rem; }
	.home-hero__eyebrow { margin-bottom: 1.35rem; font-size: 0.6rem; letter-spacing: 0.09em; }
	.home-hero h1 { max-width: 15ch; font-size: clamp(2.65rem, 8vw, 3.8rem); line-height: 1.04; }
	.home-hero__lead { margin-block: 1.35rem 1.5rem; max-width: 30rem; font-size: 1rem; line-height: 1.75; }
	.home-hero__visual { width: min(100%, 30rem); margin: 0.5rem auto 0; }
	.home-hero__atmosphere { background: radial-gradient(ellipse at 55% 75%, rgb(40 123 255 / 16%), transparent 55%); }
	.home-hero__horizon { bottom: 22%; width: 85%; }
	.hero-sculpture__ribbon--back { opacity: 0.36; }
	.hero-sculpture__glass--back, .hero-sculpture__orbit { display: none; }
	.hero-sculpture__glass--front { width: 20%; bottom: 21%; }
	.hero-reflection { box-shadow: inset 1px 1px 0 rgb(245 249 255 / 10%); }
	.hero-reflection__band { border-width: 8px; }
	.home-hero [data-parallax-layer] { transform: none; }
	.hero-reflection__sheen { display: none; }
	.home-hero__visual-caption { margin-top: -1.25rem; font-size: 0.5rem; letter-spacing: 0.13em; }
	.home-hero__foot { padding-block: 0.8rem; font-size: 0.59rem; }
	.home-hero__foot > p { max-width: 10rem; text-align: right; }
}
@media (max-width: 23.4375rem) {
	.home-hero { padding-top: 2rem; }
	.home-hero h1 { font-size: clamp(2.25rem, 10vw, 2.65rem); }
	.home-hero .button-row { flex-direction: column; align-items: stretch; }
	.home-hero .button { width: 100%; min-height: 3.25rem; }
	.home-hero__foot > p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.home-hero [data-parallax-layer] { transform: none; }
	.hero-reflection__sheen { transform: rotate(24deg); }
	.home-hero__scroll > span { transition: none; }
}
@media (forced-colors: active) {
	.home-hero h1 > span { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
	.hero-sculpture__glass { display: none; }
}


/* HERO-V3: brand-first, full-viewport intro. Existing section styling remains intact. */
.home-hero--v3 {
    min-height: 100svh;
    padding: 0;
    background: radial-gradient(ellipse at 52% 45%, #112f63 0%, #0a1e40 43%, #050a16 88%);
}
.home-hero--v3::after {
    height: 20%;
    z-index: 1;
    background: linear-gradient(0deg, var(--vionario-color-background), transparent);
}
.home-hero--v3 .home-hero__atmosphere {
    z-index: 0;
    inset: -8%;
    background: radial-gradient(ellipse at 53% 58%, rgb(28 105 243 / 25%), transparent 56%),
                radial-gradient(ellipse at 65% 15%, rgb(66 232 255 / 10%), transparent 48%);
}
.home-hero--v3 .home-hero__horizon { bottom: 11%; right: -12%; width: 120%; opacity: 0.18; }
.home-hero--v3 .home-hero__layout {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    width: min(100%, 90rem);
    min-height: 100svh;
    padding: clamp(4.5rem, 7vh, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(5rem, 9vh, 7rem);
}
.home-hero--v3 .home-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 73rem;
    text-align: center;
}
.home-hero--v3 .home-hero__brand-mark {
    width: clamp(5rem, 12vh, 8.5rem);
    height: auto;
    margin: 0 auto clamp(1.2rem, 3vh, 2rem);
    filter: drop-shadow(0 15px 40px rgb(17 140 255 / 24%));
}
.home-hero--v3 .home-hero__eyebrow {
    margin: 0 0 clamp(1rem, 2.5vh, 1.65rem);
    font-size: clamp(0.62rem, 0.85vw, 0.8rem);
    letter-spacing: 0.23em;
    color: var(--vionario-color-cyan);
}
.home-hero--v3 .home-hero__eyebrow::before { display: none; }
.home-hero--v3 h1 {
    max-width: 20ch;
    margin: 0 auto;
    font-size: clamp(2.6rem, 6.7vw, 6.9rem);
    font-weight: 650;
    line-height: 0.99;
    letter-spacing: -0.066em;
    text-wrap: balance;
    color: #fff;
}
.home-hero--v3 h1 > span { display: block; color: #eaf6ff; }
@supports (background-clip: text) {
    .home-hero--v3 h1 > span {
        background: linear-gradient(105deg, #fff 17%, #dceeff 62%, #90daff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.home-hero--v3 .home-hero__lead {
    max-width: 38rem;
    margin: clamp(1.25rem, 3.6vh, 2.5rem) auto clamp(1.5rem, 4vh, 2.75rem);
    color: #c4d3e9;
    font-size: clamp(0.98rem, 1.65vw, 1.4rem);
    line-height: 1.65;
}
.home-hero--v3 .button-row { justify-content: center; }
.home-hero--v3 .home-hero__explore {
    min-height: 3.1rem;
    border-radius: 100px;
    padding-inline: 1.7rem;
    background: rgb(5 20 43 / 32%);
    border-color: rgb(165 207 255 / 48%);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.065em;
    font-size: 0.75rem;
}
.home-hero--v3 .home-hero__explore:hover { background: rgb(37 112 222 / 30%); }
.home-hero--v3 .home-hero__visual {
    position: absolute;
    z-index: 1;
    inset: 50% auto auto 50%;
    width: min(125vw, 95rem);
    margin: 0;
    transform: translate(-50%, -50%);
    opacity: 0.16;
    pointer-events: none;
}
.home-hero--v3 .hero-sculpture__glass { opacity: 0.65; }
.home-hero--v3 .home-hero__foot {
    position: absolute;
    z-index: 4;
    inset: auto 0 clamp(0.7rem, 2vh, 1.4rem);
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    border: 0;
}
.home-hero--v3 .home-hero__scroll {
    min-width: 3rem;
    min-height: 3rem;
    justify-content: center;
    color: #d5e9ff;
}
.home-hero--v3 .home-hero__scroll > span {
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    font-size: 1.4rem;
    animation: vionario-hero-bob 2.6s ease-in-out infinite;
}
@keyframes vionario-hero-bob { 50% { transform: translateY(7px); } }
@media (max-width: 47.99rem) {
    .home-hero--v3 { min-height: 100svh; padding: 0; }
    .home-hero--v3 .home-hero__layout {
        min-height: 100svh;
        padding: 4rem 1.3rem 5.25rem;
    }
    .home-hero--v3 .home-hero__copy { max-width: 37rem; }
    .home-hero--v3 .home-hero__brand-mark { width: clamp(4.75rem, 13vh, 6.5rem); margin-bottom: 1.25rem; }
    .home-hero--v3 h1 { max-width: 19ch; font-size: clamp(2.3rem, 8.2vw, 4rem); line-height: 1.03; }
    .home-hero--v3 .home-hero__eyebrow { letter-spacing: 0.14em; font-size: 0.61rem; }
    .home-hero--v3 .home-hero__lead { margin: 1.25rem auto 1.6rem; font-size: 0.98rem; line-height: 1.55; }
    .home-hero--v3 .button-row { align-items: center; }
    .home-hero--v3 .home-hero__explore { width: auto; min-height: 3rem; }
    .home-hero--v3 .home-hero__visual { width: 170vw; opacity: 0.085; margin: 0; }
}
@media (max-width: 23.4375rem) {
    .home-hero--v3 { padding: 0; }
    .home-hero--v3 h1 { font-size: clamp(2rem, 8.5vw, 2.7rem); }
    .home-hero--v3 .home-hero__explore { width: auto; }
}
@media (max-height: 610px) {
    .home-hero--v3 .home-hero__layout { padding-block: 2.5rem 4rem; }
    .home-hero--v3 .home-hero__brand-mark { width: 4.25rem; margin-bottom: 0.65rem; }
    .home-hero--v3 .home-hero__eyebrow { margin-bottom: 0.65rem; }
    .home-hero--v3 h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
    .home-hero--v3 .home-hero__lead { margin-block: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero--v3 .home-hero__scroll > span { animation: none; }
}
@media (forced-colors: active) {
    .home-hero--v3 .home-hero__eyebrow, .home-hero--v3 h1 > span { color: CanvasText; }
}


/* HERO V3.1 — hybrid zoom + ribbon peel, applied to the actual V3 scenery. */
.home-hero--v31 .home-hero__layout {
    padding-block: clamp(2.5rem, 5vh, 4rem);
}
.home-hero--v31 .home-hero__brand-mark { margin-bottom: clamp(0.9rem, 2vh, 1.45rem); }
.home-hero--v31 .home-hero__lead { margin-block: clamp(1rem, 2.4vh, 1.85rem); }
.home-hero--v31 .home-hero__visual { opacity: 0.27; }
.home-hero--v31 .home-hero__atmosphere {
    animation: v31-ambient 13s ease-in-out infinite alternate;
}
.home-hero--v31 .home-hero__v31-glass {
    position: absolute;
    z-index: 2;
    border-radius: 13px;
    border: 1px solid rgb(172 231 255 / 20%);
    background: linear-gradient(135deg, rgb(172 236 255 / 7%), rgb(33 87 159 / 3%) 54%, rgb(187 239 255 / 7%));
    box-shadow: inset 1px 1px rgb(194 245 255 / 9%), 0 10px 45px rgb(0 55 160 / 8%);
    pointer-events: none;
    opacity: 0.55;
}
.home-hero--v31 .home-hero__v31-glass--one {
    width: min(20vw, 270px);
    aspect-ratio: 1.75;
    top: 17%; right: 7%;
    transform: rotate(-19deg);
}
.home-hero--v31 .home-hero__v31-glass--two {
    width: min(23vw, 310px);
    aspect-ratio: 2.6;
    bottom: 15%; left: 7%;
    transform: rotate(-14deg);
}
.home-hero--v31 .home-hero__v31-luminous-sweep {
    position: absolute;
    z-index: 5;
    inset: -95% -70%;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 42%, rgb(125 234 255 / 0%) 47%, rgb(136 236 255 / 21%) 49.5%, rgb(240 255 255 / 65%) 50.5%, rgb(77 204 255 / 16%) 52%, transparent 58%);
    mix-blend-mode: screen;
    transform: translateX(-85%) rotate(9deg);
}
@keyframes v31-ambient { from { opacity: .83; } to { opacity: 1; } }
/* The exit sequence has a visible starting frame and never hides ordinary page content. */
html.v31-exiting .home-hero--v31 .home-hero__copy {
    animation: v31-brand-zoom-lift 2.15s cubic-bezier(.3,0,.18,1) both;
}
html.v31-exiting .home-hero--v31 .home-hero__visual {
    animation: v31-stage-depth 2.15s ease-in-out both;
}
html.v31-exiting .home-hero--v31 .hero-sculpture__ribbon--back {
    animation: v31-ribbon-back 2.15s ease-in-out both;
}
html.v31-exiting .home-hero--v31 .hero-sculpture__ribbon--mid {
    animation: v31-ribbon-mid 2.15s ease-in-out both;
}
html.v31-exiting .home-hero--v31 .hero-sculpture__ribbon--front {
    animation: v31-ribbon-front 2.15s ease-in-out both;
}
html.v31-exiting .home-hero--v31 .home-hero__v31-glass--one {
    animation: v31-glass-one 2.15s ease-in-out both;
}
html.v31-exiting .home-hero--v31 .home-hero__v31-glass--two {
    animation: v31-glass-two 2.15s ease-in-out both;
}
html.v31-exiting .home-hero--v31 .home-hero__v31-luminous-sweep {
    animation: v31-sweep 2.15s ease-in-out both;
}
@keyframes v31-brand-zoom-lift {
    0%,12% { transform: translate3d(0,0,0) scale(1); opacity: 1; filter: blur(0); }
    34% { transform: translate3d(0,-10px,0) scale(1.11); opacity: 1; filter: blur(0); }
    65%,100% { transform: translate3d(0,-120px,0) scale(1.33); opacity: 0; filter: blur(9px); }
}
@keyframes v31-stage-depth {
    0%,12% { transform: translate(-50%,-50%) scale(1); opacity: .27; }
    58% { transform: translate(-50%,-54%) scale(1.5); opacity: .48; }
    88%,100% { transform: translate(-50%,-65%) scale(2.1); opacity: 0; }
}
@keyframes v31-ribbon-back {
    0%,12% { transform: translate3d(0,var(--parallax-y,0px),0) rotate(0deg) scale(1); }
    68%,100% { transform: translate3d(18%,-36%,0) rotate(54deg) scale(1.6); }
}
@keyframes v31-ribbon-mid {
    0%,12% { transform: translate3d(0,var(--parallax-y,0px),0) rotate(0deg) scale(1); }
    68%,100% { transform: translate3d(-24%,42%,0) rotate(-43deg) scale(1.65); }
}
@keyframes v31-ribbon-front {
    0%,12% { transform: translate3d(0,var(--parallax-y,0px),0) rotate(0deg) scale(1); }
    70%,100% { transform: translate3d(10%,55%,0) rotate(37deg) scale(1.6); }
}
@keyframes v31-glass-one {
    0%,12% { transform: rotate(-19deg); opacity: .55; }
    69%,100% { transform: translate(130px,-180px) rotate(55deg) scale(1.45); opacity: 0; }
}
@keyframes v31-glass-two {
    0%,12% { transform: rotate(-14deg); opacity: .55; }
    69%,100% { transform: translate(-130px,180px) rotate(-48deg) scale(1.45); opacity: 0; }
}
@keyframes v31-sweep {
    0%,15% { opacity: 0; transform: translateX(-85%) rotate(9deg); }
    37% { opacity: 1; }
    75%,100% { opacity: 0; transform: translateX(85%) rotate(9deg); }
}
@media (max-width: 47.99rem) {
    .home-hero--v31 .home-hero__layout { padding: 2.25rem 1.3rem; }
    .home-hero--v31 .home-hero__visual { opacity: .16; }
    .home-hero--v31 .home-hero__v31-glass--one { width: 120px; top: 17%; right: -5%; }
    .home-hero--v31 .home-hero__v31-glass--two { width: 155px; bottom: 15%; left: -8%; }
    html.v31-exiting .home-hero--v31 .home-hero__copy,
    html.v31-exiting .home-hero--v31 .home-hero__visual,
    html.v31-exiting .home-hero--v31 .hero-sculpture__ribbon,
    html.v31-exiting .home-hero--v31 .home-hero__v31-glass,
    html.v31-exiting .home-hero--v31 .home-hero__v31-luminous-sweep { animation-duration: 1.62s; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero--v31 .home-hero__atmosphere { animation: none; }
    html.v31-exiting .home-hero--v31 .home-hero__copy,
    html.v31-exiting .home-hero--v31 .home-hero__visual,
    html.v31-exiting .home-hero--v31 .hero-sculpture__ribbon,
    html.v31-exiting .home-hero--v31 .home-hero__v31-glass,
    html.v31-exiting .home-hero--v31 .home-hero__v31-luminous-sweep { animation: none; }
}


/* HOME-004: Tighten spacing before What We Do */
@media (min-width: 769px) {
    .home-services {
        padding-top: calc(var(--vionario-space-section) * 0.55);
    }
}


/* V3.2 / P1: a full-screen desktop chapter for Who We Are.
   Content may exceed viewport height; never clip it.
   Hero V3.1, page navigation and all other sections are unchanged. */
@media (min-width: 64rem) {
    .home-main > .home-agency {
        min-height: 100svh;
        display: grid;
        align-items: center;
    }
}


/* V3.2 / Phase 3 — The remaining homepage chapters form full-height stages
 * where content fits, without fixed-height clipping or scroll trapping.
 * Hero V3.1 + the approved Who We Are stage are deliberately untouched. */
@media (min-width: 64rem) {
    .home-main > :is(.home-services, .home-work, .home-process, .home-insights, .closing-cta) {
        min-height: 100svh;
        display: grid;
        align-items: center;
    }
}
/* Responsive content always takes priority over the cinematic minimum height. */
.home-main > :is(.home-services, .home-work, .home-process, .home-insights, .closing-cta) {
    overflow-x: clip;
}
@media (max-width: 63.99rem) {
    .home-services__grid, .home-process__steps, .home-work__grid {
        overflow: visible;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-main .home-services__grid *,
    .home-main .home-work__grid *,
    .home-main .home-process__steps *,
    .home-main .home-insights__empty * {
        scroll-behavior: auto;
    }
}


/* V3.2 / Phase 4 — compact, intentional desktop stages.
 * All sections grow naturally if their real content needs extra height.
 * Not a document-level scroll trap; the chapter logic is JS-only. */
@media (min-width: 64rem) {
    .home-main > :is(.home-services, .home-work, .home-process, .home-insights, .closing-cta) {
        min-height: calc(100svh - 5.5rem);
        padding-block: clamp(2.5rem, 5vh, 4.5rem);
    }
    .home-main > .home-services {
        padding-top: clamp(2.5rem, 5vh, 4.5rem);
    }
    .home-main > .closing-cta .closing-cta__panel {
        min-height: clamp(25rem, 53vh, 40rem);
        display: flex;
        align-items: center;
    }
    .home-main > .closing-cta .closing-cta__content {
        max-width: 61%;
    }
    .home-main > .closing-cta .closing-cta__panel::after {
        content: '';
        position: absolute;
        z-index: 0;
        right: 5%;
        top: 50%;
        width: clamp(15rem, 31vw, 29rem);
        aspect-ratio: 960 / 814;
        background: url('../images/vionario-logo-optimized.webp') center / contain no-repeat;
        opacity: .82;
        filter: drop-shadow(0 22px 46px rgb(0 148 255 / 38%));
        transform: translate3d(0,-50%,0);
        pointer-events: none;
    }
    .home-main > .closing-cta.v32-cta-awake .closing-cta__panel::after {
        animation: v32-cta-brand-arrive 1.3s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes v32-cta-brand-arrive {
        from { opacity: 0; transform: translate3d(95px,calc(-50% + 20px),0) rotate(14deg) scale(.78); filter: blur(9px); }
        to { opacity: .82; transform: translate3d(0,-50%,0) rotate(0) scale(1); filter: drop-shadow(0 22px 46px rgb(0 148 255 / 38%)); }
    }
}
@media (min-width: 64rem) and (max-width: 76rem) {
    .home-main > .closing-cta .closing-cta__panel::after { right: 2%; width: 28%; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
    .home-main > .closing-cta.v32-cta-awake .closing-cta__panel::after { animation: none; }
}


/* V3.4 — Final CTA and footer form one continuous epilogue, not two stages.
 * All earlier cinematic chapters and their timing remain untouched. */
@media (min-width: 64rem) {
    .home-main > .closing-cta {
        min-height: 0;
        display: block;
        padding-block: clamp(1.5rem, 3svh, 2.5rem) clamp(.75rem, 1.5svh, 1.25rem);
    }
    .home-main > .closing-cta .closing-cta__panel {
        min-height: clamp(19rem, 38svh, 28rem);
        padding-block: clamp(2rem, 4svh, 3rem);
    }
}
.home-main + .site-footer {
    border-top: 1px solid var(--vionario-color-border);
    padding-top: clamp(1.5rem, 3svh, 2.5rem);
}
.home-main + .site-footer .footer-top {
    padding-bottom: clamp(1.5rem, 3svh, 2.75rem);
}

/* V3.4.1 — Approved Hybrid connected ending. Desktop breathing room
 * is concentrated inside the CTA, not in a separate blank scroll chapter.
 * Preserve V3.4 scroll behavior, animations and real semantic footer. */
@media (min-width: 64rem) {
  .home-main > .closing-cta {
    padding-block: clamp(2.25rem, 4svh, 3.25rem) clamp(1rem, 1.8svh, 1.5rem);
  }
  .home-main > .closing-cta .closing-cta__panel {
    min-height: clamp(23rem, 47svh, 34rem);
  }
}
.home-main + .site-footer {
  padding-top: clamp(2rem, 3.5svh, 3rem);
}