/* Maria Ball — page decorations.
   Scoped to the home Hero (section 810023d) so we don't leak globally. */

/* ============== Hero rose orbs ============== */
.elementor-14094 .elementor-element-810023d{
	position:relative;
	overflow:hidden;
}
.elementor-14094 .elementor-element-810023d::before,
.elementor-14094 .elementor-element-810023d::after{
	content:"";
	position:absolute;
	pointer-events:none;
	z-index:0;
}
/* Both orbs in one layer. Centers are positioned OUTSIDE the section so only
   the soft corner glow is visible — never a defined blob. */
.elementor-14094 .elementor-element-810023d::before{
	inset:0;
	background-image:
		radial-gradient(circle 380px at -40px -40px, rgba(231,172,163,0.55) 0%, rgba(231,172,163,0) 75%),
		radial-gradient(circle 520px at calc(100% + 60px) calc(100% + 120px), rgba(199,122,111,0.32) 0%, rgba(199,122,111,0) 75%);
	filter:blur(6px);
}
/* Bottom fade-to-background — masks the orb's clipped edge so there's no seam
   where Section 1 ends and Section 2 begins. */
.elementor-14094 .elementor-element-810023d::after{
	left:0;right:0;bottom:0;
	height:160px;
	background:linear-gradient(to bottom, rgba(253,247,245,0) 0%, #FDF7F5 92%);
}
/* Make sure all hero content stacks above the orbs */
.elementor-14094 .elementor-element-810023d > *{
	position:relative;
	z-index:1;
}

@media (max-width:1024px){
	.elementor-14094 .elementor-element-810023d::before{
		background-image:
			radial-gradient(circle 280px at -30px -30px, rgba(231,172,163,0.55) 0%, rgba(231,172,163,0) 75%),
			radial-gradient(circle 380px at calc(100% + 40px) calc(100% + 90px), rgba(199,122,111,0.32) 0%, rgba(199,122,111,0) 75%);
	}
	.elementor-14094 .elementor-element-810023d::after{
		height:120px;
	}
}
@media (max-width:767px){
	.elementor-14094 .elementor-element-810023d::before{
		background-image:
			radial-gradient(circle 200px at -20px -20px, rgba(231,172,163,0.55) 0%, rgba(231,172,163,0) 75%),
			radial-gradient(circle 280px at calc(100% + 30px) calc(100% + 70px), rgba(199,122,111,0.32) 0%, rgba(199,122,111,0) 75%);
	}
	.elementor-14094 .elementor-element-810023d::after{
		height:100px;
	}
}

/* ============== Hand-drawn underline under "home" ============== */
/* Only applies to a span we inject into the hero H1 below */
.mb-hero-underline{
	position:relative;
	display:inline-block;
	white-space:nowrap;
	color:inherit;
}
.mb-hero-underline::after{
	content:"";
	position:absolute;
	left:-3%;right:-3%;
	bottom:-0.08em;
	height:0.34em;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3,9 C40,2 80,12 120,7 S180,3 197,8' stroke='%23C77A6F' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
	background-repeat:no-repeat;
	background-size:100% 100%;
	pointer-events:none;
}


/* ============== Mobile image balance (Sections 1 & 2) ============== */
/* On mobile, the hero portrait and the next-section image appear back-to-back.
   Hide the hero portrait (the section already has a background + orbs) and
   reverse Section 1 so text precedes its image — creating text→text→image rhythm. */
@media (max-width:767px){
	/* Hide hero portrait image and its parent container on mobile */
	.elementor-14094 .elementor-element-mb01img,
	.elementor-14094 .elementor-element-mb01rgt{display:none !important;}

	/* Collapse hero to content height */
	.elementor-14094 .elementor-element-810023d{
		--min-height:auto !important;
		min-height:auto !important;
		padding-top:40px !important;
		padding-bottom:40px !important;
	}

	/* Reverse Section 1 (74537d5) so text comes before image on mobile */
	.elementor-14094 .elementor-element-74537d5{
		flex-direction:column-reverse !important;
	}
}

/* ============== Mobile topic pills — clean 2-column grid ============== */
@media (max-width:640px){
	.mb-pills-light{
		display:flex !important;
		flex-wrap:wrap !important;
		justify-content:center !important;
		gap:10px !important;
	}
	.mb-pill-l{
		flex:1 1 calc(50% - 8px) !important;
		min-width:0 !important;
		max-width:none !important;
		justify-content:center !important;
		font-size:13.5px !important;
		padding:10px 14px !important;
		margin:0 !important;
	}
	.mb-pill-l-ico{
		width:16px !important;
		height:16px !important;
	}
	.mb-pill-l-ico svg{
		width:16px !important;
		height:16px !important;
	}
}

/* ============== Global CTA button hover override ============== */
/* Elementor compiles per-post CSS with brown (#A85D52) hovers by default.
   Override every CTA hover to charcoal, killing the background transition so
   there is no brown-to-charcoal flash during the hover state change. */
.elementor-element[class*="elementor-element-"] .thim-ekits-button:not(.custom-button-hover) a:hover,
.elementor-element[class*="elementor-element-"] .elementor-button:hover,
.thim-ekits-button:not(.custom-button-hover) a:hover,
.elementor-button:hover,
.mb-cta-pri:hover,
.mb-cta-sec:hover,
.mb-flag-btn:hover,
.mb-c-btn:hover{
	background:#3A4A47 !important;
	background-color:#3A4A47 !important;
	background-image:none !important;
	border-color:#3A4A47 !important;
	color:#FFFFFF !important;
	transition:none !important;
}

/* Custom CTA default states — keep outline/text colors consistent */
.mb-cta-sec{
	color:#3A4A47 !important;
	border-color:#3A4A47 !important;
}

/* ============== Mobile trust badges — clean whitespace separation ============== */
@media (max-width:640px){
	.mb-rev-trust{
		display:flex !important;
		flex-wrap:wrap !important;
		justify-content:center !important;
		gap:16px 28px !important;
		margin-top:28px !important;
		font-size:11px !important;
		letter-spacing:1.8px !important;
		color:rgba(58,46,46,0.65) !important;
	}
	.mb-rev-trust span{
		white-space:nowrap !important;
		padding:0 !important;
	}
	.mb-rev-trust span::before{display:none !important;}
}