/*
 * Black Ember base: resets, focus styles and the small utility classes
 * shared by widgets and native sections (ported from reference site.css).
 * No content here.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--f);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

img,
video,
canvas { display: block; max-width: 100%; }

h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

::selection { background: var(--amber); color: #fff; }

/* Screen-reader only. */
.sr,
.be-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Layout helpers (add as CSS classes on Elementor containers). */
.be-pad { padding-left: var(--gl); padding-right: var(--gr); }
.be-wrap { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.be-dark { background: var(--ink); color: var(--bone); }
.be-alt { background: var(--paper2); }
.be-sec { padding-block: 88px; }

/* Type helpers. */
.be-eyebrow,
.be-eyebrow .elementor-heading-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--soft);
}
.be-dark .be-eyebrow,
.be-dark .be-eyebrow .elementor-heading-title { color: var(--ash); }

.be-h-sec,
.be-h-sec .elementor-heading-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; }

.be-muted { color: var(--muted); }
.be-dark .be-muted { color: var(--ash); }

/* Dark-section button variant (reference `.dark .btn`). */
.be-dark .elementor-button {
	background: var(--bone);
	color: var(--ink);
	border-color: var(--bone);
}
.be-dark .elementor-button:hover,
.be-dark .elementor-button:focus-visible {
	background: var(--amber-hi);
	border-color: var(--amber-hi);
}

/* Outline button variant: add class `be-btn-out` to a Button widget. */
.be-btn-out .elementor-button {
	background: transparent;
	color: var(--text);
}
.be-btn-out .elementor-button:hover,
.be-btn-out .elementor-button:focus-visible {
	background: var(--ink2);
	color: var(--bone);
	border-color: var(--ink2);
}

.elementor-widget-button .elementor-button {
	min-height: 52px;
	align-items: center;
	transition: background .2s, color .2s, border-color .2s;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}