﻿/* Static frontend overrides — no Next.js / CMS / analytics runtime */

:root {
	--x-default: 20px;
	--y-default: 20px;
	--x-double-default: 40px;
	--y-double-default: 40px;
	--y-half-default: 10px;
	--font-host-grotesk: HostGrotesk, sans-serif;
	--tw-scale-x: 100%;
	--tw-scale-y: 100%;
}

@font-face {
	font-family: HostGrotesk;
	src: url("/velora/fonts/HostGrotesk-Variable.woff2") format("woff2"), url("/velora/fonts/HostGrotesk-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@media (min-width: 768px) {
	:root {
		--x-default: 40px;
		--y-default: 40px;
		--x-double-default: 80px;
		--y-double-default: 80px;
		--y-half-default: 20px;
	}
}

@property --screen-loader-burst {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

html.is_intro_lock,
html.is_intro_lock body {
	overflow: hidden;
	height: 100%;
}

@media (hover: hover) and (pointer: fine) {
	html.is_cursor_ready,
	html.is_cursor_ready * {
		cursor: none !important;
	}
}

.cursor_trail {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9998;
	width: 100vw;
	height: 100vh;
	overflow: visible;
	pointer-events: none;
}

.cursor_trail.is_on {
	display: block !important;
}

.cursor_trail line {
	stroke: #c8c8c8;
	stroke-width: 2;
	stroke-linecap: round;
}

.cursor_custom {
	display: none;
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	html.is_cursor_ready .cursor_trail {
		display: block;
	}

	html.is_cursor_ready .cursor_custom.is_ready {
		display: flex;
		will-change: transform;
		opacity: 1;
	}
}

.cursor_dot {
	transition: scale 0.35s cubic-bezier(0.3, 1, 0.7, 1);
	scale: 0.15;
}

.cursor_icon,
.cursor_label {
	transition: scale 0.35s cubic-bezier(0.3, 1, 0.7, 1);
	scale: 0;
}

.cursor_custom.is_mode_pointer .cursor_dot {
	scale: 0.3;
}

.cursor_custom.is_mode_video .cursor_dot,
.cursor_custom.is_mode_sound .cursor_dot {
	scale: 0.4;
}

.cursor_custom.is_mode_next .cursor_dot,
.cursor_custom.is_mode_previous .cursor_dot {
	scale: 1;
}

.cursor_custom.is_mode_contact .cursor_dot {
	scale: 1.2;
}

.cursor_custom.is_pressed.is_mode_default .cursor_dot {
	scale: 0.1;
}

.cursor_custom.is_pressed.is_mode_pointer .cursor_dot {
	scale: 0.2;
}

.cursor_custom.is_pressed.is_mode_video .cursor_dot,
.cursor_custom.is_pressed.is_mode_sound .cursor_dot {
	scale: 0.3;
}

.cursor_custom.is_pressed.is_mode_next .cursor_dot,
.cursor_custom.is_pressed.is_mode_previous .cursor_dot {
	scale: 0.8;
}

.cursor_custom.is_pressed.is_mode_contact .cursor_dot {
	scale: 1;
}

.cursor_custom.is_mode_video .cursor_icon_play,
.cursor_custom.is_mode_sound:not(.is_sound_muted) .cursor_icon_sound,
.cursor_custom.is_mode_sound.is_sound_muted .cursor_icon_muted {
	scale: 2.5;
}

.cursor_custom.is_mode_contact .cursor_label {
	scale: 0.7;
	font-weight: 500;
}

.cursor_custom.is_mode_next .cursor_label,
.cursor_custom.is_mode_previous .cursor_label,
.cursor_custom.is_mode_video .cursor_label,
.cursor_custom.is_mode_sound .cursor_label {
	scale: 1;
}

.cursor_custom.is_mode_next,
.cursor_custom.is_mode_previous,
.cursor_custom.is_mode_video,
.cursor_custom.is_mode_sound {
	mix-blend-mode: normal;
}

.screen_loader {
	z-index: 700;
}

.screen-loader-burst-layer {
	--screen-loader-burst: 0px;
}

.loader_line {
	position: absolute;
	z-index: 5;
	background: #000;
	pointer-events: none;
}

.loader_line_h_top {
	top: var(--x-default);
	left: var(--x-default);
	height: 1px;
	width: calc(100% - var(--x-double-default));
	transform-origin: left center;
	scale: 0 1;
}

.loader_line_h_bottom {
	bottom: var(--x-default);
	right: var(--x-default);
	height: 1px;
	width: calc(100% - var(--x-double-default));
	transform-origin: right center;
	scale: 0 1;
}

.loader_line_v_left {
	top: var(--x-default);
	left: var(--x-default);
	width: 1px;
	height: calc(100% - var(--x-double-default));
	transform-origin: center top;
	scale: 1 0;
}

.loader_line_v_mid_left {
	top: var(--x-default);
	left: 20vw;
	width: 1px;
	height: calc(100% - var(--x-double-default));
	transform-origin: center top;
	scale: 1 0;
}

.loader_line_v_mid_right {
	bottom: var(--x-default);
	right: 20vw;
	width: 1px;
	height: calc(100% - var(--x-double-default));
	transform-origin: center bottom;
	scale: 1 0;
}

.loader_line_v_right {
	bottom: var(--x-default);
	right: var(--x-default);
	width: 1px;
	height: calc(100% - var(--x-double-default));
	transform-origin: center bottom;
	scale: 1 0;
}

.loader_char_mask {
	display: inline-block;
	overflow: hidden;
}

.loader_char {
	display: inline-block;
	will-change: transform;
}

#sec_hero h1 {
	font-family: HostGrotesk, sans-serif;
	font-size: clamp(38px, min(12vw, calc((100svh - 2 * var(--y-default)) / 3)), 280px) !important;
	line-height: 1 !important;
	font-weight: 500;
}

.txt_hero {
	overflow: hidden;
	will-change: transform;
}

.txt_hero_inner {
	display: inline-block;
	will-change: transform;
}

#img_hero {
	transform-origin: center center;
	will-change: transform;
}

#sec_hero {
	will-change: transform;
}

.list_clients {
	overflow: hidden;
}

.list_clients_track {
	display: flex;
	width: max-content;
	will-change: transform;
}

#main_page {
	transform-origin: center top;
	will-change: transform;
}

a.group\/card-work,
.media_service,
.media_story,
img.image-zoom-out,
.image-clip-path {
	transition: clip-path 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

a.group\/card-work .image-zoom-out,
img.image-zoom-out {
	transition: transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.text-animation,
.button-animation {
	overflow: hidden;
}

.txt_reveal_inner {
	display: block;
	transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.txt_iconic_line {
	position: relative;
	display: block;
	overflow: hidden;
	overflow: clip;
	text-align: center;
}

.txt_iconic_inner {
	position: relative;
	display: block;
	text-align: center;
	will-change: transform;
	transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
	.txt_iconic_inner {
		transform: none;
	}
}

.num_figure {
	display: block;
	font-family: var(--font-host-grotesk), HostGrotesk, sans-serif;
	font-size: clamp(30px, 8vw, 120px);
	line-height: 0.8;
	font-weight: 500;
	white-space: nowrap;
	padding: 0.14em 0.06em 0.1em;
}

.card_figure {
	transition: flex 0.5s cubic-bezier(0.3, 1, 0.7, 1);
}

.card_figure.is_active {
	flex: 1.2 1 0;
}

.list_figures .idx_figure,
.list_figures .num_figure,
.list_figures .txt_figure {
	opacity: 0.5;
	transition: opacity 0.3s;
}

.list_figures.is_hovering .card_figure.is_active .idx_figure,
.list_figures.is_hovering .card_figure.is_active .num_figure,
.list_figures.is_hovering .card_figure.is_active .txt_figure {
	opacity: 1;
}

.list_figures.is_hovering .card_figure:not(.is_active) .idx_figure,
.list_figures.is_hovering .card_figure:not(.is_active) .num_figure,
.list_figures.is_hovering .card_figure:not(.is_active) .txt_figure {
	opacity: 0.3;
}

.slide_testimonial {
	pointer-events: none;
}

.slide_testimonial.is_active {
	pointer-events: auto;
}

.txt_quote_mask {
	display: block;
	overflow: hidden;
	text-align: center;
}

.txt_quote_line {
	display: block;
	text-align: center;
	will-change: transform, opacity;
}

.btn_testimonial {
	cursor: pointer;
	background: transparent;
	color: inherit;
}

.btn_testimonial:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -8px;
}

.media_video_clip {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.group\/card-work:hover .media_video_clip.is_ready,
.group\/card-work:focus-within .media_video_clip.is_ready,
.card_work:hover .media_video_clip.is_ready,
.card_work:focus-within .media_video_clip.is_ready,
.card_work.is_playing .media_video_clip.is_ready {
	opacity: 1;
}

.wrap_footer_word {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.canvas_footer {
	display: block;
	width: 100%;
	height: 100%;
}

span.relative.flex.items-center > div.absolute.-left-4 > .size-3 {
	transform: translateX(-10px) scale(0);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

span.relative.flex.items-center:hover > div.absolute.-left-4 > .size-3,
span.relative.flex.items-center:focus-within > div.absolute.-left-4 > .size-3,
.group\/service:hover > span.relative > div.absolute.-left-4 > .size-3,
.group\/service:focus-within > span.relative > div.absolute.-left-4 > .size-3 {
	transform: translateX(-10px) scale(1);
	transform-origin: left center;
	animation: bullet_nudge 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

@keyframes bullet_nudge {
	0%,
	100% {
		transform: translateX(-10px) scale(1);
	}

	50% {
		transform: translateX(0) scale(1);
	}
}

.velora-footer-char {
	font-weight: 400;
}

html.is_page_leave {
	overflow: hidden;
	overscroll-behavior: none;
	background: #000;
}

html.is_page_leave body {
	overflow: hidden;
	background: #000;
}

html.is_page_leave #page_veil {
	z-index: 600;
}

#about_media .image-clip-path {
	will-change: transform, clip-path;
	transition: clip-path 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#about_title,
#about_copy_inner {
	will-change: transform;
}

#about_copy {
	will-change: transform;
}

h2[data-scrolling-text] {
	line-height: 1.2;
}

.txt_fill {
	position: relative;
	display: inline-block;
	line-height: 1.2;
	background-image: linear-gradient(to right, #ffffff, #ffffff 50%, #ffffff66 50%);
	background-size: 200% 100%;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

#page_shell {
	transform-origin: center top;
}

.txt_enter_inner {
	display: block;
	will-change: transform;
}

@property --clip-inset-bottom {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

.input-clip-path {
	transition: --clip-inset-bottom 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

html.is_page_enter .screen_loader,
html:not(:has(#sec_hero)) .screen_loader {
	display: none !important;
}

.btn_burger {
	display: none;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.line_burger {
	display: block;
	transition: transform 0.5s, background-color 0.3s;
}

.line_burger_bot {
	transform: scaleX(0.5);
	transform-origin: right center;
}

@media (hover: hover) and (pointer: fine) {
	.btn_burger:hover .line_burger_bot {
		transform: scaleX(1);
	}
}

header.fixed {
	overflow: visible;
}

.panel_burger {
	display: none;
	z-index: 1;
	clip-path: inset(0 0 100% 0);
}

.veil_burger {
	display: none;
	background: transparent;
	border: 0;
	padding: 0;
}

@media (min-width: 768px) {
	header.fixed > nav {
		position: absolute;
		left: 50%;
		z-index: 10;
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	header.fixed > nav {
		display: none;
	}

	.btn_burger {
		display: flex;
	}

	.panel_burger {
		display: flex;
	}

	.veil_burger {
		display: block;
	}
}

html.is_menu_open .btn_burger .line_burger_top {
	transform: translateY(5px) rotate(-45deg);
	background: #000;
}

html.is_menu_open .btn_burger .line_burger_mid {
	transform: scaleX(0);
	background: #000;
}

html.is_menu_open .btn_burger .line_burger_bot {
	transform: translateX(-4px) translateY(6px) scaleX(1) rotate(45deg);
	background: #000;
}

header.fixed > a svg,
header.fixed > a .p2 {
	transition: fill 0.3s, color 0.3s;
}

html.is_menu_open header.fixed > a svg {
	fill: #000;
}

html.is_menu_open header.fixed > a .p2 {
	color: #000;
}

html.is_menu_open {
	overflow: hidden;
}

html:not(.is_page_revealed) header.fixed > a,
html:not(.is_page_revealed) header.fixed > nav > ul > li,
html:not(.is_page_revealed) header.fixed > .btn_burger {
	transform: translateY(-100px);
}

html:not(.is_page_revealed) #img_hero {
	transform: scale(1.6);
}

html:not(.is_page_revealed) .txt_hero {
	clip-path: inset(0 0 100% 0);
}

html:not(.is_page_revealed) #txt_hero_lead {
	transform: translateY(100%);
	opacity: 0;
}

html:not(.is_page_revealed) #about_title > span {
	transform: translateY(115%);
}

html:not(.is_page_revealed) #about_copy_inner [data-scrolling-text] > span {
	clip-path: inset(0 0 100% 0);
}

html:not(.is_page_revealed) #main_page p.p3.mr-auto {
	clip-path: inset(0 0 100% 0);
}

html:not(.is_page_revealed) #about_media .image-clip-path {
	clip-path: inset(50% round 0);
}

html:not(.is_page_revealed) #about_media .image-zoom-out {
	transform: scale(1.2);
}

html:not(.is_page_revealed) #main_page header.relative a > span {
	transform: translateY(110%);
}

html:not(.is_page_revealed) #main_page h1:not(#about_title) {
	clip-path: inset(0 0 100% 0);
}

html:not(.is_page_revealed) .input-clip-path {
	--clip-inset-bottom: 100%;
}

html:not(.is_page_revealed) .input-label {
	transform: translateY(110%);
}

.media_trail {
	position: absolute;
	z-index: 0;
	width: 9rem;
	height: 9rem;
	overflow: hidden;
	pointer-events: none;
	will-change: transform;
}

.media_trail_inner {
	width: 100%;
	height: 100%;
	will-change: transform;
}

.media_trail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* VELORA content reskin: original layout, type scale and motion retained. */
:root { --velora-accent: #df9eab; }
::selection { background: var(--velora-accent); color: #000; }
header nav .size-3, .group\/service .size-3 { background-color: var(--velora-accent); }
#sec_hero .txt_hero_into { color: var(--velora-accent); }
.num_figure { color: var(--velora-accent); }
.btn_work_filter:hover, a:hover > .p2 { color: var(--velora-accent); }
input:focus, textarea:focus { outline-color: var(--velora-accent); border-color: var(--velora-accent); }
[data-demo-form] [role="status"] { color: var(--velora-accent); }
@media (max-width: 767px) {
	/* Reframe the new portrait without changing the existing hero dimensions. */
	#img_hero { object-position: 67% center; }
}
