/* ==========================================================================
   BeeGee's Coastal — Guest Reviews
   Same token set as the Featured Stays block so the two sit together on a
   page without a seam. Nothing loops until the section is in view.
   ========================================================================== */

.bg-rev {
	--bg-ivory: #F5F3EE;
	--bg-ivory-2: #EFEBE2;
	--bg-ink: #14201E;
	--bg-teal: #0E4A45;
	--bg-teal-deep: #0A3733;
	--bg-teal-mist: #5C8A83;
	--bg-gold: #B9925B;
	--bg-gold-lift: #D8B27A;
	--bg-line: rgba(14, 74, 69, .14);
	--bg-card: #FFFFFF;
	--bg-shadow: 0 26px 60px -30px rgba(10, 55, 51, .34);
	--bg-max: 1240px;
	--bg-ui: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bg-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--bg-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 48px);
	background: var(--bg-ivory);
	color: var(--bg-ink);
	font-family: var(--bg-ui);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.bg-rev *,
.bg-rev *::before,
.bg-rev *::after {
	box-sizing: border-box;
	min-width: 0;
}

.bg-rev :focus-visible {
	outline: 2px solid var(--bg-teal);
	outline-offset: 3px;
	border-radius: 10px;
}

/* Nothing animates until the block is on screen — and it stops again when it
   leaves, so a page can sit open without repainting the whole section. */
.bg-rev:not(.is-live) *,
.bg-rev:not(.is-live) *::before,
.bg-rev:not(.is-live) *::after {
	animation-play-state: paused !important;
}

/* --------------------------------------------------------------- ground */

.bg-rev__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.bg-rev__wash {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(46% 38% at 12% 8%, rgba(185, 146, 91, .16), transparent 70%),
		radial-gradient(52% 44% at 88% 14%, rgba(92, 138, 131, .18), transparent 72%),
		radial-gradient(60% 50% at 52% 108%, rgba(14, 74, 69, .12), transparent 70%);
	animation: bg-rev-drift 34s ease-in-out infinite;
}

@keyframes bg-rev-drift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-2%, 2%, 0) scale(1.06); }
}

/* A single tide line across the ground — the same gesture as the header. */
.bg-rev__tide {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: 14%;
	height: 120px;
	opacity: .3;
}

.bg-rev__tide svg { width: 100%; height: 100%; }

.bg-rev__tide path {
	fill: none;
	stroke: var(--bg-teal-mist);
	stroke-width: 1.1;
	stroke-dasharray: 5 9;
	animation: bg-rev-tide 26s linear infinite;
}

@keyframes bg-rev-tide {
	to { stroke-dashoffset: -420; }
}

.bg-rev__grain {
	position: absolute;
	inset: 0;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
}

.bg-rev__in {
	position: relative;
	z-index: 1;
	max-width: var(--bg-max);
	margin-inline: auto;
}

/* ------------------------------------------------------------- entrance */

.bg-rev__r {
	opacity: 0;
	transform: translateY(20px);
}

.bg-rev.is-in .bg-rev__r {
	opacity: 1;
	transform: none;
	transition:
		opacity .85s var(--bg-ease) var(--d, 0ms),
		transform .85s var(--bg-ease) var(--d, 0ms);
}

/* --------------------------------------------------------------- header */

.bg-rev__head {
	margin-bottom: clamp(28px, 3.6vw, 46px);
	max-width: 42ch;
}

.bg-rev__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--bg-teal-mist);
}

.bg-rev__eyebrow i {
	position: relative;
	width: clamp(30px, 5vw, 58px);
	height: 1px;
	background: linear-gradient(90deg, var(--bg-gold), transparent);
}

.bg-rev__eyebrow i::after {
	content: "";
	position: absolute;
	top: -1.5px;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bg-gold);
	box-shadow: 0 0 8px var(--bg-gold-lift);
	animation: bg-rev-run 5s var(--bg-ease) infinite;
}

@keyframes bg-rev-run {
	0%, 100% { left: 0; opacity: 0; }
	12%      { opacity: 1; }
	50%      { left: 100%; }
	88%      { opacity: 0; }
}

.bg-rev__title {
	margin: 0;
	font-family: var(--bg-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 3.2rem);
	line-height: 1.06;
	letter-spacing: -.015em;
	color: var(--bg-teal-deep);
}

.bg-rev__ln {
	display: block;
	overflow: hidden;
	padding-bottom: .18em;
	margin-bottom: -.14em;
}

.bg-rev__ln > span {
	display: block;
	transform: translateY(110%);
	opacity: 0;
}

.bg-rev.is-in .bg-rev__ln > span {
	transform: none;
	opacity: 1;
	transition:
		transform 1.05s var(--bg-ease) var(--d, 0ms),
		opacity .7s ease var(--d, 0ms);
}

.bg-rev__title em {
	font-style: italic;
	background: linear-gradient(114deg, var(--bg-gold), var(--bg-gold-lift) 42%, #9C7742 78%, var(--bg-gold));
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: bg-rev-sheen 7s ease-in-out infinite;
}

@keyframes bg-rev-sheen {
	0%, 100% { background-position: 0 0; }
	50%      { background-position: 100% 0; }
}

.bg-rev__lede {
	margin: 14px 0 0;
	max-width: 48ch;
	font-family: var(--bg-ui);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.66;
	color: rgba(20, 32, 30, .74);
}

/* --------------------------------------------------------------- layout */

.bg-rev__body {
	display: grid;
	grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
	gap: clamp(22px, 3vw, 52px);
	align-items: center;
}

/* ---------------------------------------------------- score + book card */

/* The deck is 3D and its side cards deliberately reach past their column.
   The left column therefore sits above it — a stray card slides behind the
   booking card instead of printing its text across it. */
.bg-rev__left {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-self: stretch;
	justify-content: center;
}

/* The credibility line, compact — the numbers earn their place without
   taking the whole column away from the booking card. */
.bg-rev__score {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bg-line);
}

.bg-rev__num {
	font-family: var(--bg-serif);
	font-weight: 400;
	font-size: clamp(2.4rem, 4vw, 3.1rem);
	line-height: 1;
	color: var(--bg-teal-deep);
	font-variant-numeric: tabular-nums;
}

.bg-rev__count {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bg-teal-mist);
}

.bg-rev__count b {
	font-weight: 700;
	color: var(--bg-teal-deep);
}

/* Stars: one muted row, one gold row clipped to --fill. Two background
   repeats instead of ten nodes. */
.bg-rev__stars {
	position: relative;
	display: inline-block;
	width: 112px;
	height: 19px;
	flex: none;
}

.bg-rev__stars--lg { width: 134px; height: 23px; }
.bg-rev__stars--sm { width: 86px; height: 15px; }

.bg-rev__starrow {
	position: absolute;
	inset: 0;
	background-repeat: repeat-x;
	background-size: 20% 100%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20'><path d='M10.5 1.6l2.6 5.4 5.9.8-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9L2 7.8l5.9-.8z' fill='%23DFD9CB'/></svg>");
}

.bg-rev__starrow--on {
	width: 0;
	overflow: hidden;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20'><path d='M10.5 1.6l2.6 5.4 5.9.8-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9L2 7.8l5.9-.8z' fill='%23B9925B'/></svg>");
	transition: width 1.3s var(--bg-ease) .3s;
}

.bg-rev.is-in .bg-rev__starrow--on { width: var(--fill, 0%); }

/* ------------------------------------------------------------ book card */

.bg-rev__book {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	background: var(--bg-card);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--bg-shadow);
}

.bg-rev__shot {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(150deg, var(--bg-teal), var(--bg-teal-deep));
}

@supports not (aspect-ratio: 1) {
	.bg-rev__shot { height: 190px; }
}

.bg-rev__shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .7s ease, transform 9s linear;
}

.bg-rev__shot img.is-on {
	opacity: 1;
	transform: scale(1);
}

/* No photo on file yet: a tinted plate with the property's initial, so the
   card never shows a broken frame. */
.bg-rev__plate {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--bg-serif);
	font-size: 3.4rem;
	color: rgba(255, 255, 255, .5);
	background:
		radial-gradient(60% 60% at 30% 25%, rgba(185, 146, 91, .5), transparent 70%),
		linear-gradient(150deg, var(--bg-teal), var(--bg-teal-deep));
	transition: opacity .5s ease;
}

.bg-rev__shot.has-photo .bg-rev__plate { opacity: 0; }

.bg-rev__shot::after {
	content: "";
	position: absolute;
	inset: 40% 0 0 0;
	background: linear-gradient(180deg, transparent, rgba(10, 55, 51, .72));
	pointer-events: none;
}

.bg-rev__seal {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--bg-teal-deep);
	box-shadow: 0 8px 20px rgba(10, 55, 51, .18);
}

.bg-rev__seal i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bg-gold);
	box-shadow: 0 0 0 3px rgba(185, 146, 91, .25);
	animation: bg-rev-pulse 2.6s ease-in-out infinite;
}

@keyframes bg-rev-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(185, 146, 91, .25); }
	50%      { box-shadow: 0 0 0 7px rgba(185, 146, 91, 0); }
}

.bg-rev__shotfoot {
	position: absolute;
	z-index: 2;
	left: 18px;
	right: 18px;
	bottom: 14px;
	color: #FFFFFF;
}

.bg-rev__kicker {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

.bg-rev__name {
	margin: 4px 0 0;
	font-family: var(--bg-serif);
	font-weight: 400;
	font-size: clamp(1.45rem, 2.1vw, 1.85rem);
	line-height: 1.14;
	color: #FFFFFF;
}

.bg-rev__bookin {
	padding: clamp(18px, 2vw, 24px);
}

.bg-rev__mini {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bg-teal-mist);
}

.bg-rev__pitch {
	margin: 0 0 18px;
	font-family: var(--bg-ui);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(20, 32, 30, .82);
}

.bg-rev__pitch b {
	color: var(--bg-teal-deep);
	font-weight: 600;
}

.bg-rev__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 16px;
}

.bg-rev__cta .bg-rev__btn { flex: 1 1 auto; justify-content: center; }

.bg-rev__ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 auto;
	padding: 15px 20px;
	border: 1px solid var(--bg-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--bg-teal);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: color .35s ease, background-color .35s ease, border-color .35s ease, transform .45s var(--bg-ease);
}

.bg-rev__ghost svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .4s var(--bg-ease);
}

.bg-rev__ghost:hover {
	transform: translateY(-2px);
	color: #FFFFFF;
	background: var(--bg-teal);
	border-color: var(--bg-teal);
}

.bg-rev__ghost:hover svg { transform: translateX(4px); }

.bg-rev__tick {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
}

.bg-rev.is-in .bg-rev__tick { animation: bg-rev-draw .9s ease-out forwards .85s; }

@keyframes bg-rev-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------- filter */

.bg-rev__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 16px;
}

.bg-rev__chip {
	padding: 8px 15px;
	border: 1px solid var(--bg-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	color: var(--bg-teal);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .4s var(--bg-ease);
}

.bg-rev.is-in .bg-rev__chip {
	animation: bg-rev-settle .55s var(--bg-ease) backwards;
	animation-delay: calc(560ms + var(--i, 0) * 45ms);
}

.bg-rev__chip:hover { transform: translateY(-2px); border-color: rgba(185, 146, 91, .5); }

.bg-rev__chip.is-on {
	color: #FFFFFF;
	background: var(--bg-teal);
	border-color: var(--bg-teal);
}

/* ----------------------------------------------------------------- deck */

.bg-rev__deckwrap {
	position: relative;
	z-index: 1;
}

/* And the deck fades out at its own edges, so the cards that reach past the
   column dissolve rather than getting cut off mid-word. */
.bg-rev__deck {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.bg-rev__deck {
	position: relative;
	height: clamp(390px, 33vw, 470px);
	perspective: 1500px;
	touch-action: pan-y;
	cursor: grab;
}

.bg-rev__deck.is-drag { cursor: grabbing; }

.bg-rev__card {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(500px, 86%);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(22px, 2.2vw, 30px);
	border-radius: 24px;
	background:
		linear-gradient(168deg, color-mix(in srgb, var(--c, #CFE3DE) 26%, #FFFFFF), #FFFFFF 62%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--bg-shadow);
	transform-origin: center;
	will-change: transform;
	transition:
		transform .7s var(--bg-ease),
		opacity .5s ease,
		filter .5s ease;
}

/* Browsers without color-mix still get a clean card. */
@supports not (background: color-mix(in srgb, red 20%, white)) {
	.bg-rev__card { background: #FFFFFF; }
}

.bg-rev__card.is-far { pointer-events: none; }

/* A single sheen crosses the card as it arrives at the front — the same gold
   the header uses, held to one pass so it reads as light, not as a loop. */
.bg-rev__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .78) 50%, transparent 66%);
	background-size: 260% 100%;
}

.bg-rev__card.is-active::after {
	animation: bg-rev-pass 1.15s var(--bg-ease) .12s 1;
}

@keyframes bg-rev-pass {
	0%   { opacity: 0; background-position: 130% 0; }
	28%  { opacity: 1; }
	100% { opacity: 0; background-position: -30% 0; }
}

/* The contents of the front card settle in one after another, so arriving at
   a review feels like it is being handed over rather than swapped. */
.bg-rev__card.is-active > .bg-rev__stars,
.bg-rev__card.is-active > h3,
.bg-rev__card.is-active > .bg-rev__text,
.bg-rev__card.is-active > .bg-rev__stay,
.bg-rev__card.is-active > footer {
	animation: bg-rev-settle .65s var(--bg-ease) backwards;
}

.bg-rev__card.is-active > .bg-rev__stars { animation-delay: .06s; }
.bg-rev__card.is-active > h3             { animation-delay: .13s; }
.bg-rev__card.is-active > .bg-rev__text  { animation-delay: .2s; }
.bg-rev__card.is-active > .bg-rev__stay  { animation-delay: .27s; }
.bg-rev__card.is-active > footer         { animation-delay: .34s; }

@keyframes bg-rev-settle {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
.bg-rev__card[hidden] { display: none; }

.bg-rev__mark {
	position: absolute;
	top: 20px;
	right: 22px;
	width: 40px;
	opacity: .26;
}

.bg-rev__mark svg { width: 100%; height: auto; fill: var(--bg-gold); }

.bg-rev__card.is-active .bg-rev__mark { animation: bg-rev-bob 6.5s ease-in-out infinite; }

@keyframes bg-rev-bob {
	0%, 100% { transform: translateY(0); opacity: .26; }
	50%      { transform: translateY(-5px); opacity: .48; }
}

.bg-rev__card h3 {
	margin: 4px 0 0;
	max-width: 26ch;
	font-family: var(--bg-serif);
	font-weight: 400;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.2;
	color: var(--bg-teal-deep);
}

.bg-rev__text {
	margin: 0;
	max-width: 46ch;
	padding-right: 12px;
	font-family: var(--bg-ui);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.75;
	color: rgba(20, 32, 30, .84);
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: var(--bg-gold) rgba(14, 74, 69, .08);
}

/* WebKit / Blink — a slim gold rail rather than the platform default, which
   lands as a grey slab in the middle of a cream card. */
.bg-rev__text::-webkit-scrollbar {
	width: 6px;
}

.bg-rev__text::-webkit-scrollbar-track {
	margin: 2px 0;
	border-radius: 99px;
	background: rgba(14, 74, 69, .08);
}

.bg-rev__text::-webkit-scrollbar-thumb {
	border-radius: 99px;
	background: linear-gradient(180deg, var(--bg-gold-lift), var(--bg-gold) 55%, var(--bg-teal));
}

.bg-rev__text::-webkit-scrollbar-thumb:hover {
	background: var(--bg-teal);
}

/* A long review fades at the bottom edge so it reads as "there is more",
   and the fade lifts once you reach the end. The class is only added when
   the text actually overflows. */
.bg-rev__text.is-scroll {
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
	mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
}

.bg-rev__text.is-scroll.is-end {
	-webkit-mask-image: none;
	mask-image: none;
}

.bg-rev__stay {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px 6px 7px;
	border-radius: 999px;
	background: rgba(14, 74, 69, .07);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bg-teal);
	text-decoration: none;
	transition: background-color .35s ease, color .35s ease;
}

.bg-rev__stay svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

a.bg-rev__stay:hover { background: var(--bg-teal); color: #FFFFFF; }

.bg-rev__card footer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 3px 12px;
	width: 100%;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bg-line);
}

.bg-rev__face {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-family: var(--bg-serif);
	font-size: 1.3rem;
	color: var(--bg-teal-deep);
	background: color-mix(in srgb, var(--c, #CFE3DE) 55%, #FFFFFF);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.bg-rev__who b {
	display: block;
	font-size: .98rem;
	font-weight: 600;
	color: var(--bg-teal-deep);
}

.bg-rev__who em {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-style: normal;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bg-teal-mist);
}

.bg-rev__who em svg {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: var(--bg-teal);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bg-rev__src {
	grid-row: span 2;
	align-self: center;
	padding: 4px 9px;
	border: 1px solid var(--bg-line);
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bg-teal-mist);
	white-space: nowrap;
}

/* ---------------------------------------------------------- empty state */

.bg-rev__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: clamp(26px, 2.8vw, 40px);
	border-radius: 26px;
	background: var(--bg-card);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--bg-shadow);
}

.bg-rev__empty[hidden] { display: none; }

.bg-rev__empty-mark {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 30%, #FFFFFF, var(--bg-gold-lift));
	box-shadow: 0 10px 24px rgba(10, 55, 51, .16);
	animation: bg-rev-bob 6.5s ease-in-out infinite;
}

.bg-rev__empty h3 {
	margin: 0;
	font-family: var(--bg-serif);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	color: var(--bg-teal-deep);
}

.bg-rev__empty p {
	margin: 0;
	max-width: 46ch;
	font-size: .88rem;
	line-height: 1.7;
	color: rgba(20, 32, 30, .78);
}

.bg-rev.is-empty .bg-rev__body { grid-template-columns: minmax(0, 1fr); }

.bg-rev.is-empty .bg-rev__empty {
	align-items: center;
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

/* ------------------------------------------------------------------ nav */

.bg-rev__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.bg-rev__nav[hidden],
.bg-rev__deck[hidden] { display: none; }

.bg-rev__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--bg-teal);
	background: rgba(255, 255, 255, .86);
	box-shadow: inset 0 0 0 1px var(--bg-line), 0 8px 20px rgba(10, 55, 51, .1);
	transition: transform .45s var(--bg-ease), box-shadow .4s ease, background-color .4s ease, color .4s ease;
}

.bg-rev__arrow svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bg-rev__arrow:hover {
	transform: scale(1.08);
	color: #FFFFFF;
	background: var(--bg-teal);
	box-shadow: 0 14px 28px rgba(10, 55, 51, .2);
}

.bg-rev__dots { display: flex; align-items: center; gap: 6px; }

.bg-rev__dots button {
	position: relative;
	overflow: hidden;
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	cursor: pointer;
	background: rgba(14, 74, 69, .22);
	transition: width .5s var(--bg-ease), background-color .4s ease;
}

.bg-rev__dots button.is-on {
	width: 26px;
	background: rgba(185, 146, 91, .3);
}

/* The active dot fills at the speed the deck advances, so the wait is legible
   instead of a surprise. It holds still while a pointer is on the deck —
   matching the timer, which pauses there too. */
.bg-rev[data-auto="1"] .bg-rev__dots button.is-on::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	transform-origin: left center;
	background: var(--bg-gold);
	animation: bg-rev-tick var(--hold, 7s) linear forwards;
}

.bg-rev[data-auto="1"] .bg-rev__deckwrap:hover .bg-rev__dots button.is-on::after,
.bg-rev.is-held .bg-rev__dots button.is-on::after {
	animation-play-state: paused;
}

.bg-rev.is-held .bg-rev__dots button.is-on {
	background: var(--bg-gold);
}

.bg-rev.is-held .bg-rev__dots button.is-on::after {
	display: none;
}

@keyframes bg-rev-tick {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* The booking card announces the swap: the name lifts in behind the photo. */
.bg-rev__shotfoot.is-swap .bg-rev__kicker,
.bg-rev__shotfoot.is-swap .bg-rev__name {
	animation: bg-rev-settle .6s var(--bg-ease) backwards;
}

.bg-rev__shotfoot.is-swap .bg-rev__name { animation-delay: .07s; }

/* -------------------------------------------------------------- buttons */

.bg-rev__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	overflow: hidden;
	isolation: isolate;
	padding: 15px 26px;
	border-radius: 999px;
	text-decoration: none;
	color: #FFFFFF;
	background: var(--bg-teal);
	box-shadow: 0 14px 30px rgba(10, 55, 51, .22);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: transform .5s var(--bg-ease), box-shadow .45s ease, color .35s ease;
}

.bg-rev__btn span,
.bg-rev__btn svg { position: relative; z-index: 1; }

.bg-rev__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: linear-gradient(114deg, var(--bg-gold), var(--bg-gold-lift) 50%, #9C7742);
	transition: opacity .4s ease;
}

.bg-rev__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px rgba(10, 55, 51, .28);
}

.bg-rev__btn:hover::before { opacity: 1; }

.bg-rev__btn svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--bg-ease);
}

.bg-rev__btn:hover svg { transform: translateX(5px); }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.bg-rev__body { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.bg-rev__left { max-width: 520px; }
	.bg-rev__deck { height: clamp(400px, 64vw, 470px); }
	.bg-rev__card { width: min(500px, 92%); }
}

@media (max-width: 640px) {
	.bg-rev { padding: 44px 16px; }
	.bg-rev__deck { height: 460px; }
	.bg-rev__card { width: 96%; padding: 20px; }
	/* The card all but fills the deck here, so a fade would eat its edges. */
	.bg-rev__deck { -webkit-mask-image: none; mask-image: none; }
	.bg-rev__bookin { padding: 18px; }
	.bg-rev__btn { width: 100%; justify-content: center; }
	.bg-rev__src { display: none; }
	.bg-rev__card footer { grid-template-columns: auto 1fr; }
	.bg-rev__tide { display: none; }
}

/* ------------------------------------------------------- motion opt-out */

@media (prefers-reduced-motion: reduce) {
	.bg-rev *,
	.bg-rev *::before,
	.bg-rev *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}

	.bg-rev .bg-rev__r { opacity: 1; transform: none; }
	.bg-rev .bg-rev__ln > span { opacity: 1; transform: none; }
	.bg-rev .bg-rev__tick { stroke-dashoffset: 0; }
}