/* ================================================================
   JBH Platform Engine — Frontend Block Styles
   Shared across the 9 non-WC Gutenberg blocks on the public-facing site.
   No build step required.  |  v1.0.0
   ================================================================ */

/* ── Global CSS Custom Properties ────────────────────────────── */
:root {
	--jbh-teal: #2A9D8F;
	--jbh-teal-dark: #1F5F5B;
	--jbh-teal-light: rgba(42, 157, 143, 0.10);
	--jbh-coral: #D64F42;
	--jbh-coral-light: rgba(214, 79, 66, 0.10);
	--jbh-bg: #121212;
	--jbh-card: #1A1A1A;
	--jbh-creme: #F0EAD6;
	--jbh-slate: #9CA3AF;
	--jbh-border: rgba(31, 95, 91, 0.20);
	--jbh-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--jbh-font-serif: "Playfair Display", Georgia, serif;
	--jbh-font-mono: "Fira Code", monospace;
	--jbh-gap: 20px;
	--jbh-card-radius: 4px;
	--jbh-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--jbh-heading-color: #F0EAD6;
	--jbh-text-color: #9CA3AF;
	--jbh-card-heading: #ffffff;
}

/* ── Dark / Light Mode ───────────────────────────────────────── */
/* .jbh-dark inherits from :root (dark is default) */
.jbh-dark {
	--jbh-bg: #121212;
	--jbh-card: #1A1A1A;
	--jbh-creme: #F0EAD6;
	--jbh-slate: #9CA3AF;
	--jbh-heading-color: #F0EAD6;
	--jbh-text-color: #9CA3AF;
	--jbh-card-heading: #ffffff;
	--jbh-border: rgba(31, 95, 91, 0.20);
}
.jbh-light {
	--jbh-bg: #F9F8F6;
	--jbh-card: #FFFFFF;
	--jbh-creme: #121212;
	--jbh-slate: #4B5563;
	--jbh-heading-color: #121212;
	--jbh-text-color: #4B5563;
	--jbh-card-heading: #121212;
	--jbh-border: rgba(0, 0, 0, 0.08);
}

/* ── Gap Variants ────────────────────────────────────────────── */
.jbh-gap-small  { --jbh-gap: 12px; }
.jbh-gap-medium { --jbh-gap: 20px; }
.jbh-gap-large  { --jbh-gap: 32px; }

/* ── Border Radius Variants ──────────────────────────────────── */
.jbh-radius-none   { --jbh-card-radius: 0; }
.jbh-radius-small  { --jbh-card-radius: 4px; }
.jbh-radius-medium { --jbh-card-radius: 8px; }
.jbh-radius-large  { --jbh-card-radius: 16px; }

/* ================================================================
   1.  STUDIO GRID
   ================================================================ */
.jbh-studio-grid {
	background: var(--jbh-bg);
	padding: 60px 24px;
	font-family: var(--jbh-font-sans);
}
.jbh-service-section { margin-bottom: 56px; }
.jbh-service-section:last-child { margin-bottom: 0; }

.jbh-studio-grid .jbh-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}
.jbh-category-icon {
	color: var(--jbh-teal);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jbh-category-icon svg { width: 24px; height: 24px; }
.jbh-section-title {
	font-family: var(--jbh-font-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--jbh-heading-color);
	margin: 0;
}
.jbh-service-grid {
	display: grid;
	gap: var(--jbh-gap);
	grid-template-columns: repeat(var(--jbh-cols, 3), 1fr);
}
.jbh-service-card {
	background: var(--jbh-card);
	border-radius: var(--jbh-card-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	transition: transform var(--jbh-transition), box-shadow var(--jbh-transition), border-color var(--jbh-transition);
}
.jbh-card-body { flex: 1; }
.jbh-card-title {
	font-family: var(--jbh-font-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--jbh-card-heading);
	margin: 0 0 8px;
}
.jbh-card-desc {
	color: var(--jbh-text-color);
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 20px;
}
.jbh-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid var(--jbh-border);
	margin-top: auto;
}
.jbh-card-price {
	font-family: var(--jbh-font-mono);
	font-size: 13px;
	color: var(--jbh-text-color);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.jbh-get-started-btn {
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--jbh-coral);
	cursor: pointer;
	padding: 0;
	transition: color var(--jbh-transition);
	font-family: var(--jbh-font-sans);
}
.jbh-get-started-btn:hover,
.jbh-get-started-btn:focus-visible { color: #E8665B; }

/* Studio — Layout: list */
.jbh-layout-list .jbh-service-grid {
	grid-template-columns: 1fr !important;
}
.jbh-layout-list .jbh-service-card {
	flex-direction: row;
	gap: 24px;
	align-items: center;
}
.jbh-layout-list .jbh-card-footer {
	border-top: none;
	padding-top: 0;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin-top: 0;
}

/* ================================================================
   2.  STORE GRID
   ================================================================ */
.jbh-store-grid {
	background: var(--jbh-bg);
	padding: 60px 24px;
	font-family: var(--jbh-font-sans);
}
.jbh-store-heading { margin-bottom: 40px; }
.jbh-store-tag {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--jbh-teal);
	margin: 0 0 8px;
}
.jbh-store-title {
	font-family: var(--jbh-font-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--jbh-heading-color);
	margin: 0 0 8px;
}
.jbh-store-subtitle {
	color: var(--jbh-text-color);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}
.jbh-product-grid {
	display: grid;
	gap: var(--jbh-gap);
	grid-template-columns: repeat(var(--jbh-cols, 2), 1fr);
}
.jbh-product-card {
	background: var(--jbh-card);
	border-radius: var(--jbh-card-radius);
	padding: 40px;
	display: flex;
	flex-direction: column;
	transition: transform var(--jbh-transition), box-shadow var(--jbh-transition), border-color var(--jbh-transition);
}
.jbh-product-type {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--jbh-text-color);
	margin: 0 0 8px;
}
.jbh-product-title {
	font-family: var(--jbh-font-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--jbh-card-heading);
	margin: 0 0 8px;
}
.jbh-product-desc {
	color: var(--jbh-text-color);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
	flex-grow: 1;
}
.jbh-product-price {
	font-size: 20px;
	font-weight: 700;
	color: var(--jbh-heading-color);
	margin: 20px 0 16px;
}
.jbh-product-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--jbh-coral-light);
	color: var(--jbh-coral);
	padding: 4px 10px;
	border-radius: var(--jbh-card-radius);
	margin-bottom: 12px;
}
.jbh-product-btn {
	display: inline-block;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border-radius: var(--jbh-card-radius);
	transition: all var(--jbh-transition);
	cursor: pointer;
}

/* Store — Layout: list */
.jbh-layout-list .jbh-product-grid {
	grid-template-columns: 1fr !important;
}
.jbh-layout-list .jbh-product-card {
	flex-direction: row;
	gap: 32px;
	align-items: center;
}

/* ================================================================
   3.  PRICING PLANS
   ================================================================ */
.jbh-pricing-plans {
	background: var(--jbh-bg);
	padding: 80px 24px;
	font-family: var(--jbh-font-sans);
	text-align: center;
}
.jbh-plans-heading { margin-bottom: 48px; }
.jbh-plans-tag {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--jbh-teal);
	margin: 0 0 12px;
}
.jbh-plans-title {
	font-family: var(--jbh-font-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--jbh-heading-color);
	margin: 0 0 12px;
}
.jbh-plans-subtitle {
	color: var(--jbh-text-color);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 600px;
}

/* Pricing toggle switch */
.jbh-pricing-toggle-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 40px;
}
.jbh-pricing-toggle-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--jbh-text-color);
}
.jbh-pricing-toggle-label.is-active { color: var(--jbh-heading-color); }
.jbh-pricing-toggle {
	position: relative;
	width: 48px;
	height: 26px;
	appearance: none;
	-webkit-appearance: none;
	background: var(--jbh-border);
	border-radius: 26px;
	cursor: pointer;
	outline: none;
	border: none;
	transition: background var(--jbh-transition);
}
.jbh-pricing-toggle:checked { background: var(--jbh-teal); }
.jbh-pricing-toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: transform var(--jbh-transition);
}
.jbh-pricing-toggle:checked::after { transform: translateX(22px); }

.jbh-plans-grid {
	display: grid;
	grid-template-columns: repeat(var(--jbh-cols, 3), 1fr);
	gap: var(--jbh-gap);
	max-width: 1080px;
	margin: 0 auto;
}
.jbh-plan-card {
	background: var(--jbh-card);
	border-radius: var(--jbh-card-radius);
	padding: 40px;
	text-align: left;
	display: flex;
	flex-direction: column;
	transition: transform var(--jbh-transition), box-shadow var(--jbh-transition), border-color var(--jbh-transition);
}
.jbh-plan-card.jbh-highlighted {
	border-color: var(--jbh-coral) !important;
	border-width: 2px;
	border-style: solid;
	position: relative;
	overflow: visible !important;
	padding-top: 52px;
}
.jbh-plan-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	z-index: 3;
	padding: 6px 20px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	background: var(--jbh-coral);
}
.jbh-plan-name {
	font-family: var(--jbh-font-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--jbh-heading-color);
	margin: 0 0 4px;
}
.jbh-plan-price {
	font-size: 40px;
	font-weight: 700;
	color: var(--jbh-card-heading);
	margin: 8px 0 0;
	line-height: 1.1;
}
.jbh-plan-price span {
	font-size: 14px;
	color: var(--jbh-text-color);
	font-weight: 400;
}
.jbh-plan-yearly-note {
	font-size: 12px;
	font-weight: 700;
	color: var(--jbh-teal);
	margin: 6px 0 0;
}
.jbh-plan-perks {
	list-style: none;
	padding: 20px 0;
	margin: 16px 0;
	border-top: 1px solid var(--jbh-border);
	flex-grow: 1;
}
.jbh-plan-perks li {
	color: var(--jbh-text-color);
	font-size: 14px;
	line-height: 2.2;
	padding-left: 20px;
	position: relative;
}
.jbh-plan-perks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--jbh-teal);
	font-weight: 700;
}
.jbh-plan-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px;
	border-radius: var(--jbh-card-radius);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--jbh-transition);
	font-family: var(--jbh-font-sans);
	margin-top: auto;
}
.jbh-plan-btn-primary {
	background: var(--jbh-coral);
	color: #ffffff;
	border: 2px solid var(--jbh-coral);
}
.jbh-plan-btn-primary:hover {
	background: #E8665B;
	border-color: #E8665B;
}
.jbh-plan-btn-outline {
	background: transparent;
	color: var(--jbh-teal);
	border: 2px solid var(--jbh-teal);
}
.jbh-plan-btn-outline:hover {
	background: var(--jbh-teal);
	color: #ffffff;
}

/* ================================================================
   4.  PORTFOLIO GRID
   ================================================================ */
.jbh-portfolio-grid {
	background: var(--jbh-bg);
	padding: 80px 24px;
	font-family: var(--jbh-font-sans);
}
.jbh-portfolio-heading { margin-bottom: 48px; }
.jbh-portfolio-title {
	font-family: var(--jbh-font-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--jbh-heading-color);
	margin: 0 0 8px;
}
.jbh-portfolio-subtitle {
	color: var(--jbh-text-color);
	font-size: 16px;
	line-height: 1.8;
	margin: 0;
	max-width: 700px;
}
.jbh-project-list {
	display: grid;
	grid-template-columns: repeat(var(--jbh-cols, 1), 1fr);
	gap: var(--jbh-gap);
}
.jbh-project-card {
	background: var(--jbh-card);
	border-radius: var(--jbh-card-radius);
	padding: 40px;
	transition: transform var(--jbh-transition), box-shadow var(--jbh-transition), border-color var(--jbh-transition);
}
.jbh-project-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.jbh-project-client {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--jbh-teal);
	background: var(--jbh-teal-light);
	padding: 4px 12px;
	border-radius: var(--jbh-card-radius);
}
.jbh-project-sector {
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--jbh-text-color);
}
.jbh-project-title {
	font-family: var(--jbh-font-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--jbh-card-heading);
	margin: 0 0 10px;
}
.jbh-project-desc {
	color: var(--jbh-text-color);
	font-size: 14px;
	line-height: 1.8;
	margin: 0 0 16px;
}
.jbh-project-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.jbh-project-tag {
	font-size: 10px;
	letter-spacing: 1px;
	color: var(--jbh-text-color);
	border: 1px solid var(--jbh-teal-dark);
	border-radius: 50px;
	padding: 5px 14px;
	transition: border-color var(--jbh-transition), color var(--jbh-transition);
}
.jbh-project-tag:hover {
	border-color: var(--jbh-teal);
	color: var(--jbh-teal);
}
.jbh-project-deliverables {
	border-top: 1px solid var(--jbh-border);
	padding-top: 20px;
	margin-top: 8px;
}
.jbh-project-deliverables h4 {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--jbh-heading-color);
	margin: 0 0 14px;
	font-weight: 700;
}
.jbh-project-deliverables ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.jbh-project-deliverables li {
	color: var(--jbh-text-color);
	font-size: 13px;
	line-height: 1.9;
	padding-left: 18px;
	position: relative;
}
.jbh-project-deliverables li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: var(--jbh-teal);
}
.jbh-project-cta {
	font-size: 14px;
	font-weight: 700;
	color: var(--jbh-teal);
	margin-top: 20px;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	transition: color var(--jbh-transition);
}
.jbh-project-cta:hover { color: var(--jbh-coral); }

/* ================================================================
   5.  CARD STYLE VARIANTS
   ================================================================ */
/* bordered (default) */
.jbh-cards-bordered .jbh-service-card,
.jbh-cards-bordered .jbh-product-card,
.jbh-cards-bordered .jbh-plan-card,
.jbh-cards-bordered .jbh-project-card,
.jbh-cards-bordered .jbh-insight-card {
	border: var(--jbh-custom-card-border-w, 1px) solid var(--jbh-border);
}

/* elevated */
.jbh-cards-elevated .jbh-service-card,
.jbh-cards-elevated .jbh-product-card,
.jbh-cards-elevated .jbh-plan-card,
.jbh-cards-elevated .jbh-project-card,
.jbh-cards-elevated .jbh-insight-card {
	border: var(--jbh-custom-card-border-w, 1px) solid transparent;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* flat */
.jbh-cards-flat .jbh-service-card,
.jbh-cards-flat .jbh-product-card,
.jbh-cards-flat .jbh-plan-card,
.jbh-cards-flat .jbh-project-card,
.jbh-cards-flat .jbh-insight-card {
	border: none;
	box-shadow: none;
}

/* glass (frosted glass effect) */
.jbh-cards-glass .jbh-service-card,
.jbh-cards-glass .jbh-product-card,
.jbh-cards-glass .jbh-plan-card,
.jbh-cards-glass .jbh-project-card,
.jbh-cards-glass .jbh-insight-card {
	border: var(--jbh-custom-card-border-w, 1px) solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.jbh-light.jbh-cards-glass .jbh-service-card,
.jbh-light.jbh-cards-glass .jbh-product-card,
.jbh-light.jbh-cards-glass .jbh-plan-card,
.jbh-light.jbh-cards-glass .jbh-project-card,
.jbh-light.jbh-cards-glass .jbh-insight-card,
html.light .jbh-cards-glass .jbh-service-card,
html.light .jbh-cards-glass .jbh-product-card,
html.light .jbh-cards-glass .jbh-plan-card,
html.light .jbh-cards-glass .jbh-project-card,
html.light .jbh-cards-glass .jbh-insight-card,
html[data-theme="light"] .jbh-cards-glass .jbh-service-card,
html[data-theme="light"] .jbh-cards-glass .jbh-product-card,
html[data-theme="light"] .jbh-cards-glass .jbh-plan-card,
html[data-theme="light"] .jbh-cards-glass .jbh-project-card,
html[data-theme="light"] .jbh-cards-glass .jbh-insight-card {
	border: var(--jbh-custom-card-border-w, 1px) solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.60);
}

/* neon — Ambient neon glow border */
.jbh-cards-neon .jbh-service-card,
.jbh-cards-neon .jbh-product-card,
.jbh-cards-neon .jbh-plan-card,
.jbh-cards-neon .jbh-project-card,
.jbh-cards-neon .jbh-insight-card {
	border: 1px solid rgba(42, 157, 143, 0.35);
	box-shadow: 0 0 12px rgba(42, 157, 143, 0.12), inset 0 0 12px rgba(42, 157, 143, 0.04);
	background: var(--jbh-card);
}
.jbh-cards-neon .jbh-service-card:hover,
.jbh-cards-neon .jbh-product-card:hover,
.jbh-cards-neon .jbh-plan-card:hover,
.jbh-cards-neon .jbh-project-card:hover,
.jbh-cards-neon .jbh-insight-card:hover {
	border-color: rgba(42, 157, 143, 0.60);
	box-shadow: 0 0 24px rgba(42, 157, 143, 0.25), 0 0 48px rgba(42, 157, 143, 0.08), inset 0 0 16px rgba(42, 157, 143, 0.06);
}
.jbh-light.jbh-cards-neon .jbh-service-card,
.jbh-light.jbh-cards-neon .jbh-product-card,
.jbh-light.jbh-cards-neon .jbh-plan-card,
.jbh-light.jbh-cards-neon .jbh-project-card,
.jbh-light.jbh-cards-neon .jbh-insight-card,
html.light .jbh-cards-neon .jbh-service-card,
html.light .jbh-cards-neon .jbh-product-card,
html.light .jbh-cards-neon .jbh-plan-card,
html.light .jbh-cards-neon .jbh-project-card,
html.light .jbh-cards-neon .jbh-insight-card,
html[data-theme="light"] .jbh-cards-neon .jbh-service-card,
html[data-theme="light"] .jbh-cards-neon .jbh-product-card,
html[data-theme="light"] .jbh-cards-neon .jbh-plan-card,
html[data-theme="light"] .jbh-cards-neon .jbh-project-card,
html[data-theme="light"] .jbh-cards-neon .jbh-insight-card {
	border-color: rgba(42, 157, 143, 0.25);
	box-shadow: 0 0 12px rgba(42, 157, 143, 0.08), inset 0 0 8px rgba(42, 157, 143, 0.03);
}

/* gradient — Gradient border via pseudo-element */
.jbh-cards-gradient .jbh-service-card,
.jbh-cards-gradient .jbh-product-card,
.jbh-cards-gradient .jbh-plan-card,
.jbh-cards-gradient .jbh-project-card,
.jbh-cards-gradient .jbh-insight-card {
	position: relative;
	border: none;
	background: var(--jbh-card);
	isolation: isolate;
}
.jbh-cards-gradient .jbh-service-card::before,
.jbh-cards-gradient .jbh-product-card::before,
.jbh-cards-gradient .jbh-plan-card::before,
.jbh-cards-gradient .jbh-project-card::before,
.jbh-cards-gradient .jbh-insight-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--jbh-teal), var(--jbh-coral), var(--jbh-teal));
	background-size: 200% 200%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
	transition: background-position 0.6s ease, opacity 0.3s ease;
	opacity: 0.6;
}
.jbh-cards-gradient .jbh-service-card:hover::before,
.jbh-cards-gradient .jbh-product-card:hover::before,
.jbh-cards-gradient .jbh-plan-card:hover::before,
.jbh-cards-gradient .jbh-project-card:hover::before,
.jbh-cards-gradient .jbh-insight-card:hover::before {
	opacity: 1;
	background-position: 100% 100%;
}

/* minimal — Stripped-back, whitespace-driven, thin separator */
.jbh-cards-minimal .jbh-service-card,
.jbh-cards-minimal .jbh-product-card,
.jbh-cards-minimal .jbh-plan-card,
.jbh-cards-minimal .jbh-project-card,
.jbh-cards-minimal .jbh-insight-card {
	border: none;
	box-shadow: none;
	background: transparent;
	border-bottom: 1px solid var(--jbh-border);
	border-radius: 0;
	padding: 32px 0;
}
.jbh-cards-minimal .jbh-service-card:last-child,
.jbh-cards-minimal .jbh-product-card:last-child,
.jbh-cards-minimal .jbh-plan-card:last-child,
.jbh-cards-minimal .jbh-project-card:last-child,
.jbh-cards-minimal .jbh-insight-card:last-child {
	border-bottom: none;
}

/* neumorphic — Soft embossed UI */
.jbh-cards-neumorphic .jbh-service-card,
.jbh-cards-neumorphic .jbh-product-card,
.jbh-cards-neumorphic .jbh-plan-card,
.jbh-cards-neumorphic .jbh-project-card,
.jbh-cards-neumorphic .jbh-insight-card {
	border: none;
	background: var(--jbh-card);
	box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.25), -6px -6px 16px rgba(255, 255, 255, 0.04);
}
.jbh-cards-neumorphic .jbh-service-card:hover,
.jbh-cards-neumorphic .jbh-product-card:hover,
.jbh-cards-neumorphic .jbh-plan-card:hover,
.jbh-cards-neumorphic .jbh-project-card:hover,
.jbh-cards-neumorphic .jbh-insight-card:hover {
	box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.30), -8px -8px 24px rgba(255, 255, 255, 0.06);
}
.jbh-light.jbh-cards-neumorphic .jbh-service-card,
.jbh-light.jbh-cards-neumorphic .jbh-product-card,
.jbh-light.jbh-cards-neumorphic .jbh-plan-card,
.jbh-light.jbh-cards-neumorphic .jbh-project-card,
.jbh-light.jbh-cards-neumorphic .jbh-insight-card,
html.light .jbh-cards-neumorphic .jbh-service-card,
html.light .jbh-cards-neumorphic .jbh-product-card,
html.light .jbh-cards-neumorphic .jbh-plan-card,
html.light .jbh-cards-neumorphic .jbh-project-card,
html.light .jbh-cards-neumorphic .jbh-insight-card,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-service-card,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-product-card,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-plan-card,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-project-card,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-insight-card {
	box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.06), -6px -6px 16px rgba(255, 255, 255, 0.80);
}
.jbh-light.jbh-cards-neumorphic .jbh-service-card:hover,
.jbh-light.jbh-cards-neumorphic .jbh-product-card:hover,
.jbh-light.jbh-cards-neumorphic .jbh-plan-card:hover,
.jbh-light.jbh-cards-neumorphic .jbh-project-card:hover,
.jbh-light.jbh-cards-neumorphic .jbh-insight-card:hover,
html.light .jbh-cards-neumorphic .jbh-service-card:hover,
html.light .jbh-cards-neumorphic .jbh-product-card:hover,
html.light .jbh-cards-neumorphic .jbh-plan-card:hover,
html.light .jbh-cards-neumorphic .jbh-project-card:hover,
html.light .jbh-cards-neumorphic .jbh-insight-card:hover,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-service-card:hover,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-product-card:hover,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-plan-card:hover,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-project-card:hover,
html[data-theme="light"] .jbh-cards-neumorphic .jbh-insight-card:hover {
	box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.08), -8px -8px 24px rgba(255, 255, 255, 0.90);
}

/* ================================================================
   6.  BUTTON STYLE VARIANTS
   ================================================================ */
/* filled (default for studio) */
.jbh-btn-filled .jbh-get-started-btn,
.jbh-btn-filled .jbh-product-btn {
	background: var(--jbh-custom-btn, var(--jbh-coral));
	color: var(--jbh-custom-btn-text, #ffffff);
	border: 2px solid var(--jbh-custom-btn, var(--jbh-coral));
	padding: 10px 20px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.jbh-btn-filled .jbh-get-started-btn:hover,
.jbh-btn-filled .jbh-product-btn:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff));
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	filter: brightness(1.08);
	transform: translateY(-1px);
}
.jbh-btn-filled .jbh-get-started-btn:active,
.jbh-btn-filled .jbh-product-btn:active {
	filter: brightness(0.95);
	transform: translateY(0);
}

/* outline */
.jbh-btn-outline .jbh-get-started-btn,
.jbh-btn-outline .jbh-product-btn {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: 2px solid var(--jbh-custom-btn, var(--jbh-teal));
	padding: 10px 20px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jbh-btn-outline .jbh-get-started-btn:hover,
.jbh-btn-outline .jbh-product-btn:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal)));
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff));
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal)));
	transform: translateY(-1px);
}
.jbh-btn-outline .jbh-get-started-btn:active,
.jbh-btn-outline .jbh-product-btn:active {
	filter: brightness(0.9);
	transform: translateY(0);
}

/* ghost */
.jbh-btn-ghost .jbh-get-started-btn,
.jbh-btn-ghost .jbh-product-btn {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: none;
	padding: 10px 0;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.2s ease;
}
.jbh-btn-ghost .jbh-get-started-btn:hover,
.jbh-btn-ghost .jbh-product-btn:hover {
	color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn-text, var(--jbh-coral)));
}
.jbh-btn-ghost .jbh-get-started-btn:active,
.jbh-btn-ghost .jbh-product-btn:active {
	opacity: 0.8;
}

/* --- Button variants for plan buttons --- */
.jbh-btn-filled .jbh-plan-btn {
	background: var(--jbh-custom-btn, var(--jbh-coral));
	color: var(--jbh-custom-btn-text, #ffffff);
	border: 2px solid var(--jbh-custom-btn, var(--jbh-coral));
	padding: 10px 20px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.jbh-btn-filled .jbh-plan-btn:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff));
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.jbh-btn-outline .jbh-plan-btn {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: 2px solid var(--jbh-custom-btn, var(--jbh-teal));
	padding: 10px 20px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jbh-btn-outline .jbh-plan-btn:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal)));
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff));
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal)));
	transform: translateY(-1px);
}

.jbh-btn-ghost .jbh-plan-btn {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: none;
	padding: 10px 0;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.2s ease;
}
.jbh-btn-ghost .jbh-plan-btn:hover {
	color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn-text, var(--jbh-coral)));
}

/* --- Button variants for portfolio CTA --- */
.jbh-btn-filled .jbh-project-cta {
	background: var(--jbh-custom-btn, var(--jbh-coral));
	color: var(--jbh-custom-btn-text, #ffffff);
	border: 2px solid var(--jbh-custom-btn, var(--jbh-coral));
	padding: 10px 20px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	display: inline-block;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.jbh-btn-filled .jbh-project-cta:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff));
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.jbh-btn-outline .jbh-project-cta {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: 2px solid var(--jbh-custom-btn, var(--jbh-teal));
	padding: 10px 20px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	display: inline-block;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jbh-btn-outline .jbh-project-cta:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal)));
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff));
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal)));
	transform: translateY(-1px);
}

.jbh-btn-ghost .jbh-project-cta {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: none;
	padding: 10px 0;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	display: inline-block;
	transition: color 0.2s ease;
}
.jbh-btn-ghost .jbh-project-cta:hover {
	color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn-text, var(--jbh-coral)));
}

/* --- Button variants for hero buttons --- */
.jbh-btn-filled .jbh-hero-btn-primary {
	background: var(--jbh-custom-btn, var(--jbh-coral));
	color: var(--jbh-custom-btn-text, #ffffff);
	border: 2px solid var(--jbh-custom-btn, var(--jbh-coral));
	box-shadow: 0 4px 14px rgba(214, 79, 66, 0.39);
}
.jbh-btn-filled .jbh-hero-btn-primary:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(214, 79, 66, 0.55);
}
.jbh-btn-filled .jbh-hero-btn-secondary {
	background: var(--jbh-card);
	color: var(--jbh-creme);
	border: 2px solid var(--jbh-border);
}
.jbh-btn-filled .jbh-hero-btn-secondary:hover {
	border-color: var(--jbh-teal);
	color: var(--jbh-teal);
}

.jbh-btn-outline .jbh-hero-btn-primary {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-coral));
	border: 2px solid var(--jbh-custom-btn, var(--jbh-coral));
	box-shadow: none;
}
.jbh-btn-outline .jbh-hero-btn-primary:hover {
	background: var(--jbh-custom-btn, var(--jbh-coral));
	color: #ffffff;
	transform: translateY(-1px);
}
.jbh-btn-outline .jbh-hero-btn-secondary {
	background: transparent;
	color: var(--jbh-teal);
	border: 2px solid var(--jbh-teal);
}
.jbh-btn-outline .jbh-hero-btn-secondary:hover {
	background: var(--jbh-teal);
	color: #ffffff;
	transform: translateY(-1px);
}

.jbh-btn-ghost .jbh-hero-btn-primary {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-coral));
	border: none;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 700;
}
.jbh-btn-ghost .jbh-hero-btn-primary:hover {
	color: var(--jbh-custom-btn-hover, var(--jbh-coral));
	filter: brightness(1.1);
}
.jbh-btn-ghost .jbh-hero-btn-secondary {
	background: transparent;
	color: var(--jbh-teal);
	border: none;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 700;
}
.jbh-btn-ghost .jbh-hero-btn-secondary:hover {
	color: var(--jbh-creme);
}

/* --- Button variants for CTA banner button --- */
.jbh-btn-filled .jbh-cta-btn {
	background: var(--jbh-custom-btn, var(--jbh-coral));
	color: var(--jbh-custom-btn-text, #ffffff);
	border: 2px solid var(--jbh-custom-btn, var(--jbh-coral));
	padding: 14px 32px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.jbh-btn-filled .jbh-cta-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}
.jbh-btn-outline .jbh-cta-btn {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: 2px solid var(--jbh-custom-btn, var(--jbh-teal));
	padding: 14px 32px;
	border-radius: var(--jbh-card-radius);
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jbh-btn-outline .jbh-cta-btn:hover {
	background: var(--jbh-custom-btn, var(--jbh-teal));
	color: #ffffff;
	transform: translateY(-1px);
}
.jbh-btn-ghost .jbh-cta-btn {
	background: transparent;
	color: var(--jbh-custom-btn, var(--jbh-teal));
	border: none;
	padding: 14px 0;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.2s ease;
}
.jbh-btn-ghost .jbh-cta-btn:hover {
	color: var(--jbh-custom-btn-hover, var(--jbh-coral));
}

/* ================================================================
   7.  HOVER EFFECT VARIANTS
   ================================================================ */
/* lift */
.jbh-hover-lift .jbh-service-card:hover,
.jbh-hover-lift .jbh-product-card:hover,
.jbh-hover-lift .jbh-plan-card:hover,
.jbh-hover-lift .jbh-project-card:hover,
.jbh-hover-lift .jbh-insight-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* glow */
.jbh-hover-glow .jbh-service-card:hover,
.jbh-hover-glow .jbh-product-card:hover,
.jbh-hover-glow .jbh-plan-card:hover,
.jbh-hover-glow .jbh-project-card:hover,
.jbh-hover-glow .jbh-insight-card:hover {
	box-shadow: 0 0 24px rgba(42, 157, 143, 0.25), 0 0 48px rgba(42, 157, 143, 0.10);
}

/* border accent */
.jbh-hover-border .jbh-service-card:hover,
.jbh-hover-border .jbh-product-card:hover,
.jbh-hover-border .jbh-plan-card:hover,
.jbh-hover-border .jbh-project-card:hover,
.jbh-hover-border .jbh-insight-card:hover {
	border-color: var(--jbh-teal) !important;
}

/* none */
.jbh-hover-none .jbh-service-card:hover,
.jbh-hover-none .jbh-product-card:hover,
.jbh-hover-none .jbh-plan-card:hover,
.jbh-hover-none .jbh-project-card:hover,
.jbh-hover-none .jbh-insight-card:hover {
	transform: none;
	box-shadow: none;
}

/* scale */
.jbh-hover-scale .jbh-service-card:hover,
.jbh-hover-scale .jbh-product-card:hover,
.jbh-hover-scale .jbh-plan-card:hover,
.jbh-hover-scale .jbh-project-card:hover,
.jbh-hover-scale .jbh-insight-card:hover {
	transform: scale(1.03);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* tilt (CSS perspective) */
.jbh-hover-tilt .jbh-service-card,
.jbh-hover-tilt .jbh-product-card,
.jbh-hover-tilt .jbh-plan-card,
.jbh-hover-tilt .jbh-project-card,
.jbh-hover-tilt .jbh-insight-card {
	perspective: 800px;
}
.jbh-hover-tilt .jbh-service-card:hover,
.jbh-hover-tilt .jbh-product-card:hover,
.jbh-hover-tilt .jbh-plan-card:hover,
.jbh-hover-tilt .jbh-project-card:hover,
.jbh-hover-tilt .jbh-insight-card:hover {
	transform: rotateX(-2deg) rotateY(2deg) translateY(-2px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.20);
}

/* ================================================================
   7b. SHADOW INTENSITY VARIANTS
   ================================================================ */
.jbh-shadow-none .jbh-service-card,
.jbh-shadow-none .jbh-product-card,
.jbh-shadow-none .jbh-plan-card,
.jbh-shadow-none .jbh-project-card,
.jbh-shadow-none .jbh-insight-card { box-shadow: none; }

.jbh-shadow-subtle .jbh-service-card,
.jbh-shadow-subtle .jbh-product-card,
.jbh-shadow-subtle .jbh-plan-card,
.jbh-shadow-subtle .jbh-project-card,
.jbh-shadow-subtle .jbh-insight-card { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.jbh-shadow-medium .jbh-service-card,
.jbh-shadow-medium .jbh-product-card,
.jbh-shadow-medium .jbh-plan-card,
.jbh-shadow-medium .jbh-project-card,
.jbh-shadow-medium .jbh-insight-card { box-shadow: 0 4px 24px rgba(0,0,0,0.12); }

.jbh-shadow-dramatic .jbh-service-card,
.jbh-shadow-dramatic .jbh-product-card,
.jbh-shadow-dramatic .jbh-plan-card,
.jbh-shadow-dramatic .jbh-project-card,
.jbh-shadow-dramatic .jbh-insight-card { box-shadow: 0 12px 48px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.10); }

/* ================================================================
   7c. SECTION DIVIDER VARIANTS
   ================================================================ */
.jbh-divider-line .jbh-service-section + .jbh-service-section,
.jbh-divider-line .jbh-product-card + .jbh-product-card,
.jbh-divider-line .jbh-plan-card + .jbh-plan-card,
.jbh-divider-line .jbh-project-card + .jbh-project-card { border-top: 1px solid var(--jbh-border); padding-top: 40px; }

.jbh-divider-gradient .jbh-service-section + .jbh-service-section::before,
.jbh-divider-gradient .jbh-product-card + .jbh-product-card::before,
.jbh-divider-gradient .jbh-plan-card + .jbh-plan-card::before,
.jbh-divider-gradient .jbh-project-card + .jbh-project-card::before {
	content: "";
	display: block;
	height: 1px;
	margin-bottom: 40px;
	background: linear-gradient(90deg, transparent, var(--jbh-teal), transparent);
}

.jbh-divider-dots .jbh-service-section + .jbh-service-section::before,
.jbh-divider-dots .jbh-product-card + .jbh-product-card::before,
.jbh-divider-dots .jbh-plan-card + .jbh-plan-card::before,
.jbh-divider-dots .jbh-project-card + .jbh-project-card::before {
	content: "\2022 \2022 \2022";
	display: block;
	text-align: center;
	color: var(--jbh-teal);
	letter-spacing: 8px;
	font-size: 14px;
	margin-bottom: 40px;
	opacity: 0.5;
}

/* ================================================================
   7d. CONTENT ALIGNMENT
   ================================================================ */
.jbh-align-center { text-align: center; }
.jbh-align-center .jbh-section-header { justify-content: center; }
.jbh-align-center .jbh-card-footer { justify-content: center; gap: 16px; }
.jbh-align-center .jbh-project-meta { justify-content: center; }
.jbh-align-center .jbh-project-tags { justify-content: center; }
.jbh-align-center .jbh-plan-perks { list-style-position: inside; padding-left: 0; }
.jbh-align-center .jbh-plan-card { align-items: center; }

/* ================================================================
   7e. TITLE SIZE VARIANTS
   ================================================================ */
.jbh-title-small .jbh-section-title,
.jbh-title-small .jbh-store-title,
.jbh-title-small .jbh-plans-title,
.jbh-title-small .jbh-portfolio-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.jbh-title-small .jbh-card-title,
.jbh-title-small .jbh-product-title,
.jbh-title-small .jbh-plan-name,
.jbh-title-small .jbh-project-title { font-size: 15px; }

.jbh-title-medium .jbh-section-title,
.jbh-title-medium .jbh-store-title,
.jbh-title-medium .jbh-plans-title,
.jbh-title-medium .jbh-portfolio-title { font-size: clamp(2rem, 4vw, 3rem); }

.jbh-title-large .jbh-section-title,
.jbh-title-large .jbh-store-title,
.jbh-title-large .jbh-plans-title,
.jbh-title-large .jbh-portfolio-title { font-size: clamp(2.5rem, 5vw, 4rem); }
.jbh-title-large .jbh-card-title,
.jbh-title-large .jbh-product-title,
.jbh-title-large .jbh-plan-name,
.jbh-title-large .jbh-project-title { font-size: 24px; }

/* ================================================================
   8.  ANIMATION VARIANTS (applied via frontend.js IntersectionObserver)
   ================================================================ */
/* Shared: hidden state before animation triggers.
   Scoped to :not(.block-editor-block-list__layout *) so SSR previews
   inside the Gutenberg editor are always visible (frontend.js doesn't run there). */
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate="fadeIn"],
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate="slideUp"],
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate="scaleIn"] {
	opacity: 0;
}
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate="slideUp"] { transform: translateY(30px); }
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate="scaleIn"] { transform: scale(0.95); }

/* Animated state (class added by IntersectionObserver) */
[data-jbh-animate].jbh-animated {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Stagger children */
[data-jbh-animate].jbh-animated .jbh-service-card,
[data-jbh-animate].jbh-animated .jbh-product-card,
[data-jbh-animate].jbh-animated .jbh-plan-card,
[data-jbh-animate].jbh-animated .jbh-project-card,
[data-jbh-animate].jbh-animated .jbh-insight-card {
	opacity: 0;
	animation: jbh-stagger-in 0.5s ease forwards;
}
[data-jbh-animate].jbh-animated .jbh-service-card:nth-child(1),
[data-jbh-animate].jbh-animated .jbh-product-card:nth-child(1),
[data-jbh-animate].jbh-animated .jbh-plan-card:nth-child(1),
[data-jbh-animate].jbh-animated .jbh-project-card:nth-child(1),
[data-jbh-animate].jbh-animated .jbh-insight-card:nth-child(1) { animation-delay: 0.05s; }
[data-jbh-animate].jbh-animated .jbh-service-card:nth-child(2),
[data-jbh-animate].jbh-animated .jbh-product-card:nth-child(2),
[data-jbh-animate].jbh-animated .jbh-plan-card:nth-child(2),
[data-jbh-animate].jbh-animated .jbh-project-card:nth-child(2),
[data-jbh-animate].jbh-animated .jbh-insight-card:nth-child(2) { animation-delay: 0.10s; }
[data-jbh-animate].jbh-animated .jbh-service-card:nth-child(3),
[data-jbh-animate].jbh-animated .jbh-product-card:nth-child(3),
[data-jbh-animate].jbh-animated .jbh-plan-card:nth-child(3),
[data-jbh-animate].jbh-animated .jbh-project-card:nth-child(3),
[data-jbh-animate].jbh-animated .jbh-insight-card:nth-child(3) { animation-delay: 0.15s; }
[data-jbh-animate].jbh-animated .jbh-service-card:nth-child(n+4),
[data-jbh-animate].jbh-animated .jbh-product-card:nth-child(n+4),
[data-jbh-animate].jbh-animated .jbh-plan-card:nth-child(n+4),
[data-jbh-animate].jbh-animated .jbh-project-card:nth-child(n+4),
[data-jbh-animate].jbh-animated .jbh-insight-card:nth-child(n+4) { animation-delay: 0.20s; }

@keyframes jbh-stagger-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   9.  THEME OVERRIDE — NUCLEAR SPECIFICITY SHIELD
   ----------------------------------------------------------------
   Uses body-prefixed triple-class selectors + !important to
   GUARANTEE JBH styles beat ANY theme (Blocksy, Astra, Kadence,
   GeneratePress, OceanWP, Flavor, Flavor Starter, TwentyTwenty*).

   Blocksy uses selectors like:
     .site-content .entry-content h2   (specificity 0,3,1)
     .ct-container .entry-content p    (specificity 0,3,1)

   Our selectors use:
     body div.wp-block-jbh-studio-grid.jbh-studio-grid  (0,3,2)
   Plus !important as an absolute guarantee.

   WP native block support controls (color, spacing, typography,
   border set in the sidebar) still win because they use INLINE
   styles applied by get_block_wrapper_attributes().
   ================================================================ */

/* --- Global reset for ALL elements inside JBH blocks --- */
body div.wp-block-jbh-studio-grid.jbh-studio-grid *,
body div.wp-block-jbh-store-grid.jbh-store-grid *,
body div.wp-block-jbh-pricing-plans.jbh-pricing-plans *,
body div.wp-block-jbh-portfolio-grid.jbh-portfolio-grid * {
	box-sizing: border-box !important;
}

/* --- Wrapper containers: background (yield to WP block supports) --- */
body div.wp-block-jbh-studio-grid.jbh-studio-grid:not(.has-background),
body div.wp-block-jbh-store-grid.jbh-store-grid:not(.has-background),
body div.wp-block-jbh-pricing-plans.jbh-pricing-plans:not(.has-background),
body div.wp-block-jbh-portfolio-grid.jbh-portfolio-grid:not(.has-background) {
	background-color: var(--jbh-bg) !important;
}

/* --- Wrapper containers: text color (yield to WP block supports) --- */
body div.wp-block-jbh-studio-grid.jbh-studio-grid:not(.has-text-color),
body div.wp-block-jbh-store-grid.jbh-store-grid:not(.has-text-color),
body div.wp-block-jbh-pricing-plans.jbh-pricing-plans:not(.has-text-color),
body div.wp-block-jbh-portfolio-grid.jbh-portfolio-grid:not(.has-text-color) {
	color: var(--jbh-text-color) !important;
}

/* --- Wrapper containers: typography & box model (always applied) --- */
body div.wp-block-jbh-studio-grid.jbh-studio-grid,
body div.wp-block-jbh-store-grid.jbh-store-grid,
body div.wp-block-jbh-pricing-plans.jbh-pricing-plans,
body div.wp-block-jbh-portfolio-grid.jbh-portfolio-grid {
	font-family: var(--jbh-font-sans) !important;
	line-height: 1.6 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	box-sizing: border-box !important;
	word-wrap: break-word !important;
}

/* --- Section headings (beat .entry-content h2, body h2, etc.) --- */
body div.wp-block-jbh-studio-grid .jbh-section-title,
body div.wp-block-jbh-store-grid .jbh-store-title,
body div.wp-block-jbh-pricing-plans .jbh-plans-title,
body div.wp-block-jbh-portfolio-grid .jbh-portfolio-title {
	color: var(--jbh-heading-color) !important;
	font-family: var(--jbh-font-serif) !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	margin-top: 0 !important;
	margin-bottom: 8px !important;
	padding: 0 !important;
	border: none !important;
	text-decoration: none !important;
}

/* --- Card headings (beat theme h3 rules) --- */
body div.wp-block-jbh-studio-grid .jbh-card-title,
body div.wp-block-jbh-store-grid .jbh-product-title,
body div.wp-block-jbh-pricing-plans .jbh-plan-name,
body div.wp-block-jbh-portfolio-grid .jbh-project-title {
	color: var(--jbh-card-heading) !important;
	font-family: var(--jbh-font-serif) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	margin-top: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* --- Body text / paragraphs (beat theme .entry-content p) --- */
body div.wp-block-jbh-studio-grid .jbh-card-desc,
body div.wp-block-jbh-store-grid .jbh-product-desc,
body div.wp-block-jbh-store-grid .jbh-store-subtitle,
body div.wp-block-jbh-pricing-plans .jbh-plans-subtitle,
body div.wp-block-jbh-portfolio-grid .jbh-portfolio-subtitle,
body div.wp-block-jbh-portfolio-grid .jbh-project-desc {
	color: var(--jbh-text-color) !important;
	font-family: var(--jbh-font-sans) !important;
	line-height: 1.7 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* --- List items: pricing perks (beat theme ul/li styles) --- */
body div.wp-block-jbh-pricing-plans .jbh-plan-perks {
	list-style: none !important;
	padding: 20px 0 !important;
	margin: 16px 0 !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-perks li {
	color: var(--jbh-text-color) !important;
	font-family: var(--jbh-font-sans) !important;
	font-size: 14px !important;
	list-style: none !important;
	line-height: 2.2 !important;
	padding-left: 20px !important;
	margin: 0 !important;
	background: none !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-perks li::before {
	color: var(--jbh-teal) !important;
}

/* --- List items: portfolio deliverables --- */
body div.wp-block-jbh-portfolio-grid .jbh-project-deliverables ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
body div.wp-block-jbh-portfolio-grid .jbh-project-deliverables li {
	color: var(--jbh-text-color) !important;
	font-size: 13px !important;
	list-style: none !important;
	line-height: 1.9 !important;
	padding-left: 18px !important;
	margin: 0 !important;
	background: none !important;
}
body div.wp-block-jbh-portfolio-grid .jbh-project-deliverables li::before {
	color: var(--jbh-teal) !important;
}
body div.wp-block-jbh-portfolio-grid .jbh-project-deliverables h4 {
	color: var(--jbh-heading-color) !important;
	font-size: 11px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
}

/* --- Prices (beat theme span/price styles) --- */
body div.wp-block-jbh-studio-grid .jbh-card-price {
	color: var(--jbh-text-color) !important;
	font-family: var(--jbh-font-mono) !important;
	font-size: 13px !important;
	text-decoration: none !important;
}
body div.wp-block-jbh-store-grid .jbh-product-price {
	color: var(--jbh-heading-color) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-price {
	color: var(--jbh-card-heading) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-price span {
	font-size: 14px !important;
	color: var(--jbh-text-color) !important;
	font-weight: 400 !important;
}

/* --- Tag / badge / meta text --- */
body div.wp-block-jbh-store-grid .jbh-store-tag,
body div.wp-block-jbh-pricing-plans .jbh-plans-tag,
body div.wp-block-jbh-portfolio-grid .jbh-project-client {
	color: var(--jbh-teal) !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
}
body div.wp-block-jbh-store-grid .jbh-product-type,
body div.wp-block-jbh-portfolio-grid .jbh-project-sector {
	color: var(--jbh-text-color) !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-badge,
body div.wp-block-jbh-store-grid .jbh-product-badge {
	color: var(--jbh-coral) !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-yearly-note {
	color: var(--jbh-teal) !important;
}

/* --- Cards: override theme article/div backgrounds --- */
body div.wp-block-jbh-studio-grid .jbh-service-card,
body div.wp-block-jbh-store-grid .jbh-product-card,
body div.wp-block-jbh-pricing-plans .jbh-plan-card,
body div.wp-block-jbh-portfolio-grid .jbh-project-card {
	background: var(--jbh-card) !important;
	border-radius: var(--jbh-card-radius) !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
}

/* --- Buttons & CTAs: override theme a / button styles ---
     Only reset theme-inherited decoration & font; do NOT set
     background or color here — those are handled by button
     style variants (section 6) and custom color overrides (section 10).
   ------------------------------------------------------------ */
body div.wp-block-jbh-studio-grid .jbh-get-started-btn,
body div.wp-block-jbh-store-grid .jbh-product-btn,
body div.wp-block-jbh-pricing-plans .jbh-plan-btn,
body div.wp-block-jbh-portfolio-grid .jbh-project-cta {
	font-family: var(--jbh-font-sans) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

/* --- Pricing toggle: override theme checkbox/input styles --- */
body div.wp-block-jbh-pricing-plans .jbh-pricing-toggle {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: var(--jbh-border) !important;
	border: none !important;
	width: 48px !important;
	height: 26px !important;
	box-shadow: none !important;
	outline: none !important;
}
body div.wp-block-jbh-pricing-plans .jbh-pricing-toggle:checked {
	background: var(--jbh-teal) !important;
}

/* --- Dividers/borders: override theme hr/border styles --- */
body div.wp-block-jbh-studio-grid .jbh-card-footer,
body div.wp-block-jbh-pricing-plans .jbh-plan-perks,
body div.wp-block-jbh-portfolio-grid .jbh-project-deliverables {
	border-color: var(--jbh-border) !important;
}

/* --- Grids: ensure theme doesn't collapse columns --- */
body div.wp-block-jbh-studio-grid .jbh-service-grid,
body div.wp-block-jbh-store-grid .jbh-product-grid,
body div.wp-block-jbh-pricing-plans .jbh-plans-grid,
body div.wp-block-jbh-portfolio-grid .jbh-project-list {
	display: grid !important;
	list-style: none !important;
}

/* --- WP BLOCK SUPPORT: Text Color Cascade ---
     When the user sets text color in the WP block panel, WordPress adds
     .has-text-color + an inline style. The nuclear shield now uses
     :not(.has-text-color) so the inline style wins automatically.
     We cascade the WP text color to description-level text only;
     headings, badges, and prices keep their own custom-color logic.
   ------------------------------------------------------------ */
body [class*="wp-block-jbh-"].has-text-color .jbh-card-desc,
body [class*="wp-block-jbh-"].has-text-color .jbh-product-desc,
body [class*="wp-block-jbh-"].has-text-color .jbh-project-desc,
body [class*="wp-block-jbh-"].has-text-color .jbh-plan-perks li,
body [class*="wp-block-jbh-"].has-text-color .jbh-store-subtitle,
body [class*="wp-block-jbh-"].has-text-color .jbh-plans-subtitle,
body [class*="wp-block-jbh-"].has-text-color .jbh-portfolio-subtitle,
body [class*="wp-block-jbh-"].has-text-color .jbh-hero-subtitle,
body [class*="wp-block-jbh-"].has-text-color .jbh-sh-subtitle,
body [class*="wp-block-jbh-"].has-text-color .jbh-about-bio,
body [class*="wp-block-jbh-"].has-text-color .jbh-insight-excerpt,
body [class*="wp-block-jbh-"].has-text-color .jbh-cta-subtitle {
	color: inherit !important;
}

/* --- WP BLOCK SUPPORT: Link Color Cascade --- */
body [class*="wp-block-jbh-"].has-link-color a:not(.jbh-plan-btn):not(.jbh-plan-btn-primary):not(.jbh-plan-btn-outline):not(.jbh-product-btn):not(.jbh-get-started-btn):not(.jbh-project-cta):not(.jbh-hero-btn):not(.jbh-cta-btn):not(.jbh-insight-read-more) {
	color: inherit;
}

/* --- 9b. NUCLEAR SPECIFICITY SHIELD — Newer blocks (Phase 2+)
     hero-section  → <section>
     section-header → <header>
     about-section → <section>
     insights-grid → <section>
     cta-banner    → <div>
   ------------------------------------------------------------ */

/* --- Newer blocks: box-sizing reset --- */
body section.wp-block-jbh-hero-section.jbh-hero-section *,
body header.wp-block-jbh-section-header.jbh-section-header *,
body section.wp-block-jbh-about-section.jbh-about-section *,
body section.wp-block-jbh-insights-grid.jbh-insights-grid *,
body div.wp-block-jbh-cta-banner.jbh-cta-banner * {
	box-sizing: border-box !important;
}

/* --- Newer blocks: background (yield to WP block supports) --- */
body section.wp-block-jbh-hero-section.jbh-hero-section:not(.has-background),
body header.wp-block-jbh-section-header.jbh-section-header:not(.has-background),
body section.wp-block-jbh-about-section.jbh-about-section:not(.has-background),
body section.wp-block-jbh-insights-grid.jbh-insights-grid:not(.has-background),
body div.wp-block-jbh-cta-banner.jbh-cta-banner:not(.has-background) {
	background-color: var(--jbh-bg) !important;
}

/* --- Newer blocks: text color (yield to WP block supports) --- */
body section.wp-block-jbh-hero-section.jbh-hero-section:not(.has-text-color),
body header.wp-block-jbh-section-header.jbh-section-header:not(.has-text-color),
body section.wp-block-jbh-about-section.jbh-about-section:not(.has-text-color),
body section.wp-block-jbh-insights-grid.jbh-insights-grid:not(.has-text-color),
body div.wp-block-jbh-cta-banner.jbh-cta-banner:not(.has-text-color) {
	color: var(--jbh-text-color) !important;
}

/* --- Newer blocks: typography & box model --- */
body section.wp-block-jbh-hero-section.jbh-hero-section,
body header.wp-block-jbh-section-header.jbh-section-header,
body section.wp-block-jbh-about-section.jbh-about-section,
body section.wp-block-jbh-insights-grid.jbh-insights-grid,
body div.wp-block-jbh-cta-banner.jbh-cta-banner {
	font-family: var(--jbh-font-sans) !important;
	line-height: 1.6 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	box-sizing: border-box !important;
	word-wrap: break-word !important;
}

/* --- Newer block headings (beat .entry-content h1/h2/h3 etc.) --- */
body section.wp-block-jbh-hero-section .jbh-hero-heading,
body header.wp-block-jbh-section-header .jbh-sh-heading,
body section.wp-block-jbh-about-section .jbh-about-heading,
body section.wp-block-jbh-insights-grid .jbh-insight-title,
body div.wp-block-jbh-cta-banner .jbh-cta-heading {
	font-family: var(--jbh-font-serif) !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	margin-top: 0 !important;
	padding: 0 !important;
	border: none !important;
	text-decoration: none !important;
}

/* --- Newer block body text (beat theme .entry-content p) --- */
body section.wp-block-jbh-hero-section .jbh-hero-subtitle,
body header.wp-block-jbh-section-header .jbh-sh-subtitle,
body section.wp-block-jbh-about-section .jbh-about-bio,
body section.wp-block-jbh-about-section .jbh-about-bio p,
body section.wp-block-jbh-insights-grid .jbh-insight-excerpt,
body div.wp-block-jbh-cta-banner .jbh-cta-subtitle {
	font-family: var(--jbh-font-sans) !important;
	line-height: 1.7 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* --- Newer block badges/labels (beat theme span/small styles) --- */
body section.wp-block-jbh-hero-section .jbh-hero-badge,
body header.wp-block-jbh-section-header .jbh-sh-badge,
body div.wp-block-jbh-cta-banner .jbh-cta-badge {
	text-decoration: none !important;
}

/* --- Newer block cards (beat theme article/div backgrounds) --- */
body section.wp-block-jbh-insights-grid .jbh-insight-card {
	background: var(--jbh-card) !important;
	border-radius: var(--jbh-card-radius) !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
}

/* --- Newer block buttons/links (reset inherited decoration) --- */
body section.wp-block-jbh-hero-section .jbh-hero-btn,
body div.wp-block-jbh-cta-banner .jbh-cta-btn,
body section.wp-block-jbh-insights-grid .jbh-insight-read-more {
	text-decoration: none !important;
	cursor: pointer !important;
}

/* --- Newer block grids: ensure theme doesn't collapse layout --- */
body section.wp-block-jbh-insights-grid .jbh-insights-list {
	display: grid !important;
	list-style: none !important;
}

/* ================================================================
   10.  CUSTOM COLOR OVERRIDES (Gutenberg InspectorControls)
   ================================================================
   When block-level color attributes are set via the editor sidebar,
   they are injected as inline --jbh-custom-* CSS variables on the
   wrapper.  These rules resolve them with fallback to defaults.
   ================================================================ */

/* --- Section headings --- */
body div.wp-block-jbh-studio-grid .jbh-section-title,
body div.wp-block-jbh-store-grid .jbh-store-title,
body div.wp-block-jbh-pricing-plans .jbh-plans-title,
body div.wp-block-jbh-portfolio-grid .jbh-portfolio-title {
	color: var(--jbh-custom-header, var(--jbh-heading-color)) !important;
}

/* --- Card headings --- */
body div.wp-block-jbh-studio-grid .jbh-card-title,
body div.wp-block-jbh-store-grid .jbh-product-title,
body div.wp-block-jbh-pricing-plans .jbh-plan-name,
body div.wp-block-jbh-portfolio-grid .jbh-project-title {
	color: var(--jbh-custom-header, var(--jbh-card-heading)) !important;
}

/* --- Descriptions & body text --- */
body div.wp-block-jbh-studio-grid .jbh-card-desc,
body div.wp-block-jbh-store-grid .jbh-product-desc,
body div.wp-block-jbh-store-grid .jbh-store-subtitle,
body div.wp-block-jbh-pricing-plans .jbh-plans-subtitle,
body div.wp-block-jbh-pricing-plans .jbh-plan-perks li,
body div.wp-block-jbh-portfolio-grid .jbh-portfolio-subtitle,
body div.wp-block-jbh-portfolio-grid .jbh-project-desc,
body div.wp-block-jbh-portfolio-grid .jbh-project-deliverables li {
	color: var(--jbh-custom-desc, var(--jbh-text-color)) !important;
}

/* --- Prices --- */
body div.wp-block-jbh-studio-grid .jbh-card-price {
	color: var(--jbh-custom-price, var(--jbh-text-color)) !important;
}
body div.wp-block-jbh-store-grid .jbh-product-price {
	color: var(--jbh-custom-price, var(--jbh-heading-color)) !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-price {
	color: var(--jbh-custom-price, var(--jbh-card-heading)) !important;
}

/* --- Icons & accent marks --- */
body div.wp-block-jbh-studio-grid .jbh-category-icon {
	color: var(--jbh-custom-icon, var(--jbh-teal)) !important;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-perks li::before,
body div.wp-block-jbh-portfolio-grid .jbh-project-deliverables li::before {
	color: var(--jbh-custom-icon, var(--jbh-teal)) !important;
}
body div.wp-block-jbh-store-grid .jbh-store-tag,
body div.wp-block-jbh-pricing-plans .jbh-plans-tag,
body div.wp-block-jbh-portfolio-grid .jbh-project-client {
	color: var(--jbh-custom-icon, var(--jbh-teal)) !important;
}

/* --- Buttons / CTAs ---
     Custom btn colors are applied via --jbh-custom-btn (background/border)
     and --jbh-custom-btn-text (text). Button style variants in section 6
     already consume these variables. These rules handle blocks that don't
     use the variant classes (pricing, portfolio) and add !important to
     ensure they beat theme overrides.
   ------------------------------------------------------------ */

/* Pricing: primary CTA button */
body div.wp-block-jbh-pricing-plans .jbh-plan-btn-primary {
	background: var(--jbh-custom-btn, var(--jbh-coral)) !important;
	color: var(--jbh-custom-btn-text, #ffffff) !important;
	border-color: var(--jbh-custom-btn, var(--jbh-coral)) !important;
	transition: filter 0.2s ease, transform 0.2s ease;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-btn-primary:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff));
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-coral)));
	filter: brightness(1.08);
	transform: translateY(-1px);
}
body div.wp-block-jbh-pricing-plans .jbh-plan-btn-primary:active {
	filter: brightness(0.95);
	transform: translateY(0);
}

/* Pricing: outline CTA button */
body div.wp-block-jbh-pricing-plans .jbh-plan-btn-outline {
	color: var(--jbh-custom-btn, var(--jbh-teal)) !important;
	border-color: var(--jbh-custom-btn, var(--jbh-teal)) !important;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
body div.wp-block-jbh-pricing-plans .jbh-plan-btn-outline:hover {
	background: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal))) !important;
	color: var(--jbh-custom-btn-hover-text, var(--jbh-custom-btn-text, #ffffff)) !important;
	border-color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn, var(--jbh-teal))) !important;
	transform: translateY(-1px);
}
body div.wp-block-jbh-pricing-plans .jbh-plan-btn-outline:active {
	filter: brightness(0.9);
	transform: translateY(0);
}

/* Portfolio: CTA link */
body div.wp-block-jbh-portfolio-grid .jbh-project-cta {
	color: var(--jbh-custom-btn, var(--jbh-teal)) !important;
	transition: color 0.2s ease;
}
body div.wp-block-jbh-portfolio-grid .jbh-project-cta:hover {
	color: var(--jbh-custom-btn-hover, var(--jbh-custom-btn-text, var(--jbh-coral))) !important;
}

/* --- Card background --- */
body div.wp-block-jbh-studio-grid .jbh-service-card,
body div.wp-block-jbh-store-grid .jbh-product-card,
body div.wp-block-jbh-pricing-plans .jbh-plan-card,
body div.wp-block-jbh-portfolio-grid .jbh-project-card,
body div.wp-block-jbh-insights-grid .jbh-insight-card {
	background: var(--jbh-custom-card-bg, var(--jbh-card)) !important;
}

/* --- Card border --- */
body div.wp-block-jbh-studio-grid.jbh-cards-bordered .jbh-service-card,
body div.wp-block-jbh-store-grid.jbh-cards-bordered .jbh-product-card,
body div.wp-block-jbh-pricing-plans.jbh-cards-bordered .jbh-plan-card,
body div.wp-block-jbh-portfolio-grid.jbh-cards-bordered .jbh-project-card,
body div.wp-block-jbh-insights-grid.jbh-cards-bordered .jbh-insight-card {
	border-color: var(--jbh-custom-card-border, var(--jbh-border)) !important;
}

/* --- Pricing: badge color --- */
body div.wp-block-jbh-pricing-plans .jbh-plan-badge {
	color: var(--jbh-custom-badge, var(--jbh-coral)) !important;
}
body div.wp-block-jbh-pricing-plans .jbh-highlighted {
	border-color: var(--jbh-custom-badge, var(--jbh-coral)) !important;
}

/* --- Portfolio: tag color --- */
body div.wp-block-jbh-portfolio-grid .jbh-project-tag {
	color: var(--jbh-custom-tag, var(--jbh-text-color)) !important;
	border-color: var(--jbh-custom-tag, var(--jbh-teal-dark)) !important;
}

/* ================================================================
   10b. OVERRIDE-THEME CLASS
   ================================================================
   Blocks with .jbh-override-theme keep their own dark/light mode
   regardless of the site-wide theme toggle setting. The theme
   toggle JS skips these blocks. The CSS variables resolve from
   the block's own .jbh-dark / .jbh-light class rather than
   html[data-theme].
   ================================================================ */
.jbh-override-theme.jbh-dark {
	--jbh-bg: #121212;
	--jbh-card: #1A1A1A;
	--jbh-heading-color: #F0EAD6;
	--jbh-text-color: #9CA3AF;
	--jbh-card-heading: #ffffff;
	--jbh-border: rgba(31, 95, 91, 0.20);
}
.jbh-override-theme.jbh-light {
	--jbh-bg: #F9F8F6;
	--jbh-card: #FFFFFF;
	--jbh-heading-color: #121212;
	--jbh-text-color: #4B5563;
	--jbh-card-heading: #121212;
	--jbh-border: rgba(0, 0, 0, 0.08);
}


/* ================================================================
   11.  RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 1024px) {
	.jbh-service-grid,
	.jbh-product-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.jbh-plans-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
	.jbh-service-grid,
	.jbh-product-grid,
	.jbh-plans-grid,
	.jbh-project-list {
		grid-template-columns: 1fr !important;
	}
	.jbh-studio-grid,
	.jbh-store-grid,
	.jbh-pricing-plans,
	.jbh-portfolio-grid {
		padding-left: 16px;
		padding-right: 16px;
	}
	.jbh-layout-list .jbh-service-card,
	.jbh-layout-list .jbh-product-card {
		flex-direction: column;
		gap: 0;
	}
}

/* ================================================================
   12.  ACCESSIBILITY
   ================================================================ */
.jbh-service-card:focus-within,
.jbh-product-card:focus-within,
.jbh-plan-card:focus-within,
.jbh-project-card:focus-within {
	outline: 2px solid var(--jbh-teal);
	outline-offset: 2px;
}
.jbh-get-started-btn:focus-visible,
.jbh-product-btn:focus-visible,
.jbh-plan-btn:focus-visible,
.jbh-project-cta:focus-visible {
	outline: 2px solid var(--jbh-teal);
	outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	[data-jbh-animate] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	[data-jbh-animate].jbh-animated .jbh-service-card,
	[data-jbh-animate].jbh-animated .jbh-product-card,
	[data-jbh-animate].jbh-animated .jbh-plan-card,
	[data-jbh-animate].jbh-animated .jbh-project-card,
	[data-jbh-animate].jbh-animated .jbh-insight-card {
		animation: none !important;
		opacity: 1;
	}
	.jbh-service-card,
	.jbh-product-card,
	.jbh-plan-card,
	.jbh-project-card,
	.jbh-insight-card {
		transition: none !important;
	}
	.jbh-pulse-dot { animation: none !important; }
	.jbh-category-icon { transition: none !important; }
	.jbh-plan-card.jbh-highlighted { transform: none !important; animation: none !important; }
	html.jbh-smooth-scroll { scroll-behavior: auto !important; }
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.jbh-service-card,
	.jbh-product-card,
	.jbh-plan-card,
	.jbh-project-card,
	.jbh-insight-card {
		border: 2px solid currentColor !important;
	}
}


/* ================================================================
   SKELETON / PLACEHOLDER LOADING
   ================================================================
   Applied via [data-jbh-animate] before JS triggers .jbh-animated.
   Provides a subtle shimmer effect to prevent layout shift.
   ================================================================ */

@keyframes jbhShimmer {
	0%   { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate]:not(.jbh-animated) .jbh-service-card,
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate]:not(.jbh-animated) .jbh-product-card,
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate]:not(.jbh-animated) .jbh-plan-card,
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate]:not(.jbh-animated) .jbh-project-card,
body:not(.editor-styles-wrapper):not(.block-editor-page) [data-jbh-animate]:not(.jbh-animated) .jbh-insight-card {
	opacity: 0;
}

.jbh-skeleton {
	background: linear-gradient(
		90deg,
		var(--jbh-card) 25%,
		rgba(255, 255, 255, 0.06) 50%,
		var(--jbh-card) 75%
	);
	background-size: 800px 100%;
	animation: jbhShimmer 1.6s ease-in-out infinite;
	border-radius: var(--jbh-card-radius);
	min-height: 180px;
}

.jbh-light .jbh-skeleton {
	background: linear-gradient(
		90deg,
		#f0f0ee 25%,
		#ffffff 50%,
		#f0f0ee 75%
	);
	background-size: 800px 100%;
}


/* ================================================================
   MAX-WIDTH CONSTRAINTS
   ================================================================
   Non-aligned JBH blocks get a sensible max-width and auto-center.
   ================================================================ */

.jbh-studio-grid:not(.alignwide):not(.alignfull),
.jbh-store-grid:not(.alignwide):not(.alignfull),
.jbh-pricing-plans:not(.alignwide):not(.alignfull),
.jbh-portfolio-grid:not(.alignwide):not(.alignfull) {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}


/* ================================================================
   DEFAULT HOVER STATES
   ================================================================
   Cards without an explicit hover class still get a subtle lift.
   ================================================================ */

.jbh-product-card:hover,
.jbh-project-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jbh-light .jbh-product-card:hover,
.jbh-light .jbh-project-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


/* ================================================================
   PROTOTYPE EFFECTS — Phase 3
   ================================================================
   Matches the original JBH prototype's micro-interactions:
   smooth scroll, button glow, card title hover, icon hover,
   pulse dot, tap highlight, light-mode shadows, CTA underline.
   ================================================================ */

/* --- Smooth scroll (matches prototype html.scroll-smooth) --- */
html.jbh-smooth-scroll {
	scroll-behavior: smooth;
}

/* --- Tap highlight removal for JBH blocks (mobile UX) --- */
.jbh-studio-grid,
.jbh-store-grid,
.jbh-pricing-plans,
.jbh-portfolio-grid,
.jbh-hero-section,
.jbh-section-header,
.jbh-about-section,
.jbh-insights-grid,
.jbh-cta-banner {
	-webkit-tap-highlight-color: transparent;
}

/* --- Button glow shadow on coral/filled CTA buttons --- */
.jbh-btn-filled .jbh-get-started-btn,
.jbh-btn-filled .jbh-product-btn,
.jbh-btn-filled .jbh-plan-btn,
.jbh-btn-filled .jbh-project-cta {
	box-shadow: 0 4px 14px 0 rgba(214, 79, 66, 0.39);
}
.jbh-btn-filled .jbh-get-started-btn:hover,
.jbh-btn-filled .jbh-product-btn:hover,
.jbh-btn-filled .jbh-plan-btn:hover,
.jbh-btn-filled .jbh-project-cta:hover {
	box-shadow: 0 6px 20px 0 rgba(214, 79, 66, 0.50);
}

/* --- Outline button glow on hover --- */
.jbh-btn-outline .jbh-get-started-btn:hover,
.jbh-btn-outline .jbh-product-btn:hover,
.jbh-btn-outline .jbh-plan-btn:hover,
.jbh-btn-outline .jbh-project-cta:hover {
	box-shadow: 0 4px 14px 0 rgba(42, 157, 143, 0.30);
}

/* --- Card title color change on card hover --- */
.jbh-service-card:hover .jbh-card-title,
.jbh-product-card:hover .jbh-product-title,
.jbh-plan-card:hover .jbh-plan-name,
.jbh-project-card:hover .jbh-project-title,
.jbh-insight-card:hover .jbh-insight-title {
	color: var(--jbh-teal);
	transition: color 0.2s ease;
}

/* --- Category icon container hover (scale + color shift) --- */
.jbh-category-icon {
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
	border-radius: 6px;
	padding: 4px;
}
.jbh-service-section:hover .jbh-category-icon {
	background: var(--jbh-teal);
	color: #ffffff !important;
	transform: scale(1.12);
}

/* --- Pulse animation for accent dots --- */
@keyframes jbh-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
.jbh-pulse-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--jbh-teal);
	display: inline-block;
	animation: jbh-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* --- Light mode card shadows (softer like prototype) --- */
.jbh-light .jbh-service-card,
.jbh-light .jbh-product-card,
.jbh-light .jbh-plan-card,
.jbh-light .jbh-project-card,
.jbh-light .jbh-insight-card {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.jbh-light .jbh-service-card:hover,
.jbh-light .jbh-product-card:hover,
.jbh-light .jbh-plan-card:hover,
.jbh-light .jbh-project-card:hover,
.jbh-light .jbh-insight-card:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* --- Dark mode card shadows (deeper like prototype) --- */
.jbh-dark .jbh-service-card,
.jbh-dark .jbh-product-card,
.jbh-dark .jbh-plan-card,
.jbh-dark .jbh-project-card,
.jbh-dark .jbh-insight-card {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
}
.jbh-dark .jbh-service-card:hover,
.jbh-dark .jbh-product-card:hover,
.jbh-dark .jbh-plan-card:hover,
.jbh-dark .jbh-project-card:hover,
.jbh-dark .jbh-insight-card:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* --- Ghost CTA underline on hover (prototype style) --- */
.jbh-btn-ghost .jbh-get-started-btn,
.jbh-btn-ghost .jbh-product-btn,
.jbh-btn-ghost .jbh-plan-btn,
.jbh-btn-ghost .jbh-project-cta {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.jbh-btn-ghost .jbh-get-started-btn:hover,
.jbh-btn-ghost .jbh-product-btn:hover,
.jbh-btn-ghost .jbh-plan-btn:hover,
.jbh-btn-ghost .jbh-project-cta:hover {
	text-decoration-color: currentColor;
}

/* --- CTA arrow icon translate on hover --- */
.jbh-get-started-btn svg,
.jbh-product-btn svg,
.jbh-plan-btn svg,
.jbh-project-cta svg {
	transition: transform 0.2s ease;
}
.jbh-get-started-btn:hover svg,
.jbh-product-btn:hover svg,
.jbh-plan-btn:hover svg,
.jbh-project-cta:hover svg {
	transform: translateX(3px);
}

/* --- Pricing plan popular card scale + float animation --- */
@keyframes jbh-float {
	0%, 100% { transform: scale(1.03) translateY(0); }
	50%      { transform: scale(1.03) translateY(-8px); }
}
.jbh-plan-card.jbh-highlighted {
	transform: scale(1.03);
	z-index: 2;
	animation: jbh-float 3.5s ease-in-out infinite;
}
.jbh-plan-card.jbh-highlighted:hover {
	animation-play-state: paused;
	transform: scale(1.05) translateY(-4px);
}

/* --- Tag/badge pills hover --- */
.jbh-project-tag:hover {
	border-color: var(--jbh-teal);
	color: var(--jbh-teal);
	transition: border-color 0.2s ease, color 0.2s ease;
}

/* --- Pricing toggle track active state (matches prototype) --- */
.jbh-pricing-toggle-track {
	transition: background 0.3s ease, border-color 0.3s ease;
}
.jbh-pricing-toggle:checked + .jbh-pricing-toggle-track {
	background: var(--jbh-teal);
	border-color: var(--jbh-teal);
}


/* ================================================================
   PREMIUM POLISH — Phase 6
   Enhanced typography, gradient text, focus rings, micro-interactions
   ================================================================ */

/* --- Gradient text utility --- */
.jbh-gradient-text,
.jbh-section-title .jbh-gradient-text {
	background: linear-gradient(135deg, var(--jbh-teal), var(--jbh-coral, #D64F42));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* --- Focus rings — WCAG 2.2 visible + brand-consistent --- */
.jbh-service-card:focus-visible,
.jbh-product-card:focus-visible,
.jbh-plan-card:focus-visible,
.jbh-project-card:focus-visible,
.jbh-insight-card:focus-visible {
	outline: 2px solid var(--jbh-teal);
	outline-offset: 3px;
	border-radius: inherit;
}
.jbh-studio-grid .jbh-get-started-btn:focus-visible,
.jbh-store-grid .jbh-product-btn:focus-visible,
.jbh-pricing-plans .jbh-plan-btn:focus-visible,
.jbh-portfolio-grid .jbh-project-cta:focus-visible {
	outline: 2px solid var(--jbh-teal);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.18);
}

/* --- Premium typography rhythm --- */
.jbh-section-title,
.jbh-store-title,
.jbh-plans-title,
.jbh-portfolio-title {
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.jbh-section-subtitle,
.jbh-store-subtitle,
.jbh-plans-subtitle,
.jbh-portfolio-subtitle {
	letter-spacing: 0.01em;
	line-height: 1.6;
	max-width: 640px;
}

/* --- Card inner content spacing refinement --- */
.jbh-service-card,
.jbh-product-card,
.jbh-plan-card,
.jbh-project-card {
	display: flex;
	flex-direction: column;
}
.jbh-card-footer,
.jbh-product-btn,
.jbh-plan-btn,
.jbh-project-cta {
	margin-top: auto;
}

/* --- Glass card refinement for light mode --- */
html.light .jbh-cards-glass .jbh-service-card,
html.light .jbh-cards-glass .jbh-product-card,
html.light .jbh-cards-glass .jbh-plan-card,
html.light .jbh-cards-glass .jbh-project-card {
	background: rgba(255, 255, 255, 0.55);
	border-color: rgba(0, 0, 0, 0.06);
}

/* --- Badge shimmer for highlighted pricing plan --- */
@keyframes jbh-badge-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}
body .jbh-pricing-plans .jbh-plan-card.jbh-highlighted .jbh-plan-badge {
	background: linear-gradient(90deg, var(--jbh-teal) 0%, var(--jbh-coral, #D64F42) 50%, var(--jbh-teal) 100%) !important;
	background-size: 200% auto;
	animation: jbh-badge-shimmer 3s linear infinite;
	color: #fff !important;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* --- Smooth icon color transitions --- */
.jbh-category-icon,
.jbh-plan-icon {
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* --- Subtle card border glow on focus for neon theme --- */
.jbh-cards-neon .jbh-service-card:focus-within,
.jbh-cards-neon .jbh-product-card:focus-within,
.jbh-cards-neon .jbh-plan-card:focus-within,
.jbh-cards-neon .jbh-project-card:focus-within {
	box-shadow: 0 0 20px rgba(42, 157, 143, 0.35), 0 0 60px rgba(42, 157, 143, 0.10);
}

/* --- Pricing price number emphasis --- */
.jbh-plan-price-value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* --- Button press micro-interaction (all blocks) --- */
.jbh-studio-grid .jbh-get-started-btn:active,
.jbh-store-grid .jbh-product-btn:active,
.jbh-pricing-plans .jbh-plan-btn:active,
.jbh-portfolio-grid .jbh-project-cta:active {
	transform: scale(0.97);
	transition-duration: 0.08s;
}

/* --- Reduced motion guards for Phase 6 additions --- */
@media (prefers-reduced-motion: reduce) {
	.jbh-plan-card.jbh-highlighted .jbh-plan-badge { animation: none; }
	.jbh-studio-grid .jbh-get-started-btn:active,
	.jbh-store-grid .jbh-product-btn:active,
	.jbh-pricing-plans .jbh-plan-btn:active,
	.jbh-portfolio-grid .jbh-project-cta:active { transform: none; }
}


/* ================================================================
   13.  HERO SECTION BLOCK
   ================================================================ */

.jbh-hero-section {
	padding: 80px 24px 60px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.jbh-hero-section.jbh-hero-align-left { text-align: left; }
.jbh-hero-section.jbh-dark  { background: var(--jbh-bg); }
.jbh-hero-section.jbh-light { background: var(--jbh-bg); }

.jbh-hero-inner {
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.jbh-hero-align-left .jbh-hero-inner { margin: 0; }

.jbh-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 11px;
	font-family: var(--jbh-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 24px;
	border: 1px solid var(--jbh-border);
}
.jbh-dark .jbh-hero-badge  { background: var(--jbh-card); color: var(--jbh-creme); }
.jbh-light .jbh-hero-badge { background: #fff; color: #121212; }

.jbh-hero-inner {
	max-width: var(--jbh-hero-max-w, 800px);
}

.jbh-hero-heading {
	font-family: var(--jbh-font-serif);
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 700;
	line-height: 1.08;
	margin: 0 0 20px;
}

/* Hero heading size variants */
.jbh-hero-heading-small .jbh-hero-heading  { font-size: clamp(24px, 4vw, 36px); }
.jbh-hero-heading-medium .jbh-hero-heading { font-size: clamp(30px, 5vw, 48px); }
.jbh-hero-heading-large .jbh-hero-heading  { font-size: clamp(36px, 6vw, 64px); }
.jbh-dark .jbh-hero-heading  { color: #fff; }
.jbh-light .jbh-hero-heading { color: #121212; }
.jbh-hero-heading em { font-style: italic; font-weight: 500; }

.jbh-hero-subtitle {
	font-family: var(--jbh-font-sans);
	font-size: 16px;
	line-height: 1.8;
	font-weight: 300;
	max-width: 640px;
	margin: 0 auto 36px;
}
.jbh-hero-align-left .jbh-hero-subtitle { margin-left: 0; }
.jbh-dark .jbh-hero-subtitle  { color: var(--jbh-slate); }
.jbh-light .jbh-hero-subtitle { color: #4B5563; }

.jbh-hero-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.jbh-hero-align-left .jbh-hero-buttons { justify-content: flex-start; }

.jbh-hero-btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 28px;
	font-family: var(--jbh-font-serif);
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--jbh-card-radius);
	text-decoration: none;
	transition: all var(--jbh-transition);
	cursor: pointer;
}
.jbh-hero-btn-primary {
	background: var(--jbh-coral);
	color: #fff;
	box-shadow: 0 4px 14px rgba(214, 79, 66, 0.39);
}
.jbh-hero-btn-primary:hover {
	box-shadow: 0 6px 20px rgba(214, 79, 66, 0.55);
	transform: translateY(-1px);
}
.jbh-hero-btn-secondary {
	border: 1px solid var(--jbh-border);
}
.jbh-dark .jbh-hero-btn-secondary  { background: var(--jbh-card); color: var(--jbh-creme); }
.jbh-light .jbh-hero-btn-secondary { background: #fff; color: #121212; }
.jbh-hero-btn-secondary:hover {
	border-color: var(--jbh-teal);
	color: var(--jbh-teal);
}

.jbh-hero-gradient-bridge {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(to bottom, transparent, var(--jbh-bg));
	z-index: 1;
	pointer-events: none;
}
.jbh-light .jbh-hero-gradient-bridge {
	background: linear-gradient(to bottom, transparent, var(--jbh-bg));
}


/* ================================================================
   14.  SECTION HEADER BLOCK
   ================================================================ */

.jbh-section-header {
	padding: 12px 0 28px;
}
.jbh-section-header.jbh-sh-align-center { text-align: center; }

.jbh-sh-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-family: var(--jbh-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	padding-bottom: 6px;
	border-bottom: 2px solid currentColor;
	margin-bottom: 16px;
}
.jbh-sh-badge-coral { color: var(--jbh-coral); }
.jbh-sh-badge-teal  { color: var(--jbh-teal); }
.jbh-sh-badge-muted { color: var(--jbh-slate); }

.jbh-sh-heading {
	font-family: var(--jbh-font-serif);
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.15;
}
.jbh-sh-large  { font-size: clamp(36px, 5vw, 56px); }
.jbh-sh-medium { font-size: clamp(28px, 4vw, 42px); }
.jbh-sh-small  { font-size: clamp(22px, 3vw, 32px); }
.jbh-dark .jbh-sh-heading  { color: #fff; }
.jbh-light .jbh-sh-heading { color: #121212; }

.jbh-sh-subtitle {
	font-family: var(--jbh-font-sans);
	font-size: 16px;
	line-height: 1.8;
	font-weight: 300;
	max-width: 640px;
	margin: 0;
}
.jbh-sh-align-center .jbh-sh-subtitle { margin: 0 auto; }
.jbh-dark .jbh-sh-subtitle  { color: var(--jbh-slate); }
.jbh-light .jbh-sh-subtitle { color: #4B5563; }


/* ================================================================
   15.  ABOUT SECTION BLOCK
   ================================================================ */

.jbh-about-section { padding: 0; }
.jbh-about-section.jbh-dark  { color: var(--jbh-slate); }
.jbh-about-section.jbh-light { color: #4B5563; }

.jbh-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
@media (max-width: 768px) {
	.jbh-about-grid { grid-template-columns: 1fr; }
}

.jbh-about-label {
	color: var(--jbh-teal);
	font-family: var(--jbh-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 12px;
}

.jbh-about-heading {
	font-family: var(--jbh-font-serif);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.12;
	margin: 0 0 28px;
}
.jbh-dark .jbh-about-heading  { color: #fff; }
.jbh-light .jbh-about-heading { color: #121212; }
.jbh-about-heading em { font-style: italic; font-weight: 500; }
.jbh-dark .jbh-about-heading em  { color: var(--jbh-creme); }
.jbh-light .jbh-about-heading em { color: #121212; }

.jbh-about-founder-card {
	padding: 28px;
	border-radius: var(--jbh-card-radius);
	margin-bottom: 28px;
}
.jbh-dark .jbh-about-founder-card  { background: var(--jbh-card); border: 1px solid var(--jbh-border); }
.jbh-light .jbh-about-founder-card { background: #fff; border: 1px solid #e0e0e0; }

.jbh-about-founder-name {
	font-family: var(--jbh-font-serif);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
}
.jbh-dark .jbh-about-founder-name  { color: #fff; }
.jbh-light .jbh-about-founder-name { color: #121212; }

.jbh-about-founder-title {
	color: var(--jbh-coral);
	font-family: var(--jbh-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 12px;
}

.jbh-about-founder-skills p {
	font-size: 13px;
	line-height: 1.8;
	margin: 2px 0;
}

.jbh-about-bio {
	font-size: 16px;
	line-height: 1.8;
}
.jbh-about-bio p { margin: 0 0 16px; }
.jbh-dark .jbh-about-bio strong  { color: var(--jbh-creme); }
.jbh-light .jbh-about-bio strong { color: #121212; }

.jbh-about-contact-sidebar {
	padding: 28px;
	border-radius: var(--jbh-card-radius);
	position: sticky;
	top: 80px;
	align-self: start;
}
.jbh-dark .jbh-about-contact-sidebar  { background: var(--jbh-card); border: 1px solid var(--jbh-border); }
.jbh-light .jbh-about-contact-sidebar { background: #fff; border: 1px solid #e0e0e0; }

.jbh-about-contact-title {
	font-family: var(--jbh-font-serif);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 24px;
	padding-bottom: 12px;
}
.jbh-dark .jbh-about-contact-title  { color: var(--jbh-creme); border-bottom: 1px solid var(--jbh-border); }
.jbh-light .jbh-about-contact-title { color: #121212; border-bottom: 1px solid #e0e0e0; }

.jbh-about-contact-item { margin-bottom: 20px; }
.jbh-about-contact-label {
	display: block;
	font-size: 11px;
	font-family: var(--jbh-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}
.jbh-about-contact-value {
	font-style: normal;
	text-decoration: none;
}
.jbh-dark .jbh-about-contact-value  { color: #fff; }
.jbh-light .jbh-about-contact-value { color: #121212; }
a.jbh-about-contact-value:hover { color: var(--jbh-teal); }


/* ================================================================
   16.  INSIGHTS GRID BLOCK
   ================================================================ */

.jbh-insights-grid { padding: 0; }
.jbh-insights-grid.jbh-dark  { color: var(--jbh-slate); }
.jbh-insights-grid.jbh-light { color: #4B5563; }

.jbh-insights-list {
	display: grid;
	grid-template-columns: repeat( var(--jbh-cols, 1), 1fr );
	gap: var(--jbh-gap);
}
@media (max-width: 768px) {
	.jbh-insights-list { grid-template-columns: 1fr; }
}

.jbh-insight-card {
	display: flex;
	gap: 20px;
	padding: 28px;
	border-radius: var(--jbh-card-radius);
	align-items: flex-start;
	transition: all var(--jbh-transition);
}
.jbh-dark .jbh-insight-card  { background: var(--jbh-card); border: 1px solid var(--jbh-border); }
.jbh-light .jbh-insight-card { background: #fff; border: 1px solid #e0e0e0; }
.jbh-insight-card:hover {
	border-color: rgba(42, 157, 143, 0.3);
}

.jbh-insight-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--jbh-card-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--jbh-teal);
}
.jbh-dark .jbh-insight-icon  { background: var(--jbh-bg); border: 1px solid rgba(42, 157, 143, 0.2); }
.jbh-light .jbh-insight-icon { background: #F9F8F6; border: 1px solid rgba(42, 157, 143, 0.2); }

.jbh-insight-content { flex: 1; min-width: 0; }

.jbh-insight-meta {
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
	font-size: 11px;
	font-family: var(--jbh-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.jbh-insight-category { color: var(--jbh-teal); }
.jbh-insight-date { opacity: 0.7; }

.jbh-insight-title {
	font-family: var(--jbh-font-serif);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.3;
}
.jbh-insight-title a { text-decoration: none; }
.jbh-dark .jbh-insight-title a  { color: #fff; }
.jbh-light .jbh-insight-title a { color: #121212; }
.jbh-insight-title a:hover { color: var(--jbh-teal); }

.jbh-insight-excerpt {
	font-size: 14px;
	line-height: 1.7;
	font-weight: 300;
	margin: 0 0 12px;
}

.jbh-insight-read-more {
	color: var(--jbh-coral);
	font-family: var(--jbh-font-serif);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	transition: color var(--jbh-transition);
}
.jbh-insight-read-more:hover { color: var(--jbh-teal); }

.jbh-insights-empty {
	padding: 40px;
	text-align: center;
}


/* ================================================================
   17.  CTA BANNER BLOCK
   ================================================================ */

.jbh-cta-banner {
	padding: 40px 24px;
	position: relative;
}
.jbh-cta-banner.jbh-cta-align-center { text-align: center; }
.jbh-cta-banner.jbh-cta-border-top {
	border-top: 1px solid var(--jbh-border);
}
.jbh-dark .jbh-cta-banner  { background: var(--jbh-card); }
.jbh-light .jbh-cta-banner { background: #fff; }
.jbh-dark .jbh-cta-banner.jbh-cta-border-top  { border-top-color: var(--jbh-border); }
.jbh-light .jbh-cta-banner.jbh-cta-border-top { border-top-color: #e0e0e0; }

.jbh-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 11px;
	font-family: var(--jbh-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
	border: 1px solid var(--jbh-border);
}
.jbh-dark .jbh-cta-badge  { background: var(--jbh-bg); color: var(--jbh-creme); }
.jbh-light .jbh-cta-badge { background: #F9F8F6; color: #121212; }

.jbh-cta-heading {
	font-family: var(--jbh-font-serif);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	margin: 0 0 8px;
}
.jbh-dark .jbh-cta-heading  { color: var(--jbh-creme); }
.jbh-light .jbh-cta-heading { color: #121212; }

.jbh-cta-subtitle {
	font-family: var(--jbh-font-sans);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
	margin: 0 0 24px;
}
.jbh-dark .jbh-cta-subtitle  { color: var(--jbh-slate); }
.jbh-light .jbh-cta-subtitle { color: #4B5563; }

.jbh-cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 28px;
	font-family: var(--jbh-font-serif);
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--jbh-card-radius);
	text-decoration: none;
	transition: all var(--jbh-transition);
	cursor: pointer;
}
.jbh-cta-btn-filled {
	background: var(--jbh-teal);
	color: #fff;
	border: none;
}
.jbh-cta-btn-filled:hover {
	background: var(--jbh-teal-dark);
	transform: translateY(-1px);
}
.jbh-cta-btn-outline {
	background: transparent;
	color: var(--jbh-teal);
	border: 1px solid var(--jbh-teal);
}
.jbh-cta-btn-outline:hover {
	background: rgba(42, 157, 143, 0.08);
}
.jbh-cta-btn-ghost {
	background: transparent;
	color: var(--jbh-teal);
	border: none;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
}
.jbh-cta-btn-ghost:hover {
	text-decoration-color: currentColor;
}

@media (max-width: 600px) {
	.jbh-hero-section { padding: 48px 16px 40px; }
	.jbh-hero-heading { font-size: 32px; }
	.jbh-hero-btn { padding: 12px 20px; font-size: 14px; }
	.jbh-about-grid { gap: 24px; }
	.jbh-about-contact-sidebar { position: static; }
	.jbh-insight-card { flex-direction: column; }
	.jbh-cta-banner { padding: 28px 16px; }
}


/* ================================================================
   CARD SHAPE UTILITIES
   ================================================================
   jbh-shape-* classes set --jbh-card-radius which cascades to all
   children via the variable.  Works with the nuclear specificity
   shield that enforces border-radius: var(--jbh-card-radius) !important.
   ================================================================ */

.jbh-shape-sharp   { --jbh-card-radius: 0 !important; }
.jbh-shape-rounded  { --jbh-card-radius: 8px !important; }
.jbh-shape-soft     { --jbh-card-radius: 16px !important; }
.jbh-shape-pill     { --jbh-card-radius: 24px !important; }
.jbh-shape-circle   { --jbh-card-radius: 50% !important; }

/* Wrapper-level border-radius for blocks that ARE the container */
.jbh-hero-section[class*="jbh-shape-"],
.jbh-cta-banner[class*="jbh-shape-"] {
	border-radius: var(--jbh-card-radius);
}

/* Ensure overflow hidden for all shapes to clip content */
[class*="jbh-shape-"] .jbh-service-card,
[class*="jbh-shape-"] .jbh-product-card,
[class*="jbh-shape-"] .jbh-plan-card,
[class*="jbh-shape-"] .jbh-project-card,
[class*="jbh-shape-"] .jbh-insight-card,
[class*="jbh-shape-"] .jbh-about-founder-card,
[class*="jbh-shape-"] .jbh-about-contact-sidebar { overflow: hidden; }
/* Exception: highlighted plan card needs visible overflow for floating badge */
[class*="jbh-shape-"] .jbh-plan-card.jbh-highlighted { overflow: visible !important; }


/* ================================================================
   PRINT STYLES
   ================================================================
   Force light backgrounds and hide interactive UI for printing.
   ================================================================ */

@media print {
	.jbh-studio-grid,
	.jbh-store-grid,
	.jbh-pricing-plans,
	.jbh-portfolio-grid,
	.jbh-hero-section,
	.jbh-section-header,
	.jbh-about-section,
	.jbh-insights-grid,
	.jbh-cta-banner {
		color: #1e1e1e !important;
		background: #fff !important;
	}

	.jbh-service-card,
	.jbh-product-card,
	.jbh-plan-card,
	.jbh-project-card,
	.jbh-insight-card,
	.jbh-about-founder-card,
	.jbh-about-contact-sidebar,
	.jbh-hero-badge,
	.jbh-cta-badge {
		background: #fff !important;
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.jbh-get-started-btn,
	.jbh-product-btn,
	.jbh-plan-btn,
	.jbh-hero-btn,
	.jbh-cta-btn,
	.jbh-insight-read-more,
	.jbh-pricing-toggle-wrap,
	.jbh-overlay,
	.jbh-theme-toggle-wrap,
	.jbh-hero-gradient-bridge {
		display: none !important;
	}

	.jbh-card-title,
	.jbh-product-title,
	.jbh-plan-name,
	.jbh-project-title,
	.jbh-section-title,
	.jbh-hero-heading,
	.jbh-sh-heading,
	.jbh-cta-heading,
	.jbh-about-heading,
	.jbh-insight-title {
		color: #1e1e1e !important;
	}

	.jbh-card-desc,
	.jbh-product-desc,
	.jbh-project-desc,
	.jbh-plan-perks li,
	.jbh-hero-subtitle,
	.jbh-sh-subtitle,
	.jbh-cta-subtitle,
	.jbh-about-bio,
	.jbh-insight-excerpt {
		color: #333 !important;
	}
}


/* ================================================================
   UI POLISH — Phase 4
   ================================================================
   Enhanced focus rings, button ripple, form inputs, card inner glow,
   glass card adaptive borders, smooth content transitions.
   ================================================================ */

/* --- Enhanced focus rings with brand color + offset --- */
.jbh-get-started-btn:focus-visible,
.jbh-product-btn:focus-visible,
.jbh-plan-btn:focus-visible,
.jbh-project-cta:focus-visible,
.jbh-hero-btn:focus-visible,
.jbh-cta-btn:focus-visible {
	outline: 2px solid var(--jbh-teal);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.20);
	transition: outline-offset 0.15s ease, box-shadow 0.15s ease;
}

/* --- Button ripple effect (CSS-only, via ::after pseudo-element) --- */
.jbh-get-started-btn,
.jbh-product-btn,
.jbh-plan-btn,
.jbh-project-cta,
.jbh-hero-btn,
.jbh-cta-btn {
	position: relative;
	overflow: hidden;
}
.jbh-get-started-btn::after,
.jbh-product-btn::after,
.jbh-plan-btn::after,
.jbh-project-cta::after,
.jbh-hero-btn::after,
.jbh-cta-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	transform: translate(-50%, -50%);
	transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
	opacity: 0;
	pointer-events: none;
}
.jbh-get-started-btn:active::after,
.jbh-product-btn:active::after,
.jbh-plan-btn:active::after,
.jbh-project-cta:active::after,
.jbh-hero-btn:active::after,
.jbh-cta-btn:active::after {
	width: 300px;
	height: 300px;
	opacity: 1;
	transition: width 0s, height 0s, opacity 0s;
}

/* --- Form input modernization (modal + WC forms) --- */
.jbh-modal-panel input[type="text"],
.jbh-modal-panel input[type="email"],
.jbh-modal-panel input[type="number"],
.jbh-modal-panel textarea,
.jbh-modal-panel select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--jbh-dm-input-bg, var(--jbh-card));
	color: var(--jbh-dm-text, var(--jbh-creme));
	border: 1px solid var(--jbh-border);
	border-radius: var(--jbh-card-radius);
	padding: 10px 14px;
	font-family: var(--jbh-font-sans);
	font-size: 14px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.jbh-modal-panel input:focus,
.jbh-modal-panel textarea:focus,
.jbh-modal-panel select:focus {
	outline: none;
	border-color: var(--jbh-dm-input-focus-border, var(--jbh-teal));
	box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}
.jbh-modal-panel input::placeholder,
.jbh-modal-panel textarea::placeholder {
	color: var(--jbh-slate);
	opacity: 0.7;
}

/* --- Card inner glow on hover (for glass + neon variants) --- */
.jbh-cards-glass .jbh-service-card:hover,
.jbh-cards-glass .jbh-product-card:hover,
.jbh-cards-glass .jbh-plan-card:hover,
.jbh-cards-glass .jbh-project-card:hover,
.jbh-cards-glass .jbh-insight-card:hover {
	box-shadow: inset 0 0 30px rgba(42, 157, 143, 0.05), 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* --- Glass card dark/light adaptive borders --- */
html[data-theme="dark"] .jbh-cards-glass .jbh-service-card,
html.dark .jbh-cards-glass .jbh-service-card,
html[data-theme="dark"] .jbh-cards-glass .jbh-product-card,
html.dark .jbh-cards-glass .jbh-product-card,
html[data-theme="dark"] .jbh-cards-glass .jbh-plan-card,
html.dark .jbh-cards-glass .jbh-plan-card,
html[data-theme="dark"] .jbh-cards-glass .jbh-project-card,
html.dark .jbh-cards-glass .jbh-project-card,
html[data-theme="dark"] .jbh-cards-glass .jbh-insight-card,
html.dark .jbh-cards-glass .jbh-insight-card {
	border-color: rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.03);
}
html[data-theme="light"] .jbh-cards-glass .jbh-service-card,
html.light .jbh-cards-glass .jbh-service-card,
html[data-theme="light"] .jbh-cards-glass .jbh-product-card,
html.light .jbh-cards-glass .jbh-product-card,
html[data-theme="light"] .jbh-cards-glass .jbh-plan-card,
html.light .jbh-cards-glass .jbh-plan-card,
html[data-theme="light"] .jbh-cards-glass .jbh-project-card,
html.light .jbh-cards-glass .jbh-project-card,
html[data-theme="light"] .jbh-cards-glass .jbh-insight-card,
html.light .jbh-cards-glass .jbh-insight-card {
	border-color: rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.60);
}

/* --- Smooth text content fade for card descriptions --- */
.jbh-card-desc,
.jbh-product-desc,
.jbh-plan-desc,
.jbh-project-excerpt {
	transition: color 0.3s ease;
}

/* --- Card content text truncation utility --- */
.jbh-text-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jbh-text-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Reduced motion for Phase 4 --- */
@media (prefers-reduced-motion: reduce) {
	.jbh-get-started-btn::after,
	.jbh-product-btn::after,
	.jbh-plan-btn::after,
	.jbh-project-cta::after,
	.jbh-hero-btn::after,
	.jbh-cta-btn::after {
		display: none;
	}
}


/* ================================================================
   BADGE DESIGN SYSTEM
   ================================================================
   Unified badge styles across all blocks. Shape, color, and style
   variants are composable via CSS classes. Dark/light mode reactive.
   ================================================================ */

/* --- Base badge reset (applies to ALL badge types) --- */
.jbh-product-badge,
.jbh-plan-badge,
.jbh-hero-badge,
.jbh-sh-badge,
.jbh-cta-badge {
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* --- Shape variants (override per-badge radius) --- */
.jbh-badge-sharp .jbh-product-badge,
.jbh-badge-sharp .jbh-plan-badge,
.jbh-badge-sharp .jbh-hero-badge,
.jbh-badge-sharp .jbh-sh-badge,
.jbh-badge-sharp .jbh-cta-badge  { border-radius: 0 !important; }

.jbh-badge-rounded .jbh-product-badge,
.jbh-badge-rounded .jbh-plan-badge,
.jbh-badge-rounded .jbh-hero-badge,
.jbh-badge-rounded .jbh-sh-badge,
.jbh-badge-rounded .jbh-cta-badge { border-radius: 8px !important; }

.jbh-badge-pill .jbh-product-badge,
.jbh-badge-pill .jbh-plan-badge,
.jbh-badge-pill .jbh-hero-badge,
.jbh-badge-pill .jbh-sh-badge,
.jbh-badge-pill .jbh-cta-badge    { border-radius: 999px !important; }

/* --- Size variants --- */
.jbh-badge-sm .jbh-product-badge,
.jbh-badge-sm .jbh-plan-badge,
.jbh-badge-sm .jbh-hero-badge,
.jbh-badge-sm .jbh-sh-badge,
.jbh-badge-sm .jbh-cta-badge  { font-size: 10px; padding: 3px 8px; }

.jbh-badge-md .jbh-product-badge,
.jbh-badge-md .jbh-plan-badge,
.jbh-badge-md .jbh-hero-badge,
.jbh-badge-md .jbh-sh-badge,
.jbh-badge-md .jbh-cta-badge  { font-size: 12px; padding: 5px 12px; }

.jbh-badge-lg .jbh-product-badge,
.jbh-badge-lg .jbh-plan-badge,
.jbh-badge-lg .jbh-hero-badge,
.jbh-badge-lg .jbh-sh-badge,
.jbh-badge-lg .jbh-cta-badge  { font-size: 14px; padding: 6px 16px; }

/* --- Font variants --- */
.jbh-badge-font-sans .jbh-product-badge,
.jbh-badge-font-sans .jbh-plan-badge,
.jbh-badge-font-sans .jbh-hero-badge,
.jbh-badge-font-sans .jbh-sh-badge,
.jbh-badge-font-sans .jbh-cta-badge  { font-family: var(--jbh-font-sans); }

.jbh-badge-font-serif .jbh-product-badge,
.jbh-badge-font-serif .jbh-plan-badge,
.jbh-badge-font-serif .jbh-hero-badge,
.jbh-badge-font-serif .jbh-sh-badge,
.jbh-badge-font-serif .jbh-cta-badge  { font-family: var(--jbh-font-serif); font-style: italic; }

.jbh-badge-font-mono .jbh-product-badge,
.jbh-badge-font-mono .jbh-plan-badge,
.jbh-badge-font-mono .jbh-hero-badge,
.jbh-badge-font-mono .jbh-sh-badge,
.jbh-badge-font-mono .jbh-cta-badge  { font-family: var(--jbh-font-mono); letter-spacing: 0.5px; }

/* --- Weight variants --- */
.jbh-badge-weight-normal .jbh-product-badge,
.jbh-badge-weight-normal .jbh-plan-badge,
.jbh-badge-weight-normal .jbh-hero-badge,
.jbh-badge-weight-normal .jbh-sh-badge,
.jbh-badge-weight-normal .jbh-cta-badge  { font-weight: 400; }

.jbh-badge-weight-bold .jbh-product-badge,
.jbh-badge-weight-bold .jbh-plan-badge,
.jbh-badge-weight-bold .jbh-hero-badge,
.jbh-badge-weight-bold .jbh-sh-badge,
.jbh-badge-weight-bold .jbh-cta-badge  { font-weight: 700; }

.jbh-badge-uppercase .jbh-product-badge,
.jbh-badge-uppercase .jbh-plan-badge,
.jbh-badge-uppercase .jbh-hero-badge,
.jbh-badge-uppercase .jbh-sh-badge,
.jbh-badge-uppercase .jbh-cta-badge  { text-transform: uppercase; letter-spacing: 1px; }

/* --- Color variants --- */
/* Teal */
.jbh-badge-color-teal .jbh-product-badge,
.jbh-badge-color-teal .jbh-plan-badge  { color: var(--jbh-teal); }
.jbh-badge-color-teal .jbh-product-badge { background: rgba(42,157,143,0.10); }

/* Coral (default for plan/product badges — explicitly defined for override) */
.jbh-badge-color-coral .jbh-product-badge,
.jbh-badge-color-coral .jbh-plan-badge  { color: var(--jbh-coral); }
.jbh-badge-color-coral .jbh-product-badge { background: var(--jbh-coral-light); }

/* Gold */
.jbh-badge-color-gold .jbh-product-badge,
.jbh-badge-color-gold .jbh-plan-badge { color: #D4A017; }
.jbh-badge-color-gold .jbh-product-badge { background: rgba(212,160,23,0.10); }

/* Muted / Slate */
.jbh-badge-color-muted .jbh-product-badge,
.jbh-badge-color-muted .jbh-plan-badge { color: var(--jbh-slate); }
.jbh-badge-color-muted .jbh-product-badge { background: rgba(156,163,175,0.10); }

/* --- Style variants (composable with color) --- */
/* Solid — filled background, white text */
.jbh-badge-solid .jbh-product-badge,
.jbh-badge-solid .jbh-plan-badge,
.jbh-badge-solid .jbh-hero-badge,
.jbh-badge-solid .jbh-sh-badge,
.jbh-badge-solid .jbh-cta-badge {
	background: var(--jbh-coral) !important;
	color: #fff !important;
}
.jbh-badge-solid.jbh-badge-color-teal .jbh-product-badge,
.jbh-badge-solid.jbh-badge-color-teal .jbh-plan-badge,
.jbh-badge-solid.jbh-badge-color-teal .jbh-hero-badge,
.jbh-badge-solid.jbh-badge-color-teal .jbh-sh-badge,
.jbh-badge-solid.jbh-badge-color-teal .jbh-cta-badge {
	background: var(--jbh-teal) !important;
}
.jbh-badge-solid.jbh-badge-color-gold .jbh-product-badge,
.jbh-badge-solid.jbh-badge-color-gold .jbh-plan-badge,
.jbh-badge-solid.jbh-badge-color-gold .jbh-hero-badge,
.jbh-badge-solid.jbh-badge-color-gold .jbh-sh-badge,
.jbh-badge-solid.jbh-badge-color-gold .jbh-cta-badge {
	background: #D4A017 !important;
}

/* Outline — bordered, transparent bg */
.jbh-badge-outline .jbh-product-badge,
.jbh-badge-outline .jbh-plan-badge,
.jbh-badge-outline .jbh-hero-badge,
.jbh-badge-outline .jbh-sh-badge,
.jbh-badge-outline .jbh-cta-badge {
	background: transparent !important;
	border: 1px solid currentColor;
	padding: 3px 10px;
}

/* Subtle (default) — tinted background, colored text */
/* Already the default for .jbh-product-badge */

/* --- Leading dot indicator (live/new/popular) --- */
.jbh-badge-dot .jbh-product-badge::before,
.jbh-badge-dot .jbh-plan-badge::before,
.jbh-badge-dot .jbh-hero-badge::before,
.jbh-badge-dot .jbh-sh-badge::before,
.jbh-badge-dot .jbh-cta-badge::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	margin-right: 6px;
	flex-shrink: 0;
	animation: jbh-dot-pulse 2s ease-in-out infinite;
}
@keyframes jbh-dot-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.8); }
}

/* --- Glow variant (for highlighted/popular) --- */
.jbh-badge-glow .jbh-plan-badge,
.jbh-badge-glow .jbh-product-badge {
	box-shadow: 0 0 12px rgba(214,79,66,0.30);
}
.jbh-badge-glow.jbh-badge-color-teal .jbh-plan-badge,
.jbh-badge-glow.jbh-badge-color-teal .jbh-product-badge {
	box-shadow: 0 0 12px rgba(42,157,143,0.30);
}
.jbh-badge-glow.jbh-badge-color-gold .jbh-plan-badge,
.jbh-badge-glow.jbh-badge-color-gold .jbh-product-badge {
	box-shadow: 0 0 12px rgba(212,160,23,0.30);
}

/* --- Dark/light adaptive badges --- */
.jbh-dark .jbh-product-badge {
	background: var(--jbh-teal);
	color: #fff;
}
.jbh-light .jbh-product-badge {
	background: var(--jbh-teal);
	color: #fff;
}
html[data-theme="light"] .jbh-hero-badge,
html.light .jbh-hero-badge {
	background: #fff;
	color: #121212;
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}
html[data-theme="dark"] .jbh-hero-badge,
html.dark .jbh-hero-badge {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .jbh-cta-badge,
html.light .jbh-cta-badge {
	background: #F9F8F6;
	color: #121212;
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}
html[data-theme="dark"] .jbh-cta-badge,
html.dark .jbh-cta-badge {
	background: var(--jbh-dm-bg, #121212);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}

/* --- Plan badge shimmer: already defined in Phase 6 --- */
/* Ensure shimmer inherits shape from badge system */
.jbh-badge-pill .jbh-plan-card.jbh-highlighted .jbh-plan-badge {
	border-radius: 999px;
	padding: 4px 14px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.jbh-badge-dot .jbh-product-badge::before,
	.jbh-badge-dot .jbh-plan-badge::before,
	.jbh-badge-dot .jbh-hero-badge::before,
	.jbh-badge-dot .jbh-sh-badge::before,
	.jbh-badge-dot .jbh-cta-badge::before {
		animation: none;
	}
}