/* =====================================================================
   Bantu Plaza brand layer — sits on top of Astra.
   Tokens mirror the prototype's palette so the brand reads identically
   across screens without re-importing Tailwind. All rules below are
   low-specificity helpers that inherit Astra's body/container/buttons.
   ===================================================================== */

:root {
	--bp-cream:        #FFFBF4;
	--bp-cream-deep:   #FFF5E1;
	--bp-ink:          #1A1410;
	--bp-ink-soft:     rgba(26, 20, 16, 0.75);
	--bp-line:         rgba(26, 20, 16, 0.08);

	--bp-brand-100:    #FFEFD2;
	--bp-brand-500:    #E97C18;
	--bp-brand-600:    #C95F0E;
	--bp-brand-700:    #9F4710;

	--bp-forest-600:   #059669;
	--bp-amber-50:     #FFFBEB;
	--bp-amber-700:    #B45309;

	--bp-radius:       16px;
	--bp-radius-lg:    20px;
	--bp-shadow-soft:  0 6px 20px -10px rgba(26, 20, 16, 0.18);
	--bp-shadow-card:  0 14px 38px -22px rgba(26, 20, 16, 0.25);

	--bp-font-body:    'Inter', var(--ast-body-font-family, system-ui, -apple-system, sans-serif);
	--bp-font-head:    'Plus Jakarta Sans', var(--ast-heading-font-family, var(--bp-font-body));
}

body.bantu-plaza,
body.bantu-plaza .ast-container,
body.bantu-plaza #content {
	background-color: var(--bp-cream);
	color: var(--bp-ink);
	font-family: var(--bp-font-body);
}

body.bantu-plaza h1,
body.bantu-plaza h2,
body.bantu-plaza h3,
body.bantu-plaza h4,
body.bantu-plaza h5 {
	font-family: var(--bp-font-head);
	color: var(--bp-ink);
}

/* ---------- Primitive: container ---------- */
.bp-section { padding: 32px 0; }
.bp-section + .bp-section { padding-top: 0; }
.bp-section:first-child,
.entry-content > .bp-section:first-of-type { padding-top: 16px; }
.bp-wrap    { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons (inherit Astra but rebadge) ---------- */
.bp-btn,
.bp-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.bp-btn-primary {
	background: var(--bp-brand-600);
	color: #fff;
}
.bp-btn-primary:hover { background: var(--bp-brand-700); color: #fff; }
.bp-btn-ghost {
	background: #fff;
	color: var(--bp-ink);
	border-color: var(--bp-line);
}
.bp-btn-ghost:hover { background: var(--bp-brand-100); border-color: var(--bp-brand-500); color: var(--bp-brand-700); }
.bp-btn-pill { border-radius: 999px; }
.bp-btn:active { transform: translateY(1px); }

/* ---------- Cards ---------- */
.bp-card {
	background: #fff;
	border: 1px solid var(--bp-line);
	border-radius: var(--bp-radius);
	box-shadow: var(--bp-shadow-soft);
	padding: 20px;
}
.bp-card-lg { border-radius: var(--bp-radius-lg); padding: 28px; box-shadow: var(--bp-shadow-card); }

/* ---------- Tutor cards / grid ---------- */
.bp-tutor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}
.bp-tutor-card { display: flex; flex-direction: column; gap: 14px; }
.bp-tutor-card .bp-avatar {
	width: 56px; height: 56px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-family: var(--bp-font-head);
}
.bp-tutor-head { display: flex; align-items: center; gap: 12px; }
.bp-tutor-name { font-weight: 700; font-size: 17px; margin: 0; }
.bp-tutor-meta { color: var(--bp-ink-soft); font-size: 13px; }
.bp-tutor-bio  { font-size: 14px; color: var(--bp-ink-soft); line-height: 1.5; min-height: 42px; }
.bp-tutor-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-tag {
	font-size: 11px; padding: 4px 10px; border-radius: 999px;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
}
.bp-badge {
	font-size: 11px; padding: 4px 10px; border-radius: 999px;
	background: var(--bp-amber-50); color: var(--bp-amber-700); font-weight: 600;
}
.bp-badge-kids {
	background: #ECFDF5; color: var(--bp-forest-600);
}
.bp-tutor-price { font-weight: 700; color: var(--bp-ink); }
.bp-tutor-rate-hint { font-size: 12px; color: var(--bp-ink-soft); }
.bp-tutor-cta { display: flex; gap: 10px; margin-top: auto; }
.bp-tutor-card .bp-tutor-cta .bp-btn { flex: 1; }

/* ---------- Star rating ---------- */
.bp-stars { color: #F59E0B; letter-spacing: 1px; font-size: 14px; }
.bp-stars-num { font-weight: 700; color: var(--bp-ink); }

/* ---------- Filters bar (find tutors) ---------- */
.bp-filters {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) auto;
	gap: 12px;
	background: #fff;
	padding: 16px;
	border-radius: var(--bp-radius);
	border: 1px solid var(--bp-line);
	box-shadow: var(--bp-shadow-soft);
	margin-bottom: 24px;
}
.bp-filters input,
.bp-filters select {
	width: 100%;
	border: 1px solid var(--bp-line);
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
	color: var(--bp-ink);
	/* 16px floor: iOS Safari auto-zooms when an input is < 16px on focus,
	   which disrupts the find-tutor flow. Stay at or above the threshold. */
	font-size: 16px;
	min-height: 44px;
}
.bp-filters .bp-btn { padding: 10px 18px; min-height: 44px; }
@media (max-width: 900px) {
	.bp-filters { grid-template-columns: 1fr 1fr; }
	.bp-filters .bp-btn { grid-column: span 2; }
}
@media (max-width: 640px) {
	.bp-filters { grid-template-columns: 1fr; }
	.bp-filters .bp-btn { grid-column: span 1; }
}

/* ---------- Language tiles ---------- */
.bp-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bp-lang-tile {
	background: #fff; border-radius: var(--bp-radius); padding: 18px;
	border: 1px solid var(--bp-line); display: flex; flex-direction: column; gap: 8px;
	text-decoration: none; color: inherit; box-shadow: var(--bp-shadow-soft);
	transition: transform .12s ease, box-shadow .12s ease;
}
.bp-lang-tile:hover { transform: translateY(-2px); box-shadow: var(--bp-shadow-card); }
.bp-lang-flag { font-size: 28px; }
.bp-lang-name { font-weight: 700; font-size: 18px; }
.bp-lang-meta { font-size: 13px; color: var(--bp-ink-soft); }
.bp-lang-tile .bp-tag { width: max-content; }

/* ---------- Hero ---------- */
.bp-hero {
	background:
		radial-gradient(circle at 12% -10%, rgba(233, 124, 24, 0.18), transparent 55%),
		radial-gradient(circle at 105% 110%, rgba(5, 150, 105, 0.15), transparent 60%),
		var(--bp-cream-deep);
	border-radius: 28px;
	padding: 56px 40px;
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
	margin: 32px 0;
}
.bp-hero h1 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; }
.bp-hero p.bp-hero-lead { font-size: 16px; color: var(--bp-ink-soft); margin: 0 0 20px; max-width: 540px; }
.bp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.bp-hero-side { background: #fff; border-radius: var(--bp-radius-lg); padding: 24px; box-shadow: var(--bp-shadow-card); }
.bp-hero-side h3 { margin: 0 0 12px; }
@media (max-width: 900px) {
	.bp-hero { grid-template-columns: 1fr; padding: 36px 22px; }
	.bp-hero h1 { font-size: 26px; }
}

/* ---------- Dashboard ---------- */
.bp-dash { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin: 32px 0; }
.bp-dash-nav {
	background: #fff; border-radius: var(--bp-radius); padding: 12px;
	border: 1px solid var(--bp-line); box-shadow: var(--bp-shadow-soft);
	display: flex; flex-direction: column; gap: 4px; height: max-content;
}
.bp-dash-nav a {
	display: block; padding: 12px 14px; border-radius: 10px;
	color: var(--bp-ink); text-decoration: none; font-weight: 500; font-size: 14px;
	min-height: 44px; box-sizing: border-box;
}
.bp-dash-nav a:hover { background: var(--bp-brand-100); color: var(--bp-brand-700); }
.bp-dash-nav a.is-active { background: var(--bp-brand-600); color: #fff; }
.bp-dash-main { display: flex; flex-direction: column; gap: 18px; }
.bp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.bp-stat { background: #fff; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 18px; }
.bp-stat-label { font-size: 12px; color: var(--bp-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.bp-stat-num { font-size: 28px; font-weight: 700; font-family: var(--bp-font-head); margin-top: 4px; }
.bp-stat-sub { font-size: 12px; color: var(--bp-ink-soft); margin-top: 4px; }
@media (max-width: 900px) {
	.bp-dash { grid-template-columns: 1fr; }
	.bp-dash-nav { flex-direction: row; flex-wrap: wrap; }
}
/* Mobile: horizontal-scroll tab strip so 6–7 dashboard tabs don't
   collapse into a tall multi-row stack that hides the actual content
   below the fold. */
@media (max-width: 640px) {
	.bp-dash-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding: 8px;
	}
	.bp-dash-nav a {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* ---------- Tables ---------- */
.bp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--bp-radius); overflow: hidden; }
.bp-table th, .bp-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--bp-line); }
.bp-table th { background: var(--bp-cream-deep); font-weight: 600; }
.bp-table tr:last-child td { border-bottom: 0; }

/* ---------- Forms ---------- */
.bp-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.bp-form-row { display: flex; flex-direction: column; gap: 4px; }
.bp-form label { font-size: 14px; font-weight: 500; color: var(--bp-ink-soft); }
.bp-form input,
.bp-form select,
.bp-form textarea {
	border: 1px solid var(--bp-line); border-radius: 10px; padding: 12px 12px;
	background: #fff; color: var(--bp-ink); font-size: 16px; font-family: inherit;
	min-height: 44px; box-sizing: border-box;
}
.bp-form textarea { min-height: 110px; resize: vertical; }
.bp-form .bp-btn { align-self: flex-start; margin-top: 4px; }
.bp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .bp-form-grid { grid-template-columns: 1fr; } .bp-form { max-width: 100%; } }

/* ---------- Pricing ---------- */
.bp-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.bp-price-card { background: #fff; border-radius: var(--bp-radius); border: 1px solid var(--bp-line); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--bp-shadow-soft); }
.bp-price-card.is-popular { border-color: var(--bp-brand-500); box-shadow: var(--bp-shadow-card); position: relative; }
.bp-price-card.is-popular::after {
	content: 'Most popular'; position: absolute; top: -12px; right: 16px;
	background: var(--bp-brand-600); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.bp-price-num { font-family: var(--bp-font-head); font-size: 32px; font-weight: 700; }
.bp-price-unit { font-size: 13px; color: var(--bp-ink-soft); }

/* ---------- FAQ ---------- */
.bp-faq details { background: #fff; border: 1px solid var(--bp-line); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.bp-faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bp-faq summary::after { content: '+'; color: var(--bp-brand-600); font-size: 22px; line-height: 1; }
.bp-faq details[open] summary::after { content: '–'; }
.bp-faq p { margin: 10px 0 0; color: var(--bp-ink-soft); }

/* ---------- Reviews ---------- */
.bp-review { background: #fff; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 18px; margin-bottom: 14px; }
.bp-review-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.bp-review-author { font-weight: 600; }
.bp-review-meta { font-size: 12px; color: var(--bp-ink-soft); }

/* ---------- Availability grid (tutor profile) ---------- */
.bp-avail-grid { display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 2px; font-size: 11px; }
.bp-avail-grid .bp-avail-head { background: var(--bp-cream-deep); padding: 6px 4px; text-align: center; font-weight: 600; }
.bp-avail-cell { background: #fff; padding: 4px 0; text-align: center; }
.bp-avail-cell.is-on { background: var(--bp-brand-100); color: var(--bp-brand-700); font-weight: 600; }
.bp-avail-cell.is-off { color: rgba(26,20,16,.3); }

/* ---------- Notices ---------- */
.bp-notice { border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; border: 1px solid; }
.bp-notice-info  { background: var(--bp-brand-100); border-color: var(--bp-brand-500); color: var(--bp-brand-700); }
.bp-notice-warn  { background: var(--bp-amber-50);  border-color: var(--bp-amber-700); color: var(--bp-amber-700); }
.bp-notice-ok    { background: #ECFDF5;             border-color: var(--bp-forest-600); color: var(--bp-forest-600); }

/* ---------- Footer / spacing helpers ---------- */
.bp-mt-0 { margin-top: 0; }
.bp-mt-1 { margin-top: 8px; }
.bp-mt-2 { margin-top: 16px; }
.bp-mt-3 { margin-top: 24px; }
.bp-mt-4 { margin-top: 32px; }
.bp-flex { display: flex; }
.bp-gap-2 { gap: 16px; }
.bp-gap-3 { gap: 24px; }
.bp-between { justify-content: space-between; }
.bp-center { align-items: center; }
.bp-muted { color: var(--bp-ink-soft); }

/* Visually-hidden label utility — keeps text available to screen readers
   without affecting layout (WCAG 2.1 1.3.1 + 3.3.2 compliance). */
.bp-visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* =====================================================================
   Header — single horizontal row, LOGO ON LEFT (with breathing room).
   Row shape: [logo + wordmark, left margin] · · · [menu] [CTA button]
   ===================================================================== */

/* Zero the top padding on the header AND on every wrapper that sits
   between the header and our first .bp-section, so there is no white
   gap between the navigation bar and the hero. Astra v4 stamps inline
   padding via the customiser — override on every BP-touched class. */
.site-header,
.ast-primary-header-bar,
.ast-main-header-bar,
.main-header-bar,
.main-header-container,
.ast-above-header-bar,
.ast-below-header-bar {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: auto;
}
/* The container that actually lays out the bar — keep vertical
   centering and a small 8px gap each side so the menu text doesn't
   touch the viewport edges. */
.main-header-container,
.ast-flex.main-header-container,
.ast-main-header-bar-alignment {
	align-items: center;
	padding-top: 8px;
	padding-bottom: 8px;
}

.site-header .site-branding,
.site-header .ast-site-identity {
	display: flex;
	align-items: center;
	/* Breathing room from the left viewport edge so the logo isn't
	   flush against the gutter on wide screens. */
	padding-left: 24px;
}
@media (max-width: 921px) {
	.site-header .site-branding,
	.site-header .ast-site-identity {
		padding-left: 16px;
	}
}
.custom-logo-link {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}
.custom-logo-link .custom-logo {
	max-height: 40px;
	max-width: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.bp-header-wordmark {
	font-family: var(--bp-font-head);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.01em;
	color: var(--bp-ink);
	white-space: nowrap;
	line-height: 1;
}
.bp-header-wordmark-accent { color: var(--bp-brand-600); }

/* Primary menu links — vertical centre + comfortable spacing */
.site-header .main-header-menu > li > .menu-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-weight: 500;
	color: var(--bp-ink-soft);
	border-radius: 10px;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.site-header .main-header-menu > li > .menu-link:hover,
.site-header .main-header-menu > li.current-menu-item > .menu-link {
	background: var(--bp-brand-100);
	color: var(--bp-brand-700);
}

/* "Home" menu item is hidden on desktop (the logo already links home);
   it stays visible in the mobile drawer, where the logo may not be the
   first thing a user sees. The bp-home-menu-item class is added by the
   nav_menu_css_class filter in bantu-plaza-core.php. */
@media (min-width: 922px) {
	.site-header li.bp-home-menu-item,
	.site-header .menu-item.bp-home-menu-item {
		display: none !important;
	}
}

/* Astra "header right" custom button reused as Log in / Sign up CTA.
   Pill-style, brand-coloured, sits flush against the menu. */
.ast-masthead-custom-menu-items.button-custom-menu-item .ast-custom-button-link {
	margin-left: 8px;
}
.ast-masthead-custom-menu-items.button-custom-menu-item .ast-button {
	background: var(--bp-brand-600);
	color: #fff;
	padding: 9px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1;
	border: 1px solid var(--bp-brand-600);
	transition: background 0.12s ease, border-color 0.12s ease;
}
.ast-masthead-custom-menu-items.button-custom-menu-item:hover .ast-button {
	background: var(--bp-brand-700);
	border-color: var(--bp-brand-700);
	color: #fff;
}
/* Astra duplicates the button label as a hidden `.menu-link` — hide it
   so screen readers and tab order only hit the styled CTA. */
.ast-masthead-custom-menu-items.button-custom-menu-item > a.menu-link {
	display: none !important;
}

/* Hide the duplicate Astra page-title H1 on every page that renders its own
   BP hero so the in-page H1 is the only top-level heading. */
body.page-id-1692 .entry-header,
body.page-id-1693 .entry-header,
body.page-id-1694 .entry-header,
body.page-id-1695 .entry-header,
body.page-id-1696 .entry-header,
body.page-id-1697 .entry-header,
body.page-id-1698 .entry-header,
body.page-id-1699 .entry-header,
body.page-id-1700 .entry-header,
body.page-id-1701 .entry-header,
body.page-id-1702 .entry-header,
body.page-id-1703 .entry-header,
body.page-id-1704 .entry-header,
body.page-id-1705 .entry-header,
body.page-id-1706 .entry-header,
body.page-id-1707 .entry-header,
body.page-id-1708 .entry-header { display: none; }

/* Astra wraps standard pages in a narrow container with vertical white space.
   Our BP sections handle their own padding so collapse the wrapper gap. */
body.page-id-1692 .ast-container,
body.page-id-1693 .ast-container,
body.page-id-1694 .ast-container,
body.page-id-1695 .ast-container,
body.page-id-1700 .ast-container,
body.page-id-1701 .ast-container,
body.page-id-1702 .ast-container,
body.page-id-1703 .ast-container,
body.page-id-1704 .ast-container,
body.page-id-1705 .ast-container,
body.page-id-1706 .ast-container,
body.page-id-1707 .ast-container,
body.page-id-1708 .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; }
body.page-id-1692 #primary,
body.page-id-1693 #primary,
body.page-id-1694 #primary,
body.page-id-1695 #primary,
body.page-id-1700 #primary,
body.page-id-1701 #primary,
body.page-id-1702 #primary,
body.page-id-1703 #primary,
body.page-id-1704 #primary,
body.page-id-1705 #primary,
body.page-id-1706 #primary,
body.page-id-1707 #primary,
body.page-id-1708 #primary { padding: 0; }

/* Generalised: on every BP-branded page, completely collapse the gap
   between the Astra header bar and our first hero/section.
   body.bantu-plaza is set by the plugin's body_class filter (scoped,
   see bantu-plaza-core.php). Aggressive !important here because Astra
   theme + customizer often inject vertical padding/margin via inline
   <style> blocks or higher-specificity selectors. */
body.bantu-plaza .site-content,
body.bantu-plaza .ast-container,
body.bantu-plaza .site-content > .ast-container,
body.bantu-plaza #primary,
body.bantu-plaza #primary > article,
body.bantu-plaza .ast-article-post,
body.bantu-plaza .ast-article-single,
body.bantu-plaza .entry-content,
body.bantu-plaza .ast-section-above-builder-area,
body.bantu-plaza .ast-section-below-builder-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
body.bantu-plaza #primary,
body.bantu-plaza #primary > article,
body.bantu-plaza .ast-article-post,
body.bantu-plaza .ast-article-single,
body.bantu-plaza .entry-content { padding-bottom: 0 !important; }
body.bantu-plaza .entry-header { display: none !important; }

/* The first BP section on a page sits directly below the header bar —
   give it just enough internal padding so the hero card isn't flush
   against the navigation. Subsequent sections keep their default. */
body.bantu-plaza .bp-section:first-child,
body.bantu-plaza .entry-content > .bp-section:first-of-type { padding-top: 24px !important; }

/* Astra's "Separate container" body class wraps each article in a white
   card (background:#fff + box-shadow + padding) which created a thick
   white stripe between the header and our hero. On BP pages, dissolve
   the card so the cream body background flows continuously into the
   hero's gradient and nothing visually separates the menu from the
   content. */
body.bantu-plaza .ast-article-single,
body.bantu-plaza .ast-article-single:not(.ast-related-post),
body.bantu-plaza .ast-article-post,
body.bantu-plaza.ast-separate-container .ast-article-single,
body.bantu-plaza.ast-separate-container .ast-article-single:not(.ast-related-post) {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* And kill the horizontal gutter Astra adds via the inner ast-container. */
body.bantu-plaza.ast-separate-container #content .ast-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* =====================================================================
   4-column branded footer (rendered by [bp_footer_columns])
   ===================================================================== */
.bp-footer {
	background: var(--bp-cream);
	color: var(--bp-ink);
	font-family: var(--bp-font-body);
	border-top: 1px solid var(--bp-line);
	padding: 56px 24px 24px;
	margin-top: 32px;
}
.bp-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 36px;
	text-align: left;
}
@media (max-width: 900px) {
	.bp-footer-inner { grid-template-columns: 1fr 1fr; }
	.bp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
	.bp-footer-inner { grid-template-columns: 1fr; }
}

.bp-footer-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.bp-footer-logo img {
	height: 40px;
	width: auto;
	object-fit: contain;
}
.bp-wordmark {
	font-family: var(--bp-font-head);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: 0.01em;
	color: var(--bp-ink);
}
.bp-wordmark-accent { color: var(--bp-brand-600); }

.bp-footer-tagline {
	font-size: 0.9rem;
	color: var(--bp-ink-soft);
	margin: 0 0 16px;
	max-width: 28rem;
	line-height: 1.55;
}
.bp-footer-contact {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 0.88rem;
}
.bp-footer-contact li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 3px 0;
	color: var(--bp-ink-soft);
}
.bp-footer-contact a {
	color: var(--bp-ink-soft);
	text-decoration: none;
}
.bp-footer-contact a:hover { color: var(--bp-brand-700); }
.bp-footer-icon {
	color: var(--bp-brand-600);
	font-size: 0.95rem;
	line-height: 1.4;
	min-width: 1em;
}
.bp-footer-social {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}
.bp-footer-social-link {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bp-brand-100);
	color: var(--bp-brand-700);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.bp-footer-social-link:hover {
	background: var(--bp-brand-500);
	color: #fff;
}

.bp-footer-col h4.bp-footer-h {
	font-family: var(--bp-font-head);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--bp-ink);
	margin: 0 0 14px;
	text-transform: none;
}
.bp-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.88rem;
}
.bp-footer-col li { padding: 4px 0; }
.bp-footer-col a {
	color: var(--bp-ink-soft);
	text-decoration: none;
	transition: color 0.12s ease;
}
.bp-footer-col a:hover { color: var(--bp-brand-700); }
.bp-footer-safeguard {
	color: #be123c !important;
	font-weight: 600;
}

.bp-footer-bottom {
	max-width: 1180px;
	margin: 32px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--bp-line);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.78rem;
	color: var(--bp-ink-soft);
}
.bp-footer-bottom-links {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.bp-footer-bottom-links a {
	color: var(--bp-ink-soft);
	text-decoration: none;
}
.bp-footer-bottom-links a:hover { color: var(--bp-brand-700); }

/* Astra's footer copyright text wraps this whole shortcode in a <div
   class="ast-small-footer-section-1"> — kill its centred layout so our
   grid takes over. */
.ast-small-footer { padding: 0; }
.ast-small-footer .ast-small-footer-wrap,
.ast-small-footer .ast-small-footer-section,
.ast-small-footer .ast-row { display: block; }
.ast-small-footer .ast-small-footer-section-2 { display: none; }
.ast-small-footer .bp-footer + .ast-small-footer-section { display: none; }

/* =====================================================================
   Prototype helpers — small utilities so plugin templates can render the
   landing / pricing / teach / faq layouts from the prototype without
   pulling in Tailwind. All utilities are namespaced `.bp-` so they don't
   collide with Astra/Elementor.
   ===================================================================== */
.bp-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
	border: 1px solid var(--bp-brand-100);
}
.bp-chip-ghost { background: #fff; border-color: var(--bp-line); color: var(--bp-brand-700); }
.bp-chip-ink { background: var(--bp-ink); color: var(--bp-cream); border-color: var(--bp-ink); }
.bp-chip-forest { background: #ECFDF5; color: var(--bp-forest-600); border-color: #BBF7D0; }

.bp-eyebrow {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--bp-brand-700);
}

.bp-h1 { font-family: var(--bp-font-head); font-weight: 800; font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem); line-height: 1.15; margin: 0; }
.bp-h2 { font-family: var(--bp-font-head); font-weight: 800; font-size: clamp(1.35rem, 1.5vw + 0.75rem, 1.85rem); line-height: 1.2; margin: 0; }
.bp-h3 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.15rem; margin: 0; }
.bp-lead { font-size: 1.1rem; color: var(--bp-ink-soft); line-height: 1.55; }
.bp-accent { color: var(--bp-brand-600); }
.bp-accent-forest { color: var(--bp-forest-600); }
.bp-text-center { text-align: center; }

.bp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .bp-grid-2, .bp-grid-3, .bp-grid-4 { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1100px) { .bp-grid-3, .bp-grid-4 { grid-template-columns: repeat(2, 1fr); } }

.bp-hero-warm {
	background:
		radial-gradient(circle at 12% -10%, rgba(233,124,24,0.18), transparent 55%),
		radial-gradient(circle at 105% 110%, rgba(5,150,105,0.12), transparent 60%),
		var(--bp-cream-deep);
	border-radius: 28px;
	padding: 56px 40px;
	margin: 24px 0;
}
.bp-hero-warm .bp-hero-grid {
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 900px) { .bp-hero-warm { padding: 36px 22px; } .bp-hero-warm .bp-hero-grid { grid-template-columns: 1fr; } }

.bp-trust-row {
	display: flex; flex-wrap: wrap; gap: 18px 28px;
	margin-top: 18px; font-size: 0.9rem; color: var(--bp-ink-soft);
}
.bp-trust-row .bp-trust-item { display: inline-flex; align-items: center; gap: 8px; }
.bp-trust-row .bp-trust-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 999px;
	background: var(--bp-forest-600);
}

.bp-stat-bar { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 32px; }
@media (max-width: 900px) { .bp-stat-bar { grid-template-columns: repeat(2, 1fr); } }
.bp-stat-bar .bp-stat { box-shadow: var(--bp-shadow-soft); }
.bp-stat .bp-stat-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-ink-soft); }
.bp-stat .bp-stat-big { font-family: var(--bp-font-head); font-weight: 800; font-size: 1.85rem; margin-top: 6px; }

.bp-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 32px; }
@media (max-width: 900px) { .bp-step-grid { grid-template-columns: 1fr; } }
.bp-step-card {
	position: relative; background: #fff; border: 1px solid var(--bp-line); border-radius: var(--bp-radius);
	padding: 24px; box-shadow: var(--bp-shadow-soft);
}
.bp-step-card .bp-step-num {
	position: absolute; top: -14px; left: 18px;
	width: 36px; height: 36px; border-radius: 999px;
	background: var(--bp-brand-600); color: #fff;
	display: inline-grid; place-items: center;
	font-family: var(--bp-font-head); font-weight: 800;
	box-shadow: var(--bp-shadow-soft);
}
.bp-step-card .bp-step-icon {
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
	display: inline-grid; place-items: center; font-size: 1.2rem;
}
.bp-step-card h3 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.15rem; margin: 14px 0 6px; }
.bp-step-card p { color: var(--bp-ink-soft); font-size: 0.92rem; line-height: 1.5; margin: 0; }

/* Reusable tier card (commission / pricing) */
.bp-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
@media (max-width: 900px) { .bp-tier-grid { grid-template-columns: 1fr; } }
.bp-tier {
	background: #fff; border: 1px solid var(--bp-line); border-radius: 24px;
	padding: 28px; box-shadow: var(--bp-shadow-soft);
	display: flex; flex-direction: column; gap: 14px; position: relative;
}
.bp-tier-dark { background: var(--bp-ink); color: var(--bp-cream); }
.bp-tier-dark .bp-tier-meta,
.bp-tier-dark .bp-tier-sub { color: rgba(255,251,244,0.6); }
.bp-tier-warm { background: linear-gradient(160deg, var(--bp-brand-100), #ffffff); border-color: rgba(233,124,24,0.25); }
.bp-tier .bp-tier-name { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.2rem; }
.bp-tier .bp-tier-meta { font-size: 0.9rem; color: var(--bp-ink-soft); }
.bp-tier .bp-tier-price { font-family: var(--bp-font-head); font-weight: 800; font-size: 2.4rem; color: var(--bp-forest-600); line-height: 1; }
.bp-tier-dark .bp-tier-price { color: #FFD8A8; }
.bp-tier-warm .bp-tier-price { color: var(--bp-brand-700); }
.bp-tier .bp-tier-sub { font-size: 0.85rem; color: var(--bp-ink-soft); }
.bp-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; }
.bp-tier ul li::before { content: "✓"; color: var(--bp-forest-600); margin-right: 8px; font-weight: 700; }
.bp-tier-dark ul li::before { color: #FFD8A8; }
.bp-tier .bp-tier-tag {
	position: absolute; top: -12px; right: 22px;
	padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
	background: var(--bp-brand-500); color: #fff;
}
.bp-tier .bp-tier-tag-forest { background: var(--bp-forest-600); }
.bp-tier .bp-tier-tag-warm { background: var(--bp-brand-100); color: var(--bp-brand-700); }

/* Earnings calculator */
.bp-calc {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-top: 40px;
}
@media (max-width: 900px) { .bp-calc { grid-template-columns: 1fr; } }
.bp-calc-controls { background: linear-gradient(160deg, var(--bp-brand-100), var(--bp-amber-50)); border: 1px solid rgba(233,124,24,0.25); border-radius: 24px; padding: 28px; box-shadow: var(--bp-shadow-soft); }
.bp-calc-result { background: var(--bp-ink); color: var(--bp-cream); border-radius: 24px; padding: 28px; box-shadow: var(--bp-shadow-card); position: relative; overflow: hidden; }
.bp-calc-result::after { content: ""; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; background: rgba(233,124,24,0.18); filter: blur(48px); border-radius: 999px; pointer-events: none; }
.bp-calc-row { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.bp-calc-row-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 600; }
.bp-calc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bp-calc-tiers button {
	border: 1px solid var(--bp-line); background: #fff; color: var(--bp-ink);
	padding: 10px 8px; border-radius: 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
	text-align: left; line-height: 1.25;
}
.bp-calc-tiers button[data-active="1"] { border-color: var(--bp-brand-500); box-shadow: 0 0 0 2px rgba(233,124,24,0.25); }
.bp-calc-tiers button small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--bp-ink-soft); margin-top: 2px; }
.bp-calc input[type="range"] { width: 100%; accent-color: var(--bp-brand-600); }
.bp-calc-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--bp-ink-soft); margin-top: 4px; }
.bp-calc-result .bp-calc-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; color: rgba(255,251,244,0.6); }
.bp-calc-result .bp-calc-monthly { font-family: var(--bp-font-head); font-weight: 800; font-size: 3rem; line-height: 1; margin-top: 8px; }
.bp-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; font-size: 0.85rem; }
.bp-calc-grid > div { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 14px; }
.bp-calc-grid .bp-calc-label { color: rgba(255,251,244,0.55); font-size: 0.75rem; }
.bp-calc-grid .bp-calc-value { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.2rem; margin-top: 4px; }
.bp-calc-result .bp-btn { width: 100%; margin-top: 22px; }

/* Dual CTA + final CTA */
.bp-dual-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
@media (max-width: 900px) { .bp-dual-cta { grid-template-columns: 1fr; } }
.bp-cta-warm { background: linear-gradient(160deg, var(--bp-brand-100) 0%, var(--bp-amber-50) 50%, #fff 100%); border: 1px solid rgba(233,124,24,0.25); border-radius: 28px; padding: 36px; box-shadow: var(--bp-shadow-soft); }
.bp-cta-dark { background: linear-gradient(160deg, var(--bp-forest-600) 0%, #064E3B 60%, var(--bp-ink) 100%); color: var(--bp-cream); border-radius: 28px; padding: 36px; box-shadow: var(--bp-shadow-card); }
.bp-cta-dark .bp-lead { color: rgba(255,251,244,0.7); }
.bp-cta-dark .bp-chip { background: rgba(255,255,255,0.1); color: var(--bp-cream); border-color: rgba(255,255,255,0.18); }
.bp-cta-ink { background: var(--bp-ink); color: var(--bp-cream); border-radius: 28px; padding: 40px; text-align: center; margin-top: 48px; }
.bp-cta-ink .bp-lead { color: rgba(255,251,244,0.7); }
.bp-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.bp-btn-cream { background: var(--bp-brand-500); color: var(--bp-ink); }
.bp-btn-cream:hover { background: #ffb15a; color: var(--bp-ink); }
.bp-btn-onink { background: rgba(255,255,255,0.1); color: var(--bp-cream); border: 1px solid rgba(255,255,255,0.18); }
.bp-btn-onink:hover { background: rgba(255,255,255,0.18); color: var(--bp-cream); }

/* Testimonials */
.bp-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
@media (max-width: 900px) { .bp-testimonial-grid { grid-template-columns: 1fr; } }
.bp-testimonial { background: #fff; border: 1px solid var(--bp-line); border-radius: 20px; padding: 24px; box-shadow: var(--bp-shadow-soft); position: relative; }
.bp-testimonial::after { content: "“"; position: absolute; top: 6px; right: 18px; font-family: var(--bp-font-head); font-size: 4rem; color: var(--bp-brand-100); line-height: 1; pointer-events: none; }
.bp-testimonial-stars { color: #F59E0B; letter-spacing: 1px; font-size: 14px; margin-bottom: 8px; }
.bp-testimonial p { color: var(--bp-ink); font-size: 0.95rem; line-height: 1.55; margin: 0 0 16px; }
.bp-testimonial-author { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.bp-testimonial-avatar { width: 36px; height: 36px; border-radius: 999px; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--bp-font-head); font-size: 0.85rem; }

/* Why / value grid (e.g. landing "why African languages" panel) */
.bp-why { background: var(--bp-ink); color: var(--bp-cream); border-radius: 28px; padding: 48px 36px; margin: 48px 0; }
.bp-why .bp-eyebrow { color: #FFD8A8; }
.bp-why h2, .bp-why h3 { color: var(--bp-cream); }
.bp-why .bp-lead { color: rgba(255,251,244,0.7); }
.bp-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.bp-why-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 18px; }
.bp-why-card .bp-why-icon { font-size: 1.6rem; }
.bp-why-card h4 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1rem; margin: 8px 0 4px; color: var(--bp-cream); }
.bp-why-card p { font-size: 0.85rem; color: rgba(255,251,244,0.65); margin: 0; }
@media (max-width: 700px) { .bp-why-grid { grid-template-columns: 1fr; } .bp-why { padding: 32px 22px; } }

/* Email cards (contact) */
.bp-email-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 700px) { .bp-email-grid { grid-template-columns: 1fr; } }
.bp-email-card { display: block; background: #fff; border: 1px solid var(--bp-line); border-radius: 18px; padding: 18px; text-decoration: none; color: var(--bp-ink); box-shadow: var(--bp-shadow-soft); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bp-email-card:hover { transform: translateY(-2px); box-shadow: var(--bp-shadow-card); color: var(--bp-ink); }
.bp-email-card .bp-email-title { font-family: var(--bp-font-head); font-weight: 700; font-size: 1rem; }
.bp-email-card p { font-size: 0.88rem; color: var(--bp-ink-soft); margin: 4px 0 6px; }
.bp-email-card .bp-email-addr { font-size: 0.85rem; font-weight: 600; color: var(--bp-brand-700); }

/* Policy hub tiles */
.bp-policy-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
@media (max-width: 900px) { .bp-policy-hub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bp-policy-hub { grid-template-columns: 1fr; } }
.bp-policy-tile { display: block; background: #fff; border: 1px solid var(--bp-line); border-radius: 18px; padding: 22px; text-decoration: none; color: var(--bp-ink); box-shadow: var(--bp-shadow-soft); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bp-policy-tile:hover { transform: translateY(-2px); box-shadow: var(--bp-shadow-card); color: var(--bp-ink); }
.bp-policy-tile .bp-policy-title { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.05rem; margin: 10px 0 4px; }
.bp-policy-tile p { font-size: 0.88rem; color: var(--bp-ink-soft); margin: 0; }

/* =====================================================================
   Photographic image helpers — used by hero / About / Teach / FAQ etc.
   to drop in real photography without breaking the brand's soft-cream
   shadow language. All photo wrappers crop with object-fit: cover and
   keep a generous radius + soft shadow.
   ===================================================================== */
.bp-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bp-radius-lg);
}

/* Hero photo block — landing & teach hero side */
.bp-hero-photo {
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--bp-shadow-card);
	min-height: 360px;
	background: var(--bp-cream-deep);
}
.bp-hero-photo > img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.bp-hero-photo::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,20,16,0) 55%, rgba(26,20,16,0.55) 100%);
	pointer-events: none;
}
.bp-hero-photo .bp-hero-photo-card {
	position: absolute; left: 16px; bottom: 16px; right: 16px;
	background: rgba(255,251,244,0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 18px;
	padding: 14px 16px;
	display: flex; align-items: center; gap: 12px;
	box-shadow: var(--bp-shadow-soft);
}
.bp-hero-photo .bp-hero-photo-card .bp-hero-photo-emoji {
	width: 44px; height: 44px; border-radius: 999px;
	background: var(--bp-brand-100); color: var(--bp-brand-700);
	display: inline-grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
}
.bp-hero-photo .bp-hero-photo-card strong { display: block; font-family: var(--bp-font-head); font-size: 0.95rem; }
.bp-hero-photo .bp-hero-photo-card span { font-size: 0.78rem; color: var(--bp-ink-soft); }

/* Inline feature image — sits inside a card / panel */
.bp-feature-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--bp-radius);
	overflow: hidden;
	background: var(--bp-cream-deep);
	box-shadow: var(--bp-shadow-soft);
	margin-bottom: 14px;
}
.bp-feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two-column image+text panel (About / mission) */
.bp-photo-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: center;
	margin: 32px 0;
}
.bp-photo-split.bp-photo-split-reverse { direction: rtl; }
.bp-photo-split.bp-photo-split-reverse > * { direction: ltr; }
.bp-photo-split .bp-photo-frame {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--bp-shadow-card);
}
.bp-photo-split .bp-photo-frame img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 800px) {
	.bp-photo-split { grid-template-columns: 1fr; }
	.bp-photo-split.bp-photo-split-reverse { direction: ltr; }
}

/* Step card photo — top-of-card visual */
.bp-step-card.has-photo { padding-top: 0; overflow: hidden; }
.bp-step-card.has-photo .bp-step-photo {
	margin: -1px -24px 16px;
	height: 160px;
	overflow: hidden;
	background: var(--bp-cream-deep);
}
.bp-step-card.has-photo .bp-step-photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.bp-step-card.has-photo .bp-step-num { top: 12px; left: 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }

/* Tier card with photo banner */
.bp-tier.has-photo { padding-top: 0; overflow: hidden; }
.bp-tier.has-photo .bp-tier-photo {
	margin: -1px -28px 18px;
	height: 150px;
	overflow: hidden;
}
.bp-tier.has-photo .bp-tier-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-tier.has-photo .bp-tier-tag { top: 14px; }

/* Why-card with photo (landing dark section) */
.bp-why-photo {
	border-radius: 24px; overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: var(--bp-shadow-card);
	background: rgba(255,255,255,0.05);
}
.bp-why-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-why .bp-photo-split { margin: 0; }
.bp-why .bp-photo-split .bp-photo-frame { aspect-ratio: 4 / 5; }

/* Featured-strip — two large landscape photos under the dual CTA */
.bp-feature-strip {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 18px;
	margin: 32px 0;
}
.bp-feature-strip .bp-feature-strip-card {
	border-radius: 24px; overflow: hidden; position: relative;
	min-height: 280px; box-shadow: var(--bp-shadow-card);
}
.bp-feature-strip .bp-feature-strip-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-feature-strip .bp-feature-strip-card::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,20,16,0.05) 30%, rgba(26,20,16,0.7) 100%);
}
.bp-feature-strip .bp-feature-strip-text {
	position: absolute; left: 22px; right: 22px; bottom: 22px;
	color: var(--bp-cream); z-index: 1;
}
.bp-feature-strip .bp-feature-strip-text .bp-eyebrow { color: #FFD8A8; }
.bp-feature-strip .bp-feature-strip-text h3 { font-family: var(--bp-font-head); font-weight: 700; font-size: 1.4rem; margin: 6px 0 2px; color: var(--bp-cream); }
.bp-feature-strip .bp-feature-strip-text p { font-size: 0.9rem; color: rgba(255,251,244,0.85); margin: 0; }
@media (max-width: 800px) { .bp-feature-strip { grid-template-columns: 1fr; } }

/* Contact-page hero side photo */
.bp-contact-photo {
	border-radius: 24px; overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--bp-shadow-soft);
	margin-top: 16px;
}
.bp-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- A11y: visible keyboard focus everywhere ----------
   Brand layer ships no focus rings; relying on UA defaults means keyboard
   users have no indication of where they are. One low-specificity rule covers
   every interactive surface the brand exposes. :focus-visible keeps mouse
   users from seeing rings on click. */
.bp-btn:focus-visible,
.bp-form input:focus-visible,
.bp-form select:focus-visible,
.bp-form textarea:focus-visible,
.bp-filters input:focus-visible,
.bp-filters select:focus-visible,
.bp-dash-nav a:focus-visible,
.bp-lang-tile:focus-visible,
.bp-faq summary:focus-visible,
.bp-footer-social-link:focus-visible,
.bp-pager-btn:focus-visible,
.bp-tutor-card a:focus-visible {
	outline: 2px solid var(--bp-brand-600);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =====================================================================
   Complianz cookie banner — re-skinned to match Bantu Plaza palette so
   the legal hub feels uniform. Touches: consent banner, accept/deny
   buttons, revoke link, cookie-table on /cookies/.
   ===================================================================== */
.cmplz-cookiebanner,
.cmplz-cookiebanner.banner-1,
.cmplz-cookiebanner.banner-1.cmplz-categories {
	background: var(--bp-cream, #FFFBF4) !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.08)) !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 40px -20px rgba(26,20,16,0.25), 0 4px 12px -4px rgba(26,20,16,0.08) !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-header .cmplz-title,
.cmplz-cookiebanner .cmplz-title {
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 800 !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner p {
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-links a {
	color: var(--bp-brand-700, #9F4710) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}
.cmplz-cookiebanner a:hover {
	color: var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-buttons button,
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-deny,
.cmplz-cookiebanner .cmplz-accept-preferences,
.cmplz-cookiebanner .cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-view-preferences {
	border-radius: 12px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	min-height: 44px !important;
	font-family: inherit !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-accept-all,
.cmplz-cookiebanner .cmplz-save-preferences {
	background: var(--bp-brand-600, #C95F0E) !important;
	color: #fff !important;
	border: 1px solid var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-accept-all:hover,
.cmplz-cookiebanner .cmplz-save-preferences:hover {
	background: var(--bp-brand-700, #9F4710) !important;
	border-color: var(--bp-brand-700, #9F4710) !important;
}
.cmplz-cookiebanner .cmplz-deny {
	background: transparent !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.15)) !important;
}
.cmplz-cookiebanner .cmplz-deny:hover {
	background: var(--bp-cream-deep, #FFF5E1) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences {
	background: transparent !important;
	color: var(--bp-brand-700, #9F4710) !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"] + .cmplz-slider {
	background: var(--bp-line, rgba(26,20,16,0.2)) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"]:checked + .cmplz-slider {
	background: var(--bp-brand-600, #C95F0E) !important;
}

/* Cookie-table shortcode on /cookies/ */
.cmplz-cookies,
.cmplz-cookies-overview,
.cmplz-document {
	font-family: inherit !important;
	color: var(--bp-ink) !important;
}
.cmplz-cookies th,
.cmplz-cookies-overview th {
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 700 !important;
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.1)) !important;
}
.cmplz-cookies td,
.cmplz-cookies-overview td {
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.05)) !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
}
.cmplz-cookies-overview {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.08));
}

/* Inline revoke link (when used on /legal/ + /cookies/) */
.cmplz-manage-consent,
.cmplz-revoke-link,
a.cmplz-manage-consent,
a.cmplz-revoke-link {
	display: inline-block !important;
	padding: 10px 16px !important;
	border-radius: 10px !important;
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-brand-700, #9F4710) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
	transition: background .15s ease, color .15s ease !important;
	cursor: pointer !important;
}
.cmplz-manage-consent:hover,
.cmplz-revoke-link:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
	color: var(--bp-brand-600, #C95F0E) !important;
}

/* =====================================================================
   Complianz cookie banner — re-skin to match Bantu Plaza brand palette.
   Targets the consent banner + revoke-link + cookie-table shortcodes so
   the legal hub feels uniform with the rest of the site.
   ===================================================================== */
.cmplz-cookiebanner,
.cmplz-cookiebanner.banner-1,
.cmplz-cookiebanner.banner-1.cmplz-categories {
	background: var(--bp-cream, #FFFBF4) !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.08)) !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 40px -20px rgba(26,20,16,0.25), 0 4px 12px -4px rgba(26,20,16,0.08) !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-header .cmplz-title,
.cmplz-cookiebanner .cmplz-title {
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 800 !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner p {
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-links a,
.cmplz-revoke-link {
	color: var(--bp-brand-700, #9F4710) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}
.cmplz-cookiebanner a:hover,
.cmplz-revoke-link:hover {
	color: var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-buttons button,
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-deny,
.cmplz-cookiebanner .cmplz-accept-preferences,
.cmplz-cookiebanner .cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-view-preferences {
	border-radius: 12px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	min-height: 44px !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.cmplz-cookiebanner .cmplz-accept {
	background: var(--bp-brand-600, #C95F0E) !important;
	color: #fff !important;
	border: 1px solid var(--bp-brand-600, #C95F0E) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover {
	background: var(--bp-brand-700, #9F4710) !important;
	border-color: var(--bp-brand-700, #9F4710) !important;
}
.cmplz-cookiebanner .cmplz-deny {
	background: transparent !important;
	color: var(--bp-ink, #1A1410) !important;
	border: 1px solid var(--bp-line, rgba(26,20,16,0.15)) !important;
}
.cmplz-cookiebanner .cmplz-deny:hover {
	background: var(--bp-cream-deep, #FFF5E1) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences {
	background: transparent !important;
	color: var(--bp-brand-700, #9F4710) !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-view-preferences:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"] + .cmplz-slider {
	background: var(--bp-line, rgba(26,20,16,0.2)) !important;
}
.cmplz-cookiebanner .cmplz-categories input[type="checkbox"]:checked + .cmplz-slider {
	background: var(--bp-brand-600, #C95F0E) !important;
}

/* Cookie-table shortcode on /cookies/ */
.cmplz-cookies,
.cmplz-cookies-overview,
.cmplz-document {
	font-family: inherit !important;
}
.cmplz-cookies th,
.cmplz-cookies-overview th {
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-ink, #1A1410) !important;
	font-family: var(--bp-font-head, inherit) !important;
	font-weight: 700 !important;
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.1)) !important;
}
.cmplz-cookies td,
.cmplz-cookies-overview td {
	border-bottom: 1px solid var(--bp-line, rgba(26,20,16,0.05)) !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	color: var(--bp-ink-soft, rgba(26,20,16,0.75)) !important;
}
.cmplz-cookies-overview { border-radius: 12px; overflow: hidden; border: 1px solid var(--bp-line, rgba(26,20,16,0.08)); }

/* Inline revoke link (when used as a regular anchor on /legal/ + /cookies/) */
.cmplz-manage-consent,
.cmplz-revoke-link {
	display: inline-block !important;
	padding: 8px 14px !important;
	border-radius: 10px !important;
	background: var(--bp-cream-deep, #FFF5E1) !important;
	color: var(--bp-brand-700, #9F4710) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: 1px solid var(--bp-brand-100, #FFEFD2) !important;
	transition: background 0.15s ease !important;
}
.cmplz-manage-consent:hover,
.cmplz-revoke-link:hover {
	background: var(--bp-brand-100, #FFEFD2) !important;
	color: var(--bp-brand-600, #C95F0E) !important;
}