/**
Theme Name: Bantu Astra Child
Author: Nuru Digital FZE
Author URI: https://nurudigitlamarketing.com
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bantu-astra-child
Template: astra
*/

/* ==========================================================================
   BANTU COMPONENT LAYER

   Load order on the front end is:
     astra/main.min.css -> astra-child/style.css -> elementor/frontend.min.css
     -> post-10.css (global kit) -> post-<page>.css (per-element)

   This file therefore loads BEFORE everything it has to cooperate with, so
   selector weight -- not source order -- decides. Conventions used here:

     .e-con.bantu-*            (0,2,0)  beats Elementor's .e-con primitives
     .elementor .bantu-* ...   (0,3,0)  beats the global kit (.elementor-kit-10 h2)
     doubled class / :not()    (0,4,0+) beats per-element page CSS -- used only
                                        where WCAG contrast must be guaranteed

   Per-element Elementor styling deliberately still wins for authored colour,
   type size and spacing. This layer supplies structure, surfaces, and the
   ~50% of elements the page CSS never styled.
   ========================================================================== */

:root {
  --bantu-ink: #171717;
  --bantu-ink-soft: #4b463d;
  --bantu-gold: #d69f24;
  --bantu-gold-dark: #765518;
  --bantu-paper: #faf8f2;
  --bantu-white: #ffffff;
  --bantu-muted: #f2ede2;
  --bantu-line: #d8d0c1;
  --bantu-focus: #9a6b12;
  --bantu-success: #236b45;
  --bantu-danger: #b42318;
  --bantu-footer-text: #e6e1d6;
  --bantu-footer-muted: #a9a294;
  --bantu-radius: 4px;
  --bantu-max: 1180px;
  --bantu-serif: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
  --bantu-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bantu-shadow: 0 12px 32px rgba(75, 70, 61, 0.10);
  --bantu-space-xs: 4px;
  --bantu-space-sm: 8px;
  --bantu-space-md: 16px;
  --bantu-space-lg: 24px;
  --bantu-space-xl: 32px;
  --bantu-space-2xl: 48px;
  --bantu-section-space: 72px;
  --bantu-gutter: clamp(20px, 2.4vw, 32px);
}

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
button,
input,
select,
textarea {
  font-family: var(--bantu-sans);
}

body {
  background: var(--bantu-paper);
  color: var(--bantu-ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:not(.elementor-editor-active) .elementor {
  overflow-x: clip;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

a:hover {
  color: var(--bantu-gold-dark);
}

button,
[role="button"],
select,
summary,
input[type="submit"],
input[type="button"],
.elementor-button {
  cursor: pointer;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--bantu-focus-ring, var(--bantu-focus)) !important;
  outline-offset: 3px !important;
}

::selection {
  background: var(--bantu-gold);
  color: var(--bantu-ink);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

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

/* --------------------------------------------------------------------------
   2. SHELL WIDTH  (full-bleed section backgrounds)

   Astra emits `.ast-container{max-width:1240px}` in its dynamic head CSS.
   Every Elementor section therefore rendered inside a 1240px column, so
   section background colours stopped ~330px short of each viewport edge on
   a 1900px screen. Released here for builder-rendered pages only, so
   non-Elementor templates keep Astra's measure.
   -------------------------------------------------------------------------- */

body.elementor-page #content.site-content > .ast-container,
body.elementor-template-full-width #content.site-content > .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. SECTIONS
   Top-level `.bantu-section` containers are e-con-boxed: the element itself
   spans the viewport and carries the background, `.e-con-inner` holds the
   1180px measure.
   -------------------------------------------------------------------------- */

.elementor .e-con.bantu-section {
  max-width: 100%;
  position: relative;
  width: 100%;
}

.e-con.bantu-section > .e-con-inner {
  margin-inline: auto;
  max-width: var(--bantu-max);
  padding-block: var(--bantu-section-space);
  width: 100%;
}

/* Surface fills. Fallbacks -- authored per-element backgrounds still win. */
.e-con.bantu-section--paper { background-color: var(--bantu-paper); }
.e-con.bantu-section--white { background-color: var(--bantu-white); }
.e-con.bantu-section--muted { background-color: var(--bantu-muted); }
.e-con.bantu-section--dark  { background-color: var(--bantu-ink); }
.e-con.bantu-section--gold  { background-color: var(--bantu-gold); }

/* Surface tokens. Every component below reads its ink from these, so a
   component is legible wherever it is dropped. */
.bantu-section--paper,
.bantu-section--white,
.bantu-section--muted,
.bantu-card--white,
.bantu-card--muted,
.bantu-placeholder {
  --bantu-fg: var(--bantu-ink);
  --bantu-fg-soft: var(--bantu-ink-soft);
  --bantu-accent: var(--bantu-gold-dark);
  --bantu-edge: var(--bantu-line);
  --bantu-focus-ring: var(--bantu-focus);
}

.bantu-section--dark,
.bantu-card--dark {
  --bantu-fg: var(--bantu-white);
  --bantu-fg-soft: #e6e1d6;
  --bantu-accent: var(--bantu-gold);
  --bantu-edge: rgba(255, 255, 255, 0.18);
  --bantu-focus-ring: var(--bantu-gold);
}

.bantu-section--gold,
.bantu-card--gold {
  --bantu-fg: var(--bantu-ink);
  --bantu-fg-soft: #3a2f14;
  --bantu-accent: var(--bantu-ink);
  --bantu-edge: rgba(23, 23, 23, 0.22);
  --bantu-focus-ring: var(--bantu-ink);
}

/* Utility bands sit tighter than editorial sections. */
.e-con:is(
  .bantu-cta-section,
  .bantu-legal-cta,
  .bantu-region-cta,
  .bantu-subscribe,
  .bantu-apply-section,
  .bantu-request-section,
  .bantu-register-section,
  .bantu-jobs-search
) > .e-con-inner {
  padding-block: clamp(44px, 5vw, 60px);
}

.e-con:is(.bantu-group-section, .bantu-founder) > .e-con-inner {
  padding-block: clamp(56px, 6vw, 76px);
}

/* The hero band runs taller than a standard editorial section. */
.e-con.bantu-hero > .e-con-inner {
  padding-block: clamp(56px, 7vw, 96px);
}

/* --------------------------------------------------------------------------
   4. GRID
   `.bantu-grid` containers are e-con-full, so the element itself is the grid.
   Elementor sets --display:flex / --flex-direction:column per element; those
   are custom properties, so declaring `display` directly at (0,2,0) wins.
   -------------------------------------------------------------------------- */

.e-con.bantu-grid {
  align-items: stretch;
  display: grid;
  gap: var(--bantu-gutter);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
}

.e-con.bantu-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e-con.bantu-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-con.bantu-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 8 of the 51 grid--2 instances wrap a single child. A one-child grid is a
   wrapper, not a column set -- span it rather than leaving a dead track. */
.e-con.bantu-grid > :only-child {
  grid-column: 1 / -1;
}

/* The track governs the child, not the authored --width percentage. */
.e-con.bantu-grid > .e-con,
.e-con.bantu-grid > .elementor-widget {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* Named grids that are not symmetrical. */
.e-con.bantu-hero__grid {
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

.e-con.bantu-article-layout,
.e-con.bantu-job-detail-grid {
  align-items: start;
  gap: clamp(28px, 3.4vw, 48px);
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
}

.e-con.bantu-contact-grid {
  align-items: start;
  gap: clamp(28px, 3.4vw, 48px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.e-con.bantu-cta {
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.e-con.bantu-group-grid,
.e-con.bantu-featured-insight {
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/* Card grids -- give the component grids a slightly roomier gutter. */
.e-con:is(
  .bantu-insight-grid,
  .bantu-sector-grid,
  .bantu-proof-grid,
  .bantu-process-grid,
  .bantu-footprint-grid,
  .bantu-team-grid,
  .bantu-region-grid,
  .bantu-purpose-grid,
  .bantu-journey-grid,
  .bantu-employer-region-grid,
  .bantu-job-filters
) {
  gap: clamp(18px, 2vw, 26px);
}

/* Vertical lists. */
.e-con:is(.bantu-job-list, .bantu-offices) {
  align-content: start;
  display: grid;
  gap: var(--bantu-space-md);
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

/* A row of filter chips, not a 4-column grid. */
.e-con.bantu-insight-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.e-con.bantu-insight-filters > .elementor-widget {
  width: auto;
}

/* Button rows are authored as grid--2 but must sit inline. */
.e-con.bantu-button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.e-con.bantu-button-row > .elementor-widget {
  margin: 0;
  width: auto;
}

/* --------------------------------------------------------------------------
   5. CONTENT STACKS
   Column containers that hold an eyebrow / heading / copy / action rhythm.
   -------------------------------------------------------------------------- */

.e-con:is(
  .bantu-hero__copy,
  .bantu-cta__copy,
  .bantu-cta__actions,
  .bantu-about-copy,
  .bantu-founder-copy,
  .bantu-group-copy,
  .bantu-article-body,
  .bantu-job-content,
  .bantu-legal-content,
  .bantu-fraud-content,
  .bantu-featured-insight__copy
) {
  align-content: start;
  display: flex;
  flex-direction: column;
  gap: var(--bantu-space-lg);
  min-width: 0;
}

.e-con.bantu-hero__copy {
  justify-content: center;
}

.e-con:is(.bantu-legal-content, .bantu-fraud-content, .bantu-article-body, .bantu-job-content) {
  gap: var(--bantu-space-md);
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   6. TYPOGRAPHY COMPONENTS
   The global kit already owns the serif/Inter families and the heading scale.
   These rules add measure, rhythm and surface-aware colour only.
   -------------------------------------------------------------------------- */

.elementor .bantu-heading .elementor-heading-title {
  color: var(--bantu-fg, var(--bantu-ink));
  text-wrap: balance;
}

.elementor .bantu-display.bantu-display .elementor-heading-title {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.elementor .bantu-eyebrow .elementor-heading-title {
  color: var(--bantu-accent, var(--bantu-gold-dark));
  font-family: var(--bantu-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.elementor .bantu-copy {
  color: var(--bantu-fg-soft, var(--bantu-ink-soft));
}

.elementor .bantu-copy > .elementor-widget-container {
  max-width: 68ch;
}

.elementor .bantu-copy :is(p, li) {
  line-height: 1.62;
}

.elementor .bantu-copy p + p,
.elementor .bantu-copy :is(ul, ol) {
  margin-top: 0.9em;
}

.elementor .bantu-copy :is(strong, b) {
  color: var(--bantu-fg, var(--bantu-ink));
  font-weight: 650;
}

.elementor .bantu-copy a {
  color: var(--bantu-accent, var(--bantu-gold-dark));
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.elementor .bantu-lead > .elementor-widget-container {
  max-width: 58ch;
}

.elementor .bantu-lead :is(p, li) {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.6;
}

.elementor .bantu-section-intro > .elementor-widget-container {
  max-width: 66ch;
}

.elementor .bantu-section-intro :is(p, li) {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
}

.elementor .bantu-article-lead :is(p, li) {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.58;
}

/* --------------------------------------------------------------------------
   7. CONTRAST GUARDS
   Weighted above per-element page CSS. 4 elements on dark surfaces carried
   #171717 and 34 elements on gold surfaces carried #765518 / #4B463D, all of
   which fail AA. Light surfaces nested inside a dark band are excluded.
   -------------------------------------------------------------------------- */

.elementor :is(.bantu-section--dark, .bantu-card--dark)
  :is(.bantu-heading, .bantu-display):not(:is(.bantu-card--white, .bantu-card--muted, .bantu-card--gold, .bantu-placeholder) *)
  .elementor-heading-title {
  color: var(--bantu-white);
}

.elementor :is(.bantu-section--dark, .bantu-card--dark)
  :is(.bantu-copy, .bantu-lead, .bantu-section-intro):not(:is(.bantu-card--white, .bantu-card--muted, .bantu-card--gold, .bantu-placeholder) *)
  :is(p, li, span, td, th) {
  color: #e6e1d6;
}

.elementor :is(.bantu-section--dark, .bantu-card--dark)
  .bantu-eyebrow:not(:is(.bantu-card--white, .bantu-card--muted, .bantu-card--gold, .bantu-placeholder) *)
  .elementor-heading-title {
  color: var(--bantu-gold);
}

.elementor :is(.bantu-section--gold, .bantu-card--gold)
  :is(.bantu-heading, .bantu-display, .bantu-eyebrow):not(:is(.bantu-card--white, .bantu-card--muted, .bantu-card--dark, .bantu-placeholder) *)
  .elementor-heading-title {
  color: var(--bantu-ink);
}

.elementor :is(.bantu-section--gold, .bantu-card--gold)
  :is(.bantu-copy, .bantu-lead, .bantu-section-intro):not(:is(.bantu-card--white, .bantu-card--muted, .bantu-card--dark, .bantu-placeholder) *)
  :is(p, li, span, td, th) {
  color: #3a2f14;
}

/* --------------------------------------------------------------------------
   8. CARDS
   Rules and surface changes rather than elevation.
   -------------------------------------------------------------------------- */

.e-con.bantu-card {
  align-content: start;
  background-color: var(--bantu-white);
  border: 1px solid var(--bantu-edge, var(--bantu-line));
  border-radius: var(--bantu-radius);
  display: flex;
  flex-direction: column;
  gap: var(--bantu-space-md);
  min-width: 0;
  padding: clamp(22px, 2.6vw, 34px);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.e-con.bantu-card--white { background-color: var(--bantu-white); }
.e-con.bantu-card--muted { background-color: var(--bantu-muted); }

.e-con.bantu-card--dark {
  background-color: var(--bantu-ink);
  border-color: rgba(255, 255, 255, 0.16);
}

.e-con.bantu-card--gold {
  background-color: var(--bantu-gold);
  border-color: var(--bantu-gold-dark);
}

/* Cards that lead somewhere get a hover / focus-within edge. No transform:
   nothing in the layout is allowed to shift under the pointer. */
.e-con:is(.bantu-insight-card, .bantu-job-card, .bantu-footprint, .bantu-employer-region, .bantu-region, .bantu-journey):hover,
.e-con:is(.bantu-insight-card, .bantu-job-card, .bantu-footprint, .bantu-employer-region, .bantu-region, .bantu-journey):focus-within {
  border-color: var(--bantu-accent, var(--bantu-gold-dark));
}

/* Featured surface -- the one place elevation is earned. */
.e-con.bantu-safety-card,
.e-con.bantu-fraud-cta {
  box-shadow: var(--bantu-shadow);
}

/* Editorial stat cards. */
.e-con:is(.bantu-proof, .bantu-footprint) {
  gap: var(--bantu-space-sm);
}

.elementor .bantu-proof .bantu-heading .elementor-heading-title,
.elementor .bantu-footprint .bantu-heading .elementor-heading-title {
  line-height: 1.04;
}

/* Numbered process steps read as a sequence, so give them a top rule. */
.e-con.bantu-process {
  border-top: 2px solid var(--bantu-accent, var(--bantu-gold-dark));
  gap: var(--bantu-space-sm);
}

/* Sector / purpose / region tiles are dark by design. */
.e-con:is(.bantu-sector, .bantu-purpose) {
  gap: var(--bantu-space-sm);
  justify-content: flex-start;
}

/* Job cards: headline, meta, action. */
.e-con.bantu-job-card {
  gap: var(--bantu-space-sm);
}

.e-con.bantu-job-card .bantu-button {
  margin-top: var(--bantu-space-sm);
}

/* Insight cards lead with the image slot and end with the action. */
.e-con.bantu-insight-card {
  gap: var(--bantu-space-sm);
}

.e-con.bantu-insight-card > .bantu-button {
  margin-top: auto;
  padding-top: var(--bantu-space-sm);
}

/* Team cards: portrait, then name and role. */
.e-con.bantu-team-card {
  gap: var(--bantu-space-sm);
  padding: clamp(16px, 1.8vw, 22px);
}

/* Office / filter cards. */
.e-con:is(.bantu-office-card, .bantu-filter) {
  gap: var(--bantu-space-xs);
}

/* Sidebar cards next to long-form content. */
.e-con:is(.bantu-article-aside, .bantu-job-summary) {
  gap: var(--bantu-space-md);
  position: sticky;
  top: var(--bantu-space-lg);
}

/* --------------------------------------------------------------------------
   9. BUTTONS
   The global kit owns the primary gold fill. These rules add the variants,
   the 48px target and the surface-aware secondary treatment.
   -------------------------------------------------------------------------- */

.elementor .bantu-button .elementor-button {
  align-items: center;
  border-radius: var(--bantu-radius);
  box-shadow: none;
  display: inline-flex;
  font-family: var(--bantu-sans);
  gap: 8px;
  justify-content: center;
  letter-spacing: 0.01em;
  line-height: 1.2;
  min-height: 48px;
  padding: 13px 22px;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.elementor .bantu-button--primary .elementor-button {
  background-color: var(--bantu-gold);
  border: 1px solid var(--bantu-gold);
  color: var(--bantu-ink);
}

.elementor .bantu-button--primary .elementor-button:hover,
.elementor .bantu-button--primary .elementor-button:focus-visible {
  background-color: var(--bantu-gold-dark);
  border-color: var(--bantu-gold-dark);
  color: var(--bantu-white);
}

.elementor .bantu-button--secondary .elementor-button {
  background-color: transparent;
  border: 1px solid var(--bantu-fg, var(--bantu-ink));
  color: var(--bantu-fg, var(--bantu-ink));
}

.elementor .bantu-button--secondary .elementor-button:hover,
.elementor .bantu-button--secondary .elementor-button:focus-visible {
  background-color: var(--bantu-fg, var(--bantu-ink));
  color: var(--bantu-white);
}

.elementor :is(.bantu-section--dark, .bantu-card--dark) .bantu-button--secondary .elementor-button:hover,
.elementor :is(.bantu-section--dark, .bantu-card--dark) .bantu-button--secondary .elementor-button:focus-visible {
  background-color: var(--bantu-white);
  color: var(--bantu-ink);
}

.elementor :is(.bantu-section--gold, .bantu-card--gold) .bantu-button--secondary .elementor-button:hover,
.elementor :is(.bantu-section--gold, .bantu-card--gold) .bantu-button--secondary .elementor-button:focus-visible {
  background-color: var(--bantu-ink);
  color: var(--bantu-white);
}

.elementor .bantu-filter-button .elementor-button {
  font-size: 0.85rem;
  min-height: 44px;
  padding: 10px 18px;
}

.elementor .bantu-form__submit .elementor-button {
  width: 100%;
}

.elementor .bantu-form__submit {
  margin-top: var(--bantu-space-sm);
}

/* --------------------------------------------------------------------------
   10. IMAGE PLACEHOLDERS
   Declared local placeholders -- no external requests, no stand-in photography.
   -------------------------------------------------------------------------- */

.e-con.bantu-placeholder {
  align-items: center;
  background-color: var(--bantu-muted);
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  display: flex;
  flex-direction: column;
  gap: var(--bantu-space-xs);
  justify-content: center;
  min-height: 260px;
  overflow: hidden;
  padding: var(--bantu-space-lg);
  position: relative;
  text-align: center;
}

.e-con.bantu-placeholder::before {
  border: 1px solid rgba(118, 85, 24, 0.22);
  content: "";
  inset: 10px;
  pointer-events: none;
  position: absolute;
}

.elementor .bantu-placeholder .bantu-eyebrow .elementor-heading-title {
  color: var(--bantu-gold-dark);
  position: relative;
}

.elementor .bantu-placeholder__label .elementor-heading-title {
  color: var(--bantu-ink-soft);
  font-family: var(--bantu-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  max-width: 34ch;
  position: relative;
  text-transform: none;
}

.e-con.bantu-insight-card__image { min-height: 190px; }
.e-con.bantu-team-card__portrait { aspect-ratio: 4 / 5; min-height: 0; }
.e-con.bantu-hero__visual { min-height: clamp(320px, 38vw, 470px); }
.e-con.bantu-featured-insight__image { min-height: clamp(260px, 30vw, 380px); }

.e-con:is(.bantu-group-image, .bantu-founder-image, .bantu-about-image) {
  min-height: clamp(280px, 32vw, 420px);
}

/* --------------------------------------------------------------------------
   11. FORMS
   `.bantu-form` is a design mock built from containers (`bantu-form--placeholder`);
   real inputs come from MetForm. Both are styled to the same spec.
   -------------------------------------------------------------------------- */

.e-con.bantu-form {
  background-color: var(--bantu-muted);
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  display: flex;
  flex-direction: column;
  gap: var(--bantu-space-md);
  padding: clamp(24px, 3vw, 36px);
}

.e-con.bantu-form--placeholder {
  --bantu-fg: var(--bantu-ink);
  --bantu-fg-soft: var(--bantu-ink-soft);
}

.elementor .bantu-form__title .elementor-heading-title {
  line-height: 1.12;
}

.e-con.bantu-field {
  background-color: var(--bantu-white);
  border: 1px solid #a79f91;
  border-radius: var(--bantu-radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 56px;
  padding: 10px 14px;
}

.elementor .bantu-field .bantu-eyebrow .elementor-heading-title {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.elementor .bantu-field__placeholder :is(p, li) {
  color: #6d675d;
  font-size: 0.95rem;
  line-height: 1.4;
}

.e-con:is(.bantu-contact-form, .bantu-register-form) {
  min-width: 0;
}

:where(.elementor, .mf-form-wrapper, .metform-form-main-wrapper) label {
  color: var(--bantu-ink);
  font-family: var(--bantu-sans);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.4;
}

:where(.elementor, .mf-form-wrapper, .metform-form-main-wrapper) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
  background: var(--bantu-white) !important;
  border: 1px solid #a79f91 !important;
  border-radius: var(--bantu-radius) !important;
  box-shadow: none !important;
  color: var(--bantu-ink) !important;
  font-family: var(--bantu-sans) !important;
  font-size: 1rem !important;
  min-height: 48px;
  padding: 11px 13px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

:where(.elementor, .mf-form-wrapper, .metform-form-main-wrapper) textarea {
  min-height: 144px;
  resize: vertical;
}

:where(.elementor, .mf-form-wrapper, .metform-form-main-wrapper) :where(input, textarea)::placeholder {
  color: #6d675d;
  opacity: 1;
}

:where(.elementor, .mf-form-wrapper, .metform-form-main-wrapper) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea):focus {
  border-color: var(--bantu-focus) !important;
  box-shadow: 0 0 0 3px rgba(214, 159, 36, 0.24) !important;
  outline: none !important;
}

:where(.mf-form-wrapper, .metform-form-main-wrapper) :where(.metform-btn, button[type="submit"], input[type="submit"]) {
  background: var(--bantu-gold) !important;
  border: 1px solid var(--bantu-gold) !important;
  border-radius: var(--bantu-radius) !important;
  box-shadow: none !important;
  color: var(--bantu-ink) !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  min-height: 48px;
  padding: 13px 22px !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

:where(.mf-form-wrapper, .metform-form-main-wrapper) :where(.metform-btn, button[type="submit"], input[type="submit"]):hover {
  background: var(--bantu-gold-dark) !important;
  border-color: var(--bantu-gold-dark) !important;
  color: var(--bantu-white) !important;
}

.mf-error-message,
.metform-form-main-wrapper .error {
  color: var(--bantu-danger) !important;
  font-size: 0.84rem;
  font-weight: 650;
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.bantu-faq .elementor-accordion-item,
.bantu-faq .e-n-accordion-item {
  border-color: var(--bantu-line) !important;
}

.bantu-faq .elementor-tab-title,
.bantu-faq .e-n-accordion-item-title {
  color: var(--bantu-ink) !important;
  font-weight: 750;
  min-height: 60px;
}

.bantu-faq .elementor-tab-content,
.bantu-faq .e-n-accordion-item-text {
  color: var(--bantu-ink-soft);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   Elementor's breakpoints are 1024 (tablet) and 767 (mobile).
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --bantu-section-space: 60px;
  }

  .e-con.bantu-grid--3,
  .e-con.bantu-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .e-con.bantu-hero__grid,
  .e-con.bantu-article-layout,
  .e-con.bantu-job-detail-grid,
  .e-con.bantu-contact-grid,
  .e-con.bantu-cta,
  .e-con.bantu-group-grid,
  .e-con.bantu-featured-insight {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .e-con:is(.bantu-article-aside, .bantu-job-summary) {
    position: static;
  }

  .e-con.bantu-hero__visual {
    min-height: 380px;
  }
}

@media (max-width: 767px) {
  :root {
    --bantu-section-space: 48px;
  }

  body {
    font-size: 16px;
  }

  .e-con.bantu-grid--2,
  .e-con.bantu-grid--3,
  .e-con.bantu-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .e-con.bantu-button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .e-con.bantu-button-row > .elementor-widget {
    width: 100%;
  }

  .e-con.bantu-button-row .elementor-button {
    width: 100%;
  }

  .elementor .bantu-display.bantu-display .elementor-heading-title {
    font-size: clamp(2.2rem, 11vw, 3.1rem);
    line-height: 1.06;
  }

  .e-con.bantu-hero__visual {
    min-height: 300px;
  }

  .e-con.bantu-placeholder {
    min-height: 200px;
  }

  .e-con.bantu-card {
    padding: 20px;
  }

  .e-con.bantu-form {
    padding: 20px;
  }

  .elementor .bantu-form__submit .elementor-button,
  .elementor .bantu-button .elementor-button {
    min-height: 48px;
  }
}

/* --------------------------------------------------------------------------
   14. MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  /* Elementor hides not-yet-animated elements with .elementor-invisible and
     strips the class via JS on scroll. For reduced-motion users skip the
     reveal entirely: the content should simply be there. Elementor's own
     animations.min.css ships no reduced-motion handling of its own. */
  .elementor-invisible {
    visibility: visible !important;
  }
}

/* --------------------------------------------------------------------------
   15. METFORM CONTROLS
   Live forms: candidate registration (28), employer talent request (31),
   intent-aware contact (55). MetForm renders its fields client-side, so these
   classes never appear in page source -- they are styled by class contract.

   The Elementor kit already owns the field box (white, #a79f91 border, 4px,
   Inter 16px, 11/13 padding). This layer harmonises with that rather than
   restating it, and corrects what the plugin defaults get wrong.

   Not touched here: `bantu-hp` and `bantu-intent-only--*` are functional and
   owned by mu-plugins/bantu-forms/bantu-forms.css.
   -------------------------------------------------------------------------- */

/* `bantu-field` sits on the Elementor WIDGET wrapper, not on a container. The
   field box belongs to the control inside it, so the wrapper must stay flat --
   otherwise every input renders inside a second identical border. */
.elementor .bantu-field.elementor-widget {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0;
  padding: 0;
}

/* Labels. The doubled class clears per-element widget typography, which was
   emitting Georgia at pure black. */
.elementor .mf-form-wrapper .mf-input-label.mf-input-label {
  color: var(--bantu-ink);
  display: block;
  font-family: var(--bantu-sans);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 7px;
}

/* Labels already carry "(required)" as words. A red-asterisk-only indicator
   conveys the same thing by colour and glyph alone, so it is removed rather
   than restyled. */
.elementor .mf-form-wrapper .mf-input-required-indicator {
  display: none;
}

/* Help text. Plugin default is #939393 -- 3.07:1 on white, below AA. */
.elementor .mf-form-wrapper .mf-input-help.mf-input-help {
  color: var(--bantu-ink-soft);
  display: block;
  font-family: var(--bantu-sans);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.5;
  margin-top: 6px;
}

.elementor .mf-form-wrapper .mf-error-message,
.mf-error-message,
.metform-form-main-wrapper .error {
  color: var(--bantu-danger) !important;
  display: block;
  font-family: var(--bantu-sans);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 6px;
}
/* Checkbox / radio groups (consent, multi-option). The kit field box is meant
   for text inputs; reset it here and give the control a real 44px row. */
.elementor .mf-form-wrapper .mf-checkbox-option {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  min-height: 44px;
  padding-block: 6px;
}

.elementor .mf-form-wrapper .mf-checkbox-option label {
  align-items: flex-start;
  color: var(--bantu-ink-soft);
  cursor: pointer;
  display: flex;
  font-family: var(--bantu-sans);
  font-size: 0.95rem;
  font-weight: 400;
  gap: 10px;
  line-height: 1.5;
  margin: 0;
}

.elementor .mf-form-wrapper input.mf-checkbox-input {
  accent-color: var(--bantu-gold-dark);
  background: var(--bantu-white) !important;
  border: 1px solid #a79f91 !important;
  border-radius: 3px !important;
  cursor: pointer;
  flex: 0 0 auto;
  height: 19px;
  margin: 3px 0 0;
  min-height: 0;
  padding: 0 !important;
  width: 19px;
}

.elementor .mf-form-wrapper .bantu-field--consent .mf-checkbox-option label {
  font-size: 0.9rem;
}
/* React-select. MetForm sets classNamePrefix="mf_select", so these names are
   stable across emotion hash changes. Default control is 38px -- below target. */
.elementor .mf-form-wrapper .mf_select__control {
  background: var(--bantu-white);
  border: 1px solid #a79f91;
  border-radius: var(--bantu-radius);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--bantu-sans);
  font-size: 1rem;
  min-height: 48px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.elementor .mf-form-wrapper .mf_select__control:hover {
  border-color: var(--bantu-ink-soft);
}

.elementor .mf-form-wrapper .mf_select__control--is-focused {
  border-color: var(--bantu-focus);
  box-shadow: 0 0 0 3px rgba(214, 159, 36, 0.24);
}

.elementor .mf-form-wrapper .mf_select__value-container {
  padding: 2px 13px;
}

.elementor .mf-form-wrapper .mf_select__single-value {
  color: var(--bantu-ink);
}

.elementor .mf-form-wrapper .mf_select__placeholder {
  color: #6d675d;
}

.elementor .mf-form-wrapper .mf_select__indicator-separator {
  display: none;
}

.elementor .mf-form-wrapper .mf_select__dropdown-indicator {
  color: var(--bantu-ink-soft);
}
/* The menu is one of the few places genuine elevation is warranted. */
.elementor .mf-form-wrapper .mf_select__menu {
  background: var(--bantu-white);
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  box-shadow: var(--bantu-shadow);
  font-family: var(--bantu-sans);
  margin-top: 4px;
  overflow: hidden;
  z-index: 20;
}

.elementor .mf-form-wrapper .mf_select__option {
  color: var(--bantu-ink);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.4;
  min-height: 44px;
  padding: 12px 14px;
  transition: background-color 150ms ease;
}

.elementor .mf-form-wrapper .mf_select__option--is-focused {
  background: var(--bantu-muted);
  color: var(--bantu-ink);
}

.elementor .mf-form-wrapper .mf_select__option--is-selected {
  background: var(--bantu-ink);
  color: var(--bantu-white);
}
/* CV upload. The plugin renders BOTH a raw file input and a label button, so
   the control appeared twice. The input is clipped rather than removed, so it
   stays in the tab order and keeps its native picker and validation. */
.elementor .mf-form-wrapper .mf-file-upload-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.elementor .mf-form-wrapper input.mf-input-file-upload {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Choosing a file is a secondary action -- gold stays reserved for submit. */
.elementor .mf-form-wrapper .mf-input-file-upload-label {
  align-items: center;
  background: var(--bantu-white);
  border: 1px solid var(--bantu-ink);
  border-radius: var(--bantu-radius);
  color: var(--bantu-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--bantu-sans);
  font-size: 0.9rem;
  font-weight: 650;
  justify-content: center;
  line-height: 1.2;
  margin: 0;
  min-height: 48px;
  padding: 13px 22px;
  transition: background-color 180ms ease, color 180ms ease;
}

.elementor .mf-form-wrapper .mf-input-file-upload-label:hover {
  background: var(--bantu-ink);
  color: var(--bantu-white);
}

/* The clipped input cannot show its own ring, so the label carries it. */
.elementor .mf-form-wrapper .mf-file-upload-container:focus-within .mf-input-file-upload-label {
  outline: 3px solid var(--bantu-focus);
  outline-offset: 3px;
}

.elementor .mf-form-wrapper .mf-file-name {
  color: var(--bantu-ink-soft);
  font-family: var(--bantu-sans);
  font-size: 0.88rem;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Submit. The kit already fills it gold; these add the target size and the
   `.mf-btn` alias the plugin uses in some layouts. */
.elementor .mf-form-wrapper :is(.mf-btn, .metform-btn, .metform-submit-btn) {
  border-radius: var(--bantu-radius);
  cursor: pointer;
  font-family: var(--bantu-sans);
  min-height: 48px;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.elementor .mf-form-wrapper .mf-btn-wraper {
  margin-top: var(--bantu-space-sm);
}

/* Submission response. Success is a calm confirmation band, not an alert. */
.elementor .mf-form-wrapper .mf-response-msg-wrap .mf-response-msg {
  background: #eaf5ef;
  border: 1px solid #b9dcc8;
  border-left: 4px solid var(--bantu-success);
  border-radius: var(--bantu-radius);
  color: #164b31;
  font-family: var(--bantu-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 14px 16px;
}

.elementor .mf-form-wrapper .mf-response-msg-wrap .mf-response-msg p {
  color: inherit;
  margin: 0;
}

.elementor .mf-form-wrapper .mf-response-msg-wrap .mf-success-icon {
  color: var(--bantu-success);
  margin-right: 8px;
}

.elementor .mf-form-wrapper .mf-error-res .mf-response-msg {
  background: #fdf1f0;
  border-color: #f0c9c5;
  border-left-color: var(--bantu-danger);
  color: #7a1a13;
}

.elementor .mf-form-wrapper .mf-error-res .mf-alert-icon {
  color: var(--bantu-danger);
  margin-right: 8px;
}

@media (max-width: 767px) {
  .elementor .mf-form-wrapper :is(.mf-btn, .metform-btn, .metform-submit-btn),
  .elementor .mf-form-wrapper .mf-input-file-upload-label {
    width: 100%;
  }

  .elementor .mf-form-wrapper .mf-file-upload-container {
    align-items: stretch;
    flex-direction: column;
  }
}
/* MetForm widgets carry per-element styling from the form template (post 227)
   at (0,4,0), which lands after this file. These few properties are design-
   system invariants -- brand type, AA contrast, one gold accent -- so they are
   forced. Everything else above stays overridable by the page author. */
.elementor .mf-form-wrapper .mf-input-label.mf-input-label {
  color: var(--bantu-ink) !important;
  font-family: var(--bantu-sans) !important;
}

.elementor .mf-form-wrapper .mf-input-help.mf-input-help {
  color: var(--bantu-ink-soft) !important;
  font-family: var(--bantu-sans) !important;
}

.elementor .bantu-field.elementor-widget {
  padding: 0 !important;
}

.elementor .mf-form-wrapper .mf-checkbox-option {
  display: flex !important;
}

.elementor .mf-form-wrapper .mf_select__control {
  border: 1px solid #a79f91 !important;
  border-radius: var(--bantu-radius) !important;
}

.elementor .mf-form-wrapper .mf_select__control--is-focused {
  border-color: var(--bantu-focus) !important;
}

/* Gold is reserved for the single primary action per view -- the submit
   button. The file picker is secondary and must not compete with it. */
.elementor .mf-form-wrapper .mf-input-file-upload-label {
  background: var(--bantu-white) !important;
  border: 1px solid var(--bantu-ink) !important;
  border-radius: var(--bantu-radius) !important;
  color: var(--bantu-ink) !important;
  font-family: var(--bantu-sans) !important;
}

.elementor .mf-form-wrapper .mf-input-file-upload-label:hover {
  background: var(--bantu-ink) !important;
  color: var(--bantu-white) !important;
}
/* The MetForm template's per-element CSS (post-227.css) is enqueued inside
   <body>, so it is the last sheet in the cascade and its (0,4,0) rules beat
   anything weighted lower here. These three controls are design-system
   invariants, so they are lifted above it with a body-scoped doubled class.
   Longhand properties only -- shorthands containing var() cannot be compared
   reliably against the plugin's own longhand declarations. */

body.elementor-page .mf-form-wrapper .bantu-field.bantu-field {
  background-color: transparent !important;
  background-image: none !important;
}

body.elementor-page .mf-form-wrapper .mf_select__control.mf_select__control {
  border-color: #a79f91 !important;
  border-radius: var(--bantu-radius) !important;
  border-style: solid !important;
  border-width: 1px !important;
}

body.elementor-page .mf-form-wrapper .mf_select__control--is-focused.mf_select__control--is-focused {
  border-color: var(--bantu-focus) !important;
}

body.elementor-page .mf-form-wrapper .mf-input-file-upload-label.mf-input-file-upload-label {
  background-color: var(--bantu-white) !important;
  background-image: none !important;
  border-color: var(--bantu-ink) !important;
  border-radius: var(--bantu-radius) !important;
  border-style: solid !important;
  border-width: 1px !important;
  color: var(--bantu-ink) !important;
  font-family: var(--bantu-sans) !important;
  font-size: 0.9rem !important;
}

body.elementor-page .mf-form-wrapper .mf-input-file-upload-label.mf-input-file-upload-label:hover {
  background-color: var(--bantu-ink) !important;
  color: var(--bantu-white) !important;
}
Hq

/* ==========================================================================
   BANTU SITE SHELL — RESIDUAL CSS ONLY

   Almost everything for the header and footer now lives in the Astra
   Customizer, so the client can edit it without touching code:
     - brand colours ......... Customizer > Global > Colors (global palette)
     - header menu + button .. Customizer > Header Builder
     - footer columns/order .. Customizer > Footer Builder
     - legal link alignment .. Footer Builder > Footer Menu
     - social icons .......... Footer Builder > Social
     - scroll-to-top ......... Customizer > Scroll To Top

   What remains below is only what Astra cannot express:
     1. typography inside the footer brand HTML widget
     2. a hover colour for social icons (Astra free has no hover colour)
     3. the mobile off-canvas drawer, which Astra ships unstyled
     4. footer text/link colours on the dark surface
   ========================================================================== */

/* --- 1. Footer brand block (content inside an HTML widget) --- */

.site-footer .bantu-shell-footer-brand img {
  max-width: 210px;
  height: auto;
}

.site-footer .bantu-footer-statement {
  margin: 18px 0 0;
  font-family: var(--bantu-serif);
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  line-height: 1.08;
  color: var(--bantu-white);
}

.site-footer .bantu-footer-statement span {
  display: block;
}

.site-footer .bantu-footer-intro {
  max-width: 340px;
  margin-top: 18px;
}

.site-footer .bantu-shell-offices p {
  margin-bottom: var(--bantu-space-md);
  line-height: 1.6;
}

.site-footer .bantu-shell-offices a {
  overflow-wrap: anywhere;
}

/* --- 2. Footer colours on the dark surface ---
   Astra's defaults put dark ink on the dark footer (contrast 1.00). */

.site-footer,
.site-footer p,
.site-footer li,
.site-footer .ast-builder-html-element {
  color: var(--bantu-footer-text);
}

.site-footer :where(h1, h2, h3, h4, h5, h6),
.site-footer .widget-title,
.site-footer strong {
  color: var(--bantu-white);
}

.site-footer .widget-title,
.site-footer .bantu-shell-offices h3 {
  font-family: var(--bantu-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bantu-gold);
  margin-bottom: 15px;
}

.site-footer a,
.site-footer a:visited {
  color: var(--bantu-footer-text);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--bantu-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer .menu-item {
  margin-block: 8px;
}

/* --- 3. Social icons: the icon itself changes colour, no filled box --- */

.site-footer .ast-builder-social-element {
  width: 44px;
  height: 44px;
  background: transparent;
}

.site-footer .ast-builder-social-element:hover,
.site-footer .ast-builder-social-element:focus-visible {
  color: var(--bantu-gold);
  background: transparent;
}

/* --- 4. Mobile off-canvas drawer (Astra ships this unstyled) --- */

.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
  background-color: var(--bantu-ink);
}

.ast-mobile-popup-drawer .ast-mobile-popup-header {
  border-bottom: 1px solid rgba(230, 225, 214, 0.18);
}

.ast-mobile-popup-drawer.active .ast-mobile-popup-header .menu-toggle-close {
  color: var(--bantu-white);
  min-width: 44px;
  min-height: 44px;
}

.ast-mobile-popup-drawer .ast-mobile-popup-content .main-header-menu .menu-item .menu-link {
  color: var(--bantu-footer-text);
  font-family: var(--bantu-sans);
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(230, 225, 214, 0.14);
}

.ast-mobile-popup-drawer .ast-mobile-popup-content .main-header-menu .menu-item .menu-link:hover,
.ast-mobile-popup-drawer .ast-mobile-popup-content .main-header-menu .menu-item .menu-link:focus-visible,
.ast-mobile-popup-drawer .ast-mobile-popup-content .main-header-menu .current-menu-item > .menu-link {
  color: var(--bantu-gold);
  background-color: rgba(230, 225, 214, 0.07);
}

.ast-mobile-popup-drawer .ast-mobile-popup-content .sub-menu {
  background-color: rgba(230, 225, 214, 0.05);
}

.ast-mobile-popup-drawer .ast-mobile-popup-content .sub-menu .menu-item .menu-link {
  padding-left: var(--bantu-space-xl);
}

.ast-mobile-popup-drawer .ast-menu-toggle {
  color: var(--bantu-footer-text);
  min-width: 44px;
  min-height: 44px;
}

.ast-mobile-popup-drawer .ast-custom-button {
  width: 100%;
  justify-content: center;
  border-bottom: 0;
}

/* Keyboard focus must stay visible across the shell. */
.site-header :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.ast-mobile-popup-drawer :where(a, button):focus-visible {
  outline: 2px solid var(--bantu-focus);
  outline-offset: 3px;
}

/* --- 5. Corner radius ---
   Astra free does not emit border-radius for the header button or the
   scroll-to-top control; those Customizer fields are Astra Pro (Astra
   Addon is not installed). 4px is the brand radius used site-wide. */

.site-header .ast-custom-button,
.ast-mobile-popup-drawer .ast-custom-button {
  border-radius: var(--bantu-radius);
}

#ast-scroll-top {
  border-radius: var(--bantu-radius);
}

/* --- 6. Footer brand lockup ---
   The brand column vertically centres its content, dropping the logo ~30px
   below the adjacent column headings. WordPress also wraps the logo anchor
   in a <p>, and Astra's global `img { max-width: 100% }` stretched the
   lockup to the full column width. */

.site-footer .site-footer-primary-section-1 {
  align-items: flex-start;
  justify-content: flex-start;
}

.site-footer .bantu-shell-footer-brand p:first-child {
  margin-bottom: 18px;
  line-height: 0;
}

.site-footer .bantu-shell-footer-brand a {
  display: inline-block;
  line-height: 0;
}

.site-footer .bantu-shell-footer-brand img {
  display: block;
  width: 230px;
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   12. VACANCY FEED — canonical image-free CPT presentation

   This is intentionally isolated from EAEL and generic post-card selectors.
   Elementor owns the surrounding section and copy; this layer owns only the
   repeating vacancy records, so future vacancies inherit one stable design.
   ========================================================================== */

.bantu-vacancy-widget,
.bantu-vacancy-widget > .elementor-widget-container,
.bantu-vacancy-feed {
  width: 100%;
}

.bantu-vacancy-feed__count {
  margin: 0 0 var(--bantu-space-lg);
  color: var(--bantu-ink-soft);
  font-family: var(--bantu-sans);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bantu-vacancy-list {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
}

.bantu-vacancy-card {
  align-items: stretch;
  background: var(--bantu-white);
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  display: grid;
  gap: var(--bantu-space-xl);
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  min-width: 0;
  padding: clamp(22px, 2.4vw, 32px);
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.bantu-vacancy-card::before {
  background: var(--bantu-gold);
  content: "";
  inset: -1px auto -1px -1px;
  position: absolute;
  transition: width 180ms ease;
  width: 4px;
}

.bantu-vacancy-card:hover,
.bantu-vacancy-card:focus-within {
  background: var(--bantu-paper);
  border-color: var(--bantu-gold-dark);
  transform: translateY(-2px);
}

.bantu-vacancy-card:hover::before,
.bantu-vacancy-card:focus-within::before {
  width: 6px;
}

.bantu-vacancy-card__main {
  min-width: 0;
}

.bantu-vacancy-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bantu-space-sm);
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.bantu-vacancy-card__tags li {
  background: var(--bantu-muted);
  border-radius: var(--bantu-radius);
  color: var(--bantu-gold-dark);
  font-family: var(--bantu-sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  padding: 6px 9px;
  text-transform: uppercase;
}

.bantu-vacancy-card__title {
  color: var(--bantu-ink);
  font-family: var(--bantu-serif);
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  max-width: 28ch;
}

.bantu-vacancy-card__title a {
  color: inherit;
  text-decoration: none;
}

.bantu-vacancy-card__title a:hover {
  color: var(--bantu-gold-dark);
}

.bantu-vacancy-card__meta {
  color: var(--bantu-ink-soft);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 12px 0 0;
}

.bantu-vacancy-card__summary {
  color: var(--bantu-ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 68ch;
}

.bantu-vacancy-card__action {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 150px;
  text-align: right;
}

.bantu-vacancy-card__reference {
  color: var(--bantu-ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.bantu-vacancy-card__link {
  align-items: center;
  color: var(--bantu-ink);
  display: inline-flex;
  font-size: 0.96rem;
  font-weight: 800;
  gap: var(--bantu-space-sm);
  justify-content: center;
  min-height: 44px;
  text-decoration-color: var(--bantu-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.bantu-vacancy-card__link:hover,
.bantu-vacancy-card__link:focus-visible {
  color: var(--bantu-gold-dark);
  text-decoration-color: currentColor;
}

.bantu-vacancy-empty {
  background: var(--bantu-muted);
  border-left: 4px solid var(--bantu-gold);
  border-radius: var(--bantu-radius);
  padding: clamp(24px, 4vw, 40px);
}

.bantu-vacancy-empty h3 {
  color: var(--bantu-ink);
  font-family: var(--bantu-serif);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.12;
  margin: 0 0 12px;
}

.bantu-vacancy-empty p {
  color: var(--bantu-ink-soft);
  margin: 0 0 16px;
  max-width: 64ch;
}

.bantu-vacancy-pagination {
  margin-top: var(--bantu-space-xl);
}

.bantu-vacancy-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bantu-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bantu-vacancy-pagination a,
.bantu-vacancy-pagination span {
  align-items: center;
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  text-decoration: none;
}

.bantu-vacancy-pagination .current {
  background: var(--bantu-gold);
  border-color: var(--bantu-gold);
  color: var(--bantu-ink);
}

@media (max-width: 767px) {
  .bantu-vacancy-card {
    gap: var(--bantu-space-lg);
    grid-template-columns: minmax(0, 1fr);
  }

  .bantu-vacancy-card__title {
    font-size: clamp(1.45rem, 7vw, 1.85rem);
  }

  .bantu-vacancy-card__action {
    align-items: flex-start;
    flex-direction: row;
    gap: var(--bantu-space-md);
    min-width: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bantu-vacancy-card,
  .bantu-vacancy-card::before {
    transition: none;
  }

  .bantu-vacancy-card:hover,
  .bantu-vacancy-card:focus-within {
    transform: none;
  }
}


/* ==========================================================================
   13. FIND JOBS — hero media and wireframe filter
   Scoped to page 34 so no other form or Elementor page can inherit it.
   ========================================================================== */

.page-id-34 .bantu-hero__image {
  min-height: 500px;
  overflow: hidden;
}

.page-id-34 .bantu-hero__image > .elementor-element,
.page-id-34 .bantu-hero__image .elementor-widget-container {
  height: 100%;
  width: 100%;
}

.page-id-34 .bantu-hero__image img {
  height: 500px;
  object-fit: cover;
  width: 100%;
}

.page-id-34 .bantu-vacancy-filters {
  align-items: end;
  background: var(--bantu-white);
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(230px, 2fr) repeat(3, minmax(135px, 1fr)) auto;
  margin: 0 0 28px;
  padding: 18px;
  width: 100%;
}

.page-id-34 .bantu-vacancy-filter {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.page-id-34 .bantu-vacancy-filter label {
  color: var(--bantu-ink);
  font-family: var(--bantu-sans);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

.page-id-34 .bantu-vacancy-filter input,
.page-id-34 .bantu-vacancy-filter select {
  appearance: none;
  background-color: var(--bantu-white);
  border: 1px solid #a79f91;
  border-radius: var(--bantu-radius);
  color: var(--bantu-ink);
  font-family: var(--bantu-sans);
  font-size: 1rem;
  line-height: 1.35;
  min-height: 48px;
  padding: 11px 38px 11px 13px;
  width: 100%;
}

.page-id-34 .bantu-vacancy-filter select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bantu-ink) 50%),
    linear-gradient(135deg, var(--bantu-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 21px,
    calc(100% - 12px) 21px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.page-id-34 .bantu-vacancy-filter input:focus,
.page-id-34 .bantu-vacancy-filter select:focus {
  border-color: var(--bantu-focus);
  outline: 3px solid rgba(154, 107, 18, 0.22);
  outline-offset: 1px;
}

.page-id-34 .bantu-vacancy-filter__actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.page-id-34 .bantu-vacancy-filter__submit {
  align-items: center;
  background: var(--bantu-gold);
  border: 1px solid var(--bantu-ink);
  border-radius: var(--bantu-radius);
  color: var(--bantu-ink);
  display: inline-flex;
  font-family: var(--bantu-sans);
  font-size: 0.95rem;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 11px 18px;
  white-space: nowrap;
}

.page-id-34 .bantu-vacancy-filter__submit:hover,
.page-id-34 .bantu-vacancy-filter__submit:focus-visible {
  background: var(--bantu-ink);
  color: var(--bantu-white);
}

.page-id-34 .bantu-vacancy-filter__clear {
  align-items: center;
  color: var(--bantu-ink-soft);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 700;
  min-height: 44px;
  padding-inline: 4px;
}

@media (max-width: 1080px) {
  .page-id-34 .bantu-vacancy-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-id-34 .bantu-vacancy-filter--keyword {
    grid-column: 1 / -1;
  }

  .page-id-34 .bantu-vacancy-filter__actions {
    align-self: end;
  }
}

@media (max-width: 767px) {
  .page-id-34 .bantu-hero__image,
  .page-id-34 .bantu-hero__image img {
    height: 340px;
    min-height: 340px;
  }

  .page-id-34 .bantu-vacancy-filters {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .page-id-34 .bantu-vacancy-filter--keyword {
    grid-column: auto;
  }

  .page-id-34 .bantu-vacancy-filter__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .page-id-34 .bantu-vacancy-filter__submit,
  .page-id-34 .bantu-vacancy-filter__clear {
    justify-content: center;
    width: 100%;
  }
}


/* ==========================================================================
   14. BANTU INSIGHTS — reusable editorial cards, archive and single article
   ========================================================================== */

.bantu-insight-shortcode,
.bantu-insight-shortcode > .elementor-widget-container,
.bantu-editorial-feed {
  width: 100%;
}

.bantu-editorial-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--bantu-space-xl);
}

.bantu-editorial-filter {
  align-items: center;
  background: var(--bantu-white);
  border: 1px solid var(--bantu-ink);
  border-radius: var(--bantu-radius);
  color: var(--bantu-ink);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 800;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  text-decoration: none;
}

.bantu-editorial-filter:hover,
.bantu-editorial-filter:focus-visible,
.bantu-editorial-filter.is-current {
  background: var(--bantu-gold);
  border-color: var(--bantu-gold);
  color: var(--bantu-ink);
}

.bantu-editorial-grid {
  display: grid;
  gap: var(--bantu-space-lg);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bantu-editorial-card {
  background: var(--bantu-white);
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.bantu-editorial-card:hover,
.bantu-editorial-card:focus-within {
  background: var(--bantu-paper);
  border-color: var(--bantu-gold-dark);
}

.bantu-editorial-card__media {
  aspect-ratio: 16 / 10;
  background: var(--bantu-muted);
  display: block;
  overflow: hidden;
  position: relative;
}

.bantu-editorial-card__media__asset,
.bantu-editorial-featured__media__asset,
.bantu-single-insight__media__asset {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bantu-editorial-card__media__fallback,
.bantu-editorial-featured__media__fallback,
.bantu-single-insight__media__fallback {
  align-items: flex-end;
  background-color: var(--bantu-muted);
  border-bottom: 4px solid var(--bantu-gold);
  color: var(--bantu-gold-dark);
  display: flex;
  height: 100%;
  inset: 0;
  padding: var(--bantu-space-lg);
  position: absolute;
  width: 100%;
}

.bantu-editorial-card__media__fallback span,
.bantu-editorial-featured__media__fallback span,
.bantu-single-insight__media__fallback span {
  font-family: var(--bantu-serif);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.08;
}

.bantu-editorial-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 2.3vw, 28px);
}

.bantu-editorial-card__meta,
.bantu-single-insight__meta {
  align-items: center;
  color: var(--bantu-gold-dark);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--bantu-sans);
  font-size: 0.76rem;
  font-weight: 800;
  gap: 7px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.bantu-editorial-card__title {
  color: var(--bantu-ink);
  font-family: var(--bantu-serif);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

.bantu-editorial-card__title a,
.bantu-editorial-featured h2 a {
  color: inherit;
  text-decoration: none;
}

.bantu-editorial-card__title a:hover,
.bantu-editorial-card__title a:focus-visible,
.bantu-editorial-featured h2 a:hover,
.bantu-editorial-featured h2 a:focus-visible {
  color: var(--bantu-gold-dark);
}

.bantu-editorial-card__excerpt {
  color: var(--bantu-ink-soft);
  font-family: var(--bantu-sans);
  font-size: 0.98rem;
  line-height: 1.62;
  margin: 16px 0 0;
}

.bantu-editorial-card__link {
  align-items: center;
  color: var(--bantu-ink);
  display: inline-flex;
  font-family: var(--bantu-sans);
  font-size: 0.94rem;
  font-weight: 800;
  gap: 8px;
  margin-top: auto;
  min-height: 44px;
  padding-top: 18px;
  text-decoration-color: var(--bantu-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.bantu-editorial-card__link:hover,
.bantu-editorial-card__link:focus-visible {
  color: var(--bantu-gold-dark);
}

.bantu-editorial-featured {
  align-items: stretch;
  background: var(--bantu-white);
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
}

.bantu-editorial-featured__media {
  background: var(--bantu-muted);
  min-height: 380px;
  overflow: hidden;
  position: relative;
}

.bantu-editorial-featured__copy {
  align-content: center;
  display: grid;
  padding: clamp(28px, 5vw, 56px);
}

.bantu-editorial-featured h2 {
  color: var(--bantu-ink);
  font-family: var(--bantu-serif);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
}

.bantu-editorial-featured__copy > p:not(.bantu-editorial-card__meta) {
  color: var(--bantu-ink-soft);
  font-size: 1.06rem;
  line-height: 1.65;
  margin: 20px 0 0;
}

.bantu-editorial-primary {
  align-items: center;
  align-self: start;
  background: var(--bantu-gold);
  border: 1px solid var(--bantu-gold);
  border-radius: var(--bantu-radius);
  color: var(--bantu-ink);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  margin-top: 26px;
  min-height: 48px;
  padding: 12px 20px;
  text-decoration: none;
  width: fit-content;
}

.bantu-editorial-primary:hover,
.bantu-editorial-primary:focus-visible {
  background: var(--bantu-ink);
  border-color: var(--bantu-ink);
  color: var(--bantu-white);
}

.bantu-editorial-empty {
  background: var(--bantu-muted);
  border-left: 4px solid var(--bantu-gold);
  border-radius: var(--bantu-radius);
  padding: clamp(24px, 4vw, 40px);
}

.bantu-editorial-empty h3 {
  color: var(--bantu-ink);
  font-family: var(--bantu-serif);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
}

.bantu-editorial-empty p {
  color: var(--bantu-ink-soft);
  line-height: 1.65;
  margin: 12px 0 0;
}

.bantu-editorial-pagination {
  margin-top: var(--bantu-space-xl);
}

.bantu-editorial-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bantu-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bantu-editorial-pagination a,
.bantu-editorial-pagination span {
  align-items: center;
  border: 1px solid var(--bantu-line);
  border-radius: var(--bantu-radius);
  color: var(--bantu-ink);
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  text-decoration: none;
}

.bantu-editorial-pagination a:hover,
.bantu-editorial-pagination a:focus-visible,
.bantu-editorial-pagination .current {
  background: var(--bantu-gold);
  border-color: var(--bantu-gold);
  color: var(--bantu-ink);
}

.bantu-single-insight-shell,
.bantu-single-insight-shell > .elementor {
  width: 100%;
}

.bantu-single-insight__visual {
  min-width: 0;
}

.bantu-single-insight__media {
  aspect-ratio: 4 / 3;
  background: var(--bantu-muted);
  border-radius: var(--bantu-radius);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.bantu-single-insight__content :where(p, ul, ol, blockquote) {
  color: var(--bantu-ink-soft);
  font-size: 1.06rem;
  line-height: 1.72;
  margin-block: 0 1.25em;
}

.bantu-single-insight__content :where(h2, h3, h4) {
  color: var(--bantu-ink);
  font-family: var(--bantu-serif);
  font-weight: 400;
  line-height: 1.1;
  margin-block: 1.35em 0.55em;
}

.bantu-single-insight__content a {
  color: var(--bantu-gold-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.bantu-single-insight__content blockquote {
  border-left: 4px solid var(--bantu-gold);
  font-family: var(--bantu-serif);
  font-size: 1.3rem;
  margin-left: 0;
  padding-left: var(--bantu-space-lg);
}

@media (min-width: 1021px) {
  .bantu-single-insight-page .e-con.bantu-hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

@media (max-width: 1020px) {
  .bantu-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .bantu-editorial-grid,
  .bantu-editorial-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .bantu-editorial-featured__media {
    min-height: 280px;
  }

  .bantu-editorial-card__media {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bantu-editorial-card {
    transition: none;
  }
}

/* ==========================================================================
   15. SINGLE INSIGHT — continuous editorial article
   Keeps the title, featured image and article on one clean paper surface.
   ========================================================================== */

.bantu-single-insight-page,
.bantu-single-insight-page #page,
.bantu-single-insight-page #content,
.bantu-single-insight-page .site-main,
.bantu-single-insight-page .bantu-single-insight-shell,
.bantu-single-insight-page #primary {
  margin-block: 0 !important;
}

.bantu-single-insight-page .elementor-780 {
  background: var(--bantu-paper) !important;
  padding: 0 !important;
}

.bantu-single-insight-page .bantu-single-insight-intro,
.bantu-single-insight-page .bantu-single-insight-article {
  border: 0;
  box-shadow: none;
}

.bantu-single-insight-page .bantu-single-insight__intro {
  display: flex;
  flex-direction: column;
  gap: var(--bantu-space-xl);
  margin-inline: auto;
  max-width: 1180px;
  width: 100%;
}

.bantu-single-insight-page .bantu-single-insight__intro-copy {
  max-width: 920px;
  width: 100%;
}

.bantu-single-insight-page .bantu-single-insight__intro-copy .bantu-display {
  max-width: 18ch;
}

.bantu-single-insight-page .bantu-single-insight__intro-copy .bantu-lead {
  max-width: 760px;
}

.bantu-single-insight-page .bantu-single-insight__visual,
.bantu-single-insight-page .bantu-single-insight-media-widget,
.bantu-single-insight-page .bantu-single-insight-media-widget > .elementor-widget-container {
  width: 100%;
}

.bantu-single-insight-page .bantu-single-insight__media {
  aspect-ratio: 16 / 8;
  background: var(--bantu-muted);
  border: 0;
  border-radius: var(--bantu-radius);
  max-height: 640px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.bantu-single-insight-page .bantu-single-insight__media__asset {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.bantu-single-insight-page .bantu-single-insight-article {
  background: var(--bantu-paper);
}

.bantu-single-insight-page .bantu-article-layout {
  align-items: flex-start;
  column-gap: 64px;
}

.bantu-single-insight-page .bantu-article-body {
  max-width: 760px;
}

.bantu-single-insight-page .bantu-single-insight__content {
  max-width: 70ch;
}

.bantu-single-insight-page .bantu-single-insight__content > :first-child {
  margin-top: 0;
}

.bantu-single-insight-page .bantu-article-aside {
  align-self: flex-start;
  background: transparent !important;
  border-color: var(--bantu-gold) !important;
  border-radius: 0;
  box-shadow: none;
}

.bantu-single-insight-page .bantu-single-insight-related {
  background: var(--bantu-paper);
  border-top: 1px solid var(--bantu-line);
}

@media (max-width: 1020px) {
  .bantu-single-insight-page .bantu-article-layout {
    column-gap: var(--bantu-space-xl);
  }
}

@media (max-width: 767px) {
  .bantu-single-insight-page .bantu-single-insight__intro {
    gap: var(--bantu-space-lg);
  }

  .bantu-single-insight-page .bantu-single-insight__media {
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .bantu-single-insight-page .bantu-article-layout {
    row-gap: 40px;
  }

  .bantu-single-insight-page .bantu-article-aside {
    width: 100%;
  }
}

/* ==========================================================================
   16. HOMEPAGE INSIGHTS — image-led editorial story group
   One lead story and two supporting stories, powered by the live post feed.
   ========================================================================== */

.page-id-19 .bantu-home-insights-loop,
.page-id-19 .bantu-home-insights-loop > .elementor-widget-container,
.page-id-19 .bantu-editorial-feed--home {
  width: 100%;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-grid {
  display: grid;
  gap: var(--bantu-space-lg);
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.92fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card {
  background: var(--bantu-white);
  border-color: var(--bantu-ink);
  min-width: 0;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:first-child {
  grid-row: 1 / 3;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:first-child .bantu-editorial-card__media {
  aspect-ratio: 16 / 10;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:first-child .bantu-editorial-card__title {
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  max-width: none;
  width: 100%;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) {
  display: flex;
  flex-direction: column;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__media {
  aspect-ratio: 16 / 7.5;
  height: auto;
  min-height: 0;
  width: 100%;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__media__asset {
  height: 100% !important;
  max-height: none;
  object-fit: cover;
  width: 100%;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__body {
  padding: 20px;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__title {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__excerpt {
  display: none;
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card__link {
  color: var(--bantu-ink);
}

.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:hover,
.page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:focus-within {
  background: var(--bantu-paper);
  border-color: var(--bantu-ink);
}

@media (max-width: 1020px) {
  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) {
    display: flex;
  }

  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__media {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:first-child {
    grid-column: auto;
  }

  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:first-child .bantu-editorial-card__title,
  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__title {
    font-size: clamp(1.55rem, 8vw, 2rem);
    max-width: none;
  }

  .page-id-19 .bantu-editorial-feed--home .bantu-editorial-card:not(:first-child) .bantu-editorial-card__excerpt {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL
   Applied by assets/js/bantu-motion.js. The hiding class is added by that
   script at runtime, never in the markup, so a page always renders fully
   visible if the script does not run. Only opacity and transform are
   animated: both are composited, so this costs no layout or paint.
   -------------------------------------------------------------------------- */

.bantu-reveal.bantu-reveal {
  /* !important: Elementor's frontend.min.css sets opacity on .e-con for its
     background-overlay feature and outranks a plain class. The class is also
     doubled because .e-con.bantu-card declares its own transition shorthand.
     Both classes are stripped by the script once the reveal finishes, so
     nothing here lingers over hover states. */
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition-property: opacity, transform;
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.bantu-reveal.is-revealed.is-revealed {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* Phones sit closer to the eye and scroll faster: shorten the travel so the
   movement reads as settling rather than sliding. */
@media (max-width: 767px) {
  .bantu-reveal.bantu-reveal {
    transform: translateY(8px) !important;
    transition-duration: 0.45s;
  }

  .bantu-reveal.is-revealed.is-revealed {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bantu-reveal.bantu-reveal,
  .bantu-reveal.is-revealed.is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* bantu-button-transition — Elementor ships no transition on .elementor-button */
.elementor-button,
.elementor-button-link {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-button,
  .elementor-button-link { transition: none; }
}


/* bantu-featured-fill-fix — fill the grid cell regardless of how the browser resolves height:100% */
.bantu-editorial-featured__media__asset {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   bantu-hero-tablet-fix
   1. Keep the hero two-column on tablets. iPad portrait is exactly 1024px, which
      the generic 1024px stack rule was catching. Only phones/small tablets stack.
   2. When the hero DOES stack, the visual is a wide short box holding a portrait
      photo. Anchor the crop to the top so faces are never cut, and size the box
      relative to its width so far less is cropped.
   !important is deliberate: Elementor writes background-position and min-height
   per element at higher specificity, and this must win on every page.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1024px) {
  .e-con.bantu-hero__grid {
    align-items: center;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }
  .e-con.bantu-hero__visual {
    min-height: 460px;
  }
}
@media (max-width: 899px) {
  .e-con.bantu-hero__visual {
    background-position: top center !important;
    min-height: clamp(320px, 68vw, 560px) !important;
  }
}


/* Acknowledgement of Country — footer above-row HTML widget */
.site-footer .bantu-acknowledgement {
  margin: 0 auto;
  max-width: 72ch;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #B9B2A4;
}