/* =====================================================================
   Buffalo Diamond Co. — theme.css
   "Forged, not generic-luxury." Black/white foundation from the existing
   logo + one icy-blue accent. Diamond-as-ice/light, never gold-bling.
   Mobile-first. The accent is used sparingly and on purpose.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
	/* Core palette (do not add new brand colors) */
	--bd-black:      #0B0D10;  /* primary background, from existing brand */
	--bd-white:      #F7F8FA;  /* primary text on dark, from existing logo */
	--bd-grey:       #9CA3AC;  /* secondary text, borders, muted UI */
	--bd-ice:        #7FD8E8;  /* the one new accent — icy blue */
	--bd-ice-deep:   #5FC9E0;  /* cooler accent variant for hovers/contrast */

	/* Derived surfaces (tints of black/white only — not new hues) */
	--bd-panel:      #12151A;  /* raised card / section surface */
	--bd-panel-2:    #171B21;  /* second-level surface */
	--bd-line:       rgba(247, 248, 250, 0.10);  /* hairline borders */
	--bd-line-strong:rgba(247, 248, 250, 0.18);
	--bd-ice-soft:   rgba(127, 216, 232, 0.14);  /* accent wash */
	--bd-ice-glow:   rgba(127, 216, 232, 0.30);

	/* Type */
	--bd-font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--bd-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Fluid type scale */
	--bd-step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
	--bd-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--bd-step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
	--bd-step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
	--bd-step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 2.7rem);
	--bd-step-4:  clamp(2.3rem, 1.7rem + 3vw, 4rem);
	--bd-step-5:  clamp(2.8rem, 1.9rem + 4.5vw, 5.25rem);

	/* Spacing */
	--bd-gap:    1.5rem;
	--bd-pad-x:  clamp(1.15rem, 5vw, 2rem);
	--bd-section:clamp(3.75rem, 8vw, 7rem);
	--bd-radius: 14px;
	--bd-radius-lg: 22px;
	--bd-maxw:   1180px;

	/* Motion */
	--bd-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
	--bd-fast:   140ms;
	--bd-med:    260ms;

	/* Effects */
	--bd-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.85);
	--bd-shadow-ice: 0 0 0 1px var(--bd-ice-glow), 0 18px 48px -20px rgba(95, 201, 224, 0.35);
}

/* ---------------------------------------------------------------------
   2. Reset + base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px; /* sticky header offset for anchor jumps */
}

body {
	margin: 0;
	background-color: var(--bd-black);
	color: var(--bd-white);
	font-family: var(--bd-font-body);
	font-size: var(--bd-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Subtle faceted "ice" backdrop — refracted light, never literal. Lives behind
   everything, low-contrast, motion-free so it never competes with photos. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60% 50% at 78% -5%, rgba(127, 216, 232, 0.10), transparent 60%),
		radial-gradient(45% 40% at 10% 8%, rgba(127, 216, 232, 0.06), transparent 60%),
		var(--bd-black);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

a, a:visited { color: var(--bd-ice); text-decoration: none; transition: color var(--bd-fast) var(--bd-ease); }
a:hover, a:visited:hover { color: var(--bd-ice-deep); }

h1, h2, h3, h4 {
	font-family: var(--bd-font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	color: var(--bd-white);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
/* Defensive: LatePoint's plugin CSS ships `[class*="latepoint"] li { list-style: revert; }`,
   which outranks the plain rule above and brings bullets back sitewide (nav, footer, mobile
   drawer). Force our own chrome to stay bullet-free regardless of plugin load order. */
.bd-nav__list, .bd-nav__list li,
.bd-mobile-nav__list, .bd-mobile-nav__list li,
.bd-footer__menu, .bd-footer__menu li,
.bd-footer__contact, .bd-footer__contact li,
.bd-footer__legal, .bd-footer__legal li,
.bd-service-cards, .bd-includes, .bd-includes li,
.bd-checklist, .bd-checklist li,
.bd-pillars, .bd-pillars li,
.bd-trust, .bd-trust li,
.bd-club-perks, .bd-club-perks li {
	list-style: none !important;
}

strong { color: var(--bd-white); font-weight: 600; }

::selection { background: var(--bd-ice); color: var(--bd-black); }

:focus-visible {
	outline: 2px solid var(--bd-ice);
	outline-offset: 3px;
	border-radius: 4px;
}

hr { border: 0; height: 1px; background: var(--bd-line); margin: 2.5rem 0; }

/* ---------------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------------- */
.bd-container {
	width: 100%;
	max-width: var(--bd-maxw);
	margin-inline: auto;
	padding-inline: var(--bd-pad-x);
}

.bd-section { padding-block: var(--bd-section); }
.bd-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bd-section--panel { background: var(--bd-panel); border-block: 1px solid var(--bd-line); }

.bd-main { display: block; }


/* Accessibility helpers */
.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;
}
.bd-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--bd-ice); color: var(--bd-black);
	padding: 0.75rem 1.25rem; font-weight: 600; border-radius: 0 0 8px 0;
}
.bd-skip-link:focus { left: 0; }

/* A small flag style for placeholder markers visible to the owners */
.bd-flag {
	display: inline-block;
	font-size: 0.7em; font-weight: 600;
	color: var(--bd-ice-deep);
	background: var(--bd-ice-soft);
	border: 1px dashed var(--bd-ice-glow);
	padding: 0.05em 0.45em; border-radius: 6px;
	letter-spacing: 0.02em; vertical-align: middle;
}

/* ---------------------------------------------------------------------
   4. Diamond motif
   --------------------------------------------------------------------- */
.bd-diamond { display: inline-block; color: var(--bd-ice); flex: none; }

.bd-eyebrow {
	display: inline-flex; align-items: center; gap: 0.55rem;
	font-family: var(--bd-font-display);
	font-size: var(--bd-step--1);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bd-ice);
	margin: 0 0 1rem;
}
.bd-eyebrow__icon { color: var(--bd-ice); }

/* ---------------------------------------------------------------------
   5. Section heading
   --------------------------------------------------------------------- */
.bd-section-heading { max-width: 60ch; }
.bd-section-heading--center { margin-inline: auto; text-align: center; }
.bd-section-heading--center .bd-eyebrow { justify-content: center; }
.bd-section-heading__title { font-size: var(--bd-step-3); }
.bd-section-heading__intro {
	color: var(--bd-grey);
	font-size: var(--bd-step-1);
	margin-top: 0.75rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------
   6. Buttons
   --------------------------------------------------------------------- */
.bd-btn, .bd-book-trigger > a, .bd-book-trigger .latepoint-book-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-family: var(--bd-font-display);
	font-size: 0.98rem; font-weight: 600; letter-spacing: 0.01em;
	line-height: 1;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: transform var(--bd-fast) var(--bd-ease),
				background-color var(--bd-fast) var(--bd-ease),
				border-color var(--bd-fast) var(--bd-ease),
				color var(--bd-fast) var(--bd-ease),
				box-shadow var(--bd-med) var(--bd-ease);
	white-space: nowrap;
}
.bd-btn:active { transform: translateY(1px); }

.bd-btn--primary, .bd-btn--primary:visited {
	background: var(--bd-ice);
	color: var(--bd-black);
	border-color: var(--bd-ice);
}
.bd-btn--primary:hover, .bd-btn--primary:visited:hover {
	background: var(--bd-ice-deep);
	border-color: var(--bd-ice-deep);
	color: var(--bd-black);
	box-shadow: 0 12px 34px -12px var(--bd-ice-glow);
}

.bd-btn--ghost, .bd-btn--ghost:visited {
	background: transparent;
	color: var(--bd-white);
	border-color: var(--bd-line-strong);
}
.bd-btn--ghost:hover, .bd-btn--ghost:visited:hover {
	border-color: var(--bd-ice);
	color: var(--bd-ice);
}

/* The "block" variant is always a full-width primary CTA (mobile nav, footer). */
.bd-btn--block, .bd-btn--block:visited {
	width: 100%;
	background: var(--bd-ice);
	color: var(--bd-black);
	border-color: var(--bd-ice);
}
.bd-btn--block:hover, .bd-btn--block:visited:hover {
	background: var(--bd-ice-deep);
	border-color: var(--bd-ice-deep);
	color: var(--bd-black);
	box-shadow: 0 12px 34px -12px var(--bd-ice-glow);
}

/* The book-trigger wrapper keeps layout consistent whether LatePoint renders
   its own button (skinned via latepoint-overrides.css) or we fall back to a
   styled link. The wrapper itself paints nothing — it only handles flow/width. */
.bd-book-trigger { display: inline-flex; }
.bd-book-trigger--block { display: flex; width: 100%; }

/* When LatePoint is ACTIVE, bd_book_button() renders LatePoint's own <a> inside
   the wrapper instead of our .bd-btn fallback — so the .bd-btn--primary/--ghost
   color rules never apply to it. Style the wrapped anchor directly, per variant.
   !important beats LatePoint's inline shortcode colors and the scoped reverts in
   latepoint-overrides.css, keeping both render paths visually identical. */
.bd-book-trigger a, .bd-book-trigger a:visited {
	font-family: var(--bd-font-display) !important;
	text-decoration: none !important;
}
.bd-book-trigger--primary a, .bd-book-trigger--primary a:visited,
.bd-book-trigger--block a, .bd-book-trigger--block a:visited {
	background: var(--bd-ice) !important;
	color: var(--bd-black) !important;
	border-color: var(--bd-ice) !important;
}
.bd-book-trigger--primary a:hover, .bd-book-trigger--block a:hover {
	background: var(--bd-ice-deep) !important;
	border-color: var(--bd-ice-deep) !important;
	color: var(--bd-black) !important;
}
.bd-book-trigger--ghost a, .bd-book-trigger--ghost a:visited {
	background: transparent !important;
	color: var(--bd-white) !important;
	border-color: var(--bd-line-strong) !important;
}
.bd-book-trigger--ghost a:hover {
	border-color: var(--bd-ice) !important;
	color: var(--bd-ice) !important;
}

/* ---------------------------------------------------------------------
   7. Header / nav
   --------------------------------------------------------------------- */
.bd-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(11, 13, 16, 0.72);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--bd-line);
	transition: background var(--bd-med) var(--bd-ease), border-color var(--bd-med) var(--bd-ease);
}
.bd-header.is-scrolled {
	background: rgba(11, 13, 16, 0.92);
	border-bottom-color: var(--bd-line-strong);
}
.bd-header__inner {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: 76px;
}
.bd-header__brand { margin-right: auto; display: flex; align-items: center; }
.bd-header__brand img,
.bd-header__brand .custom-logo-link img { max-height: 48px; width: auto; }

.bd-logo-text { display: inline-flex; flex-direction: column; line-height: 1; }
.bd-logo-text__name {
	font-family: var(--bd-font-display);
	font-weight: 700; font-size: 1.18rem; letter-spacing: 0.01em;
	color: var(--bd-white); text-transform: uppercase;
}
.bd-logo-text__tag {
	font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--bd-ice); margin-top: 0.35rem;
}

.bd-nav { display: none; }
.bd-nav__list { display: flex; align-items: center; gap: 0.35rem; }
.bd-nav__item > a, .bd-nav a, .bd-nav__item > a:visited, .bd-nav a:visited {
	display: inline-block;
	font-family: var(--bd-font-display);
	font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em;
	color: var(--bd-grey);
	padding: 0.55rem 0.9rem; border-radius: 8px;
	transition: color var(--bd-fast) var(--bd-ease), background var(--bd-fast) var(--bd-ease);
}
.bd-nav a:hover, .bd-nav .current-menu-item > a, .bd-nav .current_page_item > a {
	color: var(--bd-white);
	background: rgba(247, 248, 250, 0.05);
}
.bd-nav .current-menu-item > a, .bd-nav .current_page_item > a { color: var(--bd-ice); }

.bd-header__cta { display: none; }

/* Mobile menu toggle */
.bd-nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	margin-left: auto;
	background: transparent; border: 1px solid var(--bd-line-strong);
	border-radius: 10px; cursor: pointer;
	transition: border-color var(--bd-fast) var(--bd-ease);
}
.bd-nav-toggle:hover { border-color: var(--bd-ice); }
.bd-nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.bd-nav-toggle__bars span {
	height: 2px; width: 100%; background: var(--bd-white); border-radius: 2px;
	transform-origin: center;
	transition: transform var(--bd-med) var(--bd-ease), opacity var(--bd-fast) var(--bd-ease),
		background var(--bd-fast) var(--bd-ease);
}
/* Hamburger → X: outer bars converge + cross, middle bar collapses. */
.bd-nav-toggle[aria-expanded="true"] { border-color: var(--bd-ice); }
.bd-nav-toggle[aria-expanded="true"] .bd-nav-toggle__bars span { background: var(--bd-ice); }
.bd-nav-toggle[aria-expanded="true"] .bd-nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bd-nav-toggle[aria-expanded="true"] .bd-nav-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(0.1); }
.bd-nav-toggle[aria-expanded="true"] .bd-nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer — a smooth slide/fade overlay anchored under the header bar,
   with the links + CTA revealing in a quick stagger. Driven by .is-open (theme.js). */
.bd-mobile-nav {
	position: absolute; left: 0; right: 0; top: 100%;
	border-bottom: 1px solid var(--bd-line);
	background: rgba(11, 13, 16, 0.98);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 26px 44px -22px rgba(0, 0, 0, 0.75);
	max-height: calc(100vh - 54px); overflow-y: auto;
	opacity: 0; visibility: hidden; transform: translateY(-14px);
	transition: opacity var(--bd-med) var(--bd-ease), transform var(--bd-med) var(--bd-ease),
		visibility 0s linear var(--bd-med);
}
.bd-mobile-nav.is-open {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity var(--bd-med) var(--bd-ease), transform var(--bd-med) var(--bd-ease), visibility 0s;
}
.bd-mobile-nav .bd-container { padding-block: 0.75rem 1.5rem; }
.bd-mobile-nav__list { display: grid; }
.bd-mobile-nav__list a, .bd-mobile-nav__list a:visited {
	display: block;
	font-family: var(--bd-font-display); font-size: 1.1rem; font-weight: 500;
	color: var(--bd-white);
	padding: 0.95rem 0.25rem;
	border-bottom: 1px solid var(--bd-line);
	opacity: 0; transform: translateY(10px);
	transition: color var(--bd-fast) var(--bd-ease), opacity var(--bd-med) var(--bd-ease),
		transform var(--bd-med) var(--bd-ease);
}
.bd-mobile-nav__list a:hover, .bd-mobile-nav__list a:visited:hover { color: var(--bd-ice); }
.bd-mobile-nav__cta {
	margin-top: 1.25rem; opacity: 0; transform: translateY(10px);
	transition: opacity var(--bd-med) var(--bd-ease), transform var(--bd-med) var(--bd-ease);
}
/* staggered reveal — delays apply only while opening */
.bd-mobile-nav.is-open .bd-mobile-nav__list a,
.bd-mobile-nav.is-open .bd-mobile-nav__cta { opacity: 1; transform: none; }
.bd-mobile-nav.is-open .bd-mobile-nav__list li:nth-child(1) a { transition-delay: 0.05s; }
.bd-mobile-nav.is-open .bd-mobile-nav__list li:nth-child(2) a { transition-delay: 0.10s; }
.bd-mobile-nav.is-open .bd-mobile-nav__list li:nth-child(3) a { transition-delay: 0.15s; }
.bd-mobile-nav.is-open .bd-mobile-nav__list li:nth-child(4) a { transition-delay: 0.20s; }
.bd-mobile-nav.is-open .bd-mobile-nav__list li:nth-child(5) a { transition-delay: 0.25s; }
.bd-mobile-nav.is-open .bd-mobile-nav__cta { transition-delay: 0.30s; }

@media (min-width: 980px) {
	.bd-nav { display: block; }
	.bd-header__cta { display: block; }
	.bd-nav-toggle { display: none; }
	.bd-mobile-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-mobile-nav, .bd-mobile-nav__list a, .bd-mobile-nav__cta { transition-duration: 0.01ms; }
	.bd-mobile-nav.is-open .bd-mobile-nav__list a,
	.bd-mobile-nav.is-open .bd-mobile-nav__cta { transition-delay: 0s; }
}

/* ---------------------------------------------------------------------
   8. Hero
   --------------------------------------------------------------------- */
.bd-hero {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
	overflow: hidden;
}
.bd-hero__eyebrow { margin-bottom: 1.25rem; }
.bd-hero__title {
	font-size: var(--bd-step-5);
	letter-spacing: -0.03em;
	margin: 0 0 1.1rem;
}
.bd-hero__title .bd-ice-word { color: var(--bd-ice); }
.bd-hero__lede {
	font-size: var(--bd-step-1);
	color: var(--bd-grey);
	max-width: 42ch;
	margin-bottom: 2rem;
}
.bd-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.bd-hero__meta {
	display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bd-line);
}
.bd-hero__stat { display: grid; gap: 0.15rem; }
.bd-hero__stat-num {
	font-family: var(--bd-font-display); font-weight: 700;
	font-size: 1.5rem; color: var(--bd-white);
}
.bd-hero__stat-label {
	font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--bd-grey);
}


/* ---------------------------------------------------------------------
   9. Pillars (Polish. Protect. Perfect.)
   --------------------------------------------------------------------- */
.bd-pillars {
	display: grid; gap: var(--bd-gap);
	margin-top: 2.5rem;
}
@media (min-width: 760px) { .bd-pillars { grid-template-columns: repeat(3, 1fr); } }
.bd-pillar {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 2rem 1.75rem 1.85rem;
	border-radius: var(--bd-radius);
	/* Frosted glass so the pinned scene glows through */
	background: linear-gradient(160deg, rgba(19,23,28,0.72), rgba(11,13,16,0.82));
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid var(--bd-line);
	transition: transform 0.4s var(--bd-ease), box-shadow 0.4s var(--bd-ease), border-color 0.4s var(--bd-ease);
}
/* Rotating conic-gradient ring that lives just inside the border */
.bd-pillar::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
	padding: 1px; opacity: 0; transition: opacity 0.4s var(--bd-ease);
	background: conic-gradient(from var(--bd-spin, 0deg), transparent 0deg, var(--bd-ice) 70deg, transparent 150deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: bd-pillar-spin 5s linear infinite;
}
/* Cursor-follow spotlight (JS sets --mx/--my as % within the card) */
.bd-pillar::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	opacity: 0; transition: opacity 0.4s var(--bd-ease);
	background: radial-gradient(240px circle at var(--bd-mx, 50%) var(--bd-my, 0%), rgba(127,216,232,0.14), transparent 60%);
}
@keyframes bd-pillar-spin { to { --bd-spin: 360deg; } }
/* @property lets the conic angle actually animate; harmless if unsupported */
@property --bd-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bd-pillar:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: 0 26px 60px -22px rgba(0,0,0,0.8), 0 0 34px -10px rgba(127,216,232,0.35);
}
.bd-pillar:hover::before, .bd-pillar:hover::after { opacity: 1; }
/* Giant ghost step number */
.bd-pillar__num {
	position: absolute; top: -0.5rem; right: 0.4rem; z-index: -1;
	font-family: var(--bd-font-display); font-weight: 700; font-size: 5.5rem;
	line-height: 1; color: transparent;
	-webkit-text-stroke: 1px rgba(127,216,232,0.16); letter-spacing: -0.04em;
	transition: -webkit-text-stroke-color 0.4s var(--bd-ease), transform 0.5s var(--bd-ease);
}
.bd-pillar:hover .bd-pillar__num { -webkit-text-stroke-color: rgba(127,216,232,0.4); transform: translateY(-3px) scale(1.04); }
.bd-pillar__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 14px;
	background: rgba(127,216,232,0.10); color: var(--bd-ice);
	border: 1px solid rgba(127,216,232,0.28);
	margin-bottom: 1.15rem;
	animation: bd-pillar-float 4s var(--bd-ease) infinite;
	animation-delay: calc(var(--bd-i, 1) * -0.6s);
	transition: transform 0.4s var(--bd-ease), box-shadow 0.4s var(--bd-ease), background 0.4s var(--bd-ease);
}
@keyframes bd-pillar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bd-pillar:hover .bd-pillar__icon {
	transform: rotate(-10deg) scale(1.1); background: rgba(127,216,232,0.18);
	box-shadow: 0 0 22px -4px rgba(127,216,232,0.65);
}
.bd-pillar__name {
	font-size: var(--bd-step-1); margin-bottom: 0.5rem; position: relative; display: inline-block;
}
/* Animated underline sweep under the word on hover */
.bd-pillar__name::after {
	content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
	background: linear-gradient(90deg, var(--bd-ice), transparent);
	transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--bd-ease);
}
.bd-pillar:hover .bd-pillar__name::after { transform: scaleX(1); }
.bd-pillar__copy { color: var(--bd-grey); margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.bd-pillar::before, .bd-pillar__icon { animation: none; }
	.bd-pillar, .bd-pillar__icon, .bd-pillar__num, .bd-pillar__name::after { transition: none; }
}

/* ---------------------------------------------------------------------
   10. Cards (generic) + Service cards
   --------------------------------------------------------------------- */
.bd-card {
	position: relative; isolation: isolate;
	background: var(--bd-panel);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	padding: 2rem;
	transition: border-color var(--bd-med) var(--bd-ease), transform var(--bd-med) var(--bd-ease), box-shadow var(--bd-med) var(--bd-ease);
}
/* NB: no overflow:hidden here — the "Most Popular" badge sits above the card
   (top:-13px) and must not be clipped. The spotlight ::after rounds itself. */
.bd-card::after { /* cursor spotlight */
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	opacity: 0; transition: opacity 0.4s var(--bd-ease);
	background: radial-gradient(280px circle at var(--bd-mx, 50%) var(--bd-my, 0%), rgba(127,216,232,0.12), transparent 60%);
}
.bd-card:hover {
	border-color: rgba(127,216,232,0.4); transform: translateY(-6px);
	box-shadow: 0 26px 58px -24px rgba(0,0,0,0.78), 0 0 30px -12px rgba(127,216,232,0.32);
}
.bd-card:hover::after { opacity: 1; }

.bd-service-cards {
	display: grid; gap: var(--bd-gap);
	align-items: stretch;
}
@media (min-width: 880px) { .bd-service-cards { grid-template-columns: repeat(3, 1fr); } }

.bd-service-card { display: flex; flex-direction: column; }
.bd-service-card--popular {
	border-color: var(--bd-ice);
	box-shadow: var(--bd-shadow-ice);
}
.bd-service-card--popular:hover { border-color: var(--bd-ice); transform: translateY(-6px); }

.bd-badge {
	position: absolute; top: -13px; left: 2rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: var(--bd-ice); color: var(--bd-black);
	font-family: var(--bd-font-display);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 0.4rem 0.8rem; border-radius: 999px;
}
.bd-badge .bd-diamond { color: var(--bd-black); }

.bd-service-card__head { margin-bottom: 1.25rem; }
.bd-service-card__name { font-size: var(--bd-step-2); margin-bottom: 0.4rem; }
.bd-service-card__tag {
	font-family: var(--bd-font-display); font-weight: 600;
	font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--bd-ice); margin: 0 0 0.75rem;
}
.bd-service-card__blurb { color: var(--bd-grey); margin-bottom: 1rem; }
.bd-service-card__price {
	font-family: var(--bd-font-display); font-weight: 700;
	font-size: 1.6rem; color: var(--bd-white);
}
.bd-service-card__price span { font-size: 0.9rem; font-weight: 500; color: var(--bd-grey); }
.bd-service-card__price--tbd { color: var(--bd-grey); font-size: 1.1rem; }

/* Per-vehicle price table (Sedan / SUV-Truck / 3-Row SUV) */
.bd-price-table {
	display: grid; gap: 0.35rem;
	margin: 0.25rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--bd-line);
}
.bd-price-table li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
}
.bd-price-table__label { color: var(--bd-grey); font-size: 0.92rem; }
.bd-price-table__val {
	font-family: var(--bd-font-display); font-weight: 600;
	font-size: 1.12rem; color: var(--bd-white);
	font-variant-numeric: tabular-nums;
}
.bd-service-card--popular .bd-price-table__val { color: var(--bd-ice); }

/* Inline price line for the tier deep-dive sections */
.bd-price-inline {
	display: inline-flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
	margin: 1.25rem 0 0; padding: 0.85rem 1.1rem;
	background: var(--bd-panel); border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius); font-size: 0.95rem; color: var(--bd-grey);
}
.bd-price-inline span { white-space: nowrap; }
.bd-price-inline strong { color: var(--bd-white); font-family: var(--bd-font-display); }

.bd-includes { display: grid; gap: 0.7rem; margin-bottom: 1.75rem; flex: 1; }
.bd-includes__item { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--bd-white); }
.bd-includes__bullet { margin-top: 0.18rem; color: var(--bd-ice); }
.bd-service-card__foot { margin-top: auto; }
.bd-service-card__foot .bd-btn,
.bd-service-card__foot .bd-book-trigger { width: 100%; }

/* ---------------------------------------------------------------------
   11. Feature / split rows
   --------------------------------------------------------------------- */
.bd-split {
	display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
@media (min-width: 900px) {
	.bd-split { grid-template-columns: repeat(2, 1fr); }
	.bd-split--reverse .bd-split__media { order: 2; }
}
.bd-split__body p { color: var(--bd-grey); }
.bd-split__body .bd-section-heading { margin-bottom: 1.25rem; }

.bd-checklist { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.bd-checklist li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--bd-white); }
.bd-checklist .bd-diamond { margin-top: 0.2rem; color: var(--bd-ice); }

/* ---------------------------------------------------------------------
   12. Photos / gallery
   --------------------------------------------------------------------- */
.bd-photo {
	margin: 0; border-radius: var(--bd-radius-lg); overflow: hidden;
	background: var(--bd-panel-2);
	border: 1px solid var(--bd-line);
	position: relative;
}
.bd-photo--4x3 { aspect-ratio: 4 / 3; }
.bd-photo--1x1 { aspect-ratio: 1 / 1; }
.bd-photo--16x9 { aspect-ratio: 16 / 9; }
.bd-photo--3x4 { aspect-ratio: 3 / 4; }
.bd-photo__img { width: 100%; height: 100%; object-fit: cover; }

.bd-photo__placeholder {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.6rem; text-align: center; padding: 1rem;
	background:
		repeating-linear-gradient(135deg, rgba(127,216,232,0.04) 0 12px, transparent 12px 24px),
		var(--bd-panel-2);
	color: var(--bd-grey);
}
.bd-photo__placeholder-icon { color: var(--bd-ice); opacity: 0.7; }
.bd-photo__placeholder-label { font-family: var(--bd-font-display); font-weight: 600; color: var(--bd-white); }
.bd-photo__placeholder-note { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bd-grey); }

/* ---------------------------------------------------------------------
   13. Testimonials
   --------------------------------------------------------------------- */
.bd-testimonials { display: grid; gap: var(--bd-gap); }
@media (min-width: 760px) { .bd-testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bd-testimonials { grid-template-columns: repeat(3, 1fr); } }

.bd-testimonial {
	background: var(--bd-panel); border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius); padding: 1.75rem;
	display: flex; flex-direction: column; gap: 1rem;
}
.bd-testimonial__quote { font-size: 1.05rem; color: var(--bd-white); margin: 0; }
.bd-testimonial__who { margin-top: auto; display: flex; align-items: center; gap: 0.6rem; color: var(--bd-grey); font-size: 0.9rem; }
.bd-testimonial__who strong { color: var(--bd-white); }

/* ---------------------------------------------------------------------
   14. FAQ accordion
   --------------------------------------------------------------------- */
.bd-faq { display: grid; gap: 0.75rem; max-width: 820px; }
.bd-faq__item {
	position: relative; isolation: isolate;
	background: var(--bd-panel);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	overflow: hidden;
	transition: border-color var(--bd-fast) var(--bd-ease), box-shadow var(--bd-med) var(--bd-ease), transform var(--bd-fast) var(--bd-ease);
}
.bd-faq__item::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	opacity: 0; transition: opacity 0.4s var(--bd-ease);
	background: radial-gradient(260px circle at var(--bd-mx, 50%) var(--bd-my, 0%), rgba(127,216,232,0.09), transparent 60%);
}
.bd-faq__item:hover { border-color: rgba(127,216,232,0.32); box-shadow: 0 14px 30px -18px rgba(0,0,0,0.6); }
.bd-faq__item:hover::after { opacity: 1; }
.bd-faq__item[open] { border-color: var(--bd-ice-glow); box-shadow: 0 0 26px -12px rgba(127,216,232,0.4); }
.bd-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem 1.35rem; cursor: pointer; list-style: none;
	font-family: var(--bd-font-display); font-weight: 600; font-size: 1.05rem;
	color: var(--bd-white);
}
.bd-faq__q::-webkit-details-marker { display: none; }
.bd-faq__marker { position: relative; width: 16px; height: 16px; flex: none; }
.bd-faq__marker::before, .bd-faq__marker::after {
	content: ""; position: absolute; background: var(--bd-ice);
	border-radius: 2px; transition: transform var(--bd-med) var(--bd-ease), opacity var(--bd-fast) var(--bd-ease);
}
.bd-faq__marker::before { top: 7px; left: 0; width: 16px; height: 2px; }
.bd-faq__marker::after  { top: 0; left: 7px; width: 2px; height: 16px; }
.bd-faq__item[open] .bd-faq__marker::after { transform: scaleY(0); opacity: 0; }
.bd-faq__a { padding: 0 1.35rem 1.35rem; color: var(--bd-grey); }
.bd-faq__a p { margin: 0; }

/* ---------------------------------------------------------------------
   15. CTA band
   --------------------------------------------------------------------- */
.bd-cta-band {
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(127, 216, 232, 0.16), transparent 55%),
		var(--bd-panel);
	border-block: 1px solid var(--bd-line);
}
.bd-cta-band__inner {
	display: grid; gap: 2rem; align-items: center;
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
@media (min-width: 860px) { .bd-cta-band__inner { grid-template-columns: 1.3fr 0.7fr; } }
.bd-cta-band__mark { color: var(--bd-ice); margin-bottom: 1rem; }
.bd-cta-band__title { font-size: var(--bd-step-3); margin-bottom: 0.6rem; }
.bd-cta-band__copy { color: var(--bd-grey); font-size: var(--bd-step-1); margin: 0; max-width: 46ch; }
.bd-cta-band__action { display: grid; gap: 0.85rem; justify-items: start; }
@media (min-width: 860px) { .bd-cta-band__action { justify-items: end; text-align: right; } }
.bd-cta-band__note { font-size: 0.85rem; color: var(--bd-grey); margin: 0; }

/* ---------------------------------------------------------------------
   16. Page header (interior pages)
   --------------------------------------------------------------------- */
.bd-page-header {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--bd-line);
	position: relative;
}
.bd-page-header__inner { max-width: 60ch; }
.bd-page-header__title { font-size: var(--bd-step-4); margin-bottom: 0.6rem; }
.bd-page-header__lede { font-size: var(--bd-step-1); color: var(--bd-grey); margin: 0; }

/* Static (non-parallax) cover image behind an interior page header — a simple
   hero. The image scrolls away normally; the pinned-parallax scene begins in a
   later section. */
.bd-page-header--media { overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem); }
.bd-page-header--media > .bd-container { position: relative; z-index: 1; }
.bd-page-header__bg { position: absolute; inset: 0; z-index: 0; }
.bd-page-header__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* Static (non-parallax) looping video background — scrolls away with the section. */
.bd-page-header__bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bd-page-header__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,16,0.6) 0%, rgba(11,13,16,0.48) 42%, rgba(11,13,16,0.74) 100%); }
.bd-page-header--media .bd-page-header__lede { color: rgba(247, 248, 250, 0.9); }

/* ---------------------------------------------------------------------
   17. Prose (page.php / privacy / cancellation / the_content)
   --------------------------------------------------------------------- */
.bd-prose { max-width: 760px; }
.bd-prose > * + * { margin-top: 1.25rem; }
.bd-prose h2 { font-size: var(--bd-step-2); margin-top: 2.5rem; }
.bd-prose h3 { font-size: var(--bd-step-1); margin-top: 2rem; }
.bd-prose p, .bd-prose li { color: var(--bd-grey); }
.bd-prose strong { color: var(--bd-white); }
.bd-prose ul, .bd-prose ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.bd-prose ul li { list-style: disc; }
.bd-prose ol li { list-style: decimal; }
.bd-prose a { text-decoration: underline; text-underline-offset: 3px; }
.bd-prose blockquote {
	border-left: 2px solid var(--bd-ice);
	padding-left: 1.25rem; color: var(--bd-white); font-style: italic;
}
.bd-prose code {
	background: var(--bd-panel-2); padding: 0.15em 0.4em; border-radius: 5px;
	font-size: 0.9em; color: var(--bd-ice);
}

/* ---------------------------------------------------------------------
   18. Booking section + LatePoint fallback
   --------------------------------------------------------------------- */
.bd-booking { background: var(--bd-panel); border-block: 1px solid var(--bd-line); }
.bd-booking__frame {
	background: var(--bd-panel-2);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-top: 2rem;
}
.bd-booking-fallback {
	text-align: center; padding: 2.5rem 1.5rem;
	border: 1px dashed var(--bd-ice-glow); border-radius: var(--bd-radius);
	background: var(--bd-ice-soft);
}
.bd-booking-fallback__title { font-family: var(--bd-font-display); font-weight: 600; color: var(--bd-white); font-size: 1.2rem; }
.bd-booking-fallback p { color: var(--bd-grey); max-width: 48ch; margin-inline: auto; }
.bd-booking-fallback .bd-btn { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------
   19. Contact details grid
   --------------------------------------------------------------------- */
.bd-contact-cards { display: grid; gap: var(--bd-gap); }
@media (min-width: 760px) { .bd-contact-cards { grid-template-columns: repeat(3, 1fr); } }
.bd-contact-card {
	background: var(--bd-panel); border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius); padding: 1.5rem;
}
.bd-contact-card h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.bd-contact-card p, .bd-contact-card a { color: var(--bd-grey); margin: 0; }
.bd-contact-card a:hover { color: var(--bd-ice); }
.bd-contact-card__icon {
	display: inline-flex; width: 40px; height: 40px; border-radius: 10px;
	align-items: center; justify-content: center;
	background: var(--bd-ice-soft); color: var(--bd-ice); margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------------
   20. Founders / about
   --------------------------------------------------------------------- */
.bd-founders { display: grid; gap: var(--bd-gap); margin-top: 2.5rem; }
@media (min-width: 720px) { .bd-founders { grid-template-columns: repeat(2, 1fr); } }
.bd-founder {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; gap: 1rem; padding: 1.75rem; border-radius: var(--bd-radius-lg);
	background: linear-gradient(160deg, rgba(19,23,28,0.55), rgba(11,13,16,0.7));
	border: 1px solid var(--bd-line);
	transition: transform 0.4s var(--bd-ease), box-shadow 0.4s var(--bd-ease), border-color 0.4s var(--bd-ease);
}
.bd-founder::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	opacity: 0; transition: opacity 0.4s var(--bd-ease);
	background: radial-gradient(300px circle at var(--bd-mx, 50%) var(--bd-my, 0%), rgba(127,216,232,0.10), transparent 60%);
}
.bd-founder:hover {
	transform: translateY(-5px); border-color: rgba(127,216,232,0.38);
	box-shadow: 0 24px 54px -22px rgba(0,0,0,0.75), 0 0 28px -12px rgba(127,216,232,0.3);
}
.bd-founder:hover::after { opacity: 1; }
.bd-founder__name { font-size: var(--bd-step-1); margin: 0; }
.bd-founder__role { color: var(--bd-ice); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.bd-founder__name + p { margin-top: 0.5rem; }
.bd-founder__contact { font-family: var(--bd-font-display); font-size: 0.9rem; font-weight: 500; }

/* ---------------------------------------------------------------------
   21. Membership / Diamond Club
   --------------------------------------------------------------------- */
.bd-club-hero {
	background:
		radial-gradient(80% 120% at 90% -10%, rgba(127,216,232,0.18), transparent 55%),
		var(--bd-panel);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
}
.bd-club-perks { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 760px) { .bd-club-perks { grid-template-columns: repeat(2, 1fr); } }
.bd-club-perk {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; gap: 0.9rem; align-items: flex-start;
	padding: 1.25rem 1.3rem; border-radius: var(--bd-radius);
	background: linear-gradient(160deg, rgba(19,23,28,0.6), rgba(11,13,16,0.75));
	border: 1px solid var(--bd-line);
	transition: transform 0.4s var(--bd-ease), box-shadow 0.4s var(--bd-ease), border-color 0.4s var(--bd-ease);
}
.bd-club-perk::after { /* cursor spotlight */
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	opacity: 0; transition: opacity 0.4s var(--bd-ease);
	background: radial-gradient(200px circle at var(--bd-mx, 50%) var(--bd-my, 0%), rgba(127,216,232,0.12), transparent 60%);
}
.bd-club-perk:hover {
	transform: translateY(-5px); border-color: rgba(127,216,232,0.4);
	box-shadow: 0 22px 50px -22px rgba(0,0,0,0.75), 0 0 26px -10px rgba(127,216,232,0.3);
}
.bd-club-perk:hover::after { opacity: 1; }
.bd-club-perk > svg {
	margin-top: 0; color: var(--bd-ice); flex: none;
	width: 42px; height: 42px; padding: 10px; border-radius: 12px;
	background: rgba(127,216,232,0.10); border: 1px solid rgba(127,216,232,0.28);
	transition: transform 0.4s var(--bd-ease), box-shadow 0.4s var(--bd-ease);
}
.bd-club-perk:hover > svg { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 18px -4px rgba(127,216,232,0.6); }
.bd-club-perk h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.bd-club-perk p { color: var(--bd-grey); margin: 0; }

/* ---------------------------------------------------------------------
   22. Footer
   --------------------------------------------------------------------- */
.bd-footer {
	background: var(--bd-black);
	border-top: 1px solid var(--bd-line);
	padding-block: clamp(2.75rem, 6vw, 4.5rem) 2rem;
	margin-top: 0;
}
.bd-footer__grid {
	display: grid; gap: 2.5rem;
}
@media (min-width: 820px) { .bd-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; } }
.bd-footer__tagline { color: var(--bd-ice); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; }
.bd-footer__blurb { color: var(--bd-grey); max-width: 42ch; margin: 0; }
.bd-footer__heading { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-grey); margin-bottom: 1rem; }
.bd-footer__menu, .bd-footer__contact { display: grid; gap: 0.6rem; }
.bd-footer__menu a, .bd-footer__contact a, .bd-footer__menu a:visited, .bd-footer__contact a:visited { color: var(--bd-white); }
.bd-footer__menu a:hover, .bd-footer__contact a:hover, .bd-footer__menu a:visited:hover, .bd-footer__contact a:visited:hover { color: var(--bd-ice); }
.bd-footer__contact li { color: var(--bd-grey); }
.bd-footer__social { margin-top: 1rem; }
.bd-footer__book { margin-top: 1.25rem; }
.bd-footer__bar {
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
	margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bd-line);
}
.bd-footer__copyright { color: var(--bd-grey); font-size: 0.85rem; margin: 0; }
.bd-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.bd-footer__legal a, .bd-footer__legal a:visited { color: var(--bd-grey); font-size: 0.85rem; }
.bd-footer__legal a:hover, .bd-footer__legal a:visited:hover { color: var(--bd-ice); }
/* Mobile tap ergonomics: bare text links in the footer & founder cards are only
   ~16-20px tall; pad them toward the ~40px comfortable hit area. */
@media (max-width: 760px) {
	.bd-footer__menu a, .bd-footer__contact a, .bd-footer__legal a,
	.bd-founder__contact a { display: inline-block; padding-block: 0.6rem; }
}
.bd-footer-widget { color: var(--bd-grey); }
.bd-footer-widget__title { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-grey); }

/* ---------------------------------------------------------------------
   23. Utilities + reveal-on-scroll
   --------------------------------------------------------------------- */
.bd-center { text-align: center; }
.bd-muted { color: var(--bd-grey); }
.bd-mt-2 { margin-top: 1.25rem; }
.bd-mt-3 { margin-top: 2rem; }

[data-bd-reveal] {
	opacity: 0; transform: translateY(18px);
	transition: opacity var(--bd-med) var(--bd-ease), transform var(--bd-med) var(--bd-ease);
	will-change: opacity, transform;
}
[data-bd-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   24. Reduced motion + print
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	[data-bd-reveal] { opacity: 1; transform: none; }
}

@media print {
	.bd-header, .bd-footer, .bd-cta-band, .bd-nav-toggle, .bd-book-trigger { display: none !important; }
	body::before { display: none; }
	body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------------
   25. Logos (real brand assets)
   --------------------------------------------------------------------- */
.bd-logo-img { display: inline-flex; align-items: center; }
.bd-header__brand .bd-logo-img img,
.bd-header__brand .custom-logo-link img { max-height: 52px; width: auto; }
.bd-footer__logo { margin-bottom: 1rem; }
.bd-footer__logo img, .bd-footer__logo .custom-logo-link img { max-height: 64px; width: auto; }
.bd-club-logo { height: auto; max-width: 230px; margin: 0 0 1.4rem; display: block; }
.bd-series-logo { height: auto; max-width: 200px; margin: 0 0 1.4rem; display: block; }

/* Icon mark + wordmark lockup (real logo, white-on-dark treatment) */
.bd-logo-lockup { display: inline-flex; align-items: center; gap: 0.65rem; }
.bd-logo-lockup__icon { height: 44px; width: auto; flex: none; }
.bd-logo-lockup__text { display: flex; flex-direction: column; line-height: 1; }
.bd-logo-lockup__name {
	font-family: var(--bd-font-display); font-weight: 700; font-size: 1.02rem;
	text-transform: uppercase; letter-spacing: 0.02em; color: var(--bd-white);
}
.bd-logo-lockup__tag {
	font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--bd-ice); margin-top: 0.34rem;
}
.bd-footer__logo .bd-logo-lockup__icon { height: 54px; }
.bd-footer__logo .bd-logo-lockup__tag { display: none; } /* footer has its own tagline line */
@media (max-width: 400px) { .bd-logo-lockup__name { font-size: 0.92rem; } .bd-logo-lockup__icon { height: 38px; } }

/* ---------------------------------------------------------------------
   26. Social links
   --------------------------------------------------------------------- */
.bd-socials { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.bd-social, .bd-social:visited {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--bd-line-strong);
	color: var(--bd-grey);
	transition: color var(--bd-fast) var(--bd-ease), border-color var(--bd-fast) var(--bd-ease), background var(--bd-fast) var(--bd-ease), transform var(--bd-fast) var(--bd-ease);
}
.bd-social:hover, .bd-social:visited:hover {
	color: var(--bd-black); background: var(--bd-ice);
	border-color: var(--bd-ice); transform: translateY(-2px);
}
.bd-social__label {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bd-footer__socials { margin-top: 1.5rem; }

/* ---------------------------------------------------------------------
   27. Google reviews
   --------------------------------------------------------------------- */
.bd-reviews { display: grid; gap: 1.75rem; }
.bd-reviews__summary {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
	justify-content: center;
	background: var(--bd-panel); border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius); padding: 1.1rem 1.5rem;
}
.bd-reviews__google { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--bd-font-display); font-weight: 600; color: var(--bd-white); }
.bd-google-g { flex: none; }
.bd-reviews__rating { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--bd-grey); }
.bd-reviews__rating strong { color: var(--bd-white); font-size: 1.1rem; }
.bd-reviews__count { font-size: 0.9rem; }
.bd-reviews__cta { margin-left: auto; }
@media (max-width: 640px) { .bd-reviews__cta { margin-left: 0; width: 100%; } }

/* Diamond "stars" — on-brand rating glyphs (◆) instead of generic stars */
.bd-stars { display: inline-flex; gap: 3px; line-height: 1; }
.bd-star { color: var(--bd-line-strong); display: inline-flex; }
.bd-star.is-on { color: var(--bd-ice); }
.bd-star__svg { width: 17px; height: 17px; display: block; }

.bd-review__top { margin-bottom: 0.25rem; }
.bd-review .bd-testimonial__quote { font-size: 1rem; }
.bd-review__avatar {
	width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
	border: 1px solid var(--bd-line); flex: none; background: var(--bd-panel-2);
}
.bd-review__avatar--blank { display: inline-block; }
.bd-review__time { display: block; font-size: 0.82rem; color: var(--bd-grey); }
.bd-testimonial__who { align-items: center; }

.bd-reviews__empty {
	text-align: center; max-width: 60ch; margin-inline: auto;
	background: var(--bd-panel); border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg); padding: clamp(2rem, 5vw, 3rem);
	display: grid; gap: 0.6rem; justify-items: center;
}
.bd-reviews__empty-title { font-family: var(--bd-font-display); font-weight: 600; font-size: 1.25rem; color: var(--bd-white); margin: 0.25rem 0 0; }
.bd-reviews__empty .bd-btn { margin-top: 1rem; }

/* ---------------------------------------------------------------------
   28. Contact extra (socials + reviews row)
   --------------------------------------------------------------------- */
.bd-contact-extra {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.25rem;
	border-top: 1px solid var(--bd-line); padding-top: 2rem;
}
.bd-contact-extra__socials { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bd-contact-extra__label { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bd-grey); }

/* ---------------------------------------------------------------------
   29. Before / After slider
   --------------------------------------------------------------------- */
.bd-ba {
	position: relative;
	width: 100%;
	border-radius: var(--bd-radius-lg);
	overflow: hidden;
	border: 1px solid var(--bd-line);
	box-shadow: var(--bd-shadow);
	background: var(--bd-panel-2);
	touch-action: none;
	--bd-ba-pos: 50%;
}
.bd-ba--3x4 { aspect-ratio: 3 / 4; }
.bd-ba--4x3 { aspect-ratio: 4 / 3; }
.bd-ba--16x9 { aspect-ratio: 16 / 9; }
.bd-ba__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	-webkit-user-drag: none; user-select: none; pointer-events: none;
}
/* The "before" image sits on top, clipped to the left of the handle. */
.bd-ba__before-img { clip-path: inset(0 calc(100% - var(--bd-ba-pos)) 0 0); }

.bd-ba__label {
	position: absolute; top: 0.9rem; z-index: 3;
	font-family: var(--bd-font-display); font-weight: 600;
	font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
	padding: 0.3rem 0.7rem; border-radius: 999px;
	background: rgba(11, 13, 16, 0.62); color: var(--bd-white);
	backdrop-filter: blur(4px); pointer-events: none;
}
.bd-ba__label--before { left: 0.9rem; }
.bd-ba__label--after  { right: 0.9rem; color: var(--bd-black); background: var(--bd-ice); }

.bd-ba__line {
	position: absolute; top: 0; bottom: 0; z-index: 2;
	left: var(--bd-ba-pos); width: 2px; margin-left: -1px;
	background: var(--bd-white); box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
	pointer-events: none;
}
.bd-ba__knob {
	position: absolute; top: 50%; left: var(--bd-ba-pos); z-index: 3;
	transform: translate(-50%, -50%);
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--bd-ice); color: var(--bd-black);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6), 0 0 0 4px rgba(11,13,16,0.25);
	pointer-events: none;
}
.bd-ba__knob svg { width: 20px; height: 20px; }
/* The range input is the accessible (keyboard/screen-reader) control only.
   pointer-events:none so ALL mouse/touch input hits the container, whose JS
   drives the drag with pointer capture — native range inputs need a precise
   thumb grab on mobile, which made touch-dragging feel broken. */
.bd-ba__range {
	position: absolute; inset: 0; z-index: 4;
	width: 100%; height: 100%; margin: 0;
	opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
	pointer-events: none;
}
.bd-ba { cursor: ew-resize; }
.bd-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; cursor: ew-resize; }
.bd-ba__range::-moz-range-thumb { width: 48px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.bd-ba__range:focus-visible { outline: none; }
.bd-ba__range:focus-visible ~ .bd-ba__knob { box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6), 0 0 0 3px var(--bd-ice); }

/* ---------------------------------------------------------------------
   30. Motion — reveals, stagger, hero entrance, hovers
   --------------------------------------------------------------------- */

/* Scroll reveal (base already declared in §23). Variants + delay support. */
[data-bd-reveal] { transition-delay: var(--bd-reveal-delay, 0ms); }
[data-bd-reveal="left"]  { transform: translateX(-28px); }
[data-bd-reveal="right"] { transform: translateX(28px); }
[data-bd-reveal="scale"] { transform: scale(0.94); }
[data-bd-reveal="fade"]  { transform: none; }
[data-bd-reveal].is-visible { transform: none; }

/* Staggered children: a revealed grid animates its cards in one-by-one. */
.bd-reveal-children > * {
	opacity: 0; transform: translateY(22px);
	transition: opacity var(--bd-med) var(--bd-ease), transform var(--bd-med) var(--bd-ease);
}
.bd-reveal-children.is-visible > * { opacity: 1; transform: none; }
.bd-reveal-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.bd-reveal-children.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.bd-reveal-children.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.bd-reveal-children.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.bd-reveal-children.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.bd-reveal-children.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.bd-reveal-children.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.bd-reveal-children.is-visible > *:nth-child(n+8) { transition-delay: 560ms; }

/* Hero entrance on load — staggered rise-in (above the fold, so not scroll-gated). */
.bd-hero__eyebrow { animation: bd-rise-in 0.7s var(--bd-ease) both; }
.bd-hero__title   { animation: bd-rise-in 0.7s var(--bd-ease) both; animation-delay: 0.08s; }
.bd-hero__lede    { animation: bd-rise-in 0.7s var(--bd-ease) both; animation-delay: 0.16s; }
.bd-hero__actions { animation: bd-rise-in 0.7s var(--bd-ease) both; animation-delay: 0.24s; }
.bd-hero__meta    { animation: bd-rise-in 0.7s var(--bd-ease) both; animation-delay: 0.32s; }
@keyframes bd-rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bd-fade-scale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }

/* Image zoom on hover (photos live in overflow-hidden frames). */
.bd-photo__img { transition: transform 0.6s var(--bd-ease); will-change: transform; }
.bd-card:hover .bd-photo:not(.bd-photo--parallax) .bd-photo__img,
.bd-split__media:hover .bd-photo:not(.bd-photo--parallax) .bd-photo__img,
.bd-founder:hover .bd-photo__img { transform: scale(1.06); }

/* Animated underline on desktop nav links. */
.bd-nav .bd-nav__item > a { position: relative; }
.bd-nav .bd-nav__item > a::after {
	content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.4rem;
	height: 1.5px; background: var(--bd-ice); border-radius: 2px;
	transform: scaleX(0); transform-origin: left; opacity: 0.9;
	transition: transform var(--bd-fast) var(--bd-ease);
}
.bd-nav .bd-nav__item > a:hover::after,
.bd-nav .current-menu-item > a::after,
.bd-nav .current_page_item > a::after { transform: scaleX(1); }

/* Primary button gets a soft sheen sweep on hover. */
.bd-btn--primary, .bd-btn--block { position: relative; overflow: hidden; }
.bd-btn--primary::after, .bd-btn--block::after {
	content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
	transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.bd-btn--primary:hover::after, .bd-btn--block:hover::after { animation: bd-sheen 0.8s var(--bd-ease); }
@keyframes bd-sheen { from { left: -60%; opacity: 0.9; } to { left: 130%; opacity: 0; } }

/* Respect reduced-motion for all of the above. */
@media (prefers-reduced-motion: reduce) {
	.bd-reveal-children > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.bd-hero__eyebrow, .bd-hero__title, .bd-hero__lede, .bd-hero__actions, .bd-hero__meta { animation: none !important; }
	.bd-photo__img { transition: none !important; }
	.bd-btn--primary::after, .bd-btn--block::after { display: none !important; }
}

/* ---------------------------------------------------------------------
   31. Parallax — full-bleed hero, statement bands, in-frame photo drift
   --------------------------------------------------------------------- */

/* Full-bleed parallax HERO (replaces the boxed 2-column hero on Home). */
.bd-hero--parallax {
	position: relative;
	min-height: min(92vh, 880px);
	display: flex; align-items: center;
	padding-block: clamp(5rem, 13vh, 9rem);
	overflow: hidden;
	isolation: isolate;
}
.bd-hero__bg {
	position: absolute; left: 0; top: -15%;
	width: 100%; height: 130%;
	object-fit: cover; object-position: center 46%;
	z-index: -2; will-change: transform;
	transform: translate3d(0, var(--bd-py, 0), 0);
	animation: bd-fade 1.3s var(--bd-ease) both;
}
/* On phones the wide hero crops to the middle (empty pavement); shift the focal
   point right so the detailer cleaning the wheel becomes the visual center. */
@media (max-width: 720px) {
	.bd-hero__bg { object-position: 82% 40%; }
}
.bd-hero__scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(11,13,16,0.95) 0%, rgba(11,13,16,0.82) 30%, rgba(11,13,16,0.4) 64%, rgba(11,13,16,0.1) 100%),
		linear-gradient(0deg, rgba(11,13,16,0.92) 0%, rgba(11,13,16,0) 42%),
		linear-gradient(180deg, rgba(11,13,16,0.55) 0%, rgba(11,13,16,0) 24%);
}
.bd-hero--parallax .bd-container { position: relative; z-index: 1; width: 100%; }
.bd-hero--parallax .bd-hero__content { max-width: 640px; }
@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }

/* Full-bleed parallax STATEMENT BAND (a dramatic breather between sections). */
.bd-parallax-band {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: min(60vh, 520px);
	display: flex; align-items: center;
	padding-block: clamp(3.5rem, 9vh, 6rem);
	border-block: 1px solid var(--bd-line);
	text-align: center;
}
.bd-parallax-band .bd-container { position: relative; z-index: 1; }
.bd-parallax-band__title { font-size: var(--bd-step-4); max-width: 22ch; margin: 0 auto 0.75rem; }
.bd-parallax-band .bd-eyebrow { justify-content: center; }

/* In-frame photo drift: the image floats a touch within its frame on scroll. */
.bd-photo--parallax .bd-photo__img {
	height: 120%;
	transform: translateY(calc(-10% + var(--bd-py, 0px)));
	will-change: transform;
}

/* Shared FIXED-BACKGROUND scene: one image pinned to the viewport, revealed
   behind several sections as you scroll over them. Set the image per-section with
   inline style="--bd-scene-img:url('…')" (and optionally --bd-scene-scrim). */
.bd-fixed-scene { position: relative; }
/* A pinned image layer (JS keeps it locked to the viewport), clipped to the
   section so the same image is revealed behind each scene as you scroll over it.
   More reliable than background-attachment:fixed (which many renderers + iOS skip). */
.bd-scene__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.bd-scene__img {
	position: absolute; left: 0; top: 0; width: 100%; height: 100vh;
	object-fit: cover; object-position: center 42%;
	will-change: transform;
}
.bd-scene__overlay {
	position: absolute; inset: 0;
	/* Dark at the top (keeps headings legible) + bottom, lighter through the middle
	   so the car shows. Override per section with --bd-scene-overlay. */
	background: var(--bd-scene-overlay, linear-gradient(180deg, rgba(11,13,16,0.9) 0%, rgba(11,13,16,0.5) 34%, rgba(11,13,16,0.42) 55%, rgba(11,13,16,0.8) 100%));
}
.bd-fixed-scene > .bd-container { position: relative; z-index: 1; }

/* Services page "Diamond Series" scene: an interior photo pinned behind several
   ADJACENT sections. A flat (even) overlay keeps the pinned image perfectly
   seamless across the section seams, and stays dark enough for the text-heavy
   tier breakdowns to read clearly. Focus the crop on the seats/console. */
.bd-scene--interior { --bd-scene-overlay: linear-gradient(rgba(11,13,16,0.74), rgba(11,13,16,0.74)); }
.bd-scene--interior .bd-scene__img { object-position: center 52%; }

/* About page: the BDD crew photo pinned behind the intro + values sections. */
.bd-scene--fam { --bd-scene-overlay: linear-gradient(rgba(11,13,16,0.74), rgba(11,13,16,0.68) 45%, rgba(11,13,16,0.8)); }
.bd-scene--fam .bd-scene__img { object-position: center 40%; }
/* A pinned-scene page header gets hero-height padding + a brighter lede. */
.bd-page-header.bd-fixed-scene { padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem); border-bottom: 0; }
.bd-page-header.bd-fixed-scene .bd-page-header__lede { color: rgba(247, 248, 250, 0.9); }

@media (prefers-reduced-motion: reduce) {
	.bd-hero__bg { transform: none !important; animation: none !important; }
	.bd-photo--parallax .bd-photo__img { transform: none !important; height: 100%; }
	.bd-scene__img { height: 100%; transform: none !important; }
}

/* ---------------------------------------------------------------------
   32. Filterable gallery + vertical video reels + lightbox
   --------------------------------------------------------------------- */

/* -- Filter chips (selectable categories) -- */
.bd-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2rem; }
.bd-filter__chip {
	font-family: var(--bd-font-display); font-size: var(--bd-step--1); font-weight: 600;
	letter-spacing: 0.02em; color: var(--bd-grey);
	background: var(--bd-panel); border: 1px solid var(--bd-line); border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0.5rem 1.15rem; cursor: pointer;
	transition: color var(--bd-fast) var(--bd-ease), border-color var(--bd-fast) var(--bd-ease),
		background var(--bd-fast) var(--bd-ease), transform var(--bd-fast) var(--bd-ease);
}
.bd-filter__chip:hover { color: var(--bd-white); border-color: var(--bd-line-strong); transform: translateY(-1px); }
.bd-filter__chip.is-active { color: var(--bd-black); background: var(--bd-ice); border-color: var(--bd-ice); }

/* -- Masonry grid -- */
.bd-gallery__grid { column-count: 1; column-gap: 1rem; }
@media (min-width: 620px) { .bd-gallery__grid { column-count: 2; } }
@media (min-width: 980px) { .bd-gallery__grid { column-count: 3; } }
.bd-gallery__grid > * { break-inside: avoid; margin-bottom: 1rem; }
.bd-gallery__item {
	position: relative; overflow: hidden; border-radius: var(--bd-radius);
	border: 1px solid var(--bd-line);
}
.bd-gallery__img {
	display: block; width: 100%; height: auto;
	transition: transform var(--bd-med) var(--bd-ease);
}
.bd-gallery__item:hover .bd-gallery__img { transform: scale(1.05); }

/* Filter show/hide + pop-in */
.bd-gallery__grid > .is-hidden { display: none; }
@keyframes bd-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.bd-gallery__grid.is-animating > *:not(.is-hidden) { animation: bd-pop 0.45s var(--bd-ease) both; }

/* -- Vertical reel (9:16 social clip) -- */
.bd-reel { margin: 0; }
.bd-reel__frame {
	display: block; position: relative; width: 100%; aspect-ratio: 9 / 16;
	padding: 0; border: 1px solid var(--bd-line); border-radius: var(--bd-radius);
	overflow: hidden; cursor: pointer; background: var(--bd-panel);
	transition: border-color var(--bd-med) var(--bd-ease), box-shadow var(--bd-med) var(--bd-ease);
}
.bd-reel__frame:hover { border-color: var(--bd-ice); box-shadow: var(--bd-shadow-ice); }
.bd-reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bd-reel__frame::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(11,13,16,0.4) 0%, rgba(11,13,16,0) 26%, rgba(11,13,16,0) 62%, rgba(11,13,16,0.5) 100%);
}
.bd-reel__badge {
	position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
	font-family: var(--bd-font-display); font-size: 0.66rem; font-weight: 700;
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--bd-white);
	background: rgba(11,13,16,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	padding: 0.26rem 0.6rem; border-radius: 999px; border: 1px solid rgba(247,248,250,0.2);
}
.bd-reel__play {
	position: absolute; inset: 0; margin: auto; z-index: 2; width: 54px; height: 54px;
	display: grid; place-items: center; color: var(--bd-black); background: rgba(255,255,255,0.92);
	border-radius: 50%; opacity: 0; transform: scale(0.82);
	transition: opacity var(--bd-med) var(--bd-ease), transform var(--bd-med) var(--bd-ease);
}
.bd-reel__play svg { width: 22px; height: 22px; margin-left: 3px; }
.bd-reel__frame:hover .bd-reel__play,
.bd-reel__frame:focus-visible .bd-reel__play { opacity: 1; transform: scale(1); }
.bd-reel__cap { margin: 0.65rem 0 0; font-family: var(--bd-font-display); font-weight: 600; color: var(--bd-white); font-size: var(--bd-step-0); text-align: center; }

/* -- Homepage reels row -- */
.bd-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); max-width: 780px; margin-inline: auto; }
.bd-reels-section .bd-reel { transition: transform var(--bd-med) var(--bd-ease); }
.bd-reels-section .bd-reel:nth-child(3n+1) { transform: rotate(-2.2deg); }
.bd-reels-section .bd-reel:nth-child(3n) { transform: rotate(2.2deg); }
.bd-reels-section .bd-reel:hover { transform: rotate(0deg) translateY(-5px); }
@media (max-width: 720px) {
	.bd-reels {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
		overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		padding-bottom: 0.75rem; margin-inline: calc(var(--bd-pad-x) * -1); padding-inline: var(--bd-pad-x);
	}
	.bd-reels > * { scroll-snap-align: center; }
	.bd-reels-section .bd-reel:nth-child(3n+1),
	.bd-reels-section .bd-reel:nth-child(3n) { transform: none; }
}

/* -- Lightbox (play with sound) -- */
.bd-lightbox {
	position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem;
	background: rgba(6,7,9,0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	animation: bd-lb-in 0.2s var(--bd-ease);
}
.bd-lightbox[hidden] { display: none; }
@keyframes bd-lb-in { from { opacity: 0; } to { opacity: 1; } }
.bd-lightbox__stage { position: relative; }
.bd-lightbox__video { max-width: min(92vw, 430px); max-height: 86vh; width: auto; height: auto; border-radius: var(--bd-radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: block; background: #000; }
.bd-lightbox__close {
	position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; border-radius: 50%;
	background: var(--bd-white); color: var(--bd-black); border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; display: grid; place-items: center; box-shadow: var(--bd-shadow);
}

@media (prefers-reduced-motion: reduce) {
	.bd-gallery__grid.is-animating > * { animation: none !important; }
	.bd-reels-section .bd-reel { transform: none !important; }
	.bd-lightbox { animation: none; }
}

/* ---------------------------------------------------------------------
   33. At-a-glance trust strip (flat contrast band)
   --------------------------------------------------------------------- */
.bd-trust { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0; padding: 0; list-style: none; text-align: center; }
@media (min-width: 560px) { .bd-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .bd-trust { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.bd-trust__item { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; border-radius: var(--bd-radius); transition: transform 0.4s var(--bd-ease), background 0.4s var(--bd-ease); }
.bd-trust__item:hover { transform: translateY(-4px); background: rgba(127,216,232,0.05); }
.bd-trust__stat { font-family: var(--bd-font-display); font-size: var(--bd-step-2); font-weight: 700; color: var(--bd-white); line-height: 1.05; transition: color 0.4s var(--bd-ease); }
.bd-trust__item:hover .bd-trust__stat { color: var(--bd-ice); }
.bd-trust__label { font-size: var(--bd-step--1); color: var(--bd-grey); letter-spacing: 0.02em; }
@media (min-width: 900px) {
	.bd-trust__item:not(:last-child)::after {
		content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%);
		width: 1px; height: 42px; background: var(--bd-line);
	}
}

/* ---------------------------------------------------------------------
   34. Before / After showcase (multiple sliders side by side)
   --------------------------------------------------------------------- */
.bd-ba-set { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.75rem); max-width: 420px; margin-inline: auto; }
@media (min-width: 680px)  { .bd-ba-set { grid-template-columns: repeat(2, 1fr); max-width: 780px; } }
@media (min-width: 1000px) { .bd-ba-set { grid-template-columns: repeat(3, 1fr); max-width: 1060px; } }
.bd-ba-item { margin: 0; transition: transform 0.4s var(--bd-ease); }
.bd-ba-item:hover { transform: translateY(-5px); }
.bd-ba-item:hover .bd-ba { box-shadow: 0 26px 56px -24px rgba(0,0,0,0.8), 0 0 30px -12px rgba(127,216,232,0.35); }
.bd-ba-item:hover .bd-ba__cap, .bd-ba-item:hover .bd-ba-item__cap { color: var(--bd-ice); }
.bd-ba-item__cap {
	margin-top: 0.85rem; text-align: center;
	font-family: var(--bd-font-display); font-weight: 500; font-size: var(--bd-step--1);
	color: var(--bd-grey); letter-spacing: 0.02em;
	transition: color 0.4s var(--bd-ease);
}

/* ---------------------------------------------------------------------
   35. WordPress core content classes
   These style the markup WordPress itself emits (the_content, block editor,
   image alignments, captions). The theme's own components use the bd- prefix,
   so these never collide — they only take effect on editor/plugin content
   (e.g. the Privacy / Cancellation prose pages) and stay compatible with SEO
   and block plugins. Required by the WordPress theme guidelines.
   --------------------------------------------------------------------- */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft   { float: left; margin: 0.4rem 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.alignnone   { margin: 0 0 1rem; }
img.aligncenter, figure.aligncenter { margin-bottom: 1rem; }
/* Wide / full alignments (align-wide theme support) — kept within the content
   width so they never trigger horizontal overflow on the prose pages. */
.alignwide, .alignfull { margin-left: auto; margin-right: auto; max-width: 100%; }

/* Captions (classic [caption] + core image block) */
.wp-caption { max-width: 100%; margin-bottom: 1rem; }
.wp-caption img, .wp-block-image img { display: block; height: auto; max-width: 100%; }
.wp-caption-text, .wp-element-caption, .gallery-caption, figcaption {
	font-size: var(--bd-step--1); color: var(--bd-grey); text-align: center; margin-top: 0.5rem;
}

/* Focusable skip/sr text becomes visible on keyboard focus */
.screen-reader-text:focus {
	position: fixed; top: 0.5rem; left: 0.5rem; z-index: 1000;
	width: auto; height: auto; clip: auto; clip-path: none;
	padding: 0.6rem 1rem; background: var(--bd-white); color: var(--bd-black); border-radius: 8px;
}

/* Present for WordPress theme-check / plugins even if unused by this design */
.sticky, .bypostauthor, .wp-block-group, .wp-block-columns { }
.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.gallery img { width: 100%; height: auto; border-radius: var(--bd-radius); }

/* ---------------------------------------------------------------------
   36. Business Fleet — quote form + "Trusted By" marquee
   --------------------------------------------------------------------- */
.bd-fleet-perks { grid-template-columns: 1fr; }
@media (min-width: 720px) { .bd-fleet-perks { grid-template-columns: repeat(2, 1fr); } }

.bd-form { max-width: 760px; margin-inline: auto; }
.bd-form__grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 620px) { .bd-form__grid { grid-template-columns: repeat(2, 1fr); } }
.bd-field { display: flex; flex-direction: column; gap: 0.4rem; }
.bd-field--full { grid-column: 1 / -1; }
.bd-field > span { font-family: var(--bd-font-display); font-size: var(--bd-step--1); font-weight: 600; letter-spacing: 0.02em; color: var(--bd-grey); }
.bd-field input, .bd-field select, .bd-field textarea {
	width: 100%; font: inherit; color: var(--bd-white); min-height: 48px;
	background: var(--bd-panel); border: 1px solid var(--bd-line); border-radius: var(--bd-radius);
	padding: 0.75rem 0.9rem;
	transition: border-color var(--bd-fast) var(--bd-ease), box-shadow var(--bd-fast) var(--bd-ease);
}
.bd-field textarea { min-height: 130px; resize: vertical; }
.bd-field select {
	appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.9rem center;
}
.bd-field input:focus, .bd-field select:focus, .bd-field textarea:focus {
	outline: none; border-color: var(--bd-ice); box-shadow: 0 0 0 3px var(--bd-ice-soft);
}
.bd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bd-form-note { max-width: 760px; margin: 0 auto; text-align: center; padding: 0.9rem 1.2rem; border-radius: var(--bd-radius); font-weight: 500; color: var(--bd-white); }
.bd-form-note--ok  { background: var(--bd-ice-soft); border: 1px solid var(--bd-ice-glow); }
.bd-form-note--err { background: rgba(224, 96, 96, 0.14); border: 1px solid rgba(224, 96, 96, 0.4); }

.bd-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bd-marquee__track { display: flex; width: max-content; gap: 1.5rem; animation: bd-marquee 30s linear infinite; will-change: transform; }
.bd-marquee:hover .bd-marquee__track { animation-play-state: paused; }
.bd-marquee__item {
	flex: none; width: 220px; height: 120px; padding: 1.25rem;
	background: var(--bd-white); border-radius: var(--bd-radius);
	display: grid; place-items: center;
}
.bd-marquee__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes bd-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   37b. "Why mobile" feature cards (staggered, hover-lift) + Before/After
        showcase depth (layered glow, floating orbs, pulsing handle)
   --------------------------------------------------------------------- */
/* "Route" timeline: the line draws itself as you scroll (--bd-route-p set in
   JS), a diamond travels along it, and each stop ignites as it's passed —
   the visual story of a mobile detailer driving to you. */
.bd-route { position: relative; margin-top: 1.6rem; --bd-route-p: 0%; }
.bd-route__line {
	position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
	background: var(--bd-line); border-radius: 2px; overflow: visible;
}
.bd-route__fill {
	position: absolute; left: 0; top: 0; width: 100%; height: var(--bd-route-p);
	background: linear-gradient(180deg, var(--bd-ice), var(--bd-ice-deep));
	box-shadow: 0 0 12px rgba(127,216,232,0.6); border-radius: 2px;
	transition: height 0.25s linear;
}
.bd-route__dot {
	position: absolute; left: 50%; top: var(--bd-route-p);
	transform: translate(-50%, -50%) rotate(0deg);
	color: var(--bd-ice); display: inline-flex;
	filter: drop-shadow(0 0 8px rgba(127,216,232,0.9));
	transition: top 0.25s linear;
	animation: bd-dot-spin 5s linear infinite;
}
@keyframes bd-dot-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bd-route__stops { margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.bd-route__stop {
	list-style: none !important; display: grid; grid-template-columns: 44px 1fr;
	gap: 1rem; align-items: center; position: relative;
	opacity: 0.35; transform: translateX(-10px);
	transition: opacity 0.5s var(--bd-ease), transform 0.5s var(--bd-ease);
}
.bd-route__num {
	width: 44px; height: 44px; border-radius: 50%; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--bd-font-display); font-weight: 700; font-size: 0.82rem;
	color: var(--bd-grey); background: var(--bd-panel-2);
	border: 1px solid var(--bd-line);
	transition: color 0.4s var(--bd-ease), border-color 0.4s var(--bd-ease),
		box-shadow 0.4s var(--bd-ease), transform 0.4s var(--bd-ease), background 0.4s var(--bd-ease);
}
.bd-route__body p {
	margin: 0; color: var(--bd-white); font-size: 1rem; line-height: 1.55;
	transition: transform 0.4s var(--bd-ease);
}
/* Ignited state (JS toggles as the fill passes each stop) */
.bd-route__stop.is-lit { opacity: 1; transform: none; }
.bd-route__stop.is-lit .bd-route__num {
	color: var(--bd-black); background: var(--bd-ice); border-color: var(--bd-ice);
	box-shadow: 0 0 0 5px rgba(127,216,232,0.18), 0 0 22px -4px rgba(127,216,232,0.7);
	animation: bd-stop-ping 0.6s var(--bd-ease) 1;
}
@keyframes bd-stop-ping { 0% { transform: scale(0.7); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* Hover interplay: row glides right, number flips */
.bd-route__stop:hover .bd-route__body p { transform: translateX(6px); }
.bd-route__stop:hover .bd-route__num { transform: rotateY(180deg) }

/* Before/After showcase: layered ice glow + offset accent frame behind the slider. */
.bd-ba-showcase { position: relative; overflow: hidden; }
.bd-ba-showcase::before, .bd-ba-showcase::after {
	content: ""; position: absolute; z-index: 0; border-radius: 50%;
	filter: blur(70px); pointer-events: none;
}
.bd-ba-showcase::before { width: 380px; height: 380px; right: -90px; top: 8%; background: rgba(127,216,232,0.10); }
.bd-ba-showcase::after { width: 300px; height: 300px; left: -110px; bottom: -60px; background: rgba(127,216,232,0.06); }
.bd-ba-showcase .bd-container { position: relative; z-index: 1; }
.bd-ba-showcase .bd-split__media { position: relative; }
/* Offset accent frame peeking out behind the slider */
.bd-ba-showcase .bd-split__media::before {
	content: ""; position: absolute; inset: 14px -14px -14px 14px;
	border: 1px solid rgba(127,216,232,0.35); border-radius: var(--bd-radius-lg);
	z-index: 0; pointer-events: none;
}
.bd-ba-showcase .bd-ba { position: relative; z-index: 1; box-shadow: 0 30px 70px -28px rgba(0,0,0,0.85), 0 0 40px -18px rgba(127,216,232,0.3); }
/* 3D cursor tilt (JS sets the transform; this smooths it) */
.bd-ba { transition: transform 0.3s var(--bd-ease); transform-style: preserve-3d; }
.bd-ba.is-dragging { transition: none; }
/* Pulsing handle draws the eye until the first drag (JS adds .is-touched). */
@keyframes bd-knob-pulse {
	0%, 100% { box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6), 0 0 0 4px rgba(11,13,16,0.25), 0 0 0 0 rgba(127,216,232,0.55); }
	55%      { box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6), 0 0 0 4px rgba(11,13,16,0.25), 0 0 0 14px rgba(127,216,232,0); }
}
.bd-ba__knob { animation: bd-knob-pulse 2.2s var(--bd-ease) infinite; }
.bd-ba.is-touched .bd-ba__knob { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.bd-ba__knob { animation: none; }
}

/* ---------------------------------------------------------------------
   38. Referral program banner (homepage, under the hero)
   --------------------------------------------------------------------- */
.bd-referral { padding: 1.1rem 0; background: linear-gradient(90deg, rgba(127,216,232,0.10), rgba(127,216,232,0.03) 55%, transparent); border-block: 1px solid rgba(127,216,232,0.25); }
.bd-referral__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.bd-referral__icon { color: var(--bd-ice); display: inline-flex; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(127,216,232,0.5)); }
.bd-referral__headline { margin: 0; font-family: var(--bd-font-display); font-weight: 600; font-size: clamp(1rem, 2.6vw, 1.2rem); color: var(--bd-white); }
.bd-referral__headline strong { color: var(--bd-ice); }
.bd-referral__sub { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--bd-grey); }
@media (max-width: 560px) { .bd-referral__inner { gap: 0.8rem; } .bd-referral { padding: 1rem 0; } }

/* Reviews variant: the items ARE dark testimonial cards, not white logo tiles.
   Same track animation/speed as the fleet-logo strip. */
.bd-marquee--reviews .bd-marquee__track { align-items: stretch; gap: 1rem; }
.bd-marquee--reviews .bd-marquee__item {
	/* Wider cards so quote text breathes; the section stays short via --tight. */
	width: min(360px, 84vw); height: auto; padding: 0;
	background: transparent; display: block;
}
.bd-marquee--reviews .bd-testimonial { height: 100%; padding: 1.35rem 1.5rem; gap: 0.7rem; }
.bd-marquee--reviews .bd-testimonial__quote { font-size: 0.95rem; line-height: 1.55; }
.bd-marquee--reviews .bd-review__avatar { width: 34px; height: 34px; }
/* Trim the section's vertical footprint on both Home + Gallery. */
.bd-section--tight .bd-marquee--reviews { margin-block: 0; }
@media (prefers-reduced-motion: reduce) {
	.bd-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}