/* Valmot Parts: site styles. Navy / yellow workshop palette, condensed display type. */

:root {
	--vp-paper: #FFFFFF;
	--vp-soft: #F1F3F5;
	--vp-surface: #FFFFFF;
	--vp-ink: #0E1A27;
	--vp-muted: #56636F;
	--vp-line: #C9D1D9;
	--vp-brand: #FBAE19;
	--vp-brand-ink: #0E1A27;
	--vp-btxt: #9A5400;
	--vp-bar: #0E1A27;
	--vp-bar-ink: #FFFFFF;
	--vp-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--vp-body: "Roboto", "Segoe UI", system-ui, sans-serif;
}

/* Dark: follows the system unless the visitor picked a theme (html[data-theme]). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--vp-paper: #0B1118;
		--vp-soft: #192634;
		--vp-surface: #121C27;
		--vp-ink: #E8EEF3;
		--vp-muted: #9FADBA;
		--vp-line: #2B3A49;
		--vp-btxt: #FBAE19;
		--vp-bar: #05090D;
		color-scheme: dark;
	}
	:root:not([data-theme="light"]) .vp-ico-sun { display: block; }
	:root:not([data-theme="light"]) .vp-ico-moon { display: none; }
}
:root[data-theme="dark"] {
	--vp-paper: #0B1118;
	--vp-soft: #192634;
	--vp-surface: #121C27;
	--vp-ink: #E8EEF3;
	--vp-muted: #9FADBA;
	--vp-line: #2B3A49;
	--vp-btxt: #FBAE19;
	--vp-bar: #05090D;
	color-scheme: dark;
}
:root[data-theme="dark"] .vp-ico-sun { display: block; }
:root[data-theme="dark"] .vp-ico-moon { display: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--vp-paper);
	color: var(--vp-ink);
	font: 16px/1.6 var(--vp-body);
}

[id] { scroll-margin-top: 16px; }

.vp-wrap {
	max-width: 1120px;
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}

:where(.vp-bar, .vp-header, .vp-main, .vp-ft, .vp-fab, .vp-toast) :focus-visible {
	outline: 3px solid var(--vp-brand);
	outline-offset: 2px;
}

:where(.vp-bar, .vp-header, .vp-main, .vp-ft) :where(h1, h2, h3, p, ul, ol, figure) {
	margin: 0;
}

/* ---------- Top bar ---------- */
.vp-bar { background: var(--vp-bar); color: var(--vp-bar-ink); }
.vp-bar .vp-wrap {
	display: flex; gap: 12px 24px; align-items: center; justify-content: space-between;
	flex-wrap: wrap; padding-block: 8px; font-size: .85rem;
}
.vp-bar__grp { opacity: .9; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.vp-langs { display: flex; gap: 4px; }
.vp-langs a {
	font: inherit; color: inherit; text-decoration: none;
	border: 1px solid #ffffff55; border-radius: 3px; padding: 3px 10px; line-height: 1.4;
}
.vp-langs a:hover { border-color: var(--vp-brand); color: inherit; }
.vp-langs a[aria-current="true"] { background: var(--vp-brand); color: var(--vp-brand-ink); border-color: var(--vp-brand); }
.vp-bar__tools { display: flex; align-items: center; gap: 10px; }
.vp-bar .vp-theme-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0;
	background: transparent; color: var(--vp-bar-ink); border: 1px solid #ffffff55; border-radius: 3px; cursor: pointer;
}
.vp-bar .vp-theme-toggle:hover, .vp-bar .vp-theme-toggle:focus { background: transparent; color: var(--vp-brand); border-color: var(--vp-brand); }
.vp-ico-sun { display: none; }
.vp-ico-moon { display: block; }

/* ---------- Header ---------- */
.vp-header .vp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.vp-logo { display: block; background: #fff; border-radius: 4px; padding: 4px 8px; line-height: 0; }
.vp-logo img { height: 52px; width: auto; display: block; }
.vp-nav {
	display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto;
	font-family: var(--vp-display); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem;
}
.vp-nav a { color: var(--vp-ink); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.vp-nav a:hover { color: var(--vp-ink); border-color: var(--vp-brand); }
.vp-wtb { display: block; line-height: 0; flex: none; background: #fff; border-radius: 4px; margin-left: 8px; }
.vp-wtb img { height: 54px; width: auto; display: block; }
.vp-wtb:hover { filter: brightness(.97); }

@media (max-width: 820px) {
	.vp-header .vp-wrap { flex-wrap: wrap; row-gap: 10px; }
	.vp-logo img { height: 44px; }
	.vp-wtb { order: 2; margin-left: auto; }
	.vp-wtb img { height: 40px; }
	.vp-nav { order: 3; width: 100%; margin-left: 0; gap: 4px 18px; }
}

/* ---------- Hero ---------- */
.vp-hero { background: var(--vp-soft); border-block: 1px solid var(--vp-line); }
.vp-hero .vp-wrap {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px; padding-block: 56px; align-items: center;
}
.vp-tag {
	font-family: var(--vp-display); text-transform: uppercase; letter-spacing: .12em;
	font-size: .85rem; color: var(--vp-btxt); font-weight: 700; margin: 0 0 12px;
}
.vp-main .vp-h1 {
	font-family: var(--vp-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.4rem);
	line-height: 1.02; text-transform: uppercase; margin: 0 0 20px; text-wrap: balance; color: var(--vp-ink);
}
.vp-h1 em { font-style: normal; background: var(--vp-brand); color: var(--vp-brand-ink); padding: 0 .12em; }
.vp-lead { font-size: 1.125rem; color: var(--vp-muted); max-width: 52ch; margin: 0 0 28px; }
.vp-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.vp-btn {
	font-family: var(--vp-display); letter-spacing: .06em; font-weight: 700; font-size: 1rem;
	text-decoration: none; display: inline-block; border: 2px solid var(--vp-ink); border-radius: 3px; padding: 13px 22px;
}
.vp-btn--call {
	display: inline-flex; align-items: center; gap: 14px; border-radius: 999px; padding: 12px 30px 12px 20px;
	background: var(--vp-brand); border-color: var(--vp-brand); color: var(--vp-brand-ink);
	box-shadow: 0 6px 0 rgba(14, 26, 39, .22);
}
.vp-btn--call:hover, .vp-btn--call:focus { color: var(--vp-brand-ink); filter: brightness(.95); }
.vp-btn--call:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(14, 26, 39, .22); }
.vp-btn__ct { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.vp-btn__ct b { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; }
.vp-btn__ct span { font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .vp-btn { transition: filter .15s; } }

.vp-cars { display: grid; gap: 18px; min-width: 0; }
.vp-car { margin: 0; background: #fff; border: 1px solid var(--vp-line); border-bottom: 6px solid var(--vp-brand); padding: 12px 12px 0; min-width: 0; }
.vp-car img { display: block; width: 100%; height: auto; }
.vp-car figcaption {
	font-family: var(--vp-display); text-transform: uppercase; letter-spacing: .08em;
	font-size: .85rem; color: #56636F; padding: 8px 2px 10px;
}

/* ---------- Sections ---------- */
.vp-s { padding-block: 64px; }
.vp-main .vp-t {
	font-family: var(--vp-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.1; margin: 0 0 28px; text-wrap: balance; color: inherit;
}
.vp-lede { color: var(--vp-muted); max-width: 60ch; margin: -12px 0 28px; }

.vp-gal { display: flex; gap: 16px; align-items: stretch; }
.vp-gal figure { margin: 0; background: #fff; border: 1px solid var(--vp-line); display: flex; flex-direction: column; min-width: 0; }
.vp-gal img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); }
.vp-gal figcaption { padding: 10px 14px; border-top: 1px solid #DDE3E9; color: #56636F; font-size: .9rem; background: #fff; margin-top: auto; }
.vp-gal figcaption b {
	display: block; color: #0E1A27; font-family: var(--vp-display); font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; font-size: 1rem;
}

.vp-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.vp-svc article { border-top: 4px solid var(--vp-brand); background: var(--vp-soft); padding: 22px; min-width: 0; }
.vp-main .vp-svc h3 {
	font-family: var(--vp-display); font-weight: 700; text-transform: uppercase;
	font-size: 1.25rem; line-height: 1.2; margin: 0 0 8px; color: var(--vp-ink);
}
.vp-svc p { margin: 0; color: var(--vp-muted); }

.vp-how { background: var(--vp-bar); color: var(--vp-bar-ink); }
.vp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.vp-steps li { border-left: 3px solid var(--vp-brand); padding-left: 16px; }
.vp-steps b { display: block; font-family: var(--vp-display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; margin-bottom: 4px; }
.vp-steps span { opacity: .8; }

@media (max-width: 820px) {
	.vp-hero .vp-wrap { grid-template-columns: 1fr; padding-block: 40px; }
	.vp-s { padding-block: 44px; }
	.vp-gal { flex-direction: column; }
	.vp-gal figure { flex: none !important; }
}

/* ---------- Footer ---------- */
.vp-ft { background: var(--vp-bar); color: #fff; font-size: .95rem; padding: 0; }
/* Keep the last footer row clear of the floating chat buttons (bottom right). */
@media (max-width: 1400px) { .vp-ft__bot .vp-wrap { padding-right: 160px; } }
@media (max-width: 560px) {
	.vp-ft { padding-bottom: 64px; }
	.vp-ft__bot .vp-wrap { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
.vp-ft__grid { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr 1.2fr; gap: 28px 36px; padding-block: 44px 32px; }
.vp-ft__grid > div { min-width: 0; }
.vp-ft .vp-ft__h {
	font-family: var(--vp-display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
	font-size: .85rem; line-height: 1.3; margin: 0 0 12px; color: #FBAE19;
}
.vp-ft p { margin: 0 0 10px; color: #C9D3E0; line-height: 1.5; }
.vp-ft a { color: #fff; }
.vp-ft a:hover { color: #fff; }
.vp-ft__logo { display: inline-block; background: #fff; border-radius: 6px; padding: 6px 10px; line-height: 0; margin-bottom: 12px; }
.vp-ft__logo img { height: 44px; width: auto; display: block; }
.vp-ft__link { font-weight: 600; text-underline-offset: 3px; }
.vp-ft__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vp-ft__list li { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: baseline; }
.vp-ft__list span { color: #9FADC2; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.vp-ft__list a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.vp-ft__list a:hover, .vp-ft__grp a:hover { text-decoration: underline; }
.vp-ft__chat { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.vp-ft__chat a { text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 999px; font-size: .9rem; }
.vp-ft__chat a:hover { filter: brightness(1.1); }
.vp-wa { background: #1B7F45; }
.vp-vb { background: #6650D9; }
.vp-ft .vp-ft__grp { font-size: .85rem; }
.vp-ft__grp a { text-decoration: none; font-weight: 600; }
.vp-ft__map {
	display: block; margin-top: 12px; border-radius: 8px; overflow: hidden; border: 1px solid #ffffff2e;
	max-width: 320px; text-decoration: none; background: #1a2a44;
}
.vp-ft__map svg { display: block; width: 100%; height: auto; }
.vp-ft__mapt { display: block; padding: 8px 12px; background: #0d1a30; }
.vp-ft__mapt b { display: block; color: #fff; font-size: .9rem; }
.vp-ft__mapt span { color: #B9C6DC; font-size: .8rem; }
.vp-ft__map:hover .vp-ft__mapt b { text-decoration: underline; }
.vp-ft__brands {
	width: 100%; list-style: none; margin: 0; padding: 0 0 28px;
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.vp-ft__brands li { background: #fff; border-radius: 6px; height: 76px; display: flex; align-items: center; justify-content: center; padding: 8px; min-width: 0; }
.vp-ft__brands img { max-height: 58px; max-width: 100%; width: auto; height: auto; display: block; }
.vp-ft__brands img.is-wide { max-height: 40px; }
.vp-ft__bot { border-top: 1px solid #ffffff22; }
.vp-ft__bot .vp-wrap { padding-block: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; }
.vp-ft .vp-ft__bot p { margin: 0; font-size: .8rem; color: #9FADC2; }
.vp-ft .vp-ft__privacy { margin-left: auto; font-size: .8rem; color: #C9D3E0; text-underline-offset: 3px; }
.vp-ft .vp-ft__privacy:hover { color: #fff; }

/* ---------- Plain pages (Hello templates inside our header/footer) ---------- */
body:not(.home) .site-main {
	max-width: 1120px; margin-inline: auto; padding-block: 48px 64px;
	padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.vp-ft .vp-ft__bot p a { color: #C9D3E0; text-underline-offset: 3px; }
.vp-ft .vp-ft__bot p a:hover { color: #fff; }
body:not(.home) .site-main .entry-title {
	font-family: var(--vp-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; color: var(--vp-ink); margin: 0 0 20px;
}
body:not(.home) .site-main a { color: var(--vp-btxt); }

@media (max-width: 900px) { .vp-ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
	.vp-ft__brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-ft__brands li { height: 64px; }
	.vp-ft__brands img { max-height: 46px; }
}
@media (max-width: 560px) { .vp-ft__grid { grid-template-columns: 1fr; padding-block: 32px 24px; } }

/* ---------- Floating chat buttons ---------- */
.vp-fab {
	position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
	z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.vp-fab__btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 13px; border-radius: 999px;
	color: #fff; text-decoration: none; font: 600 15px/1 var(--vp-body); box-shadow: 0 8px 24px rgba(5, 9, 13, .28);
}
.vp-fab__btn:hover, .vp-fab__btn:focus { color: #fff; filter: brightness(1.1); }
.vp-fab .vp-fab__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #0F2147; }
@media (max-width: 560px) {
	.vp-fab { flex-direction: row; }
	.vp-fab__btn { padding: 10px 13px 10px 11px; font-size: 14px; }
}

/* ---------- Viber fallback toast ---------- */
.vp-toast {
	position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90;
	width: max-content; max-width: min(92vw, 420px); background: #1d1340; color: #fff;
	border: 1px solid #6650D9; border-radius: 10px; padding: 12px 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35); font: 14px/1.45 var(--vp-body);
}
.vp-toast[hidden] { display: none; }
.vp-toast > b { display: block; margin-bottom: 4px; }
.vp-toast__row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vp-toast button, .vp-toast__wa {
	font: inherit; font-weight: 600; border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none; line-height: 1.45;
}
.vp-toast .vp-toast__copy { background: #6650D9; color: #fff; border: 0; }
.vp-toast .vp-toast__wa { background: #1B7F45; color: #fff; }
.vp-toast .vp-toast__close { background: transparent; color: #cfc8f5; border: 1px solid #6650D9; font-weight: 400; padding: 7px 12px; }
.vp-toast button:hover, .vp-toast button:focus, .vp-toast__wa:hover { filter: brightness(1.1); color: #fff; }