/* ==========================================================================
   Bold Hero Slider — front end
   Colours come from CSS variables set on .bhs-slider (Sliders › Settings).
   ========================================================================== */

.bhs-slider {
	--bhs-font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--bhs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bhs-ease: cubic-bezier(.22, .8, .24, 1);
	--bhs-gutter: clamp(20px, 5vw, 72px);

	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	background: var(--bhs-default-bg);
	color: var(--bhs-heading);
	font-family: var(--bhs-font-body);
	-webkit-font-smoothing: antialiased;
}

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

.bhs-slider .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Track: every slide sits in the same grid cell ---------- */

.bhs-track {
	display: grid;
}

.bhs-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--bhs-min-h, 680px);
	visibility: hidden;
	opacity: 0;
	z-index: 0;
	transition:
		opacity var(--bhs-speed) var(--bhs-ease),
		transform var(--bhs-speed) var(--bhs-ease),
		visibility 0s linear var(--bhs-speed);
}

.bhs-slide.is-active {
	visibility: visible;
	opacity: 1;
	z-index: 2;
	transition:
		opacity var(--bhs-speed) var(--bhs-ease),
		transform var(--bhs-speed) var(--bhs-ease),
		visibility 0s;
}

.bhs-slide.is-leaving {
	visibility: visible;
	z-index: 1;
}

/* Slide transition */
.bhs-transition-slide .bhs-slide {
	opacity: 1;
	transform: translateX(100%);
}
.bhs-transition-slide[data-dir="prev"] .bhs-slide {
	transform: translateX(-100%);
}
.bhs-transition-slide .bhs-slide.is-active {
	transform: translateX(0);
}
.bhs-transition-slide .bhs-slide.is-leaving {
	transform: translateX(-100%);
}
.bhs-transition-slide[data-dir="prev"] .bhs-slide.is-leaving {
	transform: translateX(100%);
}
.bhs-transition-slide .bhs-slide.no-anim {
	transition: none;
}

/* ---------- Background ---------- */

.bhs-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.bhs-bg-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.bhs-bg-overlay {
	position: absolute;
	inset: 0;
}

.bhs-glow {
	display: none;
	position: absolute;
	inset: -10%;
	pointer-events: none;
	background:
		radial-gradient(38% 34% at 42% 0%, color-mix(in srgb, var(--bhs-accent-2) 42%, transparent), transparent 70%),
		radial-gradient(26% 40% at 4% 58%, color-mix(in srgb, var(--bhs-accent) 18%, transparent), transparent 72%),
		radial-gradient(30% 36% at 96% 62%, color-mix(in srgb, var(--bhs-accent-2) 24%, transparent), transparent 72%),
		radial-gradient(60% 50% at 50% 110%, rgba(0, 0, 0, .45), transparent 70%);
	filter: blur(8px);
}

.has-glow .bhs-glow {
	display: block;
}

/* ---------- Layout ---------- */

.bhs-inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 110px) var(--bhs-gutter) clamp(88px, 9vw, 120px);
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 6vw, 120px);
}

.bhs-image-left .bhs-media {
	order: -1;
}

.bhs-slide.no-image .bhs-inner {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------- Text ---------- */

.bhs-content {
	max-width: 640px;
}

.bhs-slider .bhs-heading {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	padding: 0;
	font-family: var(--bhs-font-display);
	font-weight: 900;
	font-stretch: 112%;
	font-variation-settings: "wdth" 112;
	font-size: clamp(3rem, 7.4vw, 6.9rem);
	line-height: .92;
	letter-spacing: -.035em;
	color: var(--bhs-heading);
	text-transform: none;
	text-wrap: balance;
}

.bhs-slider .bhs-hl {
	color: var(--bhs-accent);
}

.bhs-slider .bhs-hl-2 {
	color: var(--bhs-accent-2);
	font-style: italic;
	letter-spacing: -.045em;
}

.bhs-slider .bhs-subtitle {
	margin: 0 0 clamp(28px, 3vw, 40px);
	max-width: 42ch;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.6;
	color: var(--bhs-text);
}

/* ---------- Buttons ---------- */

.bhs-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bhs-slider .bhs-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	font-family: var(--bhs-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.bhs-slider .bhs-btn-primary {
	background: var(--bhs-accent);
	color: var(--bhs-btn-text);
}
.bhs-slider .bhs-btn-primary:hover {
	background: color-mix(in srgb, var(--bhs-accent) 86%, #fff);
	color: var(--bhs-btn-text);
}

.bhs-slider .bhs-btn-outline {
	background: rgba(255, 255, 255, .02);
	border-color: rgba(255, 255, 255, .16);
	color: var(--bhs-heading);
}
.bhs-slider .bhs-btn-outline:hover {
	border-color: rgba(255, 255, 255, .42);
	background: rgba(255, 255, 255, .06);
	color: var(--bhs-heading);
}

.bhs-slider .bhs-btn:hover .bhs-btn-icon {
	transform: translate(2px, -1px);
}

.bhs-btn-icon {
	flex: none;
	transition: transform .2s ease;
}

.bhs-slider .bhs-btn:focus-visible,
.bhs-slider .bhs-arrow:focus-visible,
.bhs-slider .bhs-dot:focus-visible {
	outline: 2px solid var(--bhs-accent);
	outline-offset: 3px;
}

/* ---------- Image ---------- */

.bhs-media {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 520px;
}

.bhs-media::before {
	/* warm light spilling out beneath the photo */
	content: "";
	position: absolute;
	inset: 12% 6% -6%;
	border-radius: var(--bhs-radius);
	background: var(--bhs-accent);
	opacity: .28;
	filter: blur(48px);
	z-index: -1;
}

.bhs-slider .bhs-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--bhs-radius);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}

/* ---------- Entrance (one orchestrated moment per slide change) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.bhs-slide.is-active .bhs-heading {
		animation: bhs-rise calc(var(--bhs-speed) + 300ms) var(--bhs-ease) both;
	}
	.bhs-slide.is-active .bhs-subtitle,
	.bhs-slide.is-active .bhs-buttons {
		animation: bhs-rise calc(var(--bhs-speed) + 300ms) var(--bhs-ease) 120ms both;
	}
	.bhs-slide.is-active .bhs-media {
		animation: bhs-settle calc(var(--bhs-speed) + 500ms) var(--bhs-ease) both;
	}
}

@keyframes bhs-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

@keyframes bhs-settle {
	from { opacity: 0; transform: scale(.94) rotate(-2deg); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Controls ---------- */

.bhs-controls {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: clamp(20px, 3vw, 36px);
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--bhs-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	pointer-events: none;
}

.bhs-controls > * {
	pointer-events: auto;
}

.bhs-dots {
	display: flex;
	gap: 8px;
}

.bhs-slider .bhs-dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .24);
	cursor: pointer;
	overflow: hidden;
	transition: width .35s var(--bhs-ease), background-color .2s ease;
}

.bhs-slider .bhs-dot:hover {
	background: rgba(255, 255, 255, .45);
}

.bhs-slider .bhs-dot.is-active {
	width: 44px;
}

.bhs-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--bhs-accent);
	transform: scaleX(0);
	transform-origin: left;
}

.bhs-dot.is-active::after {
	transform: scaleX(1);
}

.bhs-slider.is-playing .bhs-dot.is-active::after {
	animation: bhs-progress var(--bhs-delay) linear both;
}

.bhs-slider.is-paused .bhs-dot.is-active::after {
	animation-play-state: paused;
}

@keyframes bhs-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.bhs-arrows {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.bhs-slider .bhs-arrow {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .03);
	color: var(--bhs-heading);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.bhs-slider .bhs-arrow:hover {
	border-color: var(--bhs-accent);
	background: rgba(255, 255, 255, .08);
}

.bhs-slider .bhs-arrow[disabled] {
	opacity: .35;
	cursor: default;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.bhs-inner,
	.bhs-image-left .bhs-inner {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
	}
	.bhs-image-left .bhs-media {
		order: 0;
	}
	.bhs-media {
		max-width: 440px;
		justify-self: start;
	}
	.bhs-slide {
		min-height: 0;
	}
}

@media (max-width: 480px) {
	.bhs-slider .bhs-btn {
		min-height: 50px;
		padding: 0 22px;
		font-size: .95rem;
	}
	.bhs-slider .bhs-arrow {
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bhs-slide,
	.bhs-slide.is-active,
	.bhs-dot {
		transition-duration: 1ms !important;
	}
	.bhs-slider.is-playing .bhs-dot.is-active::after {
		animation: none;
		transform: scaleX(1);
	}
}

.bhs-notice {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fff4f4;
	color: #1d2327;
	font-size: 14px;
}