/* ==========================================================================
   Remlinger Birthday Parties (remlinger-birthdays) · bdp.css
   Prefix bdp-. Mobile-first at 402px. Text rules carry !important on the
   properties X-Theme forces (font, color, margin) per 02-build-standards.
   ========================================================================== */

/* Cormorant 600 italic: the Global Shell ships the file but declares no @font-face (1.3.8). */
@font-face {
	font-family: "RF Birthdays Cormorant";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-600-italic.woff2") format("woff2");
}

/* ---------- Page-level fixes (1.0.1) ----------
   1. X-Theme clips html and body with overflow-x: hidden. With both set, body becomes a
      scroll container that never scrolls, and every position: sticky inside it stops
      holding (the Party Clock scrolled away while its time kept moving). clip trims the
      same overflow without creating a scroll container. Two rules: an unsupported :has()
      must not take the body rule down with it.
   2. The shell leaves a 3px strip above its header on desktop (the homepage's progress
      slot). This page puts its own progress bar under the header instead, so the header
      sits flush: same fix as Fun Park and Fall Harvest; the WordPress toolbar offset stays. */
body.rf-birthdays-page { overflow-x: clip !important; overflow-y: visible !important; }
html:has(> body.rf-birthdays-page) { overflow-x: clip !important; overflow-y: visible !important; }
@media (min-width: 941px) {
	body.rf-shell-context-birthdays .rf-shell-header { top: var(--rf-shell-admin-offset, 0px) !important; }
}

/* ---------- Tokens (one place; the glow palette is the page's, never a section's) ---------- */
.bdp-root {
	--bdp-sans: "RF Shell Montserrat", Montserrat, system-ui, -apple-system, sans-serif;
	--bdp-serif: "RF Birthdays Cormorant", "Cormorant Garamond", Georgia, serif;
	--bdp-cream: #fbf6ec;
	--bdp-cream-80: rgba(251, 246, 236, 0.8);
	--bdp-bg: #f7f1e6;
	--bdp-ink: #191411;
	--bdp-muted: #6a5c4f;
	--bdp-accent: #2f6b36;
	--bdp-gold: #f0c055;
	--bdp-deep: #1f3a22;
	--bdp-line: rgba(25, 20, 17, 0.14);
	--bdp-card: rgba(255, 255, 255, 0.72);
	--bdp-glow-soft: rgba(240, 185, 58, 0.28);
	--rf-glow-1: #f0b93a;
	--rf-glow-2: #5fae4a;
	--rf-glow-3: #f2793a;
	--rf-glow-speed: 6s;
	--bdp-head: 76px;
	--bdp-progress-h: 3px;
	--bdp-top: calc(var(--bdp-head) + var(--bdp-progress-h));
	--bdp-gutter: max(18px, env(safe-area-inset-left, 0px));
	--bdp-gutter-r: max(18px, env(safe-area-inset-right, 0px));

	position: relative;
	background: var(--bdp-bg);
	color: var(--bdp-ink);
	font-family: var(--bdp-sans);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}
.bdp-root[data-season="arcade"] {
	--bdp-bg: #15122b;
	--bdp-ink: #f3eefe;
	--bdp-muted: #b6addb;
	--bdp-accent: #ff6aa9;
	--bdp-gold: #5ad8ff;
	--bdp-deep: #0c0a1c;
	--bdp-line: rgba(243, 238, 254, 0.16);
	--bdp-card: rgba(255, 255, 255, 0.07);
	--bdp-glow-soft: rgba(138, 92, 255, 0.38);
	--rf-glow-1: #8a5cff;
	--rf-glow-2: #ff4f9a;
	--rf-glow-3: #34d1ff;
}
@media (min-width: 941px) {
	.bdp-root { --bdp-head: 78px; --bdp-gutter: 40px; --bdp-gutter-r: 40px; }
}

/* ---------- Scoped reset ---------- */
.bdp-root *,
.bdp-root *::before,
.bdp-root *::after { box-sizing: border-box; }
.bdp-root :where(h1, h2, h3, p, ol, li, figure) { margin: 0 !important; padding: 0; }
.bdp-root :where(ol) { list-style: none; }
.bdp-root img { display: block; max-width: 100%; }
.bdp-root :where(#top, #parties, #clock, #faq) { scroll-margin-top: var(--bdp-top); }
.bdp-root a { -webkit-tap-highlight-color: transparent; }
.bdp-root a:focus-visible,
.bdp-root button:focus-visible { outline: 3px solid var(--bdp-gold); outline-offset: 3px; border-radius: 8px; }

.bdp-root .bdp-serif {
	font: italic 600 1.08em/0.9 var(--bdp-serif) !important;
	letter-spacing: -0.01em;
	color: var(--bdp-gold) !important;
}
.bdp-root .bdp-h2 {
	font: 800 clamp(30px, 3.2vw + 18px, 56px)/1 var(--bdp-sans) !important;
	letter-spacing: -0.03em;
	color: inherit !important;
	text-wrap: balance;
}
.bdp-root .bdp-eyebrow,
.bdp-root .bdp-kicker {
	font: 600 11px/1.2 var(--bdp-sans) !important;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

/* ---------- Scroll progress: under the shell header, in the season's glow colours ---------- */
.bdp-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--bdp-head);
	z-index: 900;
	height: var(--bdp-progress-h);
	pointer-events: none;
}
.bdp-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--rf-glow-1), var(--rf-glow-2), var(--rf-glow-3));
	box-shadow: 0 0 10px var(--bdp-glow-soft);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* ---------- Glow border (shared RF Glow Border) ---------- */
.bdp-root .bdp-glow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 999px;
	padding: 2px;
}
.bdp-root .bdp-glow__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 300%;
	aspect-ratio: 1;
	background: conic-gradient(from 0deg, var(--rf-glow-1), var(--rf-glow-2), var(--rf-glow-3), var(--rf-glow-1));
	transform: translate(-50%, -50%);
	animation: bdp-spin var(--rf-glow-speed) linear infinite;
}
@keyframes bdp-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }

/* ==========================================================================
   HERO
   ========================================================================== */
.bdp-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 88svh;
	overflow: hidden;
	background: var(--bdp-deep);
	color: var(--bdp-cream);
}
.bdp-hero__media,
.bdp-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.bdp-hero__media { z-index: -2; }
.bdp-hero__media img { object-fit: cover; }
.bdp-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(12, 9, 7, 0.5) 0%,
		rgba(12, 9, 7, 0.08) 20%,
		rgba(12, 9, 7, 0.2) 40%,
		rgba(12, 9, 7, 0.78) 66%,
		rgba(12, 9, 7, 0.92) 100%);
}
.bdp-hero__inner {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: calc(var(--bdp-head) + 32px) var(--bdp-gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--bdp-gutter);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bdp-root .bdp-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--bdp-cream) !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.bdp-kicker__dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--bdp-gold);
	box-shadow: 0 0 10px var(--bdp-gold);
}
.bdp-root .bdp-h1 {
	max-width: 11ch;
	font: 800 clamp(44px, 9vw + 8px, 132px)/0.92 var(--bdp-sans) !important;
	letter-spacing: -0.035em;
	color: var(--bdp-cream) !important;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.bdp-root .bdp-hero__sub {
	max-width: 44ch;
	font: 500 clamp(15px, 0.45vw + 13px, 19px)/1.5 var(--bdp-sans) !important;
	color: rgba(251, 246, 236, 0.9) !important;
	text-wrap: pretty;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Party pills: iPhone-grade glass, both alike; each opens the modal at its party */
.bdp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 6px;
}
.bdp-root .bdp-pill {
	flex: 1 1 0;
	min-width: 0;
	max-width: 280px;
	display: flex;
	border-radius: 999px;
	text-decoration: none !important;
	color: var(--bdp-cream) !important;
	transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.bdp-pill__in {
	flex: 1;
	position: relative;
	overflow: hidden;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 18px 8px 22px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1));
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	backdrop-filter: blur(28px) saturate(180%);
	box-shadow:
		inset 1px 1px 0 rgba(255, 255, 255, 0.55),
		inset -1px -1px 0 rgba(255, 255, 255, 0.1),
		inset 0 0 0 1px rgba(255, 255, 255, 0.14),
		0 14px 40px rgba(0, 0, 0, 0.28);
	transition: background 0.25s, box-shadow 0.25s;
}
/* Press bloom, like iOS glass controls */
.bdp-pill__in::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, 0.35), transparent 60%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
.bdp-root .bdp-pill:active .bdp-pill__in::after { opacity: 1; transition-duration: 0.05s; }
.bdp-pill__name { font: 700 15px/1.1 var(--bdp-sans); white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.bdp-pill__arrow { font: 600 18px/1 var(--bdp-sans); flex: none; }
.bdp-root .bdp-pill:active { transform: scale(0.96); }
@media (max-width: 389px) {
	.bdp-pill__in { padding: 8px 14px 8px 18px; gap: 8px; }
	.bdp-pill__name { font-size: 14px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bdp-pill__in { background: rgba(25, 20, 17, 0.72); }
}
@media (prefers-reduced-transparency: reduce) {
	.bdp-pill__in { background: rgba(25, 20, 17, 0.86); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (hover: hover) and (pointer: fine) {
	.bdp-root .bdp-pill:hover { transform: translateY(-2px); }
	.bdp-root .bdp-pill:hover .bdp-pill__in { background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)); }
	.bdp-root .bdp-pill:hover .bdp-pill__arrow { transform: translateX(3px); }
	.bdp-pill__arrow { transition: transform 0.2s; }
}

/* ==========================================================================
   TICKETS (the Birthday Booking modal's inline tickets; only the band around them)
   ========================================================================== */
.bdp-parties {
	background: var(--bdp-bg);
	padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 7vw, 112px);
}
.bdp-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--bdp-gutter-r) 0 var(--bdp-gutter);
}
.bdp-parties__slot:not([data-bdp-mounted]) { min-height: 560px; }
.bdp-root .bdp-note {
	max-width: 52ch;
	margin: 0 auto 20px !important;
	text-align: center;
	font: 500 15px/1.5 var(--bdp-sans) !important;
	color: var(--bdp-muted) !important;
}
.bdp-root .bdp-note a,
.bdp-root .bdp-faq__more a {
	color: var(--bdp-accent) !important;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Fallback when Birthday Booking is off */
.bdp-call {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 56px);
	border-radius: 28px;
	background: var(--bdp-card);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--bdp-line);
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
	align-items: center;
}
.bdp-root .bdp-call p { font: 500 16px/1.55 var(--bdp-sans) !important; color: var(--bdp-muted) !important; max-width: 44ch; }
.bdp-call__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 6px; }
.bdp-root .bdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--bdp-ink);
	color: var(--bdp-bg) !important;
	font: 700 15px/1 var(--bdp-sans) !important;
	text-decoration: none !important;
	transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.bdp-root .bdp-btn--ghost { background: transparent; color: var(--bdp-ink) !important; box-shadow: inset 0 0 0 1.5px var(--bdp-line); }
.bdp-root .bdp-btn:active { transform: scale(0.96); }

/* ==========================================================================
   PARTY CLOCK
   ========================================================================== */
.bdp-clock {
	background: var(--bdp-deep);
	color: var(--bdp-cream);
}
.bdp-clock__grid {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--bdp-gutter-r) 0 var(--bdp-gutter);
}
/* Phone: the side wrapper dissolves so the panel sticks for the whole section. */
.bdp-clock__side { display: contents; }
.bdp-clock__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: clamp(56px, 9vw, 120px);
}
.bdp-root .bdp-clock .bdp-eyebrow { color: var(--bdp-gold) !important; }
.bdp-root .bdp-clock .bdp-h2 { font-size: clamp(28px, 2.4vw + 18px, 48px) !important; }

.bdp-clock__panel {
	position: sticky;
	top: var(--bdp-top);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 calc(-1 * var(--bdp-gutter-r)) 0 calc(-1 * var(--bdp-gutter));
	padding: 16px var(--bdp-gutter-r) 16px var(--bdp-gutter);
	background: var(--bdp-deep);
}
.bdp-clock__panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 28px;
	background: linear-gradient(var(--bdp-deep), transparent);
	pointer-events: none;
}

/* The ring */
.bdp-ring {
	--bdp-p: 1;
	--bdp-deg: calc(var(--bdp-p) * 360deg);
	--bdp-ring-w: 9px;
	position: relative;
	flex: none;
	width: 132px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(var(--rf-glow-1) 0deg, var(--rf-glow-2) var(--bdp-deg), rgba(251, 246, 236, 0.14) var(--bdp-deg) 360deg);
	box-shadow: 0 0 48px var(--bdp-glow-soft);
}
.bdp-ring__face {
	position: absolute;
	inset: var(--bdp-ring-w);
	border-radius: 50%;
	background: var(--bdp-deep);
}
.bdp-ring__tick {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2px;
	height: 7%;
	border-radius: 2px;
	background: rgba(251, 246, 236, 0.42);
	transform: translate(-50%, -50%) rotate(calc(var(--bdp-i) * 45deg)) translateY(-490%);
}
.bdp-ring__knob {
	position: absolute;
	inset: 0;
	transform: rotate(var(--bdp-deg));
}
.bdp-ring__knob span {
	position: absolute;
	left: 50%;
	top: calc(var(--bdp-ring-w) / 2);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bdp-cream);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 3px var(--bdp-deep), 0 0 16px 2px rgba(255, 255, 255, 0.75);
}
.bdp-ring__read {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.bdp-ring__time {
	font: 800 34px/1 var(--bdp-sans);
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.bdp-ring__of {
	font: 600 11px/1 var(--bdp-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.72;
}
.bdp-clock__now { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bdp-root .bdp-clock__title {
	font: italic 600 24px/1.05 var(--bdp-serif) !important;
	color: var(--bdp-gold) !important;
	text-wrap: balance;
}
.bdp-root .bdp-clock__you {
	font: 500 13px/1.45 var(--bdp-sans) !important;
	color: var(--bdp-cream-80) !important;
}

/* Steps */
.bdp-steps {
	display: flex;
	flex-direction: column;
	gap: clamp(64px, 10svh, 110px);
	padding: 32px 0 50svh !important;
}
.bdp-step { display: flex; flex-direction: column; gap: 10px; max-width: 34em; }
.bdp-root .bdp-step__time {
	font: 800 12px/1 var(--bdp-sans) !important;
	letter-spacing: 0.2em;
	color: var(--bdp-gold) !important;
}
.bdp-root .bdp-step__title {
	font: 800 clamp(28px, 1.8vw + 20px, 44px)/1.04 var(--bdp-sans) !important;
	letter-spacing: -0.025em;
	color: var(--bdp-cream) !important;
	text-wrap: balance;
}
.bdp-root .bdp-step__body {
	max-width: 40ch;
	font: 500 16px/1.55 var(--bdp-sans) !important;
	color: var(--bdp-cream-80) !important;
	text-wrap: pretty;
}
.bdp-root .bdp-step__you {
	font: italic 600 22px/1.1 var(--bdp-serif) !important;
	color: var(--bdp-gold) !important;
}
/* With JS: the panel carries the "You:" line, steps dim until they're on. */
.bdp-js .bdp-step__you {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.bdp-js .bdp-step { opacity: 0.7; transition: opacity 0.4s ease; }
.bdp-js .bdp-step.is-on { opacity: 1; }

/* Tablet and up: sticky clock on the left, steps on the right */
@media (min-width: 768px) {
	.bdp-clock__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(32px, 5vw, 80px);
		align-items: start;
	}
	.bdp-clock__side {
		display: flex;
		flex-direction: column;
		gap: clamp(24px, 3vw, 40px);
		position: sticky;
		top: var(--bdp-top);
		padding-bottom: 32px;
	}
	.bdp-clock__panel {
		position: static;
		margin: 0;
		padding: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(18px, 2vw, 28px);
	}
	.bdp-clock__panel::after { display: none; }
	.bdp-ring { width: clamp(220px, 26vw, 380px); --bdp-ring-w: clamp(10px, 1.2vw, 16px); }
	.bdp-ring__knob span { width: 20px; height: 20px; }
	.bdp-ring__time { font-size: clamp(48px, 5vw, 84px); }
	.bdp-clock__now { flex: none; max-width: 22em; }
	.bdp-root .bdp-clock__title { font-size: clamp(24px, 2.2vw, 34px) !important; }
	.bdp-steps { padding: 30svh 0 45svh !important; gap: clamp(80px, 14svh, 140px); }
}
/* Short screens (landscape phones, small laptops): keep the sticky clock inside the viewport */
@media (min-width: 768px) and (max-height: 560px) {
	.bdp-clock__side { gap: 14px; }
	.bdp-clock__head { padding-top: 24px; gap: 6px; }
	.bdp-root .bdp-clock .bdp-h2 { font-size: 26px !important; }
	.bdp-clock__panel { flex-direction: row; align-items: center; }
	.bdp-ring { width: 150px; --bdp-ring-w: 9px; }
	.bdp-ring__knob span { width: 16px; height: 16px; }
	.bdp-ring__time { font-size: 38px; }
	.bdp-clock__now { flex: 1 1 140px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.bdp-faq { background: var(--bdp-bg); color: var(--bdp-ink); }
.bdp-faq__wrap {
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(56px, 9vw, 120px) var(--bdp-gutter-r) clamp(56px, 9vw, 120px) var(--bdp-gutter);
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.bdp-root .bdp-faq .bdp-serif { color: var(--bdp-accent) !important; }
.bdp-faq__item { border-top: 1px solid var(--bdp-line); }
.bdp-faq__item:last-child { border-bottom: 1px solid var(--bdp-line); }
.bdp-root .bdp-faq__h { font: inherit !important; }
.bdp-root .bdp-faq__q {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	cursor: pointer;
	font: 700 clamp(16px, 0.5vw + 14px, 20px)/1.3 var(--bdp-sans) !important;
	color: var(--bdp-ink) !important;
	-webkit-tap-highlight-color: transparent;
}
.bdp-root .bdp-faq__q:focus-visible { outline: 3px solid var(--bdp-accent); outline-offset: 2px; }
.bdp-faq__icon {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--bdp-line);
	transition: transform 0.3s ease;
}
.bdp-faq__icon::before,
.bdp-faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.bdp-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bdp-faq__q[aria-expanded="true"] .bdp-faq__icon { transform: rotate(45deg); }
.bdp-faq__a { padding: 0 0 22px; }
.bdp-faq__a[hidden] { display: none; }
.bdp-root .bdp-faq__a p {
	max-width: 60ch;
	font: 500 16px/1.6 var(--bdp-sans) !important;
	color: var(--bdp-muted) !important;
}
.bdp-root .bdp-faq__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 2px;
	color: var(--bdp-accent) !important;
	font: 700 15px/1 var(--bdp-sans) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.bdp-root .bdp-faq__more a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.bdp-root .bdp-faq__more {
	font: 500 15px/1.6 var(--bdp-sans) !important;
	color: var(--bdp-muted) !important;
}

/* ==========================================================================
   CLOSER
   ========================================================================== */
.bdp-closer {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(520px, 72svh, 760px);
	overflow: hidden;
	background: var(--bdp-deep);
	color: var(--bdp-cream);
	text-align: center;
}
.bdp-closer__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.bdp-closer__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 80% at 50% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55)),
		color-mix(in srgb, var(--bdp-deep) 72%, transparent);
}
.bdp-closer__inner {
	width: 100%;
	max-width: 1000px;
	padding: 72px var(--bdp-gutter-r) calc(64px + env(safe-area-inset-bottom, 0px)) var(--bdp-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.bdp-root .bdp-closer__h {
	max-width: 14ch;
	font: 800 clamp(36px, 5vw + 16px, 84px)/0.95 var(--bdp-sans) !important;
	letter-spacing: -0.035em;
	color: var(--bdp-cream) !important;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.bdp-root .bdp-closer .bdp-btn { padding: 2px; background: none; }
.bdp-btn__in {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 30px;
	border-radius: 999px;
	background: var(--bdp-cream);
	color: #191411;
}
.bdp-root .bdp-closer__call {
	font: 500 14px/1.5 var(--bdp-sans) !important;
	color: var(--bdp-cream-80) !important;
}
.bdp-root .bdp-closer__call a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	color: var(--bdp-cream) !important;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Wide screens
   ========================================================================== */
@media (min-width: 768px) {
	.bdp-hero { min-height: min(88svh, 900px); }
	.bdp-hero__inner { padding-bottom: clamp(40px, 5vw, 72px); gap: clamp(16px, 1.6vw, 22px); }
	.bdp-root .bdp-pill { flex: 0 1 260px; }
}

/* Landscape phones: let the hero grow to its content */
@media (max-height: 500px) and (orientation: landscape) {
	.bdp-hero { min-height: 100svh; }
	.bdp-root .bdp-h1 { font-size: clamp(40px, 6vw, 64px) !important; max-width: 16ch; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.bdp-root .bdp-glow__ring { animation: none; }
	.bdp-root .bdp-pill,
	.bdp-root .bdp-btn,
	.bdp-faq__icon,
	.bdp-js .bdp-step { transition: none; }
	.bdp-root .bdp-pill:active,
	.bdp-root .bdp-btn:active { transform: none; }
	.bdp-pill__in::after { transition: none; }
}