/* Lake Como Vespa Shooting — overrides on top of the Laon template.
   Background images live here (not in style="" attributes) so the CSP can stay without 'unsafe-inline'. */
.top_panel.with_bg_image { --site-image-position: center 45%; }
@media (max-width: 767px) { .top_panel.with_bg_image { --site-image-position: 75% bottom; } }
/* Content photographs remain in the original image boxes and use identical
   cover/focal-point rules; <picture> exposes the files to image crawlers. */
.top_panel > .site_hero_media {
	position: absolute !important; inset: 0; z-index: 0 !important;
	display: block; overflow: hidden; pointer-events: none;
}
.site_content_media { position: absolute; inset: 0; display: block; overflow: hidden; }
@media (max-width: 767px) {
	/* The template resets these boxes to static !important on phones. Keep
	   their existing dimensions while containing the absolute picture. */
	.sc_promo .sc_promo_image { position: relative !important; }
}
.site_hero_media > img,
.site_content_media > img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: var(--site-image-position, center center);
}
.top_panel:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,28,.25) 0%, rgba(20,24,28,.15) 45%, rgba(20,24,28,.45) 100%); z-index: 1; pointer-events: none; }
.top_panel > *:not(#background_video) { position: relative; z-index: 2; }

/* Wordmark replaces the template's logo images */
.site_wordmark { display: inline-block; font-family: "Beau Rivage", cursive; font-weight: 400; font-size: 2.1rem; letter-spacing: 0; text-transform: none; color: #fff; text-decoration: none; line-height: 1.2; }
.site_wordmark:hover { color: #fff; opacity: .85; }
.top_panel_title_2 .site_title { margin: 0 0 .25em; font-family: "Beau Rivage", cursive; font-weight: 400; font-size: clamp(3rem, 7.7vw, 6.8rem); line-height: 1.1; letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.top_panel_title_2_text { text-shadow: 0 1px 12px rgba(0,0,0,.45); font-size: 1.4rem; line-height: 1.9; }
@media (max-width: 767px) { .top_panel_title_2_text { font-size: .98rem; line-height: 1.5; } }
.logo_footer_wrap .site_wordmark { font-size: 2.6rem; }

/* Promo blocks: images and column widths (were inline styles in the demo) */
.sc_promo.sc_promo_size_normal .sc_promo_icon,
.sc_promo.sc_promo_size_large .sc_promo_icon { font-size: 5.25em; }
.sc_promo_icon.site_contact_icon { font-size: 4em; }
.sc_promo .sc_promo_image { width: 50%; }
.sc_promo.promo_left .sc_promo_image { left: 0; }
.sc_promo.promo_right .sc_promo_image { right: 0; }
.sc_promo.promo_left .sc_promo_text { width: 50%; float: right; }
.sc_promo.promo_right .sc_promo_text { width: 50%; float: left; }
.sc_promo.sc_promo_no_image .sc_promo_text { width: 100%; }
.promo_experience .sc_promo_image { --site-image-position: center center; }
@media (max-width: 767px) {
	.promo_experience .sc_promo_image { min-height: 0 !important; height: auto !important; aspect-ratio: 4 / 3; }
}
.promo_how .sc_promo_image {
	--site-image-position: center center;
	background-size: cover;
}
@media (max-width: 767px) {
	.promo_how .sc_promo_image { min-height: 0 !important; height: auto !important; aspect-ratio: 4 / 3; }
}
.promo_mission .sc_promo_image {
	--site-image-position: center 58%;
}
@media (min-width: 960px) {
	/* A wide, short window must not crop the owner's head or grounded feet. */
	#mission .sc_promo_text { min-height: max(100vh, 40vw) !important; }
}
@media (max-width: 959px) {
	/* Keep the complete owner and Vespa above the text, including on tablets. */
	#mission .sc_promo_image {
		position: relative;
		right: auto;
		left: auto;
		top: auto;
		bottom: auto;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 4 / 3;
		--site-image-position: center;
	}
	#mission .sc_promo_text {
		float: none;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}
}
.promo_locations .sc_promo_image { --site-image-position: center center; }
/* LCVS-16: keep the 4:3 phone format while preserving the Vespa's handlebars,
   headlight and mirrors. On the 2:3 source, the 75% vertical focal point crops
   only a small part of the front wheel, as permitted by the user.
   Tablet (768-959px) and desktop retain their existing cover crop. */
@media (max-width: 767px) {
	.promo_locations .sc_promo_image { min-height: 0 !important; height: auto !important; aspect-ratio: 4 / 3; --site-image-position: center 80%; }
}
@media (max-width: 767px) and (orientation: landscape) {
	.promo_locations .sc_promo_image { width: 100% !important; }
	.promo_locations .sc_promo_text { width: 100% !important; }
	#locations .wrap,
	#locations .content_container { width: 100%; }
}
/* The template's tablet band (768-959px) is intentionally left untouched, so
   that the Locations photo matches Experience and How it works there. */
.vc_custom_1466154433105 { background-image: url(../assets/contact-vespa-v3.webp) !important; }

/* Steps and locations lists inside promo blocks */
.site_list { list-style: none; margin: 1.5em auto 0; padding: 0; max-width: 30em; text-align: left; }
.site_list li { padding: .9em 0; border-top: 1px solid rgba(0,0,0,.1); }
.site_list li:first-child { border-top: 0; }
.site_list strong { display: block; font-family: "Crimson Text", serif; font-size: 1.35em; font-weight: 600; margin-bottom: .15em; }
ol.site_list { counter-reset: step; }
ol.site_list li { counter-increment: step; padding-left: 2.6em; position: relative; }
ol.site_list li:before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .95em; font-family: "Crimson Text", serif; font-size: 1.2em; opacity: .55; }

.copyright_text a { color: inherit; text-decoration: underline; }
.skip_link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: .6em 1em; background: #fff; color: #000; }
.skip_link:focus { left: 1em; top: 1em; }

/* Footer: full-screen on desktop like the Laon demo, so the last section scrolls completely off screen;
   content centred, copyright at the bottom.  */
body:not(.mobile_layout) .site_footer_wrap {
	min-height: 100vh !important; height: auto !important;
	display: flex; flex-direction: column; justify-content: center;
}
body:not(.mobile_layout) .site_footer_wrap > .copyright_wrap { margin-top: auto; }
body:not(.mobile_layout) .site_footer_wrap > .logo_footer_wrap { margin-top: auto; }
/* Phones: full-screen footer too (large viewport height, so it covers the screen even when the browser bars collapse) */
.mobile_layout .site_footer_wrap, .mobile_layout .scheme_dark.site_footer_wrap { min-height: 100vh !important; min-height: 100lvh !important; height: auto !important; display: flex; flex-direction: column; justify-content: center; }
.mobile_layout .site_footer_wrap > .logo_footer_wrap { margin-top: auto; }
.mobile_layout .site_footer_wrap > .copyright_wrap { margin-top: auto; }
.copyright_wrap { padding-bottom: 1.5em; }

/* 404 page (light header from non-existing-page.html) */
.top_panel_style_1 .site_wordmark, .top_panel_style_1 .site_wordmark:hover { color: #2a2a2a; }

/* Home: the big title already shows the name, hide the small duplicate wordmark */
.top_panel_style_2 .menu_main_wrap .site_wordmark { display: none; }

/* Readability: list descriptions in the promo blocks (darker, upright, a bit larger on phones) */
.site_list li { font-style: normal; font-weight: 400; color: #4a4a4a; }
.site_list strong { color: #2a2a2a; }
@media (max-width: 767px) {
	.site_list li, .sc_promo.sc_promo_size_large .sc_promo_descr, .sc_promo .sc_promo_content p { font-size: 15px; line-height: 1.6; color: #4a4a4a; font-style: normal; }
}

/* Phones: full-height header with the title centred (desktop height is set by the template script) */
@media (max-width: 1023px) {
	header.top_panel.header_fullheight { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
	header.top_panel.header_fullheight > .top_panel_navi { position: absolute; top: 0; left: 0; right: 0; }
}

/* Kept from the template's side-menu layout: clip full-bleed rows so the page never scrolls sideways */
.body_wrap { position: relative; overflow: hidden; max-width: 100%; }

/* Navigation: desktop = dark side bar with the section index (dashes) only; phones = hamburger + slide-in panel, no side bar */
.menu_side_inner > .menu_mobile_button { display: none; }
/* Neutral indicators on the hero, including the first paint before JS runs. */
body:not(.site_toc_in_sections) #toc_menu .toc_menu_item_active .toc_menu_icon_default:before {
	width: 1em;
	background-color: #fff;
}
/* Readable desktop section labels, centred on their corresponding dash. */
#toc_menu .toc_menu_description {
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: .04em;
	top: 50%;
	transform: translateY(-50%);
}
/* Closed from the first paint, before JavaScript adds .mobile_layout.
   Keep the same transform in both states so layout initialization cannot
   accidentally animate an initially visible panel off screen. */
.menu_mobile {
	margin-right: 0;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .3s ease, visibility 0s linear .3s;
	pointer-events: none;
}
.menu_mobile.opened {
	transform: translateX(0);
	visibility: visible;
	transition: transform .3s ease, visibility 0s;
	pointer-events: auto;
}
.mobile_layout .menu_mobile {
	width: max-content;
	max-width: calc(100vw - 24px);
}
.mobile_layout .menu_mobile_inner {
	position: relative;
	width: auto;
	padding: 5em 20px;
}
.mobile_layout .menu_mobile_nav_area { width: max-content; max-width: 100%; }
.mobile_layout .menu_mobile_nav_area li > a { white-space: nowrap; }
.mobile_layout .menu_mobile_close { margin-right: 20px; }
.site_scroll_to_top {
	display: none;
	visibility: hidden;
	pointer-events: none;
}
.site_scroll_to_top.trx_addons_scroll_to_top,
.menu_style_side .site_scroll_to_top.trx_addons_scroll_to_top {
	display: block;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 20px;
	line-height: 48px;
	right: max(16px, env(safe-area-inset-right));
	bottom: -64px;
	background-color: #e39a31;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.site_scroll_to_top.trx_addons_scroll_to_top.show {
	bottom: max(16px, env(safe-area-inset-bottom));
	visibility: visible;
	pointer-events: auto;
}
.site_scroll_to_top.trx_addons_scroll_to_top:hover,
.menu_style_side .site_scroll_to_top.trx_addons_scroll_to_top:hover { background-color: #2a2a2a; color: #fff; }
.site_scroll_to_top:focus-visible { outline: 2px solid #2a2a2a; outline-offset: 3px; }
/* Desktop: keep the button fully inside the template's 49px menu rail.
   Preserve the existing 48px touch target and safe-area spacing on mobile. */
@media (min-width: 960px) {
	.menu_style_side:not(.mobile_layout) .site_scroll_to_top.trx_addons_scroll_to_top {
		width: 41px;
		height: 41px;
		line-height: 41px;
		right: 4px;
		box-shadow: none;
		outline-offset: 1px;
	}
	.menu_style_side:not(.mobile_layout) .site_scroll_to_top.trx_addons_scroll_to_top.show {
		bottom: 4px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.site_scroll_to_top { transition: none; }
}
body:not(.mobile_layout) header .menu_mobile_button { display: none; }
@media (max-width: 959px) {
	.menu_side_wrap { display: none !important; }
	body.menu_style_side { padding-right: 0; }
}
.mobile_layout .menu_side_wrap { display: none !important; }
.mobile_layout header.top_panel > .menu_mobile_button,
.mobile_layout .menu_mobile_button.site_fixed_burger {
	/* same icon as the Laon demo: template size (1.25em x 1em) and colours; pinned to the viewport (site.js moves it to <body>) so it stays in the same place while scrolling */
	display: block; position: fixed !important; top: 2.9em !important; right: 1.5em !important; left: auto !important; z-index: 100001;
	margin: 0 !important; transform: none !important;
}
/* invisible 44px touch area around the compact icon */
.mobile_layout .menu_mobile_button.site_fixed_burger:after,
.mobile_layout header.top_panel > .menu_mobile_button:after { content: ''; position: absolute; top: -15px; bottom: -15px; left: -11px; right: -11px; }
.mobile_layout header.top_panel > .top_panel_navi { pointer-events: none; }

/* Scroll darkening (template script adds .top_panel_mask): cover the whole header/footer background, not just the area below the subtitle */
.top_panel > .top_panel_mask, .site_footer_wrap > .top_panel_mask {
	position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: auto !important;
	z-index: 1 !important; pointer-events: none; background-color: #000;
}

/* Footer emblem (logo) */
.site_emblem_link { display: block; width: 190px; margin: 0 auto 1.4em; line-height: 0; }
.site_emblem_link:hover { opacity: .85; }
.logo_footer_wrap_inner .site_emblem { display: block; width: 100%; max-width: 100%; height: auto; }
@media (max-width: 767px) { .site_emblem_link { width: 150px; margin-bottom: 1.1em; } }

@media (max-width: 767px) { .copyright_wrap .copyright_text { padding: 0 1.5em; } }



/* Fixed mobile hamburger: once the page scrolls past the header, a small white disc (separate element, behind the icon) keeps it readable over photos and the dark footer */
.site_burger_disc { display: none; }
.mobile_layout .site_burger_disc {
	display: block; position: fixed; z-index: 100000; top: calc(2.9em + 7px - 22px); right: calc(1.5em + 9px - 22px); width: 44px; height: 44px;
	border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); opacity: 0; transition: opacity .25s; pointer-events: none;
}
body.site_scrolled .site_burger_disc { opacity: 1; }
/* Landscape needs the white backing from the first screen, even before scroll. */
@media (orientation: landscape) {
	.mobile_layout .site_burger_disc { opacity: 1; }
}

/* Get in touch: centred white card with the Laon contact form, over the lake background */
.site_contact_row { display: flex !important; align-items: center; justify-content: center; min-height: 100vh; padding: 6em 1.5em; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; }
.site_contact_card { width: 100%; max-width: 780px; background: #fff; padding: 2em; box-sizing: border-box; }
.site_contact_card .sc_form_subtitle { margin-top: .4em; }
.site_contact_intro { max-width: 34em; margin: 1.2em auto 2.2em; color: #555; }
.site_contact_form { text-align: left; }
.site_contact_form .sc_form_field_button { text-align: center; }
.site_contact_form button[disabled] { opacity: .6; cursor: wait; }
.site_contact_form .trx_addons_message_box { display: none; margin-top: 1.5em; text-align: center; }
.site_contact_form .trx_addons_message_box.site_show { display: block; }
.site_hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) {
	.site_contact_row { min-height: 100vh !important; min-height: 100svh !important; padding: 0; background: #fff none !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: stretch !important; }
	.site_contact_card { display: flex; flex-direction: column; justify-content: center; }
	.site_contact_card { padding: 3em 1.5em; }
	.site_contact_form .trx_addons_column-1_2 { width: 100%; }
}
/* Phones: title in the sky area, above the couple of the vertical hero image */
@media (max-width: 767px) {
	header.top_panel.header_fullheight { justify-content: flex-start; padding-top: 0; }
}
/* Desktop/tablet: lift the hero title into the sky, clear of the couple's faces */
@media (min-width: 768px), (max-width: 767px) and (orientation: landscape) {
	/* Title near the top, rule + tagline anchored to the bottom of the hero (below the couple's faces) */
	header.top_panel.header_fullheight { position: relative; }
	.top_panel_title_2_wrap { transform: none; position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box; padding: 5vh 0 9vh; margin: 0; pointer-events: none; }
	.top_panel_title_2_wrap a { pointer-events: auto; }
	.top_panel_title_2 { margin: 0 !important; }
	.top_panel_title_2_wrap > .content_wrap { flex: 1 0 auto; display: flex; flex-direction: column; }
	.top_panel_title_2 { flex: 1 0 auto; display: flex; flex-direction: column; }
	.top_panel_title_2_bottom { margin-top: auto; text-align: center; }
	.top_panel_title_2_bottom .top_panel_title_2_rule { width: 9rem; margin: 0 auto 1.1em; }
	.top_panel_title_2_bottom .top_panel_title_2_tagline { font-size: 1.6rem; text-shadow: 0 1px 14px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.35); }
}
/* Desktop: centred Get in touch card; background anchored left so the Vespa stays visible beside the card */
@media (min-width: 1024px) {
	.vc_custom_1466154433105 { background-position: left center !important; }
	.site_contact_card { max-width: 720px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
	.site_contact_card { max-width: 640px; padding: 3.5em 3em 3em; }
}

/* Hero: thin white rule and italic tagline (same font as the promo subtitles, e.g. "The lake, a vintage Vespa and the perfect light.") */
.top_panel_title_2_rule { display: block; width: 7rem; height: 1px; margin: .9em auto .8em; background: rgba(255,255,255,.85); box-shadow: 0 1px 8px rgba(0,0,0,.25); }
.top_panel_title_2_tagline { font-family: "Crimson Text", serif; font-style: italic; font-weight: 600; font-size: 1.35rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
@media (max-width: 767px) { .top_panel_title_2_rule { width: 5rem; margin: .7em auto .6em; } .top_panel_title_2_tagline { font-size: 1.1rem; } }
/* A rotated phone needs the horizontal photo even below the 768px breakpoint.
   Trim only a narrow strip of sky, keeping the couple and Vespa in view. */
@media (max-width: 1023px) and (orientation: landscape) {
	header.top_panel.header_fullheight {
		--site-image-position: center bottom;
		aspect-ratio: 8 / 5;
		height: auto !important;
		min-height: 100vh;
		min-height: 100svh;
	}
	.top_panel_title_2_wrap { padding: 10vh 0 3vh; }
	.top_panel_title_2_wrap > .content_wrap { width: calc(100% - 3rem); }
	.top_panel_title_2 { width: 100%; text-align: center; }
	.top_panel_title_2 .site_title { font-size: clamp(2.4rem, 4.8vw, 3.3rem); }
	.top_panel_title_2_text { font-size: clamp(.98rem, 2vw, 1.2rem); line-height: 1.5; }
	.top_panel_title_2_bottom { text-align: center; }
	.top_panel_title_2_bottom .top_panel_title_2_rule { width: 5rem; margin: 0 auto .6em; }
	.top_panel_title_2_bottom .top_panel_title_2_tagline { font-size: clamp(1.25rem, 2.8vw, 1.65rem); }
}
/* Get in touch card: same raised effect as the Laon "Events" box (sc_action_item_inner) */
@media (min-width: 768px) {
	.site_contact_card { box-shadow: -5px 5px 20px 20px rgba(0,0,0,.35); }
}