.bcom-hero {
	--bcom-hero-height: clamp(480px, 78svh, 820px);
	--bcom-hero-speed: 1000ms;
	--bcom-hero-scrim: var(--bcom-ink);
	--bcom-hero-scrim-opacity: 0.8;
	--bcom-hero-scrim-direction: to top;
	--bcom-hero-content-width: 650px;
	--bcom-hero-justify: center;
	--bcom-hero-align-items: flex-end;
	--bcom-hero-text-align: center;
	--bcom-hero-safe: max(16px, var(--bcom-gutter));
	--bcom-hero-arrow-size: 48px;
	--bcom-hero-arrow-room: 0px;
	--bcom-hero-content-bottom: 180px;
	--bcom-hero-button-text: var(--bcom-on-accent);
	--bcom-hero-button-bg: var(--bcom-accent);
	--bcom-hero-button-hover-text: var(--bcom-on-accent);
	--bcom-hero-button-hover-bg: var(--bcom-accent-hover);
	--bcom-hero-dot: rgb(255 255 255 / 50%);
	--bcom-hero-dot-active: var(--bcom-accent);
	--bcom-hero-dot-width: 56px;
	--bcom-hero-dot-height: 6px;
	--bcom-hero-dot-gap: var(--bcom-space-2);
	--bcom-hero-overlap: 0px;
	--bcom-hero-arrow: var(--bcom-navy);
	--bcom-hero-arrow-bg: rgb(255 255 255 / 88%);
	--bcom-hero-controls-offset: 12px;
	--bcom-hero-controls-inset: var(--bcom-hero-controls-offset);
	--bcom-hero-toggle-size: 40px;
	position: relative;
	isolation: isolate;
	height: calc(var(--bcom-hero-height) + var(--bcom-hero-overlap));
	margin-top: calc(-1 * var(--bcom-hero-overlap));
	overflow: hidden;
	background: var(--bcom-fill-brand);
	color: var(--bcom-white);
	font-family: var(--bcom-font);
}

.bcom-hero--under-header {
	--bcom-hero-overlap: var(--bcom-hero-header-h, 100px);
}

.bcom-hero--has-cue .bcom-hero__controls {
	bottom: calc(var(--bcom-hero-controls-offset) + 72px);
}

.bcom-hero--h-left {
	--bcom-hero-justify: flex-start;
	--bcom-hero-text-align: left;
	--bcom-hero-scrim-direction: to right;
}

.bcom-hero--h-right {
	--bcom-hero-justify: flex-end;
	--bcom-hero-text-align: right;
	--bcom-hero-scrim-direction: to left;
}

.bcom-hero--v-top {
	--bcom-hero-align-items: flex-start;
}

.bcom-hero--h-center.bcom-hero--v-top {
	--bcom-hero-scrim-direction: to bottom;
}

.bcom-hero--v-center {
	--bcom-hero-align-items: center;
}

.bcom-hero--has-arrows {
	--bcom-hero-arrow-room: calc(var(--bcom-hero-arrow-size) + 16px);
}

.bcom-hero--button-white {
	--bcom-hero-button-bg: var(--bcom-white);
	--bcom-hero-button-text: var(--bcom-ink);
	--bcom-hero-button-hover-bg: var(--bcom-surface);
	--bcom-hero-button-hover-text: var(--bcom-fg);
}

.bcom-hero__track {
	display: grid;
	height: 100%;
	margin: 0;
	padding: 0;
	touch-action: pan-y;
}

.bcom-hero__slide {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	align-items: var(--bcom-hero-align-items);
	min-height: 0;
	margin: 0;
	padding: calc(64px + var(--bcom-hero-overlap)) calc(var(--bcom-hero-safe) + var(--bcom-hero-arrow-room)) var(--bcom-hero-content-bottom);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bcom-hero-speed) cubic-bezier(0.23, 1, 0.32, 1);
}

.bcom-hero__slide.is-active {
	z-index: 1;
	opacity: 1;
	pointer-events: auto;
}

.bcom-hero:not(.is-primed) .bcom-hero__slide:not(.is-active) img {
	display: none;
}

.bcom-hero__slide picture {
	position: absolute;
	inset: 0;
	display: block;
}

.bcom-hero__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bcom-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--bcom-hero-scrim);
	opacity: var(--bcom-hero-scrim-opacity);
	-webkit-mask-image: linear-gradient(var(--bcom-hero-scrim-direction), #000 0%, rgb(0 0 0 / 85%) 40%, rgb(0 0 0 / 55%) 75%, rgb(0 0 0 / 35%) 100%);
	mask-image: linear-gradient(var(--bcom-hero-scrim-direction), #000 0%, rgb(0 0 0 / 85%) 40%, rgb(0 0 0 / 55%) 75%, rgb(0 0 0 / 35%) 100%);
}

.bcom-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: var(--bcom-hero-justify);
	width: 100%;
	max-width: var(--bcom-container);
	margin-inline: auto;
}

.bcom-hero__content {
	width: 100%;
	max-width: var(--bcom-hero-content-width);
	text-align: var(--bcom-hero-text-align);
}

.bcom-hero__eyebrow {
	margin: 0 0 12px;
	color: var(--bcom-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bcom-hero__title {
	margin: 0;
	color: inherit;
	font-family: var(--bcom-font);
	font-size: 50px;
	font-weight: 700;
	line-height: 60px;
	text-wrap: balance;
}

.bcom-hero__text {
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.55;
	text-wrap: pretty;
}

.bcom-hero__text p {
	margin: 0;
}

.bcom-hero__text p + p {
	margin-top: 0.6em;
}

.bcom-hero__actions {
	margin-top: 40px;
}

.bcom-hero__cta {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 48px;
	padding: 14px 24px 14px 26px;
	border-radius: var(--bcom-radius-pill);
	background: var(--bcom-hero-button-bg);
	color: var(--bcom-hero-button-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: background-color var(--bcom-duration) cubic-bezier(0.23, 1, 0.32, 1), color var(--bcom-duration) cubic-bezier(0.23, 1, 0.32, 1), transform var(--bcom-dur-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.bcom-hero__cta:is(:link, :visited, :focus) {
	color: var(--bcom-hero-button-text);
	text-decoration: none;
}

.bcom-hero__cta:active {
	transform: scale(calc(1 - 0.03 * var(--bcom-motion, 1)));
}

.bcom-hero__cta:focus-visible {
	background-color: var(--bcom-hero-button-hover-bg);
	color: var(--bcom-hero-button-hover-text);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.bcom-hero__cta:hover {
		background-color: var(--bcom-hero-button-hover-bg);
		color: var(--bcom-hero-button-hover-text);
		text-decoration: none;
	}
}

.bcom-hero__cta-icon {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform var(--bcom-dur-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.bcom-hero__cta:focus-visible .bcom-hero__cta-icon {
	transform: translateX(calc(2px * var(--bcom-motion, 1)));
}

@media (hover: hover) and (pointer: fine) {
	.bcom-hero__cta:hover .bcom-hero__cta-icon {
		transform: translateX(calc(2px * var(--bcom-motion, 1)));
	}
}

.bcom-hero--linked .bcom-hero__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bcom-hero--linked .bcom-hero__slide.is-active {
	cursor: pointer;
}

.bcom-hero__cta:focus-visible,
.bcom-hero__arrow:focus-visible,
.bcom-hero__dot:focus-visible,
.bcom-hero__toggle:focus-visible,
.bcom-hero__scroll:focus-visible {
	outline: none;
	box-shadow: var(--bcom-focus-ring);
}

.bcom-hero__arrow:not(:disabled):active,
.bcom-hero__toggle:active,
.bcom-hero__scroll:active {
	scale: calc(1 - 0.03 * var(--bcom-motion, 1));
}

.bcom-hero__arrow,
.bcom-hero__controls,
.bcom-hero__scroll {
	z-index: 2;
}

.bcom-hero:not(.is-ready) .bcom-hero__arrow,
.bcom-hero:not(.is-ready) .bcom-hero__controls,
.bcom-hero:not(.is-ready) .bcom-hero__scroll {
	display: none;
}

.bcom-hero__arrow {
	position: absolute;
	top: calc(50% + var(--bcom-hero-overlap) / 2);
	display: grid;
	place-items: center;
	width: var(--bcom-hero-arrow-size);
	height: var(--bcom-hero-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bcom-hero-arrow-bg);
	color: var(--bcom-hero-arrow);
	cursor: pointer;
	translate: 0 -50%;
	transition: background-color var(--bcom-duration) cubic-bezier(0.23, 1, 0.32, 1), color var(--bcom-duration) cubic-bezier(0.23, 1, 0.32, 1), scale var(--bcom-dur-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
	.bcom-hero__arrow:not(:disabled):hover {
		background: var(--bcom-white);
		color: var(--bcom-ink);
	}
}

.bcom-hero__arrow--prev {
	left: var(--bcom-hero-safe);
}

.bcom-hero__arrow--next {
	right: var(--bcom-hero-safe);
}

.bcom-hero__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.bcom-hero__controls {
	position: absolute;
	right: 0;
	bottom: var(--bcom-hero-controls-offset);
	left: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(var(--bcom-hero-toggle-size), 1fr) minmax(0, auto) minmax(var(--bcom-hero-toggle-size), 1fr);
	gap: 16px;
	align-items: center;
	padding-inline: var(--bcom-hero-controls-inset);
}

.bcom-hero__dots {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--bcom-hero-dot-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcom-hero__dots li {
	margin: 0;
}

.bcom-hero__dot {
	position: relative;
	display: block;
	width: var(--bcom-hero-dot-width);
	height: max(var(--bcom-hero-toggle-size), var(--bcom-hero-dot-height));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--bcom-radius-pill);
	background: transparent;
	cursor: pointer;
}

.bcom-hero__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var(--bcom-hero-dot-height);
	border-radius: var(--bcom-radius-pill);
	background: var(--bcom-hero-dot);
	translate: 0 -50%;
	transition: background-color var(--bcom-duration) cubic-bezier(0.23, 1, 0.32, 1);
}

.bcom-hero__dot[aria-current="true"]::before {
	background-color: var(--bcom-hero-dot-active);
}

@media (hover: hover) and (pointer: fine) {
	.bcom-hero__dot:hover::before {
		background-color: var(--bcom-hero-dot-active);
	}
}

.bcom-hero__toggle {
	grid-column: 3;
	justify-self: end;
	display: grid;
	place-items: center;
	width: var(--bcom-hero-toggle-size);
	height: var(--bcom-hero-toggle-size);
	padding: 0;
	border: 1px solid rgb(255 255 255 / 60%);
	border-radius: 50%;
	background: rgb(7 55 99 / 45%);
	color: var(--bcom-white);
	cursor: pointer;
	transition: background-color var(--bcom-duration) cubic-bezier(0.23, 1, 0.32, 1), scale var(--bcom-dur-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
	.bcom-hero__toggle:hover {
		background: var(--bcom-fill-brand);
		color: var(--bcom-white);
	}
}

.bcom-hero__toggle-play,
.bcom-hero.is-paused .bcom-hero__toggle-pause {
	display: none;
}

.bcom-hero.is-paused .bcom-hero__toggle-play {
	display: block;
}

.bcom-hero__scroll {
	position: absolute;
	bottom: 16px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bcom-white);
	cursor: pointer;
	translate: -50% 0;
	transition: color var(--bcom-duration) cubic-bezier(0.23, 1, 0.32, 1), scale var(--bcom-dur-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
	.bcom-hero__scroll:hover {
		color: var(--bcom-accent);
	}
}

@media (max-width: 1199px) {
	.bcom-hero--under-header {
		--bcom-hero-overlap: var(--bcom-hero-header-h, 70px);
	}

	.bcom-hero__title {
		font-size: 40px;
		line-height: 52px;
	}
}

@media (max-width: 959px) {
	.bcom-hero {
		--bcom-hero-arrow-room: 0px;
		--bcom-hero-content-bottom: 160px;
	}

	.bcom-hero__arrow {
		display: none;
	}

	.bcom-hero__title {
		font-size: 30px;
		line-height: 40px;
	}

	.bcom-hero__text {
		font-size: 16px;
	}

	.bcom-hero__actions {
		margin-top: 30px;
	}
}

@media (max-width: 767px) {
	.bcom-hero {
		--bcom-hero-height: 580px;
		--bcom-hero-dot-width: 40px;
		--bcom-hero-scrim-direction: to top;
		--bcom-hero-align-items: flex-end;
		--bcom-hero-content-bottom: 96px;
	}

	.bcom-hero--has-cue {
		--bcom-hero-content-bottom: 140px;
	}

	.bcom-hero__slide {
		padding-top: calc(32px + var(--bcom-hero-overlap));
	}

	.bcom-hero__actions {
		margin-top: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bcom-hero__slide,
	.bcom-hero__dot::before,
	.bcom-hero__toggle,
	.bcom-hero__cta,
	.bcom-hero__cta-label,
	.bcom-hero__cta-icon {
		transition: none;
	}
}