/**
 * Josvi site UI — Hero CTA (single action) + menu close duration.
 * Footer-printed so it loads after Divi module CSS (#et-critical-inline-css).
 *
 * CTA color conflict: body #page-container .et_pb_section .et_pb_button_0
 * (and _1 / :hover) in #et-critical-inline-css.
 * Gourmet Gold: #b89b6a.
 */

/* Remove secondary LISTEN module without editing Divi. Wrapper uses
   display:inline-block !important in Theme Options, so hide needs !important. */
html body .jm-home-hero .et_pb_button_1_wrapper,
html body .jm-home-hero a.jm-hero-listen {
	display: none !important;
	margin: 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
}

/* Drop the 14px two-button gap; keep first CTA left-aligned with copy. */
html body .jm-home-hero .et_pb_button_module_wrapper {
	margin-right: 0 !important;
}

/*
 * .jm-hero-left uses transform: translateY(-45px), which creates a containing
 * block and prevents backdrop-filter from sampling the Hero video. Keep the
 * same visual offset without transform so glass can see the video.
 */
html body .jm-home-hero .jm-hero-left {
	transform: none !important;
	position: relative;
	top: -45px;
}

html body #page-container .jm-home-hero a.et_pb_button.jm-hero-cta.jm-hero-work {
	color: #f4f0e8 !important;
	border-color: #f4f0e8 !important;
	background-color: rgba(17, 16, 14, 0.24) !important;
	background-image: linear-gradient(
		180deg,
		rgba(244, 240, 232, 0.10) 0%,
		rgba(17, 16, 14, 0.06) 42%,
		rgba(17, 16, 14, 0.20) 100%
	) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
	backdrop-filter: blur(12px) saturate(1.18) !important;
	box-shadow: inset 0 1px 0 rgba(244, 240, 232, 0.14) !important;
	transition: color 0.2s ease, border-color 0.2s ease !important;
}

html body #page-container .jm-home-hero a.et_pb_button.jm-hero-cta.jm-hero-work:hover,
html body #page-container .jm-home-hero a.et_pb_button.jm-hero-cta.jm-hero-work:focus-visible {
	color: #b89b6a !important;
	border-color: #b89b6a !important;
	background-color: rgba(17, 16, 14, 0.24) !important;
	background-image: linear-gradient(
		180deg,
		rgba(244, 240, 232, 0.10) 0%,
		rgba(17, 16, 14, 0.06) 42%,
		rgba(17, 16, 14, 0.20) 100%
	) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
	backdrop-filter: blur(12px) saturate(1.18) !important;
	box-shadow: inset 0 1px 0 rgba(244, 240, 232, 0.14) !important;
}

html body #page-container .jm-home-hero a.et_pb_button.jm-hero-cta.jm-hero-work:focus:not(:focus-visible) {
	color: #f4f0e8 !important;
	border-color: #f4f0e8 !important;
}

/*
 * Open and close share 0.72s + the same easing. No closing class / delay.
 * Removing .dms_menu_active starts the reverse slide on the next frame.
 */
html body .et_slide_in_menu_container.dms_inline_fullscreen_menu,
html body .et_slide_in_menu_container.dms_inline_fullscreen_menu.dms_menu_active {
	transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/*
 * Hero responsive only. Desktop (≥1025px) keeps Theme Options composition.
 * Title must wrap at spaces / middots, never letter-by-letter.
 */
html body .jm-home-hero .jm-hero-title h1,
html body .jm-home-hero .jm-hero-desc p {
	word-break: normal !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
}

@media (max-width: 1024px) {
	html body .jm-home-hero,
	html body .jm-home-hero .jm-hero-row {
		min-height: 100svh !important;
	}

	html body .jm-home-hero .jm-hero-left {
		flex: 1 1 auto !important;
		max-width: min(72%, 640px) !important;
		padding-left: clamp(40px, 6vw, 88px) !important;
		padding-right: 4vw !important;
		top: 0 !important;
	}

	html body .jm-home-hero .jm-hero-title h1 {
		font-size: clamp(28px, 3.4vw, 42px) !important;
		letter-spacing: 0.08em !important;
		line-height: 1.22 !important;
	}

	html body .jm-home-hero .jm-hero-desc {
		max-width: 36em !important;
	}

	html body .jm-home-hero .jm-hero-desc p {
		font-size: clamp(13px, 1.4vw, 15px) !important;
		letter-spacing: 0.16em !important;
		line-height: 1.55 !important;
	}

	html body .jm-home-hero.et_pb_section {
		background-size: cover !important;
		background-position: 78% 28% !important;
	}
}

@media (max-width: 767px) {
	html body .jm-home-hero,
	html body .jm-home-hero .jm-hero-row {
		min-height: 100svh !important;
		min-height: 100dvh !important;
	}

	html body .jm-home-hero .jm-hero-row {
		align-items: flex-end !important;
	}

	html body .jm-home-hero .jm-hero-left {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		padding-top: 96px !important;
		padding-bottom: clamp(28px, 8vh, 56px) !important;
		top: 0 !important;
	}

	html body .jm-home-hero .jm-hero-title h1 {
		font-size: clamp(22px, 6.2vw, 28px) !important;
		letter-spacing: 0.045em !important;
		line-height: 1.28 !important;
		max-width: 16em;
	}

	html body .jm-home-hero .jm-hero-desc {
		max-width: 100% !important;
	}

	html body .jm-home-hero .jm-hero-desc p {
		font-size: clamp(12px, 3.4vw, 14px) !important;
		letter-spacing: 0.1em !important;
		line-height: 1.5 !important;
	}

	html body .jm-home-hero.et_pb_section {
		background-size: cover !important;
		background-position: 82% 18% !important;
		background-repeat: no-repeat !important;
	}

	html body #logo-menu .jm-menu-row {
		right: 20px !important;
	}

	html body .jm-home-hero {
		overflow-x: clip;
	}
}

@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
	html body .jm-home-hero,
	html body .jm-home-hero .jm-hero-row {
		min-height: 100svh !important;
		min-height: 100dvh !important;
	}

	html body .jm-home-hero .jm-hero-row {
		align-items: center !important;
	}

	html body .jm-home-hero .jm-hero-left {
		padding-top: 64px !important;
		padding-bottom: 20px !important;
	}

	html body .jm-home-hero .jm-hero-title h1 {
		font-size: clamp(18px, 4.2vw, 24px) !important;
		letter-spacing: 0.04em !important;
	}

	html body .jm-home-hero .jm-hero-desc p {
		font-size: 12px !important;
		letter-spacing: 0.08em !important;
		line-height: 1.4 !important;
	}

	html body .jm-home-hero.et_pb_section {
		background-position: 80% 30% !important;
	}
}

@supports not (min-height: 100svh) {
	@media (max-width: 1024px) {
		html body .jm-home-hero,
		html body .jm-home-hero .jm-hero-row {
			min-height: 100vh !important;
		}
	}
}

/* Header logo HOME link: one rectangular hit area, independent of PNG alpha.
 * .jm-menu-row is a full-width absolute strip (z-index 20) over the logo;
 * let empty space pass through so the HOME rect stays continuous. */
html body #logo-menu .et_pb_image_0_tb_header a {
	display: inline-flex;
	align-items: center;
	box-sizing: content-box;
	padding: 0 5px;
	margin: 0 -5px;
	line-height: 0;
	text-decoration: none;
	transform: none;
}

html body #logo-menu .et_pb_image_0_tb_header a:hover,
html body #logo-menu .et_pb_image_0_tb_header a:focus {
	transform: none;
}

html body #logo-menu .et_pb_image_0_tb_header .et_pb_image_wrap,
html body #logo-menu .et_pb_image_0_tb_header img {
	display: block;
	pointer-events: none;
}

html body #logo-menu .et_pb_image_0_tb_header a:focus-visible {
	outline: 1px solid rgba(184, 155, 106, 0.8);
	outline-offset: 4px;
}

html body #logo-menu .jm-menu-row,
html body #logo-menu .et_pb_column_1_tb_header {
	pointer-events: none !important;
}

html body #logo-menu .dsm_menu_trigger_0_tb_header {
	pointer-events: auto !important;
}

/* Architect Theme Builder: hide fixed Instagram corner only. */
html body .et_pb_section_2_tb_header {
	display: none !important;
}

/*
 * Architect fixed CONTACT shortcut (.et_pb_section_1_tb_header).
 * Hidden on /contact via contact.css (body.jm-contact-page).
 */
html body .et_pb_section_1_tb_header img,
html body .et_pb_section_1_tb_header .wp-image-128 {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	visibility: hidden !important;
}

html body .et_pb_section_1_tb_header,
html body .et_pb_section_1_tb_header .et_pb_text_0_tb_header,
html body .et_pb_section_1_tb_header .et_pb_text_0_tb_header:hover,
html body .et_pb_section_1_tb_header .et_pb_text_inner,
html body .et_pb_section_1_tb_header .et_pb_text_inner p {
	transform: none !important;
	translate: none !important;
	scale: none !important;
}

html body .et_pb_section_1_tb_header .et_pb_text_0_tb_header,
html body .et_pb_section_1_tb_header .et_pb_text_0_tb_header:hover,
html body .et_pb_section_1_tb_header .et_pb_text_0_tb_header:focus-within {
	padding: 0 !important;
	margin: 0 !important;
	transition: none !important;
}

html body .et_pb_section_1_tb_header .jm-fixed-contact {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: Inter, "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(184, 155, 106, 0.76);
	background: transparent;
	border: 0;
	box-shadow: none;
	transform: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

html body .et_pb_section_1_tb_header .jm-fixed-contact::after {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 2.55em;
	height: 38px;
	border-top: 1px solid rgba(184, 155, 106, 0.55);
	border-right: 1px solid rgba(184, 155, 106, 0.55);
	pointer-events: none;
}

html body .et_pb_section_1_tb_header .jm-fixed-contact:hover,
html body .et_pb_section_1_tb_header .jm-fixed-contact:focus-visible {
	color: rgba(184, 155, 106, 1);
	transform: none;
}

html body .et_pb_section_1_tb_header .jm-fixed-contact:focus-visible {
	outline: 1px solid rgba(184, 155, 106, 0.8);
	outline-offset: 6px;
}