@charset "UTF-8";
/*
  BeHuman design system (light, calm, human-centred)
  Palette:
    primary: #0d62b0 (links, primary buttons)
    primary-dark: #0a4a82 (hover/focus)
    accent: #0d62b0 (unified blue accent)
    neutrals: ink #0f172a, body #1f2937, muted #6b7280, soft bg #f5f7fb, surface #ffffff, border #e5e7eb
  Typography:
    Family: Poppins (loaded) → Nunito/Roboto → system
    Headings 700–800, line-height 1.2; Body 16px/1.6 with loose tracking
  Spacing scale: 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem
  Components:
    Cards: radius 18px, soft border/shadow, subtle lift on hover
    Section title: muted kicker + bold title + accent underline
    Buttons: radius 14px, consistent padding/hover/focus ring
    Inputs: rounded 12px, light border, primary focus halo
*/

:root {
  --bh-primary: #0d62b0;
  --bh-primary-dark: #0a4a82;
  --bh-accent: #0d62b0;
  --bh-accent-soft: #e8f1fb;
  --bh-ink: #0f172a;
  --bh-body: #1f2937;
  --bh-muted: #6b7280;
  --bh-surface: #ffffff;
  --bh-soft: #f5f7fb;
  --bh-soft-gradient: linear-gradient(135deg, rgba(13, 98, 176, 0.08), rgba(13, 98, 176, 0.08), #fff);
  --bh-border: #e5e7eb;
  --bh-radius: 18px;
  --bh-shadow: 0 16px 38px rgba(13, 98, 176, 0.08);
  --bh-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
  --bh-shadow-lift: 0 18px 42px rgba(13, 98, 176, 0.12);
  --bh-page-intro-surface: linear-gradient(135deg, #e9f3ff 0%, #f5f9ff 50%, #ffffff 100%);
  --bh-space-xs: 0.5rem;
  --bh-space-sm: 0.75rem;
  --bh-space-md: 1rem;
  --bh-space-lg: 1.5rem;
  --bh-space-xl: 2rem;
}

/* Global horizontal-overflow guard.
   Prevents the stray bottom scrollbar / left-right shifting on desktop when a
   section or animated element pushes a few pixels past the viewport width.
   `overflow-x: clip` is preferred because — unlike `hidden` — it does not turn
   the page into a scroll container, so sticky/fixed headers keep working;
   `hidden` is kept as a fallback for browsers that don't support `clip`.
   Inner scroll areas (data tables, the news ticker) keep their own overflow. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* --- Desktop header layout ------------------------------------------------
   Keep the whole top bar (logo + centred nav pill + social icons + language +
   search) tidy and complete on one line at every desktop width, with
   comfortable spacing. Columns may shrink and the sizes step down gently on
   smaller screens so nothing is ever truncated; the global overflow guard
   above is the final safety net. Logical properties keep it correct in RTL. */
@media (min-width: 992px) {
  #header .container.d-none.d-lg-block { padding-inline: 1.25rem; max-width: 100%; }
  #header .container .d-flex.align-items-center.w-100 { gap: 0.75rem !important; min-width: 0; flex-wrap: nowrap; }
  #header .flex-grow-1.d-flex.justify-content-center { min-width: 0; }
  #header #navmenu,
  #header #navmenu .rounded-pill { max-width: 100%; }
  /* Trim the roomy nav pill so the seven links leave space for the actions. */
  #header #navmenu .rounded-pill { padding-inline: 0.5rem !important; }
  #header #navmenu .nav-link { padding-inline: 0.55rem !important; }

  /* Right-hand actions: evenly spaced with a comfortable icon size.
     The markup carries Bootstrap's .flex-shrink-0, whose !important would stop
     this column giving way; without the override the centred nav is the only
     thing left that can shrink and it collapses to nothing on narrow desktops,
     leaving the header with no menu at all. */
  #header .header-actions { flex-shrink: 1 !important; min-width: 0; gap: 0.5rem !important; }
  #header .header-actions .bh-social-desktop { gap: 0.25rem !important; }
  #header .header-actions .bh-social-desktop a { width: 36px !important; height: 36px !important; }
  #header .header-actions .language-switcher__toggle { padding-inline: 0.7rem !important; }

  /* Search: rounded field with a little breathing room from the edge. */
  #header .header-actions .search-form { margin-inline-start: 0.4rem !important; margin-inline-end: 0.25rem !important; min-width: 0; max-width: 200px !important; }
  #header .header-actions .search-form .search-input-wrap { min-width: 0; }
  #header .header-actions .search-form .form-control { width: 100%; min-width: 0; }
}

/* Laptops (~1360-1600): tighten the nav padding and icons so the seven links
   never run into the social icons, while keeping the "English" label. */
@media (min-width: 992px) and (max-width: 1599.98px) {
  #header .container.d-none.d-lg-block { padding-inline: 0.85rem; }
  #header .container .d-flex.align-items-center.w-100 { gap: 0.45rem !important; }
  #header .header-actions { gap: 0.3rem !important; }
  #header .header-actions .bh-social-desktop { gap: 0.12rem !important; }
  #header .header-actions .bh-social-desktop a { width: 33px !important; height: 33px !important; }
  #header #navmenu .rounded-pill { padding-inline: 0.3rem !important; }
  #header #navmenu .nav-link { padding-inline: 0.3rem !important; font-size: 0.94rem; }
  #header .header-actions .language-switcher__toggle { padding-inline: 0.5rem !important; }
  #header .header-actions .search-form { max-width: 155px !important; }
}

/* Small desktops (~1200-1440): language shows flag only to free room. */
@media (min-width: 992px) and (max-width: 1439.98px) {
  #header .header-actions .language-switcher__toggle .language-switcher__label { display: none !important; }
  #header .header-actions .bh-social-desktop a { width: 31px !important; height: 31px !important; }
  #header #navmenu .nav-link { padding-inline: 0.28rem !important; font-size: 0.92rem; }
  #header .header-actions .search-form { max-width: 150px !important; }
}

/* Small tablets/laptops (992-1200, e.g. iPad landscape).
   The base template only styles the desktop menu from 1200px up: below that it
   turns .navmenu ul into an absolutely-positioned overlay and hides it, which
   is what its own hamburger drives. This site, though, shows the desktop
   header row from 992px (Bootstrap's -lg- classes), so between 992 and 1199
   the row appeared with no menu in it at all. Put the horizontal menu back for
   that range, and make room by dropping the social icons (they are also in the
   footer and the mobile menu) so navigation always wins. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Direct child only: the dropdown panels inside are separate lists and must
     keep their own show/hide behaviour. */
  #header #navmenu .rounded-pill > ul {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #header #navmenu .rounded-pill > ul > li > a,
  #header #navmenu .rounded-pill > ul > li > a:focus {
    padding: 6px 7px !important;
    font-size: 0.84rem !important;
    background: none !important;
  }

  /* The template also lays dropdown panels out inline below 1200px (part of its
     accordion-style mobile menu). Left alone, the Projects mega panel sat in
     the row and took ~390px of it. Give it back its normal popup behaviour so
     it only takes space when it is actually open. */
  #header #navmenu .rounded-pill > ul > li > .dropdown-menu {
    display: none !important;
    position: absolute !important;
  }

  #header #navmenu .rounded-pill > ul > li > .dropdown-menu.show {
    display: block !important;
  }

  /* Give the menu first claim on the row: without this both columns shrink
     together and the links get clipped mid-word. */
  #header .flex-grow-1.d-flex.justify-content-center,
  #header #navmenu .rounded-pill { flex-shrink: 0 !important; }

  #header .header-actions .bh-social-desktop { display: none !important; }
  #header .container.d-none.d-lg-block { padding-inline: 0.5rem; }
  #header .container .d-flex.align-items-center.w-100 { gap: 0.3rem !important; }
  #header .header-actions .search-form { max-width: 122px !important; }
}

/* Compact desktops (~1200-1320): a touch tighter still. */
@media (min-width: 992px) and (max-width: 1319.98px) {
  #header .container.d-none.d-lg-block { padding-inline: 0.6rem; }
  #header .container .d-flex.align-items-center.w-100 { gap: 0.35rem !important; }
  #header .header-actions .bh-social-desktop a { width: 28px !important; height: 28px !important; }
  #header .header-actions .bh-social-desktop { gap: 0.05rem !important; }
  #header #navmenu .nav-link { padding-inline: 0.2rem !important; font-size: 0.86rem; }
  #header .header-actions .search-form { max-width: 130px !important; }
}

/* --- Touch targets -------------------------------------------------------
   On phones several controls were far below a comfortable tap size: the
   slider dots are 9px, and inline links sit at ~16-27px tall. These rules
   enlarge the area that responds to a finger without changing how anything
   looks -- the dots keep their size and grow an invisible pad around them,
   and links gain vertical padding only where they are already block-level. */
@media (max-width: 991.98px) {
  /* The dots sit in a track that would clip an overflowing hit area. */
  .swiper-pagination {
    overflow: visible !important;
  }

  .swiper-pagination-bullet {
    position: relative;
  }

  /* Invisible 44px hit area centred on the dot, so a finger does not have to
     land on the 8px dot itself. */
  .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }

  .footer-link,
  .mobile-nav-link {
    display: inline-block;
    min-height: 40px;
    line-height: 1.6;
    padding-block: 7px;
  }

  /* Breadcrumbs and standalone links (contact email/phone/social) sat at
     16-19px tall. They are the only thing on their line, so vertical padding
     enlarges the target without disturbing the text around them. */
  .breadcrumb-item > a,
  p > a:only-child,
  div > a.text-primary:only-child {
    display: inline-block;
    padding-block: 6px;
  }
}

/* Very small phones (~320px, e.g. iPhone SE 1st gen). The logo block and the
   language/search/menu cluster together need about 338px, so the cluster used
   to be cut off at the right edge. Reclaim the difference from padding and
   gaps rather than hiding anything, and keep the 44px tap targets intact. */
@media (max-width: 359.98px) {
  /* Logical properties so the same trim applies on the mirrored Arabic layout. */
  #header .bh-mobile-left { padding-inline-start: 6px !important; padding-inline-end: 0 !important; }
  #header .bh-mobile-bar { padding-inline-end: 6px !important; padding-inline-start: 0 !important; }
  #header .bh-mobile-right { gap: 1px !important; }
  #header .mobile-language-switcher__toggle { padding-inline: 0.25rem !important; gap: 0.15rem !important; }
  #header .bh-logo-word { margin-inline-start: 3px !important; }
  #header .bh-mobile-logo { max-height: 40px !important; }
  #header .bh-logo-word-name { font-size: 0.85rem !important; letter-spacing: 0 !important; }
  #header .bh-logo-word-sub { font-size: 0.5rem !important; letter-spacing: 0.04em !important; }
  /* Flag only, no language name — the Arabic label is wider and pushed the
     menu button off the edge on the narrowest phones. */
  #header .mobile-language-switcher__toggle .text-uppercase { display: none !important; }
}

/* Mobile header height/overflow fixes */
@media (max-width: 991.98px) {
  #header.header {
    padding: 6px 0 !important;
  }

  #header .mobile-nav-anchor .container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #header .mobile-header {
    min-height: 0 !important;
  }

  #header .logo img {
    height: auto !important;
    max-height: 52px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  

  #header .navbar-toggler {
    padding: 0.25rem 0.35rem !important;
  }
}

/* Mobile header button/icon alignment */
@media (max-width: 991.98px) {
  #header .navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header .navbar-toggler i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  #header .mobile-social-row .bh-social-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    background: #fff !important;
  }

  #header .mobile-header { gap: 10px !important; }
  #header .mobile-social-row { gap: 8px !important; }
}

/* Mobile header polish (tablet + mobile) */
@media (max-width: 1199.98px) {
  #header {
    padding: 6px 0 !important;
  }

  #header .mobile-nav-anchor > .container {
    padding: 8px 12px !important;
  }

  #header .mobile-header {
    gap: 10px !important;
    align-items: center !important;
  }

  #header .mobile-header .logo {
    display: flex !important;
    align-items: center !important;
  }

  #header .logo img {
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #header .mobile-social-row {
    gap: 8px !important;
  }

  #header .bh-social-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  #header .bh-social-icon:hover,
  #header .bh-social-icon:active {
    transform: scale(0.96);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.1) !important;
  }

  #header .navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  #header .navbar-toggler .bi-list {
    font-size: 22px !important;
    line-height: 1 !important;
    color: #0f172a !important;
  }

  #header .navbar-toggler:hover,
  #header .navbar-toggler:active {
    transform: scale(0.96);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.1) !important;
  }

  .floating-menu-btn {
    position: fixed;
    top: 14px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    z-index: 1200;
  }

  .floating-menu-btn i {
    font-size: 22px;
    line-height: 1;
    color: #0f172a;
  }

  .floating-menu-btn:hover,
  .floating-menu-btn:active {
    transform: scale(0.96);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.1);
  }

  /* Micro-presence + scroll-aware tweaks */
  #header {
    transition: padding 220ms ease;
  }

  #header .mobile-header {
    align-items: center !important;
  }

  #header .logo img {
    transition: transform 220ms ease, opacity 200ms ease;
    transform-origin: left center;
    will-change: transform;
  }

  #header .logo img.bh-logo-reveal {
    animation: bhLogoReveal 200ms ease-out;
  }

  #header.bh-mobile-compact {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  #header.bh-mobile-compact .logo img {
    transform: scale(0.94);
  }

  @keyframes bhLogoReveal {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }
}

/* Desktop guard for header logo + hide floating mobile trigger */
@media (min-width: 992px) {
  .header .top-row .logo img,
  #header .mobile-header .logo img {
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .floating-menu-btn {
    display: none !important;
  }
}

/* Global spacing optimization */
@media (min-width: 992px) {
  section,
  .section,
  .section-wrapper,
  .content-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  section,
  .section,
  .section-wrapper,
  .content-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

body {
  background: var(--bh-soft);
  color: var(--bh-body);
  font-family: 'Poppins', 'Nunito', 'Roboto', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

a,
a:hover {
  color: var(--bh-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bh-ink);
  font-weight: 800;
  line-height: 1.2;
}

p {
  color: var(--bh-body);
}

.main {
  padding-bottom: 40px;
}

.page-title {
  padding: 40px 28px 26px;
  margin: 0 0 26px;
  background: var(--bh-page-intro-surface);
  border-radius: 24px;
  border: 1px solid var(--bh-border);
  box-shadow: var(--bh-shadow-soft);
}

.page-intro-surface {
  background: var(--bh-page-intro-surface);
}

.page-title .title-wrapper h1 {
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.page-title .title-wrapper p {
  color: var(--bh-muted);
  margin-top: 6px;
  max-width: 840px;
}

@media (max-width: 768px) {
  .page-title {
    padding: 22px 18px 16px;
    margin-bottom: 16px;
  }

  .page-title .breadcrumbs {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-bottom: 6px;
  }

  .page-title .breadcrumbs .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
  }

  .page-title .title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .page-title .title-wrapper h1 {
    font-size: clamp(26px, 5vw, 30px);
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .page-title .title-wrapper p {
    font-size: 0.95rem;
    line-height: 1.45;
    margin-top: 0;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --------------------------------------------------------------------
   Page header — a slim breadcrumb strip
   Shared by every inner page through the <x-page-intro> component. The
   page title/description still render (see the component: every page
   needs exactly one <h1> for SEO/screen readers) but are visually
   hidden — the breadcrumb already says where you are, so the band
   stays a thin strip instead of a tall title card. Any $meta/$actions
   slot content (author/date badges, the "Write a Blog" button, ...)
   still shows normally underneath.
   -------------------------------------------------------------------- */

.page-hero {
  padding: 12px 0;
}

.page-hero-card.page-intro-surface {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
  border-radius: 16px;
  background:
    radial-gradient(140% 260% at 100% -60%, rgba(13, 98, 176, 0.1), transparent 65%),
    var(--bh-page-intro-surface);
  border: 1px solid rgba(13, 98, 176, 0.1);
  box-shadow: 0 10px 22px -16px rgba(9, 43, 91, 0.3);
  overflow: hidden;
  text-align: center;
}

.page-hero-card.page-intro-surface::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0a4a82, #0d62b0 40%, #5fa5f0 75%, #b7d8fb);
}

.page-hero-intro {
  width: 100%;
}

.page-intro-inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.page-intro-inner.text-start {
  text-align: start;
}

.page-intro-inner.text-end {
  text-align: end;
}

.page-intro-description {
  max-width: 700px;
  margin-inline: auto;
}

.page-intro-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

/* Breadcrumb — a quiet pill row, current page picked out in brand blue */
.breadcrumbs {
  margin-bottom: 0.4rem;
}

.breadcrumbs .breadcrumb {
  --bs-breadcrumb-divider: "•";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(13, 98, 176, 0.06);
}

.page-intro-inner.text-start .breadcrumbs .breadcrumb,
.page-intro-inner.text-end .breadcrumbs .breadcrumb {
  justify-content: flex-start;
}

.breadcrumbs .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--bh-muted);
}

.breadcrumbs .breadcrumb-item + .breadcrumb-item {
  padding-inline-start: 0.3rem;
}

.breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  padding-inline-end: 0.3rem;
  color: rgba(13, 98, 176, 0.4);
  font-size: 0.7rem;
}

.breadcrumbs .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--bh-muted);
  text-decoration: none;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.breadcrumbs .breadcrumb-item a:hover {
  color: var(--bh-primary);
  background: rgba(13, 98, 176, 0.1);
}

.breadcrumbs .breadcrumb-item a i {
  font-size: 0.85rem;
  color: var(--bh-primary);
}

.breadcrumbs .breadcrumb-item.active {
  color: var(--bh-primary-dark);
  font-weight: 700;
}

/* $meta slot content (e.g. the blog-submit badge) — the title above it is
   visually hidden and out of flow, so on the few pages that pass a meta
   slot this is the first thing that actually renders; give the wrapper
   top padding only then, so pages with nothing visible here stay flush. */
.title-wrapper:has(> :not(.visually-hidden)) {
  padding-top: 0.4rem;
}

@media (max-width: 767.98px) {
  .page-hero {
    padding: 8px 0;
  }

  .page-hero-card.page-intro-surface {
    padding: 10px 16px;
    border-radius: 14px;
  }

  .page-intro-inner,
  .page-intro-inner.text-start,
  .page-intro-inner.text-end {
    text-align: start !important;
  }

  .breadcrumbs .breadcrumb {
    justify-content: flex-start;
    padding: 0.25rem 0.55rem;
  }

  .breadcrumbs .breadcrumb-item {
    font-size: 0.72rem;
  }
}

/* The Blogs and Write-a-Blog pages carry their redesigned styles in their
   own blade files; the old hero/spacing overrides that lived here are gone
   with the markup that used them. */

.section {
  padding: 2.5rem 0;
}

.section.light-background {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border-top: 1px solid #e7eef8;
}

.section-title {
  margin-bottom: 28px;
  text-align: center;
}

.section-title h2 {
  display: inline-flex;
  position: relative;
  padding-bottom: 10px;
}

.section-title h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bh-accent), rgba(13, 98, 176, 0.18));
}

.section-title > div {
  color: var(--bh-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-title .description-title {
  color: var(--bh-primary);
  font-weight: 700;
}

.media-frame {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef4ff, #f8fbff);
}

/* Hero image container – keep the same rounded box but show full logo inside */
.bh-hero-media-card {
  position: relative;
  border-radius: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  padding: 0;
  display: block;
}

/* Make sure the logo always fits completely inside the box */
.bh-hero-media-card .hero-main-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 14px;
  display: block;
}

@media (max-width: 575.98px) {
  #header.bh-mobile-sticky .mobile-nav-anchor .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Premium mobile header: sticky + shrink on scroll */
  .bh-mobile-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: #ffffff;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: 8px;
    min-height: 82px;
    height: auto;
    max-height: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: min-height 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .bh-mobile-header.is-scrolled {
    min-height: 82px;
    height: auto;
    max-height: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }

  .bh-mobile-header .bh-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    min-width: 0;
    flex: 0 0 auto;
  }

  .bh-mobile-header .logo,
  .bh-mobile-header .navbar-brand {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    margin-right: auto;
    align-items: center;
  }

  .bh-mobile-header .bh-mobile-logo {
    width: auto;
    height: 54px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
  }

  .bh-mobile-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
    justify-content: flex-end;
    margin-left: auto;
  }

  .bh-mobile-header .header-actions .mobile-search-btn,
  .bh-mobile-header .header-actions .navbar-toggler {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0;
  }

  .bh-mobile-header .header-actions .mobile-search-btn i,
  .bh-mobile-header .header-actions .navbar-toggler i {
    font-size: 20px;
    line-height: 1;
  }

  body {
    scroll-padding-top: 92px;
  }
}

#hero .bh-hero-media-card {
  width: min(599px, 100%);
  max-width: 599px;
  border-radius: 18px;
  overflow: hidden;
}

#hero .hero-visual {
  display: inline-block;
  padding: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(13, 110, 253, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#hero .hero-visual .media-frame {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
}

#hero .hero-visual .ratio {
  --bs-aspect-ratio: 0;
  background: transparent !important;
}

#hero .hero-visual .ratio::before {
  padding-top: 0 !important;
}

#hero .hero-visual .ratio > * {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

#hero .hero-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 18px;
}

.breadcrumb {
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--bh-primary);
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--bh-muted);
}

.section-badge {
  background: #e0f2ff;
  color: var(--bh-primary-dark);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.accent-chip {
  background: var(--bh-accent-soft);
  color: #0b3e75;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.9rem;
}

.soft-bar {
  background: #f9fbff;
  border: 1px solid #e5eefc;
  border-radius: 16px;
  padding: 10px 16px;
}

.soft-hero {
  background: radial-gradient(circle at 12% 18%, rgba(13, 98, 176, 0.05), transparent 35%),
              radial-gradient(circle at 78% 10%, rgba(13, 98, 176, 0.08), transparent 30%),
              #fff;
  border: 1px solid var(--bh-border);
  box-shadow: var(--bh-shadow-soft);
}

/* Full soft uniform white + light blue background for HERO section */
.bh-hero-section {
    background: linear-gradient(
        180deg,
        rgb(209, 221, 245) 0%,
        rgb(216, 230, 245) 0%,
        rgb(209, 232, 241) 100%
    ) !important;

    border-radius: 32px;
    padding: 40px 30px;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* Ensure internal elements remain unaffected */
.bh-hero-section .container,
.bh-hero-section .row {
  background: transparent !important;
}

.bh-hero-section .btn-primary {
  background: var(--bh-primary) !important;
  border-color: var(--bh-primary) !important;
  box-shadow: 0 8px 20px rgba(13, 98, 176, 0.2) !important;
}

.bh-hero-section .section-badge {
  background: #e0f2ff !important;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--bh-muted);
}

.shadow-soft {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.btn {
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--bh-primary);
  border-color: var(--bh-primary);
  box-shadow: 0 8px 20px rgba(13, 98, 176, 0.2);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--bh-primary-dark);
  border-color: var(--bh-primary-dark);
}

.btn-outline-primary {
  color: var(--bh-primary);
  border-color: var(--bh-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--bh-primary);
  color: #fff;
  box-shadow: 0 10px 26px rgba(13, 98, 176, 0.16);
}

.btn-danger,
.btn-success {
  background: var(--bh-accent);
  border-color: var(--bh-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(13, 98, 176, 0.24);
}

.btn-danger:hover,
.btn-success:hover,
.btn-danger:focus,
.btn-success:focus {
  background: #0a4d8c;
  border-color: #0a4d8c;
}

.btn-link {
  color: var(--bh-primary);
  font-weight: 700;
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--bh-primary-dark);
  text-decoration: underline;
}

/* Approach cards */
.intro-blurb .approach-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fbff;
  border: 1px solid #e3ebf5;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 75, 135, 0.06);
  transition: all 0.2s ease-in-out;
  margin-bottom: 6px;
}

.intro-blurb .approach-card:hover {
  background: #ffffff;
  border-color: #d2e0f2;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 75, 135, 0.08);
}

.intro-blurb .approach-card .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dbe9ff, #bcd4ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #003e7e;
  font-size: 18px;
}

.intro-blurb .approach-card .text-wrap h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0c2d48;
}

.intro-blurb .approach-card .text-wrap p {
  margin: 0;
  margin-top: -2px;
  font-size: 12px;
  color: #6a7a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .intro-blurb .approach-card .text-wrap p {
    font-size: 11px !important;
  }
}

@media (min-width: 992px) {
  .intro-blurb .approach-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .intro-blurb .approach-stack > p {
    grid-column: 1 / -1;
    margin-bottom: 12px;
    text-align: center;
  }

  .intro-blurb .approach-stack .approach-card {
    margin-bottom: 0;
  }
}

.text-muted {
  color: var(--bh-muted) !important;
}

.form-control,
textarea {
  border-radius: 12px;
  border-color: var(--bh-border);
  padding: 0.65rem 0.85rem;
  color: var(--bh-body);
  background-color: #fff;
}

.form-control:focus,
textarea:focus {
  border-color: var(--bh-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 98, 176, 0.12);
}

label {
  color: var(--bh-muted);
}

.badge {
  border-radius: 999px;
}

.card {
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius);
  background: var(--bh-surface);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card.border-0 {
  border: 1px solid var(--bh-border);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bh-shadow);
  border-color: rgba(13, 98, 176, 0.18);
}

/* Team cards layout */
/* About team: formal profile cards — avatar + identity header, bio
   under a divider, social chips at the bottom. */
/* --------------------------------------------------------------------
   Team sections (About page) — header + profile cards
   Kicker chip, gradient-underlined heading, cards with a gradient-ring
   avatar and a role chip. The field team keeps the same shapes with a
   navy identity so the two groups read differently at a glance.
   -------------------------------------------------------------------- */

.bh-team-head {
  max-width: 660px;
  margin: 0 auto 34px;
  text-align: center;
}

.bh-team-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  background: var(--bh-accent-soft);
  color: var(--bh-primary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

[dir="rtl"] .bh-team-kicker {
  letter-spacing: 0;
}

.bh-team-kicker--field {
  background: #0b1c31;
  color: #cfe4ff;
}

.bh-team-heading {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--bh-ink);
  margin-bottom: 0.55rem;
}

.bh-team-heading::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #2f7be6, #7db4f5);
}

.bh-team-sub {
  color: var(--bh-muted);
  font-size: 0.98rem;
  margin: 0;
}

.bh-team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 26px;
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(13, 98, 176, 0.06), transparent 55%),
    #ffffff;
  border: 1px solid rgba(13, 98, 176, 0.1);
  border-radius: 22px;
  box-shadow: 0 18px 40px -24px rgba(9, 43, 91, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
}

[dir="rtl"] .bh-team-card {
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(13, 98, 176, 0.06), transparent 55%),
    #ffffff;
}

/* Gradient top edge appears on hover */
.bh-team-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0a4a82, #2f7be6 55%, #b7d8fb);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.bh-team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 52px -24px rgba(13, 98, 176, 0.45);
  border-color: rgba(13, 98, 176, 0.25);
}

.bh-team-card:hover::before {
  opacity: 1;
}

.bh-team-top {
  display: flex;
  align-items: center;
  gap: 18px;
}

.bh-team-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0d62b0, #7db4f5);
  box-shadow: 0 10px 22px -10px rgba(13, 98, 176, 0.55);
}

.bh-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: #eef2f7;
}

.bh-team-id {
  min-width: 0;
  text-align: start;
}

.bh-team-name {
  margin: 0 0 7px;
  font-size: 1.12rem;
  font-weight: 800;
  color: #101828;
  line-height: 1.3;
}

.bh-team-role {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: var(--bh-accent-soft);
  color: var(--bh-primary);
  font-weight: 700;
  font-size: 0.78rem;
}

.bh-team-bio {
  margin: 0;
  padding-top: 13px;
  border-top: 1px dashed var(--bh-border);
  color: #5a6a7c;
  font-size: 0.9rem;
  line-height: 1.75;
  text-align: start;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.bh-team-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.bh-team-links a {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 98, 176, 0.06);
  border: 1px solid rgba(13, 98, 176, 0.16);
  color: #0d62b0;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bh-team-links a:hover {
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px -8px rgba(13, 98, 176, 0.7);
}

/* Field team — navy identity for the on-the-ground group */
#field-team.section {
  background: linear-gradient(180deg, #f6faff 0%, #ffffff 55%);
  border-top: 1px solid #e7eef8;
}

#field-team .bh-team-avatar {
  background: linear-gradient(135deg, #0b1c31, #35547e);
  box-shadow: 0 10px 22px -10px rgba(11, 28, 49, 0.6);
}

#field-team .bh-team-role {
  background: #0b1c31;
  color: #cfe4ff;
}

#field-team .bh-team-card::before {
  background: linear-gradient(90deg, #0b1c31, #35547e 55%, #7d9cc7);
}

@media (max-width: 767.98px) {
  .bh-team-head {
    margin-bottom: 24px;
  }

  .bh-team-card {
    padding: 18px;
    gap: 12px;
    border-radius: 18px;
  }

  .bh-team-avatar {
    width: 78px;
    height: 78px;
  }

  .bh-team-name {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  .bh-team-role {
    font-size: 0.73rem;
  }

  .bh-team-bio {
    font-size: 0.86rem;
    line-height: 1.65;
  }
}

/* Header & nav */
.header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bh-border);
  box-shadow: 0 12px 30px rgba(13, 98, 176, 0.06);
  z-index: 1200;
}

.navmenu a {
  font-weight: 600;
  color: var(--bh-body);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  box-shadow: none;
}

.navmenu a.active,
.navmenu a:hover {
  color: var(--bh-primary);
  background: #f2f6fb;
  border-color: #e1e8f2;
}

.navmenu .dropdown ul {
  border: 1px solid var(--bh-border);
  box-shadow: var(--bh-shadow-soft);
  border-radius: 16px;
}

.navmenu .nav-badge {
  background: var(--bh-accent-soft);
  color: #0b3e75;
}

/* Projects mega menu */
.projects-mega-parent {
  position: static;
}

.projects-dropdown {
  --projects-menu-radius: 18px;
  width: min(680px, calc(100vw - 32px));
  min-width: min(560px, calc(100vw - 2rem));
  max-height: 420px;
  left: 50% !important;
  top: calc(100% + 10px);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  display: block;
  border-radius: var(--projects-menu-radius);
  background: #ffffff;
  border: 1px solid var(--bh-border);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16), 0 8px 18px rgba(15, 23, 42, 0.08);
  filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.08));
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1200;
}

.projects-mega-parent.is-open .projects-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.projects-mega-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  max-height: 360px;
}

.projects-mega-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.projects-section-title {
  letter-spacing: 0.06em;
}

.projects-list,
.projects-featured {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.projects-list::-webkit-scrollbar,
.projects-featured::-webkit-scrollbar {
  width: 8px;
}

.projects-list::-webkit-scrollbar-thumb,
.projects-featured::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.14);
  border-radius: 999px;
}

.projects-list::-webkit-scrollbar-track,
.projects-featured::-webkit-scrollbar-track {
  background: transparent;
}

.projects-link,
.projects-featured-item {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.projects-link:hover,
.projects-link:focus-visible,
.projects-featured-item:hover,
.projects-featured-item:focus-visible {
  background: #f6f9ff;
  border-color: #e1e8f2;
  transform: translateY(-1px);
  outline: none;
}

.projects-link.is-active {
  background: #f2f6fb;
  border-color: #d7e3f3;
  box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.16);
}

.projects-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 107, 255, 0.08);
  color: var(--bh-primary);
  flex-shrink: 0;
}

.projects-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.projects-link-title {
  display: block;
  font-weight: 700;
  color: var(--bh-body);
}

.projects-link-subtle {
  display: block;
  color: #6b7280;
}

.projects-count {
  margin-left: auto;
  min-width: 32px;
  height: 24px;
  border-radius: 999px;
  background: #eef2f8;
  color: #2f6bff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.projects-featured-item {
  align-items: center;
}

.projects-thumb {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f6fb;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}

.projects-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.projects-featured-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.projects-featured-title {
  display: block;
  font-weight: 700;
  color: var(--bh-body);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projects-featured-subtitle {
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projects-empty {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed #e5e7eb;
  background: #f8fafc;
}

.projects-mega-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--bh-border);
  background: linear-gradient(180deg, #f9fbff 0%, #f5f7fb 100%);
  border-radius: 0 0 var(--projects-menu-radius) var(--projects-menu-radius);
}

.projects-toggle i {
  transition: transform 0.2s ease;
}

.projects-mega-parent.is-open .projects-toggle i {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

@media (min-width: 1200px) {
  .projects-mega-parent:hover .projects-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 1399.98px) {
  .projects-dropdown {
    min-width: 520px;
  }
}

@media (max-width: 1199.98px) {
  .projects-dropdown {
    width: 100%;
    min-width: 0;
    max-width: none;
    position: static;
    transform: none;
    box-shadow: none;
    border: 1px solid var(--bh-border);
  }
}

.search-form {
  --search-icon-size: 20px;
  --search-icon-offset: 0.65rem;
  --search-icon-gap: 0.2rem;
  flex: 0 0 auto;
  width: auto;
}

.search-form .search-input-wrap {
  flex: 0 0 auto;
  position: relative;
}

.search-form input {
  border-radius: 14px;
  padding: 0.35rem calc(var(--search-icon-size) + var(--search-icon-offset) + var(--search-icon-gap)) 0.35rem 0.85rem;
  width: clamp(110px, 9vw, 180px);
  min-width: 110px;
  max-width: 180px;
  min-height: 34px;
  border-width: 1px;
  border-color: rgba(15, 23, 42, 0.1);
  transition: width 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-form input:focus {
  width: clamp(140px, 12vw, 200px);
  max-width: 200px;
}

.search-form .search-submit-btn {
  position: absolute;
  right: var(--search-icon-offset);
  top: 50%;
  transform: translateY(-50%);
  width: var(--search-icon-size);
  height: var(--search-icon-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-muted);
  opacity: 0.55;
  z-index: 2;
  transition: color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.search-form .search-submit-btn i {
  font-size: 0.7rem;
  line-height: 1;
}

.search-form .search-submit-btn:hover {
  color: var(--bh-primary);
  opacity: 1;
}

.search-form .search-submit-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(13, 98, 176, 0.2);
  opacity: 1;
}

/* Mobile navigation overlay */
.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex !important;
  }

  .md\:hidden {
    display: none !important;
  }
}

body.mobile-menu-open {
  overflow: hidden;
}

.header-actions {
  gap: 12px;
}

@media (max-width: 991.98px) {
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.mobile-menu-trigger {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--bh-ink);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mobile-menu-trigger:hover,
.mobile-menu-trigger:focus {
  transform: translateY(-1px);
  border-color: #dfe7f3;
  box-shadow: 0 14px 30px rgba(13, 98, 176, 0.16);
}

.floating-menu-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1200;
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.floating-back-top {
  position: fixed;
  bottom: 16px;
  right: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #2f6bff;
  background: linear-gradient(135deg, #2f6bff, #5fa8ff);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 32px rgba(47, 107, 255, 0.28);
  z-index: 1190;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.floating-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.floating-back-top i {
  font-size: 1.6rem;
}

.floating-back-top:hover,
.floating-back-top:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.floating-back-top.is-visible:hover,
.floating-back-top.is-visible:focus {
  transform: translateY(-1px);
}

/* Mobile nav polish */
@media (max-width: 1199.98px) {
  body.mobile-nav-active {
    overflow: auto !important;
    touch-action: auto !important;
  }

  body.mobile-nav-active .bh-nav-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.mobile-nav-active .navmenu {
    position: static;
    inset: auto;
    background: transparent !important;
    pointer-events: auto;
    z-index: auto;
  }

  body.mobile-nav-active .navmenu::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.mobile-nav-active .navmenu > ul {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    transform-origin: unset;
    transition: none;
    display: block !important;
    pointer-events: auto;
    z-index: auto;
    filter: none !important;
  }

  body.mobile-nav-active .navmenu ul li {
    list-style: none;
    margin-bottom: 0;
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.mobile-nav-active .navmenu ul li:last-child {
    margin-bottom: 0;
  }

  body.mobile-nav-active .navmenu a,
  body.mobile-nav-active .navmenu a:focus {
    display: inline-flex;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--nav-color, inherit);
    font-weight: 600;
    transition: none;
  }

  body.mobile-nav-active .navmenu a:hover,
  body.mobile-nav-active .navmenu a:focus:hover {
    background: transparent;
    border-color: transparent;
    color: var(--nav-color, inherit);
  }

  body.mobile-nav-active .navmenu .active,
  body.mobile-nav-active .navmenu .active:focus {
    background: transparent;
    border-color: transparent;
    color: var(--nav-color, inherit);
  }

  .mobile-nav-toggle,
  [data-mobile-menu-open] {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 150ms ease, box-shadow 150ms ease;
  }

  .mobile-nav-toggle:hover,
  [data-mobile-menu-open]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(13, 98, 176, 0.16) !important;
  }

  .mobile-nav-toggle i,
  [data-mobile-menu-open] i {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* Mobile logo guard */
  .header .top-row .logo,
  #header .mobile-header .logo {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    max-width: 190px;
    overflow: visible !important;
  }

  .header .top-row .logo img,
  #header .mobile-header .logo img {
    width: auto !important;
    height: auto !important;
    max-height: 46px !important;
    max-width: 160px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

@media (max-width: 575.98px) {
  #header,
  #header.header,
  #header.bh-mobile-sticky {
    min-height: 85px !important;
    height: 85px !important;
    max-height: 85px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #header .mobile-nav-anchor > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #header .mobile-header {
    min-height: 85px !important;
    height: 85px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #header .bh-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  #header .bh-mobile-logo {
    width: auto !important;
    height: 48px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #header .mobile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  #header .mobile-actions .mobile-search-btn,
  #header .mobile-actions .navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding: 0 !important;
  }

  #header .mobile-actions .mobile-search-btn i,
  #header .mobile-actions .navbar-toggler i {
    font-size: 20px !important;
    line-height: 1 !important;
  }
}

#scroll-top {
  --bh-scroll-btn-duration: 200ms;
  --stroke-opacity: 0.15;
  position: fixed;
  width: 44px;
  height: 44px;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 8px 18px rgba(13, 98, 176, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bh-scroll-btn-duration) ease-out;
}

#scroll-top .bi {
  font-size: 24px;
  position: relative;
  z-index: 1;
}

#scroll-top::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(13, 98, 176, var(--stroke-opacity));
  pointer-events: none;
  transition: opacity 200ms ease-out, border-color 200ms ease-out;
}

#scroll-top.active {
  opacity: 1;
  visibility: visible;
}

#scroll-top:focus,
#scroll-top:focus-visible {
  outline: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  #scroll-top {
    transition: none;
  }

  #scroll-top::after {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  #scroll-top {
    width: 40px;
    height: 40px;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
  }

  #scroll-top::after {
    inset: 2px;
  }
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  z-index: 1040;
}

.mobile-nav-overlay.is-open {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mobile-nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 12px;
  right: 12px;
  z-index: 1050;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 72vh;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mobile-nav-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: var(--bh-body);
  font-size: 1.5rem;
  padding: 6px;
  border-radius: 50%;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.mobile-nav-close:hover,
.mobile-nav-close:focus {
  background: #f2f6fb;
  color: var(--bh-primary);
}

.mobile-header .bh-social-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #dce6f4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1b3f8b;
  font-size: 14px;
  transition: 0.15s ease;
}

.mobile-header .bh-social-icon:hover {
  background: #2f6bff;
  color: #ffffff;
  border-color: #2f6bff;
}

@media (min-width: 992px) {
  .mobile-header .bh-social-icon {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .mobile-header .mobile-social-row {
    display: flex;
    align-items: center;
    gap: 4px !important;
  }

  .mobile-header .mobile-social-row .bh-social-icon {
    width: 32px;
    height: 32px;
  }

  .mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
  }

  .mobile-header .logo,
  .mobile-header .mobile-social-row,
  .mobile-header .navbar-toggler {
    display: flex;
    align-items: center !important;
  }

  .mobile-header .mobile-social-row .bh-social-icon,
  .mobile-header .navbar-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-header .navbar-toggler {
    margin-left: 10px !important;
  }
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
  overflow-y: auto;
}

.mobile-nav-link,
.mobile-submenu-link,
.mobile-nav-accordion {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--bh-body);
  padding: 12px 6px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.15s ease;
}

.mobile-nav-link:hover,
.mobile-submenu-link:hover,
.mobile-nav-accordion:hover {
  color: var(--bh-primary);
  background: #f4f7fb;
}

.mobile-nav-link.is-active,
.mobile-submenu-link.is-active {
  color: var(--bh-primary);
}

.mobile-nav-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bh-border);
}

.mobile-nav-accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-accordion i {
  transition: transform 0.18s ease;
}

.mobile-nav-accordion[aria-expanded="true"] i {
  transform: rotate(180deg);
  color: var(--bh-primary);
}

.mobile-submenu {
  display: grid;
  gap: 6px;
  padding: 6px 0 4px 12px;
  border-left: 2px solid var(--bh-border);
  margin-left: 4px;
}

/* Header refinements */
@media (max-width: 991.98px) {
  .bh-mobile-sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  }
}

@media (min-width: 992px) {
  .bh-mobile-sticky {
    position: static;
    background: #fff;
    backdrop-filter: none;
    box-shadow: none;
  }

  .bh-social-desktop a {
    margin-right: 4px !important;
  }

  .bh-social-desktop a:last-child {
    margin-right: 0 !important;
  }
}

.header .nav-wrap {
  background: transparent !important;
  margin-top: 0;
  padding-top: 6px;
  padding-bottom: 10px;
}

.mobile-nav-link.is-active,
.mobile-nav-link.is-active:hover,
.mobile-nav-link:hover {
  color: var(--bh-primary);
}

/* Footer */
.footer {
  background: #eaf4ff;
  color: #001a33;
  border-top: 1px solid #c8dff7;
  padding: 52px 0 28px;
}

.footer a {
  color: #002a55;
}

.footer a:hover {
  color: #003366;
}

.footer .footer-top {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.footer .logo img {
  filter: drop-shadow(0 6px 14px rgba(0, 51, 102, 0.12));
}

.footer .footer-links h4,
.footer h4 {
  color: #003366;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.footer .footer-links ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.footer .footer-links a {
  color: #004a80;
  font-weight: 600;
}

.footer .footer-links a:hover {
  color: #003366;
}

.footer .footer-text {
  color: #0b2545;
}

.footer .footer-link {
  color: #004a80;
  font-weight: 600;
}

.footer .footer-link:hover {
  color: #003366;
}

.footer .form-control {
  background: #fff;
  border: 1px solid #9cc7ff;
  color: #001a33;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 4px 12px rgba(0, 112, 255, 0.12);
}

.footer .form-control:focus {
  border-color: #0c66c2;
  box-shadow: 0 0 0 0.18rem rgba(12, 102, 194, 0.18);
}

.footer .footer-input-row {
  align-items: stretch;
}

.footer .footer-input-row input[type="email"] {
  flex: 1 1 70%;
  min-width: 0;
}

.footer .btn-primary,
.footer .subscribe-btn {
  background: linear-gradient(135deg, #007bff, #0056d1);
  border: none;
  color: #fff;
  padding: 0.72rem 1.05rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 112, 255, 0.25);
  font-weight: 700;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  flex: 0 0 auto;
}

.footer .btn-primary:hover,
.footer .subscribe-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 14px rgba(0, 112, 255, 0.28);
}

.footer .social-link {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #003366;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.15s ease, filter 0.15s ease, color 0.15s ease;
  padding: 2px;
}

.footer .social-link .bi {
  font-size: 1.2rem;
}

.footer .social-link:hover {
  transform: scale(1.1);
  color: #0c66c2;
  filter: brightness(1.05);
}

.footer .social-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.footer .footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(0, 60, 120, 0.25);
  margin-top: 28px;
}

/* Responsive layout system */
@media (max-width: 1024px) {
  .header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .header-search {
    order: 3;
    width: 100%;
    min-width: 0;
  }

  .header-social {
    order: 2;
  }

  .top-row {
    gap: 0.75rem;
  }

  .nav-wrap {
    padding-inline: clamp(1rem, 3vw, 1.5rem);
  }

  .page-title {
    border-radius: 18px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: clamp(15px, 4vw, 16px);
  }

  .main {
    padding-bottom: 48px;
  }

  .top-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    align-items: flex-start;
    gap: 10px;
  }

  .header-social {
    gap: 8px;
  }

  .header-search {
    padding: 8px;
    box-shadow: 0 6px 16px rgba(13, 98, 176, 0.08);
  }

  .navmenu ul {
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .section {
    padding: clamp(32px, 8vw, 48px) 0;
  }

  .section-title {
    margin-bottom: 20px;
  }

  .section-title h2::after,
  .section-title-left h2::after {
    width: 52px;
  }

  .footer .footer-top .row {
    row-gap: 18px;
  }
}

@media (min-width: 992px) {
  /* Desktop-only pill styling */
  .navmenu {
    display: block !important;
  }

  .mobile-nav-bar {
    display: none !important;
  }

  .navmenu ul {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.85rem;
  }

  .navmenu > div > ul > li > a.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    min-height: 36px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bh-body);
    box-shadow: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }

  .navmenu > div > ul > li > a.nav-link:hover {
    background: rgba(13, 98, 176, 0.06);
    border-color: rgba(13, 98, 176, 0.18);
    color: var(--bh-primary);
    text-decoration: none;
    box-shadow: none;
    transform: none;
  }

  .navmenu > div > ul > li > a.nav-link.active {
    background: linear-gradient(135deg, #fafdff, #eef5ff);
    border-color: rgba(13, 98, 176, 0.35);
    font-weight: 700;
    color: var(--bh-primary);
    box-shadow: none;
  }
}
.footer .footer-inspiration {
  color: #003366;
  font-style: italic;
  font-size: 0.9rem;
}

.footer .footer-bar {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #5c728a;
  gap: 2px;
}

.footer-copy {
  font-size: 14px;
  color: #444f63;
}

.bh-bold {
  font-weight: 800;
  color: #111827;
}

.footer-designed-by {
  font-size: 13px;
  color: #5b677c;
}

.bh-designer-link {
  color: #1f5dff !important;
  font-weight: 700;
  transition: 0.2s ease;
}

.bh-designer-link:hover {
  text-decoration: underline;
  color: #1244cc !important;
}

/* The footer's design lives in the "Footer — navy identity redesign"
   section at the end of this file. */

@media (max-width: 991.98px) {
  #scroll-top {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #2f7be6;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(11, 59, 143, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    transform: scale(0.96);
    transition: opacity var(--bh-scroll-btn-duration) ease-out,
      transform var(--bh-scroll-btn-duration) ease-out;
  }

  #scroll-top.active {
    transform: scale(1);
  }

  #scroll-top:hover,
  #scroll-top:active {
    background-color: #256cdb;
  }
}

.hero-immersive {
  background: #ffffff !important;
}

.category-page .page-title {
  background: linear-gradient(
    135deg,
    #eef5ff 0%,
    #f9fbff 35%,
    #ffffff 100%
  ) !important;
}

/* Blog / story cards */
.blog-card,
.donate-card,
.project-card {
  border: 1px solid var(--bh-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--bh-shadow-soft);
  overflow: hidden;
}

.blog-card:hover,
.donate-card:hover,
.project-card:hover {
  box-shadow: var(--bh-shadow);
}

.blog-card-title a,
.project-card-title-link {
  color: var(--bh-ink);
  text-decoration: none;
}

.blog-card-title a:hover,
.project-card-title-link:hover {
  color: var(--bh-primary);
}

.blog-card-badge,
.project-badge {
  background: #e5f1ff;
  color: #0b3e75;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px;
}

.blog-card-excerpt,
.project-card-text {
  color: var(--bh-muted);
}

/* Latest Stories (From the Blog) – horizontal blog cards */
.latest-blogs .blog-card {
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--bh-shadow-soft);
  border: 1px solid var(--bh-border);
}

.latest-blogs .blog-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 18px 12px;
}

.latest-blogs .blog-thumb {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.latest-blogs .blog-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.latest-blogs .story-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.latest-blogs .story-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.latest-blogs .story-excerpt {
  font-size: 0.85rem;
  line-height: 1.35;
  color: #6b7280;
  margin-bottom: 2px;
}

.latest-blogs .story-divider {
  border: 0;
  border-top: 1px solid var(--bh-border);
  margin: 8px 0;
}

.latest-blogs .story-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid transparent;
  padding-top: 4px;
  padding-bottom: 2px;
  margin-top: 2px;
}

.latest-blogs .story-avatar {
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  box-shadow: 0 6px 15px rgba(15, 23, 42, 0.16);
}

.latest-blogs .story-author {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
}

.latest-blogs .story-date {
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1.2;
  white-space: nowrap;
}

.latest-blogs .read-blog-link {
  color: #2563eb;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0;
  text-decoration: none;
}

.latest-blogs .read-blog-link:hover {
  text-decoration: underline;
}

/* Nav arrows for Latest Stories */
.latest-blogs .latest-blogs-wrapper {
  position: relative;
}

.latest-blogs .latest-blogs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.latest-blogs .latest-blogs-nav--prev {
  left: -12px;
}

.latest-blogs .latest-blogs-nav--next {
  right: -12px;
}

.latest-blogs .latest-blogs-nav:hover {
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
}

.latest-blogs .latest-blogs-nav.is-disabled,
.latest-blogs .latest-blogs-nav:disabled {
  opacity: 0.35;
  pointer-events: none;
  box-shadow: none;
}

.blog-stories-swiper .swiper-slide {
  height: auto;
}

.blog-stories-swiper .swiper-slide > * {
  width: 100%;
}

.blog-stories-swiper {
  position: relative;
}

.blog-stories-arrow {
  display: none;
  background: none;
  border: none;
  padding: 0;
}

#latestStoriesSwiperMobile {
  overflow: hidden;
  height: auto;
}

#latestStoriesSwiperMobile .swiper-slide {
  width: 100%;
}

/* Mobile-only styles for blog cards (Featured Blogs & Latest Stories) */
@media (max-width: 991.98px) {

  /* Make each card smaller and centered */
  .featured-blogs .blog-card,
  .latest-blogs .blog-card {
    max-width: none;
    width: 100%;
    border-radius: 18px;
  }

  .featured-blogs .blog-card-inner,
  .latest-blogs .blog-card-inner {
    padding: 14px 14px 12px;
  }

  /* Image slightly smaller on mobile */
  .featured-blogs .blog-thumb,
  .latest-blogs .blog-thumb {
    width: 60px;
    height: 60px;
  }

  /* Title & text a bit smaller */
  .featured-blogs .story-title,
  .latest-blogs .story-title {
    font-size: 0.9rem;
  }

  .featured-blogs .story-excerpt,
  .latest-blogs .story-excerpt {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  /* Bottom meta row more compact */
  .featured-blogs .story-meta,
  .latest-blogs .story-meta {
    margin-top: 4px;
    padding-top: 4px;
  }

  .featured-blogs .story-avatar,
  .latest-blogs .story-avatar {
    width: 28px;
    height: 28px;
  }

  /* "Read More" link placement – right side, neat */
  .featured-blogs .read-blog-link,
  .latest-blogs .read-blog-link {
    font-size: 0.8rem;
  }

  /* Latest Stories Swiper reset for stacked layout */
  .latest-blogs-swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    padding: 0 !important;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .latest-blogs-swiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden !important;
  }

  .latest-blogs-swiper .swiper-slide {
    width: 100% !important;
    min-width: 0 !important;
    height: auto;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .latest-blogs-pair {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .latest-blogs-pair > * {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .latest-blogs-swiper .blog-card,
  .latest-blogs-swiper article {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* ID-scoped reset to prevent peeking/offsets on blog swiper */
  #latestStoriesSwiperMobile {
    width: 100%;
    max-width: 100vw;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #latestStoriesSwiperMobile .swiper-wrapper {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #latestStoriesSwiperMobile .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .latest-stories-page--mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .latest-stories-page--mobile > * {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .latest-blogs-mobile {
    display: block;
  }

  .latest-blogs-desktop {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* Latest Stories Swiper hard reset (mobile only) */
  .latest-blogs-swiper,
  #latestStoriesSwiperMobile,
  #latestBlogsSwiper {
    overflow: hidden !important;
  }

  .latest-blogs-swiper .swiper-wrapper,
  #latestStoriesSwiperMobile .swiper-wrapper,
  #latestBlogsSwiper .swiper-wrapper {
    display: flex !important;
    width: auto !important;
    overflow: visible !important;
  }

  .latest-blogs-swiper .swiper-slide,
  #latestStoriesSwiperMobile .swiper-slide,
  #latestBlogsSwiper .swiper-slide {
    width: 100% !important;
    flex-shrink: 0;
  }
}

@media (min-width: 992px) {
  .latest-blogs-mobile {
    display: none !important;
  }

  .latest-blogs-desktop {
    display: block;
  }

  .latest-blogs-desktop .latest-blogs-wrapper {
    position: relative;
  }

  .latest-blogs-desktop .blog-page {
    display: none;
  }

  .latest-blogs-desktop .blog-page.is-active {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 24px;
  }

  .latest-blogs-desktop .latest-stories-page--desktop {
    display: contents;
  }

  .latest-blogs .latest-blogs-nav {
    display: inline-flex !important;
  }

  .latestStoriesPaginationDesktop,
  .latest-blogs .latestStoriesPaginationDesktop {
    display: none !important;
  }
}

/* Mobile placement of slider arrows for blog cards */
@media (max-width: 991.98px) {
  .latest-blogs .latest-blogs-swiper {
    position: relative;
  }

  .latest-blogs .latest-blogs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    font-size: 22px;
    line-height: 1;
  }

  .latest-blogs .latest-blogs-nav--prev {
    left: 10px;
  }

  .latest-blogs .latest-blogs-nav--next {
    right: 10px;
  }
}

.filter-pill {
  border: 1px solid var(--bh-border);
  background: #fff;
  color: var(--bh-body);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  transition: all 0.18s ease;
}

.filter-pill:hover,
.filter-pill.active {
  background: var(--bh-primary);
  color: #fff;
  border-color: var(--bh-primary);
  box-shadow: 0 10px 24px rgba(13, 98, 176, 0.18);
}

.slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bh-border);
  background: #fff;
  color: var(--bh-primary);
  display: inline-grid;
  place-items: center;
  transition: all 0.18s ease;
}

.slider-btn:hover {
  border-color: var(--bh-primary);
  box-shadow: 0 10px 22px rgba(13, 98, 176, 0.18);
}

/* Page heroes & feature shells */
.about-hero,
.donate-hero,
.contact-page .card:first-of-type {
  background: linear-gradient(135deg, rgba(13, 98, 176, 0.05), rgba(13, 98, 176, 0.05), #fff);
  border: 1px solid var(--bh-border);
  box-shadow: var(--bh-shadow-soft);
}

.about-highlight {
  background: #f5f9ff;
  border: 1px solid #dfe8f6;
  border-radius: 16px;
}

.about-cta,
.donate-hero .p-3,
.contact-page .card {
  background: #fff;
  border: 1px solid var(--bh-border);
  box-shadow: var(--bh-shadow-soft);
}

.blog-collection {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--bh-shadow-soft);
}

.collection-header h2,
.collection-title {
  font-weight: 800;
  color: var(--bh-ink);
}

.collection-subtitle {
  color: var(--bh-muted);
}

.read-more-link {
  color: var(--bh-primary);
  font-weight: 700;
  text-decoration: none;
}

.read-more-link:hover {
  color: var(--bh-primary-dark);
  text-decoration: underline;
}

.project-meta,
.post-date,
.post-author,
.slate-excerpt,
.slate-date {
  color: var(--bh-muted);
}

.blog-card .post-author {
  color: #111827 !important;
}

/* Section title defaults */
.bh-section-title {
  font-weight: 800;
  line-height: 1.2;
}

/* Mobile section title tightening */
@media (max-width: 576px) {
  /* Eyebrow text (grey small subtitles) */
  .bh-section-eyebrow {
    font-size: 0.55rem !important;
    line-height: 1.1;
  }

  /* Main section titles */
.bh-section-title,
.section-title h2,
.section-title-left h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100% !important;
}

.bh-section-title span,
.section-title h2 span,
.section-title-left h2 span {
  display: inline !important;
}
}

/* Section header style with line */
.bh-section-header {
  text-align: left;
}

.bh-section-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.bh-section-eyebrow-text {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9fa8;
  white-space: nowrap;
}

.bh-section-eyebrow-line {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e40af, #60a5fa) !important;
  border-radius: 999px;
}

.bh-section-title {
  margin: 0.25rem 0 0.75rem;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000000 !important;
}

@media (max-width: 576px) {
  .bh-section-eyebrow-text {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }
  .bh-section-title {
    font-size: 1.25rem;
    line-height: 1.25;
  }
}

/* Mobile styling for Our Approach section */
.our-approach-section .approach-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fbff;
  border: 1px solid #e3ebf5;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 75, 135, 0.06);
  transition: all 0.2s ease-in-out;
  margin-bottom: 6px;
}

.our-approach-section .approach-card:hover {
  background: #ffffff;
  border-color: #d2e0f2;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 75, 135, 0.08);
}

.our-approach-section .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dbe9ff, #bcd4ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #003e7e;
  font-size: 18px;
}

.our-approach-section .text-wrap h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0c2d48;
}

.our-approach-section .text-wrap p {
  margin: 0;
  margin-top: -2px;
  font-size: 12px;
  color: #6a7a8a;
}

@media (max-width: 767.98px) {
  .our-approach-section .approach-card .text-wrap p {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Voices from Gaza – Slider layout */
.voices-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.voices-slider__track {
  --voice-gap: 1.25rem;
  display: flex;
  align-items: stretch;
  gap: var(--voice-gap);
  transition: transform 0.4s ease-out;
  will-change: transform;
}

/* Equal-height cards: let each card stretch to the tallest in the row
   (a fixed height: 100% here made the height indefinite and each card
   collapsed to its own content height). */
.voice-card {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  align-items: stretch;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .voice-card {
    flex: 0 0 calc((100% - var(--voice-gap)) / 2);
    max-width: calc((100% - var(--voice-gap)) / 2);
  }
}

@media (min-width: 992px) {
  .voice-card {
    flex: 0 0 calc((100% - (var(--voice-gap) * 2)) / 3);
    max-width: calc((100% - (var(--voice-gap) * 2)) / 3);
  }
}

/* Voices from Gaza – Slider navigation improvements */
.voices-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #0f172a;
  opacity: 0.9;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
  z-index: 5;
}

.voices-slider__nav--prev {
  left: 12px;
}

.voices-slider__nav--next {
  right: 12px;
}

.voices-slider__nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.22);
}

  .voices-slider__nav.is-disabled,
  .voices-slider__nav:disabled {
    opacity: 0.35;
    pointer-events: none;
    box-shadow: none;
  }

  @media (max-width: 575.98px) {
    .voices-slider__track {
      --voice-gap: 1rem;
    }

  .voices-slider__nav {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

/* Voices from Gaza section – soft blue-grey backdrop so the white
   testimonial cards stand out */
.voices-from-gaza-section {
  background: #f6f9fc !important;
  background-color: #f6f9fc !important;
  box-shadow: none !important;
}

.voices-from-gaza-section .card,
.voices-from-gaza-section .card-body,
.voices-from-gaza-section .card-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

/* Voices from Gaza – clear wrapper background */
#voices-from-gaza,
#voices-from-gaza.section {
  background: #f6f9fc !important;
  background-color: #f6f9fc !important;
  backdrop-filter: none !important;
  filter: none !important;
}

#voices-from-gaza .container,
#voices-from-gaza .container-fluid,
#voicesStories,
#voicesStories.section,
#voicesStories .container,
#voicesStories .container-fluid {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  filter: none !important;
}

#voices-from-gaza .voices-slider,
#voices-from-gaza .voices-slider__track,
#voices-from-gaza .swiper,
#voices-from-gaza .swiper-wrapper,
#voices-from-gaza .swiper-slide,
#voices-from-gaza .voices-carousel,
#voices-from-gaza .stories-carousel,
#voices-from-gaza .stories-track,
#voices-from-gaza .stories-wrap,
#voicesStories .voices-slider,
#voicesStories .voices-slider__track,
#voicesStories .swiper,
#voicesStories .swiper-wrapper,
#voicesStories .swiper-slide,
#voicesStories .voices-carousel,
#voicesStories .stories-carousel,
#voicesStories .stories-track,
#voicesStories .stories-wrap {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  filter: none !important;
}

#voices-from-gaza::before,
#voices-from-gaza::after,
#voices-from-gaza .container::before,
#voices-from-gaza .container::after,
#voices-from-gaza .container-fluid::before,
#voices-from-gaza .container-fluid::after,
#voices-from-gaza .voices-slider::before,
#voices-from-gaza .voices-slider::after,
#voices-from-gaza .voices-slider__track::before,
#voices-from-gaza .voices-slider__track::after,
#voices-from-gaza .swiper::before,
#voices-from-gaza .swiper::after,
#voices-from-gaza .swiper-wrapper::before,
#voices-from-gaza .swiper-wrapper::after,
#voices-from-gaza .stories-wrap::before,
#voices-from-gaza .stories-wrap::after,
#voicesStories::before,
#voicesStories::after,
#voicesStories .container::before,
#voicesStories .container::after,
#voicesStories .container-fluid::before,
#voicesStories .container-fluid::after,
#voicesStories .voices-slider::before,
#voicesStories .voices-slider::after,
#voicesStories .voices-slider__track::before,
#voicesStories .voices-slider__track::after,
#voicesStories .swiper::before,
#voicesStories .swiper::after,
#voicesStories .swiper-wrapper::before,
#voicesStories .swiper-wrapper::after,
#voicesStories .stories-wrap::before,
#voicesStories .stories-wrap::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Voices from Gaza – testimonial card: clean media on top, readable
   text on a white body, blue quote badge bridging the two. */
.gaza-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(13, 98, 176, 0.1);
  box-shadow: 0 12px 30px rgba(14, 31, 51, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform, box-shadow;
}

.gaza-story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(14, 31, 51, 0.14);
  border-color: rgba(13, 98, 176, 0.22);
}

.gaza-story-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef2f7;
  flex-shrink: 0;
}

.gaza-story-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(10, 25, 47, 0.35), transparent);
  pointer-events: none;
}

.gaza-story-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: transform 0.5s ease;
  will-change: transform;
}

.gaza-story-card:hover .gaza-story-bg {
  transform: scale(1.05);
}

.gaza-story-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0b3e75;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  box-shadow: 0 6px 16px rgba(14, 31, 51, 0.18);
}

/* Blue quote badge bridging media and body */
.gaza-story-quote {
  position: absolute;
  bottom: -20px;
  inset-inline-start: 20px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0d62b0;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: 0 10px 20px rgba(13, 98, 176, 0.35);
  border: 3px solid #ffffff;
}

.gaza-story-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  padding: 34px 22px 20px;
  text-align: start;
}

.gaza-story-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Always reserve two lines so a short title matches a long one. */
  min-height: calc(1.45em * 2);
}

.gaza-story-text {
  font-size: 0.9rem;
  color: #5a6a7c;
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Reserve two lines so cards with and without a teaser stay level. */
  min-height: calc(1.6em * 2);
}

.gaza-story-link {
  align-self: stretch;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0d62b0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 0.25s ease;
}

.gaza-story-link i {
  font-size: 1.25rem;
  line-height: 1;
}

[dir="rtl"] .gaza-story-link i {
  transform: scaleX(-1);
}

.gaza-story-card:hover .gaza-story-link {
  color: #0a4d8c;
}

/* MOBILE adjustments */
@media (max-width: 768px) {
  .gaza-story-card {
    border-radius: 18px;
  }

  .gaza-story-content {
    padding: 30px 18px 16px;
    gap: 6px;
  }

  .gaza-story-title {
    font-size: 1rem;
  }

  .gaza-story-text {
    font-size: 0.86rem;
    line-height: 1.5;
  }

  /* keep clear of the slider arrows that sit at the card edges */
  .gaza-story-quote {
    width: 38px;
    height: 38px;
    bottom: -17px;
    font-size: 1.3rem;
    inset-inline-start: auto;
    inset-inline-end: 18px;
  }

  .gaza-story-badge {
    top: 10px;
    padding: 4px 10px;
    font-size: 0.66rem;
  }
}

/* Voices from Gaza – mobile card layout */
@media (max-width: 767.98px) {
  #voices-from-gaza .voice-card {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 18px;
  }

  #voices-from-gaza .voice-card .card-body {
    padding: 12px 14px 14px;
  }

  #voices-from-gaza .voice-card .voice-label {
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  #voices-from-gaza .voice-card h3,
  #voices-from-gaza .voice-card .voice-title {
    font-size: 0.95rem;
  }

  #voices-from-gaza .voice-card p,
  #voices-from-gaza .voice-card .voice-excerpt {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  /* Read Story link at bottom-right, similar to blogs */
  #voices-from-gaza .voice-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
  }

  #voices-from-gaza .voice-footer .read-story-link {
    font-size: 0.8rem;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
  }

  #voices-from-gaza .voice-footer .read-story-link:hover {
    text-decoration: underline;
  }
}

/* Mobile placement of slider arrows for Voices from Gaza */
@media (max-width: 767.98px) {
  .voices-slider {
    position: relative;
  }

  /* Mobile navigates by touch-swipe, so the arrows are hidden here. */
  .voices-slider__nav {
    display: none !important;
  }
}

/* Voices from Gaza – motion polish */
.voices-stories {
  position: relative;
}

.voices-stories .story-card .gaza-story-card {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  transition-delay: 0s;
  will-change: transform, opacity;
}

.voices-stories.is-inview .story-card .gaza-story-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.voices-stories.is-inview .story-card .gaza-story-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.35);
}

.voices-stories.is-inview .voices-slider__track .story-card:nth-child(1) .gaza-story-card { transition-delay: 0ms; }
.voices-stories.is-inview .voices-slider__track .story-card:nth-child(2) .gaza-story-card { transition-delay: 90ms; }
.voices-stories.is-inview .voices-slider__track .story-card:nth-child(3) .gaza-story-card { transition-delay: 180ms; }
.voices-stories.is-inview .voices-slider__track .story-card:nth-child(4) .gaza-story-card { transition-delay: 270ms; }
.voices-stories.is-inview .voices-slider__track .story-card:nth-child(5) .gaza-story-card { transition-delay: 360ms; }
.voices-stories.is-inview .voices-slider__track .story-card:nth-child(6) .gaza-story-card { transition-delay: 450ms; }

.voices-stories .story-card {
  position: relative;
}

.voices-stories .story-card.is-active .gaza-story-card {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(14, 31, 51, 0.14);
  border-color: rgba(13, 98, 176, 0.25);
  opacity: 1;
  z-index: 2;
}

.voices-stories .story-card.is-active .gaza-story-card:hover {
  transform: translateY(-4px);
}

.voices-stories .story-card:not(.is-active) .gaza-story-card {
  opacity: 0.88;
  filter: saturate(0.95);
}

.voices-stories .story-card:not(.is-active) .gaza-story-card:hover {
  opacity: 1;
  filter: saturate(1);
}

.voices-stories .story-card.is-active .gaza-story-card .gaza-story-overlay {
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0.2) 35%,
    rgba(15, 23, 42, 0.5) 75%,
    rgba(15, 23, 42, 0.7) 100%
  );
}

.voices-stories .story-media {
  will-change: transform;
  animation: none;
}

.voices-stories .story-card.is-active .story-media {
  animation: voices-kenburns 11s ease-in-out infinite;
}

@keyframes voices-kenburns {
  0% { transform: scale(1.03) translate3d(0, 0, 0); }
  50% { transform: scale(1.07) translate3d(1.5%, -1.5%, 0); }
  100% { transform: scale(1.1) translate3d(-1.5%, 1.5%, 0); }
}

.voices-stories .gaza-story-link {
  position: relative;
  text-decoration: none;
  transition: color 0.25s ease;
  color: #0d62b0;
}

.voices-stories .gaza-story-link:hover,
.voices-stories .gaza-story-link:active {
  color: #0a4d8c;
}

.voices-stories .gaza-story-link:focus-visible {
  outline: 2px solid rgba(13, 98, 176, 0.45);
  outline-offset: 4px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .voices-stories .story-card .gaza-story-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .voices-stories .story-media {
    animation: none !important;
    transform: none !important;
  }

  .voices-stories .gaza-story-link {
    transition: none !important;
  }
}

/* From the Blog – Horizontal cards + 3x2 slider */
.bh-blog-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.bh-blog-slider__track {
  display: flex;
  transition: transform 0.45s ease-out;
  will-change: transform;
}

.bh-blog-slider__page {
  min-width: 100%;
}

@media (min-width: 992px) {
  .bh-blog-slider__page {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .bh-blog-slider__page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 767.98px) {
  .bh-blog-slider__page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.bh-blog-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bh-blog-card__inner {
  display: flex;
  gap: 20px;
  text-decoration: none;
  color: inherit;
}

.bh-blog-card__media {
  flex: 0 0 130px;
  max-width: 130px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.bh-blog-card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.bh-blog-card__body {
  flex: 1;
}

.bh-blog-card__title {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: #0b1f4b;
}

.bh-blog-card__excerpt {
  font-size: 0.86rem;
  color: #000000;
  margin-bottom: 0;
}

.bh-blog-card__meta {
  font-size: 0.78rem;
  color: #9ca3af;
}

.bh-blog-card__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.bh-blog-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.bh-blog-card__author-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #0f172a;
  display: block;
}

.bh-blog-card__author-date {
  font-size: 0.8rem;
  color: #6b7280;
  display: block;
}

@media (max-width: 767.98px) {
  .bh-blog-card__inner {
    flex-direction: column;
  }

  .bh-blog-card__media {
    flex-basis: auto;
    max-width: 100%;
  }
}

.bh-blog-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #0f172a;
  opacity: 0.95;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
  z-index: 5;
}

.bh-blog-slider__nav--prev {
  left: 10px;
}

.bh-blog-slider__nav--next {
  right: 10px;
}

.bh-blog-slider__nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
}

@media (max-width: 767.98px) {
  .bh-blog-slider__nav {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* Mobile blog slider */
.bh-blog-slider-mobile {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bh-blog-slider-mobile__track {
  display: flex;
  transition: transform 0.4s ease-out;
  will-change: transform;
}

.bh-blog-slider-mobile__page {
  min-width: 100%;
  padding-block: 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.bh-blog-card-mobile {
  background: #ffffff;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.bh-blog-card-mobile__inner {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.bh-blog-card-mobile__media {
  flex: 0 0 52px;
  max-width: 52px;
  height: 52px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
}

.bh-blog-card-mobile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.18s ease-out;
}

.bh-blog-card-mobile__inner:hover .bh-blog-card-mobile__media img {
  transform: scale(1.03);
}

.bh-blog-card-mobile__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bh-blog-card-mobile__title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0b4a94;
  margin: 0 0 2px;
}

.bh-blog-card-mobile__excerpt {
  font-size: 0.78rem;
  line-height: 1.15;
  color: #111827;
  margin: 0 0 6px;
}

.bh-blog-card-mobile__divider {
  height: 1px;
  width: 100%;
  background: rgba(37, 99, 235, 0.25);
  margin: 4px 0 6px;
}

.bh-blog-card-mobile__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bh-blog-card-mobile__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.bh-blog-card-mobile__author {
  display: flex;
  flex-direction: column;
}

.bh-blog-card-mobile__author-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #111827;
}

.bh-blog-card-mobile__date {
  font-size: 0.72rem;
  color: #9ca3af;
}

.bh-blog-slider-mobile__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
}

.bh-blog-slider-mobile__nav--prev {
  left: 6px;
}

.bh-blog-slider-mobile__nav--next {
  right: 6px;
}

@media (min-width: 768px) {
  .bh-blog-slider-mobile {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .bh-blog-slider--desktop {
    display: none;
  }
}

/* Stats Section – Card Grid Layout */
.stats-card-grid .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.25rem;
}

.stats-card {
  background: #ffffff;
  border: 1px solid var(--bh-border);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: var(--bh-shadow-soft);
  min-height: 120px;
}

.stats-card .stats-number,
.stats-card .bh-stat-number {
  font-weight: 800;
  color: #000000;
  font-size: 1.35rem;
  line-height: 1.2;
}

.stats-card .stat-subtitle {
  color: var(--bh-muted, #6b7280);
  font-weight: 600;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .stats-card {
    padding: 0.85rem 0.9rem;
    min-height: 110px;
  }
}

/* Stats Section – Dashboard Cards */
.bh-stats-row {
  margin-top: 0.75rem;
}

.bh-stat-card {
  background: linear-gradient(135deg, #f4f7ff, #ffffff);
  border-radius: 18px;
  border: 1px solid #e1e7f5;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(15, 76, 129, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bh-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 76, 129, 0.09);
}

.bh-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: #1f5dff;
  letter-spacing: 0.02em;
}

.bh-stat-label {
  margin: 0;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: #6b7a90;
}

@media (max-width: 767.98px) {
  .bh-stat-card {
    padding: 12px 8px;
    min-height: 70px;
  }

  .bh-stat-value {
    font-size: 18px;
  }

  .bh-stat-label {
    font-size: 10px;
  }
}

.bh-stat-value {
  color: #111827 !important;
}

/* Stats Section – Animations & Hover */
.stat-animate {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}

.stat-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .stat-animate:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  }
}

@media (max-width: 767px) {
  .stat-animate:hover {
    transform: translateY(0);
    box-shadow: none;
  }
}

/* Stay Connected card */
.bh-stay-card {
  background: #f5f8ff;
  border-radius: 24px !important;
  border: 1px solid #e1e7f5;
  box-shadow: 0 10px 30px rgba(5, 44, 95, 0.08) !important;
}

.bh-stay-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e6f0ff;
  color: #1f5dff;
}

.bh-stay-title {
  font-weight: 800;
  color: #0b2150;
}

.bh-stay-text {
  font-size: 14px;
  color: #6c7a90;
  max-width: 420px;
}

.bh-stay-form {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.bh-stay-form input[type="email"] {
  flex: 1 1 auto;
  border-radius: 999px;
  border: 1px solid #d3ddf2;
  padding: 10px 14px;
  font-size: 14px;
  min-width: 0;
}

.bh-stay-form button {
  border-radius: 999px;
  padding-inline: 20px;
}

.bh-stay-alert {
  background: #e6f9ed;
  border: 1px solid #9fd7b4;
  color: #256a3f;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: bh-stay-fade-in 0.4s ease-out;
}

.bh-stay-alert::before {
  content: "✓";
  font-weight: 700;
}

@keyframes bh-stay-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767.98px) {
  .bh-stay-form {
    flex-direction: column;
  }

  .bh-stay-form button {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  #home-stay-connected.section,
  #home-stay-connected.section-wrapper {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
  }

  .index-page .main {
    padding-bottom: 1rem;
  }

  #home-stay-connected .bh-stay-card {
    padding: 1.25rem !important;
  }

  #home-stay-connected .bh-stay-pill,
  #home-stay-connected .bh-stay-alert {
    margin-bottom: 0.5rem !important;
  }

  #home-stay-connected .bh-stay-title {
    margin-bottom: 0.5rem !important;
  }

  #home-stay-connected .bh-stay-text {
    margin-bottom: 0.75rem !important;
  }

  #home-stay-connected .bh-stay-form {
    flex-direction: column !important;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  #home-stay-connected .bh-stay-form input[type="email"],
  #home-stay-connected .bh-stay-form button {
    width: 100%;
  }

  #home-stay-connected .bh-stay-card p:last-child {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }
}

/* Voices from Gaza lightbox */
.vf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.7);
  padding: 20px;
}

.vf-lightbox.d-none {
  display: none !important;
}

.vf-lightbox-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vf-lightbox-dialog {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
}

.vf-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.55);
  object-fit: contain;
}

/* Close button */
.vf-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  color: #111827;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
}

/* Optional: basic hover for thumbs */
.vf-image-trigger {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* Make sure there is NO blur effect on the images */
.vf-image-thumb,
.vf-lightbox-img {
  filter: none !important;
  -webkit-filter: none !important;
  transition: none !important;
}

/* Blog details: author name in black */
.blog-details .author-name {
  color: #000 !important;
}

/* Blog details: reduce image size */
.blog-details .blog-cover {
  max-width: 600px;
  margin: 0 auto 24px auto;
}

.blog-details .blog-cover-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 20px;
}

.blog-details .blog-title {
  color: #000 !important;
}

/* Minimalistic desktop version – no boxes, no icon containers */
@media (min-width: 992px) {

  /* Main strip container – clean and minimal */
  .impact-stats-card {
    border-radius: 24px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #f5f8ff, #ffffff);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  }

  /* Columns + vertical dividers */
  .impact-stats-grid > .col {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(148, 163, 184, 0.30);
    padding: 0;
  }

  .impact-stats-grid > .col:last-child {
    border-right: none;
  }

  /* Remove ALL card backgrounds, borders, shadows */
  .bh-stat-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove the icon container box completely */
  .impact-stat__icon {
    background: none !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Icon itself slightly larger for clarity */
  .impact-stat__icon img {
    width: 38px !important;
    height: 38px !important;
  }

  /* Centered, clean layout */
  .impact-stat-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px !important;
    padding: 0 !important;
    text-align: center;
  }

  /* Bigger numbers */
  .impact-stat__value {
    font-size: 1.0rem !important;
    font-weight: 600 !important;
    margin: 0;
  }

  /* Bigger readable labels */
  .impact-stat__label {
    font-size: 0.80rem !important;
    font-weight: 600 !important;
    color: #374151 !important; /* darker for better readability */
    margin: 0;
  }
}

/* Home page team4 layout (scoped) */
#homeTeam.team4 {
  background: #f5f7fb;
  color: #8d97ad;
}

#homeTeam.team4 h1,
#homeTeam.team4 h2,
#homeTeam.team4 h3,
#homeTeam.team4 h4,
#homeTeam.team4 h5,
#homeTeam.team4 h6 {
  color: #3e4555;
  font-weight: 700;
}

#homeTeam.team4 .team4-card {
  padding: 26px 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#homeTeam.team4 .team4-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

#homeTeam.team4 .avatar-wrap {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(135deg, rgba(49, 108, 232, 0.14), rgba(13, 98, 176, 0.06), #ffffff);
  box-shadow: inset 0 0 0 1px rgba(49, 108, 232, 0.08);
}

#homeTeam.team4 .team-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #f4f6fb;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

#homeTeam.team4 .team4-card-body {
  padding: 0 6px;
}

#homeTeam.team4 .team-name {
  margin-bottom: 2px;
}

#homeTeam.team4 .subtitle {
  color: #8d97ad;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#homeTeam.team4 .team-bio {
  color: #8d97ad;
  font-size: 0.98rem;
  line-height: 1.6;
}

#homeTeam.team4 .social-links {
  margin-top: 10px;
}

#homeTeam.team4 .social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f7;
  color: #8d97ad;
  border: 1px solid rgba(49, 108, 232, 0.12);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#homeTeam.team4 .social-link:hover {
  transform: translateY(-4px);
  color: #316ce8;
  background: #e8f0ff;
  box-shadow: 0 12px 28px rgba(49, 108, 232, 0.18);
}

#homeTeam.team4 .home-team-slider {
  position: relative;
}

#homeTeam.team4 .home-team-swiper {
  padding: 6px 6px 42px;
  overflow: visible;
}

#homeTeam.team4 .home-team-swiper .swiper-wrapper {
  align-items: stretch;
}

#homeTeam.team4 .swiper-slide {
  height: auto;
  display: flex;
  min-width: 0;
}

#homeTeam.team4 .swiper-slide .team4-card {
  height: 100%;
  width: 100%;
}

#homeTeam.team4 .swiper-slide-active .team4-card {
  transform: translateY(-2px);
}

#homeTeam.team4 .home-team-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #316ce8;
  border: 1px solid rgba(49, 108, 232, 0.18);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

#homeTeam.team4 .home-team-nav::after {
  font-size: 1rem;
  font-weight: 700;
}

#homeTeam.team4 .swiper-button-prev,
#homeTeam.team4 .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#homeTeam.team4 .swiper-button-prev::after,
#homeTeam.team4 .swiper-button-next::after {
  font-size: 16px;
}

#homeTeam.team4 .home-team-nav:hover {
  transform: translateY(-2px);
  background: #e8f0ff;
  box-shadow: 0 16px 32px rgba(49, 108, 232, 0.18);
}

#homeTeam.team4 .home-team-prev {
  left: -12px;
}

#homeTeam.team4 .home-team-next {
  right: -12px;
}

#homeTeam.team4 .home-team-pagination {
  position: static;
  margin-top: 8px;
}

#homeTeam.team4 .home-team-pagination .swiper-pagination-bullet {
  background: #c3cde0;
  opacity: 1;
}

#homeTeam.team4 .home-team-pagination .swiper-pagination-bullet-active {
  background: #316ce8;
}

@media (max-width: 991.98px) {
  #homeTeam.team4 .home-team-nav {
    display: none;
  }
}

@media (max-width: 575.98px) {
  #homeTeam.team4 .swiper-button-prev,
  #homeTeam.team4 .swiper-button-next {
    display: none !important;
  }
}

/* HOME team polish */
#homeTeam .team-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 20px;
  padding-top: 64px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}

#homeTeam .team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.10);
}

#homeTeam .team-avatar-wrap {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--bs-primary, #316ce8);
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 3;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#homeTeam .team-avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 999px !important;
  display: block;
  max-width: none !important;
}

#homeTeam .team-card:hover .team-avatar-wrap {
  transform: translateX(-50%) scale(1.03);
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.16);
}

#homeTeam .team-name {
  margin-top: 6px;
  font-weight: 800;
  font-size: 18px;
  color: #0f172a;
  text-transform: none;
}

#homeTeam .team-role {
  font-size: 13px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.55);
  margin-top: 4px;
}

#homeTeam .team-bio {
  margin-top: 12px;
  color: rgba(15, 23, 42, 0.62);
  font-size: 14px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#homeTeam .team-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#homeTeam .team-social {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

#homeTeam .team-social a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(49, 108, 232, 0.08);
  border: 1px solid rgba(49, 108, 232, 0.12);
  color: rgba(15, 23, 42, 0.65);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#homeTeam .team-social a:hover {
  transform: translateY(-2px);
  background: rgba(49, 108, 232, 0.12);
  color: var(--bs-primary, #316ce8);
  box-shadow: 0 10px 20px rgba(49, 108, 232, 0.18);
}

#homeTeam .home-team-swiper .swiper-slide {
  height: auto;
  display: flex;
}

#homeTeam .home-team-swiper .swiper-slide > * {
  width: 100%;
}

@media (max-width: 575.98px) {
  #homeTeam .team-card {
    padding-top: 62px;
  }

  #homeTeam .team-avatar-wrap {
    width: 86px;
    height: 86px;
    top: -36px;
  }

  #homeTeam .team-bio {
    -webkit-line-clamp: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  #homeTeam .team-card,
  #homeTeam .team-avatar,
  #homeTeam .team-social a {
    transition: none !important;
  }
}

#homeTeam .home-team-cards {
  padding-top: 44px;
}

#homeTeam .home-team-header {
  position: relative;
  z-index: 5;
}

/* Home team grid (reference style) */
#homeTeam.home-team-grid .home-team-card {
  position: relative;
  background: transparent;
  border: 0;
  padding: 12px 12px 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateZ(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

#homeTeam.home-team-grid .home-team-head {
  width: 100%;
  height: 188px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
}

#homeTeam.home-team-grid .home-team-avatar-shell {
  position: relative;
  width: 140px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

#homeTeam.home-team-grid .home-team-leaf {
  position: absolute;
  top: 6px;
  left: 10px;
  transform: translate(0, -50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  opacity: 0.95;
  pointer-events: none;
  z-index: 4;
}

#homeTeam.home-team-grid .home-team-leaf::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

#homeTeam.home-team-grid .home-team-leaf img {
  width: 16px;
  height: 16px;
  display: block;
  position: relative;
  z-index: 2;
}

#homeTeam.home-team-grid .home-team-avatar-wrap {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  display: grid;
  place-items: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#homeTeam.home-team-grid .home-team-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#homeTeam.home-team-grid .home-team-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.55);
  background: radial-gradient(circle at 30% 30%, rgba(49, 108, 232, 0.10), rgba(15, 23, 42, 0.02));
  border-radius: 999px;
}

#homeTeam.home-team-grid .home-team-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
  transition: color 0.2s ease;
}

#homeTeam.home-team-grid .home-team-role {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

#homeTeam.home-team-grid .home-team-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(49, 108, 232, 0.25);
  background: rgba(49, 108, 232, 0.06);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bs-primary, #316ce8);
  margin-bottom: 10px;
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#homeTeam.home-team-grid .home-team-contact:hover {
  transform: translateY(-2px);
  opacity: 0.95;
  background: rgba(49, 108, 232, 0.10);
  box-shadow: 0 12px 24px rgba(49, 108, 232, 0.16);
}

#homeTeam.home-team-grid .home-team-social {
  margin-top: auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#homeTeam.home-team-grid .home-team-social-link {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

#homeTeam.home-team-grid .home-team-social-link:hover {
  transform: translateY(-2px);
  background: rgba(49, 108, 232, 0.10);
  color: var(--bs-primary, #316ce8);
  box-shadow: 0 12px 25px rgba(49, 108, 232, 0.18);
}

#homeTeam.home-team-grid .home-team-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#homeTeam.home-team-grid .home-team-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#homeTeam.home-team-grid .home-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 68px rgba(15, 23, 42, 0.12);
}

#homeTeam.home-team-grid .home-team-card:hover .home-team-avatar-wrap {
  transform: scale(1.04);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.14);
}

#homeTeam.home-team-grid .home-team-card:hover .home-team-leaf {
  opacity: 1;
  transform: translate(-55%, -56%);
}
#homeTeam.home-team-grid .home-team-card:hover .home-team-leaf img { filter: none; }
#homeTeam.home-team-grid .home-team-card:hover .home-team-name { color: #0b1c34; }

@media (max-width: 575.98px) {
  #homeTeam.home-team-grid .home-team-head {
    height: 175px;
  }

  #homeTeam.home-team-grid .home-team-avatar-shell {
    width: 128px;
    height: 150px;
  }

  #homeTeam.home-team-grid .home-team-avatar-wrap {
    width: 128px;
    height: 128px;
  }

  #homeTeam.home-team-grid .home-team-leaf {
    top: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #homeTeam.home-team-grid .home-team-contact,
  #homeTeam.home-team-grid .home-team-social-link {
    transition: none !important;
  }
}

#homeTeam .home-team-grid5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
  justify-items: center;
}

#homeTeam .home-team-grid5 .home-team-card {
  width: 100%;
  max-width: 240px;
}

@media (max-width: 1399.98px) {
  #homeTeam .home-team-grid5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  #homeTeam .home-team-grid5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #homeTeam .home-team-grid5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  #homeTeam .home-team-grid5 {
    grid-template-columns: 1fr;
  }

  #homeTeam .home-team-grid5 .home-team-card {
    max-width: 320px;
  }
}

@media (max-width: 991.98px) {
  .index-page #homeTeam.home-team-section {
    padding-bottom: calc(2.5rem + 48px);
  }

  .index-page #homeTeam.home-team-section .home-team-grid5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .index-page #homeTeam.home-team-section .home-team-card {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
  }

  .index-page #homeTeam.home-team-section .home-team-head {
    height: auto;
    padding-top: 0;
  }

  .index-page #homeTeam.home-team-section .home-team-avatar-shell {
    width: auto;
    height: auto;
  }

  .index-page #homeTeam.home-team-section .home-team-avatar-wrap {
    width: 100px;
    height: 100px;
  }

  .index-page #homeTeam.home-team-section .home-team-leaf {
    top: 6px;
    left: 8px;
    width: 18px;
    height: 18px;
    transform: none;
  }

  .index-page #homeTeam.home-team-section .home-team-leaf::before {
    inset: -5px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  }

  .index-page #homeTeam.home-team-section .home-team-body {
    width: 100%;
    gap: 4px;
  }

  .index-page #homeTeam.home-team-section .home-team-name {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
  }

  .index-page #homeTeam.home-team-section .home-team-role {
    font-size: 11.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
  }

  .index-page #homeTeam.home-team-section .home-team-footer {
    margin-top: auto;
    gap: 8px;
    width: 100%;
  }

  .index-page #homeTeam.home-team-section .home-team-contact {
    width: 100%;
    max-width: 220px;
    height: 38px;
    font-size: 11px;
    letter-spacing: 0.12em;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(49, 108, 232, 0.10), rgba(49, 108, 232, 0.02));
    border: 1px solid rgba(49, 108, 232, 0.25);
  }

  .index-page #homeTeam.home-team-section .home-team-social {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    padding: 0;
    justify-items: center;
  }

  .index-page #homeTeam.home-team-section .home-team-social li {
    margin: 0;
  }

  .index-page #homeTeam.home-team-section .home-team-social-link {
    width: 36px;
    height: 36px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  }

  .index-page #homeTeam.home-team-section .home-team-social-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
  }
}

@media (max-width: 575.98px) {
  .index-page #homeTeam.home-team-section {
    padding-bottom: calc(2.5rem + 72px);
  }

  .index-page #homeTeam .home-team-cards {
    padding-top: 28px;
  }

  .index-page #homeTeam.home-team-section .home-team-grid5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .index-page #homeTeam.home-team-section .home-team-card {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .index-page #homeTeam.home-team-section .home-team-head {
    height: auto;
    padding-top: 0;
  }

  .index-page #homeTeam.home-team-section .home-team-avatar-shell {
    width: auto;
    height: auto;
  }

  .index-page #homeTeam.home-team-section .home-team-avatar-wrap {
    width: 88px;
    height: 88px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  }

  .index-page #homeTeam.home-team-section .home-team-leaf {
    top: 8px;
    left: 8px;
    width: 16px;
    height: 16px;
    transform: none;
  }

  .index-page #homeTeam.home-team-section .home-team-leaf::before {
    inset: -4px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  }

  .index-page #homeTeam.home-team-section .home-team-body {
    gap: 2px;
  }

  .index-page #homeTeam.home-team-section .home-team-name {
    font-size: 13.5px;
    max-width: 100%;
  }

  .index-page #homeTeam.home-team-section .home-team-role {
    font-size: 11.5px;
    margin-bottom: 4px;
  }

  .index-page #homeTeam.home-team-section .home-team-footer {
    gap: 6px;
    min-height: 0;
  }

  .index-page #homeTeam.home-team-section .home-team-contact {
    height: 36px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.12em;
    border-radius: 12px;
  }

  .index-page #homeTeam.home-team-section .home-team-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0 4px;
    min-height: 36px;
    margin: 0;
    flex-wrap: nowrap;
  }

  .index-page #homeTeam.home-team-section .home-team-social li {
    margin: 0;
  }

  .index-page #homeTeam.home-team-section .home-team-social-link {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  }
}

@media (max-width: 359.98px) {
  .index-page #homeTeam.home-team-section .home-team-grid5 {
    grid-template-columns: 1fr;
  }

  .index-page #homeTeam.home-team-section .home-team-social {
    flex-wrap: wrap;
    gap: 6px;
  }
}

#homeTeam.team4 .team-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#homeTeam.team4 .team-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#homeTeam.team4 .team-social {
  margin-top: auto;
}

#homeTeam.team4 .team-bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Global override: replace all gray backgrounds with light sky blue */
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-slate-50,
.bg-slate-100,
.bg-neutral-50,
.bg-light,
.section-gray,
.section-bg,
.card,
.card-wrapper,
.home-section-wrapper {
  background: #f4f9ff !important;
}

/* Override Filament / Tailwind defaults on home page */
.home-page section,
.home-page .container,
.home-page .card {
  background-color: #f5f7fa !important;
}

/* Projects carousel: linear glide + hide desktop arrows */
#projectsSwiper .swiper-wrapper,
.projects-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

@media (min-width: 992px) {
  /* The redesigned impact slider brings its arrows back on desktop; only
     the legacy swiper buttons stay hidden. */
  #projectsSwiper .swiper-button-prev,
  #projectsSwiper .swiper-button-next,
  .projects-swiper .swiper-button-prev,
  .projects-swiper .swiper-button-next {
    display: none !important;
    pointer-events: none !important;
  }
}
/* Final mobile header overrides: clean structure, logo spacing, transparent search */
@media (max-width: 991.98px) {
  #header .bh-mobile-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
    gap: 12px !important;
  }

  #header .bh-mobile-left {
    flex-shrink: 0 !important;
    padding-left: 15px !important; /* logo spacing from viewport */
  }

  #header .bh-mobile-right {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  #header .bh-mobile-right .mobile-search-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--bh-ink, #0f172a) !important;
    transition: transform 0.18s ease, color 0.18s ease;
  }

  #header .bh-mobile-right .mobile-search-btn i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  #header .bh-mobile-right .mobile-search-btn:hover {
    transform: translateY(-1px);
  }

  #header .bh-mobile-right .mobile-search-btn:active {
    transform: translateY(0);
  }

  #header .bh-mobile-right .mobile-search-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(13, 98, 176, 0.22) !important;
  }

  /* Keep header container padding tight so actions hug the edge */
  #header .mobile-nav-anchor > .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Ensure mobile menu aligns to header and spans full width */
  #header {
    position: sticky;
    top: 0;
  }

  #mobileNavCollapse {
    position: fixed !important;
    top: var(--bh-mobile-header-height, 85px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1200 !important;
    max-height: calc(100vh - var(--bh-mobile-header-height, 85px)) !important;
    overflow-y: auto !important;
    padding: 0 0 12px !important;
  }

  #mobileNavCollapse .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #mobileNavCollapse .bg-white {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }
}

@media (min-width: 992px) {
  #header .mobile-nav-anchor > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #header .mobile-nav-anchor .logo {
    flex: 0 0 auto !important;
    align-self: center !important;
  }

  #header .mobile-nav-anchor .logo img {
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    align-self: center !important;
  }
}

/* Logo wordmark next to the mark (brand text stays English in all locales) */
.bh-logo-word {
  display: flex;
  flex-direction: column;
  margin-inline-start: 10px;
  line-height: 1.08;
  white-space: nowrap;
  text-align: start;
}

.bh-logo-word-name {
  font-family: 'Poppins', 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.22rem;
  color: #0d62b0;
  letter-spacing: 0.005em;
}

.bh-logo-word-sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #52677d;
}

@media (max-width: 991.98px) {
  .bh-logo-word {
    margin-inline-start: 8px;
  }

  .bh-logo-word-name {
    font-size: 1rem;
  }

  .bh-logo-word-sub {
    font-size: 0.54rem;
    letter-spacing: 0.32em;
  }
}

/* ---- Site-wide mobile refinements ---- */
@media (max-width: 767.98px) {
  /* Consistent, calmer heading scale on small screens */
  .section-heading {
    font-size: 1.45rem;
    line-height: 1.35;
  }

  .section-label-text {
    font-size: 0.78rem;
  }

  /* Comfortable tap targets for footer and list links */
  footer a,
  .footer a {
    padding-block: 3px;
    display: inline-block;
  }

  /* Buttons: full comfortable height on touch */
  .btn-lg {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
}

/* ---- Professional full-width desktop header (>= 1200px) ---- */
@media (min-width: 1200px) {
  #header {
    box-shadow: 0 6px 22px rgba(14, 31, 51, 0.06);
    border-bottom: 1px solid rgba(13, 98, 176, 0.08);
  }

  /* Fill the top: the bar spans the page width with comfortable padding */
  #header .mobile-nav-anchor > .container {
    max-width: 1720px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* A more substantial, professional bar height */
  #header .mobile-nav-anchor > .container.py-2 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Slightly larger logo for presence */
  #header .mobile-nav-anchor .bh-logo-wrap img {
    max-height: 58px;
  }

  /* Softer, premium nav pill */
  #header .navmenu .bg-white.rounded-pill {
    background: #f4f8fd !important;
    box-shadow: inset 0 0 0 1px rgba(13, 98, 176, 0.09) !important;
  }

  #header .navmenu .nav-link {
    padding-inline: 0.9rem;
  }
}

/* Wider screens: let it breathe further toward the edges */
@media (min-width: 1600px) {
  #header .mobile-nav-anchor > .container {
    max-width: 1860px !important;
  }
}

/* =========================================================================
   Uploaded photos display uncropped — ambient backdrop edition.
   Card covers, detail-page covers and gallery slides show the WHOLE photo
   (object-fit: contain) while a blurred, zoomed copy of the same photo
   fills the frame behind it, so no flat letterbox bars ever appear and
   every card stays exactly the same size. The backdrop <img> layers are
   rendered by the blade templates (class .bh-media-backdrop); the Voices
   cards build both layers from their CSS background via pseudo-elements.
   Round avatars, tiny thumbnails, lightbox tiles, footer icons and the
   full-bleed hero slider deliberately keep object-fit: cover. !important
   is required because the original rules are inline styles and per-page
   <style> blocks that load after this file. */

.project-card-img img:not(.bh-media-backdrop),
.blog-card-image img:not(.bh-media-backdrop),
.highlight-card-media img:not(.bh-media-backdrop),
.donate-card-img img:not(.bh-media-backdrop),
.fb-featured-img,
.hero-horizontal img:not(.bh-media-backdrop),
.hero-vertical img:not(.bh-media-backdrop),
.hero-img img:not(.bh-media-backdrop),
.project-gallery .gallery-slide,
.voice-gallery .gallery-slide {
  object-fit: contain !important;
  object-position: center !important;
  z-index: 1;
}

/* The covers that sit in normal flow need a position for that z-index;
   the ones bootstrap's .ratio (or their own rules) already position keep
   their positioning untouched. */
.highlight-card-media img:not(.bh-media-backdrop),
.hero-horizontal img:not(.bh-media-backdrop),
.hero-vertical img:not(.bh-media-backdrop),
.project-gallery .gallery-slide,
.voice-gallery .gallery-slide {
  position: relative;
}

/* Frames clip the blurred layer and own the stacking context, so the
   backdrop (z-index: -1) paints above the frame background but below
   every in-flow child — no z-index changes needed on the real images. */
.project-card-img,
.blog-card-image,
.highlight-card-media,
.donate-card-img,
.fb-featured,
.hero-horizontal,
.hero-vertical,
.gallery-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bh-media-backdrop {
  position: absolute !important;
  /* Oversized via inset — NOT transform: iOS Safari drops filter on
     transformed composited image layers, which rendered the backdrop as a
     sharp repeated copy on iPhones. */
  inset: -8% !important;
  width: 116% !important;
  height: 116% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: blur(18px) saturate(1.2) brightness(0.92);
  z-index: 0;
  pointer-events: none;
}

/* The Voices cards paint their cover as a deferred CSS background
   (data-bg), so both layers are derived from it: a blurred cover copy
   behind (::before) and the full sharp photo in front (::after). The
   card's hover zoom still applies to the whole stack. */
.gaza-story-bg::before,
.gaza-story-bg::after {
  content: '';
  position: absolute;
  background: inherit;
}

.gaza-story-bg::before {
  inset: -12%;
  background-size: cover !important;
  background-position: center;
  filter: blur(18px) saturate(1.2) brightness(0.9);
  z-index: 0;
}

.gaza-story-bg::after {
  inset: 0;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center;
  z-index: 1;
}

/* Phones: a lighter blur costs the GPU noticeably less while scrolling. */
@media (max-width: 991.98px) {
  .bh-media-backdrop {
    filter: blur(12px) saturate(1.1) brightness(0.94);
  }

  .gaza-story-bg::before {
    filter: blur(12px) saturate(1.1) brightness(0.92);
  }
}

/* ==================== Mobile menu — brand navy sheet ==================== */
@media (max-width: 991.98px) {
  #mobileNavCollapse {
    background: transparent !important;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .bh-menu-wrap {
    width: 100%;
  }

  .bh-menu-sheet {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 1.1rem 1rem 1.15rem;
    background:
      radial-gradient(24rem 16rem at 108% -12%, rgba(22, 121, 214, 0.45), transparent 62%),
      radial-gradient(20rem 14rem at -10% 112%, rgba(13, 98, 176, 0.35), transparent 60%),
      linear-gradient(160deg, #0b1c31 0%, #0e2440 60%, #123156 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px -18px rgba(4, 12, 24, 0.55);
  }

  .bh-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bh-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    font-size: 1.02rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .bh-menu-item:active,
  .bh-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .bh-menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
  }

  .bh-menu-item-label {
    flex-grow: 1;
  }

  .bh-menu-item-arrow {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    transition: transform 0.15s ease, color 0.15s ease;
  }

  [dir="rtl"] .bh-menu-item-arrow {
    transform: scaleX(-1);
  }

  .bh-menu-item:hover .bh-menu-item-arrow,
  .bh-menu-item:active .bh-menu-item-arrow {
    color: rgba(255, 255, 255, 0.75);
    transform: translateX(3px);
  }

  [dir="rtl"] .bh-menu-item:hover .bh-menu-item-arrow,
  [dir="rtl"] .bh-menu-item:active .bh-menu-item-arrow {
    transform: scaleX(-1) translateX(3px);
  }

  .bh-menu-item.is-active {
    background: linear-gradient(120deg, #0d62b0, #1679d6);
    color: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(13, 98, 176, 0.6);
  }

  .bh-menu-item.is-active .bh-menu-item-icon {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
  }

  .bh-menu-item.is-active .bh-menu-item-arrow {
    color: rgba(255, 255, 255, 0.8);
  }

  /* Donate CTA */
  .bh-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 0.9rem;
    padding: 13px 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #0a4d8c;
    font-weight: 800;
    font-size: 1.02rem;
    text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .bh-menu-cta:active {
    transform: scale(0.985);
  }

  .bh-menu-cta:hover,
  .bh-menu-cta:focus {
    color: #0a4d8c;
  }

  .bh-menu-cta .bi-heart-fill {
    color: #e11d48;
  }

  /* Language switcher */
  .bh-menu-lang {
    margin-top: 1.05rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .bh-menu-lang-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.55rem;
  }

  .bh-menu-lang-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .bh-menu-lang-pill {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .bh-menu-lang-pill.is-active {
    background: #ffffff;
    border-color: #ffffff;
    color: #0a4d8c;
    font-weight: 800;
  }

  /* Social icons row */
  .bh-menu-social-row {
    margin-top: 1.05rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .bh-menu-social-row .mobile-menu-social-btn {
    background: #ffffff;
    border: 0 !important;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
  }

  /* Staggered entrance each time the sheet opens */
  @media (prefers-reduced-motion: no-preference) {
    #mobileNavCollapse.show .bh-menu-item,
    #mobileNavCollapse.show .bh-menu-cta,
    #mobileNavCollapse.show .bh-menu-lang,
    #mobileNavCollapse.show .bh-menu-social-row {
      animation: bhMenuIn 0.38s cubic-bezier(0.22, 0.8, 0.36, 1) both;
      animation-delay: calc(var(--i, 0) * 40ms);
    }

    @keyframes bhMenuIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  /* Hamburger gives tactile feedback while the sheet is open */
  .navbar-toggler .bi-list {
    display: inline-block;
    transition: transform 0.25s ease;
  }

  .navbar-toggler[aria-expanded="true"] .bi-list {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Footer — navy identity redesign
   Same brand system as the mobile menu sheet and the admin panel: deep navy
   gradient, brand-blue accents, soft glass surfaces. The donate CTA card
   floats across the footer's top edge via transform + negative bottom
   margin (not negative top margin) so no margin-collapse can pull the navy
   background up around it.
   ========================================================================== */

#footer.bh-footer {
  --bh-footer-ink: #eef4fb;
  --bh-footer-muted: rgba(214, 228, 244, 0.72);
  --bh-footer-faint: rgba(214, 228, 244, 0.55);
  --bh-footer-line: rgba(255, 255, 255, 0.09);
  --bh-footer-chip: rgba(255, 255, 255, 0.07);
  --bh-footer-cta-lift: 3rem;
  position: relative;
  margin-top: 5.5rem;
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(47, 123, 230, 0.2), transparent 55%),
    radial-gradient(80% 60% at 2% 100%, rgba(13, 98, 176, 0.18), transparent 60%),
    linear-gradient(180deg, #0b1c31 0%, #0d2038 60%, #091729 100%);
  color: var(--bh-footer-ink);
  font-size: 14px;
}

/* --- Donate CTA card ---------------------------------------------------- */

#footer.bh-footer .bh-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  padding: 1.9rem 2.2rem;
  border-radius: 22px;
  background:
    radial-gradient(120% 160% at 92% -20%, rgba(255, 255, 255, 0.17), transparent 55%),
    linear-gradient(135deg, #0d62b0 0%, #2f7be6 100%);
  box-shadow: 0 22px 45px -18px rgba(6, 32, 74, 0.55);
  transform: translateY(calc(var(--bh-footer-cta-lift) * -1));
  margin-bottom: calc(var(--bh-footer-cta-lift) * -1);
  z-index: 1;
}

#footer.bh-footer .bh-footer-cta-copy h4 {
  margin: 0 0 0.3rem;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 800;
}

#footer.bh-footer .bh-footer-cta-copy p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
}

#footer.bh-footer .bh-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  background: #ffffff;
  color: #0d62b0;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(3, 22, 46, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#footer.bh-footer .bh-footer-cta-btn i {
  color: #e2504c;
}

#footer.bh-footer .bh-footer-cta-btn:hover,
#footer.bh-footer .bh-footer-cta-btn:focus-visible {
  color: #0d62b0;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(3, 22, 46, 0.6);
  text-decoration: none;
}

/* --- Main grid ---------------------------------------------------------- */

#footer.bh-footer .bh-footer-main {
  padding: 2.5rem 0 2.5rem;
}

#footer.bh-footer .bh-footer-brand-col {
  padding-inline-end: 2.25rem;
}

#footer.bh-footer .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

#footer.bh-footer .footer-logo img {
  height: 54px;
  width: auto;
  filter: brightness(0) invert(1);
}

#footer.bh-footer .footer-logo-word {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

#footer.bh-footer .footer-logo-name {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 800;
}

#footer.bh-footer .footer-logo-sub {
  color: #8fc1ff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

#footer.bh-footer .footer-brand-text {
  margin: 1rem 0 1.15rem;
  max-width: 320px;
  color: var(--bh-footer-muted);
  font-size: 0.875rem;
  line-height: 1.75;
}

#footer.bh-footer .footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

#footer.bh-footer .footer-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--bh-footer-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

#footer.bh-footer a.footer-meta-item:hover {
  color: #ffffff;
  text-decoration: none;
}

#footer.bh-footer .footer-meta-item i {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bh-footer-chip);
  border: 1px solid var(--bh-footer-line);
  color: #8fc1ff;
  font-size: 0.85rem;
}

#footer.bh-footer .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

/* The uploaded icon fills the whole badge (no white padding ring); the
   white background only shows through transparent icon areas. */
#footer.bh-footer .footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  overflow: hidden;
  box-shadow: 0 6px 14px -6px rgba(2, 10, 22, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

#footer.bh-footer .footer-social a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px -6px rgba(2, 10, 22, 0.6);
}

#footer.bh-footer .footer-social .social-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* --- Link columns ------------------------------------------------------- */

#footer.bh-footer h6 {
  margin-bottom: 1.1rem;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#footer.bh-footer h6::after {
  content: '';
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #2f7be6, #7db4f5);
}

[dir="rtl"] #footer.bh-footer h6 {
  letter-spacing: 0;
}

#footer.bh-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer.bh-footer .footer-links li + li {
  margin-top: 0.4rem;
}

#footer.bh-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 2px;
  color: var(--bh-footer-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}

#footer.bh-footer .footer-links a::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5fa5f0;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

#footer.bh-footer .footer-links a:hover,
#footer.bh-footer .footer-links a:focus-visible {
  color: #ffffff;
  gap: 0.7rem;
  text-decoration: none;
}

#footer.bh-footer .footer-links a:hover::before,
#footer.bh-footer .footer-links a:focus-visible::before {
  opacity: 1;
}

#footer.bh-footer a:focus-visible {
  outline: 2px solid #7db4f5;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Bottom bar --------------------------------------------------------- */

#footer.bh-footer .bh-footer-bottom {
  border-top: 1px solid var(--bh-footer-line);
  background: rgba(3, 10, 20, 0.45);
  padding: 1.05rem 0 calc(1.05rem + env(safe-area-inset-bottom));
}

#footer.bh-footer .bh-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
}

#footer.bh-footer .footer-copy {
  color: var(--bh-footer-faint);
  font-size: 0.8rem;
}

#footer.bh-footer .footer-copy .bh-bold {
  color: #ffffff;
  font-weight: 800;
}

/* Registration line — the trust details, one click from the ANBI page */

#footer.bh-footer .bh-footer-trust {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--bh-footer-faint);
  font-size: 0.78rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.15s ease;
}

#footer.bh-footer .bh-footer-trust i {
  color: #6fb3ff;
  font-size: 0.95rem;
}

#footer.bh-footer .bh-footer-trust:hover {
  color: #ffffff;
  text-decoration: none;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 991.98px) {
  #footer.bh-footer {
    margin-top: 4.5rem;
  }

  #footer.bh-footer .bh-footer-brand-col {
    padding-inline-end: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }

  #footer.bh-footer .footer-links a {
    padding-block: 4px;
  }
}

/* Phones get a compact footer: smaller lockup, one-row contact chips,
   tighter link columns and an inline get-involved row. Everything here
   stays inside the media query so tablet/desktop keep their layout. */
@media (max-width: 767.98px) {
  #footer.bh-footer {
    --bh-footer-cta-lift: 2.25rem;
    margin-top: 3.5rem;
  }

  #footer.bh-footer .bh-footer-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 1.15rem 1rem;
    gap: 0.75rem;
    border-radius: 18px;
  }

  #footer.bh-footer .bh-footer-cta-copy h4 {
    font-size: 1.05rem;
  }

  #footer.bh-footer .bh-footer-cta-copy p {
    font-size: 0.8rem;
  }

  #footer.bh-footer .bh-footer-cta-btn {
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }

  #footer.bh-footer .bh-footer-main {
    padding: 1.4rem 0 1.25rem;
    text-align: center;
  }

  #footer.bh-footer .bh-footer-main .row {
    --bs-gutter-y: 1.1rem;
  }

  #footer.bh-footer .footer-logo {
    gap: 0.6rem;
  }

  #footer.bh-footer .footer-logo img {
    height: 38px;
  }

  #footer.bh-footer .footer-logo-name {
    font-size: 1.05rem;
  }

  #footer.bh-footer .footer-logo-sub {
    font-size: 0.58rem;
    letter-spacing: 0.28em;
  }

  #footer.bh-footer .footer-brand-text {
    margin: 0.55rem auto 0.6rem;
    font-size: 0.78rem;
    line-height: 1.55;
    max-width: 300px;
  }

  /* Location + email share one wrapping row instead of stacking */
  #footer.bh-footer .footer-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1rem;
  }

  #footer.bh-footer .footer-meta-item {
    font-size: 0.78rem;
    gap: 0.4rem;
  }

  #footer.bh-footer .footer-meta-item i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.72rem;
  }

  #footer.bh-footer .footer-social {
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
  }

  #footer.bh-footer .footer-social a {
    width: 30px;
    height: 30px;
  }

  #footer.bh-footer h6 {
    margin-bottom: 0.55rem;
    font-size: 0.72rem;
  }

  #footer.bh-footer h6::after {
    margin-inline: auto;
    margin-top: 0.35rem;
    width: 20px;
    height: 2px;
  }

  #footer.bh-footer .footer-links li + li {
    margin-top: 0.15rem;
  }

  #footer.bh-footer .footer-links a {
    padding-block: 3px;
    font-size: 0.8rem;
  }

  /* Centered columns read cleaner without the leading dots */
  #footer.bh-footer .footer-links a::before {
    display: none;
  }

  /* Get involved: three short links fit a single inline row */
  #footer.bh-footer .bh-footer-links-col:last-child .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.4rem;
  }

  #footer.bh-footer .bh-footer-links-col:last-child .footer-links li + li {
    margin-top: 0;
  }

  /* The stacked layout wraps anyway; a dangling "·" separator reads badly */
  #footer.bh-footer .bh-footer-trust > span[aria-hidden="true"] {
    display: none;
  }

  #footer.bh-footer .bh-footer-bottom {
    padding: 0.7rem 0 calc(0.7rem + env(safe-area-inset-bottom));
  }

  #footer.bh-footer .bh-footer-bottom-inner {
    gap: 0.25rem;
  }

  #footer.bh-footer .footer-copy {
    font-size: 0.72rem;
  }

  #footer.bh-footer .bh-footer-trust {
    font-size: 0.68rem;
    line-height: 1.5;
    gap: 0.35rem;
  }

  #footer.bh-footer .bh-footer-trust i {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Home — donation campaigns spotlight
   The "Recent Donation Campaigns" section sits in a deep navy panel (same
   brand system as the footer/menu), with white campaign cards that carry a
   real progress bar: raised amount, percentage chip, animated gradient
   fill (armed by a small IntersectionObserver in the page script) and a
   shimmer sweep. A single campaign renders as a wide horizontal spotlight.
   ========================================================================== */

#home-donate .bh-camp-panel {
  position: relative;
  border-radius: 28px;
  padding: 2.5rem 2.5rem 2.75rem;
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(47, 123, 230, 0.2), transparent 55%),
    radial-gradient(80% 60% at 2% 100%, rgba(13, 98, 176, 0.18), transparent 60%),
    linear-gradient(180deg, #0b1c31 0%, #0d2038 60%, #091729 100%);
  box-shadow: 0 30px 60px -30px rgba(6, 24, 52, 0.6);
  overflow: hidden;
}

#home-donate .bh-camp-head {
  max-width: 660px;
  margin: 0 auto 1.9rem;
  text-align: center;
}

#home-donate .bh-camp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eaf3ff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

[dir="rtl"] #home-donate .bh-camp-kicker {
  letter-spacing: 0;
}

#home-donate .bh-camp-kicker i {
  color: #ff8f88;
}

#home-donate .bh-camp-title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin-bottom: 0;
}

#home-donate .bh-camp-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #5fa5f0, #b7d8fb);
}

#home-donate .bh-camp-empty {
  color: rgba(219, 231, 246, 0.85);
}

/* --- Campaign card ------------------------------------------------------ */

#home-donate .bh-camp-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 45px -22px rgba(2, 10, 24, 0.65);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#home-donate .bh-camp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 55px -22px rgba(47, 123, 230, 0.55);
}

/* The uncropped-photo system (contain + blurred backdrop) hooks onto the
   .donate-card-img class this media frame also carries. */
#home-donate .bh-camp-media {
  aspect-ratio: 16 / 10;
  background: #0e2440;
}

#home-donate .bh-camp-media img:not(.bh-media-backdrop) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#home-donate .bh-camp-chip {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(220, 53, 69, 0.95);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px -6px rgba(120, 15, 25, 0.6);
  z-index: 2;
}

#home-donate .bh-camp-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 18px 20px 20px;
  flex-grow: 1;
  text-align: start;
}

#home-donate .bh-camp-name {
  margin: 0;
  color: var(--bh-ink);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#home-donate .bh-camp-desc {
  color: var(--bh-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#home-donate .bh-camp-desc p {
  margin: 0;
}

/* --- Progress ----------------------------------------------------------- */

#home-donate .bh-camp-progress {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #f0faf4;
  border: 1px solid rgba(22, 163, 74, 0.16);
}

#home-donate .bh-camp-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

#home-donate .bh-camp-raised {
  color: #15803d;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
}

#home-donate .bh-camp-pct {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.13);
  color: #15803d;
  font-size: 0.78rem;
  font-weight: 800;
}

#home-donate .bh-camp-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.15);
  overflow: hidden;
}

#home-donate .bh-camp-fill {
  position: relative;
  display: block;
  height: 100%;
  width: var(--bh-pct, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  overflow: hidden;
  transition: width 1.2s cubic-bezier(0.22, 0.8, 0.32, 1);
}

/* Shimmer sweep across the filled part */
#home-donate .bh-camp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: bhCampShimmer 2.8s ease-in-out infinite;
}

@keyframes bhCampShimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Armed by JS: start empty, animate to the real width when scrolled into view */
#home-donate .bh-camp-track.js-armed .bh-camp-fill {
  width: 0;
}

#home-donate .bh-camp-track.js-armed.in-view .bh-camp-fill {
  width: var(--bh-pct, 0%);
}

@media (prefers-reduced-motion: reduce) {
  #home-donate .bh-camp-fill {
    transition: none;
  }

  #home-donate .bh-camp-fill::after {
    animation: none;
  }
}

#home-donate .bh-camp-progress-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #5f7264;
  font-size: 0.75rem;
  font-weight: 600;
}

/* --- Donate button ------------------------------------------------------ */

#home-donate .bh-camp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #dc3545, #f2606d);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 14px 28px -12px rgba(220, 53, 69, 0.7);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

#home-donate .bh-camp-btn:hover,
#home-donate .bh-camp-btn:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -12px rgba(220, 53, 69, 0.75);
  text-decoration: none;
}

#home-donate .bh-camp-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

/* --- Wide spotlight (single campaign) ----------------------------------- */

#home-donate .bh-camp-card--wide {
  flex-direction: row;
}

#home-donate .bh-camp-card--wide .bh-camp-media {
  flex: 0 0 45%;
  aspect-ratio: auto;
  min-height: 340px;
}

#home-donate .bh-camp-card--wide .bh-camp-body {
  padding: 26px 30px;
  gap: 0.85rem;
  justify-content: center;
}

#home-donate .bh-camp-card--wide .bh-camp-name {
  font-size: 1.35rem;
  -webkit-line-clamp: 3;
}

#home-donate .bh-camp-card--wide .bh-camp-desc {
  -webkit-line-clamp: 3;
}

#home-donate .bh-camp-card--wide .bh-camp-raised {
  font-size: 1.5rem;
}

#home-donate .bh-camp-card--wide .bh-camp-btn {
  align-self: flex-start;
}

@media (max-width: 991.98px) {
  #home-donate .bh-camp-card--wide {
    flex-direction: column;
  }

  #home-donate .bh-camp-card--wide .bh-camp-media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  #home-donate .bh-camp-card--wide .bh-camp-btn {
    align-self: stretch;
  }
}

@media (max-width: 767.98px) {
  #home-donate .bh-camp-panel {
    border-radius: 22px;
    padding: 1.5rem 1.1rem 1.6rem;
  }

  #home-donate .bh-camp-head {
    margin-bottom: 1.4rem;
  }

  #home-donate .bh-camp-title {
    font-size: 1.3rem;
  }

  #home-donate .bh-camp-card--wide .bh-camp-body {
    padding: 18px 20px 20px;
  }

  #home-donate .bh-camp-card--wide .bh-camp-name {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Donate page — giving redesign
   Navy hero panel with a glass summary card, two method cards (ING bank
   request + GoFundMe), icon impact cards, numbered steps and an accordion
   FAQ — all on the same brand system as the footer/home spotlight.
   ========================================================================== */

.donate-page .bh-don-hero {
  position: relative;
  border-radius: 28px;
  padding: 2.75rem 2.75rem 3rem;
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(47, 123, 230, 0.22), transparent 55%),
    radial-gradient(80% 60% at 2% 100%, rgba(13, 98, 176, 0.18), transparent 60%),
    linear-gradient(180deg, #0b1c31 0%, #0d2038 60%, #091729 100%);
  box-shadow: 0 30px 60px -30px rgba(6, 24, 52, 0.6);
  overflow: hidden;
  color: #eaf2fb;
}

.donate-page .bh-don-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #d9ecdf;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.donate-page .bh-don-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: bhDonPulse 2s ease-out infinite;
}

@keyframes bhDonPulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .donate-page .bh-don-badge-dot {
    animation: none;
  }
}

.donate-page .bh-don-hero-title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.donate-page .bh-don-hl {
  color: #8fc1ff;
}

.donate-page .bh-don-hero-desc {
  color: rgba(219, 231, 246, 0.85);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 1.4rem;
}

.donate-page .bh-don-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.donate-page .bh-don-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(219, 231, 246, 0.65);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
}

.donate-page .bh-don-hero-note i {
  color: #6fb3ff;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Glass summary card */
.donate-page .bh-don-glass {
  border-radius: 20px;
  padding: 1.5rem 1.6rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}

.donate-page .bh-don-glass-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.donate-page .bh-don-glass-desc {
  color: rgba(219, 231, 246, 0.78);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

.donate-page .bh-don-glass-stats {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.donate-page .bh-don-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.donate-page .bh-don-stat-label {
  color: rgba(219, 231, 246, 0.6);
  font-size: 0.75rem;
  font-weight: 600;
}

.donate-page .bh-don-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: end;
}

.donate-page .bh-don-stat-value i {
  color: #8fc1ff;
  font-size: 0.8rem;
}

/* --- Buttons ------------------------------------------------------------ */

.donate-page .bh-don-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.donate-page .bh-don-btn:hover,
.donate-page .bh-don-btn:focus-visible {
  transform: translateY(-2px);
  text-decoration: none;
}

.donate-page .bh-don-btn--light {
  background: #ffffff;
  color: #0d62b0;
  box-shadow: 0 14px 28px -12px rgba(3, 22, 46, 0.6);
}

.donate-page .bh-don-btn--light:hover,
.donate-page .bh-don-btn--light:focus-visible {
  color: #0d62b0;
  box-shadow: 0 18px 34px -12px rgba(3, 22, 46, 0.65);
}

.donate-page .bh-don-btn--light i {
  color: #e2504c;
}

.donate-page .bh-don-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #eaf2fb;
}

.donate-page .bh-don-btn--ghost:hover,
.donate-page .bh-don-btn--ghost:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.donate-page .bh-don-btn--primary {
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  color: #ffffff;
  box-shadow: 0 14px 28px -12px rgba(13, 98, 176, 0.7);
}

.donate-page .bh-don-btn--primary:hover,
.donate-page .bh-don-btn--primary:focus-visible {
  color: #ffffff;
  box-shadow: 0 18px 34px -12px rgba(13, 98, 176, 0.75);
}

.donate-page .bh-don-btn--gfm {
  background: linear-gradient(135deg, #00915a, #02b368);
  color: #ffffff;
  box-shadow: 0 14px 28px -12px rgba(0, 145, 90, 0.7);
}

.donate-page .bh-don-btn--gfm:hover,
.donate-page .bh-don-btn--gfm:focus-visible {
  color: #ffffff;
  box-shadow: 0 18px 34px -12px rgba(0, 145, 90, 0.75);
}

/* --- Section headers ---------------------------------------------------- */

.donate-page .bh-don-head {
  max-width: 660px;
  margin: 0 auto 2rem;
  text-align: center;
}

.donate-page .bh-don-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  background: var(--bh-accent-soft);
  color: var(--bh-primary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

[dir="rtl"] .donate-page .bh-don-kicker {
  letter-spacing: 0;
}

.donate-page .bh-don-heading {
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  font-weight: 800;
  color: var(--bh-ink);
  margin-bottom: 0.5rem;
}

.donate-page .bh-don-heading::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #2f7be6, #7db4f5);
}

.donate-page .bh-don-sub {
  color: var(--bh-muted);
  font-size: 0.96rem;
  margin: 0;
}

/* --- Method cards ------------------------------------------------------- */

.donate-page .bh-don-method {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.75rem 1.8rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(13, 98, 176, 0.1);
  box-shadow: 0 20px 44px -26px rgba(9, 43, 91, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.donate-page .bh-don-method:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 52px -26px rgba(13, 98, 176, 0.45);
}

.donate-page .bh-don-method-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.donate-page .bh-don-method-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.3rem;
  color: #ffffff;
}

.donate-page .bh-don-method-icon--ing {
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  box-shadow: 0 12px 24px -12px rgba(13, 98, 176, 0.8);
}

.donate-page .bh-don-method-icon--gfm {
  background: linear-gradient(135deg, #00915a, #02b368);
  box-shadow: 0 12px 24px -12px rgba(0, 145, 90, 0.8);
}

.donate-page .bh-don-method-kicker {
  display: block;
  color: var(--bh-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

[dir="rtl"] .donate-page .bh-don-method-kicker {
  letter-spacing: 0;
}

.donate-page .bh-don-method-title {
  color: var(--bh-ink);
  font-size: 1.12rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.35;
}

.donate-page .bh-don-method-desc {
  color: var(--bh-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

.donate-page .bh-don-method .bh-don-btn {
  align-self: flex-start;
}

.donate-page .bh-don-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #f2f8ff;
  border: 1px solid rgba(13, 98, 176, 0.14);
  color: #33465e;
  font-size: 0.82rem;
  line-height: 1.6;
}

.donate-page .bh-don-note i {
  color: var(--bh-primary);
  flex: 0 0 auto;
  margin-top: 2px;
}

.donate-page .bh-don-note--warn {
  background: #fff8ec;
  border-color: rgba(217, 119, 6, 0.25);
  color: #6b4a15;
}

.donate-page .bh-don-note--warn i {
  color: #d97706;
}

/* --- Impact cards ------------------------------------------------------- */

.donate-page .bh-don-impact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem 1.6rem 1.7rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(13, 98, 176, 0.1);
  box-shadow: 0 16px 36px -24px rgba(9, 43, 91, 0.35);
  text-align: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.donate-page .bh-don-impact:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -24px rgba(13, 98, 176, 0.45);
}

.donate-page .bh-don-impact-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--bh-accent-soft);
  color: var(--bh-primary);
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.donate-page .bh-don-impact-title {
  color: var(--bh-ink);
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.donate-page .bh-don-impact-desc {
  color: var(--bh-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
}

/* --- Steps -------------------------------------------------------------- */

.donate-page .bh-don-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.6rem 1.7rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(13, 98, 176, 0.1);
  box-shadow: 0 16px 36px -24px rgba(9, 43, 91, 0.35);
}

.donate-page .bh-don-step-num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 10px 20px -10px rgba(13, 98, 176, 0.8);
  margin-bottom: 0.25rem;
}

.donate-page .bh-don-step-title {
  color: var(--bh-ink);
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.donate-page .bh-don-step-desc {
  color: var(--bh-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
}

/* --- FAQ accordion ------------------------------------------------------ */

.donate-page .bh-don-faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.donate-page .bh-don-faq .accordion-item {
  border: 1px solid rgba(13, 98, 176, 0.12);
  border-radius: 16px !important;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 28px -20px rgba(9, 43, 91, 0.35);
}

.donate-page .bh-don-faq .accordion-button {
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bh-ink);
  background: #ffffff;
  box-shadow: none;
}

.donate-page .bh-don-faq .accordion-button:not(.collapsed) {
  color: var(--bh-primary);
  background: #f4f9ff;
}

.donate-page .bh-don-faq .accordion-button:focus {
  border-color: rgba(13, 98, 176, 0.3);
  box-shadow: 0 0 0 0.2rem rgba(13, 98, 176, 0.12);
}

.donate-page .bh-don-faq .accordion-body {
  padding: 1rem 1.25rem 1.15rem;
  color: var(--bh-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --- Contact strip ------------------------------------------------------ */

.donate-page .bh-don-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  padding: 1.5rem 1.9rem;
  border-radius: 22px;
  background:
    radial-gradient(110% 140% at 92% -20%, rgba(47, 123, 230, 0.18), transparent 55%),
    linear-gradient(135deg, #0b1c31, #12365c);
  box-shadow: 0 22px 46px -26px rgba(6, 24, 52, 0.6);
}

.donate-page .bh-don-contact-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.donate-page .bh-don-contact-desc {
  color: rgba(219, 231, 246, 0.75);
  font-size: 0.88rem;
  margin: 0;
}

.donate-page .bh-don-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.donate-page .bh-don-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #eaf2fb;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.donate-page .bh-don-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  text-decoration: none;
}

.donate-page .bh-don-chip i {
  color: #8fc1ff;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 991.98px) {
  .donate-page .bh-don-hero {
    padding: 2rem 1.75rem 2.25rem;
  }
}

@media (max-width: 767.98px) {
  .donate-page .bh-don-hero {
    border-radius: 22px;
    padding: 1.6rem 1.25rem 1.75rem;
  }

  .donate-page .bh-don-hero-title {
    font-size: 1.45rem;
  }

  .donate-page .bh-don-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .donate-page .bh-don-glass {
    padding: 1.2rem 1.15rem;
  }

  .donate-page .bh-don-head {
    margin-bottom: 1.4rem;
  }

  .donate-page .bh-don-method {
    padding: 1.3rem 1.2rem;
  }

  .donate-page .bh-don-method .bh-don-btn {
    align-self: stretch;
  }

  .donate-page .bh-don-contact {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 1.3rem 1.2rem;
  }

  .donate-page .bh-don-contact-actions {
    justify-content: center;
  }
}

/* ==========================================================================
   Contact page — reach-us redesign
   Navy hero panel, icon contact channels, brand social tiles and a clean
   message form — same brand system as the donate/footer redesigns.
   ========================================================================== */

.contact-page .bh-con-hero {
  position: relative;
  border-radius: 28px;
  padding: 2.5rem 2.75rem 2.6rem;
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(47, 123, 230, 0.22), transparent 55%),
    radial-gradient(80% 60% at 2% 100%, rgba(13, 98, 176, 0.18), transparent 60%),
    linear-gradient(180deg, #0b1c31 0%, #0d2038 60%, #091729 100%);
  box-shadow: 0 30px 60px -30px rgba(6, 24, 52, 0.6);
  overflow: hidden;
  color: #eaf2fb;
}

.contact-page .bh-con-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #dbe7f6;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.contact-page .bh-con-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: bhDonPulse 2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .bh-con-badge-dot {
    animation: none;
  }
}

.contact-page .bh-con-hero-title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.25;
  margin-bottom: 0.7rem;
}

.contact-page .bh-con-hl {
  color: #8fc1ff;
}

.contact-page .bh-con-hero-desc {
  color: rgba(219, 231, 246, 0.85);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 680px;
  margin-bottom: 1.2rem;
}

.contact-page .bh-con-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 640px;
  margin: 0;
  padding: 0.85rem 1.05rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: #dbe7f6;
  font-size: 0.9rem;
  line-height: 1.65;
}

.contact-page .bh-con-quote i {
  color: #ff8f88;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* --- Shared card bits --------------------------------------------------- */

.contact-page .bh-con-aside,
.contact-page .bh-con-form {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.8rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(13, 98, 176, 0.1);
  box-shadow: 0 20px 44px -26px rgba(9, 43, 91, 0.35);
}

.contact-page .bh-con-card-title {
  color: var(--bh-ink);
  font-size: 1.12rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.contact-page .bh-con-card-desc {
  color: var(--bh-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

/* --- Contact channels --------------------------------------------------- */

.contact-page .bh-con-channels {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.contact-page .bh-con-channel {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #f7fafd;
  border: 1px solid rgba(13, 98, 176, 0.1);
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.contact-page a.bh-con-channel:hover {
  background: #f0f7ff;
  border-color: rgba(13, 98, 176, 0.28);
  transform: translateY(-2px);
  text-decoration: none;
}

.contact-page .bh-con-channel-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  color: #ffffff;
  font-size: 1rem;
  box-shadow: 0 10px 20px -10px rgba(13, 98, 176, 0.8);
}

.contact-page .bh-con-channel-icon--wa {
  background: linear-gradient(135deg, #128c4b, #25d366);
  box-shadow: 0 10px 20px -10px rgba(18, 140, 75, 0.8);
}

.contact-page .bh-con-channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.contact-page .bh-con-channel-label {
  color: var(--bh-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

[dir="rtl"] .contact-page .bh-con-channel-label {
  letter-spacing: 0;
}

.contact-page .bh-con-channel-value {
  color: var(--bh-ink);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: start;
}

.contact-page .bh-con-channel-note {
  color: var(--bh-muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin-top: 0.15rem;
}

/* --- Social tiles ------------------------------------------------------- */

.contact-page .bh-con-social {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--bh-border);
}

.contact-page .bh-con-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.contact-page .bh-con-social-row a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(13, 98, 176, 0.06);
  border: 1px solid rgba(13, 98, 176, 0.16);
  color: #0d62b0;
  font-size: 1.05rem;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.contact-page .bh-con-social-row a:hover {
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px -8px rgba(13, 98, 176, 0.7);
}

.contact-page .bh-con-social-note {
  margin-top: 0.8rem;
  color: var(--bh-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* --- Form --------------------------------------------------------------- */

.contact-page .bh-con-form-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.contact-page .bh-con-form-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  color: #ffffff;
  font-size: 1.1rem;
  box-shadow: 0 12px 24px -12px rgba(13, 98, 176, 0.8);
}

.contact-page .bh-con-form .form-label {
  font-weight: 700;
  color: #2a3a52;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

.contact-page .bh-con-form .form-control {
  border-radius: 12px;
  border-color: #dbe4f0;
  padding: 0.6rem 0.85rem;
}

.contact-page .bh-con-form .form-control:focus {
  border-color: rgba(13, 98, 176, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(13, 98, 176, 0.12);
}

.contact-page .bh-con-form-actions {
  margin-top: 1.4rem;
}

.contact-page .bh-con-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.7rem;
  background: linear-gradient(135deg, #0d62b0, #2f7be6);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.94rem;
  box-shadow: 0 14px 28px -12px rgba(13, 98, 176, 0.7);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.contact-page .bh-con-submit:hover,
.contact-page .bh-con-submit:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -12px rgba(13, 98, 176, 0.75);
}

.contact-page .bh-con-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--bh-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.contact-page .bh-con-privacy i {
  color: var(--bh-primary);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* --- Alerts ------------------------------------------------------------- */

.contact-page .bh-con-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.contact-page .bh-con-alert i {
  flex: 0 0 auto;
  margin-top: 2px;
}

.contact-page .bh-con-alert--ok {
  background: #f0faf4;
  border: 1px solid rgba(22, 163, 74, 0.25);
  color: #166534;
}

.contact-page .bh-con-alert--ok i {
  color: #16a34a;
}

.contact-page .bh-con-alert--err {
  background: #fdf2f2;
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #842029;
}

.contact-page .bh-con-alert--err i {
  color: #dc3545;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 767.98px) {
  .contact-page .bh-con-hero {
    border-radius: 22px;
    padding: 1.6rem 1.25rem 1.7rem;
  }

  .contact-page .bh-con-hero-title {
    font-size: 1.45rem;
  }

  .contact-page .bh-con-aside,
  .contact-page .bh-con-form {
    padding: 1.3rem 1.2rem;
  }

  .contact-page .bh-con-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Header — social hub
   The desktop header's row of six social icons becomes one "Our Social
   Media" pill; hovering it (fine pointers) or tapping it (touch, via the
   small toggle script in the header partial) reveals a floating panel with
   the full-bleed icons popping in one after another. The old
   .bh-social-desktop sizing/hiding rules above no longer match anything.
   ========================================================================== */

.bh-social-hub {
  position: relative;
}

.bh-social-hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(13, 98, 176, 0.25);
  background: #ffffff;
  color: var(--bh-primary);
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bh-social-hub-btn:hover,
.bh-social-hub-btn:focus-visible,
.bh-social-hub.is-open .bh-social-hub-btn {
  background: #f0f7ff;
  border-color: rgba(13, 98, 176, 0.45);
  box-shadow: 0 8px 18px -10px rgba(13, 98, 176, 0.5);
}

.bh-social-hub-caret {
  font-size: 0.68rem;
  transition: transform 0.2s ease;
}

.bh-social-hub.is-open .bh-social-hub-caret {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .bh-social-hub:hover .bh-social-hub-caret {
    transform: rotate(180deg);
  }
}

.bh-social-hub-panel {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1200;
  padding: 0.6rem 0.65rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(13, 98, 176, 0.12);
  box-shadow: 0 24px 48px -18px rgba(9, 43, 91, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* Invisible bridge so the pointer can travel from button to panel */
.bh-social-hub-panel::before {
  content: '';
  position: absolute;
  top: -12px;
  inset-inline: 0;
  height: 12px;
}

.bh-social-hub:focus-within .bh-social-hub-panel,
.bh-social-hub.is-open .bh-social-hub-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .bh-social-hub:hover .bh-social-hub-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

.bh-social-hub-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bh-social-hub-row a {
  overflow: hidden;
  box-shadow: 0 6px 14px -6px rgba(9, 43, 91, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bh-social-hub-row a:hover,
.bh-social-hub-row a:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 22px -8px rgba(13, 98, 176, 0.55);
}

/* Icons pop in one after another when the panel opens */
@media (prefers-reduced-motion: no-preference) {
  .bh-social-hub:focus-within .bh-social-hub-row a,
  .bh-social-hub.is-open .bh-social-hub-row a {
    animation: bhHubPop 0.32s cubic-bezier(0.22, 0.8, 0.36, 1) both;
  }

  @media (hover: hover) and (pointer: fine) {
    .bh-social-hub:hover .bh-social-hub-row a {
      animation: bhHubPop 0.32s cubic-bezier(0.22, 0.8, 0.36, 1) both;
    }
  }

  .bh-social-hub-row a:nth-child(1) { animation-delay: 0ms; }
  .bh-social-hub-row a:nth-child(2) { animation-delay: 40ms; }
  .bh-social-hub-row a:nth-child(3) { animation-delay: 80ms; }
  .bh-social-hub-row a:nth-child(4) { animation-delay: 120ms; }
  .bh-social-hub-row a:nth-child(5) { animation-delay: 160ms; }
  .bh-social-hub-row a:nth-child(6) { animation-delay: 200ms; }
  .bh-social-hub-row a:nth-child(7) { animation-delay: 240ms; }
  .bh-social-hub-row a:nth-child(8) { animation-delay: 280ms; }
}

@keyframes bhHubPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Tight desktop widths: keep only the share glyph so the header row that
   used to hide the icon strip entirely (992-1199) still fits comfortably. */
@media (min-width: 992px) and (max-width: 1439.98px) {
  .bh-social-hub-label {
    display: none;
  }

  .bh-social-hub-btn {
    padding: 0.48rem 0.7rem;
  }
}

/* The mobile menu sheet's social buttons share the full-bleed treatment. */
@media (max-width: 991.98px) {
  .bh-menu-social-row .mobile-menu-social-btn {
    overflow: hidden;
    padding: 0 !important;
  }
}