/* All motion is driven by the Motion library. CSS only sets resting states and layout. */
body *,body *::before,body *::after{transition:none !important}

@property --p{syntax:'<number>';inherits:true;initial-value:0}
@property --spot{syntax:'<number>';inherits:false;initial-value:0}

/* ---------- Initial hidden states (only while Motion is expected to run) ---------- */
html.btc-js .motion-fade-up,
html.btc-js .motion-scale,
html.btc-js .motion-slide-left,
html.btc-js .motion-slide-right,
html.btc-js .motion-words,
html.btc-js .motion-stagger > *:not(.motion-words){opacity:0}
html.btc-js .motion-reveal{clip-path:inset(0 0 100% 0)}

.btc-word-wrap{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.btc-word{display:inline-block;will-change:transform}
.btc-char{display:inline-block;will-change:transform}

/* ---------- Scroll progress ---------- */
.btc-progress{position:fixed;top:0;left:0;width:100%;height:4px;z-index:1000;background:linear-gradient(90deg,#1F7A33,#F58A1F);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- Cards: cursor spotlight (intensity driven by Motion via --spot) ---------- */
.motion-tilt{position:relative;overflow:hidden}
.motion-tilt > *{position:relative;z-index:1}
.motion-tilt::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:var(--spot,0);background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(245,138,31,.2),transparent 45%)}

/* ---------- Header (menu is the WordPress menu widget) ----------
   Everything that changes between idle and sticky is a pure function of ONE number, --p (0 idle, 1 sticky).
   Motion animates that single value. Only paint-level properties follow it (opacity of the background layer,
   a transform scale on the logo, colours), so nothing is re-laid-out while the header changes: the box keeps one
   fixed size, which removes the lag at the first scroll. (Elementor owns ::before on containers, so ::after is used.) */
body.admin-bar .btc-header-root{top:32px !important}
.btc-header-root{
	--p:0;--btc-pad:16px;--btc-logo:250px;
	contain:layout style;
	padding-top:calc(var(--btc-pad) * 0.8) !important;
	padding-bottom:calc(var(--btc-pad) * 0.8) !important;
	background-color:transparent !important;
	box-shadow:none !important;
	isolation:isolate;
}
.btc-header-root::after{
	content:'' !important;position:absolute !important;inset:0 !important;z-index:-1 !important;pointer-events:none;border-radius:inherit;
	background-color:rgba(247,251,242,0.98);
	box-shadow:0 12px 36px rgba(6,64,18,0.2);
	opacity:var(--p) !important;
	will-change:opacity;
}
.btc-header-root > a{flex-shrink:0}
.btc-header-root .btc-logo{
	width:var(--btc-logo) !important;
	object-fit:contain;
	transform:scale(calc(1 - 0.26 * var(--p)));
	transform-origin:center center;
	filter:brightness(var(--p)) invert(calc(1 - var(--p)));
}
.btc-header-root .elementor-nav-menu--main .elementor-item{
	color:color-mix(in srgb,#0B1A10 calc(var(--p) * 100%),#ffffff) !important;
	font-size:0.9rem !important;
}
.btc-header-root .elementor-nav-menu--main .elementor-item:hover{
	color:color-mix(in srgb,#1F7A33 calc(var(--p) * 100%),#8BE292) !important;
}
.btc-header-root .elementor-menu-toggle{
	color:color-mix(in srgb,#0B1A10 calc(var(--p) * 100%),#ffffff) !important;
}
/* Pages without a dark hero start below the (solid) header */
body:not(:has(.btc-dark-hero)) .site-main{padding-top:104px}

/* ---------- Leaves: desktop only ---------- */
@media (max-width:1024px){.btc-leaf{display:none !important}}

/* ---------- Narrow desktops: tighter menu, smaller logo, no call button ---------- */
@media (max-width:1280px){
	.btc-header-root .btc-btn-outline{display:none !important}
}
@media (min-width:1025px) and (max-width:1280px){
	.btc-header-root{--btc-logo:200px}
	.btc-header-root .elementor-nav-menu--main .elementor-item{padding:8px 9px !important}
}

/* ---------- Tablet / mobile: logo left, menu toggle right, no buttons ---------- */
@media (max-width:1024px){
	.btc-header-root{--btc-logo:170px}
	.btc-header-root .btc-logo{transform-origin:left center}
}
@media (max-width:520px){
	.btc-header-root{--btc-pad:10px;--btc-logo:140px;gap:8px !important}
}