/*
Theme Name: BeChangeMaker
Theme URI: https://bechangemaker.global
Author: BeChangeMaker
Author URI: https://bechangemaker.global
Description: Official landing page theme for BeChangeMaker, a global social entrepreneurship programme for young people turning community challenges into practical solutions.
Version: 1.1.31
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bechangemaker
*/

/* =========================================================
   1. Design tokens
   Light = BCM navy + white.  Dark = BCM navy + grey.
   Default follows the operating system; the header control
   sets an explicit override that persists.
   ========================================================= */

:root {
  --bcm-navy: #010E23;
  --bcm-teal: #16C2B8;
  --bcm-orange: #FF6B35;
  --bcm-cream: #F5F1E6;

  --bcm-surface: #FFFFFF;
  --bcm-surface-alt: #F4F6F9;
  --bcm-card: #FFFFFF;
  --bcm-border: rgba(1, 14, 35, .10);
  --bcm-border-strong: rgba(1, 14, 35, .20);

  --bcm-text: #101828;
  --bcm-text-muted: rgba(16, 24, 40, .66);
  --bcm-text-soft: rgba(16, 24, 40, .48);
  --bcm-heading: #010E23;

  --bcm-shadow: 0 16px 34px rgba(1, 14, 35, .10);
}

@media (prefers-color-scheme: dark) {
  :root:not(.bcm-theme-light) {
    --bcm-surface: #171C24;
    --bcm-surface-alt: #1E242E;
    --bcm-card: #222933;
    --bcm-border: rgba(255, 255, 255, .10);
    --bcm-border-strong: rgba(255, 255, 255, .22);

    --bcm-text: #D8DCE2;
    --bcm-text-muted: rgba(216, 220, 226, .70);
    --bcm-text-soft: rgba(216, 220, 226, .48);
    --bcm-heading: #FFFFFF;

    --bcm-shadow: 0 16px 34px rgba(0, 0, 0, .45);
  }
}

:root.bcm-theme-dark {
  --bcm-surface: #171C24;
  --bcm-surface-alt: #1E242E;
  --bcm-card: #222933;
  --bcm-border: rgba(255, 255, 255, .10);
  --bcm-border-strong: rgba(255, 255, 255, .22);

  --bcm-text: #D8DCE2;
  --bcm-text-muted: rgba(216, 220, 226, .70);
  --bcm-text-soft: rgba(216, 220, 226, .48);
  --bcm-heading: #FFFFFF;

  --bcm-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}

/* =========================================================
   2. Base
   ========================================================= */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  background: var(--bcm-surface);
  color: var(--bcm-text);
}
* { box-sizing: border-box; }

/* Header and hero sit flush: no stacked block margins between the
   top of the document and the hero. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > main > *:first-child { margin-block-start: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  background: var(--bcm-navy);
  color: #FFFFFF;
  padding: 14px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* =========================================================
   3. Intro overlay — logo, typed wordmark, then reveal
   ========================================================= */

.bcm-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bcm-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity .7s ease, visibility .7s ease;
}
.bcm-intro.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bcm-intro-logo {
  width: 132px;
  height: auto;
  display: block;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(26px) scale(.82) rotate(-6deg);
  animation: bcmCubeIn 1.05s .1s cubic-bezier(.2, .9, .2, 1) forwards;
}
/* The real exported artwork (wordmark-tagline-cream.png — a tight crop
   of the approved lockup, cube removed), revealed with a left-to-right
   wipe rather than recreated with a live font or crossfaded from one.
   Nothing here is a font substitute: it is the authentic file, at its
   authentic proportions, the entire time — only the reveal is
   animated, via clip-path, so the pixels never change. */
.bcm-intro-wipe {
  position: relative;
  display: inline-block;
}
.bcm-intro-wordmark-img {
  display: block;
  width: clamp(230px, 42vw, 360px);
  height: auto;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.7s cubic-bezier(.65, 0, .35, 1);
}
.bcm-intro-wipe.is-revealed .bcm-intro-wordmark-img { clip-path: inset(0 0% 0 0); }
.bcm-intro-wipe-caret {
  position: absolute;
  top: 2%;
  left: 0;
  width: 3px;
  height: 62%;
  background: var(--bcm-teal);
  animation: bcmCaret 1s steps(1) infinite;
  transition: left 1.7s cubic-bezier(.65, 0, .35, 1), opacity .3s ease 1.7s;
}
.bcm-intro-wipe.is-revealed .bcm-intro-wipe-caret { left: 100%; opacity: 0; }
.bcm-intro-hint {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  opacity: 0;
  margin: 18px 0 0;
  transition: opacity .6s ease;
}
.bcm-intro-hint.is-shown { opacity: 1; }

/* The header brand fades in as the intro hands the page over. */
.bcm-brand { transition: opacity .6s ease .15s; }
.bcm-intro-active .bcm-brand { opacity: 0; }

@keyframes bcmCubeIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.82) rotate(-6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes bcmCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* =========================================================
   4. Header
   ========================================================= */

.bcm-header {
  position: relative;
  background: rgba(1, 14, 35, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.bcm-header a { text-decoration: none; }
.bcm-header-inner { padding: 0 40px !important; min-height: 84px; }

.bcm-brand { margin: 0 !important; flex: none; }
.bcm-brand a,
.bcm-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.bcm-footer-brand { margin: 0 !important; }
.bcm-logo-symbol { height: 38px; width: auto; display: block; flex: none; }
.bcm-footer-brand .bcm-logo-symbol { height: 32px; }
/* The real exported wordmark+tagline crop (wordmark-tagline-cream.png,
   same file used on the intro), not live text — sized by height only,
   since its aspect ratio is fixed, so the tagline stays legible rather
   than shrinking to nothing the way the full stacked lockup did.
   Matched to the footer's proportion against its icon (34px next to a
   32px icon) — the header's original 42px read oversized and crowded
   next to its 38px icon. */
.bcm-logo-wordmark-img { height: 34px; width: auto; display: block; }

.bcm-header-right { gap: 40px !important; flex: none; }
.bcm-nav { gap: 34px !important; }
.bcm-nav-link { margin: 0 !important; }
.bcm-nav-link a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82) !important;
  white-space: nowrap;
  transition: color .2s ease;
}
.bcm-nav-link a:hover { color: var(--bcm-teal) !important; }

.bcm-header-cta.wp-block-buttons { margin: 0 !important; }
/* Teal, not orange: this button now points partner organisations to a
   contact email, a different action from the orange participant CTAs
   ("Be Part of BeChangeMaker" etc.), so it needs its own colour to read
   as a distinct choice rather than a duplicate button. Text is navy on
   teal per the brand guideline's contrast table (white-on-teal is
   flagged "avoid" there; night-on-teal is "check"/acceptable). */
.bcm-header-cta .wp-block-button__link {
  background: var(--bcm-teal);
  color: var(--bcm-navy);
  font-size: 15px;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 11px;
  white-space: nowrap;
  transition: background .2s ease;
}
.bcm-header-cta .wp-block-button__link:hover { background: #3fd6cd; color: var(--bcm-navy); }

.bcm-utilities { gap: 8px !important; flex: none; }
/* On desktop the utilities live inside the nav row (last item); a
   hairline sets them apart from the links without needing a separate
   flex container that has to be reasoned about on mobile too. */
.bcm-nav .bcm-utilities { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .16); }
.bcm-appearance-control,
.bcm-translate-control { margin: 0 !important; position: relative; }
.bcm-utility-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  color: rgba(255, 255, 255, .78);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.bcm-utility-btn:hover { border-color: var(--bcm-teal); color: var(--bcm-teal); }
.bcm-utility-btn:focus-visible { outline: 2px solid var(--bcm-teal); outline-offset: 2px; }
.bcm-utility-btn svg { width: 16px; height: 16px; display: block; }
/* Icon shows the theme that is currently active — sun in light, moon
   in dark — not the theme a click would switch to. Only one is ever
   in the layout at once; the button's width never changes. */
/* !important is required here: `.bcm-utility-btn svg` above already sets
   display:block at higher specificity than a bare `.bcm-icon-moon` class
   selector, so without it these show/hide rules lose the cascade and
   both icons render at once. */
.bcm-icon-moon { display: none !important; }
:root.bcm-theme-dark .bcm-icon-sun { display: none !important; }
:root.bcm-theme-dark .bcm-icon-moon { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not(.bcm-theme-light) .bcm-icon-sun { display: none !important; }
  :root:not(.bcm-theme-light) .bcm-icon-moon { display: block !important; }
}

/* Google's own widget is mounted offscreen and driven programmatically,
   so the visible language picker is entirely ours. */
#bcm-gt-host {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
body { top: 0 !important; }
.skiptranslate iframe { display: none !important; }
.goog-logo-link, .goog-te-gadget span, .goog-te-banner-frame { display: none !important; }

.bcm-lang-current { font-size: 12px; font-weight: 700; letter-spacing: .06em; }

.bcm-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 90;
  width: 264px;
  background: var(--bcm-card);
  border: 1px solid var(--bcm-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 24px 48px rgba(1, 14, 35, .28);
  display: block;
  animation: bcmMenuIn .16s ease-out;
}
.bcm-lang-menu[hidden] { display: none; }
@keyframes bcmMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bcm-lang-menu-head {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bcm-text-soft);
  padding: 8px 12px 10px;
}
.bcm-lang-list {
  display: block;
  max-height: 288px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bcm-lang-list::-webkit-scrollbar { width: 8px; }
.bcm-lang-list::-webkit-scrollbar-thumb {
  background: var(--bcm-border-strong);
  border-radius: 4px;
}
.bcm-lang-item {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 10px 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--bcm-text);
  transition: background .15s ease;
}
.bcm-lang-item:hover { background: var(--bcm-surface-alt); }
.bcm-lang-item:focus-visible { outline: 2px solid var(--bcm-teal); outline-offset: -2px; }
.bcm-lang-name { font-size: 14.5px; font-weight: 600; }
.bcm-lang-sub { font-size: 12px; color: var(--bcm-text-soft); margin-left: auto; }
.bcm-lang-item[aria-checked="true"] { background: var(--bcm-surface-alt); }
.bcm-lang-item[aria-checked="true"] .bcm-lang-name { color: var(--bcm-teal); }
.bcm-lang-item[aria-checked="true"] .bcm-lang-sub::after {
  content: "¹3";
  margin-left: 8px;
  color: var(--bcm-teal);
  font-weight: 700;
}
.bcm-lang-note {
  display: block;
  font-size: 11.5px;
  color: var(--bcm-text-soft);
  padding: 10px 12px 4px;
  border-top: 1px solid var(--bcm-border);
  margin-top: 6px;
}

/* =========================================================
   5. Buttons
   ========================================================= */

.bcm-btn-primary .wp-block-button__link { background: var(--bcm-orange); color: #FFFFFF; }
.bcm-btn-primary .wp-block-button__link:hover { background: #ff8154; }
/* Hero CTA only: BCM Cream with Night text, the guideline's own
   "Night on Cream" pass pairing (brand colour + typography page), and the
   same cream used in the wordmark/cube artwork, so it reads as the brand's
   own colour rather than a generic light button. The hero background is
   fixed navy in both themes, so this stays legible either way. */
.bcm-btn-cream .wp-block-button__link { background: var(--bcm-cream); color: var(--bcm-navy); }
.bcm-btn-cream .wp-block-button__link:hover { background: #FBF8F2; }
.bcm-btn-outline-light.wp-block-button .wp-block-button__link {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 12px;
  font-weight: 600;
}
.bcm-btn-outline-light.wp-block-button .wp-block-button__link:hover { border-color: var(--bcm-teal); color: var(--bcm-teal); }
.bcm-btn-outline-dark.wp-block-button .wp-block-button__link {
  background: transparent;
  color: var(--bcm-heading);
  border: 1px solid var(--bcm-border-strong);
  border-radius: 12px;
  font-weight: 600;
}
.bcm-btn-outline-dark.wp-block-button .wp-block-button__link:hover { border-color: var(--bcm-teal); color: var(--bcm-teal); }
.bcm-btn-teal.wp-block-button .wp-block-button__link { background: var(--bcm-teal); color: var(--bcm-navy); font-weight: 700; }
.bcm-btn-teal.wp-block-button .wp-block-button__link:hover { background: #3fd6cd; }
.bcm-btn-dark.wp-block-button .wp-block-button__link { background: var(--bcm-navy); color: #FFFFFF; }
.bcm-btn-dark.wp-block-button .wp-block-button__link:hover { background: var(--bcm-orange); }
:root.bcm-theme-dark .bcm-btn-dark.wp-block-button .wp-block-button__link { background: var(--bcm-teal); color: var(--bcm-navy); }
@media (prefers-color-scheme: dark) {
  :root:not(.bcm-theme-light) .bcm-btn-dark.wp-block-button .wp-block-button__link { background: var(--bcm-teal); color: var(--bcm-navy); }
}

/* =========================================================
   5b. Monday form modal — the embedded form renders on a
   white/cream surface regardless of the embed itself, so the
   frame around it stays fixed-light in both site themes rather
   than flipping to navy, which would clash with the iframe.
   Backdrop is a flat scrim (no blur), per the brand guideline's
   "avoid glass effects, heavy transparency" rule for containers.
   ========================================================= */

.bcm-form-modal { position: fixed; inset: 0; z-index: 3000; }
.bcm-form-modal[hidden] { display: none; }
.bcm-form-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 14, 35, .74);
  opacity: 0;
  transition: opacity .22s ease;
}
.bcm-form-modal.is-open .bcm-form-modal-backdrop { opacity: 1; }

.bcm-form-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(700px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 64px));
  margin: 24px auto;
  background: var(--bcm-card);
  border-radius: 20px;
  box-shadow: var(--bcm-shadow), 0 24px 64px rgba(1, 14, 35, .3);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .24s ease, transform .24s cubic-bezier(.2, .7, .3, 1);
}
.bcm-form-modal.is-open .bcm-form-modal-panel { opacity: 1; transform: translateY(0) scale(1); }
@media (min-height: 620px) { .bcm-form-modal-panel { margin-top: 6vh; } }

.bcm-form-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 18px;
  flex: none;
}
.bcm-form-modal-mark { flex: none; width: 26px; height: auto; }
.bcm-form-modal-mark-night { display: block; }
.bcm-form-modal-mark-cream { display: none; }
:root.bcm-theme-dark .bcm-form-modal-mark-night { display: none; }
:root.bcm-theme-dark .bcm-form-modal-mark-cream { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.bcm-theme-light) .bcm-form-modal-mark-night { display: none; }
  :root:not(.bcm-theme-light) .bcm-form-modal-mark-cream { display: block; }
}
.bcm-form-modal-head-text { flex: 1 1 auto; min-width: 0; }
.bcm-form-modal-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bcm-teal);
  margin: 0 0 3px;
}
.bcm-form-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--bcm-heading);
  text-wrap: balance;
}
.bcm-form-modal-close {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--bcm-border);
  color: var(--bcm-heading);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bcm-form-modal-close svg { width: 16px; height: 16px; }
.bcm-form-modal-close:hover { background: var(--bcm-teal); color: var(--bcm-navy); }

.bcm-form-modal-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 16px 16px 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  /* The embedded form itself always renders white — pinned to the light
     scheme so Android/Chrome's forced-dark mode doesn't invert this card
     independently of our own light/dark toggle. */
  color-scheme: only light;
  box-shadow: inset 0 0 0 1px rgba(1, 14, 35, .08);
}
.bcm-form-modal-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.bcm-form-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  transition: opacity .2s ease;
}
.bcm-form-modal-body.is-loaded .bcm-form-modal-loading { opacity: 0; pointer-events: none; }
.bcm-form-modal-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(1, 14, 35, .12);
  border-top-color: var(--bcm-teal);
  animation: bcmSpin .8s linear infinite;
}
@keyframes bcmSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bcm-form-modal-backdrop,
  .bcm-form-modal-panel { transition: none; }
  .bcm-form-modal-spinner { animation: none; }
}

@media (max-width: 560px) {
  .bcm-form-modal-panel { width: 100%; max-height: 100%; height: 100%; margin: 0; border-radius: 0; }
  .bcm-form-modal-head { padding: 18px 18px 14px; }
  .bcm-form-modal-title { font-size: 18px; }
}

/* =========================================================
   6. Hero — navy in both themes, monogram field behind
   ========================================================= */

.bcm-hero {
  position: relative;
  overflow: hidden;
  background: var(--bcm-navy);
  color: #FFFFFF;
}
/* The monogram field is masked away from the left column so the headline
   sits on clean navy instead of competing with the pattern. */
.bcm-hero::before {
  content: "";
  position: absolute;
  inset: -12%;
  opacity: .06;
  background-image: url(assets/images/bcm-symbol-cream.png);
  background-size: 210px;
  background-repeat: repeat;
  animation: bcmDrift 40s ease-in-out infinite;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 60%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 60%, #000 100%);
}
.bcm-hero > * { position: relative; z-index: 1; }

/* Uneven rhythm: the eyebrow hugs the headline, and the gap opens up
   before the buttons so the call to action reads as the destination.
   Trimmed a step further from the previous pass to lower the whole
   block without flattening the rhythm that made it work. */
.bcm-eyebrow { margin: 0 0 14px !important; }
.bcm-eyebrow-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.bcm-hero h1 { color: #FFFFFF; margin: 0 0 16px !important; }

.bcm-hero-lede {
  font-size: 1.28rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, .94) !important;
  max-width: 30ch;
  margin: 0 0 14px !important;
}
.bcm-hero-sub {
  font-size: .96rem !important;
  line-height: 1.62 !important;
  color: rgba(255, 255, 255, .56) !important;
  max-width: 46ch;
  margin: 0 0 30px !important;
}
.bcm-hero .wp-block-buttons { margin: 0 0 16px !important; }

.bcm-hero-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, .68) !important;
  margin: 0 !important;
}
.bcm-hero-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bcm-teal);
  flex: none;
}

/* Photo treatment: rounded, softly grounded in an ambient dual-colour
   glow, and it dissolves into the navy at the bottom rather than being
   cut off by a hard edge or a clip-path. */
.bcm-hero-image-wrap {
  position: relative;
  height: 100%;
  min-height: 420px;
}
.bcm-hero-image-wrap::before {
  content: "";
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(closest-side at 22% 20%, rgba(22, 194, 184, .30), transparent 70%),
    radial-gradient(closest-side at 82% 88%, rgba(255, 107, 53, .26), transparent 70%);
  filter: blur(46px);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
.bcm-hero-image-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
.bcm-hero-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; display: block; }
.bcm-hero-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(1, 14, 35, .34) 0%, rgba(1, 14, 35, 0) 46%),
              linear-gradient(to top, rgba(1, 14, 35, .5) 0%, rgba(1, 14, 35, 0) 42%);
  pointer-events: none;
}

/* Proof strip: the credibility markers now sit above the fold. */
.bcm-hero-proof {
  margin-top: 40px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  gap: 12px 34px !important;
  align-items: center !important;
}
.bcm-proof-text {
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62) !important;
}
.bcm-proof-text strong { color: rgba(255, 255, 255, .9); font-weight: 600; }
.bcm-hero-proof .bcm-trust-label {
  margin: 0 !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bcm-teal) !important;
}

/* =========================================================
   7. Sections
   ========================================================= */

.bcm-trust-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bcm-text-soft) !important;
}

.bcm-kicker {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--bcm-teal) !important;
  margin-bottom: 10px !important;
}
.bcm-kicker.is-orange { color: var(--bcm-orange) !important; }
.bcm-section-lede { font-size: 1.2rem !important; color: var(--bcm-text-muted) !important; }
.bcm-section-lede.on-dark { color: rgba(255, 255, 255, .70) !important; }

.bcm-programme-card {
  background: var(--bcm-card);
  border: 1px solid var(--bcm-border);
  border-radius: 16px;
  padding: 30px 26px 34px;
}
.bcm-programme-card.is-dark { background: var(--bcm-navy); border-color: var(--bcm-navy); color: #FFFFFF; }
.bcm-programme-card.is-dark h3 { color: #FFFFFF; }
.bcm-programme-card p { color: var(--bcm-text-muted); }
.bcm-programme-card.is-dark p { color: rgba(255, 255, 255, .72) !important; }
.bcm-card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bcm-heading);
}
.bcm-programme-card.is-dark .bcm-card-label { color: #FFFFFF; }
.bcm-programme-card h3 { font-size: 22px !important; margin-bottom: 8px !important; }
.bcm-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 16px !important;
}
.bcm-card-head .bcm-card-label { margin: 0 !important; }

/* Programme icons: inlined SVG (fill: currentColor), coloured via the
   wrapping span's own color style. Simpler and more reliably rendered
   across browsers than a CSS mask-image on external files. */
.bcm-icon-inline { display: block; flex: none; line-height: 0; }
.bcm-icon-inline svg { width: 30px; height: 30px; display: block; }
.bcm-programme-card.is-dark .bcm-icon-inline svg { width: 32px; height: 32px; }
/* The network artwork sits lighter and more landscape within its own
   frame than the other three (thin dotted lines vs. solid silhouettes),
   so it reads small at the same box size — sized up to match visual
   weight, with a small negative margin so it doesn't push the label
   further right than the others. */
.bcm-icon-inline.icon-connect svg { width: 42px; height: 42px; margin: -4px -3px; }

.bcm-journey { background: var(--bcm-navy); color: #FFFFFF; position: relative; overflow: hidden; }
.bcm-journey h2, .bcm-journey h3 { color: #FFFFFF; }
/* Journey timeline. Milestones use rounded-square nodes per the brand
   guideline: squares mark stages, circles are reserved for people. */
.bcm-journey-stage { position: relative; }
.bcm-stage-marker {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 26px !important;
}
.bcm-stage-num {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .04);
  color: var(--bcm-stage-color, var(--bcm-teal));
  border: 2px solid var(--bcm-stage-color, var(--bcm-teal));
  transition: background .3s ease, box-shadow .3s ease;
}
.bcm-stage-marker::after {
  content: "";
  flex: 1;
  height: 2px;
  margin-left: 14px;
  background: linear-gradient(90deg, var(--bcm-stage-color, var(--bcm-teal)), rgba(255, 255, 255, .10));
}
.bcm-journey-stage.stage-1 { --bcm-stage-color: var(--bcm-teal); }
.bcm-journey-stage.stage-2 { --bcm-stage-color: #6FC5C0; }
.bcm-journey-stage.stage-3 { --bcm-stage-color: var(--bcm-orange); }
.bcm-journey-stage.stage-3 .bcm-stage-marker::after {
  background: linear-gradient(90deg, var(--bcm-orange), rgba(255, 107, 53, 0));
}
.bcm-journey-stage:hover .bcm-stage-num {
  background: var(--bcm-stage-color);
  color: var(--bcm-navy);
}
.bcm-journey-stage-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bcm-stage-color, var(--bcm-teal)) !important;
  margin-bottom: 10px !important;
}
.bcm-journey-stage h3 { font-size: 25px !important; margin-bottom: 12px !important; }
.bcm-journey-stage p { color: rgba(255, 255, 255, .72); line-height: 1.72; max-width: 34em; }
.bcm-journey-cta-row {
  margin-top: 20px !important;
  padding-top: 30px !important;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.bcm-journey-cta-note { color: rgba(255, 255, 255, .62) !important; }

.bcm-stat-card {
  background: var(--bcm-card);
  border: 1px solid var(--bcm-border);
  border-radius: 14px;
  padding: 28px 24px;
}
.bcm-stat-number {
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  color: var(--bcm-heading) !important;
  margin-bottom: 6px !important;
}
.bcm-stat-number.is-orange { color: var(--bcm-orange) !important; }
.bcm-stat-caption { font-size: 14.5px !important; color: var(--bcm-text-muted) !important; }
.bcm-callout-box {
  margin: 22px 0 !important;
  padding: 22px 24px;
  background: var(--bcm-surface-alt);
  border-left: 3px solid var(--bcm-orange);
  border-radius: 0 12px 12px 0;
}
.bcm-callout-box h4 { font-size: 19px !important; margin: 0 0 8px !important; }
.bcm-callout-box p { margin: 0 !important; }
.bcm-partner-panel {
  background: var(--bcm-card);
  border: 1px solid var(--bcm-border);
  border-radius: 16px;
  padding: 32px 28px;
}
/* Partner marks sit on a white tile in both themes. The HP mark is solid
   black and the UNEVOC mark is solid blue, so neither is legible on the
   dark-mode card, and recolouring a partner logo is not permitted. */
.bcm-partner-logo {
  margin: 0 0 12px !important;
  height: 92px;
  background: #FFFFFF !important;
  border: 1px solid var(--bcm-border);
  border-radius: 10px;
  display: flex;
  /* Pins this tile to the light scheme so Android/Chrome's forced-dark
     rendering doesn't invert the white background back to a dark one
     even though the color is set explicitly. */
  color-scheme: only light;
}
/* Factored once and reused by every partner logo link: fills the whole
   tile (the padding that used to live on .bcm-partner-logo moved here)
   so the entire card is clickable, not just the visible logo pixels,
   whatever the tile's height (.bcm-hosted-logo / .bcm-partner-logo-unevoc). */
.bcm-partner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px 20px;
}
.bcm-partner-logo img {
  max-height: 100%;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.bcm-hosted-logo { height: 104px; }
.bcm-hosted-logo img { max-width: 210px; }
/* The UNESCO-UNEVOC mark is a tall stacked lockup with a small line of type
   under "UNESCO", so at the shared 92px height that text is unreadable. Give
   this tile more room than the wide HP/YMCA marks. */
.bcm-partner-logo-unevoc { height: 172px; }
.bcm-partner-logo-unevoc img { max-width: 172px; }
.bcm-partner-divider {
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid var(--bcm-border);
}

/* --- Participant stories: alternating editorial rows --- */
.bcm-story { margin-bottom: 64px !important; }
.bcm-story:last-of-type { margin-bottom: 0 !important; }
.bcm-story.is-reversed { flex-direction: row-reverse; }

.bcm-story-photo {
  margin: 0 !important;
  line-height: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bcm-navy);
}
.bcm-story-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
/* A single accent edge ties the photo to the team colour without
   adding a floating decoration. */
.bcm-story-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
}
.bcm-story-photo.is-teal::after { background: var(--bcm-teal); }
.bcm-story-photo.is-orange::after { background: var(--bcm-orange); }

.bcm-story-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px !important;
}
.bcm-story-team {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bcm-text-soft);
}
.bcm-story-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid;
}
.bcm-story:not(.is-reversed) .bcm-story-badge {
  color: var(--bcm-teal);
  border-color: rgba(22, 194, 184, .45);
  background: rgba(22, 194, 184, .10);
}
.bcm-story.is-reversed .bcm-story-badge {
  color: var(--bcm-orange);
  border-color: rgba(255, 107, 53, .45);
  background: rgba(255, 107, 53, .10);
}

.bcm-story h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em;
  margin: 0 0 18px !important;
  max-width: 18ch;
}
.bcm-story-text {
  font-size: 16.5px !important;
  line-height: 1.75 !important;
  color: var(--bcm-text-muted) !important;
  max-width: 52ch;
  margin: 0 !important;
}

.bcm-story-by {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 26px 0 0 !important;
  padding-left: 16px;
  border-left: 2px solid var(--bcm-border-strong);
}
.bcm-story:not(.is-reversed) .bcm-story-by { border-left-color: var(--bcm-teal); }
.bcm-story.is-reversed .bcm-story-by { border-left-color: var(--bcm-orange); }
.bcm-story-people {
  font-size: 15px;
  font-weight: 700;
  color: var(--bcm-heading);
}
.bcm-story-where {
  font-size: 13px;
  font-weight: 500;
  color: var(--bcm-text-soft);
}

/* --- Global community: world map --- */
.bcm-community-head {
  gap: 40px !important;
  margin-bottom: 8px !important;
}
.bcm-community-intro { max-width: 40em; }
.bcm-community-figure {
  text-align: right;
  margin: 0 !important;
  flex: none;
}
.bcm-figure-number {
  display: block;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: #FFFFFF !important;
  font-variant-numeric: tabular-nums;
}
.bcm-figure-caption {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.bcm-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1240 / 700;
  margin: 26px 0 8px !important;
}
.bcm-map-base { margin: 0 !important; line-height: 0; }
.bcm-map-base img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.bcm-map-legend {
  gap: 10px 24px !important;
  align-items: center !important;
  margin-top: 22px !important;
}
.bcm-map-legend-label {
  margin: 0 !important;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
  flex: none;
}
.bcm-map-legend-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 !important;
}
.bcm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .84);
}
.bcm-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.bcm-legend-pct { margin-left: 5px; color: rgba(255, 255, 255, .5); font-weight: 400; }

.bcm-map-src {
  margin: 14px 0 0 !important;
  max-width: 34em;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, .42) !important;
}

.bcm-contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--bcm-card);
  border: 1px solid var(--bcm-border);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none !important;
  color: var(--bcm-heading) !important;
  transition: border-color .2s ease;
}
.bcm-contact-link:hover { border-color: var(--bcm-teal); }
.bcm-contact-link-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bcm-text-soft);
  margin-bottom: 5px;
}
.bcm-contact-link-value { font-size: 18px; font-weight: 600; }
.bcm-contact-arrow { font-size: 20px; color: var(--bcm-teal); }

/* =========================================================
   8. Footer and page template
   ========================================================= */

.bcm-footer { background: var(--bcm-navy); color: rgba(255, 255, 255, .64); }
.bcm-footer a { color: rgba(255, 255, 255, .64) !important; text-decoration: none; }
.bcm-footer a:hover { color: var(--bcm-teal) !important; }
.bcm-footer-legal { font-size: 13px; color: rgba(255, 255, 255, .48); }
.bcm-footer-legal a { color: rgba(255, 255, 255, .58) !important; }

.bcm-page-title-band {
  background: var(--bcm-navy);
  color: #FFFFFF;
  padding: 88px 40px 64px;
}
.bcm-page-title-band .wp-block-post-title { color: #FFFFFF; margin: 0; }

/* =========================================================
   9. Cards
   ========================================================= */

.equal-cards > .wp-block-column { display: flex; flex-direction: column; flex-grow: 0; }
.equal-cards > .wp-block-column > .wp-block-group { display: flex; flex-direction: column; flex-grow: 1; }
.equal-cards .cta-bottom { margin-top: auto; justify-content: center; }

/* =========================================================
   10. Motion
   ========================================================= */

@keyframes bcmDrift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-26px, -18px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

.fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp .7s ease forwards; }
.fade-in { opacity: 0; animation: fadeIn .8s ease forwards; }

.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

.stagger-children > * { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: .08s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: .16s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: .24s; }
.stagger-children.is-visible > * { opacity: 1; transform: translateY(0); }

.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--bcm-shadow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .animate-on-scroll, .fade-up, .fade-in, .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .bcm-intro-logo { opacity: 1 !important; transform: none !important; }
}

.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .fade-in,
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.editor-styles-wrapper .bcm-intro { display: none !important; }

/* =========================================================
   11. Header behaviour: auto-hide on scroll down, burger on small screens
   ========================================================= */

:root { --bcm-header-h: 84px; }

/* WordPress wraps a template part in its own element, so the sticky and the
   show/hide transform must live on that wrapper. A sticky child can only stick
   inside its parent box, and the wrapper is only as tall as the header. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.wp-site-blocks > header.is-hidden { transform: translateY(-100%); }
.wp-site-blocks > header.is-stuck .bcm-header { box-shadow: 0 10px 30px rgba(1, 14, 35, .38); }
.bcm-menu-open .wp-site-blocks > header { transform: none !important; }

/* Anchor targets clear the sticky header instead of hiding beneath it. */
#top, #programme, #journey, #about, #stories, #contact, #main-content {
  scroll-margin-top: calc(var(--bcm-header-h) + 12px);
}

.bcm-menu-control { display: none; }
.bcm-burger { padding: 10px 11px; }
.bcm-burger-box {
  width: 18px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bcm-burger-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
  transform-origin: center;
}
.bcm-menu-open .bcm-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bcm-menu-open .bcm-burger-bar:nth-child(2) { opacity: 0; }
.bcm-menu-open .bcm-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks > header { transition: none; }
  .wp-site-blocks > header.is-hidden { transform: none; }
}

/* =========================================================
   12. Responsive
   ========================================================= */

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

/* --- Laptop --- */
@media (max-width: 1280px) {
  .bcm-header-right { gap: 24px !important; }
  .bcm-nav { gap: 22px !important; }
  .bcm-nav-link a { font-size: 14px; }
  .bcm-header-inner { padding: 0 28px !important; }
}

/* --- Tablet landscape: 4-up grids become 2-up --- */
@media (max-width: 1080px) {
  .equal-cards { flex-wrap: wrap !important; }
  .equal-cards > .wp-block-column {
    flex-basis: calc(50% - 10px) !important;
    flex-grow: 0 !important;
  }
  .bcm-journey .wp-block-columns { flex-wrap: wrap !important; gap: 40px 28px !important; }
  .bcm-journey .bcm-journey-stage { flex-basis: calc(50% - 14px) !important; }
}

/* --- Burger takes over --- */
@media (max-width: 940px) {
  :root { --bcm-header-h: 72px; }
  .bcm-header-inner { min-height: 72px; padding: 0 24px !important; }
  .bcm-menu-control { display: block; }
  .bcm-header-right { gap: 14px !important; }

  .bcm-nav {
    position: fixed;
    top: var(--bcm-header-h);
    left: 0;
    right: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #060f21;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 6px 24px 22px;
    max-height: calc(100vh - var(--bcm-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .26s ease, transform .26s cubic-bezier(.16, 1, .3, 1), visibility .26s;
    box-shadow: 0 20px 40px rgba(1, 14, 35, .45);
  }
  .bcm-menu-open .bcm-nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .bcm-nav-link a {
    display: block;
    padding: 16px 2px;
    font-size: 17px !important;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  /* :last-of-type (not :last-child) because the utilities row is now
     the panel's actual last child, sitting after the five nav links. */
  .bcm-nav-link:last-of-type a { border-bottom: none; }

  /* Theme + language controls move into the panel with the links,
     instead of crowding the always-visible bar. */
  .bcm-nav .bcm-utilities {
    padding-left: 0;
    border-left: none;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    gap: 10px !important;
  }
  .bcm-nav .bcm-utility-btn { padding: 11px 14px; }

  .bcm-menu-open { overflow: hidden; }

  /* Without JS the panel can never open, so show the links inline instead. */
  html:not(.js) .bcm-nav { position: static; opacity: 1; visibility: visible; transform: none; }
  html:not(.js) .bcm-menu-control { display: none; }
}

/* --- Tablet portrait --- */
@media (max-width: 900px) {
  .bcm-hero { padding-top: 64px !important; padding-bottom: 64px !important; }
  .bcm-hero h1 { font-size: clamp(2.3rem, 6.4vw, 3.4rem) !important; }
  .bcm-page-title-band { padding: 64px 24px 48px; }
  .bcm-story { margin-bottom: 48px !important; }
  .bcm-map-meta { display: none; }
  .bcm-map-name { font-size: 13px; }
}

/* --- Mobile --- */
@media (max-width: 782px) {
  .bcm-header-inner { padding: 0 18px !important; }
  .bcm-nav { padding: 6px 18px 22px; }

  /* Theme/language now live inside the slide-down panel (see the 940px
     block above), so the always-visible bar is just logo, a compact
     CTA and the burger — a normal single-row mobile navbar, no wrap
     or full-width stretching needed. */
  .bcm-header-right { gap: 10px !important; }

  /* Every full-bleed section shares one comfortable gutter. */
  .wp-site-blocks main > .wp-block-group.alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .bcm-hero { padding-top: 48px !important; padding-bottom: 52px !important; }

  .bcm-hero h1 { font-size: clamp(2.1rem, 8.4vw, 2.9rem) !important; line-height: 1.08 !important; }
  .bcm-hero-lede { font-size: 1.1rem !important; max-width: none; margin-bottom: 14px !important; }
  .bcm-hero-sub { font-size: .94rem !important; max-width: none; margin-bottom: 28px !important; }
  .bcm-hero-proof { margin-top: 36px !important; padding-top: 20px; gap: 10px 20px !important; }
  .bcm-proof-text { font-size: 13.5px !important; }
  .bcm-hero-image-wrap { min-height: 0; height: 260px; margin-top: 28px; }
  .bcm-hero-image-wrap::before { filter: blur(30px); }
  .bcm-hero-image-frame {
    border-radius: 14px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  }
  .bcm-hero-image-frame::after {
    background: linear-gradient(to top, rgba(1, 14, 35, .5) 0%, rgba(1, 14, 35, 0) 50%);
  }

  h2.wp-block-heading { font-size: clamp(1.7rem, 6.6vw, 2.2rem) !important; }
  .bcm-section-lede { font-size: 1.02rem !important; }

  /* Grids collapse to a single column. */
  .equal-cards > .wp-block-column,
  .bcm-journey .bcm-journey-stage {
    flex-basis: 100% !important;
  }
  .wp-block-columns { gap: 20px !important; }

  .bcm-programme-card { padding: 24px 20px 26px; }
  .bcm-programme-card h3 { font-size: 20px !important; }

  .bcm-stage-num { width: 46px; height: 46px; border-radius: 13px; font-size: 15px; }
  .bcm-journey-stage h3 { font-size: 22px !important; }
  .bcm-journey-cta-row { flex-direction: column; align-items: flex-start !important; }

  .bcm-stat-card { padding: 22px 20px; }
  .bcm-stat-number { font-size: 2rem !important; }

  .bcm-story { margin-bottom: 40px !important; }
  .bcm-story.is-reversed { flex-direction: column; }
  .bcm-story .wp-block-column { flex-basis: 100% !important; }
  .bcm-story-photo img { aspect-ratio: 16 / 10; }
  .bcm-story h3 { max-width: none; font-size: 1.4rem !important; }
  .bcm-story-text { font-size: 15.5px !important; max-width: none; }
  .bcm-story-text { font-size: 15px !important; line-height: 1.72 !important; }

  .bcm-map { margin: 20px 0 4px !important; }
  .bcm-map-legend { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .bcm-legend-item { font-size: 12.5px; }
  .bcm-map-src { margin: 14px 0 0 !important; max-width: none; }
  .bcm-community-head { flex-direction: column; align-items: flex-start !important; gap: 20px !important; }
  .bcm-community-figure { text-align: left; }

  .bcm-partner-panel { padding: 24px 20px; }
  .bcm-contact-link { padding: 18px 18px; }
  .bcm-contact-link-value { font-size: 16px; }

  .bcm-footer { padding-left: 20px !important; padding-right: 20px !important; }
  .bcm-footer-legal { flex-direction: column; align-items: flex-start !important; }

  /* Language menu can no longer hang off the right edge. */
  .bcm-lang-menu {
    position: fixed;
    top: calc(var(--bcm-header-h) + 10px);
    left: 16px;
    right: 16px;
    width: auto;
  }

  /* Buttons go full width so they are easy to hit. */
  .wp-block-buttons:not(.bcm-header-cta) { width: 100%; }
  .wp-block-buttons:not(.bcm-header-cta) .wp-block-button { width: 100%; }
  .wp-block-buttons:not(.bcm-header-cta) .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }
  .bcm-header-cta .wp-block-button__link { font-size: 13.5px; padding: 11px 16px; }

  /* Shorter travel so reveals feel quick rather than laggy on a phone. */
  .animate-on-scroll { transform: translateY(16px); }
  .stagger-children > * { transform: translateY(12px); }
  .fade-up { transform: translateY(14px); }

  /* The tiled monogram is expensive to animate on mobile GPUs. */
  .bcm-hero::before { animation: none; background-size: 150px; }
}

/* --- Small phones --- */
@media (max-width: 560px) {
  /* Header only: the logo shares the row with the CTA and burger, so the
     wordmark drops to just the icon there. The footer stacks vertically
     with room to spare, so it keeps the full wordmark + tagline image. */
  .bcm-brand .bcm-logo-wordmark-img { display: none; }
  .bcm-logo-symbol { height: 34px; }
  .bcm-footer-brand .bcm-logo-wordmark-img { height: 30px; }
  .bcm-utilities { gap: 6px !important; }
  .bcm-utility-btn { padding: 9px 10px; }
  .bcm-hero-proof { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .bcm-intro-logo { width: 96px; }
  .bcm-intro-wordmark-img { width: clamp(190px, 62vw, 280px); }
}

/* Comfortable touch targets on any touch device. */
@media (hover: none) and (pointer: coarse) {
  .bcm-utility-btn { min-height: 44px; min-width: 44px; }
  .bcm-lang-item { min-height: 44px; }
  .hover-lift:hover { transform: none; box-shadow: none; }
}

/* Landscape phones: the intro must not overflow a short viewport. */
@media (max-height: 460px) and (orientation: landscape) {
  .bcm-intro { gap: 10px; }
  .bcm-intro-logo { width: 72px; margin-bottom: 4px; }
  .bcm-intro-wordmark-img { width: clamp(150px, 40vh, 220px); }
}