/* ===========================================================
   HealthBloom Homepage Builder — Phase 2 Stylesheet
   -----------------------------------------------------------
   1. Design tokens
   2. Layout helpers
   3. Buttons
   4. Hero — grid & background
   5. Hero — left content (badge, heading, copy, stats)
   6. Hero — right carousel (Swiper + slides)
   7. Floating rating card
   8. Pagination dots
   9. Responsive breakpoints
   =========================================================== */

/* -----------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------- */
:root {
	--hbhb-green:        #0C7A3B;
	--hbhb-green-dark:   #0A6730;
	--hbhb-green-accent: #0F8C3F;
	--hbhb-green-soft:   #E8F4ED;

	--hbhb-ink:          #0D1F2D;
	--hbhb-muted:        #52606D;

	--hbhb-bg:           #FFFFFF;
	--hbhb-bg-soft:      #F1F8F4;
	--hbhb-border:       #E5E7EB;

	--hbhb-radius-sm:    12px;
	--hbhb-radius-md:    16px;
	--hbhb-radius-lg:    24px;
	--hbhb-radius-pill:  999px;

	--hbhb-shadow-soft:  0 10px 30px -12px rgba(13, 31, 45, 0.10);
	--hbhb-shadow-card:  0 24px 50px -18px rgba(13, 31, 45, 0.18);
	--hbhb-shadow-float: 0 18px 40px -12px rgba(13, 31, 45, 0.20);
	--hbhb-shadow-ring:  0 0 0 6px rgba(255, 255, 255, 0.9),
	                     0 24px 50px -18px rgba(13, 31, 45, 0.28);

	--hbhb-font:         "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--hbhb-transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------
   2. Layout helpers
   ----------------------------------------------------------- */
.hbhb-hero,
.hbhb-hero * {
	box-sizing: border-box;
}

.hbhb-hero {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	background:
		radial-gradient(900px 600px at 90% 30%, var(--hbhb-bg-soft) 0%, rgba(241, 248, 244, 0) 60%),
		linear-gradient(180deg, var(--hbhb-bg) 0%, #FAFCFB 100%);
	padding: 56px 0 80px;
	/* Clip horizontally only — vertical visible so prev/next slides aren't cut off. */
	overflow-x: clip;
}

/* -----------------------------------------------------------
   2a. Hero — Elementor / page-builder isolation
   -----------------------------------------------------------
   Hardens the hero stack against parent context issues that
   Elementor (and other page builders / themes) commonly inject:
     - section overflow:hidden clipping the back-layer peeks
     - widget transforms creating containing blocks that break
       Swiper's absolute-positioned slides
     - sticky-header z-index conflicts
     - section clip-path / mask chopping rounded corners
   Self-contained — does not require the parent Elementor section
   to be configured with "Overflow: Visible" (though that helps too).
   ----------------------------------------------------------- */

.hbhb-hero {
	/* Independent stacking context — z-indexes inside the hero
	   (rating card, stats card, slide layers) can't be overpowered
	   by anything outside, and can't leak outward into theme chrome. */
	isolation: isolate;

	/* 3D perspective reference for the slide stack. Back layers with
	   any translateZ will scale correctly relative to this plane. */
	perspective: 1200px;
	perspective-origin: 50% 50%;

	/* Defeat ancestor clips that would chop the back-layer peeks. */
	clip-path: none !important;
	-webkit-clip-path: none !important;
	mask: none !important;
	-webkit-mask: none !important;
}

.hbhb-hero__media,
.hbhb-carousel,
.hbhb-stack {
	/* Every step of the chain down to .hbhb-stack must allow overflow
	   so prev/next cards can peek past the active card. */
	overflow: visible !important;
	position: relative;
}

.hbhb-stack-card {
	/* GPU-composite the per-card transforms. backface-visibility
	   kills flicker during the cross-fade between positions. */
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.hbhb-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* -----------------------------------------------------------
   3. Buttons
   ----------------------------------------------------------- */
.hbhb-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--hbhb-font);
	font-weight: 600;
	font-size: 1rem;
	border-radius: var(--hbhb-radius-pill);
	text-decoration: none;
	transition: background-color var(--hbhb-transition),
	            color var(--hbhb-transition),
	            transform var(--hbhb-transition),
	            box-shadow var(--hbhb-transition);
	cursor: pointer;
	border: none;
	white-space: nowrap;
}

.hbhb-btn--primary {
	background-color: var(--hbhb-green);
	color: #FFFFFF;
	padding: 10px 12px 10px 28px;
	box-shadow: var(--hbhb-shadow-soft);
}

.hbhb-btn--primary:hover,
.hbhb-btn--primary:focus-visible {
	background-color: var(--hbhb-green-dark);
	color: #FFFFFF;
	transform: translateY(-2px);
}

.hbhb-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	transition: transform var(--hbhb-transition);
}

.hbhb-btn--primary:hover .hbhb-btn__arrow {
	transform: translateX(3px);
}

.hbhb-btn--secondary {
	background-color: #FFFFFF;
	color: var(--hbhb-ink);
	padding: 16px 28px;
	box-shadow: var(--hbhb-shadow-soft);
}

.hbhb-btn--secondary:hover,
.hbhb-btn--secondary:focus-visible {
	box-shadow: var(--hbhb-shadow-card);
	transform: translateY(-2px);
	color: var(--hbhb-ink);
}

/* -----------------------------------------------------------
   4. Hero — grid
   ----------------------------------------------------------- */
.hbhb-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

/* -----------------------------------------------------------
   5. Hero — left content
   ----------------------------------------------------------- */
.hbhb-hero__content {
	max-width: 560px;
}

/* Badge */
.hbhb-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--hbhb-green-soft);
	color: var(--hbhb-green-dark);
	padding: 8px 16px;
	border-radius: var(--hbhb-radius-pill);
	font-size: 0.875rem;
	font-weight: 600;
}

.hbhb-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--hbhb-green-accent);
}

/* Heading */
.hbhb-hero__title {
	margin: 28px 0 0;
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hbhb-ink);
}

.hbhb-hero__title-accent {
	color: var(--hbhb-green-accent);
}

/* Description */
.hbhb-hero__description {
	margin: 24px 0 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--hbhb-muted);
	max-width: 540px;
}

/* CTAs */
.hbhb-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}

/* Stats card */
.hbhb-stats-card {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background-color: #FFFFFF;
	border-radius: var(--hbhb-radius-md);
	box-shadow: var(--hbhb-shadow-card);
	padding: 16px 22px;
	margin-top: 40px;
	transition: transform var(--hbhb-transition), box-shadow var(--hbhb-transition);
}

.hbhb-stats-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hbhb-shadow-float);
}

.hbhb-stats-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--hbhb-green-soft);
	color: var(--hbhb-green);
}

.hbhb-stats-card__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hbhb-stats-card__title {
	font-weight: 700;
	color: var(--hbhb-ink);
	font-size: 1rem;
}

.hbhb-stats-card__subtitle {
	font-size: 0.875rem;
	color: var(--hbhb-muted);
	margin-top: 2px;
}

/* -----------------------------------------------------------
   6. Hero — right carousel
   -----------------------------------------------------------
   Active slide  = 380×320 (compact SaaS-style rectangular stack)
   Prev / next   = scale 0.88 + opacity 0.55 + light blur, with a
                   small ~13px peek above/below active (driven by
                   the Swiper creativeEffect translateY 10%).
   Container     = overflow:visible so prev/next can poke past
                   the swiper edges without being clipped.
   ----------------------------------------------------------- */
.hbhb-hero__media {
	position: relative;
	display: flex;
	justify-content: center;
}

.hbhb-carousel {
	position: relative;
	width: 380px;
	max-width: 100%;
	/* Top padding fits the upper ~71 px peek; the bottom peek lives
	   inside the pagination margin (see .hbhb-pagination below). */
	padding: 85px 0 30px;
}

/* Stack container — relative box where cards stack via absolute positioning */
.hbhb-stack {
	position: relative;
	width: 380px;
	height: 320px;
	max-width: 100%;
	margin: 0 auto;
	isolation: isolate;
}

/* Each stack card — absolutely positioned, full container size by default.
   Transforms applied per data-pos below. */
.hbhb-stack-card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--hbhb-radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, #E9C893, #B07F3C);
	box-shadow: 0 14px 32px -18px rgba(13, 31, 45, 0.40);
	transform-origin: 50% 50%;
	transform: translateY(0) scale(1);
	opacity: 0;
	z-index: 0;
	transition:
		transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 800ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	pointer-events: none;
}

.hbhb-stack-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* -----------------------------------------------------------
   Per-position transforms — these are the actual stack visuals
   -----------------------------------------------------------
   data-pos="0"   → active, full size, front
   data-pos="-1"  → one above, scaled, partial peek above active
   data-pos="1"   → one below, scaled, partial peek below active
   data-pos="-2"  → further above, smaller, fainter
   data-pos="2"   → further below, smaller, fainter
   data-pos="far" → hidden / behind (used for everything ≥3 steps away)

   Geometry: with a 320 px tall stack and transform-origin center,
   scale 0.85 shrinks the card to 272 px tall. translateY ±95 px
   then lifts/drops it so 71 px peeks above/below the active card.
   ----------------------------------------------------------- */

.hbhb-stack-card[data-pos="0"] {
	transform: translateY(0) scale(1);
	opacity: 1;
	z-index: 10;
	box-shadow:
		0 30px 60px -18px rgba(13, 31, 45, 0.55),
		0 14px 24px -14px rgba(13, 31, 45, 0.30);
	pointer-events: auto;
}

.hbhb-stack-card[data-pos="-1"] {
	transform: translateY(-95px) scale(0.85);
	opacity: 0.95;
	z-index: 6;
}

.hbhb-stack-card[data-pos="1"] {
	transform: translateY(95px) scale(0.85);
	opacity: 0.95;
	z-index: 7;
}

.hbhb-stack-card[data-pos="-2"] {
	transform: translateY(-130px) scale(0.72);
	opacity: 0.55;
	z-index: 3;
}

.hbhb-stack-card[data-pos="2"] {
	transform: translateY(130px) scale(0.72);
	opacity: 0.55;
	z-index: 4;
}

.hbhb-stack-card[data-pos="far"] {
	transform: translateY(0) scale(0.6);
	opacity: 0;
	z-index: 1;
}

/* -----------------------------------------------------------
   7. Floating rating card
   ----------------------------------------------------------- */
.hbhb-rating-card {
	position: absolute;
	top: 50%;
	right: -40px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: #FFFFFF;
	border-radius: var(--hbhb-radius-md);
	box-shadow: var(--hbhb-shadow-float);
	padding: 14px 20px;
	z-index: 20;
	transition: transform var(--hbhb-transition), box-shadow var(--hbhb-transition);
}

.hbhb-rating-card:hover {
	transform: translateY(-50%) translateX(-4px);
}

.hbhb-rating-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--hbhb-radius-sm);
	background-color: #FFF7E0;
}

.hbhb-rating-card__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hbhb-rating-card__title {
	font-weight: 700;
	color: var(--hbhb-ink);
	font-size: 1rem;
}

.hbhb-rating-card__subtitle {
	font-size: 0.75rem;
	color: var(--hbhb-muted);
	margin-top: 2px;
}

/* -----------------------------------------------------------
   8. Pagination dots
   ----------------------------------------------------------- */
.hbhb-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	/* Sit below the next-slide bottom peek (~71 px) with breathing room. */
	margin-top: 90px;
	position: relative;
	z-index: 10;
}

.hbhb-pagination__bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--hbhb-radius-pill);
	background-color: #D1D5DB;
	cursor: pointer;
	border: none;
	padding: 0;
	transition: width var(--hbhb-transition),
	            background-color var(--hbhb-transition);
}

.hbhb-pagination__bullet--active {
	width: 24px;
	background-color: var(--hbhb-green);
}

/* -----------------------------------------------------------
   9. Responsive breakpoints
   ----------------------------------------------------------- */
@media (max-width: 1100px) {
	.hbhb-hero__grid {
		gap: 40px;
	}
	.hbhb-carousel {
		width: 340px;
		padding: 75px 0 28px;
	}
	.hbhb-stack {
		width: 340px;
		height: 290px;
	}
	.hbhb-pagination {
		margin-top: 80px;
	}
	.hbhb-rating-card {
		right: -24px;
	}
}

@media (max-width: 900px) {
	.hbhb-hero {
		padding: 56px 0 72px;
	}
	.hbhb-hero__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.hbhb-hero__content {
		max-width: 100%;
		order: 2;
	}
	.hbhb-hero__media {
		order: 1;
	}
	.hbhb-hero__description {
		max-width: 100%;
	}
}

@media (max-width: 560px) {
	.hbhb-hero {
		padding: 40px 0 56px;
	}
	.hbhb-container {
		padding: 0 20px;
	}
	.hbhb-carousel {
		width: 280px;
		padding: 60px 0 22px;
	}
	.hbhb-stack {
		width: 280px;
		height: 240px;
	}
	.hbhb-pagination {
		margin-top: 66px;
	}
	.hbhb-hero__ctas {
		gap: 12px;
	}
	.hbhb-btn--primary {
		padding: 8px 8px 8px 22px;
		font-size: 0.95rem;
	}
	.hbhb-btn--secondary {
		padding: 14px 22px;
		font-size: 0.95rem;
	}
	.hbhb-rating-card {
		right: -12px;
		padding: 10px 14px;
	}
	.hbhb-rating-card__icon {
		width: 34px;
		height: 34px;
	}
	.hbhb-rating-card__title {
		font-size: 0.9rem;
	}
	.hbhb-stats-card {
		margin-top: 32px;
	}
}

/* ===========================================================
   Doctors Section ("Meet Our Expert Doctors")
   -----------------------------------------------------------
   Independent from the hero — uses its own scoped class names
   so no existing styles can be affected.
   =========================================================== */

.hbhb-doctors {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	background: #FFFFFF;
	padding: 56px 0 64px;
	overflow-x: clip;
}

.hbhb-doctors .hbhb-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
}

/* ----- Section header ----- */
.hbhb-doctors__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 40px;
}

.hbhb-doctors__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hbhb-green-accent);
	margin-bottom: 14px;
}

.hbhb-doctors__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hbhb-ink);
	line-height: 1.15;
}

/* ----- Carousel wrapper ----- */
.hbhb-doctors__carousel {
	position: relative;
}

.hbhb-doctors-swiper {
	overflow: hidden;
	padding-bottom: 8px;
}

.hbhb-doctors-swiper .swiper-wrapper {
	align-items: stretch;
}

.hbhb-doctor-slide {
	height: auto;
	display: flex;
}

/* =============================================================
   Doctor card — white, flippable, with top action bar
   =============================================================
   Two faces (front + back) sit inside .__inner which rotates on
   `is-flipped`. The top action bar (.hbhb-doctor-card__actions)
   is positioned outside .__inner so it stays put during the flip.
   ============================================================= */

.hbhb-doctor-card {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 540px;
	perspective: 1400px;
	background: transparent;
	border-radius: 22px;
}

/* Top action bar — pinned over both faces */
.hbhb-doctor-card__actions {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 20;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	pointer-events: none; /* wrapper passes through; pills opt in */
}

.hbhb-doctor-card__action {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 8px;
	border-radius: 999px;
	font-family: var(--hbhb-font);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;                /* lock vertical size — prevents button vs span rendering drift */
	letter-spacing: 0.15px;
	background: transparent;
	color: #1F8A52;
	border: 1.3px solid #1F8A52;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	box-shadow: none;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-decoration: none;
	min-height: 22px;              /* enforce identical pill height across button/span */
}

.hbhb-doctor-card__action svg {
	flex-shrink: 0;                /* lock icon to its declared 10×10 — no scaling drift */
	width: 10px;
	height: 10px;
}

.hbhb-doctor-card__action:hover,
.hbhb-doctor-card__action:focus-visible {
	background: #1F8A52;
	color: #FFFFFF;
	transform: translateY(-1px);
	outline: none;
}

/* Rating pill — non-interactive, pushes itself + flip pill to the right */
.hbhb-doctor-card__action--rating {
	cursor: default;
	margin-left: auto;
}

.hbhb-doctor-card__action--rating:hover {
	background: transparent;
	color: #1F8A52;
	transform: none;
}

.hbhb-doctor-card__action--rating svg {
	color: #F5B400; /* yellow star — stays yellow regardless */
}

.hbhb-doctor-card__action--rating:hover svg {
	color: #F5B400;
}

/* Likes — red heart icon at rest; full red fill when liked */
.hbhb-doctor-card__action--likes svg {
	color: #DC2626;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hbhb-doctor-card__action--likes:hover svg {
	color: #FFFFFF;
}

.hbhb-doctor-card__action--likes.is-liked {
	background: #DC2626;
	border-color: #DC2626;
	color: #FFFFFF;
}

.hbhb-doctor-card__action--likes.is-liked svg {
	color: #FFFFFF;
	transform: scale(1.15);
}

.hbhb-doctor-card__action--likes.is-liked:hover {
	background: #B91C1C;
	border-color: #B91C1C;
}

/* Flip icon — rotates 180° when card flips, both directions animated.
   Duration matches the card flip animation (~0.7s) so they spin in sync. */
.hbhb-doctor-card__action--flip svg {
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--flip svg {
	transform: rotate(180deg);
}

/* Back face top bar — only Flip Back is visible.
   Heart + rating pills hide; Flip Back sits left-aligned by default. */
.hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--likes,
.hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--rating {
	display: none;
}

/* Inner flip container */
.hbhb-doctor-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	transform-style: preserve-3d;
}

.hbhb-doctor-card.is-flipped .hbhb-doctor-card__inner {
	transform: rotateY(180deg);
}

/* Each face — absolute, hidden when facing away */
.hbhb-doctor-card__face {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: #FFFFFF;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
}

.hbhb-doctor-card__face--back {
	transform: rotateY(180deg);
}

/* When flipped, hide front from screen readers; expose back */
.hbhb-doctor-card.is-flipped .hbhb-doctor-card__face--back {
	visibility: visible;
}

/* ----- FRONT FACE -----
   Image at aspect-ratio 5/6 — less tall than the previous 3/4 so the
   overall card is more compact for the carousel. */
.hbhb-doctor-card__image {
	width: 100%;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	background: linear-gradient(135deg, #F5F5F5 0%, #E5E7EB 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hbhb-doctor-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.hbhb-doctor-card__image-fallback {
	color: rgba(20, 61, 27, 0.30);
}

.hbhb-doctor-card__body {
	padding: 12px 14px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
}

.hbhb-doctor-card__specialty {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.3px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #1F8A52;
	margin: 0 0 5px;
}

.hbhb-doctor-card__name {
	font-family: var(--hbhb-font);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.2px;
	color: #143D1B;
	margin: 0 0 4px;
	overflow-wrap: break-word;
	word-break: break-word;
	/* Reserve exactly 2 lines of vertical space — keeps the
	   button at the same Y position across all cards regardless
	   of whether the name itself is 1 or 2 lines. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(15px * 1.2 * 2); /* font-size × line-height × 2 lines */
}

.hbhb-doctor-card__experience {
	font-size: 10.5px;
	font-weight: 500;
	color: rgba(20, 61, 27, 0.60);
	margin-bottom: 12px;
}

/* Book appointment — full-width green pill. Sits directly under
   the experience text with no auto-margin gap. Because the name
   block reserves 2 lines of space, the button lands at the same Y
   position across all cards in the row. */
.hbhb-doctor-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	background: #1F8A52;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.2px;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40);
}

.hbhb-doctor-card__btn:hover,
.hbhb-doctor-card__btn:focus-visible {
	background: #176A3F;
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -4px rgba(31, 138, 82, 0.50);
}

.hbhb-doctor-card__btn-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.hbhb-doctor-card__btn:hover .hbhb-doctor-card__btn-arrow,
.hbhb-doctor-card__btn:focus-visible .hbhb-doctor-card__btn-arrow {
	transform: translateX(3px);
}

/* ----- BACK FACE ----- */
.hbhb-doctor-card__back-content {
	padding: 42px 14px 14px; /* top padding clears the action bar */
	text-align: center;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
}

.hbhb-doctor-card__heart-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 6px;
}

.hbhb-doctor-card__about-heading,
.hbhb-doctor-card__rate-heading {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #1F8A52;
	margin: 0 0 8px;
}

/* "Submit Your Rating" — short horizontal lines flank the text */
.hbhb-doctor-card__rate-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.hbhb-doctor-card__rate-heading::before,
.hbhb-doctor-card__rate-heading::after {
	content: "";
	flex: 0 0 16px;
	height: 1px;
	background: #1F8A52;
	display: block;
}

.hbhb-doctor-card__about-text {
	font-size: 10.5px;
	line-height: 1.55;
	color: rgba(20, 61, 27, 0.82);
	text-align: justify;
	margin-bottom: 10px;
	max-height: 80px;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.hbhb-doctor-card__about-text p {
	margin: 0 0 5px;
}

.hbhb-doctor-card__about-text p:last-child {
	margin-bottom: 0;
}

/* Read More — compact pill under description, links to single-product page */
.hbhb-doctor-card__read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	align-self: center;
	background: #1F8A52;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.2px;
	padding: 6px 13px;
	border-radius: 999px;
	margin-bottom: 12px;
	transition: background 0.25s ease, transform 0.25s ease;
	box-shadow: 0 3px 10px -3px rgba(31, 138, 82, 0.40);
}

.hbhb-doctor-card__read-more:hover {
	background: #176A3F;
	color: #FFFFFF;
	transform: translateY(-1px);
}

.hbhb-doctor-card__rate-divider {
	height: 1px;
	background: rgba(20, 61, 27, 0.10);
	margin: 0 0 12px;
}

/* Stars — small for carousel widths */
.hbhb-doctor-card__stars {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin-bottom: 10px;
}

.hbhb-doctor-card__star {
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: #1F8A52;
	transition: transform 0.15s ease;
	line-height: 0;
}

.hbhb-doctor-card__star:hover,
.hbhb-doctor-card__star:focus-visible {
	transform: scale(1.18);
	outline: none;
}

.hbhb-doctor-card__star.is-active svg path,
.hbhb-doctor-card__star.is-hover svg path {
	fill: #F5B400;
	stroke: #F5B400;
}

/* Submit Review — full-width green pill matching Book Appointment */
.hbhb-doctor-card__submit-review {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: #1F8A52;
	color: #FFFFFF;
	border: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.2px;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
	margin-top: auto;
	box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40);
}

.hbhb-doctor-card__submit-review:hover:not(:disabled),
.hbhb-doctor-card__submit-review:focus-visible:not(:disabled) {
	background: #176A3F;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -4px rgba(31, 138, 82, 0.50);
}

.hbhb-doctor-card__submit-review:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.hbhb-doctor-card__rate-message {
	font-size: 10.5px;
	font-weight: 600;
	color: #1F8A52;
	margin-top: 6px;
	min-height: 14px;
}

.hbhb-doctor-card__rate-message.is-error {
	color: #DC2626;
}

/* ----- Defensive: hide theme / plugin injections -----
   Common product-card decorators that WooCommerce themes and plugins
   inject around products (wishlist hearts, rating stars, "quick view"
   buttons, "added to cart" badges, price, on-sale tags, theme dashed
   dividers). The plugin's template never renders these, but if a
   theme's product-loop hook fires inside .hbhb-doctor-slide, this
   keeps the card visually clean. */
.hbhb-doctor-slide .yith-wcwl-add-to-wishlist,
.hbhb-doctor-slide .yith-wcwl-wishlistaddedbrowse,
.hbhb-doctor-slide .star-rating,
.hbhb-doctor-slide .woocommerce-product-rating,
.hbhb-doctor-slide .added_to_cart,
.hbhb-doctor-slide .quick-view,
.hbhb-doctor-slide .quick-view-button,
.hbhb-doctor-slide .product-compare,
.hbhb-doctor-slide .onsale,
.hbhb-doctor-slide .price,
.hbhb-doctor-slide .product_meta,
.hbhb-doctor-slide .button.add_to_cart_button,
.hbhb-doctor-slide .wp-block-woocommerce-product-button,
.hbhb-doctor-card .yith-wcwl-add-to-wishlist,
.hbhb-doctor-card .star-rating,
.hbhb-doctor-card .added_to_cart,
.hbhb-doctor-card .quick-view,
.hbhb-doctor-card .onsale,
.hbhb-doctor-card .price {
	display: none !important;
}

/* Some themes drop a dashed/dotted divider between product loop items
   via ::after pseudo-elements on the slide. Suppress that too. */
.hbhb-doctor-slide::before,
.hbhb-doctor-slide::after {
	display: none !important;
	content: none !important;
}

/* ----- Navigation arrows ----- */
.hbhb-doctors__nav {
	position: absolute;
	top: calc(50% - 18px); /* account for card height visually */
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1px solid var(--hbhb-border);
	color: var(--hbhb-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	box-shadow: 0 10px 30px -12px rgba(13, 31, 45, 0.18);
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease,
		opacity 0.25s ease;
	padding: 0;
}

.hbhb-doctors__nav:hover,
.hbhb-doctors__nav:focus-visible {
	background: #1C4922;
	color: #FFFFFF;
	border-color: #1C4922;
	transform: translateY(-50%) scale(1.05);
	box-shadow: 0 14px 34px -10px rgba(28, 73, 34, 0.35);
}

.hbhb-doctors__nav--prev { left: -22px; }
.hbhb-doctors__nav--next { right: -22px; }

.hbhb-doctors__nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ----- Empty state ----- */
.hbhb-doctors__empty {
	text-align: center;
	padding: 56px 24px;
	border: 2px dashed var(--hbhb-border);
	border-radius: 18px;
	background: #FAFCFB;
	max-width: 560px;
	margin: 0 auto;
}

.hbhb-doctors__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--hbhb-green-soft);
	color: var(--hbhb-green);
	margin-bottom: 14px;
}

.hbhb-doctors__empty-text {
	margin: 0;
	color: var(--hbhb-muted);
	font-size: 1rem;
	line-height: 1.5;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
	.hbhb-doctors {
		padding: 72px 0 88px;
	}
	.hbhb-doctors__nav--prev { left: -12px; }
	.hbhb-doctors__nav--next { right: -12px; }
}

@media (max-width: 900px) {
	.hbhb-doctors {
		padding: 64px 0 80px;
	}
	.hbhb-doctors__head {
		margin-bottom: 40px;
	}
	.hbhb-doctors__nav--prev { left: 4px; }
	.hbhb-doctors__nav--next { right: 4px; }
}

@media (max-width: 560px) {
	.hbhb-doctors {
		padding: 48px 0 64px;
	}
	.hbhb-doctors__nav {
		width: 40px;
		height: 40px;
		top: auto;
		bottom: -56px;
		transform: none;
	}
	.hbhb-doctors__nav--prev { left: 30%; }
	.hbhb-doctors__nav--next { right: 30%; }
	.hbhb-doctors__nav:hover {
		transform: scale(1.05);
	}
}

/* ===========================================================
   Services Section ("Comprehensive Care")
/* ===========================================================
   Services Section — sticky-scroll, migahealth-style
   -----------------------------------------------------------
   Flat canvas: no card boxes around content or images. Left
   column is a vertical list scrolling with the page; right
   column has ONE sticky image that cross-fades between service
   images as the user scrolls. On mobile the sticky right
   column is hidden and each service item carries its own
   inline image above the text.

   Driven by assets/js/services.js (IntersectionObserver — no
   GSAP, no scroll hijacking).
   =========================================================== */

.hbhb-services {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 56px 0 40px;
	position: relative;
	background: #F7F7F4; /* default — admin can override via bg_color setting */
}

.hbhb-services .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ----- Section header (centered, matches doctors/reviews) ----- */
.hbhb-services__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 64px;
}

.hbhb-services__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
	margin-bottom: 14px;
}

.hbhb-services__title {
	font-family: var(--hbhb-font);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0;
}

/* ----- Two-column sticky layout ----- */
.hbhb-services__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

/* ----- LEFT: stationary stack of services (pin-and-scrub)
   Desktop: items are absolutely positioned on top of each other.
   Only the [data-active] item is visible; CSS cross-fades the
   transition. GSAP ScrollTrigger drives which item is active.
   Mobile: see media query below — items flow naturally. */
.hbhb-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	min-height: 540px;
}

.hbhb-services__item {
	position: absolute;
	inset: 0;
	padding: 0;
	margin: 0;
	border: none;
	opacity: 0;
	transform: translateY(0);
	filter: blur(0);
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	will-change: opacity, transform, filter;
}

.hbhb-services__item[data-active="true"] {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	filter: blur(0);
}

/* Next service shows as a blurred peek at the bottom — depth cue
   so users can see what's coming up. */
.hbhb-services__item[data-preview="next"] {
	opacity: 0.22;
	transform: translateY(70px) scale(0.96);
	filter: blur(6px);
}

.hbhb-services__item-number {
	display: block;
	font-family: var(--hbhb-font);
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: #1F8A52;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.hbhb-services__item-title {
	font-family: var(--hbhb-font);
	font-size: clamp(1.5rem, 2.5vw, 2.125rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #0F1F1A;
	margin: 0 0 16px;
}

.hbhb-services__item-description {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(15, 31, 26, 0.70);
	margin: 0 0 24px;
	max-width: 480px;
}

.hbhb-services__item-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 11px 20px;
	background: #1F8A52;
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2px;
	border-radius: 999px;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 14px -4px rgba(31, 138, 82, 0.40);
}

.hbhb-services__item-btn:hover,
.hbhb-services__item-btn:focus-visible {
	background: #176A3F;
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(31, 138, 82, 0.50);
	outline: none;
}

.hbhb-services__item-btn-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.hbhb-services__item-btn:hover .hbhb-services__item-btn-arrow,
.hbhb-services__item-btn:focus-visible .hbhb-services__item-btn-arrow {
	transform: translateX(3px);
}

/* Inline image — hidden on desktop, shown on mobile */
.hbhb-services__item-image {
	display: none;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 24px;
	background: rgba(15, 31, 26, 0.04);
}

.hbhb-services__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----- RIGHT: stationary media column ----- */
.hbhb-services__media {
	position: relative;
}

.hbhb-services__media-sticky {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 480px;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(15, 31, 26, 0.04);
}

.hbhb-services__media-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.hbhb-services__media-slide[data-active="true"] {
	opacity: 1;
	z-index: 2;
}

.hbhb-services__media-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbhb-services__media-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(15, 31, 26, 0.25);
}

/* ----- Responsive: tablet (single column, no pin) ----- */
@media (max-width: 900px) {

	.hbhb-services {
		padding: 56px 0;
	}

	.hbhb-services__head {
		margin-bottom: 40px;
	}

	.hbhb-services__layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Hide the sticky right column entirely on mobile */
	.hbhb-services__media {
		display: none;
	}

	/* Show the inline image inside each service item */
	.hbhb-services__item-image {
		display: block;
	}

	/* Items flow naturally on mobile — no overlap, no fade */
	.hbhb-services__list {
		position: static;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.hbhb-services__item {
		position: static;
		inset: auto;
		display: block;
		opacity: 1;
		pointer-events: auto;
		padding: 40px 0;
		transition: none;
	}

	.hbhb-services__item + .hbhb-services__item {
		border-top: 1px solid rgba(15, 31, 26, 0.08);
	}

	.hbhb-services__item:first-child {
		padding-top: 0;
	}

	.hbhb-services__item-number {
		font-size: 36px;
		margin-bottom: 12px;
	}

	.hbhb-services__item-title {
		font-size: 1.5rem;
	}

	.hbhb-services__item-description {
		font-size: 15px;
		max-width: none;
	}
}

@media (max-width: 600px) {
	.hbhb-services .hbhb-container {
		padding: 0 20px;
	}

	.hbhb-services__item-image {
		aspect-ratio: 3 / 2;
		border-radius: 14px;
	}
}

/* ----- Reduced motion: instant cross-fade ----- */
@media (prefers-reduced-motion: reduce) {
	.hbhb-services__item,
	.hbhb-services__media-slide {
		transition: none;
	}
}


/* ===========================================================
   Reviews / Testimonials Section
   -----------------------------------------------------------
   Header (eyebrow / heading / description) is rendered from
   admin settings; the body is whatever the Trustindex shortcode
   outputs. We only style the wrapper + header, never the
   review cards themselves — those come from Trustindex.
   =========================================================== */

.hbhb-reviews {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	background: linear-gradient(180deg, #F7FBF8 0%, #FFFFFF 100%);
	padding: 80px 0;
	position: relative;
}

.hbhb-reviews .hbhb-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

/* ---------- Header ---------- */
.hbhb-reviews__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 56px;
}

.hbhb-reviews__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hbhb-green-accent);
	margin-bottom: 14px;
}

.hbhb-reviews__title {
	margin: 0 0 18px;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--hbhb-ink);
}

.hbhb-reviews__description {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--hbhb-muted);
}

/* ---------- Shortcode body ----------
   We don't restyle Trustindex's internal widgets — the plugin
   ships its own theme. We only constrain its outer wrapper so
   it sits cleanly inside the section and never overflows. */
.hbhb-reviews__body {
	width: 100%;
	max-width: 100%;
}

.hbhb-reviews__body > * {
	max-width: 100%;
}

.hbhb-reviews__body img {
	max-width: 100%;
	height: auto;
}

/* ---------- Admin-only "shortcode missing" notice ---------- */
.hbhb-reviews__notice {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 28px;
	background: #FEF3C7;
	border: 1px solid #FCD34D;
	border-radius: 16px;
	color: #92400E;
	font-size: 0.95rem;
	line-height: 1.55;
	text-align: center;
}

.hbhb-reviews__notice strong {
	display: inline;
	margin-right: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.hbhb-reviews { padding: 56px 0; }
}

/* ===========================================================
   DOCTOR CARD — defensive overrides (last layer)
   -----------------------------------------------------------
   These rules exist to win specificity battles with Elementor,
   Astra, Hello Elementor, OceanWP, GeneratePress, and other
   themes that aggressively style buttons, SVGs, and flex
   children at high specificity. Compound class selectors push
   our specificity to (0,2,0) and !important locks the values.
   Edit with care — order matters within each rule.
   =========================================================== */

/* ----- Card container — clip everything to its border-radius */
.hbhb-doctors .hbhb-doctor-card {
	overflow: hidden !important;
	box-sizing: border-box !important;
	contain: layout style !important;
}

.hbhb-doctors .hbhb-doctor-card *,
.hbhb-doctors .hbhb-doctor-card *::before,
.hbhb-doctors .hbhb-doctor-card *::after {
	box-sizing: border-box !important;
}

/* ----- Faces are already clipped, but re-assert against themes */
.hbhb-doctors .hbhb-doctor-card__face--front,
.hbhb-doctors .hbhb-doctor-card__face--back {
	overflow: hidden !important;
	max-width: 100% !important;
}

/* ----- Action pills — filled green to match Submit Review button.
   Reverts the outlined treatment that themes were partly hiding
   anyway, and gives all three pills (heart / rating / flip)
   visual consistency with the Submit Review CTA. */
.hbhb-doctors .hbhb-doctor-card__action {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	padding: 5px 10px !important;
	min-height: 24px !important;
	background: #1F8A52 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--hbhb-font) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.15px !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: 0 3px 8px -3px rgba(31, 138, 82, 0.45) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	text-decoration: none !important;
	width: auto !important;
	max-width: none !important;
}

.hbhb-doctors .hbhb-doctor-card__action:hover,
.hbhb-doctors .hbhb-doctor-card__action:focus-visible {
	background: #176A3F !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

/* Pill icons keep their semantic colour: heart red, star yellow,
   flip white. Always 10×10, never stretched. */
.hbhb-doctors .hbhb-doctor-card__action svg {
	width: 10px !important;
	height: 10px !important;
	flex-shrink: 0 !important;
	display: block !important;
}

.hbhb-doctors .hbhb-doctor-card__action--likes svg {
	color: #DC2626 !important;
}

.hbhb-doctors .hbhb-doctor-card__action--rating {
	cursor: default !important;
	margin-left: auto !important;
}

.hbhb-doctors .hbhb-doctor-card__action--rating:hover {
	background: #1F8A52 !important;
	transform: none !important;
}

.hbhb-doctors .hbhb-doctor-card__action--rating svg {
	color: #F5B400 !important; /* yellow star, stays yellow on hover too */
}

.hbhb-doctors .hbhb-doctor-card__action--flip svg {
	color: #FFFFFF !important;
}

/* Liked state — red pill */
.hbhb-doctors .hbhb-doctor-card__action--likes.is-liked {
	background: #DC2626 !important;
	border-color: #DC2626 !important;
}

.hbhb-doctors .hbhb-doctor-card__action--likes.is-liked svg {
	color: #FFFFFF !important;
}

/* ----- Flip icon rotation — sync with card flip (0.7s) */
.hbhb-doctors .hbhb-doctor-card__action--flip svg {
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transform-origin: center center !important;
}

.hbhb-doctors .hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--flip svg {
	transform: rotate(180deg) !important;
}

/* Back face: only flip pill visible (heart and rating hide) */
.hbhb-doctors .hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--likes,
.hbhb-doctors .hbhb-doctor-card.is-flipped .hbhb-doctor-card__action--rating {
	display: none !important;
}

/* ----- Star rating buttons — themes love to inflate <button> elements.
   Lock their box dimensions absolutely and force the SVG inside. */
.hbhb-doctors .hbhb-doctor-card__stars {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 4px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.hbhb-doctors .hbhb-doctor-card__star {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 24px !important;
	max-height: 24px !important;
	padding: 2px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #1F8A52 !important;
	cursor: pointer !important;
	line-height: 0 !important;
	flex: 0 0 24px !important; /* don't flex-grow / shrink */
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: transform 0.15s ease !important;
	transform: none;
}

.hbhb-doctors .hbhb-doctor-card__star:hover,
.hbhb-doctors .hbhb-doctor-card__star:focus-visible {
	transform: scale(1.15) !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

.hbhb-doctors .hbhb-doctor-card__star svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	flex-shrink: 0 !important;
}

.hbhb-doctors .hbhb-doctor-card__star.is-active svg path,
.hbhb-doctors .hbhb-doctor-card__star.is-hover svg path {
	fill: #F5B400 !important;
	stroke: #F5B400 !important;
}

/* ----- Back face content — contain everything to card width */
.hbhb-doctors .hbhb-doctor-card__back-content {
	width: 100% !important;
	max-width: 100% !important;
	padding: 42px 14px 14px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

.hbhb-doctors .hbhb-doctor-card__about-heading,
.hbhb-doctors .hbhb-doctor-card__rate-heading {
	max-width: 100% !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

.hbhb-doctors .hbhb-doctor-card__about-text {
	max-width: 100% !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	hyphens: auto !important;
}

/* ----- Submit Review — full-width green pill, same shape language
   as the action pills so the whole back face reads as a coherent set */
.hbhb-doctors .hbhb-doctor-card__submit-review {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 9px 16px !important;
	margin-top: auto !important;
	background: #1F8A52 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--hbhb-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
	transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
}

.hbhb-doctors .hbhb-doctor-card__submit-review:hover:not(:disabled),
.hbhb-doctors .hbhb-doctor-card__submit-review:focus-visible:not(:disabled) {
	background: #176A3F !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

.hbhb-doctors .hbhb-doctor-card__submit-review:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

/* ----- Read More on back face — same shape language */
.hbhb-doctors .hbhb-doctor-card__read-more {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	align-self: center !important;
	padding: 6px 13px !important;
	background: #1F8A52 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--hbhb-font) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: 0 3px 10px -3px rgba(31, 138, 82, 0.40) !important;
	box-sizing: border-box !important;
}

.hbhb-doctors .hbhb-doctor-card__read-more:hover,
.hbhb-doctors .hbhb-doctor-card__read-more:focus-visible {
	background: #176A3F !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

/* ----- Mobile compactness ----- */
@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card__action {
		padding: 4px 8px !important;
		font-size: 10px !important;
		min-height: 22px !important;
	}
	.hbhb-doctors .hbhb-doctor-card__star {
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 22px !important;
	}
	.hbhb-doctors .hbhb-doctor-card__star svg {
		width: 16px !important;
		height: 16px !important;
	}
	.hbhb-doctors .hbhb-doctor-card__back-content {
		padding: 38px 12px 12px !important;
	}
}

/* ===========================================================
   Gallery Section
   -----------------------------------------------------------
   6-image responsive grid. 3 cols desktop, 2 cols tablet,
   1 col mobile. Equal-aspect tiles with hover lift.
   =========================================================== */

.hbhb-gallery {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 80px 0;
	position: relative;
	background: #FFFFFF;
}

.hbhb-gallery .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hbhb-gallery__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 56px;
}

.hbhb-gallery__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
	margin-bottom: 14px;
}

.hbhb-gallery__title {
	font-family: var(--hbhb-font);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0 0 14px;
}

.hbhb-gallery__description {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(15, 31, 26, 0.65);
	margin: 0;
}

.hbhb-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hbhb-gallery__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(15, 31, 26, 0.04);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
	will-change: transform;
}

.hbhb-gallery__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -12px rgba(15, 31, 26, 0.18);
}

.hbhb-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hbhb-gallery__item:hover img {
	transform: scale(1.04);
}

@media (max-width: 900px) {
	.hbhb-gallery {
		padding: 56px 0;
	}
	.hbhb-gallery__head {
		margin-bottom: 36px;
	}
	.hbhb-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.hbhb-gallery__item {
		border-radius: 14px;
	}
}

@media (max-width: 560px) {
	.hbhb-gallery__grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================
   Blog Section
   -----------------------------------------------------------
   Latest posts card grid. 3 cols desktop, 2 tablet, 1 mobile.
   Card = featured image + title + excerpt + Read More CTA.
   =========================================================== */

.hbhb-blog {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 80px 0;
	position: relative;
	background: #F7FBF8;
}

.hbhb-blog .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hbhb-blog__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 56px;
}

.hbhb-blog__eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
	margin-bottom: 14px;
}

.hbhb-blog__title {
	font-family: var(--hbhb-font);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0 0 14px;
}

.hbhb-blog__description {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(15, 31, 26, 0.65);
	margin: 0;
}

.hbhb-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.hbhb-blog__card {
	background: #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 16px -6px rgba(15, 31, 26, 0.08);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

.hbhb-blog__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px -12px rgba(15, 31, 26, 0.18);
}

.hbhb-blog__card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(15, 31, 26, 0.05);
}

.hbhb-blog__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hbhb-blog__card:hover .hbhb-blog__card-image {
	transform: scale(1.04);
}

.hbhb-blog__card-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(15, 31, 26, 0.20);
}

.hbhb-blog__card-body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hbhb-blog__card-title {
	font-family: var(--hbhb-font);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: #0F1F1A;
}

.hbhb-blog__card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hbhb-blog__card-title a:hover {
	color: #1F8A52;
}

.hbhb-blog__card-excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(15, 31, 26, 0.65);
	margin: 0 0 18px;
	flex-grow: 1;
}

.hbhb-blog__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1F8A52;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	letter-spacing: 0.2px;
	align-self: flex-start;
	transition: gap 0.25s ease, color 0.2s ease;
}

.hbhb-blog__card-cta:hover {
	color: #176A3F;
	gap: 10px;
}

.hbhb-blog__card-cta-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.hbhb-blog__card-cta:hover .hbhb-blog__card-cta-arrow {
	transform: translateX(2px);
}

@media (max-width: 900px) {
	.hbhb-blog {
		padding: 56px 0;
	}
	.hbhb-blog__head {
		margin-bottom: 36px;
	}
	.hbhb-blog__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.hbhb-blog__grid {
		grid-template-columns: 1fr;
	}
	.hbhb-blog__card-body {
		padding: 18px 20px 22px;
	}
}

/* ===========================================================
   Hero — stats bar (single rectangle, 4 inline stats)
   -----------------------------------------------------------
   Replaces the old "10+ Doctors / Specialists on call" chip.
   Sits below the Book A Visit / Explore Services buttons.
   =========================================================== */
.hbhb-hero__stats-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 0;
	margin-top: 28px;
	max-width: 580px;
	background: #FFFFFF;
	border-radius: 18px;
	padding: 18px 8px;
	box-shadow: 0 10px 30px -14px rgba(15, 31, 26, 0.18);
}

.hbhb-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 4px 10px;
	position: relative;
}

/* Thin vertical separators between stats (within the single rectangle) */
.hbhb-hero__stat + .hbhb-hero__stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 1px;
	background: rgba(15, 31, 26, 0.10);
}

.hbhb-hero__stat-value {
	font-family: var(--hbhb-font);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	font-weight: 800;
	color: #0F1F1A;
	line-height: 1.1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.hbhb-hero__stat-label {
	font-family: var(--hbhb-font);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(15, 31, 26, 0.60);
	line-height: 1.25;
}

@media (max-width: 720px) {
	.hbhb-hero__stats-bar {
		grid-template-columns: repeat(2, 1fr);
		padding: 16px 6px;
	}
	/* Only show separator between cols, not across rows */
	.hbhb-hero__stat + .hbhb-hero__stat::before { display: none; }
	.hbhb-hero__stat:nth-child(2)::before,
	.hbhb-hero__stat:nth-child(4)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 18%;
		bottom: 18%;
		width: 1px;
		background: rgba(15, 31, 26, 0.10);
		display: block;
	}
	.hbhb-hero__stat:nth-child(3),
	.hbhb-hero__stat:nth-child(4) {
		padding-top: 12px;
	}
	.hbhb-hero__stat:nth-child(1),
	.hbhb-hero__stat:nth-child(2) {
		padding-bottom: 12px;
		border-bottom: 1px solid rgba(15, 31, 26, 0.10);
	}
}

/* ===========================================================
   Hero — patients card (below 3D card stack)
   -----------------------------------------------------------
   White pill matching the .hbhb-rating-card treatment.
   Avatars row on the left, count caption on the right.
   Empty avatar slots show a colored gradient + silhouette so
   the row still reads as patient avatars before photos exist.
   =========================================================== */
.hbhb-hero__patients {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: #FFFFFF;
	border-radius: var(--hbhb-radius-md);
	box-shadow: var(--hbhb-shadow-float);
	padding: 10px 18px 10px 14px;
	margin: 24px auto 0;
}

/* Center the pill horizontally beneath the carousel */
.hbhb-carousel .hbhb-hero__patients {
	display: flex;
	width: max-content;
	max-width: 100%;
}

.hbhb-hero__patients-avatars {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.hbhb-hero__patients-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid #FFFFFF;
	box-shadow: 0 2px 4px -2px rgba(15, 31, 26, 0.18);
	background: rgba(15, 31, 26, 0.06);
	flex-shrink: 0;
	position: relative;
}

/* Distinct gradient backgrounds per empty slot — colorful by default */
.hbhb-hero__patients-avatar--slot-1 { background: linear-gradient(135deg, #F5C97D, #E89B5F); }
.hbhb-hero__patients-avatar--slot-2 { background: linear-gradient(135deg, #F08C5D, #C84A28); }
.hbhb-hero__patients-avatar--slot-3 { background: linear-gradient(135deg, #8B6F47, #5C4520); }
.hbhb-hero__patients-avatar--slot-4 { background: linear-gradient(135deg, #6BA77B, #2D7548); }
.hbhb-hero__patients-avatar--slot-5 { background: linear-gradient(135deg, #E8839C, #C84474); }

.hbhb-hero__patients-avatar + .hbhb-hero__patients-avatar {
	margin-left: -10px; /* overlap so they form a stack */
}

.hbhb-hero__patients-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbhb-hero__patients-avatar-fallback {
	width: 100%;
	height: 100%;
	display: block;
}

.hbhb-hero__patients-text {
	font-family: var(--hbhb-font);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hbhb-ink);
	letter-spacing: 0.01em;
	white-space: nowrap;
	line-height: 1.2;
}

@media (max-width: 900px) {
	.hbhb-hero__patients {
		padding: 8px 14px 8px 10px;
	}
	.hbhb-hero__patients-avatar {
		width: 28px;
		height: 28px;
		border-width: 1.5px;
	}
	.hbhb-hero__patients-avatar + .hbhb-hero__patients-avatar {
		margin-left: -8px;
	}
	.hbhb-hero__patients-text {
		font-size: 0.8125rem;
		white-space: normal;
	}
}

/* ===========================================================
   Clinical Approach Section
   -----------------------------------------------------------
   Two columns: text on left, orbital diagram on right.
   Green CTA banner below. All illustrations are inline SVG.
   =========================================================== */

.hbhb-approach {
	font-family: var(--hbhb-font);
	color: var(--hbhb-ink);
	padding: 80px 0;
	position: relative;
}

.hbhb-approach .hbhb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hbhb-approach__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	margin-bottom: 56px;
}

/* ----- LEFT: text content ----- */
.hbhb-approach__eyebrow-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}

.hbhb-approach__eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #1F8A52;
}

.hbhb-approach__eyebrow-rule {
	display: block;
	width: 48px;
	height: 2px;
	background: #1F8A52;
	border-radius: 2px;
}

.hbhb-approach__title {
	font-family: var(--hbhb-font);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #0F1F1A;
	margin: 0 0 28px;
}

.hbhb-approach__title em,
.hbhb-approach__title i {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 500;
	color: #1F8A52;
}

.hbhb-approach__para {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(15, 31, 26, 0.78);
}

.hbhb-approach__para p {
	margin: 0;
	flex: 1;
}

.hbhb-approach__para-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.hbhb-approach__para-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(31, 138, 82, 0.10);
	margin-top: 2px;
}

/* v1.80 — divider removed from the template. Rule kept as display:none
   so any cached HTML that still contains the old div renders nothing. */
.hbhb-approach__divider {
	display: none !important;
}

/* Natural spacing between consecutive paragraph blocks now that the
   divider (which previously carried the 26px/24px margins) is gone. */
.hbhb-approach__para + .hbhb-approach__para {
	margin-top: 36px;
}

/* ----- RIGHT: orbital diagram ----- */
.hbhb-approach__diagram {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1;
	margin: 0 auto;
}

.hbhb-approach__diagram-orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hbhb-approach__diagram-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56%;
	max-width: 280px;
}

.hbhb-approach__diagram-center svg {
	width: 100%;
	height: auto;
	display: block;
}

.hbhb-approach__orbit {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2;
}

.hbhb-approach__orbit--tl { top: 8%;    left: 0;   }
.hbhb-approach__orbit--tr { top: 8%;    right: 0;  }
.hbhb-approach__orbit--bl { bottom: 8%; left: 0;   }
.hbhb-approach__orbit--br { bottom: 8%; right: 0;  }

.hbhb-approach__orbit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: 0 6px 16px -6px rgba(15, 31, 26, 0.12);
	border: 1px solid rgba(31, 138, 82, 0.10);
}

.hbhb-approach__orbit-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #0F1F1A;
	text-align: center;
	max-width: 110px;
	line-height: 1.25;
}

/* ----- CTA banner ----- */
.hbhb-approach__cta {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 36px 56px;
	display: flex;
	align-items: center;
	gap: 28px;
	color: #FFFFFF;
	box-shadow: 0 12px 36px -16px rgba(15, 31, 26, 0.30);
}

.hbhb-approach__cta-leaves {
	position: absolute;
	bottom: 0;
	width: 180px;
	height: auto;
	pointer-events: none;
}

.hbhb-approach__cta-leaves--left {
	left: 0;
}

.hbhb-approach__cta-leaves--right {
	right: 0;
}

.hbhb-approach__cta-shield {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	position: relative;
	z-index: 2;
}

.hbhb-approach__cta-body {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.hbhb-approach__cta-heading {
	margin: 0;
	font-family: var(--hbhb-font);
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	color: #FFFFFF;
	flex: 1;
	min-width: 220px;
}

.hbhb-approach__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: #FFFFFF;
	color: #1F8A52;
	text-decoration: none;
	font-family: var(--hbhb-font);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.2px;
	border-radius: 999px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.20);
}

.hbhb-approach__cta-button:hover,
.hbhb-approach__cta-button:focus-visible {
	color: #176A3F;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
	outline: none;
}

.hbhb-approach__cta-button svg {
	transition: transform 0.25s ease;
}

.hbhb-approach__cta-button:hover svg {
	transform: translateX(3px);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
	.hbhb-approach {
		padding: 64px 0;
	}
	.hbhb-approach__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 40px;
	}
	.hbhb-approach__diagram {
		max-width: 440px;
	}
	.hbhb-approach__orbit-icon {
		width: 60px;
		height: 60px;
	}
	.hbhb-approach__orbit-icon svg {
		width: 28px;
		height: 28px;
	}
	.hbhb-approach__cta {
		padding: 28px 32px;
	}
}

@media (max-width: 600px) {
	.hbhb-approach__diagram {
		max-width: 360px;
	}
	.hbhb-approach__orbit-icon {
		width: 52px;
		height: 52px;
	}
	.hbhb-approach__orbit-icon svg {
		width: 24px;
		height: 24px;
	}
	.hbhb-approach__orbit-label {
		font-size: 0.75rem;
		max-width: 90px;
	}
	.hbhb-approach__cta {
		padding: 24px 20px;
		gap: 16px;
		border-radius: 16px;
	}
	.hbhb-approach__cta-shield {
		width: 48px;
		height: 48px;
	}
	.hbhb-approach__cta-shield svg {
		width: 28px;
		height: 28px;
	}
	.hbhb-approach__cta-leaves {
		width: 120px;
	}
}

/* ===========================================================
   POLISH LAYER (v1.43) — typography, section consistency,
   spacing standardization, scroll reveal animations.
   -----------------------------------------------------------
   This block sits last in the cascade so it overrides any
   per-section variations without touching their CSS above.
   No layout, content, or color changes — only refinements.
   =========================================================== */

/* ----- Two-font typography system -----
   Headings + buttons + labels: Montserrat
   Body text: Helvetica → Helvetica Neue → Arial → sans-serif */
:root {
	--hbhb-font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
	--hbhb-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Make headings + visual labels Montserrat */
.hbhb-main h1,
.hbhb-main h2,
.hbhb-main h3,
.hbhb-main h4,
.hbhb-main [class*="__title"],
.hbhb-main [class*="__heading"],
.hbhb-main [class*="__eyebrow"],
.hbhb-main [class*="__name"],
.hbhb-main [class*="__label"],
.hbhb-main [class*="__btn"],
.hbhb-main [class*="-btn"] {
	font-family: var(--hbhb-font-heading) !important;
}

/* Body text — paragraphs, list items, descriptions, generic spans */
.hbhb-main,
.hbhb-main p,
.hbhb-main li,
.hbhb-main [class*="__description"],
.hbhb-main [class*="__text"],
.hbhb-main [class*="__excerpt"],
.hbhb-main [class*="__specialty"],
.hbhb-main [class*="__experience"],
.hbhb-main [class*="__para"] p,
.hbhb-main [class*="__about-text"] {
	font-family: var(--hbhb-font-body);
}

/* ----- Unified section-head treatment -----
   Same font-size / weight / letter-spacing / colour / margins
   across every section's eyebrow + title + description. */

.hbhb-doctors__eyebrow,
.hbhb-services__eyebrow,
.hbhb-approach__eyebrow,
.hbhb-gallery__eyebrow,
.hbhb-reviews__eyebrow,
.hbhb-blog__eyebrow {
	font-family: var(--hbhb-font-heading) !important;
	font-size: 0.8125rem !important;       /* 13px */
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	color: #1F8A52 !important;
	margin: 0 0 12px !important;
	display: inline-block;
}

.hbhb-doctors__title,
.hbhb-services__title,
.hbhb-approach__title,
.hbhb-gallery__title,
.hbhb-reviews__title,
.hbhb-blog__title {
	font-family: var(--hbhb-font-heading) !important;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: #0F1F1A !important;
	margin: 0 0 14px !important;
}

/* Italic emphasis inside approach title keeps its serif treatment */
.hbhb-approach__title em,
.hbhb-approach__title i {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	color: #1F8A52 !important;
}

.hbhb-doctors__description,
.hbhb-services__description,
.hbhb-gallery__description,
.hbhb-reviews__description,
.hbhb-blog__description {
	font-family: var(--hbhb-font-body) !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
	letter-spacing: 0 !important;
	color: rgba(15, 31, 26, 0.65) !important;
	margin: 0 !important;
}

/* Section-head wrapper → 32px gap before content */
.hbhb-doctors__head,
.hbhb-gallery__head,
.hbhb-reviews__head,
.hbhb-blog__head {
	margin-bottom: 32px !important;
}

/* Services head has the layout grid directly after — keep its
   tighter margin since the pinned content needs to sit close. */
.hbhb-services__head {
	margin-bottom: 28px !important;
}

/* ----- Unified section padding (60-80 desktop / 50-60 tablet / 40-50 mobile) ----- */
.hbhb-doctors,
.hbhb-services,
.hbhb-approach,
.hbhb-gallery,
.hbhb-reviews,
.hbhb-blog {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

@media (max-width: 900px) {
	.hbhb-doctors,
	.hbhb-services,
	.hbhb-approach,
	.hbhb-gallery,
	.hbhb-reviews,
	.hbhb-blog {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors,
	.hbhb-services,
	.hbhb-approach,
	.hbhb-gallery,
	.hbhb-reviews,
	.hbhb-blog {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}
}

/* ===========================================================
   Scroll reveal animations
   -----------------------------------------------------------
   - Headings: slide in from left/right (label fade-left, title fade-right)
   - Content (cards, descriptions, images): fade up from 24px below
   - Triggered once when entering viewport (JS adds .is-revealed)
   =========================================================== */

[data-hbhb-reveal] {
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

[data-hbhb-reveal="fade-left"] {
	transform: translateX(-32px);
}

[data-hbhb-reveal="fade-right"] {
	transform: translateX(32px);
}

[data-hbhb-reveal="fade-up"] {
	transform: translateY(24px);
}

[data-hbhb-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Reduced-motion users — no transitions, just present */
@media (prefers-reduced-motion: reduce) {
	[data-hbhb-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ===========================================================
   v1.44 refinements
   -----------------------------------------------------------
   1. Approach section header centered above the 2-col grid
   2. Tighter spacing between Doctors and Services sections
   =========================================================== */

/* ----- 1. Approach centered head ----- */
.hbhb-approach__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px;
}

/* Eyebrow-rule was a left-aligned 48px bar in the old layout.
   In the centered head, stack the eyebrow text on top and
   the rule directly below it, both centered. */
.hbhb-approach__head .hbhb-approach__eyebrow-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.hbhb-approach__head .hbhb-approach__eyebrow-rule {
	width: 48px;
	height: 2px;
	background: #1F8A52;
	border-radius: 2px;
}

.hbhb-approach__head .hbhb-approach__title {
	margin: 0;
}

/* The 2-col grid no longer holds the head, so re-center the diagram
   against the paragraphs by switching align-items from center to start
   — paragraphs flow naturally on the left while the diagram sits at the
   top of its column. (Optional: keep as center if the user prefers.) */
@media (max-width: 960px) {
	.hbhb-approach__head {
		margin-bottom: 28px;
	}
}

/* ----- 2. Reduce vertical gap between Doctors and Services ----- */
.hbhb-doctors {
	padding-bottom: 48px !important;
}

.hbhb-services {
	padding-top: 48px !important;
}

@media (max-width: 900px) {
	.hbhb-doctors {
		padding-bottom: 36px !important;
	}
	.hbhb-services {
		padding-top: 36px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors {
		padding-bottom: 28px !important;
	}
	.hbhb-services {
		padding-top: 28px !important;
	}
}

/* ===========================================================
   v1.45 — Hero parallax + mobile carousel fix + italic word fix
   =========================================================== */

/* ----- Hero decorative parallax layer ----- */
.hbhb-hero__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

/* Hero content needs to sit ABOVE the decoration */
.hbhb-hero .hbhb-container {
	position: relative;
	z-index: 2;
}

/* Common decoration shape behavior */
.hbhb-hero__decor-circle,
.hbhb-hero__decor-dots {
	position: absolute;
	display: block;
	pointer-events: none;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* Large background circle — top-left, partly off-screen */
.hbhb-hero__decor-circle--lg {
	top: -120px;
	left: -120px;
	width: 360px;
	height: 360px;
	border-radius: 999px;
	border: 1px solid rgba(31, 138, 82, 0.18);
	opacity: 0.55;
}

/* Mid-depth circle — overlap area near content edge */
.hbhb-hero__decor-circle--md {
	top: 50%;
	left: 38%;
	width: 200px;
	height: 200px;
	border-radius: 999px;
	border: 1px solid rgba(31, 138, 82, 0.14);
	opacity: 0.50;
}

/* Dot grid — top right, cream/beige dots */
.hbhb-hero__decor-dots {
	top: 80px;
	right: 80px;
	width: 140px;
	height: 90px;
	background-image: radial-gradient(rgba(232, 178, 138, 0.55) 1.4px, transparent 1.4px);
	background-size: 14px 14px;
	background-position: 0 0;
	opacity: 0.85;
}

@media (max-width: 900px) {
	/* Smaller decorations on tablet/mobile + static (no JS movement) */
	.hbhb-hero__decor-circle--lg { width: 260px; height: 260px; top: -80px; left: -80px; }
	.hbhb-hero__decor-circle--md { width: 140px; height: 140px; }
	.hbhb-hero__decor-dots      { width: 100px; height: 70px; top: 40px; right: 32px; }
}

@media (max-width: 600px) {
	.hbhb-hero__decor-circle--md { display: none; }  /* drop mid circle on small phones for less clutter */
	.hbhb-hero__decor-dots      { width: 80px; height: 56px; opacity: 0.65; }
}

/* ----- Doctors carousel — mobile rendering (v1.47 — superseded v1.45) -----
   v1.45's `min-height: 0 !important` let Swiper measure cards as zero-height
   during init on mobile, which collapsed every card to nothing. v1.47 keeps
   the auto-height intent but adds a safety floor and lifts `contain` so
   Swiper can actually measure card content during its init pass. */
@media (max-width: 900px) {
	.hbhb-doctors .swiper-wrapper {
		align-items: stretch !important;
	}
	.hbhb-doctors .swiper-slide {
		height: auto !important;
		display: flex !important;          /* let card fill slide if shorter */
		flex-direction: column !important;
	}
	.hbhb-doctors .hbhb-doctor-card {
		height: auto !important;
		min-height: 520px !important;      /* safety floor — image ~336 + body ~150 ≈ 486 */
		flex: 1 1 auto !important;
		overflow: hidden !important;
		/* IMPORTANT: lift `contain: layout style` on mobile so Swiper's measurement
		   logic can read the card's natural dimensions. With contain on, Swiper
		   sees the card as 0×0 during init and collapses the wrapper. */
		contain: none !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card {
		min-height: 580px !important;      /* taller cards on small phones — image grows with width */
	}
}

/* ----- Approach italic emphasis — strengthen so theme can't override ----- */
/* The italic green serif on `<em>health</em>` was already declared with
   !important earlier, but extending to body-prefixed selectors raises
   specificity to (0,1,1+ahead) so even aggressive parent themes lose. */
body .hbhb-approach__title em,
body .hbhb-approach__title i,
html body .hbhb-main .hbhb-approach__title em,
html body .hbhb-main .hbhb-approach__title i {
	font-family: Georgia, 'Times New Roman', 'Playfair Display', serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	color: #1F8A52 !important;
	letter-spacing: -0.005em !important;
}

/* ===========================================================
   v1.46 — Three fixes
   1. Hero parallax circles → cream/beige (visible vs dark green)
   2. Title accent → bulletproof against Elementor overrides
   3. Patient avatar image sizing → cover crop face
   =========================================================== */

/* ----- 1. Hero parallax — visible cream/beige shapes ----- */
/* Previous green-on-green was invisible against the dark green
   hero. Match the dot grid's warm cream tone for cohesion.
   All declarations !important so Elementor / theme cannot override. */
body .hbhb-hero .hbhb-hero__decor-circle--lg {
	border: 1px solid rgba(232, 188, 154, 0.28) !important;
	background: transparent !important;
	opacity: 1 !important;
}

body .hbhb-hero .hbhb-hero__decor-circle--md {
	border: 1px solid rgba(232, 188, 154, 0.22) !important;
	background: transparent !important;
	opacity: 1 !important;
}

body .hbhb-hero .hbhb-hero__decor-dots {
	background-image: radial-gradient(rgba(232, 188, 154, 0.55) 1.4px, transparent 1.4px) !important;
	background-size: 14px 14px !important;
	opacity: 0.95 !important;
}

/* Re-assert wrapper positioning + z-index ordering against
   any Elementor section that sets position:static on children. */
body .hbhb-hero {
	position: relative !important;
}

body .hbhb-hero .hbhb-hero__decor {
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	z-index: 1 !important;
}

body .hbhb-hero > .hbhb-container {
	position: relative !important;
	z-index: 2 !important;
}

/* ----- 2. Hero title accent — structural guards only.
   Color, font-style, and -webkit-text-fill-color are NOT set here
   anymore — they're controlled by:
     (a) the dynamic CSS rule from hbhb_render_hero_css() using
         the admin's Highlight Word Color setting, and
     (b) the inline style="color:X !important" the helper writes
         onto the <em> / <span> wrapper itself.
   That makes the admin Color Settings the single source of truth. ----- */
body .hbhb-hero .hbhb-hero__title-accent,
html body .hbhb-main .hbhb-hero .hbhb-hero__title-accent {
	font-weight: inherit !important;
	display: inline !important;
	background: transparent !important;
}

/* ----- 3. Avatar image — center-crop face, not stretched ----- */
body .hbhb-hero__patients-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;  /* bias toward face/upper area */
	display: block !important;
	border-radius: inherit !important;
}

/* ===========================================================
   v1.48 — Mobile spacing refinements
   1. Doctor card body padding (button has horizontal breathing room)
   2. Doctors ↔ Services gap on mobile (was too tight)
   3. Carousel nav margin (arrows breathe from card + next section)
   =========================================================== */

/* ----- 1. Body padding on mobile — gives the Book Appointment
   button visible white space on the left and right edges so its
   rounded pill ends don't touch the screen ----- */
@media (max-width: 900px) {
	.hbhb-doctors .hbhb-doctor-card__body {
		padding: 14px 20px 18px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card__body {
		padding: 14px 22px 20px !important;
	}
	/* Button itself: keep box-sizing so width:100% respects padding */
	.hbhb-doctors .hbhb-doctor-card__btn {
		box-sizing: border-box !important;
		max-width: 100% !important;
		padding: 10px 16px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}
}

/* ----- 2. Doctors → Services gap on mobile — restore breathing room.
   v1.44 trimmed this to 28px each side which felt tight on small
   screens. Bumping to 56/56 = 112px total gap matches the visual
   rhythm of other section transitions on mobile. ----- */
@media (max-width: 900px) {
	.hbhb-doctors {
		padding-bottom: 56px !important;
	}
	.hbhb-services {
		padding-top: 56px !important;
	}
}

@media (max-width: 600px) {
	.hbhb-doctors {
		padding-bottom: 48px !important;
	}
	.hbhb-services {
		padding-top: 48px !important;
	}
}

/* ----- 3. Carousel nav buttons — gentle gap from the card above
   so the prev/next arrows don't hug the Book Appointment button.
   Also gentle margin below so they're not crammed against the
   doctors section's bottom edge. ----- */
@media (max-width: 900px) {
	.hbhb-doctors .hbhb-doctors__nav,
	.hbhb-doctors .swiper-button-prev,
	.hbhb-doctors .swiper-button-next {
		margin-top: 12px !important;
	}
}

/* ===========================================================
   v1.49 — Mobile button clipping fix (supersedes v1.47 flex rules)
   -----------------------------------------------------------
   v1.47 set the swiper-slide to display:flex + card to flex:1 1 auto
   to handle Swiper measurement issues. That brought the cards back but
   introduced a new problem: flex-shrink:1 (implied by flex:1 1 auto)
   crunched the card to whatever height Swiper measured for the slide,
   and overflow:hidden chopped off the Book Appointment button at the
   bottom.

   v1.49 removes the flex equalization on mobile entirely. Cards size
   to their natural content height (image + body + button). The
   min-height safety floor from v1.47 stays as a fallback.
   =========================================================== */

@media (max-width: 900px) {
	/* Slides become plain blocks — no flex equalization */
	.hbhb-doctors .swiper-slide {
		display: block !important;
		height: auto !important;
	}

	/* Wrapper aligns slides to top, doesn't stretch them */
	.hbhb-doctors .swiper-wrapper {
		align-items: flex-start !important;
	}

	/* Card sizes to its own content. NO flex-shrink (would crunch
	   content into a shorter slide height and clip the button). */
	.hbhb-doctors .hbhb-doctor-card {
		height: auto !important;
		min-height: 520px !important;
		flex: 0 0 auto !important;        /* explicit: no grow, no shrink, basis from content */
		overflow: hidden !important;       /* keeps rounded corners on the image */
		contain: none !important;          /* lifts Swiper's measurement isolation */
	}
}

@media (max-width: 600px) {
	.hbhb-doctors .hbhb-doctor-card {
		min-height: 580px !important;
	}
}

/* ===========================================================
   v1.50 — Mobile button visibility (Elementor-proof)
   -----------------------------------------------------------
   The Book Appointment button text was being clipped vertically
   because Elementor's button styles (.elementor-button or
   theme equivalents) were applying line-height: 1, height: <fixed>
   and overflow: hidden, which crushed the text descenders.

   This block uses (0,3,1+) specificity via `html body` prefix
   + element selector + class, plus !important on every property,
   so no Elementor / theme rule can win the cascade.
   =========================================================== */

@media (max-width: 900px) {

	/* ----- Body containing the button ----- */
	/* Ensure body doesn't accidentally clip its overflow */
	html body .hbhb-doctors .hbhb-doctor-card__body {
		overflow: visible !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* ----- Book Appointment button — ALL critical properties ----- */
	html body .hbhb-doctors .hbhb-doctor-card a.hbhb-doctor-card__btn,
	html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;

		/* Sizing — explicit floor + auto growth, no maximum */
		width: 100% !important;
		height: auto !important;
		min-height: 44px !important;        /* WCAG touch target; also guarantees enough room for text + padding */
		max-height: none !important;

		/* Internal spacing — generous vertical padding so descenders never touch borders */
		padding: 12px 18px !important;

		/* Typography — line-height must be 1.4 to fit "p", "o" descenders without clipping */
		font-family: var(--hbhb-font-heading), 'Montserrat', sans-serif !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
		letter-spacing: 0.2px !important;
		text-decoration: none !important;
		text-transform: none !important;
		white-space: nowrap !important;

		/* Visual — preserves green pill design */
		background: #1F8A52 !important;
		color: #FFFFFF !important;
		border: 0 !important;
		border-radius: 999px !important;
		box-shadow: 0 4px 12px -4px rgba(31, 138, 82, 0.40) !important;

		/* Box behavior — defeats any clipping from theme button styles */
		overflow: visible !important;
		box-sizing: border-box !important;
		margin: 0 !important;

		/* Defeat browser button appearance */
		appearance: none !important;
		-webkit-appearance: none !important;
	}

	/* Hover/focus stays consistent */
	html body .hbhb-doctors .hbhb-doctor-card a.hbhb-doctor-card__btn:hover,
	html body .hbhb-doctors .hbhb-doctor-card a.hbhb-doctor-card__btn:focus-visible {
		background: #176A3F !important;
		color: #FFFFFF !important;
		text-decoration: none !important;
		outline: none !important;
	}

	/* Arrow icon inside button — lock to small size, never inflated by themes */
	html body .hbhb-doctors .hbhb-doctor-card__btn-arrow,
	html body .hbhb-doctors .hbhb-doctor-card__btn svg {
		display: inline-flex !important;
		flex-shrink: 0 !important;
		width: 14px !important;
		height: 14px !important;
		font-size: 13px !important;
		line-height: 1 !important;
		margin: 0 !important;
	}

	/* The arrow element is a <span> with content "→" — ensure font renders cleanly */
	html body .hbhb-doctors .hbhb-doctor-card__btn-arrow {
		width: auto !important;
		height: auto !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
	}

	/* ----- Specifically defeat .elementor-button if Elementor has wrapped it ----- */
	html body .hbhb-doctors .elementor-button.hbhb-doctor-card__btn,
	html body .hbhb-doctors a.elementor-button.hbhb-doctor-card__btn {
		height: auto !important;
		min-height: 44px !important;
		line-height: 1.4 !important;
		padding: 12px 18px !important;
		overflow: visible !important;
	}
}

/* ===========================================================
   v1.52 — Hero left crescent (matches reference design)
   -----------------------------------------------------------
   Restyles the existing .hbhb-hero__decor-circle--lg/--md to
   render as prominent layered crescents on the left side of
   the hero, matching the visual rhythm of the reference's
   .crescent-1...crescent-4 stack.

   Technique: a giant circle (1px cream-beige outline) is
   positioned mostly off-screen to the left, so only its right
   edge — the curving crescent — is visible inside the hero.
   A smaller concentric circle adds depth (the inner crescent
   layer). Both use top:calc(50% - half) instead of
   translateY(-50%) so the parallax JS can use translate3d
   for cursor-follow without overriding the vertical centering.
   =========================================================== */

/* ----- Primary large crescent — main visual element ----- */
body .hbhb-hero .hbhb-hero__decor-circle--lg {
	/* Override v1.46's smaller positioning */
	width: 110vw !important;
	height: 110vw !important;
	max-width: 1400px !important;
	max-height: 1400px !important;
	left: -55vw !important;
	top: calc(50% - 55vw) !important;     /* vertical centering w/o transform */
	border: 1.5px solid rgba(232, 188, 154, 0.22) !important;
	border-radius: 50% !important;
	background: transparent !important;
	opacity: 1 !important;
	box-sizing: border-box !important;
}

@media (min-width: 1401px) {
	body .hbhb-hero .hbhb-hero__decor-circle--lg {
		top: calc(50% - 700px) !important;    /* fix vertical center when max-height clamps */
	}
}

/* ----- Inner concentric crescent — adds depth ----- */
body .hbhb-hero .hbhb-hero__decor-circle--md {
	/* Override v1.46 — make this a smaller left-side companion crescent
	   rather than a mid-zone accent circle */
	width: 70vw !important;
	height: 70vw !important;
	max-width: 900px !important;
	max-height: 900px !important;
	left: -35vw !important;
	top: calc(50% - 35vw) !important;
	border: 1px solid rgba(232, 188, 154, 0.14) !important;
	border-radius: 50% !important;
	background: transparent !important;
	opacity: 1 !important;
	box-sizing: border-box !important;
}

@media (min-width: 1287px) {  /* 35vw at >1287px hits the max-height cap (450px = half of 900) */
	body .hbhb-hero .hbhb-hero__decor-circle--md {
		top: calc(50% - 450px) !important;
	}
}

/* ----- Mobile / tablet sizing ----- */
@media (max-width: 900px) {
	body .hbhb-hero .hbhb-hero__decor-circle--lg {
		width: 150vw !important;
		height: 150vw !important;
		left: -75vw !important;
		top: calc(50% - 75vw) !important;
		border-width: 1.2px !important;
	}
	body .hbhb-hero .hbhb-hero__decor-circle--md {
		width: 95vw !important;
		height: 95vw !important;
		left: -47vw !important;
		top: calc(50% - 47vw) !important;
	}
}

@media (max-width: 600px) {
	/* On small phones the inner crescent gets too cluttered — hide it
	   and let the primary crescent carry the decoration alone */
	body .hbhb-hero .hbhb-hero__decor-circle--md {
		display: none !important;
	}
	body .hbhb-hero .hbhb-hero__decor-circle--lg {
		border-color: rgba(232, 188, 154, 0.18) !important;  /* slightly fainter on small screens */
	}
}

/* ----- Hero overflow guard ----- */
/* The big crescent extends well beyond the hero box. The decor wrapper
   already has overflow:hidden, but re-assert against Elementor in case
   the section has its own overflow rules. */
body .hbhb-hero {
	overflow: hidden !important;
}

/* ===========================================================
   v1.55 — Hero animations: heading mouse-follow + crescent breathing
   -----------------------------------------------------------
   1. The h1.hbhb-hero__title now carries data-hbhb-parallax="0.020"
      → existing hero-parallax.js applies subtle translate3d to it
      as the cursor moves. Only the heading moves — description,
      buttons, image stack, etc. are untouched.

   2. The crescent gets a CSS @keyframes breathing animation:
      slow continuous scale 1.0 ↔ 1.04 over 8s. No JS, no mouse —
      purely ambient. The inner crescent uses a slightly different
      duration so the two layers breathe slightly out of phase,
      creating organic depth.
   =========================================================== */

/* Breathing keyframes — gentle scale pulse */
@keyframes hbhb-hero-breathe {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.035);
		opacity: 0.88;
	}
}

/* Primary crescent breathes at 8s cycle */
body .hbhb-hero .hbhb-hero__decor-circle--lg {
	animation: hbhb-hero-breathe 8s ease-in-out infinite;
	transform-origin: center center;
	will-change: transform, opacity;
}

/* Inner concentric crescent breathes at 6.5s — slightly different rhythm
   so the two layers feel organic together rather than perfectly synced */
body .hbhb-hero .hbhb-hero__decor-circle--md {
	animation: hbhb-hero-breathe 6.5s ease-in-out infinite;
	animation-delay: -2s;                              /* offset start so they're never in lockstep */
	transform-origin: center center;
	will-change: transform, opacity;
}

/* Heading transition — smooths the cursor-follow movement.
   The JS sets transform: translate3d(x,y,0) via lerp(0.08) already,
   but this transition adds a CSS layer of smoothing as well so the
   final movement reads as buttery. */
body .hbhb-hero .hbhb-hero__title[data-hbhb-parallax] {
	will-change: transform;
	transition: transform 0.05s linear;
}

/* Accessibility — disable both animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
	body .hbhb-hero .hbhb-hero__decor-circle--lg,
	body .hbhb-hero .hbhb-hero__decor-circle--md {
		animation: none !important;
	}
	body .hbhb-hero .hbhb-hero__title[data-hbhb-parallax] {
		transform: none !important;
		transition: none !important;
	}
}

/* On mobile (≤900px), the parallax JS already disables itself,
   so we don't need to override the heading. But we DO disable
   the breathing animation on small phones to save battery —
   the crescent stays static on phones, animated on desktop. */
@media (max-width: 600px) {
	body .hbhb-hero .hbhb-hero__decor-circle--lg,
	body .hbhb-hero .hbhb-hero__decor-circle--md {
		animation: none !important;
	}
}

/* ===========================================================
   v1.56 — Custom diagram image styling
   -----------------------------------------------------------
   When the admin uploads a custom centerpiece image, it renders
   as <img class="hbhb-approach__diagram-image"> in place of the
   built-in SVG. Style it to fit the same square slot.
   =========================================================== */

.hbhb-approach__diagram-image {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
	object-fit: contain;
	aspect-ratio: 1 / 1;             /* keep the centerpiece square so it sits inside the orbit ring */
}

/* ===========================================================
   v1.57 — Diagram image mode (replaces entire orbital diagram)
   -----------------------------------------------------------
   When admin uploads a diagram image, the WHOLE right column
   becomes that image (not just the centerpiece). The image fills
   the diagram's allocated space at a soft, rounded square aspect.
   =========================================================== */

.hbhb-approach__diagram--image {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	border-radius: 20px;                /* soft rounded corners */
	background: rgba(31, 138, 82, 0.04); /* faint backdrop so portrait images don't look adrift */
}

.hbhb-approach__diagram--image .hbhb-approach__diagram-image {
	width: 100%;
	height: 100%;
	object-fit: cover;                   /* fill the slot, crop if needed */
	display: block;
	max-width: none;                     /* override the v1.56 narrower constraint */
	aspect-ratio: auto;                  /* let object-fit drive sizing */
}

@media (max-width: 960px) {
	.hbhb-approach__diagram--image {
		max-width: 440px;
	}
}

@media (max-width: 600px) {
	.hbhb-approach__diagram--image {
		max-width: 360px;
		border-radius: 16px;
	}
}

/* ===========================================================
   v1.58 — Diagram image dimensions are admin-controlled
   -----------------------------------------------------------
   v1.57 hardcoded max-width 520px, aspect-ratio 1/1, radius 20.
   v1.58 lifts all of these to inline styles driven by admin
   settings (Image Width, Height, Max Width %, Border Radius).
   This block just keeps the structural rules — alignment,
   overflow clip, fill behavior — that aren't user-configurable.
   =========================================================== */

.hbhb-approach__diagram--image {
	position: relative !important;
	margin: 0 auto !important;
	display: block !important;
	overflow: hidden !important;
	background: rgba(31, 138, 82, 0.04);
	/* width, height, max-width, aspect-ratio, border-radius all come from
	   the inline style="..." attribute generated by the template */
}

.hbhb-approach__diagram--image .hbhb-approach__diagram-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	max-width: 100% !important;
	aspect-ratio: auto !important;
	/* border-radius inherits from the inline style on the <img> for crisp clipping */
}

/* ===========================================================
   v1.59 — Doctor card colour + typography updates
   -----------------------------------------------------------
   Pure colour + font overrides; no layout, spacing, alignment,
   or sizing properties touched. High specificity + !important
   so existing rules (including Elementor) lose the cascade.
   =========================================================== */

/* ----- 1. Primary brand green → #3E6745 across all primary buttons ----- */
html body .hbhb-doctors a.hbhb-doctor-card__btn,
html body .hbhb-doctors .hbhb-doctor-card__btn,
html body .hbhb-doctors .hbhb-doctor-card__submit-review,
html body .hbhb-doctors button.hbhb-doctor-card__submit-review,
html body .hbhb-doctors a.hbhb-doctor-card__read-more,
html body .hbhb-doctors .hbhb-doctor-card__read-more {
	background: #3E6745 !important;
	background-color: #3E6745 !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 12px -4px rgba(62, 103, 69, 0.40) !important;
}

html body .hbhb-doctors a.hbhb-doctor-card__btn:hover,
html body .hbhb-doctors .hbhb-doctor-card__btn:focus-visible,
html body .hbhb-doctors .hbhb-doctor-card__submit-review:hover:not(:disabled),
html body .hbhb-doctors .hbhb-doctor-card__submit-review:focus-visible:not(:disabled),
html body .hbhb-doctors .hbhb-doctor-card__read-more:hover,
html body .hbhb-doctors .hbhb-doctor-card__read-more:focus-visible {
	background: #2F5236 !important;        /* slightly darker shade for hover state */
	background-color: #2F5236 !important;
	color: #FFFFFF !important;
}

/* ----- 2. Heart/rating/flip pill backgrounds → #3E6745 ----- */
html body .hbhb-doctors .hbhb-doctor-card__action,
html body .hbhb-doctors button.hbhb-doctor-card__action,
html body .hbhb-doctors .hbhb-doctor-card__action--likes,
html body .hbhb-doctors .hbhb-doctor-card__action--rating,
html body .hbhb-doctors .hbhb-doctor-card__action--flip {
	background: #3E6745 !important;
	background-color: #3E6745 !important;
	border-color: #3E6745 !important;
	box-shadow: 0 3px 8px -3px rgba(62, 103, 69, 0.45) !important;
}

html body .hbhb-doctors .hbhb-doctor-card__action:hover,
html body .hbhb-doctors .hbhb-doctor-card__action:focus-visible {
	background: #2F5236 !important;
	background-color: #2F5236 !important;
}

/* Rating pill — non-clickable, keep its no-hover behaviour against the new shade */
html body .hbhb-doctors .hbhb-doctor-card__action--rating:hover {
	background: #3E6745 !important;
	background-color: #3E6745 !important;
}

/* ----- 3. Doctor name + specialty → black + Montserrat ----- */
html body .hbhb-doctors .hbhb-doctor-card__name {
	color: #000000 !important;
	font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}

html body .hbhb-doctors .hbhb-doctor-card__specialty {
	color: #000000 !important;
	font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}

/* ===========================================================
   v1.60 — Doctor carousel nav arrows → #3E6745
   -----------------------------------------------------------
   Matches the v1.59 primary-button / pill colour update. The
   arrow chevron SVG inside the button uses stroke="currentColor",
   so setting the button's `color` automatically tints the chevron.
   =========================================================== */

html body .hbhb-doctors .hbhb-doctors__nav,
html body .hbhb-doctors button.hbhb-doctors__nav {
	background: #3E6745 !important;
	background-color: #3E6745 !important;
	border: 1px solid #3E6745 !important;
	border-color: #3E6745 !important;
	color: #FFFFFF !important;                 /* chevron stroke inherits this */
	box-shadow: 0 10px 30px -12px rgba(62, 103, 69, 0.30) !important;
}

html body .hbhb-doctors .hbhb-doctors__nav:hover,
html body .hbhb-doctors .hbhb-doctors__nav:focus-visible,
html body .hbhb-doctors button.hbhb-doctors__nav:hover,
html body .hbhb-doctors button.hbhb-doctors__nav:focus-visible {
	background: #2F5236 !important;            /* slightly darker hover shade (matches v1.59) */
	background-color: #2F5236 !important;
	border-color: #2F5236 !important;
	color: #FFFFFF !important;
	box-shadow: 0 14px 34px -10px rgba(47, 82, 54, 0.40) !important;
}

/* Disabled state — same fill, just dimmer (Swiper adds .swiper-button-disabled at edges) */
html body .hbhb-doctors .hbhb-doctors__nav.swiper-button-disabled {
	background: #3E6745 !important;
	border-color: #3E6745 !important;
	color: #FFFFFF !important;
	opacity: 0.35 !important;
}

/* ===========================================================
   v1.62 — Hero stats / rating card / patients → Helvetica
   -----------------------------------------------------------
   The earliest hero rules use var(--hbhb-font) which still
   resolves to Plus Jakarta Sans (a leftover from the original
   design tokens). Other sections were migrated to Helvetica
   via --hbhb-font-body in the v1.43 polish layer, but the hero
   stats bar, rating card, and "15000+ satisfied patients" pill
   were never updated. This block force-aligns them to the same
   Helvetica stack as the rest of the site.
   =========================================================== */

/* Hero stats bar — the "25+ practitioners", "15+ services", etc. */
html body .hbhb-hero .hbhb-hero__stat-value,
html body .hbhb-hero .hbhb-hero__stat-label {
	font-family: var(--hbhb-font-body) !important;
}

/* Rating card — "4.9 Rating / From 5,000 reviews" overlay */
html body .hbhb-hero .hbhb-rating-card,
html body .hbhb-hero .hbhb-rating-card__title,
html body .hbhb-hero .hbhb-rating-card__subtitle,
html body .hbhb-hero .hbhb-rating-card__text {
	font-family: var(--hbhb-font-body) !important;
}

/* Patients pill — "15000+ satisfied patients" */
html body .hbhb-hero .hbhb-hero__patients,
html body .hbhb-hero .hbhb-hero__patients * {
	font-family: var(--hbhb-font-body) !important;
}

/* Hero description / body copy that still uses --hbhb-font.
   The eyebrow pill, paragraph, and button labels should all
   share Helvetica with the rest of the site too. */
html body .hbhb-hero .hbhb-hero__description,
html body .hbhb-hero .hbhb-hero__eyebrow,
html body .hbhb-hero .hbhb-hero__primary-btn,
html body .hbhb-hero .hbhb-hero__secondary-btn,
html body .hbhb-hero .hbhb-hero__cta {
	font-family: var(--hbhb-font-body) !important;
}

/* ===========================================================
   v1.63 — Uniform 16px font-size on all primary CTA buttons
   -----------------------------------------------------------
   Before this block, buttons ranged from 10px (Read more) to
   16px (hero). User asked for one consistent size across the
   homepage. 16px chosen because:
     – It's the modern web-design default for primary CTAs
     – Above the 14px accessibility minimum
     – Already matches the hero buttons (Book A Visit, Explore Services)

   Tertiary inline text links (.hbhb-doctor-card__read-more,
   .hbhb-blog__card-cta arrow link) are NOT touched here — they're
   inline links, not CTA buttons, and keeping them smaller
   maintains visual hierarchy.
   =========================================================== */

/* Hero primary + secondary buttons */
html body .hbhb-hero .hbhb-hero__primary-btn,
html body .hbhb-hero .hbhb-hero__secondary-btn,
html body .hbhb-hero a.hbhb-hero__primary-btn,
html body .hbhb-hero a.hbhb-hero__secondary-btn {
	font-size: 16px !important;
}

/* Doctor card primary buttons */
html body .hbhb-doctors .hbhb-doctor-card__btn,
html body .hbhb-doctors a.hbhb-doctor-card__btn,
html body .hbhb-doctors .hbhb-doctor-card__submit-review,
html body .hbhb-doctors button.hbhb-doctor-card__submit-review {
	font-size: 16px !important;
}

/* Doctor card inner span (matches the inline-style update in the
   template — needed in case any other span ends up rendered) */
html body .hbhb-doctors .hbhb-doctor-card__btn > span,
html body .hbhb-doctors .hbhb-doctor-card__btn > span:not(.hbhb-doctor-card__btn-arrow) {
	font-size: 16px !important;
}

/* Services section CTA button */
html body .hbhb-services .hbhb-services__item-btn,
html body .hbhb-services a.hbhb-services__item-btn {
	font-size: 16px !important;
}

/* Clinical Approach CTA banner button */
html body .hbhb-approach .hbhb-approach__cta-button,
html body .hbhb-approach a.hbhb-approach__cta-button {
	font-size: 16px !important;
}

/* Generic .hbhb-btn fallback (used by some sections) */
html body .hbhb-btn {
	font-size: 16px !important;
}

/* ===========================================================
   v1.64 — Hero buttons match Approach CTA button typography
   -----------------------------------------------------------
   Hero buttons (.hbhb-btn .hbhb-btn--primary / --secondary)
   were rendering at weight 600 with no letter-spacing, while
   the Approach CTA button uses weight 700 + letter-spacing
   0.2px. The CTA button felt more confident — this block
   lifts the hero buttons to the same weight + spacing.

   Why these two specific values:
     – font-weight: 700 also matches the doctor card "Book
       Appointment" inline style → buttons now have one weight
       site-wide.
     – letter-spacing: 0.2px is just enough to make all-cap
       letters breathe; imperceptible on sentence-case labels
       but adds a polished feel.
   =========================================================== */

html body .hbhb-hero .hbhb-btn,
html body .hbhb-hero .hbhb-btn--primary,
html body .hbhb-hero .hbhb-btn--secondary,
html body .hbhb-hero a.hbhb-btn,
html body .hbhb-hero a.hbhb-btn--primary,
html body .hbhb-hero a.hbhb-btn--secondary {
	font-weight: 700 !important;
	letter-spacing: 0.2px !important;
}

/* ===========================================================
   v1.65 — Doctor card height alignment + back-face gap fix
   -----------------------------------------------------------
   Three problems addressed:

   1. Back-face gap above Submit Review.
      Cause: .about-text was capped at max-height 80px, so on
      back faces the column had unused slack which submit-review's
      margin-top:auto pushed to the very bottom — creating that
      large empty band between the rating stars and the button.
      Fix: lift the max-height cap, give .about-text flex: 1 1 0%
      so it absorbs the slack instead. Overflow is hidden with the
      existing mask fade for long content. Submit-review now sits
      directly after the stars row regardless of content length.

   2. Front-face specialty inconsistency.
      Cause: specialty like "RADIOLOGIST" (1 line) vs
      "PHYSIOTHERAPIST AND REHABILITATION SPECIALIST" (2 lines)
      pushed name/years/button down by ~13px on cards with the
      longer specialty, breaking button-row alignment.
      Fix: line-clamp specialty to exactly 2 lines and reserve
      that vertical space via min-height — mirrors the treatment
      .__name already had since v1.27. Cards with a 1-line
      specialty get a blank second line of reserved space, so
      every front-face body has the same internal stacking.

   3. Back-face content area should expand to fill, not gap.
      The back-content container already uses flex column.
      .about-text getting flex: 1 absorbs all slack so the
      "Submit Your Rating" + stars + Submit Review block sits
      naturally at the bottom of the card without a manual gap.
   =========================================================== */

/* ----- Front face: specialty reserves 2 lines uniformly ----- */
html body .hbhb-doctors .hbhb-doctor-card__specialty {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	/* Reserve exactly 2 lines: font-size (9.5px) × line-height (1.4) × 2 */
	min-height: calc(9.5px * 1.4 * 2) !important;
	word-break: break-word !important;
}

/* ----- Back face: about-text absorbs slack, no gap ----- */
html body .hbhb-doctors .hbhb-doctor-card__about-text {
	flex: 1 1 0% !important;       /* GROW to fill available column space */
	max-height: none !important;   /* lift the 80px cap from base CSS */
	min-height: 60px !important;   /* readable floor on short bios */
	overflow: hidden !important;   /* clip overflow */
	/* Keep the soft fade so long bios look intentional rather than chopped */
	mask-image: linear-gradient(to bottom, #000 86%, transparent 100%) !important;
	-webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%) !important;
}

/* ----- Submit Review keeps its bottom-anchored behavior.
   margin-top:auto is now redundant (about-text consumes the slack)
   but kept as a defensive fallback if a theme overrides about-text's
   flex-grow. Slim margin-top adds breathing room above the button. */
html body .hbhb-doctors .hbhb-doctor-card__submit-review {
	margin-top: 10px !important;
	flex: 0 0 auto !important;
}

/* ----- Reinforce equal-height cards across the swiper ----- */
html body .hbhb-doctors-swiper .swiper-wrapper {
	align-items: stretch !important;
}
html body .hbhb-doctors-swiper .swiper-slide,
html body .hbhb-doctors-swiper .hbhb-doctor-slide {
	height: auto !important;
	display: flex !important;
}
html body .hbhb-doctors .hbhb-doctor-card {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

/* ----- Both faces fill the card uniformly ----- */
html body .hbhb-doctors .hbhb-doctor-card__face--front,
html body .hbhb-doctors .hbhb-doctor-card__face--back {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

/* Front face body expands to fill remaining space below the image
   so the Book Appointment button sits at the same Y position as
   the Submit Review button on flipped cards. */
html body .hbhb-doctors .hbhb-doctor-card__body {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
}
html body .hbhb-doctors .hbhb-doctor-card__btn {
	margin-top: auto !important;
}

/* Back-content fills the back face fully */
html body .hbhb-doctors .hbhb-doctor-card__back-content {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;       /* allow flex children to shrink */
}

/* ===========================================================
   v1.66 — HARD lock doctor card height (front = back always)
   -----------------------------------------------------------
   Even after v1.65, the back face was rendering taller than the
   front on cards with very long bios. Both faces use
   position: absolute; inset: 0 — in theory content can't grow
   past the card — but something in the cascade was breaking the
   absolute positioning. This block clamps everything explicitly:

   1. Card gets max-height ceiling + overflow: hidden so content
      can never push it taller.
   2. Both faces are FORCED to position: absolute with overflow:
      hidden so content is clipped at the face boundary.
   3. About-text becomes a scrollable region inside the back face,
      so long bios remain readable without growing the card.
   4. Submit Review stays pinned at the very bottom of the back
      face via flex-shrink:0 + margin-top:auto.
   5. Read More link still available below about-text for users
      who prefer a navigation path over scrolling.
   =========================================================== */

/* ----- 1. Card height: hard cap so it never grows ----- */
html body .hbhb-doctors .hbhb-doctor-card {
	position: relative !important;
	min-height: 580px !important;
	max-height: 580px !important;     /* HARD CEILING — prevents back-face growth */
	height: 580px !important;
	overflow: hidden !important;       /* clip any escapee content */
	box-sizing: border-box !important;
}

/* Inner rotating wrapper takes the full card */
html body .hbhb-doctors .hbhb-doctor-card__inner {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
}

/* ----- 2. Both faces are STRICTLY absolute with hidden overflow ----- */
html body .hbhb-doctors .hbhb-doctor-card__face,
html body .hbhb-doctors .hbhb-doctor-card__face--front,
html body .hbhb-doctors .hbhb-doctor-card__face--back {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	overflow: hidden !important;       /* face boundary clips any overflow */
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
}

/* ----- 3. Back-content: flex column that fits inside the face ----- */
html body .hbhb-doctors .hbhb-doctor-card__back-content {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;          /* allows children to shrink in flex */
	max-height: 100% !important;
	overflow: hidden !important;
}

/* ----- 4. About-text: scrollable region for long bios.
   Replaces the v1.65 mask-fade approach because the user wants
   long content to STAY in the card area, not get clipped invisibly.
   The custom scrollbar styling keeps it discreet. ----- */
html body .hbhb-doctors .hbhb-doctor-card__about-text {
	flex: 1 1 0% !important;
	max-height: none !important;
	min-height: 40px !important;
	overflow-y: auto !important;       /* scroll for long bios */
	overflow-x: hidden !important;
	padding-right: 4px !important;     /* breathing room from scrollbar */
	mask-image: none !important;       /* no fade — content is fully scrollable */
	-webkit-mask-image: none !important;
	-webkit-overflow-scrolling: touch !important;  /* smooth iOS scroll */
}

/* Discreet scrollbar so it doesn't visually compete with the green pills */
html body .hbhb-doctors .hbhb-doctor-card__about-text::-webkit-scrollbar {
	width: 4px !important;
}
html body .hbhb-doctors .hbhb-doctor-card__about-text::-webkit-scrollbar-track {
	background: transparent !important;
}
html body .hbhb-doctors .hbhb-doctor-card__about-text::-webkit-scrollbar-thumb {
	background: rgba(62, 103, 69, 0.30) !important;
	border-radius: 2px !important;
}
html body .hbhb-doctors .hbhb-doctor-card__about-text::-webkit-scrollbar-thumb:hover {
	background: rgba(62, 103, 69, 0.50) !important;
}

/* Firefox scrollbar styling */
html body .hbhb-doctors .hbhb-doctor-card__about-text {
	scrollbar-width: thin !important;
	scrollbar-color: rgba(62, 103, 69, 0.30) transparent !important;
}

/* ----- 5. Submit Review pinned at the bottom, never grows ----- */
html body .hbhb-doctors .hbhb-doctor-card__submit-review {
	flex: 0 0 auto !important;
	margin-top: auto !important;        /* push to bottom if any slack */
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ----- 6. Front face: body uses flex so button sits at the bottom
   at the same Y as Submit Review on the back face ----- */
html body .hbhb-doctors .hbhb-doctor-card__body {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}
html body .hbhb-doctors .hbhb-doctor-card__btn {
	margin-top: auto !important;
	flex: 0 0 auto !important;
}

/* ----- 7. Mobile responsive heights — taller for narrower viewport
   so back-face content has room to breathe before scrolling ----- */
@media (max-width: 900px) {
	html body .hbhb-doctors .hbhb-doctor-card {
		min-height: 600px !important;
		max-height: 600px !important;
		height: 600px !important;
	}
}

@media (max-width: 600px) {
	html body .hbhb-doctors .hbhb-doctor-card {
		min-height: 620px !important;
		max-height: 620px !important;
		height: 620px !important;
	}
}

/* ----- 8. Reinforce swiper slide sizing ----- */
html body .hbhb-doctors-swiper .swiper-wrapper {
	align-items: stretch !important;
}
html body .hbhb-doctors-swiper .swiper-slide,
html body .hbhb-doctors-swiper .hbhb-doctor-slide {
	height: auto !important;
	display: flex !important;
	align-self: stretch !important;
}

/* ===========================================================
   v1.67 — Lock slide height, contain the card from all sides
   -----------------------------------------------------------
   v1.66 clamped the CARD's max-height but content was still
   leaking past — likely because the swiper-wrapper's
   align-items:stretch was computing the slide's natural size
   from back-face content (which transform-style: preserve-3d
   pulled out of the normal overflow context), and the slide
   then stretched the card.

   v1.67 fixes this by locking the SLIDE itself to a fixed pixel
   height with overflow hidden — so even if any rule somewhere
   tries to grow the card, the slide boundary clips it.
   Multiple containment mechanisms stacked:
     – Fixed pixel height on .swiper-slide AND .hbhb-doctor-slide
     – CSS contain: layout size on the card
     – clip-path: inset(0) as a secondary clipper on faces
     – Explicit position absolute + top/left/right/bottom on
       the back face so transform: rotateY can't disconnect
       its overflow context
   =========================================================== */

/* ----- 1. SLIDE HEIGHT LOCK — the master constraint ----- */
html body .hbhb-doctors-swiper .swiper-slide,
html body .hbhb-doctors-swiper .hbhb-doctor-slide,
html body .hbhb-doctors .hbhb-doctors-swiper .swiper-slide {
	height: 580px !important;
	min-height: 580px !important;
	max-height: 580px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: stretch !important;
	box-sizing: border-box !important;
}

/* ----- 2. CARD fills the slide exactly, with containment ----- */
html body .hbhb-doctors .hbhb-doctor-card,
html body .hbhb-doctors .swiper-slide .hbhb-doctor-card {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
	overflow: hidden !important;
	/* CSS containment — prevents the card's size from being affected
	   by descendant size changes. The browser treats this element's
	   size as fixed regardless of what its children do. */
	contain: layout size !important;
	box-sizing: border-box !important;
}

/* ----- 3. INNER (rotating wrapper) fills the card ----- */
html body .hbhb-doctors .hbhb-doctor-card__inner,
html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__inner {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
	transform-style: preserve-3d !important;
}

/* ----- 4. FACES — absolutely positioned with explicit edges + clip-path
   transform-style: preserve-3d on the parent can break overflow:hidden
   in some browsers. clip-path adds a second clipping mechanism that
   works regardless of 3D context. ----- */
html body .hbhb-doctors .hbhb-doctor-card__face,
html body .hbhb-doctors .hbhb-doctor-card__face--front,
html body .hbhb-doctors .hbhb-doctor-card__face--back {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
	overflow: hidden !important;
	clip-path: inset(0) !important;        /* secondary clip — works through 3D transforms */
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
}

/* ----- 5. Back-content uses internal flex with scrollable bio ----- */
html body .hbhb-doctors .hbhb-doctor-card__back-content {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	max-height: 100% !important;
	overflow: hidden !important;
}

/* ----- 6. About-text: scrollable region for long bios ----- */
html body .hbhb-doctors .hbhb-doctor-card__about-text {
	flex: 1 1 0% !important;
	min-height: 40px !important;
	max-height: none !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding-right: 4px !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
	-webkit-overflow-scrolling: touch !important;
}

/* ----- 7. Submit Review pinned at bottom ----- */
html body .hbhb-doctors .hbhb-doctor-card__submit-review {
	flex: 0 0 auto !important;
	margin-top: auto !important;
	width: 100% !important;
}

/* ----- 8. Front face mirror: body fills, button at bottom ----- */
html body .hbhb-doctors .hbhb-doctor-card__body {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}
html body .hbhb-doctors .hbhb-doctor-card__btn {
	margin-top: auto !important;
	flex: 0 0 auto !important;
}

/* ----- 9. Responsive heights ----- */
@media (max-width: 1100px) {
	html body .hbhb-doctors-swiper .swiper-slide,
	html body .hbhb-doctors-swiper .hbhb-doctor-slide {
		height: 600px !important;
		min-height: 600px !important;
		max-height: 600px !important;
	}
}

@media (max-width: 768px) {
	html body .hbhb-doctors-swiper .swiper-slide,
	html body .hbhb-doctors-swiper .hbhb-doctor-slide {
		height: 620px !important;
		min-height: 620px !important;
		max-height: 620px !important;
	}
}

@media (max-width: 560px) {
	html body .hbhb-doctors-swiper .swiper-slide,
	html body .hbhb-doctors-swiper .hbhb-doctor-slide {
		height: 600px !important;
		min-height: 600px !important;
		max-height: 600px !important;
	}
}

/* ----- 10. Swiper wrapper safety: align-items stretch with hidden overflow ----- */
html body .hbhb-doctors-swiper,
html body .hbhb-doctors .hbhb-doctors-swiper {
	overflow: hidden !important;
}
html body .hbhb-doctors-swiper .swiper-wrapper {
	align-items: stretch !important;
}

/* ===========================================================
   v1.68 — Inline-style nuclear lock + responsive overrides
   -----------------------------------------------------------
   The doctors-carousel.php template now writes inline
   style="height:580px !important;..." directly on the
   .swiper-slide, .hbhb-doctor-card, .__inner, and both faces.
   Inline !important is the highest specificity tier in CSS —
   nothing can beat it, including Elementor and any theme.

   This block adds RESPONSIVE overrides only — the inline
   styles handle the desktop case and all the structural locks.
   Mobile breakpoints need different pixel heights, and those
   can't be done inline (no media query syntax in HTML style
   attributes), so they live here. They use the same selector
   prefix the inline styles target.
   =========================================================== */

/* ----- Responsive height adjustments (inline desktop = 580px) ----- */
@media (max-width: 1100px) {
	html body .hbhb-doctors-swiper .swiper-slide[style],
	html body .hbhb-doctors-swiper .hbhb-doctor-slide[style] {
		height: 600px !important;
		min-height: 600px !important;
		max-height: 600px !important;
	}
}

@media (max-width: 768px) {
	html body .hbhb-doctors-swiper .swiper-slide[style],
	html body .hbhb-doctors-swiper .hbhb-doctor-slide[style] {
		height: 620px !important;
		min-height: 620px !important;
		max-height: 620px !important;
	}
}

@media (max-width: 560px) {
	html body .hbhb-doctors-swiper .swiper-slide[style],
	html body .hbhb-doctors-swiper .hbhb-doctor-slide[style] {
		height: 600px !important;
		min-height: 600px !important;
		max-height: 600px !important;
	}
}

/* ----- Defensive fallback: if for some reason the template's
   inline styles get stripped (caching/optimization plugin removes
   inline styles), these external rules still apply. Maximum
   external specificity. ----- */
html body .elementor-page .hbhb-doctors-swiper .swiper-slide,
html body .elementor-page .hbhb-doctors-swiper .hbhb-doctor-slide,
html body div.hbhb-doctors-swiper .swiper-wrapper .swiper-slide.hbhb-doctor-slide {
	height: 580px !important;
	min-height: 580px !important;
	max-height: 580px !important;
	overflow: hidden !important;
}

/* ===========================================================
   v1.70 — Compact card heights + image max-height cap
   -----------------------------------------------------------
   v1.69 successfully aligned the buttons by pinning Submit
   Review and Book Appointment to the bottom of their faces.
   But on the front face this left a visible empty band above
   the Book Appointment button — because the natural content
   (image + name + experience) only fills ~420px and the card
   was 580px tall, so margin-top:auto distributed 160px of
   slack above the button.

   v1.70 fixes this by:
     1. Reducing card height to 480px desktop / 500-540px on
        smaller viewports — leaves only ~10-20px of slack.
     2. Capping image max-height at 300px so it doesn't grow
        unbounded at wider viewports (tablet 2-up would
        otherwise blow up to 600px+ tall images).
     3. Letting the back-face about-text continue to scroll
        for long bios — back face content gets ~218px for the
        bio area, comfortably fitting 5-6 lines without scroll.
   =========================================================== */

/* Responsive slide height — desktop is set inline at 480 */
@media (max-width: 1100px) {
	html body .hbhb-doctors-swiper .swiper-slide[style],
	html body .hbhb-doctors-swiper .hbhb-doctor-slide[style] {
		height: 500px !important;
		min-height: 500px !important;
		max-height: 500px !important;
	}
}

@media (max-width: 768px) {
	html body .hbhb-doctors-swiper .swiper-slide[style],
	html body .hbhb-doctors-swiper .hbhb-doctor-slide[style] {
		height: 520px !important;
		min-height: 520px !important;
		max-height: 520px !important;
	}
}

@media (max-width: 560px) {
	html body .hbhb-doctors-swiper .swiper-slide[style],
	html body .hbhb-doctors-swiper .hbhb-doctor-slide[style] {
		height: 540px !important;
		min-height: 540px !important;
		max-height: 540px !important;
	}
}

/* Defensive fallback (no inline style attribute on slide) */
html body .elementor-page .hbhb-doctors-swiper .swiper-slide,
html body .elementor-page .hbhb-doctors-swiper .hbhb-doctor-slide,
html body div.hbhb-doctors-swiper .swiper-wrapper .swiper-slide.hbhb-doctor-slide {
	height: 480px !important;
	min-height: 480px !important;
	max-height: 480px !important;
	overflow: hidden !important;
}

/* ----- Image max-height cap.
   Without this, image at aspect-ratio 5/6 would scale unbounded
   with card width — fine at 270px desktop but 684px tall on
   tablet 2-up. Capping at 300px keeps the headshot proportional
   while leaving room for body content below. object-fit: cover
   on the inner <img> already handles the crop gracefully. ----- */
html body .hbhb-doctors .hbhb-doctor-card__image {
	max-height: 300px !important;
	flex: 0 0 auto !important;        /* never grows or shrinks vertically */
}

/* On mobile single-column, the cards are wider so let the image
   stay slightly taller for a more proportional look. */
@media (max-width: 768px) {
	html body .hbhb-doctors .hbhb-doctor-card__image {
		max-height: 320px !important;
	}
}

@media (max-width: 560px) {
	html body .hbhb-doctors .hbhb-doctor-card__image {
		max-height: 340px !important;
	}
}

/* ===========================================================
   v1.71 — Before & After Gallery (built from scratch)
   -----------------------------------------------------------
   Replaces the v1.0 six-image grid. Renders ONE comparison
   slider at a time with nav dots below. Each item is a
   draggable Before/After comparison; dots switch between
   items; CSS fade handles smooth transitions.
   =========================================================== */

/* ----- Viewer wrapper ----- */
.hbhb-gallery__viewer {
	max-width: 920px;
	margin: 40px auto 0;
	outline: none;
}

/* ----- Stage: holds all comparisons, fixed aspect ratio.
   Comparisons are absolutely positioned and fade-cycled. ----- */
.hbhb-gallery__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 18px;
	overflow: hidden;
	background: #1A1A1A;
	box-shadow: 0 18px 50px -18px rgba(13, 31, 45, 0.25);
}

/* ----- Each comparison: stacked, only .is-active is visible ----- */
.hbhb-comparison {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s ease, visibility 0.45s ease;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;            /* allows vertical page scroll while we capture horizontal */
	cursor: ew-resize;
	outline: none;
}

.hbhb-comparison.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.hbhb-comparison:focus-visible {
	box-shadow: inset 0 0 0 3px rgba(62, 103, 69, 0.65);
}

/* ----- The base AFTER image fills the comparison ----- */
.hbhb-comparison__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* ----- BEFORE image wrapper overlays the AFTER, clipped on the right
   by (100% - --reveal%) so as --reveal grows, more BEFORE is visible. ----- */
.hbhb-comparison__before-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	width: calc(var(--reveal, 50) * 1%);
	transition: width 0s linear;     /* no transition during drag; instant follow */
}

.hbhb-comparison__before-wrap .hbhb-comparison__image--before {
	/* Image inside the clipped wrapper has full natural width so as the
	   wrapper grows/shrinks, the same portion of the underlying image
	   is revealed (rather than being squashed). */
	width: calc(100% * 100 / var(--reveal, 50));
	max-width: none;
}

/* When --reveal is 0, the calc above divides by 0. Guard with a min: */
.hbhb-comparison[style*="--reveal: 0"] .hbhb-comparison__before-wrap .hbhb-comparison__image--before {
	width: 0;
}

/* Cleaner version using CSS clip-path — modern browsers, falls back gracefully */
@supports (clip-path: inset(0 50% 0 0)) {
	.hbhb-comparison__before-wrap {
		width: 100%;
		clip-path: inset(0 calc(100% - var(--reveal, 50) * 1%) 0 0);
		-webkit-clip-path: inset(0 calc(100% - var(--reveal, 50) * 1%) 0 0);
	}
	.hbhb-comparison__before-wrap .hbhb-comparison__image--before {
		width: 100%;
	}
}

/* ----- Divider line + circular handle in the middle ----- */
.hbhb-comparison__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--reveal, 50) * 1%);
	width: 3px;
	background: #FFFFFF;
	transform: translateX(-50%);
	pointer-events: auto;
	z-index: 3;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 14px -2px rgba(0, 0, 0, 0.25);
}

.hbhb-comparison__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FFFFFF;
	color: #143D1B;
	border: 2px solid #FFFFFF;
	cursor: ew-resize;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.40), 0 0 0 4px rgba(255, 255, 255, 0.20);
	padding: 0;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.hbhb-comparison__handle:hover,
.hbhb-comparison:hover .hbhb-comparison__handle {
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(255, 255, 255, 0.25);
}

.hbhb-comparison__handle:active {
	transform: translate(-50%, -50%) scale(0.98);
	cursor: grabbing;
}

/* ----- Corner labels: BEFORE on the left, AFTER on the right ----- */
.hbhb-comparison__label {
	position: absolute;
	top: 18px;
	font-family: var(--hbhb-font-body, 'Helvetica Neue', sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #FFFFFF;
	background: rgba(0, 0, 0, 0.48);
	padding: 6px 12px;
	border-radius: 999px;
	z-index: 4;
	pointer-events: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hbhb-comparison__label--before { left: 18px; }
.hbhb-comparison__label--after  { right: 18px; }

/* ----- Navigation dots below the stage ----- */
.hbhb-gallery__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.hbhb-gallery__dot {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.18s ease;
}

.hbhb-gallery__dot:hover,
.hbhb-gallery__dot:focus-visible {
	outline: none;
	transform: scale(1.1);
}

.hbhb-gallery__dot-fill {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(20, 61, 27, 0.30);
	transition: background 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.hbhb-gallery__dot.is-active .hbhb-gallery__dot-fill {
	background: #3E6745;
	width: 22px;
	height: 10px;
	border-radius: 999px;
}

/* ----- Responsive adjustments ----- */
@media (max-width: 900px) {
	.hbhb-gallery__viewer { max-width: 100%; margin-top: 32px; }
	.hbhb-gallery__stage  { aspect-ratio: 4 / 3; border-radius: 14px; }
	.hbhb-comparison__handle { width: 44px; height: 44px; }
	.hbhb-comparison__label  { font-size: 10px; top: 14px; padding: 5px 10px; }
	.hbhb-comparison__label--before { left: 14px; }
	.hbhb-comparison__label--after  { right: 14px; }
}

@media (max-width: 560px) {
	.hbhb-gallery__stage { aspect-ratio: 3 / 4; }
	.hbhb-comparison__handle { width: 40px; height: 40px; }
	.hbhb-comparison__handle svg { width: 18px; height: 18px; }
	.hbhb-gallery__dots { margin-top: 18px; gap: 10px; }
}

/* ----- Accessibility — respect prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
	.hbhb-comparison,
	.hbhb-comparison__handle,
	.hbhb-gallery__dot,
	.hbhb-gallery__dot-fill {
		transition: none !important;
	}
}

/* ===========================================================
   v1.72 — Compact gallery + simpler nav dots
   -----------------------------------------------------------
   Reduces total section height so the slider fits comfortably
   in a 1080p viewport without scrolling, and replaces the
   pill-style active dot with standard small dots.

   Height accounting (typical 1080p desktop):
     Before:                      After:
       Section pad: 80+80 = 160     Section pad: 56+56 = 112
       Header: ~120                 Header: ~120
       Viewer margin: 40            Viewer margin: 24
       Stage: 920 × 10/16 = 575     Stage: 780 × 9/16 = 439
       Dots margin: 24              Dots margin: 16
       Dots: 36                     Dots: 20
       -----                        -----
       Total: ~955px                Total: ~731px

   Saves ~224px. Fits comfortably in ~1010px content viewport
   (1080p minus typical nav header) with ~280px breathing room.
   =========================================================== */

/* Section vertical padding — tighter top/bottom */
html body .hbhb-gallery {
	padding: 56px 0 !important;
}

/* Viewer — smaller max-width + tighter margin to header */
html body .hbhb-gallery .hbhb-gallery__viewer {
	max-width: 780px !important;
	margin-top: 24px !important;
}

/* Stage — 16:9 instead of 16:10 (less tall, more cinematic).
   At 780px width this renders ~439px tall on desktop vs the
   previous ~575px — saves 136px of vertical space. */
html body .hbhb-gallery .hbhb-gallery__stage {
	aspect-ratio: 16 / 9 !important;
	border-radius: 14px !important;
}

/* ----- Simpler navigation dots ----- */

/* Dots row — tighter spacing to the stage above */
html body .hbhb-gallery .hbhb-gallery__dots {
	margin-top: 16px !important;
	gap: 8px !important;
}

/* Click target — smaller but still tappable (20×20) */
html body .hbhb-gallery .hbhb-gallery__dot {
	width: 20px !important;
	height: 20px !important;
}

/* Inactive dot — small (6×6) and subtle */
html body .hbhb-gallery .hbhb-gallery__dot .hbhb-gallery__dot-fill {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: rgba(20, 61, 27, 0.28) !important;
}

/* Active dot — slightly larger (8×8) and brand-green for clear highlight.
   No pill elongation; just a solid round dot like a standard carousel. */
html body .hbhb-gallery .hbhb-gallery__dot.is-active .hbhb-gallery__dot-fill {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: #3E6745 !important;
}

/* Hover — gentle nudge but no big scale */
html body .hbhb-gallery .hbhb-gallery__dot:hover .hbhb-gallery__dot-fill,
html body .hbhb-gallery .hbhb-gallery__dot:focus-visible .hbhb-gallery__dot-fill {
	background: rgba(20, 61, 27, 0.55) !important;
}

html body .hbhb-gallery .hbhb-gallery__dot:hover,
html body .hbhb-gallery .hbhb-gallery__dot:focus-visible {
	transform: none !important;
}

/* Keep tablet/phone breakpoints sane — section is already responsive
   below 900px from the original v1.71 rules; we only need to make
   sure our padding override doesn't override there.
   Below 900px the .hbhb-gallery__stage drops to 4:3 (from v1.71),
   so re-allow that override at the smaller breakpoint. */
@media (max-width: 900px) {
	html body .hbhb-gallery {
		padding: 48px 0 !important;
	}
	html body .hbhb-gallery .hbhb-gallery__viewer {
		max-width: 100% !important;
		margin-top: 20px !important;
	}
	html body .hbhb-gallery .hbhb-gallery__stage {
		aspect-ratio: 4 / 3 !important;
	}
}

@media (max-width: 560px) {
	html body .hbhb-gallery {
		padding: 40px 0 !important;
	}
	html body .hbhb-gallery .hbhb-gallery__stage {
		aspect-ratio: 3 / 4 !important;     /* portrait on phone — keeps face photos legible */
	}
}

/* ===========================================================
   v1.74 — Flatter blog cards (light grey, no shadow)
   -----------------------------------------------------------
   Client design update — replaces the elevated white-with-
   shadow card with a flat light-grey surface that reads as
   "panel" rather than "floating tile". The section background
   stays #F7FBF8 (slight mint), so #F3F4F6 cards retain enough
   contrast to be clearly distinct but visually quieter.

   Everything else stays exactly as before: 20px radius,
   16:10 image ratio, title typography, excerpt, the
   "Read more →" CTA link, hover lift, image zoom on hover.
   =========================================================== */

html body .hbhb-blog__card {
	background: #F3F4F6 !important;
	box-shadow: none !important;
}

/* Hover — keep the gentle translateY for tactile feedback, but
   drop the shadow-lift since there's no shadow to lift anymore.
   Slightly darken the panel on hover so the user still gets a
   visual signal of interactivity. */
html body .hbhb-blog__card:hover {
	box-shadow: none !important;
	background: #ECEEF1 !important;
}

/* The Read More CTA, title link, excerpt, image zoom — all
   intentionally NOT touched. Their selectors (.hbhb-blog__card-cta,
   .hbhb-blog__card-title a, .hbhb-blog__card-image, etc.) still
   inherit their existing v1.0 styles unchanged. */

/* ===========================================================
   v1.75 — Primary CTA lime refresh + true content centering
   -----------------------------------------------------------
   Client-approved brand refresh for the reusable primary CTA
   button (.hbhb-btn--primary). Every "Book A Visit" and similar
   primary action across the site inherits from this class, so
   updating it centrally propagates to Hero, Approach banner,
   Doctors book buttons, Approach CTA, and any future callers.

   Three changes:

   1. Background: dark green → lime #D4FF02.
      Text: white → dark brand ink #143D1B (mandatory — white
      text on #D4FF02 fails contrast; the light bg forces dark
      text for legibility).

   2. Padding: 10px 12px 10px 28px  →  10px 20px  (symmetric).
      The old asymmetric padding pushed content 16px toward the
      right edge, which read as "off-center" once the buttons
      became prominent enough in the new brand direction to
      notice. Symmetric padding + justify-content:center makes
      the text+chip cluster truly equidistant from both edges.

   3. Arrow chip: translucent-white on dark green → solid dark
      green (#143D1B) on lime, with a lime (#D4FF02) icon.
      A color inversion against the button — high contrast,
      brand-cohesive, and reads as an intentional accent
      rather than a background element.

   Untouched: border-radius, font, hover lift (translateY -2px),
   arrow slide (translateX 3px), transitions, focus states,
   .hbhb-btn base rules, .hbhb-btn--secondary.
   =========================================================== */

html body .hbhb-btn--primary,
html body a.hbhb-btn--primary,
html body button.hbhb-btn--primary,
html body .hbhb-hero .hbhb-btn--primary,
html body .hbhb-approach .hbhb-btn--primary {
	background-color: #D4FF02 !important;
	color: #143D1B !important;
	padding: 10px 20px !important;
	justify-content: center !important;
	align-items: center !important;
}

html body .hbhb-btn--primary:hover,
html body .hbhb-btn--primary:focus-visible,
html body a.hbhb-btn--primary:hover,
html body a.hbhb-btn--primary:focus-visible {
	background-color: #BFE800 !important;   /* subtly darker lime for hover feedback */
	color: #143D1B !important;
	/* transform: translateY(-2px) inherits from base .hbhb-btn--primary:hover rule */
}

/* Arrow chip flip — dark circle, lime icon.
   High contrast against the lime button; feels like the button's
   "action anchor" rather than a semi-transparent background element. */
html body .hbhb-btn--primary .hbhb-btn__arrow {
	background-color: #143D1B !important;
	color: #D4FF02 !important;
}

/* Mobile — symmetric padding at the smaller size */
@media (max-width: 768px) {
	html body .hbhb-btn--primary,
	html body a.hbhb-btn--primary,
	html body button.hbhb-btn--primary {
		padding: 8px 16px !important;
	}
}

/* ===========================================================
   v1.76 — Extend lime treatment to two more CTA buttons
   -----------------------------------------------------------
   v1.75 changed .hbhb-btn--primary (the shared class) to lime,
   but two callers use different button classes:

     1. Hero "Explore Services" — uses .hbhb-btn--secondary
        (white variant), so v1.75 didn't touch it. Now matches
        its "Book A Visit" neighbor in lime.

     2. "Book A Visit" in the Clinical Approach → Prevention
        banner — uses .hbhb-approach__cta-button (its own class,
        not the shared one), also unchanged by v1.75. Now lime
        so it reads as the same brand action anywhere on the
        page.

   Both buttons already have symmetric padding and centered
   flex layouts, so only colors change. The approach CTA's
   inline chevron uses stroke="currentColor" so it follows the
   new text color automatically — no icon-specific rule needed.
   =========================================================== */

/* Hero "Explore Services" — was white secondary, now lime */
html body .hbhb-hero .hbhb-btn--secondary,
html body .hbhb-hero a.hbhb-btn--secondary,
html body .hbhb-hero button.hbhb-btn--secondary {
	background-color: #D4FF02 !important;
	color: #143D1B !important;
}

html body .hbhb-hero .hbhb-btn--secondary:hover,
html body .hbhb-hero .hbhb-btn--secondary:focus-visible,
html body .hbhb-hero a.hbhb-btn--secondary:hover,
html body .hbhb-hero a.hbhb-btn--secondary:focus-visible {
	background-color: #BFE800 !important;    /* same subtle-darker lime as primary hover */
	color: #143D1B !important;
	/* transform: translateY(-2px) from base .hbhb-btn--secondary:hover rule still applies */
}

/* Clinical Approach "Book A Visit" in the green Prevention banner.
   Chevron inside inherits color via currentColor — no separate rule. */
html body .hbhb-approach__cta-button,
html body a.hbhb-approach__cta-button {
	background-color: #D4FF02 !important;
	color: #143D1B !important;
}

html body .hbhb-approach__cta-button:hover,
html body .hbhb-approach__cta-button:focus-visible,
html body a.hbhb-approach__cta-button:hover,
html body a.hbhb-approach__cta-button:focus-visible {
	background-color: #BFE800 !important;
	color: #143D1B !important;
	/* transform and shadow lift from base rule still apply */
}

/* ===========================================================
   v1.77 — Unify primary CTA with the "Explore Services"
           reference design
   -----------------------------------------------------------
   Client-approved decision: .hbhb-btn--secondary (as used by
   Hero → "Explore Services") is the canonical CTA look.
   .hbhb-btn--primary (Book A Visit, Book Appointment on doctor
   cards, etc.) should visually match it — no chip, larger
   padding, same hover growth.

   Both variants already share (from v1.75 + v1.76):
     - lime #D4FF02 background
     - dark ink #143D1B text
     - hover bg #BFE800
     - translateY(-2px) hover lift
     - pill radius
     - font family / weight / size
     - transitions

   This block closes the remaining three gaps by overriding
   only what's still different:

     1. Padding — 10px 20px → 16px 28px (14px 22px on mobile).
        Matches secondary at both breakpoints.

     2. Chip — hide .hbhb-btn__arrow via display:none inside
        primary buttons. Reference design has no icon; the
        chip element stays in the markup so no PHP templates
        need to change, but it doesn't render.

     3. Hover shadow — primary's hover state now grows to
        --hbhb-shadow-card, matching secondary's tactile
        feedback on hover.

   Untouched: everything above. No duplicate color / font /
   transition rules — those all still come from the earlier
   v1.75 primary block and the base .hbhb-btn rule.
   =========================================================== */

/* Match secondary padding on desktop */
html body .hbhb-btn--primary,
html body a.hbhb-btn--primary,
html body button.hbhb-btn--primary {
	padding: 16px 28px !important;
}

/* Hide the arrow chip — reference design has no icon.
   `display:none` on the chip element itself; the surrounding
   button remains a simple text-only pill just like Explore
   Services. Markup is untouched so removing the chip element
   from templates isn't required. */
html body .hbhb-btn--primary .hbhb-btn__arrow {
	display: none !important;
}

/* Match secondary hover shadow growth */
html body .hbhb-btn--primary:hover,
html body .hbhb-btn--primary:focus-visible,
html body a.hbhb-btn--primary:hover,
html body a.hbhb-btn--primary:focus-visible {
	box-shadow: var(--hbhb-shadow-card) !important;
	/* bg color, text color, transform all still inherit from v1.75 primary hover rule */
}

/* Mobile — match secondary mobile padding */
@media (max-width: 768px) {
	html body .hbhb-btn--primary,
	html body a.hbhb-btn--primary,
	html body button.hbhb-btn--primary {
		padding: 14px 22px !important;
	}
}

/* ===========================================================
   v1.78 — Definitive CTA unification (grouped, single source)
   -----------------------------------------------------------
   v1.75/1.76/1.77 layered fixes on top of the original v1.0
   .hbhb-btn--primary and .hbhb-btn--secondary rules. Even
   after all that, subtle differences could slip through
   because 12 different rulesets touch these two variants.
   Instead of adding a 13th patch, this block groups both
   selectors and enforces every visual property in one place.

   Both variants now literally read from the SAME declaration
   block. It is structurally impossible for them to diverge on
   any of the enforced properties — padding, height, typography,
   color, radius, shadow, transition, border — because they
   share one source of truth.

   The rule is placed at the very end of the file so it wins
   the cascade over every earlier rule. Grouped selectors
   satisfy the "no duplicate CSS" constraint — one rule, two
   selectors, not two rules with identical declarations.

   Border: currently `none` on both. If a visible border is
   wanted later, changing it here changes both variants at
   once — that's the point of the shared block.
   =========================================================== */

html body .hbhb-btn.hbhb-btn--primary,
html body .hbhb-btn.hbhb-btn--secondary,
html body a.hbhb-btn.hbhb-btn--primary,
html body a.hbhb-btn.hbhb-btn--secondary,
html body button.hbhb-btn.hbhb-btn--primary,
html body button.hbhb-btn.hbhb-btn--secondary {

	/* --- Box model --------------------------------------- */
	display:         inline-flex   !important;
	align-items:     center        !important;
	justify-content: center        !important;
	gap:             12px          !important;
	padding:         16px 28px     !important;
	min-height:      52px          !important;     /* explicit height parity */
	box-sizing:      border-box    !important;

	/* --- Border ------------------------------------------ */
	border:          none          !important;     /* set to a real border if wanted */
	border-radius:   var(--hbhb-radius-pill) !important;

	/* --- Typography -------------------------------------- */
	font-family:     var(--hbhb-font) !important;
	font-size:       16px          !important;
	font-weight:     700           !important;
	line-height:     1.2           !important;
	letter-spacing:  0.2px         !important;
	text-decoration: none          !important;
	text-align:      center        !important;
	white-space:     nowrap        !important;

	/* --- Color ------------------------------------------- */
	background-color: #D4FF02 !important;
	color:            #143D1B !important;

	/* --- Depth / motion ---------------------------------- */
	box-shadow: var(--hbhb-shadow-soft) !important;
	cursor:     pointer !important;
	transition:
		background-color 0.3s ease,
		color            0.3s ease,
		transform        0.3s ease,
		box-shadow       0.3s ease !important;
}

/* Hover / focus — grouped, same enforcement */
html body .hbhb-btn.hbhb-btn--primary:hover,
html body .hbhb-btn.hbhb-btn--secondary:hover,
html body .hbhb-btn.hbhb-btn--primary:focus-visible,
html body .hbhb-btn.hbhb-btn--secondary:focus-visible,
html body a.hbhb-btn.hbhb-btn--primary:hover,
html body a.hbhb-btn.hbhb-btn--secondary:hover,
html body a.hbhb-btn.hbhb-btn--primary:focus-visible,
html body a.hbhb-btn.hbhb-btn--secondary:focus-visible {
	background-color: #BFE800 !important;
	color:            #143D1B !important;
	box-shadow:       var(--hbhb-shadow-card) !important;
	transform:        translateY(-2px) !important;
	outline:          none !important;
}

/* Hide the chip on primary — reference (secondary) has no icon.
   Kept from v1.77 for continuity even though most callers now
   don't render it. */
html body .hbhb-btn.hbhb-btn--primary .hbhb-btn__arrow {
	display: none !important;
}

/* Mobile — grouped again, both variants get identical smaller size */
@media (max-width: 768px) {
	html body .hbhb-btn.hbhb-btn--primary,
	html body .hbhb-btn.hbhb-btn--secondary,
	html body a.hbhb-btn.hbhb-btn--primary,
	html body a.hbhb-btn.hbhb-btn--secondary {
		padding:    14px 22px !important;
		font-size:  15px      !important;
		min-height: 46px      !important;
	}
}

/* =============================================================
   v1.79 — Services section header: single-line heading on desktop
   The head container was capped at 700px which forced
   "Comprehensive Care, Every Specialty" onto two lines. On
   desktop we release the cap and prevent wrapping; the font
   scales with the viewport (3vw) so the line always fits the
   container even on narrower desktops. Tablets & phones
   (≤900px) keep natural wrapping for readability.
   ============================================================= */
@media (min-width: 901px) {
	.hbhb-services__head {
		max-width: none !important;
	}
	.hbhb-services__title {
		white-space: nowrap;
		font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
	}
}

/* =============================================================
   v1.81 — Gallery comparison slider: handle recolor
   Background → #D4FF02 (lime), icon → #0A2A12 (dark green).
   !important is required because theme / Elementor global
   button styles were overriding the plugin's handle colors
   (the handle rendered dark green instead of the intended
   white on the live site). Size, radius, hover scale and all
   behaviour are unchanged — only colors are pinned here.
   ============================================================= */
.hbhb-comparison__handle,
.hbhb-comparison__handle:hover,
.hbhb-comparison__handle:focus,
.hbhb-comparison__handle:active,
.hbhb-comparison:hover .hbhb-comparison__handle {
	background: #D4FF02 !important;
	background-color: #D4FF02 !important;
	color: #0A2A12 !important;
	border-color: #D4FF02 !important;
}

.hbhb-comparison__handle svg,
.hbhb-comparison__handle svg path {
	stroke: #0A2A12 !important;
}

/* =============================================================
   v1.82 — Hero buttons: exact typography spec
   Applies ONLY to the two hero CTAs (Book A Visit / Explore
   Services). Placed last so it overrides:
     – v1.64 (font-weight:700 + letter-spacing:0.2px !important)
     – v1.75/76 (color:#143D1B !important, incl. hover states)
   Backgrounds, padding, radius, hover lift/transition are all
   untouched — this block sets text properties only.
   ============================================================= */
html body .hbhb-hero .hbhb-btn,
html body .hbhb-hero .hbhb-btn--primary,
html body .hbhb-hero .hbhb-btn--secondary,
html body .hbhb-hero a.hbhb-btn,
html body .hbhb-hero a.hbhb-btn--primary,
html body .hbhb-hero a.hbhb-btn--secondary,
html body .hbhb-hero .hbhb-btn:hover,
html body .hbhb-hero .hbhb-btn:focus-visible,
html body .hbhb-hero .hbhb-btn--primary:hover,
html body .hbhb-hero .hbhb-btn--primary:focus-visible,
html body .hbhb-hero .hbhb-btn--secondary:hover,
html body .hbhb-hero .hbhb-btn--secondary:focus-visible {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	font-style: normal !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	color: #000000 !important;
}

/* =============================================================
   v1.83 — Approach divider: belt-and-suspenders removal
   The divider element was removed in v1.80, but the line was
   still reported on the live site. This block kills ANY
   horizontal line between the approach content blocks no
   matter its source — leftover cached markup, a theme <hr>,
   or a theme/Elementor border injected onto the blocks.
   Typography, icons and spacing untouched.
   ============================================================= */
html body .hbhb-approach .hbhb-approach__divider,
html body .hbhb-approach .hbhb-approach__content hr {
	display: none !important;
}

html body .hbhb-approach .hbhb-approach__content,
html body .hbhb-approach .hbhb-approach__content > *,
html body .hbhb-approach .hbhb-approach__para {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* =============================================================
   v1.84 — Remove the small green underline (eyebrow rule)
   under "OUR CLINICAL APPROACH". Element deleted from the
   template; this rule also hides it in any cached HTML.
   The wrap keeps its flex-gap definition but with a single
   child the gap never renders, so header spacing is unchanged.
   ============================================================= */
html body .hbhb-approach .hbhb-approach__eyebrow-rule {
	display: none !important;
}

/* =============================================================
   v1.85 — Approach section: body text contrast fix
   The two descriptive paragraphs (leaf-icon block and badge
   block) rendered in rgba(15,31,26,0.78) — a soft gray that
   was hard to read. Pinned to near-black #111111 for contrast.
   Scoped strictly to .hbhb-approach paragraphs; heading,
   eyebrow, italic accent, icons (hardcoded #1F8A52 strokes),
   sizes and layout are untouched.
   ============================================================= */
html body .hbhb-approach .hbhb-approach__para,
html body .hbhb-approach .hbhb-approach__para p {
	color: #111111 !important;
}

/* =============================================================
   v1.87 — Hero CTAs: center-aligned on mobile
   On screens ≤900px (where the hero content stacks) the two
   CTA buttons are horizontally centered as a group. They stay
   on one row when they fit (flex-wrap allows a graceful wrap
   on very narrow screens, still centered). Desktop (>900px)
   keeps the existing left alignment. Button size, colors,
   radius, typography and gap are unchanged.
   ============================================================= */
@media (max-width: 900px) {
	html body .hbhb-hero .hbhb-hero__ctas {
		justify-content: center !important;
	}
}

/* =============================================================
   v1.88 — Doctor card portraits: no more cropped heads (global)
   Root cause: on ≤1024px the card is wide but the image box is
   height-capped (300–340px), so object-fit: cover with the
   default center position crops from BOTH top and bottom —
   cutting off heads on portraits composed high in the frame.
   Anchoring the crop to the top keeps every doctor's full head
   visible, for all current and future cards, with no stretch
   or distortion (cover preserves aspect ratio). Desktop
   (>1024px) is untouched and keeps its exact current look.
   Card design, spacing and radius unchanged.
   ============================================================= */
@media (max-width: 1024px) {
	html body .hbhb-doctors .hbhb-doctor-card__image img {
		object-fit: cover !important;
		object-position: center top !important;
	}
}

/* =============================================================
   v1.89 — Doctor cards: match desktop framing on mobile/tablet
   Supersedes v1.88. Root cause of both bugs (cropped heads,
   then excess headroom): below 1100px the card goes full/half
   width while the image box stays height-capped (300–340px),
   collapsing the 5/6 portrait window into a wide letterbox —
   unfixable by any object-position for all compositions.
   Fix: below 1100px, cap the CARD width (like a desktop card)
   and release the image height cap so aspect-ratio 5/6 governs.
   The crop window regains the same shape as desktop, so cover
   crops next to nothing and framing matches desktop for every
   current and future portrait. object-position returns to
   center. Desktop (≥1100px, 4-up) is untouched.
   ============================================================= */
@media (max-width: 1099px) {
	html body .hbhb-doctors .hbhb-doctor-card {
		max-width: 340px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	html body .hbhb-doctors .hbhb-doctor-card__image {
		max-height: none !important;
		aspect-ratio: 5 / 6;
	}
	html body .hbhb-doctors .hbhb-doctor-card__image img {
		object-fit: cover !important;
		object-position: center !important;
	}
}

/* =============================================================
   v1.90 — Doctors carousel mobile: release the 580px slide lock
   Root cause: the v1.67 height lock (slide 580px + overflow
   hidden + card contain:size + absolute faces) was sized for
   the old 340px-capped image. With v1.89's natural 5/6 portrait
   the card needs ~640px, so the Book Appointment button was
   clipped and the fixed-offset arrows crowded the card and the
   next section. On ≤900px this block lets slides size to their
   content: the FRONT face becomes position:relative (it now
   defines the card's natural height — this is what makes auto
   height safe despite the flip architecture), the back face
   stays an absolute overlay so the flip is unchanged. Desktop
   (>900px) keeps the v1.67 lock exactly as-is.
   ============================================================= */
@media (max-width: 900px) {
	html body .hbhb-doctors-swiper .swiper-slide,
	html body .hbhb-doctors-swiper .hbhb-doctor-slide,
	html body .hbhb-doctors .hbhb-doctors-swiper .swiper-slide {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}

	html body .hbhb-doctors .hbhb-doctor-card,
	html body .hbhb-doctors .swiper-slide .hbhb-doctor-card {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		contain: none !important;          /* contain:size blocked natural height */
		overflow: hidden !important;       /* keeps rounded corners */
	}

	html body .hbhb-doctors .hbhb-doctor-card__inner,
	html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__inner {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	/* Front face defines the card's height in normal flow. */
	html body .hbhb-doctors .hbhb-doctor-card__face--front {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	/* Back face remains an absolute overlay → flip unchanged. */
	html body .hbhb-doctors .hbhb-doctor-card__face--back {
		position: absolute !important;
		inset: 0 !important;
	}
}

/* Arrows: proper slot below the card, clear of the next section. */
@media (max-width: 560px) {
	html body .hbhb-doctors {
		padding-bottom: 120px !important;  /* room for the 40px arrows + breathing space */
	}
	html body .hbhb-doctors .hbhb-doctors__nav {
		top: auto !important;
		bottom: -72px !important;          /* ~32px gap below the card, ~48px above section edge */
		transform: none !important;
	}
}

/* =============================================================
   v1.93 — Doctors carousel: arrows hidden on mobile & tablet
   The prev/next buttons are display:none below 1100px — the
   same breakpoint where the carousel drops from the 4-up
   desktop layout, so desktop keeps its side arrows exactly
   as-is. Swipe/drag navigation still works on touch devices
   (Swiper gestures are independent of the buttons).
   The extra bottom padding that reserved space for the arrows
   on small screens is returned to the section's normal value
   so the gap to the next section stays clean, not oversized.
   ============================================================= */
@media (max-width: 1099px) {
	html body .hbhb-doctors .hbhb-doctors__nav,
	html body .hbhb-doctors .hbhb-doctors__nav--prev,
	html body .hbhb-doctors .hbhb-doctors__nav--next {
		display: none !important;
	}
}

/* Supersedes the v1.90 120px arrow-space padding at ≤560px. */
@media (max-width: 560px) {
	html body .hbhb-doctors {
		padding-bottom: 64px !important;
	}
}

/* =============================================================
   v1.94 — Doctors card: Book Appointment fully visible (≤1099px)
   The template no longer writes inline height locks (v1.68's
   inline styles are stripped down to structural bits), so the
   cascade is finally winnable. Desktop ≥1100px is unchanged —
   its 480px lock still comes from the defensive-fallback rules
   in this stylesheet. Below 1100px this block (last in file,
   selectors matching the strongest fallback rules) releases the
   height chain so the card sizes to its content: the front face
   becomes the in-flow element that defines card height, the
   back face stays an absolute overlay so the flip is unchanged.
   ============================================================= */
@media (max-width: 1099px) {

	/* Slides — outranks the [style] locks and both defensive fallbacks */
	html body div.hbhb-doctors-swiper .swiper-wrapper .swiper-slide.hbhb-doctor-slide,
	html body .elementor-page .hbhb-doctors-swiper .swiper-slide,
	html body .elementor-page .hbhb-doctors-swiper .hbhb-doctor-slide,
	html body .hbhb-doctors-swiper .swiper-slide[style],
	html body .hbhb-doctors-swiper .hbhb-doctor-slide[style] {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* Card sizes to content */
	html body .hbhb-doctors .hbhb-doctor-card,
	html body .hbhb-doctors .swiper-slide .hbhb-doctor-card,
	html body .hbhb-doctors .swiper-slide.hbhb-doctor-slide .hbhb-doctor-card {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		contain: none !important;
		overflow: hidden !important;   /* rounded corners */
	}

	html body .hbhb-doctors .hbhb-doctor-card__inner,
	html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__inner {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	/* Front face in normal flow → defines the card's natural height */
	html body .hbhb-doctors .hbhb-doctor-card__face--front,
	html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__face--front {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: hidden !important;
	}

	/* Back face stays an absolute overlay → flip unchanged */
	html body .hbhb-doctors .hbhb-doctor-card__face--back,
	html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__face--back {
		position: absolute !important;
		inset: 0 !important;
	}
}

/* =============================================================
   v1.95 — Book Appointment anchored under the text on mobile
   The button's inline margin-top:auto pinned it to the card's
   BOTTOM edge — so any residual card height became a blank gap
   above the button, pushing it below the fold. The inline
   !important on margin is removed in the template; below
   1100px the button now sits directly under the experience
   text with a fixed gap, guaranteed visible regardless of any
   height rule. Desktop ≥1100px keeps margin-top:auto (from the
   existing stylesheet rules) so buttons stay bottom-aligned
   across the 4-up row exactly as before. Any leftover card
   height now lands harmlessly BELOW the button.
   ============================================================= */
@media (max-width: 1099px) {
	html body .hbhb-doctors .hbhb-doctor-card__btn,
	html body .hbhb-doctors .hbhb-doctor-card a.hbhb-doctor-card__btn,
	html body .hbhb-doctors .hbhb-doctor-card .hbhb-doctor-card__btn {
		margin-top: 14px !important;
		margin-bottom: 0 !important;
	}
}

/* =============================================================
   v1.97 — Doctors carousel: arrows restored below the card
   Supersedes the v1.93 hide. Now that the card sizes to its
   content (v1.96), the arrows get a stable slot: a centered
   pair sitting ~26px below the card, fully inside the section,
   clear of the next section. Applies ≤1099px; desktop keeps
   its original side arrows untouched.
   ============================================================= */
@media (max-width: 1099px) {
	/* Room below the card for the arrow row (supersedes v1.93 64px) */
	html body .hbhb-doctors {
		padding-bottom: 128px !important;
	}

	html body .hbhb-doctors .hbhb-doctors__nav,
	html body .hbhb-doctors .hbhb-doctors__nav--prev,
	html body .hbhb-doctors .hbhb-doctors__nav--next {
		display: flex !important;
		position: absolute !important;
		top: auto !important;
		bottom: -72px !important;      /* ~26px gap below the card */
		width: 44px !important;
		height: 44px !important;
		transform: none !important;
	}

	/* Centered pair: 44px buttons with a 24px gap between them */
	html body .hbhb-doctors .hbhb-doctors__nav--prev {
		left: calc(50% - 56px) !important;
		right: auto !important;
	}
	html body .hbhb-doctors .hbhb-doctors__nav--next {
		right: calc(50% - 56px) !important;
		left: auto !important;
	}

	html body .hbhb-doctors .hbhb-doctors__nav:hover,
	html body .hbhb-doctors .hbhb-doctors__nav:focus-visible {
		transform: scale(1.05) !important;
	}
}

/* =============================================================
   v1.98 — Doctors nav arrows: chevron icons pinned visible
   The chevrons use stroke="currentColor" (inherit button text
   color). The theme repaints these buttons dark green, and the
   inherited color rendered dark-on-dark — invisible icons.
   This pins a coherent look on mobile/tablet: green circle,
   white chevron, explicit SVG sizing, immune to theme button
   styling. Desktop keeps its own styles (white circles, dark
   chevrons) untouched.
   ============================================================= */
@media (max-width: 1099px) {
	html body .hbhb-doctors .hbhb-doctors__nav {
		background: #3E6745 !important;
		border-color: #3E6745 !important;
		color: #FFFFFF !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 0 !important;
	}
	html body .hbhb-doctors .hbhb-doctors__nav svg {
		display: block !important;
		width: 18px !important;
		height: 18px !important;
		flex-shrink: 0 !important;
		color: #FFFFFF !important;
	}
	html body .hbhb-doctors .hbhb-doctors__nav svg path {
		stroke: #FFFFFF !important;
	}
	html body .hbhb-doctors .hbhb-doctors__nav:hover,
	html body .hbhb-doctors .hbhb-doctors__nav:focus-visible {
		background: #1C4922 !important;
		border-color: #1C4922 !important;
		color: #FFFFFF !important;
	}
}