/* ==========================================================================
   YULA Horizon: site styles
   --------------------------------------------------------------------------
   Moved here from Appearance > Customize > Additional CSS.

   Free Elementor has no per-element CSS field, and containers ignore the
   "CSS Classes" setting, so containers are targeted by their Elementor
   element ID (.elementor-element-xxxxxxxx). Widgets can use the reusable
   classes further down (.yula-frost, .yula-grad-num, .yula-chips, ...).
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. SUN HERO SETTINGS: one block per page, edit freely
   --------------------------------------------------------------------------
   --sun-trim        how far above the bottom of the screen the hero ends (px)
                     (0 = hero fills the whole first screen)
   --sun-min         smallest space under the buttons, desktop/tablet (px)
   --sun-max         largest space under the buttons, desktop/tablet (px)
                     (a big number like 2000 = no limit, always full screen)
   --sun-min-phone   same, on phones (px)
   --sun-max-phone   same, on phones (px)
   --sun-scroll      how much scrolling until the sun is fully up
                     (25vh = a quarter of the screen; bigger = slower)

   Numbers only for the px values (no "px"). The sun always stops 20px
   below the buttons.
   -------------------------------------------------------------------------- */

/* Home: full-screen hero */
.elementor-element.elementor-element-a1000001 {
	--sun-trim: 0;
	--sun-min: 260;
	--sun-max: 2000;
	--sun-min-phone: 200;
	--sun-max-phone: 2000;
	--sun-scroll: 15vh;
}

/* Services */
.elementor-element.elementor-element-b2000001 {
	--sun-trim: 50;
	--sun-min: 260;
	--sun-max: 460;
	--sun-min-phone: 200;
	--sun-max-phone: 360;
	--sun-scroll: 25vh;
}

/* About */
.elementor-element.elementor-element-d4000001 {
	--sun-trim: 50;
	--sun-min: 260;
	--sun-max: 460;
	--sun-min-phone: 200;
	--sun-max-phone: 360;
	--sun-scroll: 25vh;
}

/* Quote */
.elementor-element.elementor-element-f6000001 {
	--sun-trim: 50;
	--sun-min: 260;
	--sun-max: 460;
	--sun-min-phone: 200;
	--sun-max-phone: 360;
	--sun-scroll: 25vh;
}

/* FAQ */
.elementor-element.elementor-element-a7000001 {
	--sun-trim: 50;
	--sun-min: 260;
	--sun-max: 460;
	--sun-min-phone: 200;
	--sun-max-phone: 360;
	--sun-scroll: 25vh;
}

/* Privacy */
.elementor-element.elementor-element-8a000001 {
	--sun-trim: 50;
	--sun-min: 260;
	--sun-max: 460;
	--sun-min-phone: 200;
	--sun-max-phone: 360;
	--sun-scroll: 25vh;
}


/* --------------------------------------------------------------------------
   1. Starfield on dark heroes
   Home a1000001, 404 9b000001, page heroes b2/d4/f6/a7/8a + 000001
   -------------------------------------------------------------------------- */

.elementor-element.elementor-element-a1000001::after,
.elementor-element.elementor-element-9b000001::after,
.elementor-element.elementor-element-b2000001::after,
.elementor-element.elementor-element-d4000001::after,
.elementor-element.elementor-element-f6000001::after,
.elementor-element.elementor-element-a7000001::after,
.elementor-element.elementor-element-8a000001::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .55;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 28% 12%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 72% 18%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 86% 34%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 55% 8%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 40% 30%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 6% 44%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 94% 10%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 64% 40%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 20% 52%, #fff 50%, transparent 51%);
}


/* --------------------------------------------------------------------------
   2. The sun / planet
   Big rise: Home a1000009, 404 9b000009, and the page heroes:
   Services b2, About d4, Quote f6, FAQ a7, Privacy 8a (+ 000009).
   Closing bands: xx0000f7.
   -------------------------------------------------------------------------- */

body .elementor .elementor-element.elementor-element-a1000009,
body .elementor .elementor-element.elementor-element-9b000009,
body .elementor .elementor-element.elementor-element-b2000009,
body .elementor .elementor-element.elementor-element-d4000009,
body .elementor .elementor-element.elementor-element-f6000009,
body .elementor .elementor-element.elementor-element-a7000009,
body .elementor .elementor-element.elementor-element-8a000009,
body .elementor .elementor-element.elementor-element-a10000f7,
body .elementor .elementor-element.elementor-element-b20000f7,
body .elementor .elementor-element.elementor-element-c30000f7,
body .elementor .elementor-element.elementor-element-e50000f7,
body .elementor .elementor-element.elementor-element-d40000f7,
body .elementor .elementor-element.elementor-element-a70000f7 {
	position: absolute !important;
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	bottom: 0 !important;
	width: max(180vw, 1400px) !important;
	max-width: none !important;
	min-height: 0 !important;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	--yula-rise: clamp(70px, 9vw, 110px);
	transform: translate(-50%, calc(100% - var(--yula-rise)));
	background: linear-gradient(180deg,
		var(--e-global-color-accent) 0%,
		var(--e-global-color-ember) 9%,
		var(--e-global-color-secondary) 22%,
		var(--e-global-color-primary) 40%,
		var(--e-global-color-night2) 60%) !important;
	box-shadow:
		0 -6px 30px rgba(247, 227, 168, .55),
		0 -30px 120px rgba(232, 181, 58, .45),
		0 -80px 240px rgba(162, 51, 106, .35) !important;
}

/* Bright rim along the top edge */
body .elementor .elementor-element.elementor-element-a1000009::after,
body .elementor .elementor-element.elementor-element-9b000009::after,
body .elementor .elementor-element.elementor-element-b2000009::after,
body .elementor .elementor-element.elementor-element-d4000009::after,
body .elementor .elementor-element.elementor-element-f6000009::after,
body .elementor .elementor-element.elementor-element-a7000009::after,
body .elementor .elementor-element.elementor-element-8a000009::after,
body .elementor .elementor-element.elementor-element-a10000f7::after,
body .elementor .elementor-element.elementor-element-b20000f7::after,
body .elementor .elementor-element.elementor-element-c30000f7::after,
body .elementor .elementor-element.elementor-element-e50000f7::after,
body .elementor .elementor-element.elementor-element-d40000f7::after,
body .elementor .elementor-element.elementor-element-a70000f7::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border-top: 2px solid rgba(255, 244, 214, .9);
	pointer-events: none;
}

/* 404 gets the big rise */
body .elementor .elementor-element.elementor-element-9b000009 {
	--yula-rise: clamp(200px, 26vw, 330px);
}

/* Sun heroes (Home, Services, About, Quote, FAQ, Privacy): fallback values
   used only if JavaScript is off. Normally the "yula-sun-fit" script in
   functions.php sizes each hero from the settings in section 0. */
body .elementor .elementor-element.elementor-element-a1000009,
body .elementor .elementor-element.elementor-element-b2000009,
body .elementor .elementor-element.elementor-element-d4000009,
body .elementor .elementor-element.elementor-element-f6000009,
body .elementor .elementor-element.elementor-element-a7000009,
body .elementor .elementor-element.elementor-element-8a000009 {
	--yula-rise: 360px;
}

@media (max-width: 767px) {
	body .elementor .elementor-element.elementor-element-a1000009,
	body .elementor .elementor-element.elementor-element-b2000009,
	body .elementor .elementor-element.elementor-element-d4000009,
	body .elementor .elementor-element.elementor-element-f6000009,
	body .elementor .elementor-element.elementor-element-a7000009,
	body .elementor .elementor-element.elementor-element-8a000009 {
		--yula-rise: 240px;
	}
}

/* Sun heroes: the hero is as tall as its content plus a space below it for
   the sun (fallback 380px, 260px on phones; the script overrides this). */
body .elementor .elementor-element.elementor-element-a1000001,
body .elementor .elementor-element.elementor-element-b2000001,
body .elementor .elementor-element.elementor-element-d4000001,
body .elementor .elementor-element.elementor-element-f6000001,
body .elementor .elementor-element.elementor-element-a7000001,
body .elementor .elementor-element.elementor-element-8a000001 {
	--min-height: 0px !important;
	min-height: 0 !important;
}

body .elementor .elementor-element.elementor-element-a1000002,
body .elementor .elementor-element.elementor-element-b2000002,
body .elementor .elementor-element.elementor-element-d4000002,
body .elementor .elementor-element.elementor-element-f6000002,
body .elementor .elementor-element.elementor-element-a7000002,
body .elementor .elementor-element.elementor-element-8a000002 {
	--padding-bottom: 380px !important;
	padding-bottom: 380px !important;
}

@media (max-width: 767px) {
	body .elementor .elementor-element.elementor-element-a1000002,
	body .elementor .elementor-element.elementor-element-b2000002,
	body .elementor .elementor-element.elementor-element-d4000002,
	body .elementor .elementor-element.elementor-element-f6000002,
	body .elementor .elementor-element.elementor-element-a7000002,
	body .elementor .elementor-element.elementor-element-8a000002 {
		--padding-bottom: 260px !important;
		padding-bottom: 260px !important;
	}
}

/* Closing bands are a bit narrower */
body .elementor .elementor-element.elementor-element-a10000f7,
body .elementor .elementor-element.elementor-element-b20000f7,
body .elementor .elementor-element.elementor-element-c30000f7,
body .elementor .elementor-element.elementor-element-e50000f7,
body .elementor .elementor-element.elementor-element-d40000f7,
body .elementor .elementor-element.elementor-element-a70000f7 {
	width: max(140%, 1300px) !important;
}

/* Dawn: the big suns rise on page load */
@media (prefers-reduced-motion: no-preference) {
	body .elementor .elementor-element.elementor-element-a1000009,
	body .elementor .elementor-element.elementor-element-9b000009,
	body .elementor .elementor-element.elementor-element-b2000009,
	body .elementor .elementor-element.elementor-element-d4000009,
	body .elementor .elementor-element.elementor-element-f6000009,
	body .elementor .elementor-element.elementor-element-a7000009,
	body .elementor .elementor-element.elementor-element-8a000009 {
		animation: yula-dawn 1.4s .1s cubic-bezier(.2, .7, .2, 1) both;
	}
}

@keyframes yula-dawn {
	from { transform: translate(-50%, 100%); }
}

/* Home and sun-hero pages: the sun rises with scroll instead of on load.
   It starts fully below the horizon (only its glow showing) and is fully
   up after --sun-scroll of scrolling (section 0).
   Browsers without scroll-driven animations (Firefox) keep the load animation above. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor .elementor-element.elementor-element-a1000009,
		body .elementor .elementor-element.elementor-element-b2000009,
		body .elementor .elementor-element.elementor-element-d4000009,
		body .elementor .elementor-element.elementor-element-f6000009,
		body .elementor .elementor-element.elementor-element-a7000009,
		body .elementor .elementor-element.elementor-element-8a000009 {
			animation: yula-dawn-scroll linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 var(--sun-scroll, 25vh);
		}
	}
}

@keyframes yula-dawn-scroll {
	from { transform: translate(-50%, 100%); }
	to   { transform: translate(-50%, calc(100% - var(--yula-rise))); }
}


/* --------------------------------------------------------------------------
   3. Frosted pills (Home) + reusable widget class .yula-frost
   -------------------------------------------------------------------------- */

.elementor-element.elementor-element-a100000b,
.elementor-element.elementor-element-a100000c,
.elementor-element.elementor-element-a100000d,
.yula-frost {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}


/* --------------------------------------------------------------------------
   4. Gradient big numbers (Home) + reusable widget class .yula-grad-num
   -------------------------------------------------------------------------- */

.elementor-element-a1000016 .elementor-heading-title,
.elementor-element-a100001a .elementor-heading-title,
.elementor-element-a100001e .elementor-heading-title,
.elementor-element-a1000022 .elementor-heading-title,
.yula-grad-num .elementor-heading-title {
	background: linear-gradient(135deg, var(--e-global-color-secondary), var(--e-global-color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* --------------------------------------------------------------------------
   5. Lit timeline line, four stops (Home, Services, About)
   -------------------------------------------------------------------------- */

.elementor .elementor-element.elementor-element-a10000c5,
.elementor .elementor-element.elementor-element-b20000c5,
.elementor .elementor-element.elementor-element-d40000c5 {
	background: linear-gradient(90deg,
		var(--e-global-color-accent),
		var(--e-global-color-ember) 33%,
		var(--e-global-color-secondary) 66%,
		var(--e-global-color-mint)) !important;
	opacity: .85;
}


/* --------------------------------------------------------------------------
   6. Mint outlined chips (Home tab lists) + reusable widget class .yula-chips
   -------------------------------------------------------------------------- */

.elementor-element-a1000044 .elementor-icon-list-item,
.elementor-element-a1000054 .elementor-icon-list-item,
.elementor-element-a1000064 .elementor-icon-list-item,
.elementor-element-a1000074 .elementor-icon-list-item,
.yula-chips .elementor-icon-list-item {
	border: 1px solid rgba(70, 224, 195, .3);
	border-radius: 999px;
	padding: .4em .85em !important;
	margin: 0 8px 8px 0 !important;
}

.elementor-element-a1000044 .elementor-icon-list-item i,
.elementor-element-a1000054 .elementor-icon-list-item i,
.elementor-element-a1000064 .elementor-icon-list-item i,
.elementor-element-a1000074 .elementor-icon-list-item i,
.yula-chips .elementor-icon-list-item i {
	filter: drop-shadow(0 0 4px var(--e-global-color-mint));
}


/* --------------------------------------------------------------------------
   7. Tag pills on Work cards (widget class .yula-tags)
   -------------------------------------------------------------------------- */

.yula-tags .elementor-icon-list-item {
	padding: 3px 10px !important;
	margin: 0 8px 0 0 !important;
	border-radius: 999px;
	background: rgba(251, 246, 236, .08);
	font-size: .8rem !important;
}

.yula-tags .elementor-icon-list-item:nth-child(2) {
	background: rgba(232, 181, 58, .15);
}

.yula-tags .elementor-icon-list-item:nth-child(2) .elementor-icon-list-text {
	color: var(--e-global-color-goldpale) !important;
}

.yula-tags .elementor-icon-list-icon {
	display: none;
}


/* --------------------------------------------------------------------------
   8. FormLayer quote form, branded (Shortcode widget class .yula-form)
   -------------------------------------------------------------------------- */

.yula-form {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	color: var(--e-global-color-text);
}

.yula-form label,
.yula-form legend,
.yula-form .formlayer-label {
	font-family: var(--e-global-typography-secondary-font-family), sans-serif !important;
	font-weight: 800 !important;
	font-size: .95rem !important;
	color: var(--e-global-color-primary) !important;
}

.yula-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.yula-form select,
.yula-form textarea {
	font: inherit !important;
	font-weight: 500 !important;
	color: var(--e-global-color-text) !important;
	background: var(--e-global-color-ivory) !important;
	border: 1.5px solid rgba(74, 31, 61, .2) !important;
	border-radius: 14px !important;
	padding: .85em 1em !important;
	min-height: 52px;
	width: 100%;
	box-shadow: none !important;
	transition: border-color .15s, box-shadow .15s;
}

.yula-form textarea {
	min-height: 150px;
}

.yula-form input:not([type=checkbox]):not([type=radio]):focus,
.yula-form select:focus,
.yula-form textarea:focus {
	outline: none !important;
	border-color: var(--e-global-color-secondary) !important;
	box-shadow: 0 0 0 4px rgba(162, 51, 106, .15) !important;
}

.yula-form input[type=checkbox],
.yula-form input[type=radio] {
	accent-color: var(--e-global-color-secondary);
	width: 18px;
	height: 18px;
}

.yula-form button[type=submit],
.yula-form input[type=submit],
.yula-form .formlayer-submit {
	font-family: var(--e-global-typography-accent-font-family), sans-serif !important;
	font-weight: 800 !important;
	font-size: 1rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 1em 1.8em !important;
	background: var(--e-global-color-accent) !important;
	color: var(--e-global-color-night) !important;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease;
}

.yula-form button[type=submit]:hover,
.yula-form input[type=submit]:hover,
.yula-form .formlayer-submit:hover {
	transform: translateY(-2px);
	background: var(--e-global-color-goldpale) !important;
	box-shadow: 0 12px 40px -8px rgba(232, 181, 58, .7);
}

.yula-form a {
	color: var(--e-global-color-secondary);
	font-weight: 700;
}

/* Form fixes: even text box height (no clipped descenders), same font size
   everywhere, gap between fields, dropdown arrow */
.yula-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.yula-form select {
	height: auto !important;
	min-height: 54px !important;
	line-height: 1.4 !important;
	font-size: 1rem !important;
	padding: .8em 1em !important;
}

.yula-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.8em !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A1F3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1em center !important;
	background-size: 16px !important;
	cursor: pointer;
}

.yula-form textarea {
	font-size: 1rem !important;
	line-height: 1.5 !important;
}

.yula-form .formlayer-form-fields-wrapper {
	margin: 0 -6px;
}

.yula-form .formlayer-field-wrap {
	box-sizing: border-box;
	padding-left: 6px !important;
	padding-right: 6px !important;
}

.yula-form .formlayer-submit-wrap {
	padding: 0 6px;
}

.yula-form .formlayer-option-label,
.yula-form .formlayer-gdpr-label {
	color: var(--e-global-color-text) !important;
	font-weight: 600;
	font-size: 1rem;
}

.yula-form .formlayer-gdpr-label {
	font-weight: 500;
	color: var(--e-global-color-muted) !important;
}


/* --------------------------------------------------------------------------
   9. Header nav (Xpro Horizontal Menu, class .yula-nav):
      hamburger + mobile panel in brand colours
   -------------------------------------------------------------------------- */

.yula-nav i,
.yula-nav svg {
	color: var(--e-global-color-ivory);
	fill: var(--e-global-color-ivory);
}

@media (max-width: 1024px) {
	/* Mobile panel: drops down from the top, only as tall as the menu */
	.yula-nav .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: 100vh;
		overflow-y: auto;
		margin: 0 !important;
		padding: 72px 20px 24px !important;
		background: var(--e-global-color-night2) !important;
		border-bottom: 1px solid var(--e-global-color-line);
		border-radius: 0 0 22px 22px;
		box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
		transform: translateY(-100%) !important;
		visibility: hidden;
		opacity: 1 !important;
		transition: transform .35s ease, visibility 0s linear .35s !important;
		z-index: 9999 !important;
	}

	.yula-nav .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet.active {
		transform: translateY(0) !important;
		visibility: visible;
		transition: transform .35s ease, visibility 0s !important;
	}

	.yula-nav .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar {
		height: auto !important;
		background: transparent !important;
	}

	.yula-nav nav ul,
	.yula-nav .xpro-elementor-horizontal-navbar-nav {
		display: flex !important;
		flex-direction: column !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0;
		padding: 0 !important;
		margin: 0 !important;
		box-shadow: none !important;
	}

	.yula-nav .xpro-elementor-horizontal-navbar-nav > li > a {
		display: block !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 14px !important;
		padding: 14px 16px !important;
		font-size: 17px !important;
		text-align: left;
	}

	.yula-nav .xpro-elementor-horizontal-navbar-nav > li > a {
		color: var(--e-global-color-dim) !important;
	}

	.yula-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover {
		color: var(--e-global-color-ivory) !important;
		background: var(--e-global-color-line) !important;
	}

	/* Current page: signature gold text on a faint gold tint */
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a,
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a:hover,
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a:hover {
		color: var(--e-global-color-accent) !important;
		background: rgba(232, 184, 74, .14) !important;
		background: color-mix(in srgb, var(--e-global-color-accent) 14%, transparent) !important;
	}

	/* Dim the page below the panel; tapping it closes the menu */
	.yula-nav .xpro-elementor-horizontal-menu-overlay {
		background-color: rgba(0, 0, 0, .55) !important;
		z-index: 9998 !important;
	}

	.yula-nav .xpro-elementor-horizontal-menu-close {
		position: absolute !important;
		top: 18px !important;
		right: 20px !important;
		left: auto !important;
	}

	/* Logo in the top-left of the open panel, where the header logo sits */
	.yula-nav .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet::before {
		content: "";
		position: absolute;
		top: 19px;
		left: 20px;
		width: 90px;
		height: 38px;
		background: url("/wp-content/uploads/2026/09/Yula-logo-1.png") no-repeat left center / contain;
		pointer-events: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.yula-nav .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.yula-nav .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet::before {
		top: 15px;
		left: 40px;
		width: 110px;
		height: 46px;
	}

	.yula-nav .xpro-elementor-horizontal-menu-close {
		right: 40px !important;
	}
}

@media (max-width: 1024px) {

	/* Hamburger: yellow pill with a dark three-line icon */
	.yula-nav button.xpro-elementor-horizontal-menu-toggler {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: auto !important;
		min-width: 52px;
		height: 40px !important;
		padding: 0 16px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: var(--e-global-color-accent) !important;
		color: var(--e-global-color-night) !important;
		line-height: 1 !important;
		box-shadow: none !important;
	}

	.yula-nav button.xpro-elementor-horizontal-menu-toggler:hover,
	.yula-nav button.xpro-elementor-horizontal-menu-toggler:focus {
		background: var(--e-global-color-goldpale) !important;
	}

	.yula-nav button.xpro-elementor-horizontal-menu-toggler > svg {
		display: none !important;
	}

	/* Three bars drawn in CSS so no plugin or theme rule can hide them */
	.yula-nav button.xpro-elementor-horizontal-menu-toggler {
		position: relative;
	}

	.yula-nav button.xpro-elementor-horizontal-menu-toggler::before {
		content: "";
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #141019;
		background: var(--e-global-color-night, #141019);
		box-shadow:
			0 -6px 0 var(--e-global-color-night, #141019),
			0 6px 0 var(--e-global-color-night, #141019);
	}

	/* Close (X): matching yellow circle with a dark icon, always on top */
	.yula-nav button.xpro-elementor-horizontal-menu-close {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: var(--e-global-color-accent) !important;
		color: var(--e-global-color-night) !important;
		line-height: 1 !important;
		box-shadow: none !important;
		z-index: 5;
	}

	.yula-nav button.xpro-elementor-horizontal-menu-close:hover,
	.yula-nav button.xpro-elementor-horizontal-menu-close:focus {
		background: var(--e-global-color-goldpale) !important;
	}

	.yula-nav button.xpro-elementor-horizontal-menu-close > svg {
		display: none !important;
	}

	.yula-nav button.xpro-elementor-horizontal-menu-close::before,
	.yula-nav button.xpro-elementor-horizontal-menu-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 2px;
		margin: -1px 0 0 -8px;
		border-radius: 2px;
		background: var(--e-global-color-night, #141019);
	}

	.yula-nav button.xpro-elementor-horizontal-menu-close::before {
		transform: rotate(45deg);
	}

	.yula-nav button.xpro-elementor-horizontal-menu-close::after {
		transform: rotate(-45deg);
	}
}


/* --------------------------------------------------------------------------
   9b. Header language switcher: flags only ([yula_lang] shortcode, hd000006)
   -------------------------------------------------------------------------- */

.elementor-element.elementor-element-hd000006 {
	margin: 0 14px 0 8px;
}

.elementor-element.elementor-element-hd000006 .elementor-shortcode {
	line-height: 0;
}

.yula-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px;
	border-radius: 999px;
	background: var(--e-global-color-line, rgba(255, 255, 255, .08));
}

.yula-lang__flag {
	display: block;
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	overflow: hidden;
	line-height: 0;
	transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}

.yula-lang__flag img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
}

/* Language you're on: full colour with a thin gold ring */
.yula-lang__flag.is-current {
	box-shadow: 0 0 0 2px var(--e-global-color-accent, #e8b84a);
}

/* The other language: dimmed until hovered */
a.yula-lang__flag {
	opacity: .55;
}

a.yula-lang__flag:hover,
a.yula-lang__flag:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}

a.yula-lang__flag:focus-visible {
	outline: 2px solid var(--e-global-color-ivory, #fff);
	outline-offset: 2px;
}

/* Phones: the quote button is hidden in the header (Elementor: Hide on
   Mobile), so the row is logo ... flags + hamburger on the right */
@media (max-width: 767px) {
	.elementor-element.elementor-element-hd000006 {
		order: 1;
		margin: 0 12px 0 auto;
	}

	.elementor-element.elementor-element-hd000004 {
		order: 2;
		flex-grow: 0 !important;
	}

	.yula-lang {
		gap: 5px;
		padding: 4px;
	}

	.yula-lang__flag {
		width: 28px;
		height: 28px;
	}
}


/* Quote CTA inside the mobile menu panel (menu item with class
   .yula-menu-cta). Hidden in the desktop menu, where the header has
   its own "Get a free quote" button. */
@media (min-width: 1025px) {
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.yula-menu-cta {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.yula-menu-cta {
		margin-top: 12px;
		padding-top: 16px;
		border-top: 1px solid var(--e-global-color-line);
	}

	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.yula-menu-cta > a,
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.yula-menu-cta > a:hover,
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.yula-menu-cta.current-menu-item > a,
	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.yula-menu-cta.current_page_item > a {
		text-align: center;
		font-weight: 600;
		border-radius: 999px !important;
		color: var(--e-global-color-night) !important;
		background: var(--e-global-color-accent) !important;
	}

	.yula-nav .xpro-elementor-horizontal-navbar-nav > li.yula-menu-cta > a:hover {
		background: var(--e-global-color-goldpale) !important;
	}
}


/* --------------------------------------------------------------------------
   10. Footer bottom row: copyright + Privacy policy on one line,
       same height and baseline (the theme's paragraph margin and the
       button's own box pushed them out of line)
   -------------------------------------------------------------------------- */

#xpro-theme-builder-footer .elementor-element-f0000050 {
	align-items: center;
	gap: 8px 24px;
}

#xpro-theme-builder-footer .elementor-element-f0000051,
#xpro-theme-builder-footer .elementor-element-f0000052 {
	margin: 0 !important;
}

#xpro-theme-builder-footer .elementor-element-f0000051 p {
	margin: 0 !important;
}

#xpro-theme-builder-footer .elementor-element-f0000051,
#xpro-theme-builder-footer .elementor-element-f0000051 p,
#xpro-theme-builder-footer .elementor-element-f0000052 .elementor-button {
	line-height: 1.5 !important;
}

#xpro-theme-builder-footer .elementor-element-f0000052 .elementor-button {
	display: block;
	padding: 0 !important;
	border: 0;
	min-height: 0;
}

#xpro-theme-builder-footer .elementor-element-f0000052 .elementor-button-content-wrapper {
	display: block;
}

/* Footer link lists: Elementor only loads its icon-list styles on pages
   that use that widget in the page body, so on the other pages the lists
   fell back to browser bullets and indentation. Same base rules here. */
.elementor-67 .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elementor-67 .elementor-icon-list-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.elementor-67 .elementor-icon-list-item,
.elementor-67 .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	font-size: inherit;
}

.elementor-67 .elementor-icon-list-item::marker {
	content: none;
}