/* Black Label — Preloader
   Ported from Sketch Suite's preloader and rebranded: black ground, warm gold wash,
   big 0–100% counter, gold bar along the bottom. Hidden unless html.bllpl-on is set
   by the inline head script, so it can never trap a visitor with JS off. */

.bllpl {
	--bllpl-inset-x: 5%;
	--bllpl-inset-y: 5%;
	--bllpl-bar-h: 3px;
	--bllpl-bar-gap: 28px;
	display: none;
}

html.bllpl-on .bllpl {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: block;
	background-color: #000;
	background-image:
		radial-gradient(70% 60% at 12% 100%, rgba(171, 119, 57, .30), transparent 70%),
		radial-gradient(50% 45% at 100% 0%, rgba(171, 119, 57, .12), transparent 70%);
	-webkit-backdrop-filter: blur(30px) saturate(140%);
	backdrop-filter: blur(30px) saturate(140%);
	color: var(--bll-off-white, #f5f5f5);
	font-family: var(--bll-font);
	opacity: 1;
	transition:
		opacity .8s cubic-bezier(.4, 0, .2, 1),
		-webkit-backdrop-filter .8s cubic-bezier(.4, 0, .2, 1),
		backdrop-filter .8s cubic-bezier(.4, 0, .2, 1);
}

/* Lift: the black fades while the glass behind it clears, so the hero resolves into focus. */
html.bllpl-on .bllpl.is-done {
	opacity: 0;
	pointer-events: none;
	-webkit-backdrop-filter: blur(0) saturate(100%);
	backdrop-filter: blur(0) saturate(100%);
}

html.bllpl-lock, html.bllpl-lock body { overflow: hidden !important; }

/* Gold monogram, top-left where the header logo will land. */
.bllpl__mark {
	position: absolute;
	left: var(--bllpl-inset-x);
	top: var(--bllpl-inset-y);
	width: 22px; height: auto;
	opacity: .9;
	transition: opacity .5s ease;
}
.bllpl.is-done .bllpl__mark { opacity: 0; }

.bllpl__inner {
	position: absolute;
	left: var(--bllpl-inset-x);
	bottom: calc(var(--bllpl-inset-y) + var(--bllpl-bar-h) + var(--bllpl-bar-gap));
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	transition: opacity .5s ease, transform .8s cubic-bezier(.4, 0, .2, 1);
}
.bllpl.is-done .bllpl__inner { opacity: 0; transform: translateY(10px); }

.bllpl__count {
	display: flex; align-items: baseline;
	font-size: clamp(84px, 16vw, 250px);
	font-weight: 300;
	line-height: .82;
	letter-spacing: -.04em;
}
.bllpl__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.bllpl__pct { font-size: .3em; color: var(--bll-gold, #ab7739); letter-spacing: 0; margin-left: .08em; }

.bllpl__caption {
	margin: 0; padding-left: .2em;
	font-size: clamp(11px, 1vw, 13px);
	letter-spacing: .22em; text-transform: uppercase;
	color: rgba(245, 245, 245, .55);
}

.bllpl__track {
	position: absolute;
	left: var(--bllpl-inset-x); right: var(--bllpl-inset-x); bottom: var(--bllpl-inset-y);
	height: var(--bllpl-bar-h);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
}
.bllpl__bar {
	display: block; width: 100%; height: 100%;
	transform: scaleX(0); transform-origin: left center;
	background: linear-gradient(90deg, #8e6338, #ab7739 40%, #eecc9a 85%, #bd8d55);
	box-shadow: 0 0 16px rgba(171, 119, 57, .55);
}
.bllpl.is-finishing .bllpl__bar { transition: transform .28s cubic-bezier(.33, 1, .68, 1); }

@media (max-width: 768px) {
	.bllpl { --bllpl-bar-h: 2px; --bllpl-bar-gap: 20px; --bllpl-inset-x: 6%; }
}
@media (prefers-reduced-motion: reduce) {
	html.bllpl-on .bllpl { display: none; }
	html.bllpl-lock, html.bllpl-lock body { overflow: auto !important; }
}
@media print { .bllpl { display: none !important; } }