/* ==========================================================================
   Beyond Movement — V2 landing page
   Figma: beyond-movement-v2 (node 80:745) — 1570 x 11825
   Stack: HTML5 + CSS3 + Bootstrap 5.3 (no other frameworks)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens (mapped 1:1 from the Figma file)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --bm-teal:        #005252;
  --bm-teal-dark:   #013e3e;
  --bm-green:       #2db572;
  --bm-mint:        #eef5f3;

  /* Text */
  --bm-ink:         #121212;
  --bm-ink-2:       #222222;
  --bm-body:        #757575;
  --bm-body-2:      #4e595d;
  --bm-muted:       #777777;
  --bm-grey:        #9e9e9e;
  --bm-para:        #444141;
  --bm-tab-idle:    #708f87;
  --bm-link-ink:    #31333e;

  /* Surface */
  --bm-white:       #ffffff;
  --bm-offwhite:    #f3f2f2;
  --bm-chip:        #f2f3f6;
  --bm-line:        #e7e7e7;
  --bm-hairline:    rgba(18, 18, 18, .1);
  --bm-card-line:   rgba(0, 0, 0, .08);

  /* Type */
  --bm-font-display: 'Gotu', serif;
  --bm-font-sans:    'Archivo', sans-serif;
  --bm-font-ui:      'Inter', sans-serif;

  /* Layout — Figma frame is 1570 wide with 20px gutters => 1530 content */
  --bm-shell:        1530px;
  --bm-gutter:       20px;

  /* Radii */
  --bm-r-pill:      99px;
  --bm-r-40:        40px;
  --bm-r-30:        30px;
  --bm-r-20:        20px;
  --bm-r-15:        15px;
  --bm-r-50:        50px;

  /* Motion */
  --bm-ease:        cubic-bezier(.22, .61, .36, 1);
  --bm-dur:         .7s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bm-white);
  color: var(--bm-ink);
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Flex/grid children default to min-width:auto, which lets long words and wide
   media force a parent wider than the viewport. This is the usual cause of a
   stray horizontal scrollbar. */
.bm-page,
.bm-page * { min-width: 0; }
a   { text-decoration: none; color: inherit; }
p   { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
ul  { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--bm-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout shell
   -------------------------------------------------------------------------- */
.bm-page {
  width: 100%;
  max-width: calc(var(--bm-shell) + (var(--bm-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--bm-gutter);
}

/* Inner content rail used by most sections (max 1350 in Figma) */
.bm-rail {
  width: 100%;
  max-width: 1350px;
  margin-inline: auto;
}
/* Add AFTER your existing .bm-nav__link and :hover rules */
.bm-nav__link[aria-current="page"] {
  color: var(--bm-teal, #0F4C4A);
  font-weight: bold;
}

.bm-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* required for the underline to position */
.bm-nav__link { position: relative; }
/* --------------------------------------------------------------------------
   4. Shared typography
   -------------------------------------------------------------------------- */
.bm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9.1px 19.8px 4.9px 17.7px;
  border: 1px solid var(--bm-hairline);
  border-radius: var(--bm-r-50);
  font-family: var(--bm-font-display);
  font-size: 16px;
  line-height: 22.4px;
  letter-spacing: 1.6px;
  text-transform: capitalize;
  color: var(--bm-muted);
  background: transparent;
}
.bm-eyebrow--solid { background: var(--bm-white); }

.bm-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--bm-teal);
  flex: 0 0 auto;
}

.bm-h1 { font-family: var(--bm-font-display); font-size: 64px; line-height: 76.8px; color: var(--bm-ink); }
.bm-h2 { font-family: var(--bm-font-display); font-size: 50px; line-height: 60px;   color: var(--bm-ink); }
.bm-h3 { font-family: var(--bm-font-display); font-size: 30px; line-height: 42px;   color: var(--bm-ink); }

.bm-lead { font-family: var(--bm-font-sans); font-size: 19px; line-height: 28.5px; color: var(--bm-para); }
.bm-text { font-family: var(--bm-font-ui);   font-size: 16px; line-height: 30.4px; color: var(--bm-body); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
/* Arrow puck — white circle (40px outer) + exported arrow asset (16px leaf) */
.bm-arrow {
  width: 40px;
  height: 40px;
  border-radius: var(--bm-r-20);
  background: var(--bm-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .45s var(--bm-ease);
}
.bm-arrow img {
  /* width: 15.994px;
  height: 15.994px; */
  transform: rotate(290deg) scaleY(-1);
}

.bm-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px 6px 30px;
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal);
  font-family: var(--bm-font-sans);
  font-weight: 800;
  font-size: 13px;
  line-height: 20.15px;
  letter-spacing: .52px;
  text-transform: uppercase;
  color: var(--bm-offwhite);
  white-space: nowrap;
  transition: background .35s var(--bm-ease), box-shadow .35s var(--bm-ease),
              transform .35s var(--bm-ease);
}

.bm-btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-right: 10px;
  padding-left: 30px;
  border-radius: var(--bm-r-40);
  background: var(--bm-teal);
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 56px;
  color: var(--bm-white);
  white-space: nowrap;
  transition: background .35s var(--bm-ease), box-shadow .35s var(--bm-ease),
              transform .35s var(--bm-ease);
}

.bm-btn-pill:hover,
.bm-btn-round:hover {
  background: var(--bm-teal-dark);
  color: var(--bm-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 82, 82, .25);
}
.bm-btn-pill:hover .bm-arrow,
.bm-btn-round:hover .bm-arrow { transform: rotate(45deg); }

.bm-readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase;
  color: var(--bm-link-ink);
  transition: color .3s var(--bm-ease), gap .3s var(--bm-ease);
}
.bm-readmore img {
  width: 16px;
  height: 16px;
  transform: scaleY(-1);
  transition: transform .35s var(--bm-ease);
}
.bm-readmore:hover { color: var(--bm-teal); gap: 14px; }
.bm-readmore:hover img { transform: scaleY(-1) translateX(3px); }

/* --------------------------------------------------------------------------
   6. Scroll-reveal animation engine
   Opt in per element with data-anim="up|down|left|right|zoom"
   Stagger with style="--bm-delay:120ms"
   -------------------------------------------------------------------------- */
/* Gated on .bm-js (set by an inline script) so the page is fully visible
   if JavaScript is blocked, fails, or the file is opened offline.
   Without this gate every animated element stays at opacity:0 forever. */
.bm-js [data-anim] {
  opacity: 0;
  transition: opacity var(--bm-dur) var(--bm-ease),
              transform var(--bm-dur) var(--bm-ease);
  transition-delay: var(--bm-delay, 0ms);
  will-change: opacity, transform;
}
.bm-js [data-anim="up"]    { transform: translate3d(0, 42px, 0); }
.bm-js [data-anim="down"]  { transform: translate3d(0, -42px, 0); }
.bm-js [data-anim="left"]  { transform: translate3d(-52px, 0, 0); }
.bm-js [data-anim="right"] { transform: translate3d(52px, 0, 0); }
.bm-js [data-anim="zoom"]  { transform: scale(.94); }

.bm-js [data-anim].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bm-js [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bm-marquee__track { animation: none !important; }
}

/* Responsive type scale — sizes step down but the hierarchy stays identical */
@media (max-width: 1199.98px) {
  .bm-h1 { font-size: 52px; line-height: 62px; }
  .bm-h2 { font-size: 42px; line-height: 52px; }
  .bm-h3 { font-size: 26px; line-height: 36px; }
}
@media (max-width: 991.98px) {
  .bm-h1 { font-size: 44px; line-height: 54px; }
  .bm-h2 { font-size: 36px; line-height: 46px; }
  .bm-lead { font-size: 17px; line-height: 27px; }
}
@media (max-width: 575.98px) {
  :root { --bm-gutter: 14px; }
  .bm-h1 { font-size: 34px; line-height: 43px; }
  .bm-h2 { font-size: 29px; line-height: 39px; }
  .bm-h3 { font-size: 23px; line-height: 33px; }
  .bm-lead { font-size: 16px; line-height: 26px; }
  .bm-text { font-size: 15px; line-height: 28px; }
  .bm-btn-round { line-height: 50px; font-size: 14px; padding-left: 24px; }
}

/* ==========================================================================
   S1 — HEADER  (Figma 80:746, h 101)
   ========================================================================== */
.bm-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--bm-white);
  transition: box-shadow .35s var(--bm-ease);
}
.bm-header.is-stuck { box-shadow: 0 6px 26px rgba(18, 18, 18, .07); }

.bm-header__inner {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Left cluster is 956px wide in Figma and space-between inside */
.bm-header__left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex: 1 1 auto;
  max-width: 870px;
}

/* Brand ------------------------------------------------------------------ */
.bm-brand { display: flex; align-items: flex-start; gap: 0; }
.bm-brand__mark {
  width: 43px;
  height: 30px;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}
.bm-brand__mark img {
  position: absolute;
  left: 1.18%;
  top: -16.27%;
  width: 100%;
  height: 133.17%;
  max-width: none;
}
.bm-brand__name {
  font-family: var(--bm-font-sans);
  font-weight: 800;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
}
.bm-brand__tag {
  padding-top: 4px;
  font-family: var(--bm-font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--bm-grey);
}

/* Nav -------------------------------------------------------------------- */
.bm-nav {
    display: flex;
    align-items: center;
    background-color: #ECECEC;
    padding: 12px;
    border-radius: 30px;
}
.bm-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-inline: 16px;
}
.bm-nav__link {
  position: relative;
  font-family: var(--bm-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 26.6px;
  text-transform: uppercase;
  color: var(--bm-ink-2);
  white-space: nowrap;
  transition: color .3s var(--bm-ease);
}
.bm-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1.5px;
  background: var(--bm-teal);
  transition: width .35s var(--bm-ease);
}
.bm-nav__link:hover { color: var(--bm-teal); }
.bm-nav__link:hover::after { width: 100%; }

/* Burger ----------------------------------------------------------------- */
.bm-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--bm-hairline);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
}
.bm-burger span {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--bm-ink);
  transition: transform .35s var(--bm-ease), opacity .25s var(--bm-ease);
}
.bm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.bm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 1199.98px) {
  .bm-header__left { width: auto; flex: 1 1 auto; }
  .bm-burger { display: flex; }

  .bm-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;

    /* reset the desktop pill — this is what was leaking */
    padding: 0;
    border-radius: 0;
    background: var(--bm-white);

    border-top: 1px solid var(--bm-hairline);
    box-shadow: 0 18px 34px rgba(18, 18, 18, .08);

    max-height: 0;
    overflow: hidden;
    visibility: hidden;          /* keeps links out of the tab order */
    transition: max-height .45s var(--bm-ease), visibility .45s;
  }

  .bm-nav.is-open {
    max-height: 420px;
    visibility: visible;
  }

  .bm-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 20px 18px;
    width: 100%;
  }
  .bm-nav__list li { width: 100%; }
  .bm-nav__link { display: block; padding: 12px 0; font-size: 15px; }
}

@media (max-width: 767.98px) {
  .bm-header__inner { min-height: 84px; gap: 12px; }
  .bm-header__cta .bm-btn-pill { padding: 6px 6px 6px 20px; font-size: 11.5px; }
  .bm-header__cta .bm-arrow { width: 34px; height: 34px; }
}
@media (max-width: 575.98px) {
  .bm-header__cta { display: none; }
  .bm-brand__name { font-size: 14px; letter-spacing: 1.6px; }
  .bm-brand__tag  { font-size: 9px;  letter-spacing: 1.7px; }
}

/* ==========================================================================
   S2 — HERO CAROUSEL  (Figma 80:778, h 731, r 30 — extended into a carousel)
   ========================================================================== */
.bm-hero {
  position: relative;
  min-height: 731px;
  border-radius: var(--bm-r-30);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

/* Background photo stack — cross-fades between slides */
.bm-hero__slides { position: absolute; inset: 0; }
.bm-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--bm-ease);
}
.bm-hero__slide.is-active { opacity: 1; }
.bm-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Gradient overlay — Figma: to-left, rgba(0,0,0,.4) from 40% -> rgba(248,248,248,.5) */
.bm-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, .4) 40%, rgba(248, 248, 248, .5) 100%);
}

/* Persistent glass card — sits 161px from top / 113.5px from left, as in Figma */
.bm-hero__card {
  position: relative;
  z-index: 2;
  width: 970.6px;
  max-width: calc(100% - 30px);
  margin: 161px 15px 120px 113.5px;
  display: flex;
  flex-direction: column;
  gap: 29.4px;
  padding: 50.8px 60.8px 58.8px;
  border: 1px solid var(--bm-white);
  border-radius: var(--bm-r-20);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(2px);
}

/* Copy cross-fade stack inside the card */
.bm-hero__copystack { position: relative; min-height: 160px; }
.bm-hero__copyslide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 29.4px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .6s var(--bm-ease), transform .6s var(--bm-ease);
}
.bm-hero__copyslide.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bm-hero__copy { width: 100%; max-width: 849px; }

/* Arrows */
.bm-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--bm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--bm-ease), transform .3s var(--bm-ease), color .3s var(--bm-ease);
}
.bm-hero__arrow svg { width: 22px; height: 22px; }
.bm-hero__arrow:hover { background: var(--bm-teal); color: var(--bm-white); }
.bm-hero__arrow--prev { left: 24px; }
.bm-hero__arrow--next { right: 24px; }
.bm-hero__arrow:active { transform: translateY(-50%) scale(.92); }

/* Dots */
.bm-hero__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.bm-hero__dots button {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .55);
  transition: width .35s var(--bm-ease), background .35s var(--bm-ease);
}
.bm-hero__dots button.is-active { width: 28px; background: var(--bm-white); }

/* Booking bar ------------------------------------------------------------- */
.bm-booking {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px 12px 20px;
  border: 1px solid #000;
  border-radius: var(--bm-r-pill);
  background: rgba(255, 255, 255, .21);
}
.bm-fieldgroup { position: relative; }
.bm-booking__field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bm-font-sans);
  font-size: 20px;
  line-height: 31px;
  color: var(--bm-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s var(--bm-ease);
  max-width: 220px;
}
.bm-booking__field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-booking__field:hover,
.bm-booking__field[aria-expanded="true"] { color: var(--bm-teal); }
.bm-booking__field img { width: 24px; height: 24px; flex: 0 0 auto; }
.bm-fieldgroup__chev {
  width: 10px;
  height: 8px;
  flex: 0 0 auto;
  margin-left: 2px;
  transition: transform .3s var(--bm-ease);
}
.bm-booking__field[aria-expanded="true"] .bm-fieldgroup__chev { transform: rotate(180deg); }
.bm-booking__rule {
  width: 1px;
  height: 36px;
  background: rgba(0, 0, 0, .35);
  flex: 0 0 auto;
}
.bm-booking .bm-btn-pill { margin-left: auto; flex: 0 0 auto; }
.bm-booking .bm-btn-pill span { display: flex; }

/* Shared floating panel chrome (dropdown + datepicker)
   Positioned as position:fixed and reparented to <body> by JS on open, so
   they escape any ancestor's overflow:hidden (the hero needs that for its
   rounded photo carousel, which would otherwise clip these panels). */
.bm-dropdown,
.bm-datepicker {
  position: fixed;
  z-index: 5000;
  min-width: 240px;
  background: var(--bm-white);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(18, 18, 18, .18);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s var(--bm-ease), transform .22s var(--bm-ease);
}
.bm-dropdown.is-open,
.bm-datepicker.is-open { opacity: 1; transform: none; pointer-events: auto; }
.bm-dropdown[hidden],
.bm-datepicker[hidden] { display: block; }

.bm-dropdown { display: flex; flex-direction: column; gap: 2px; }
.bm-dropdown button {
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: var(--bm-font-ui);
  font-size: 15px;
  color: var(--bm-ink);
  transition: background .2s var(--bm-ease), color .2s var(--bm-ease);
}
.bm-dropdown button:hover,
.bm-dropdown button:focus-visible { background: var(--bm-mint); color: var(--bm-teal); }

/* Date picker -------------------------------------------------------------- */
.bm-datepicker { min-width: 280px; padding: 14px; }
.bm-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bm-datepicker__month { font-family: var(--bm-font-display); font-size: 16px; color: var(--bm-ink); }
.bm-datepicker__nav {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--bm-body);
  transition: background .2s var(--bm-ease), color .2s var(--bm-ease);
}
.bm-datepicker__nav:hover { background: var(--bm-mint); color: var(--bm-teal); }
.bm-datepicker__weekdays,
.bm-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.bm-datepicker__weekdays span {
  font-family: var(--bm-font-ui);
  font-size: 12px;
  color: var(--bm-body);
  padding-bottom: 6px;
}
.bm-datepicker__grid button {
  aspect-ratio: 1;
  border-radius: 8px;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  color: var(--bm-ink);
  transition: background .2s var(--bm-ease), color .2s var(--bm-ease);
}
.bm-datepicker__grid button:disabled { color: var(--bm-line); pointer-events: none; }
.bm-datepicker__grid button:not(:disabled):hover { background: var(--bm-mint); }
.bm-datepicker__grid button.is-today { font-weight: 700; color: var(--bm-teal); }
.bm-datepicker__grid button.is-selected { background: var(--bm-teal); color: var(--bm-white); }
.bm-datepicker__grid span.bm-datepicker__pad { visibility: hidden; }

@media (max-width: 1399.98px) {
  .bm-hero__card { margin: 120px 15px; width: 100%; }
  .bm-booking { gap: 16px; flex-wrap: wrap; }
  .bm-booking__field { font-size: 18px; }
  .bm-hero__card {
    margin: 120px;
    width: 100%;
    max-width: 1000px;
}
.bm-h1 {
    font-family: var(--bm-font-display);
    font-size: 52px !important;
    line-height: 76.8px;
    color: var(--bm-ink);
}
.bm-eyebrow{
width:max-content;
}
}
@media (max-width: 1199.98px) {
  .bm-hero { min-height: 0; }
  .bm-hero__card { margin: 90px 20px; width: 100%; padding: 40px; }
  .bm-hero__copystack { min-height: 190px; }
  .bm-booking { flex-wrap: wrap; row-gap: 16px; }
  .bm-booking .bm-btn-pill { margin-left: 0; }
  .bm-booking__rule { display: none; }
  .bm-hero__arrow { width: 44px; height: 44px; }
}
@media (max-width: 767.98px) {
  .bm-hero { border-radius: 18px; }
  .bm-hero__card { margin: 60px 12px; padding: 26px 22px 30px; gap: 22px; border-radius: 18px; }
  .bm-hero__copystack { min-height: 220px; }
  .bm-booking { border-radius: 22px; padding: 16px; gap: 14px; }
  .bm-booking__field { font-size: 16px; line-height: 26px; max-width: 160px; }
  .bm-booking__field img { width: 21px; height: 21px; }
  .bm-hero__arrow { width: 38px; height: 38px; }
  .bm-hero__arrow--prev { left: 10px; }
  .bm-hero__arrow--next { right: 10px; }
  .bm-dropdown, .bm-datepicker { min-width: 220px; }
}

/* ==========================================================================
   S3 — ABOUT  (Figma 80:809, h 816)
   ========================================================================== */
.bm-about { padding: 60px 85.4px 120px; }

.bm-about__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.bm-about__col {
  flex: 1 1 0;
  min-width: 0;
  max-width: 1350px;
}
.bm-about__col--media { padding-inline: 15px; }
.bm-about__col--copy  { padding-left: 12px; padding-right: 15px; }

/* Media composition ------------------------------------------------------- */
.bm-about__stage {
  position: relative;
  width: 100%;
  max-width: 649.6px;
  aspect-ratio: 649.6 / 635.9;
}
.bm-about__photo {
  width: 76.66%;                 /* 498 / 649.6 */
  height: 99.24%;                /* 631.06 / 635.9 */
  border-radius: var(--bm-r-20);
  overflow: hidden;
}
.bm-about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 25+ years badge */
.bm-about__badge {
  position: absolute;
  left: -11.25%;                 /* -73.1 / 649.6 */
  top: 12.58%;                   /* 80 / 635.9 */
  width: 146px;
  height: 146px;
  border-radius: 73px;
  background: var(--bm-green);
  display: grid;
  place-items: center;
  animation: bm-spin 26s linear infinite;
}
.bm-about__badge-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: var(--bm-teal);
  overflow: hidden;
}
/* Rotation lives on its own layer so it never competes with the parent's
   static translate(-50%,-50%) centering — animating `transform` on the same
   element that also needs a static transform is what caused the numeral to
   drift off-center. */
.bm-about__badge-core-spin {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: bm-spin 26s linear infinite reverse;
}
.bm-about__badge-num {
  font-family: var(--bm-font-ui);
  font-size: 30px;
  line-height: 42px;
  color: var(--bm-white);
}
/* Circular caption "Years Of Experience" — rendered as SVG textPath, which
   lays text on a circle natively instead of hand-rotating individual
   letters. Far more reliable across browsers than the transform-per-glyph
   technique this replaced. */
.bm-about__ringsvg { position: absolute; inset: 0; overflow: visible; }
.bm-about__ringtext {
  font-family: var(--bm-font-ui);
  font-size: 13px;
  letter-spacing: .3px;
  fill: var(--bm-white);
}
@keyframes bm-spin { to { transform: rotate(360deg); } }

/* Inset framed photo */
.bm-about__inset {
  position: absolute;
  top: 39.79%;                   /* 253.06 / 635.9 */
  right: 9.33%;                  /* 60.6 / 649.6 */
  bottom: 10.22%;                /* 65 / 635.9 */
  left: 44.01%;                  /* 285.9 / 649.6 */
  padding: 9.6px;
  border: 9px solid var(--bm-white);
  border-radius: var(--bm-r-20);
  overflow: hidden;
}
.bm-about__inset > div {
  width: 100%;
  height: 100%;
  border-radius: var(--bm-r-20);
  overflow: hidden;
}
.bm-about__inset img { width: 100%; height: 100%; object-fit: cover; }

/* Photo gallery dots — genuinely functional (see initAboutGallery in JS),
   not just a decorative rhythm element. */
.bm-about__dots {
  position: absolute;
  left: 78.43%;                  /* 509.5 / 649.6 */
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bm-about__dots button {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--bm-line);
  cursor: pointer;
  transition: height .35s var(--bm-ease), background .35s var(--bm-ease);
}
.bm-about__dots button:hover { background: var(--bm-grey); }
.bm-about__dots button.is-active { height: 54px; background: var(--bm-teal); }
.bm-about__dots button.is-active:hover { background: var(--bm-teal); }

.bm-about__photo img {
  transition: opacity .35s var(--bm-ease);
}
.bm-about__photo.is-fading img { opacity: 0; }

/* Copy column ------------------------------------------------------------- */
.bm-about__body { display: flex; flex-direction: column; gap: 23px; }
.bm-about__head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bm-about__head .bm-text { padding-top: 4px; }

/* Two feature blocks */
.bm-about__features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 525px;
  padding-top: 27px;
}
.bm-feature { display: flex; align-items: center; gap: 0; }
.bm-feature__icon {
  position: relative;
  width: 90px;
  height: 56.4px;
  flex: 0 0 auto;
}
.bm-feature__icon::before {
  content: '';
  position: absolute;
  inset: 1.35% 20.11% 10% 24.33%;
  border-radius: 25px;
  background: var(--bm-chip);
}
.bm-feature__icon img {
  position: absolute;
  left: 0;
  top: -.8px;
  width: 50px;
  height: 50.4px;
  transform: scaleY(-1);
}
.bm-feature__label {
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-ink);
}

/* Checklist */
.bm-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 10px;
}
.bm-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9.4px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body);
}
.bm-checklist img {
  width: 17px;
  height: 17.6px;
  margin-top: 7.2px;
  transform: scaleY(-1);
  flex: 0 0 auto;
}

@media (max-width: 1399.98px) {
  .bm-about { padding: 60px 40px 100px; }

}
@media (max-width: 1199.98px) {
  .bm-about { padding: 50px 20px 90px; }
  .bm-about__grid { gap: 56px; }
  .bm-about__col { flex: 1 1 100%; }
  .bm-about__col--media { padding-inline: 0; }
  .bm-about__col--copy  { padding: 0; }
  .bm-about__stage { margin-left: 74px; width: calc(100% - 74px); max-width: 560px; }
}
@media (max-width: 767.98px) {
  .bm-about { padding: 40px 0 70px; }
  .bm-about__stage { margin-left: 44px; width: calc(100% - 44px); }
  .bm-about__badge { width: 104px; height: 104px; border-radius: 52px; }
  .bm-about__badge-core { width: 52px; height: 52px; border-radius: 26px; }
  .bm-about__badge-num { font-size: 22px; line-height: 30px; }
  .bm-about__features { flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
  .bm-about__dots { display: none; }
}
@media (max-width: 575.98px) {
  .bm-about__stage { margin-left: 30px; width: calc(100% - 30px); }
  .bm-about__inset { border-width: 6px; padding: 6px; }
  .bm-feature__icon { width: 74px; height: 48px; }
  .bm-feature__icon img { width: 42px; height: 42px; }
  .bm-feature__label { font-size: 18px; line-height: 27px; }
}

/* ==========================================================================
   S3B — ABOUT THE FOUNDER  (Figma 111:2, "Section - About the Founder",
   from the About page: https://www.figma.com/design/qY8hNlQbBcDN84C6Ae5c2r/
   Beyond-movement?node-id=175-5)
   Figma lays this out with absolute pixel positions on a fixed 1530x940
   canvas. Converted here to percentage-based positioning for the photo
   composition (so it scales correctly at any width) and normal flex flow
   for the text column (so it reflows instead of overlapping at narrower
   widths) — while matching every color, font, and spacing value exactly.
   ========================================================================== */
.bm-founder {
  background: var(--bm-teal);
  border-radius: var(--bm-r-30);
  padding: 90px 90px 80px;
}
.bm-founder__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 60px;
}

/* Left: photo composition --------------------------------------------------
   Figma's stage (backdrop-to-card bounding box) is 740 x 700px. Every child
   below is positioned as a % of that box, matching Figma's absolute
   coordinates converted to percentages — e.g. the backdrop is at Figma
   x:0 y:0 w:540 h:700 within the 740x700 stage = 0%/0%/72.97%/100%. */
.bm-founder__media { flex: 0 0 48.4%; max-width: 48.4%; }
.bm-founder__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 740 / 700;
}
.bm-founder__backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 72.97%;
  height: 100%;
  background: rgba(255, 255, 255, .08);
  border-radius: var(--bm-r-20);
}
.bm-founder__photo {
  position: absolute;
  left: 1.23%;
  top: 0;
  width: 80.68%;
  height: 595px;
  border-radius: var(--bm-r-20);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.bm-founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bm-founder__card {
  position: absolute;
  left: 54.05%;
  top: 80%;
  width: 45.95%;
  height: 21%;
  background: var(--bm-white);
  border-radius: var(--bm-r-20);
  padding: 32px 24px 32px 19px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.bm-founder__card-name {
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-teal);
}
.bm-founder__card-role {
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-body-2);
}

/* Right: eyebrow, heading, bio, certification list -------------------------
   .bm-eyebrow / .bm-eyebrow--solid / .bm-h2 are the site's existing shared
   classes — Figma's eyebrow and heading here use identical values already
   (white pill, #777 label, Gotu 50/60), so they're reused as-is rather than
   duplicated. */
.bm-founder__content { flex: 1 1 0; min-width: 0; max-width: 570px; }
.bm-founder__content .bm-eyebrow { margin-bottom: 32px; }
.bm-founder__content .bm-h2 { color: var(--bm-white); margin-bottom: 22px; }
.bm-founder__bio {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: #bebebe;
  margin-bottom: 37px;
}
.bm-founder__label {
  font-family: var(--bm-font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #bebebe;
  margin-bottom: 20px;
}
.bm-founder__list { display: flex; flex-direction: column; }
.bm-founder__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.bm-founder__list-name {
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-white);
}
.bm-founder__list-tag {
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: #bebebe;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1399.98px) {
  .bm-founder { padding: 70px 40px; }
  .bm-founder__grid { gap: 44px; }
}
@media (max-width: 1199.98px) {
  .bm-founder { padding: 56px 24px; }
  .bm-founder__grid { flex-direction: column; align-items: center; }
  .bm-founder__media { flex: 0 0 auto; max-width: 420px; width: 100%; }
  .bm-founder__content { max-width: 100%; width: 100%; }
  /* The card's height was fixed at 20% of the stage (correct only at desktop
     sizes, where the stage is tall enough). Below this breakpoint that 20%
     shrinks faster than the text inside it can, so the card was rendering
     too short for its own content — the name/role text spilled out past
     the white background with nothing behind it. Switching to auto height,
     anchored to the stage's own bottom edge instead of a fixed top offset,
     lets it grow upward into the photo (matching the intended overlap)
     without ever spilling past the section into the content below. */
  .bm-founder__card { top: auto; bottom: 5%; height: auto; }
}
@media (max-width: 767.98px) {
  .bm-founder { padding: 44px 16px; border-radius: 20px; }
  .bm-founder__grid { gap: 36px; }
  .bm-founder__media { max-width: 320px; }
  .bm-founder__card { padding: 20px 18px; }
  .bm-founder__card-name { font-size: 19px; line-height: 27px; }
  .bm-founder__card-role { font-size: 13px; }
  .bm-founder__bio { font-size: 15px; line-height: 27px; margin-bottom: 28px; }
  .bm-founder__list li { padding: 15px 0; }
  .bm-founder__list-name { font-size: 17px; }
  .bm-founder__list-tag { font-size: 13px; }
}
@media (max-width: 575.98px) {
  .bm-founder__media { max-width: 260px; }
  .bm-founder__card { padding: 16px 14px; gap: 2px; }
  .bm-founder__card-name { font-size: 16px; line-height: 22px; }
  .bm-founder__card-role { font-size: 12px; line-height: 18px; }
  .bm-founder__list li { flex-wrap: wrap; gap: 2px; padding: 14px 0; }
  .bm-founder__list-tag { text-align: left; }
}

/* ==========================================================================
   S4a — MARQUEE STRIPS  (Figma 80:908 / 80:979, h 100 each)
   ========================================================================== */
.bm-marquee {
  height: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: 2.5px;
  user-select: none;
}
.bm-marquee--light { background: var(--bm-mint); color: var(--bm-ink); }
.bm-marquee--dark  { background: var(--bm-teal); color: var(--bm-white); }

.bm-marquee__track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  animation: bm-marquee-left 34s linear infinite;
}
.bm-marquee--dark .bm-marquee__track { animation-name: bm-marquee-right; }
.bm-marquee:hover .bm-marquee__track { animation-play-state: paused; }

.bm-marquee__item {
  padding-inline: 30px;
  font-family: var(--bm-font-display);
  font-size: 50px;
  line-height: 95px;
  text-transform: capitalize;
  white-space: nowrap;
  flex: 0 0 auto;
}
.bm-marquee__sep {
  padding-inline: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bm-marquee__sep img { width: 40px; height: 40px; }

@keyframes bm-marquee-left  { from { transform: translate3d(0, 0, 0); }     to { transform: translate3d(-50%, 0, 0); } }
@keyframes bm-marquee-right { from { transform: translate3d(-50%, 0, 0); }  to { transform: translate3d(0, 0, 0); } }

@media (max-width: 991.98px) {
  .bm-marquee { height: 76px; }
  .bm-marquee__item { font-size: 34px; line-height: 70px; padding-inline: 20px; }
  .bm-marquee__sep { padding-inline: 20px; }
  .bm-marquee__sep img { width: 28px; height: 28px; }
}
@media (max-width: 575.98px) {
  .bm-marquee { height: 60px; }
  .bm-marquee__item { font-size: 25px; line-height: 56px; padding-inline: 14px; }
  .bm-marquee__sep { padding-inline: 14px; }
  .bm-marquee__sep img { width: 22px; height: 22px; }
}

/* ==========================================================================
   S4b — SECTION HEADING BLOCK (shared, Figma 80:1049 / 80:1198)
   ========================================================================== */
.bm-sechead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 675px;
  margin-inline: auto;
  text-align: center;
  padding-inline: 15px;
}
.bm-sechead--start { align-items: flex-start; text-align: left; margin-inline: 0; }
.bm-sechead__wrap { padding-block: 60px; }

/* ==========================================================================
   S4c — SERVICE CARD GRID  (Figma 80:1064 / 80:1130)
   ========================================================================== */
.bm-cards { padding-inline: 92.4px; }
.bm-cards--top { padding-top: 50px; }
.bm-cards--next { padding-top: 20px; }

.bm-cards__row { display: flex; flex-wrap: wrap; }
.bm-cards__col { flex: 1 1 0; min-width: 0; padding-inline: 8px; }

.bm-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 35.8px 35.8px 25.8px;
  border: 1px solid var(--bm-card-line);
  border-radius: var(--bm-r-15);
  background: var(--bm-white);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--bm-ease), box-shadow .45s var(--bm-ease),
              background .45s var(--bm-ease);
}
/* Decorative corner artwork (186 x 269, pinned top-right) */
.bm-card__deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 186px;
  height: 269px;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 186px 259px;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
  transition: opacity .45s var(--bm-ease), transform .6s var(--bm-ease);
}
.bm-card > *:not(.bm-card__deco) { position: relative; z-index: 1; }

.bm-card__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .5s var(--bm-ease);
}
.bm-card__icon img { width: 44px; height: 44px; object-fit: contain; }
.bm-card__title {
  padding-top: 20px;
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-teal);
}
.bm-card__text {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body-2);
}
.bm-card__foot { margin-top: auto; padding: 15.44px 0 3.46px; }

.bm-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px rgba(17, 17, 37, .09);
  background: var(--bm-mint);
}
.bm-card:hover .bm-card__deco { opacity: 1; transform: translate(6px, -6px); }
.bm-card:hover .bm-card__icon { transform: rotate(-8deg) scale(1.06); }

@media (max-width: 1399.98px) {
  .bm-cards { padding-inline: 40px; }
  .bm-card { padding: 30px 26px 22px; }
}
@media (max-width: 1199.98px) {
  .bm-cards { padding-inline: 20px; }
  .bm-cards__col { flex: 0 0 50%; max-width: 50%; padding-bottom: 16px; }
}
@media (max-width: 767.98px) {
  .bm-cards, .bm-cards--top, .bm-cards--next { padding-inline: 0; padding-top: 24px; }
  .bm-cards__col { flex: 0 0 100%; max-width: 100%; }
  .bm-sechead__wrap { padding-block: 44px; }
  .bm-card__deco { width: 140px; height: 200px; background-size: 140px 195px; }
}

/* ==========================================================================
   S5 — SERVICES TABS  (Figma 80:1196, h 1168, bg mint, r 30)
   ========================================================================== */
.bm-services {
  background: var(--bm-mint);
  border-radius: var(--bm-r-30);
  padding: 120px 70.4px;
  overflow: hidden;
}
.bm-services__grid { display: flex; flex-wrap: wrap; align-items: flex-start; }

/* 449.99 / 1350 = 33.33% ; 899.99 / 1350 = 66.66% */
.bm-services__aside { flex: 0 0 33.333%; max-width: 33.333%; padding-inline: 15px; }
.bm-services__panels { flex: 0 0 66.666%; max-width: 66.666%; padding-inline: 15px; }

.bm-tabs { display: flex; flex-direction: column; gap: 10px; }
.bm-tab {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 11.5px 17px;
  border-radius: var(--bm-r-20);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 20px 70px rgba(17, 17, 37, .05);
  text-align: left;
  cursor: pointer;
  transition: background .35s var(--bm-ease), color .35s var(--bm-ease),
              box-shadow .35s var(--bm-ease), transform .35s var(--bm-ease);
}
.bm-tab__icon {
  width: 72px;
  height: 56.4px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  padding-bottom: 6.8px;
}
.bm-tab__icon img { width: 50px; height: 50.4px; 
  /* transform: scaleY(-1);  */
}
.bm-tab__label {
  font-family: var(--bm-font-ui);
  font-size: 20px;
  line-height: 38px;
  color: var(--bm-tab-idle);
  transition: color .35s var(--bm-ease);
}
.bm-tab:hover { transform: translateX(4px); }
.bm-tab.is-active {
  background: var(--bm-teal);
  filter: drop-shadow(0 20px 35px rgba(17, 17, 37, .05));
}
.bm-tab.is-active .bm-tab__label { color: var(--bm-white); }
.bm-tab.is-active .bm-tab__icon img { filter: brightness(0) invert(1); }

/* Panels */
.bm-panel { display: none; flex-direction: column; gap: 24px; }
.bm-panel.is-active { display: flex; animation: bm-panel-in .55s var(--bm-ease) both; }
@keyframes bm-panel-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
.bm-panel__media {
  height: 432px;
  border-radius: var(--bm-r-20);
  overflow: hidden;
}
.bm-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.bm-panel__title { padding-top: 21px; }
.bm-panel__text  { padding-bottom: 16px; }

@media (max-width: 1399.98px) {
  .bm-services { padding: 96px 40px; }
  .bm-tab__label { font-size: 18px; line-height: 32px; }
  .bm-tab__icon { width: 62px; }
  .bm-tab__icon img { width: 42px; height: 42px; }
}
@media (max-width: 1199.98px) {
  .bm-services { padding: 80px 20px; }
  .bm-services__aside,
  .bm-services__panels { flex: 0 0 100%; max-width: 100%; padding-inline: 0; }
  .bm-services__aside { margin-bottom: 34px; }
  .bm-tabs { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .bm-tab { width: auto; flex: 1 1 260px; }
  .bm-panel__media { height: 360px; }
}
@media (max-width: 767.98px) {
  .bm-services { padding: 56px 16px; border-radius: 18px; }
  .bm-tab { flex: 1 1 100%; padding: 9px 14px; }
  .bm-tab__icon { width: 52px; height: 46px; }
  .bm-tab__icon img { width: 36px; height: 36px; }
  .bm-tab__label { font-size: 16px; line-height: 28px; }
  .bm-panel__media { height: 250px; border-radius: 16px; }
  .bm-panel__title { padding-top: 8px; }
}

/* ==========================================================================
   S6 — WHY IT WORKS  (Figma 80:1295, h 1157)
   ========================================================================== */
.bm-why { padding: 120px 85.4px; }
.bm-why__inner { display: flex; flex-direction: column; gap: 45px; align-items: center; padding-inline: 15px; }

.bm-why__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.bm-why__headtext { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 792px; }
.bm-why__cta { padding-bottom: 16px; }

.bm-why__grid { display: flex; flex-wrap: wrap; width: 100%; max-width: 1344px; }
.bm-why__media { flex: 0 0 33.333%; max-width: 33.333%; padding-inline: 12px; }
.bm-why__media > div {
  height: 699px;
  border-radius: var(--bm-r-20);
  overflow: hidden;
}
.bm-why__media img { width: 100%; height: 100%; object-fit: cover; }

.bm-why__cards { flex: 0 0 66.666%; max-width: 66.666%; }
.bm-why__cards .bm-cards__row { margin-left: 52.9px; }   /* Figma offsets the block by 64.9 - 12 */
.bm-why__cards .bm-cards__col { flex: 0 0 50%; max-width: 50%; padding: 16px 8px 0; }

/* Mint variant of the service card, with a teal hover fill */
.bm-card--mint { background: var(--bm-mint); border-color: transparent; }
.bm-card--mint .bm-card__icon img { width: 44px; height: 44px; 
  /* transform: scaleY(-1); */
 }
.bm-card--mint:hover { background: var(--bm-teal); }
.bm-card--mint:hover .bm-card__title { color: var(--bm-white); }
.bm-card--mint:hover .bm-card__text  { color: rgba(255, 255, 255, .82); }
.bm-card--mint:hover .bm-readmore    { color: var(--bm-white); }
.bm-card--mint:hover .bm-readmore img { filter: brightness(0) invert(1); }
.bm-card--mint:hover .bm-card__icon  { background: var(--bm-white); }
.bm-card--mint:hover .bm-card__icon img { filter: brightness(0) saturate(100%) invert(21%) sepia(38%) saturate(1592%) hue-rotate(140deg) brightness(94%) contrast(101%); }

@media (max-width: 1399.98px) {
  .bm-why { padding: 96px 40px; }
  .bm-why__media > div { height: 100%; min-height: 520px; }
}
@media (max-width: 1199.98px) {
  .bm-why { padding: 80px 20px; }
  .bm-why__inner { padding-inline: 0; gap: 36px; }
  .bm-why__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .bm-why__cta { padding-bottom: 0; }
  .bm-why__media,
  .bm-why__cards { flex: 0 0 100%; max-width: 100%; padding-inline: 0; }
  .bm-why__media { margin-bottom: 24px; }
  .bm-why__media > div { min-height: 420px; }
  .bm-why__cards .bm-cards__row { margin-left: 0; }
}
@media (max-width: 767.98px) {
  .bm-why { padding: 56px 0; }
  .bm-why__cards .bm-cards__col { flex: 0 0 100%; max-width: 100%; padding-inline: 0; }
  .bm-why__media > div { min-height: 300px; border-radius: 16px; }
}

/* ==========================================================================
   S7 — THE APPROACH  (Figma 80:1398, h 822, teal panel)
   ========================================================================== */
.bm-approach {
  position: relative;
  background: var(--bm-teal);
  border-radius: var(--bm-r-30);
  overflow: hidden;
  padding: 120px 70.4px 0;
  isolation: isolate;
}
/* Decorative shapes */
.bm-approach__shape-a {
  position: absolute;
  left: 0;
  top: 0;
  width: 756px;
  height: 756px;
  z-index: 0;
  pointer-events: none;
}
.bm-approach__shape-b {
  position: absolute;
  right: 0;
  top: 25px;
  width: 130px;
  height: 185px;
  z-index: 0;
  pointer-events: none;
}
.bm-approach__shape-a img,
.bm-approach__shape-b img { width: 100%; height: 100%; object-fit: cover; }

.bm-approach__grid { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; }
.bm-approach__copy  { flex: 0 0 58.333%; max-width: 58.333%; padding-inline: 15px; }  /* 787.5 / 1350 */
.bm-approach__media { flex: 0 0 41.666%; max-width: 41.666%; }                        /* 562.5 / 1350 */

/* Left column is a positioned canvas so the cards can bleed right, as in Figma */
.bm-approach__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 701.6px;
}

.bm-approach__head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bm-approach__head .bm-h2 { color: var(--bm-white); }
.bm-approach__lead {
  width: 100%;
  max-width: 544px;
  padding-top: 7px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
}

/* Eyebrow, inverted for the dark panel */
.bm-eyebrow--invert { border-color: rgba(255, 255, 255, .28); color: var(--bm-white); }
.bm-eyebrow--invert::before { background: var(--bm-white); }

/* Step cards ------------------------------------------------------------- */
/* Figma places these at y=296.8 with height 254.4, and the rating at y=551.2 —
   296.8 + 254.4 = 551.2, so ordinary flow reproduces the design exactly while
   making overlap impossible if any line of copy wraps differently. */
.bm-steps {
  position: relative;
  margin: 40.2px -136.9px 0 -12.1px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.bm-steps__col { flex: 1 1 0; min-width: 0; padding-inline: 12px; }

.bm-step {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 21.4px;
  padding: 29.8px 29.8px 20.8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--bm-r-20);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(5px);
  transition: background .4s var(--bm-ease), transform .4s var(--bm-ease);
}
.bm-step:hover { background: rgba(255, 255, 255, .16); transform: translateY(-6px); }

/* Figma ships the step number with a transparent fill — rendered here as an
   outlined numeral, which is the visual intent of the layer. */
.bm-step__num {
  position: absolute;
  right: 21px;
  top: 18.8px;
  font-family: var(--bm-font-ui);
  font-weight: 700;
  font-size: 60px;
  line-height: 60px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .25);
  pointer-events: none;
}
.bm-step__icon {
  width: 56px;
  border-radius: 28px;
  background: var(--bm-green);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 12.8px;
  flex: 0 0 auto;
}
.bm-step__icon img { width: 30px; height: 30.4px; transform: scaleY(-1); }
.bm-step__title {
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-white);
}
.bm-step__text {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: #bebebe;
}
.bm-step__body { display: flex; flex-direction: column; gap: 5px; }

/* Rating row ------------------------------------------------------------- */
.bm-rating {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
}
.bm-rating__stars { display: flex; align-items: center; gap: 2px; }
.bm-rating__stars img { width: 18px; height: 16.8px; transform: scaleY(-1); }

/* Right-hand photo ------------------------------------------------------- */
.bm-approach__photo {
  padding: 131px 0 0 5px;   /* Figma: photo starts 131px down from the top of its 701.6px-tall column, inset 15px from the left */
  margin-right: -74.9px;
  height: 701.6px;           /* matches .bm-approach__stage's own height, so the padding above computes against the real column height */
  box-sizing: border-box;
}
.bm-approach__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1399.98px) {
  .bm-approach { padding: 96px 40px 0; }
  .bm-steps { margin-right: -110px; }
}
@media (max-width: 1199.98px) {
  .bm-approach { padding: 80px 24px 0; }
  .bm-approach__copy,
  .bm-approach__media { flex: 0 0 100%; max-width: 100%; padding-inline: 0; }
  .bm-approach__stage { min-height: 0; gap: 34px; }
  .bm-steps { margin: 0 -12px; }
  .bm-steps__col { flex: 0 0 50%; max-width: 50%; padding-bottom: 24px; }
  .bm-approach__photo { padding: 28px 0 0; margin-right: 0; max-width: 620px; }
}
@media (max-width: 767.98px) {
  .bm-approach { padding: 56px 16px 0; border-radius: 18px; }
  .bm-steps__col { flex: 0 0 100%; max-width: 100%; padding-bottom: 16px; }
  .bm-step { padding: 24px 22px 18px; gap: 16px; }
  .bm-step__num { font-size: 46px; line-height: 46px; right: 18px; }
  .bm-rating { flex-wrap: wrap; gap: 12px; }
  .bm-approach__shape-a { width: 420px; height: 420px; }
  .bm-approach__shape-b { width: 88px; height: 126px; }
}

/* ==========================================================================
   S8 — TEAM  (Figma 80:1489, h 1008)
   Real, swipeable horizontal-scroll track (touch/trackpad/keyboard) plus
   prev/next arrows. Shows 3-up on desktop so there is always somewhere to
   scroll to with 4 members — 4-up would fit everything at once and make the
   carousel inert.
   ========================================================================== */
.bm-team { padding: 120px 85.4px; }
.bm-team__head { max-width: 1012.5px; margin-inline: auto; padding-bottom: 60px; text-align: center; }

.bm-team__viewport {
  position: relative;
  padding-inline: 64px;
}
.bm-team__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  margin: 0 -15px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.bm-team__track::-webkit-scrollbar { display: none; }

.bm-team__slide {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  padding-inline: 15px;
  scroll-snap-align: start;
}

.bm-team__arrow {
  position: absolute;
  top: 180px;
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bm-white);
  border: 1px solid var(--bm-hairline);
  color: var(--bm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(18, 18, 18, .08);
  transition: background .3s var(--bm-ease), color .3s var(--bm-ease), transform .3s var(--bm-ease);
}
.bm-team__arrow svg { width: 20px; height: 20px; }
.bm-team__arrow:hover { background: var(--bm-teal); color: var(--bm-white); }
.bm-team__arrow:active { transform: scale(.92); }
.bm-team__arrow:disabled { opacity: .35; pointer-events: none; }
.bm-team__arrow--prev { left: 0; }
.bm-team__arrow--next { right: 0; }

.bm-teamcard {
  background: var(--bm-mint);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .4s var(--bm-ease), box-shadow .4s var(--bm-ease);
}
.bm-teamcard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(18, 18, 18, .09); }

.bm-teamcard__media { position: relative; height: 360px; }
.bm-teamcard__photo {
  position: absolute;
  left: 50%;
  top: 65px;
  transform: translateX(-50%);
  width: 230px;
  height: 230px;
  border-radius: 115px;
  overflow: hidden;
}
.bm-teamcard__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Folded-corner ribbon, top-right */
.bm-teamcard__corner {
  position: absolute;
  right: -.5px;
  top: -.5px;
  width: 74px;
  height: 73px;
  transform: rotate(-90deg);
  pointer-events: none;
}
.bm-teamcard__corner img { width: 100%; height: 100%; object-fit: cover; }

.bm-teamcard__link {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--bm-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--bm-ease), transform .3s var(--bm-ease);
}
.bm-teamcard__link img { width: 14px; height: 16.8px; transform: scaleY(-1); }
.bm-teamcard__link:hover { background: var(--bm-teal); transform: scale(1.06); }
.bm-teamcard__link:hover img { filter: brightness(0) invert(1); }

.bm-teamcard__body { padding: 22px; display: flex; flex-direction: column; gap: 5px; }
.bm-teamcard__name { font-family: var(--bm-font-display); font-size: 24px; line-height: 33.6px; color: var(--bm-teal); }
.bm-teamcard__role { font-family: var(--bm-font-ui); font-size: 16px; line-height: 30.4px; color: var(--bm-body-2); }

/* Dots */
.bm-team__dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 20px; }
.bm-team__dots button {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--bm-line);
  cursor: pointer;
  transition: width .35s var(--bm-ease), background .35s var(--bm-ease);
}
.bm-team__dots button.is-active { width: 45px; background: var(--bm-teal); }

@media (max-width: 1399.98px) {

.bm-ctaband{
  width:85%;
}


 }
@media (max-width: 1199.98px) {
  .bm-team { padding: 80px 20px; }
  .bm-team__viewport { padding-inline: 56px; }
  .bm-team__slide { flex: 0 0 50%; max-width: 50%; }
  .bm-team__arrow { top: 150px; width: 44px; height: 44px; }
}
@media (max-width: 767.98px) {
  .bm-team { padding: 56px 12px; }
  .bm-team__viewport { padding-inline: 0; }
  .bm-team__slide { flex: 0 0 84%; max-width: 84%; }
  .bm-teamcard__media { height: 300px; }
  .bm-teamcard__photo { width: 190px; height: 190px; top: 50px; }
  /* Arrows give way to swipe on small screens — no room to place them without
     overlapping card content, and touch scroll/snap already works well. */
  .bm-team__arrow { display: none; }
}

/* ==========================================================================
   S9 — SPECIALISED CARE  (Figma 80:1575 "Service Section", h 996)
   Full-bleed dark panel, rounded top corners only, background photo with a
   bottom fade to #121212, four uneven-height columns like a bar chart.
   ========================================================================== */
.bm-expertise {
  position: relative;
  background: var(--bm-teal);
  border-radius: var(--bm-r-20) var(--bm-r-20) 0 0;
  overflow: hidden;
  padding-top: 120px;
  isolation: isolate;
}
.bm-expertise__bgshape {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
}
.bm-expertise__bgshape img { width: 100%; height: 100%; object-fit: cover; }

.bm-expertise__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  max-width: 1350px;
  margin-inline: auto;
  padding-inline: 15px;
  padding-bottom: 50px;
}
.bm-expertise__headtext { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; }
.bm-expertise__headtext .bm-h2 { color: var(--bm-white); }
.bm-expertise__lead { flex: 1 1 320px; max-width: 436px; }
.bm-expertise__lead p {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
}
.bm-expertise__stage{
  padding: 0 5px;
}
/* Photo strip with fade-to-dark, columns sit on top */
.bm-expertise__stage { position: relative; }
.bm-expertise__photo { position: relative; width: 100%; height: 637px; overflow: hidden; }
.bm-expertise__photo img { width: 100%; height: 100%; object-fit: cover; }
.bm-expertise__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 0%, #121212 100%);
}

.bm-expertise__cols {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  overflow-x: hidden;
  scrollbar-width: none;
}
.bm-expertise__cols::-webkit-scrollbar { display: none; }

.bm-servicecol {
  flex: 0 0 330px;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  border-right: .8px solid rgba(255, 255, 255, .2);
}
.bm-servicecol__inner {
  width: 100%;
  padding: 60px 40px 47px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bm-servicecol__tag {
  align-self: flex-start;
  padding: 2.7px 15px;
  border-radius: var(--bm-r-20);
  background: rgba(255, 255, 255, .2);
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
}
.bm-servicecol__title {
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-white);
}

/* "More Details" reveals on hover/focus for every column — consistently,
   not just the one column Figma happened to show it open on. Touch devices
   have no hover state, so it stays visible there instead of being unreachable. */
.bm-servicecol__cta {
  align-self: flex-start;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  transition: max-height .4s var(--bm-ease), opacity .35s var(--bm-ease),
              transform .4s var(--bm-ease);
}
.bm-servicecol:hover .bm-servicecol__cta,
.bm-servicecol:focus-within .bm-servicecol__cta {
  max-height: 80px;
  opacity: 1;
  transform: none;
}
.bm-servicecol .bm-btn-round { align-self: flex-start; }

@media (hover: none) {
  .bm-servicecol__cta { max-height: 80px; opacity: 1; transform: none; }
}

/* Stagger the columns' bottom padding to echo the Figma "bar chart" rhythm */
.bm-servicecol--a .bm-servicecol__inner { padding-top: 158px; }
.bm-servicecol--b .bm-servicecol__inner { padding-top: 92px; }
.bm-servicecol--c .bm-servicecol__inner,
.bm-servicecol--d .bm-servicecol__inner { padding-top: 192px; }

@media (max-width: 1199.98px) {
  .bm-expertise__head { padding-inline: 20px; }
  .bm-expertise__photo { height: 520px; }
  .bm-servicecol { flex-basis: 300px; }
  .bm-servicecol--a .bm-servicecol__inner,
  .bm-servicecol--b .bm-servicecol__inner,
  .bm-servicecol--c .bm-servicecol__inner,
  .bm-servicecol--d .bm-servicecol__inner { padding-top: 60px; }
}
@media (max-width: 767.98px) {
  .bm-expertise { border-radius: 16px 16px 0 0; }
  .bm-expertise__photo { height: 420px; }
  .bm-servicecol { flex-basis: 260px; }
  .bm-servicecol__inner { padding: 60px 24px 32px; }
}

/* ==========================================================================
   S10 — TESTIMONIALS  (Figma 80:1640, h 1422)
   3-col x 2-row grid alternating text-quote cards and video thumbnails.
   ========================================================================== */
.bm-testi { padding: 120px 85.4px; }
.bm-testi__head { max-width: 900px; margin-inline: auto; text-align: center; padding-bottom: 40px; }

.bm-testi__grid {
  display: flex;
  flex-wrap: wrap;
}
.bm-testi__cell { flex: 0 0 33.333%; max-width: 33.333%; padding: 24px 12px 0; }

/* Quote card */
.bm-testicard {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 40.8px 35.8px 25.8px;
  border: 1px solid var(--bm-hairline);
  border-radius: 40px;
  background: var(--bm-mint);
  height: 100%;
  transition: transform .4s var(--bm-ease), box-shadow .4s var(--bm-ease);
}
.bm-testicard:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(18, 18, 18, .08); }

.bm-testicard__top { display: flex; flex-direction: column; gap: 16px; }
.bm-testicard__who { display: flex; align-items: center; gap: 14px; }
.bm-testicard__avatar { width: 60px; height: 60px; border-radius: 30px; overflow: hidden; flex: 0 0 auto; }
.bm-testicard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bm-testicard__name { font-family: var(--bm-font-display); font-size: 24px; line-height: 33.6px; color: var(--bm-ink); text-transform: capitalize; }
.bm-testicard__role { font-family: var(--bm-font-ui); font-size: 16px; line-height: 30.4px; color: var(--bm-body); }
.bm-testicard__hook { font-family: var(--bm-font-display); font-size: 20px; line-height: 30px; color: var(--bm-teal); }
.bm-testicard__quote { font-family: var(--bm-font-display); font-size: 20px; line-height: 32px; color: var(--bm-ink); }

.bm-testicard__foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
  padding-top: 8.8px;
  padding-bottom: 30.8px;
  border-bottom: .8px solid rgba(255, 255, 255, .2);
}
.bm-testicard__foot img { width: 22.5px; height: 20px; }
.bm-testicard__quotemark {
  position: absolute;
  right: 12px;
  top: 0;
  width: 80px;
  height: 62px;
  opacity: .9;
}

/* Video thumbnail card */
.bm-testivideo {
  position: relative;
  height: 100%;
  min-height: 300px;
  border-radius: var(--bm-r-30);
  overflow: hidden;
  cursor: pointer;
}
.bm-testivideo img { width: 100%; height: 100%; object-fit: cover; }
.bm-testivideo__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 37.5px;
  background: rgba(18, 18, 18, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--bm-ease), transform .35s var(--bm-ease);
}
.bm-testivideo__play img { width: 20px; height: 20px; transform: scaleY(-1); }
.bm-testivideo:hover .bm-testivideo__play { background: var(--bm-teal); transform: translate(-50%, -50%) scale(1.08); }

@media (max-width: 1399.98px) { .bm-testi { padding: 96px 40px; } }
@media (max-width: 1199.98px) {
  .bm-testi { padding: 80px 20px; }
  .bm-testi__cell { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 767.98px) {
  .bm-testi { padding: 56px 12px; }
  .bm-testi__cell { flex: 0 0 100%; max-width: 100%; }
  .bm-testicard { gap: 32px; padding: 28px 22px 20px; border-radius: 26px; }
  .bm-testivideo { min-height: 220px; }
}

/* ==========================================================================
   S11 — FAQ  (Figma 80:1807, h 849, teal panel over a split photo)
   ========================================================================== */
.bm-faq { width: 100%; }
.bm-faq__frame {
  position: relative;
  border-radius: var(--bm-r-30);
  overflow: hidden;
  display: flex;
  min-height: 640px;
}
.bm-faq__photo { flex: 0 0 41.7%; max-width: 41.7%; position: relative; }
.bm-faq__photo img { width: 100%; height: 100%; object-fit: cover; }

.bm-faq__panel {
  position: relative;
  flex: 1 1 auto;
  background: var(--bm-teal);
  padding: 100px 30px 92px 50px;
  display: flex;
  flex-direction: column;
  gap: 35px;
  overflow: hidden;
  isolation: isolate;
}
.bm-faq__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .06), transparent 60%);
}

.bm-faq__head { display: flex; flex-direction: column; gap: 16px; }
.bm-faq__head .bm-h2 { color: var(--bm-white); max-width: 720px; }

/* Accordion */
.bm-accordion { display: flex; flex-direction: column; gap: 10px; }
.bm-accordion__item {
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.bm-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 30px;
  min-height: 64px;
  cursor: pointer;
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 38px;
  color: var(--bm-white);
  text-align: left;
  transition: background .3s var(--bm-ease);
}
.bm-accordion__item.is-open .bm-accordion__trigger { background: var(--bm-tab-idle); }

.bm-accordion__chev {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .35s var(--bm-ease);
}
.bm-accordion__chev img { width: 10.5px; height: 12px; }
.bm-accordion__item.is-open .bm-accordion__chev { transform: rotate(180deg); }

.bm-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--bm-ease);
}
.bm-accordion__item.is-open .bm-accordion__panel { max-height: 220px; }
.bm-accordion__panel p {
  padding: 22px 30px 24px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30px;
  color: rgba(255, 255, 255, .7);
}

@media(max-width:1920px){
  .bm-header__left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex: 1 1 auto;
    max-width: 870px;
}

}
@media(max-width:1440px){
  .bm-header__left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex: 1 1 auto;
    max-width: 840px;
}
.bm-sv-perf {
    background: var(--bm-mint);
    padding: 80px 0 100px !important;
}
}
@media(max-width:1366px){
  .bm-ct-book {
    background: var(--bm-mint);
    padding: 120px 25px !important;
}
.bm-marquee__item {
  
    font-size: 30px;
    
}
.bm-ct-step {
    display: flex;
    min-height: 80px !important;
    padding-top: 20px;
    border-top: 1px solid var(--bm-ct-hair);
}
.bm-h2 {
    
    font-size: 36px !important;

}
.bm-sv-perf {
  
    padding: 80px 25px 100px !important;
}
.bm-ab-exp {
    padding: 70px 0 !important;
}
.bm-ab-work {
    padding: 70px 0 70.35px !important;
}
.bm-ab-team {
    padding: 0 0 80px !important;
}
}

@media(max-width:1280px){
  .bm-header__left {
  
    max-width: 770px;
}
.bm-ct-hero {
    padding: 80px 0;
}

}
@media(max-width:1024px){
  .bm-text {
    font-size: 14px;
    line-height: 25px;
}
.bm-ab-founder__card {
  padding: 20px !important;
}
.bm-ab-cert__name {
  
    font-size: 16px !important;
 
}
.bm-ab-founder__cardname {
  
    font-size: 16px !important;
  
  
}
.bm-ab-founder__cardrole {
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
   
}
  .bm-h2 {
    font-size: 26px !important;
    line-height: 35px !important;

}
.bm-ab-exp__title {
    font-size: 22px !important;
    line-height: 32px;
}
.bm-ctaband__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 45px !important;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
}
    /* .bm-ctaband {
        width: 95%;
        margin-top: -180px;
    } */
.bm-ct-value {
    font-size: 20px;
    line-height: 25px;
   
}
.bm-ab-work__item p {
  
    font-size: 16px !important;
    line-height: 25px !important;
   
}
.bm-ab-team__name {
  
    font-size: 24px !important;
  
}
.bm-ct-book {
  
    padding: 60px 25px !important;
}
.bm-marquee__item {
    font-size: 28px;
 
}
.bm-ab-founder__lead {
    color: #fff !important;
}
.bm-ab-founder__certlabel {
    color: #fff !important;
}
.bm-ab-cert__meta {
    color: #fff !important;
}
}
@media (max-width: 1199.98px) {
  .bm-faq__frame { flex-direction: column; min-height: 0; }
  .bm-faq__photo { flex-basis: auto; max-width: 100%; height: 280px; }
  .bm-faq__panel { padding: 56px 24px; }
}
@media (max-width: 767.98px) {
  .bm-faq__frame { border-radius: 20px; }
  .bm-faq__panel { padding: 44px 18px; gap: 24px; }
  .bm-accordion__trigger { padding: 12px 18px; font-size: 16px; line-height: 28px; }
  .bm-accordion__panel p { padding: 5px 18px 20px; }
}

@media(max-width:540px){
  .bm-ab-exp {
    padding: 20px 0 !important;
}
.bm-ab-work {
    padding: 20px 0 70.35px !important;
}
  .bm-h2 {
    font-size: 28px !important;
}
.bm-sv-perf {
    padding: 40px 25px 50px !important;
}
.bm-eyebrow {
    font-size: 14px;

}
.bm-ct-step__name {
    font-size: 16px !important;
  
}
.bm-ct-field input, .bm-ct-field select, .bm-ct-field textarea {

    font-size: 14px !important;
   
}
.bm-marquee__item {
    font-size: 24px;
}
.bm-footer {
    border-radius: 18px;
    padding-top: 130px !important;
}
.bm-ct-book {
    padding: 40px 25px !important;
}
.bm-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 25px;
    align-items: center;
    justify-content: center;
}
.bm-ab-phil {
    padding: 32px 0 50px !important;
}
}

@media(max-width:450px){
  .bm-marquee__item {
    font-size: 22px;
}
.bm-footer__widgets {
    padding-bottom: 30px !important;
   
}
}


@media(max-width:424px){
  .bm-ab-mvp {
    padding: 0 0 40px !important;
}
  .bm-ct-book {
    padding: 40px 15px !important;
}
.bm-h2 {
    font-size: 24px !important;
}
    .bm-sv-index__name {
        font-size: 16px !important;
        line-height: 24px;
    }
    .bm-sv-case__name {
    margin-top: 15px !important;
   
}
.bm-sv-case__name {
    font-size: 20px !important;
    line-height: 30px;
}
.bm-sv-course__name {
    font-size: 16px !important;
   
}
}

@media(max-width:393px){
  .bm-ct-hero {
    padding: 40px 0 20px;
    row-gap: 32px;
}
.bm-ctaband__title {
    font-size: 18px !important;
    line-height: 23px !important;
}
.bm-h1 {
    font-family: var(--bm-font-display);
    font-size: 28px !important;
    line-height: 35px;
    color: var(--bm-ink);
}
}

@media(max-width:320px){
  .bm-sv-index__name {
    font-size: 14px !important;
    line-height: 24px;
}
.bm-ab-team__name {
    font-size: 20px !important;
}
.bm-h2 {
    font-size: 20px !important;
    line-height: 25px !important;
}
.bm-sv-card__text {
    font-size: 14px;
    line-height: 28px;
}
.bm-sv-perf {
    padding: 40px 15px 50px !important;
}
}
/* ==========================================================================
   S12 — CONTACT  (Figma 80:1857, h 688)
   ========================================================================== */
.bm-contact { position: relative; padding: 120px 85.4px; overflow: hidden; isolation: isolate; }
.bm-contact__shape-a, .bm-contact__shape-b { position: absolute; z-index: -1; pointer-events: none; opacity: .6; }
.bm-contact__shape-a { right: 0; top: 0; width: 924px; height: 680px; }
.bm-contact__shape-b { left: 0; bottom: -160px; width: 960px; height: 422px; }
.bm-contact__shape-a img, .bm-contact__shape-b img { width: 100%; height: 100%; object-fit: cover; }

.bm-contact__grid { display: flex; flex-wrap: wrap; gap: 24px; }
.bm-contact__intro { flex: 1 1 460px; max-width: 500px; display: flex; flex-direction: column; gap: 40px; }
.bm-contact__form   { flex: 1 1 500px; }

.bm-contact__headtext { display: flex; flex-direction: column; gap: 16px; }
.bm-contact__headtext .bm-h2 { max-width: 460px; }
.bm-contact__sub { padding-top: 14px; }

/* Phone / email chips */
.bm-contact__chips { display: flex; gap: 20px; flex-wrap: wrap; }
.bm-chip {
  flex: 1 1 220px;
  background: #f5f5f5;
  border: 1px solid rgba(26, 35, 126, .1);
  border-radius: 14px;
  padding: 10.8px 20.8px 15.8px 30.8px;
}
.bm-chip__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: #0a192f;
}
.bm-chip__label img { width: 16px; height: 16px; }
.bm-chip__value { font-family: var(--bm-font-display); font-size: 20px; line-height: 30px; color: var(--bm-ink); }

/* Form */
.bm-form__row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.bm-form__field { flex: 1 1 280px; display: flex; flex-direction: column; }
.bm-form__field label {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body);
}
.bm-form__field input,
.bm-form__field select,
.bm-form__field textarea {
  border: 1px solid rgba(26, 35, 126, .1);
  border-radius: var(--bm-r-20);
  background: var(--bm-mint);
  padding: 18px 24.8px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  color: var(--bm-ink);
  width: 100%;
  transition: border-color .3s var(--bm-ease), box-shadow .3s var(--bm-ease);
}
.bm-form__field textarea { min-height: 121px; resize: vertical; }
.bm-form__field input:focus,
.bm-form__field select:focus,
.bm-form__field textarea:focus {
  outline: none;
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 3px rgba(0, 82, 82, .12);
}

.bm-form__submit {
  padding: 20.16px 51.2px;
  border-radius: 60px;
  background: var(--bm-tab-idle);
  color: var(--bm-white);
  font-family: var(--bm-font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .7px;
  text-transform: uppercase;
  transition: background .35s var(--bm-ease), transform .3s var(--bm-ease);
}
.bm-form__submit:hover { background: var(--bm-teal); transform: translateY(-2px); }

@media (max-width: 1399.98px) { .bm-contact { padding: 96px 40px; } }
@media (max-width: 1199.98px) { .bm-contact { padding: 80px 20px; } }
@media (max-width: 767.98px) {
  .bm-contact { padding: 56px 14px; }
  .bm-contact__chips { flex-direction: row; }
  .bm-form__field label {
    font-size: 14px;
  
}
  .bm-form__field {
    flex: 1 1 70px;
    isplay: flex;
    flex-direction: column;
}
.bm-form__field input, .bm-form__field textarea {
    padding: 10px 24.8px;
    font-size:14px;

}
.bm-form__field select{
    padding: 15px 20px;
    font-size: 14px;
}
.bm-form__submit {
    padding: 15px 30px;
   
}
.bm-testicard__quote {
    font-size: 16px;
    line-height: 25px;
   
}
.bm-testicard__name {
    font-size: 22px;
}
.bm-h2 {
    font-size: 20px !important;
}
  .bm-form__row { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   S13 — CTA STRIP  (Figma 80:2023, h 197 — overlaps the footer's top edge)
   ========================================================================== */
.bm-ctaband {
  position: relative;
  z-index: 2;
  margin-bottom: -101px;
  max-width: 1320px;      /* Figma: 1320 of the 1530 content column, centered */
  margin-inline: auto;
}
.bm-ctaband__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 62.5px 90px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.bm-ctaband__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bm-ctaband__media img {
  position: absolute;
  left: 0;
  top: -46.83%;
  width: 100%;
  height: 193.65%;
  max-width: none;
  object-fit: unset;
}
.bm-ctaband__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(270deg, rgba(18, 18, 18, .42), #353535);
}
.bm-ctaband__title {
  font-family: var(--bm-font-display);
  font-size: 30px;
  line-height: 36px;
  color: var(--bm-white);
  max-width: 610px;
}



@media (max-width: 991.98px) {
  .bm-ctaband { margin-bottom: -120px; }
  .bm-ctaband__inner { padding: 44px; justify-content: center; text-align: center; }
  .bm-ctaband__title { text-align: center; }
}
@media (max-width: 575.98px) {
  .bm-ctaband { margin-bottom: -90px; }
  .bm-ctaband__inner { padding: 32px 24px; border-radius: 18px; }
  .bm-ctaband__title { font-size: 24px; line-height: 32px; }
}

/* ==========================================================================
   S14 — FOOTER  (Figma 80:1917, h 676, teal panel, r30)
   The CTA band above overlaps its top edge (pt-210 in Figma provides room).
   ========================================================================== */
.bm-footer {
  position: relative;
  background: var(--bm-teal);
  border-radius: var(--bm-r-30);
  overflow: hidden;
  padding-top: 210px;
  isolation: isolate;
}
.bm-footer__bg { position: absolute; inset: 0; z-index: -1; opacity: .02; pointer-events: none; }
.bm-footer__bg img { width: 100%; height: 100%; object-fit: cover; }

.bm-footer__widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 0;
  max-width: 1350px;
  margin-inline: auto;
  padding-inline: 15px;
  padding-bottom: 95px;
}
.bm-footer__col { flex: 1 1 260px; padding-inline: 15px; min-width: 0; }
.bm-footer__col--brand { flex: 1 1 300px; }
.bm-footer__col--links { padding-left: 72px; }

/* Brand */
.bm-footer__brand { display: flex; align-items: flex-start; gap: 0; margin-bottom: 25px; }
.bm-footer__brandmark { width: 43px; height: 30px; overflow: hidden; position: relative; flex: 0 0 auto; }
.bm-footer__brandmark img { position: absolute; left: 1.18%; top: -16.27%; width: 100%; height: 133.17%; max-width: none; }
.bm-footer__brandname {
  font-family: var(--bm-font-sans);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: var(--bm-white);
}
.bm-footer__brandtag {
  padding-top: 4px;
  font-family: var(--bm-font-sans);
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--bm-grey);
}
.bm-footer__lead {
  max-width: 320px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
  margin-bottom: 25px;
}
.bm-footer__social { display: flex; gap: 10px; }
.bm-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: #1c6d6d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-white);
  transition: background .3s var(--bm-ease), transform .3s var(--bm-ease);
}
.bm-footer__social a:hover { background: var(--bm-green); transform: translateY(-3px); }
.bm-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

/* Headings + link lists */
.bm-footer__heading {
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-white);
  margin-bottom: 26px;
}
.bm-footer__links { display: flex; flex-direction: column; gap: 10px; }
.bm-footer__links a {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30px;
  color: var(--bm-white);
  transition: color .3s var(--bm-ease), padding-left .3s var(--bm-ease);
}
.bm-footer__links a:hover { color: var(--bm-green); padding-left: 4px; }

/* Contact list */
.bm-footer__contactlead {
  max-width: 241px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
  margin-bottom: 20px;
}
.bm-footer__contactitem {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
}
.bm-footer__contactitem img { width: 20px; height: 20px; margin-top: 5px; flex: 0 0 auto; }

/* About + newsletter */
.bm-footer__about {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-white);
  margin-bottom: 35px;
}
.bm-newsletter { display: flex; max-width: 351.5px; }
.bm-newsletter input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 5px 0 0 5px;
  background: var(--bm-white);
  padding: 12px 20px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  color: var(--bm-body);
}
.bm-newsletter input:focus { outline: 2px solid var(--bm-green); outline-offset: -2px; }
.bm-newsletter button {
  flex: 0 0 58.8px;
  border-radius: 0 5px 5px 0;
  background: var(--bm-green);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--bm-ease);
}
.bm-newsletter button:hover { background: #26a165; }
.bm-newsletter button img { width: 16px; height: 16.8px; transform: scaleY(-1); }

/* Bottom bar */
.bm-footer__bottom {
  max-width: 1320px;
  margin-inline: auto;
  padding: 25.6px 15px 24.8px;
  border-top: .8px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.bm-footer__copy { font-family: var(--bm-font-ui); font-size: 16px; line-height: 30.4px; color: #ccc; }
.bm-footer__legal { display: flex; flex-wrap: wrap; gap: 0 25px; }
.bm-footer__legal a { font-family: var(--bm-font-ui); font-size: 16px; line-height: 30.4px; color: #ccc; transition: color .3s var(--bm-ease); }
.bm-footer__legal a:hover { color: var(--bm-white); }

@media (max-width: 1399.98px) { .bm-footer__col--links { padding-left: 30px; } }
@media (max-width: 1199.98px) {
  .bm-footer { padding-top: 230px; }
  .bm-footer__col--links { padding-left: 15px; }
}
@media (max-width: 767.98px) {
  .bm-footer { border-radius: 18px; padding-top: 190px; }
  .bm-footer__widgets { padding-bottom: 56px; gap: 34px 0; }
  .bm-footer__col { flex: 1 1 100%; }
  .bm-footer__bottom { justify-content: center; text-align: center; }
}

/* ==========================================================================
   A1–A7 — ABOUT PAGE  (Figma 99:2 "beyond-movement-about", 1570 × 7093)
   Everything below is namespaced .bm-ab-* and lives inside .bm-aboutpage.
   NB: .bm-about is already owned by the home page's S3 section, so the page
   wrapper must NOT reuse that name. Header, footer, marquee, CTA band,
   .bm-eyebrow, .bm-h2, .bm-text and .bm-btn-round are all reused as-is.

   Fidelity rule used throughout: the Figma content column is 1530 and the
   inner rail is 1350. Absolute Figma x-positions are converted to % of that
   1350 rail, so at the 1530 design width every value resolves back to the
   exact Figma pixel, and below it the whole grid scales proportionally.
   ========================================================================== */
.bm-aboutpage {
  --bm-ab-onteal: #bebebe;                 /* body copy on the teal founder card */
  --bm-ab-hair-teal: rgba(0, 82, 82, .18); /* vertical dividers */
  --bm-ab-line-teal: rgba(0, 82, 82, .25); /* philosophy connector */
  --bm-ab-ring: rgba(0, 82, 82, .35);      /* philosophy node ring */
}

/* Shared bits ------------------------------------------------------------- */
.bm-ab-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bm-teal);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   A1 — ABOUT HERO  (Figma 101:2, h 679)
   -------------------------------------------------------------------------- */
.bm-ab-hero {
  padding: 86px 0 72px;
  text-align: center;
}
.bm-ab-hero__crumb {
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-grey);
}
.bm-ab-hero .bm-eyebrow { margin-top: 11px; }
.bm-ab-hero__title {
  max-width: 700px;
  margin: 25px auto 0;
}
.bm-ab-hero__intro {
  max-width: 920px;
  margin: 30px auto 0;
}

/* Credential band — 1350 × 150, three equal 450 columns */
.bm-ab-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 150px;
  margin-top: 56px;
  padding-top: 30px;
  background: var(--bm-mint);
  border-radius: var(--bm-r-20);
}
.bm-ab-band__col {
  position: relative;
  padding-inline: 24px;
  text-align: center;
}
.bm-ab-band__col + .bm-ab-band__col::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;                 /* Figma divider y 495 − band y 457 − 30 pad */
  width: 1px;
  height: 74px;
  background: var(--bm-ab-hair-teal);
}
.bm-ab-band .bm-ab-dot { margin-inline: auto; }
.bm-ab-band__label {
  margin-top: 12px;
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-teal);
}
.bm-ab-band__desc {
  margin-top: 4px;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-body);
}

/* --------------------------------------------------------------------------
   A2 — OUR PHILOSOPHY  (Figma 108:2, h 861)
   -------------------------------------------------------------------------- */
.bm-ab-phil { padding: 40px 0 110px; }

.bm-ab-phil__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.bm-ab-phil__left  { width: 48.889%; }   /* 660 / 1350 */
.bm-ab-phil__left .bm-h2 { margin-top: 31px; }
.bm-ab-phil__right {
  width: 43.704%;                        /* 590 / 1350 */
  margin-top: 80px;
}

/* Five-node chain — centres land on 10 / 30 / 50 / 70 / 90 % of the rail */
.bm-ab-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 102px;
}
.bm-ab-chain::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 43px;                /* connector y 373.4 − node y 330.4 */
  height: 2px;
  background: var(--bm-ab-line-teal);
}
.bm-ab-node { text-align: center; }
.bm-ab-node__disc {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-inline: auto;
  border: 1.5px solid var(--bm-ab-ring);
  border-radius: 50%;
  background: var(--bm-mint);
  font-family: var(--bm-font-ui);
  font-weight: 700;
  font-size: 18px;
  color: var(--bm-teal);
}
.bm-ab-node__label {
  margin-top: 24px;
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-ink);
}
.bm-ab-node__desc {
  margin-top: 4px;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-body);
}

.bm-ab-statement {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  margin-top: 62px;
  padding: 30px 24px;
  background: var(--bm-mint);
  border-radius: var(--bm-r-20);
  text-align: center;
}
.bm-ab-statement p {
  max-width: 1150px;
  font-family: var(--bm-font-display);
  font-size: 30px;
  line-height: 44px;
  color: var(--bm-teal);
}

/* --------------------------------------------------------------------------
   A3 — MISSION, VISION & PROMISE  (Figma 109:2, h 971)
   -------------------------------------------------------------------------- */
.bm-ab-mvp { padding: 0 0 110px; }

.bm-ab-mvp__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.bm-ab-mvp__head .bm-h2 { margin-top: 31px; }
.bm-ab-mvp__cta { margin-top: 122px; flex: 0 0 auto; }

.bm-ab-mvp__list {
  margin-top: 102px;
  border-top: 1px solid var(--bm-hairline);
}
.bm-ab-mvp__row {
  display: flex;
  align-items: flex-start;
  padding: 56px 0 64px;     /* row pitch 190 in Figma */
  border-bottom: 1px solid var(--bm-hairline);
}
.bm-ab-num {
  flex: 0 0 11.111%;        /* 150 / 1350 */
  font-family: var(--bm-font-ui);
  font-weight: 700;
  font-size: 60px;
  line-height: 60px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(18, 18, 18, .4);
}
.bm-ab-mvp__label {
  display: flex;
  align-items: flex-start;
  flex: 0 0 30.370%;        /* 410 / 1350 — accent at x150, title at x194 */
  gap: 41px;
  margin-top: 4px;
}
.bm-ab-mvp__accent {
  flex: 0 0 3px;
  width: 3px;
  height: 54px;
  background: var(--bm-teal);
}
.bm-ab-mvp__title {
  margin-top: 8px;
  font-family: var(--bm-font-display);
  font-size: 30px;
  line-height: 36px;
  color: var(--bm-teal);
}
.bm-ab-mvp__body {
  flex: 0 0 48.889%;        /* 660 / 1350 */
  margin-top: 8.5px;
}

/* --------------------------------------------------------------------------
   A4 — ABOUT THE FOUNDER  (Figma 111:2, h 940, teal card on the full 1530)
   -------------------------------------------------------------------------- */
.bm-ab-founder {
  background: var(--bm-teal);
  border-radius: var(--bm-r-30);
}
.bm-ab-founder__grid {
  display: flex;
  align-items: flex-start;
  padding: 90px 0 110px;
}
.bm-ab-founder__media {
  position: relative;
  flex: 0 0 39.020%;        /* 597 / 1530 */
  margin-left: 6.471%;      /* x 99 / 1530 */
}
.bm-ab-founder__photo {
  position: relative;
  aspect-ratio: 597 / 740;
  border-radius: var(--bm-r-20);
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.bm-ab-founder__photo img {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 117.12%;          /* Figma crop: image overflows the frame, top-anchored */
  max-width: none;
  object-fit: cover;
  object-position: top center;
}
.bm-ab-founder__card {
  position: absolute;
  left: 65.477%;            /* x 489.9 relative to the 597 media box */
  top: 75.676%;             /* y 650 relative to the 740 media box */
  width: 56.951%;           /* 340 */
  min-height: 18.919%;      /* 140 */
  padding: 32px;
  background: var(--bm-white);
  border-radius: var(--bm-r-20);
}
.bm-ab-founder__cardname {
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-teal);
}
.bm-ab-founder__cardrole {
  margin-top: 6.4px;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-body-2);
}

.bm-ab-founder__body {
  flex: 0 0 37.255%;        /* 570 / 1530 */
  margin-left: 11.366%;     /* gap between media right edge and x 869.9 */
  padding-top: 20px;        /* grid already pads 90 → eyebrow lands on Figma y 110 */
}
.bm-ab-founder__body .bm-h2 {
  margin-top: 31px;
  color: var(--bm-white);
}
.bm-ab-founder__lead {
  margin-top: 22px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-ab-onteal);
}
.bm-ab-founder__certlabel {
  margin-top: 36px;
  font-family: var(--bm-font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.4px;
  color: var(--bm-ab-onteal);
}
.bm-ab-cert {
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.bm-ab-cert__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.bm-ab-cert__name {
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-white);
}
.bm-ab-cert__meta {
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-ab-onteal);
  text-align: right;
}

/* --------------------------------------------------------------------------
   A5 — CLINICAL EXPERTISE  (Figma 112:2, h 1172)
   -------------------------------------------------------------------------- */
.bm-ab-exp { padding: 110px 0; }

.bm-ab-exp__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.bm-ab-exp__head .bm-h2 { margin-top: 31px; }
.bm-ab-exp__left  { width: 51.852%; }    /* 700 / 1350 */
.bm-ab-exp__intro {
  width: 38.519%;                        /* 520 / 1350 */
  margin-top: 86px;
}

.bm-ab-exp__list {
  margin-top: 92px;
  border-top: 1px solid var(--bm-hairline);
}
.bm-ab-exp__row {
  display: flex;
  align-items: center;
  min-height: 112px;
  border-bottom: 1px solid var(--bm-hairline);
}
.bm-ab-exp__num {
  flex: 0 0 5.926%;         /* 80 / 1350 */
  font-family: var(--bm-font-ui);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--bm-teal);
}
.bm-ab-exp__title {
  flex: 0 0 41.481%;        /* 560 / 1350 */
  padding-right: 40px;
  font-family: var(--bm-font-display);
  font-size: 30px;
  line-height: 36px;
  color: var(--bm-ink);
}
.bm-ab-exp__desc {
  flex: 0 0 44.444%;        /* 600 / 1350 */
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body);
}
.bm-ab-plus {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--bm-mint);
  transition: background .35s var(--bm-ease), transform .35s var(--bm-ease);
}
.bm-ab-plus::before,
.bm-ab-plus::after {
  content: '';
  position: absolute;
  background: var(--bm-teal);
  transition: background .35s var(--bm-ease);
}
.bm-ab-plus::before { left: 15px;    top: 21.25px; width: 14px;  height: 1.5px; }
.bm-ab-plus::after  { left: 21.25px; top: 15px;    width: 1.5px; height: 14px;  }

.bm-ab-exp__row:hover .bm-ab-plus { background: var(--bm-teal); transform: rotate(90deg); }
.bm-ab-exp__row:hover .bm-ab-plus::before,
.bm-ab-exp__row:hover .bm-ab-plus::after { background: var(--bm-white); }

/* --------------------------------------------------------------------------
   A6 — HOW WE WORK  (Figma 113:2, h 580)
   -------------------------------------------------------------------------- */
.bm-ab-work { padding: 109.65px 0 70.35px; }

.bm-ab-work__band {
  min-height: 400px;
  padding: 56px 0 56px;
  background: var(--bm-mint);
  border-radius: var(--bm-r-30);
  text-align: center;
}
.bm-ab-work__title {
  max-width: 900px;
  margin: 29px auto 0;
  font-family: var(--bm-font-display);
  font-size: 30px;
  line-height: 40px;
  color: var(--bm-teal);
}
.bm-ab-work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
  text-align: left;
}
.bm-ab-work__item {
  position: relative;
  padding: 0 44px;
}
.bm-ab-work__item + .bm-ab-work__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  width: 1px;
  height: 90px;
  background: var(--bm-ab-hair-teal);
}
.bm-ab-work__item .bm-ab-dot { width: 10px; height: 10px; }
.bm-ab-work__item p {
  max-width: 249.5px;
  margin-top: 14px;
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-ink);
}

/* --------------------------------------------------------------------------
   A7 — OUR TEAM  (Figma 113:19, h 905)
   -------------------------------------------------------------------------- */
.bm-ab-team { padding: 0 0 135px; }

.bm-ab-team__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.bm-ab-team__head .bm-h2 { margin-top: 31px; }
.bm-ab-team__left  { width: 51.852%; }   /* 700 / 1350 */
.bm-ab-team__intro {
  width: 37.037%;                        /* 500 / 1350 */
  margin-top: 86px;
}

.bm-ab-team__grid {
  display: grid;
  grid-template-columns: 48.889% 48.889%;  /* 660 + 30 gap + 660 */
  justify-content: space-between;
  margin-top: 102px;
}

.bm-ab-team__feature {
  min-height: 480px;
  background: var(--bm-mint);
  border-radius: var(--bm-r-20);
  overflow: hidden;
}
.bm-ab-team__photo { aspect-ratio: 660 / 320; }
.bm-ab-team__photo img { width: 100%; height: 100%; object-fit: cover; }
.bm-ab-team__featurebody { padding: 32px 36px 36px; }
.bm-ab-team__name {
  font-family: var(--bm-font-display);
  font-size: 30px;
  line-height: 36px;
  color: var(--bm-teal);
}
.bm-ab-team__role {
  margin-top: 10px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body-2);
}

.bm-ab-team__member {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  border-bottom: 1px solid var(--bm-hairline);
}
.bm-ab-team__member + .bm-ab-team__member { margin-top: 14px; } /* 150 + 1px rule + 14 = 165 pitch */
.bm-ab-team__thumb {
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  border-radius: var(--bm-r-15);
  overflow: hidden;
  background: rgba(0, 82, 82, .12);
}
.bm-ab-team__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bm-ab-team__mname {
  margin-top: 42px;
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-teal);
}
.bm-ab-team__mrole {
  margin-top: 6.4px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body-2);
}

/* ==========================================================================
   ABOUT — RESPONSIVE
   ≥1570 is the Figma frame 1:1 (covers 1920 / 1680). 1536 → 1280 scale
   proportionally off the % rail; below that the grids reflow.
   ========================================================================== */
@media (max-width: 1399.98px) {
  .bm-ab-mvp__label { gap: 28px; }
  .bm-ab-exp__title { padding-right: 24px; }
  .bm-ab-work__item { padding: 0 28px; }
}

@media (max-width: 1199.98px) {
  .bm-ab-hero { padding: 64px 0 64px; }
  .bm-ab-phil { padding: 32px 0 88px; }
  .bm-ab-exp  { padding: 88px 0; }
  .bm-ab-work { padding: 88px 0 56px; }
  .bm-ab-team { padding: 0 0 96px; }

  .bm-ab-phil__right { margin-top: 56px; }
  .bm-ab-chain { margin-top: 72px; }
  .bm-ab-node__disc { width: 72px; height: 72px; font-size: 16px; }
  .bm-ab-chain::before { top: 35px; }
  .bm-ab-statement p { font-size: 26px; line-height: 38px; }

  .bm-ab-mvp__list { margin-top: 72px; }
  .bm-ab-mvp__row  { padding: 40px 0 46px; }
  .bm-ab-num { font-size: 48px; line-height: 48px; }
  .bm-ab-mvp__title { font-size: 26px; line-height: 32px; }

  .bm-ab-founder__grid { padding: 64px 0 80px; }
  .bm-ab-founder__body { padding-top: 0; }

  .bm-ab-exp__list  { margin-top: 64px; }
  .bm-ab-exp__title { font-size: 26px; line-height: 32px; }

  .bm-ab-work__title { font-size: 26px; line-height: 36px; }
  .bm-ab-team__grid  { margin-top: 72px; }
}

/* Tablet — two-column heads collapse, side-by-side blocks stack */
@media (max-width: 991.98px) {
  .bm-ab-hero { padding: 48px 0 56px; }

  .bm-ab-phil__head,
  .bm-ab-mvp__head,
  .bm-ab-exp__head,
  .bm-ab-team__head {
    flex-direction: column;
    gap: 24px;
  }
  .bm-ab-phil__left,
  .bm-ab-phil__right,
  .bm-ab-exp__left,
  .bm-ab-exp__intro,
  .bm-ab-team__left,
  .bm-ab-team__intro {
    width: 100%;
    margin-top: 0;
  }
  .bm-ab-mvp__cta { margin-top: 8px; }

  /* Chain becomes a 3-up grid; the connector no longer lines up, so drop it */
  .bm-ab-chain {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 16px;
  }
  .bm-ab-chain::before { display: none; }

  /* Mission rows: number + title on one line, body underneath */
  .bm-ab-mvp__row { flex-wrap: wrap; }
  .bm-ab-num      { flex: 0 0 90px; }
  .bm-ab-mvp__label { flex: 1 1 auto; }
  .bm-ab-mvp__body  { flex: 1 1 100%; margin-top: 20px; padding-left: 90px; }

  /* Founder card stacks */
  .bm-ab-founder__grid { flex-direction: column; padding: 48px 20px 56px; }
  .bm-ab-founder__media {
    flex: 1 1 auto;
    width: 100%;
    max-width: 597px;
    margin-left: 0;
  }
  .bm-ab-founder__body {
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
    padding-top: 48px;
  }
  /* Stacked, the media has no body column to its right to absorb the
     card's Figma overhang — pull it back inside the photo. */
  .bm-ab-founder__card {
    left: auto;
    right: 0;
    width: min(340px, 62%);
  }

  /* Expertise rows: title + plus on one line, copy underneath */
  .bm-ab-exp__row {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 28px 0;
  }
  .bm-ab-exp__num   { flex: 0 0 56px; margin-top: 6px; }
  .bm-ab-exp__title { flex: 1 1 auto; padding-right: 16px; }
  .bm-ab-exp__desc  { flex: 1 1 100%; margin-top: 12px; padding-left: 56px; }
  .bm-ab-plus       { margin-top: 0; }

  .bm-ab-work__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .bm-ab-work__item:nth-child(odd)::before { display: none; }

  .bm-ab-team__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .bm-ab-hero { padding: 36px 0 48px; }
  .bm-ab-hero__intro { margin-top: 22px; }

  .bm-ab-band {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0;
    border-radius: var(--bm-r-15);
  }
  .bm-ab-band__col + .bm-ab-band__col::before {
    left: 24px;
    right: 24px;
    top: -14px;
    width: auto;
    height: 1px;
  }

  .bm-ab-chain { grid-template-columns: repeat(2, 1fr); }

  .bm-ab-statement {
    min-height: 0;
    padding: 32px 20px;
    border-radius: var(--bm-r-15);
  }
  .bm-ab-statement p { font-size: 16px; line-height: 31px; }

  .bm-ab-mvp__row  { padding: 32px 0 36px; }
  .bm-ab-num       { flex: 0 0 100%; font-size: 30px; line-height: 44px; }
  .bm-ab-mvp__label { margin-top: 16px; gap: 20px; }
  .bm-ab-mvp__accent { height: 44px; }
  .bm-ab-mvp__title { margin-top: 4px; font-size: 20px; line-height: 30px; }
  .bm-ab-mvp__body  { padding-left: 0; margin-top: 16px; }

  .bm-ab-founder { border-radius: var(--bm-r-20); }
  .bm-ab-founder__grid { padding: 36px 16px 44px; }
  .bm-ab-founder__card {
    position: static;
    width: 100%;
    margin-top: 16px;
    padding: 22px;
  }
  .bm-ab-cert__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 18px 0;
  }
  .bm-ab-cert__meta { text-align: left; }

  .bm-ab-exp { padding: 64px 0; }
  .bm-ab-exp__num   { flex: 0 0 40px; }
  .bm-ab-exp__title { font-size: 23px; line-height: 30px; }
  .bm-ab-exp__desc  { padding-left: 0px; font-size: 14px; }
  .bm-ab-plus { width: 36px; height: 36px; flex-basis: 36px; }
  .bm-ab-plus::before { left: 11px;    top: 17.25px; }
  .bm-ab-plus::after  { left: 17.25px; top: 11px;    }

  .bm-ab-work { padding: 64px 0 40px; }
  .bm-ab-work__band { padding: 40px 0; border-radius: var(--bm-r-20); }
  .bm-ab-work__title { font-size: 18px; line-height: 33px; }
  .bm-ab-work__grid { grid-template-columns: 1fr; margin-top: 36px; gap: 28px; }
  .bm-ab-work__item { padding: 0 24px; }
  .bm-ab-work__item::before { display: none !important; }
  .bm-ab-work__item p { max-width: none; }

  .bm-ab-team { padding: 0 0 72px; }
  .bm-ab-team__feature { min-height: 0; }
  .bm-ab-team__featurebody { padding: 24px 24px 28px; }
  .bm-ab-team__name { font-size: 24px; line-height: 32px; }
  .bm-ab-team__member { gap: 18px; padding-bottom: 18px; }
  .bm-ab-team__thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
  }
  .bm-ab-team__mname { margin-top: 8px; font-size: 21px; line-height: 30px; }
  .bm-ab-team__mrole { font-size: 15px; line-height: 26px; }
}

@media (max-width: 575.98px) {
  .bm-ab-hero__crumb { font-size: 14px; }
  .bm-ab-chain { grid-template-columns: 1fr; gap: 32px; }
  .bm-ab-node__disc { width: 64px; height: 64px; }
  .bm-ab-team__member { flex-direction: column; gap: 14px; }
  .bm-ab-team__thumb { flex: 0 0 auto; width: 120px; height: 120px; }
  .bm-ab-team__mname { margin-top: 0; }
}

/* ==========================================================================
   V1–V4 — SERVICES PAGE  (Figma 114:2 "beyond-movement-services", 1570 × 6483)
   Namespaced .bm-sv-* inside .bm-servicespage. Header, footer, CTA band,
   .bm-eyebrow, .bm-h2, .bm-text and .bm-btn-round are reused unchanged.
   Same fidelity rule as the About page: Figma x-positions are expressed as %
   of the 1350 rail, so they resolve to exact Figma px at the 1530 design
   width and scale proportionally below it.
   ========================================================================== */
.bm-servicespage {
  --bm-sv-onteal: #bebebe;                  /* body copy on teal course cards */
  --bm-sv-cardline: rgba(18, 18, 18, .08);  /* white service card border */
  --bm-sv-tealline: rgba(0, 82, 82, .25);   /* outline chip border */
  --bm-sv-onteal-line: rgba(255, 255, 255, .16);
}

/* Shared: mint pill chips ------------------------------------------------- */
.bm-sv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bm-sv-chip {
  padding: 7px 16px;
  border-radius: 18px;
  background: var(--bm-mint);
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--bm-body-2);
}
/* Outline variant used inside the white performance cards */
.bm-sv-chip--outline {
  background: var(--bm-white);
  border: 1px solid var(--bm-sv-tealline);
  color: var(--bm-teal);
}

/* Shared: small uppercase field label ------------------------------------ */
.bm-sv-label {
  font-family: var(--bm-font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.2px;
  color: var(--bm-grey);
}

/* --------------------------------------------------------------------------
   V1 — SERVICES HERO  (Figma 115:2, h 584)
   -------------------------------------------------------------------------- */
.bm-sv-hero {
  display: grid;
  grid-template-columns: 47.407% 45.185%;   /* 640 | 610 */
  column-gap: 5.926%;                       /* 80 */
  padding: 110px 0 50px;
}
.bm-sv-hero__copy .bm-h2 { margin-top: 31px; }
.bm-sv-hero__lead {
  max-width: 560px;
  margin-top: 28px;
}
.bm-sv-hero__cta { margin-top: 60px; }

/* Two 280-wide index columns, 5 rows each at a 66px pitch */
.bm-sv-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8.197%;                       /* 50 of 610 */
  margin-top: 20px;
}
.bm-sv-index__col { border-bottom: 1px solid var(--bm-hairline); }
.bm-sv-index__row {
  display: flex;
  align-items: center;
  gap: 21px;                                /* number sits at x0, title at x38 */
  min-height: 66px;
  border-top: 1px solid var(--bm-hairline);
}
.bm-sv-index__num {
  flex: 0 0 17px;
  font-family: var(--bm-font-ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--bm-teal);
}
.bm-sv-index__name {
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 28px;
  color: var(--bm-ink);
}

/* --------------------------------------------------------------------------
   V2 — CLINICAL REHABILITATION  (Figma 116:2, h 2834)
   -------------------------------------------------------------------------- */
.bm-sv-clin { padding: 65px 0 69px; }

.bm-sv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.bm-sv-head .bm-h2 { margin-top: 31px; }
.bm-sv-clin__title { width: 53.333%; }      /* 720 / 1350 */
.bm-sv-clin__intro {
  width: 37.037%;                           /* 500 / 1350 */
  margin-top: 86px;
}

.bm-sv-cases { margin-top: 92px; }
.bm-sv-case {
  display: grid;
  grid-template-columns: 45.926% 44.444%;   /* 620 photo | 600 copy */
  column-gap: 8.148%;                       /* 110 */
  align-items: start;
}
.bm-sv-case + .bm-sv-case { margin-top: 80px; }   /* 500 pitch − 420 photo */
.bm-sv-case--flip .bm-sv-case__media { order: 2; }

.bm-sv-case__media {
  position: relative;
  aspect-ratio: 620 / 420;
  border-radius: var(--bm-r-20);
  overflow: hidden;
  background: rgba(0, 82, 82, .12);         /* Figma tint beneath the photo */
}
.bm-sv-case__media img { width: 100%; height: 100%; object-fit: cover; }

.bm-sv-case__body { padding-top: 12px; }
.bm-sv-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bm-mint);
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-teal);
}
.bm-sv-case__name {
  margin-top: 28px;
  font-family: var(--bm-font-display);
  font-size: 30px;
  line-height: 36px;
  color: var(--bm-ink);
}
.bm-sv-case__text { margin-top: 18px; }     /* .bm-text = Inter 16/30.4 #757575 */
.bm-sv-case__label { margin-top: 26px; }
.bm-sv-case .bm-sv-chips { margin-top: 10px; }

/* --------------------------------------------------------------------------
   V3 — MOVEMENT & PERFORMANCE  (Figma 117:2, h 1410, mint on the full 1530)
   -------------------------------------------------------------------------- */
.bm-sv-perf {
  background: var(--bm-mint);
  padding: 120px 0 170px;   /* 110 + 60 to absorb the staggered column below */
}
.bm-sv-perf__title { width: 51.852%; }      /* 700 / 1350 */
.bm-sv-perf__intro {
  width: 35.556%;                           /* 480 / 1350 */
  margin-top: 86px;
}

.bm-sv-perf__grid {
  display: grid;
  grid-template-columns: 48.889% 48.889%;   /* 660 + 30 gap + 660 */
  justify-content: space-between;
  margin-top: 92px;
  row-gap: 40px;
}
/* Figma staggers the right-hand column 60px lower. The negative bottom
   margin cancels the offset out of the grid row so the vertical pitch stays
   at Figma's 440 (400 card + 40 gap) instead of stretching to 500. */
.bm-sv-perf__grid > :nth-child(even) { margin-top: 60px; margin-bottom: -60px; }

.bm-sv-card {
  min-height: 400px;
  padding: 39px;
  border: 1px solid var(--bm-sv-cardline);
  border-radius: var(--bm-r-20);
  background: var(--bm-white);
}
.bm-sv-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bm-mint);
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-teal);
}
.bm-sv-card__name {
  margin-top: 28px;
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-teal);
}
.bm-sv-card__text {
  margin-top: 16px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body-2);
}
.bm-sv-card .bm-sv-chips { margin-top: 26px; }

/* --------------------------------------------------------------------------
   V4 — PROFESSIONAL EDUCATION  (Figma 118:2, h 870)
   -------------------------------------------------------------------------- */
.bm-sv-edu { padding: 110px 0 113px; }
.bm-sv-edu__title { width: 51.852%; }       /* 700 / 1350 */
.bm-sv-edu__intro {
  width: 34.815%;                           /* 470 / 1350 */
  margin-top: 86px;
}

.bm-sv-courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.222%;                              /* 30 / 1350 */
  margin-top: 82px;
}
.bm-sv-course {
  min-height: 260px;
  padding: 31px;
  border: 1px solid var(--bm-sv-onteal-line);
  border-radius: var(--bm-r-20);
  background: var(--bm-teal);
}
.bm-sv-course__tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 18px;
  background: var(--bm-sv-onteal-line);
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--bm-white);
}
.bm-sv-course__name {
  margin-top: 38px;
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-white);
}
.bm-sv-course__text {
  margin-top: 16px;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-sv-onteal);
}
.bm-sv-edu__cta {
  margin-top: 60px;
  text-align: center;
}

/* ==========================================================================
   SERVICES — RESPONSIVE
   ≥1570 is the Figma frame 1:1 (1920 / 1680). 1536 → 1280 scale off the
   % rail; below that the grids reflow.
   ========================================================================== */
@media (max-width: 1399.98px) {
  .bm-sv-card   { padding: 32px; }
  .bm-sv-course { padding: 26px; }
  .bm-sv-case__name { font-size: 27px; line-height: 34px; }
}

@media (max-width: 1199.98px) {
  .bm-sv-hero { padding: 80px 0 48px; }
  .bm-sv-clin { padding: 56px 0 64px; }
  .bm-sv-perf { padding: 88px 0 118px; }
  .bm-sv-edu  { padding: 88px 0 88px; }

  .bm-sv-cases      { margin-top: 72px; }
  .bm-sv-case + .bm-sv-case { margin-top: 56px; }
  .bm-sv-case__name { font-size: 26px; line-height: 32px; }

  .bm-sv-perf__grid  { margin-top: 72px; row-gap: 30px; }
  .bm-sv-perf__grid > :nth-child(even) { margin-top: 30px; margin-bottom: -30px; }
  .bm-sv-card        { min-height: 0; }
  .bm-sv-card__name  { font-size: 22px; line-height: 30px; }

  .bm-sv-courses     { margin-top: 64px; }
  .bm-sv-course      { min-height: 0; }
  .bm-sv-course__name { font-size: 22px; line-height: 30px; margin-top: 30px; }
}

/* Tablet — two-column heads collapse, alternating rows stack */
@media (max-width: 991.98px) {
  .bm-sv-hero {
    grid-template-columns: 1fr;
    row-gap: 48px;
    padding: 56px 0 48px;
  }
  .bm-sv-hero__lead { max-width: none; }
  .bm-sv-index { margin-top: 0; }

  .bm-sv-head { flex-direction: column; gap: 24px; }
  .bm-sv-clin__title,
  .bm-sv-clin__intro,
  .bm-sv-perf__title,
  .bm-sv-perf__intro,
  .bm-sv-edu__title,
  .bm-sv-edu__intro {
    width: 100%;
    margin-top: 0;
  }
  .bm-sv-head .bm-h2 { margin-top: 24px; }

  /* Photo always above the copy once stacked */
  .bm-sv-case {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .bm-sv-case--flip .bm-sv-case__media { order: 0; }
  .bm-sv-case__body { padding-top: 0; }

  .bm-sv-perf__grid { grid-template-columns: 1fr; row-gap: 24px; }
  .bm-sv-perf__grid > :nth-child(even) { margin-top: 0; margin-bottom: 0; }

  .bm-sv-courses { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .bm-sv-hero { padding: 40px 0 40px; row-gap: 36px; }
  .bm-sv-hero__cta { margin-top: 36px; }
  .bm-sv-hero__lead { margin-top: 22px; }
  .bm-sv-index { column-gap: 24px; }
  .bm-sv-index__row { gap: 14px; min-height: 58px; }
  .bm-sv-index__name { font-size: 17px; line-height: 24px; }

  .bm-sv-clin { padding: 10px 0 48px; }
  .bm-sv-cases { margin-top: 48px; }
  .bm-sv-case + .bm-sv-case { margin-top: 44px; }
  .bm-sv-case__name { font-size: 23px; line-height: 30px; }
  .bm-sv-badge { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }

  .bm-sv-perf { padding: 56px 0 56px; }   /* stagger is off below 992 */
  .bm-sv-perf__grid { margin-top: 40px; }
  .bm-sv-card { padding: 24px; border-radius: var(--bm-r-15); }
  .bm-sv-card__name { font-size: 21px; line-height: 29px; margin-top: 22px; }
  .bm-sv-card__text { font-size: 15px; line-height: 28px; }

  .bm-sv-edu { padding: 56px 0 56px; }
  .bm-sv-courses { margin-top: 40px; }
  .bm-sv-course { padding: 22px; border-radius: var(--bm-r-15); }
  .bm-sv-course__name { margin-top: 24px; font-size: 21px; line-height: 29px; }
  .bm-sv-edu__cta { margin-top: 40px; }

  .bm-sv-chip { padding: 6px 14px; font-size: 13px; }
}

@media (max-width: 575.98px) {
  .bm-sv-index { grid-template-columns: 1fr; }
  .bm-sv-index__col + .bm-sv-index__col { border-top: 0; }
  .bm-sv-courses { grid-template-columns: 1fr; }
}

/* ==========================================================================
   C1–C4 — CONTACT PAGE  (Figma 120:2 "beyond-movement-contact", 1570 × 3377)
   Namespaced .bm-ct-* inside .bm-contactpage. Header, footer, CTA band,
   marquee, .bm-eyebrow, .bm-h2, .bm-text and .bm-btn-round are reused.
   Figma x-positions are expressed as % of the 1350 rail so they resolve to
   exact Figma px at the 1530 design width and scale down proportionally.
   NB: Figma section 124:2 "Visit Us" is hidden="true", so it is not built.
   ========================================================================== */
.bm-contactpage {
  --bm-ct-hair: rgba(0, 82, 82, .18);       /* rules inside mint areas */
  --bm-ct-cardline: rgba(18, 18, 18, .08);  /* form card border */
  --bm-ct-inputline: rgba(18, 18, 18, .12); /* input border */
}

/* Small uppercase field label (Inter Medium 12/18, 1.4 tracking) */
.bm-ct-label {
  font-family: var(--bm-font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.4px;
  color: var(--bm-body);
}
/* Gotu 24/33.6 teal — used for panel values and card headings.
   display:block matters: the panel renders these as <a>, and an inline box
   would drop the 8px margin-top and pull the rows out of the 128px pitch. */
.bm-ct-value {
  display: block;
  font-family: var(--bm-font-display);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--bm-teal);
}

/* --------------------------------------------------------------------------
   C1 — CONTACT HERO  (Figma 120:510, h 680)
   -------------------------------------------------------------------------- */
.bm-ct-hero {
  display: grid;
  grid-template-columns: 47.407% 45.185%;   /* 640 copy | 610 panel */
  column-gap: 7.407%;                       /* 100 */
  padding: 120px 0 100px;
}
.bm-ct-hero__copy .bm-h2 { margin-top: 31px; }
.bm-ct-hero__lead {
  max-width: 540px;
  margin-top: 28px;
}
.bm-ct-hero__cta { margin-top: 73px; }

/* Mint contact panel — 610 × 420, 48px inset, three rows at a 128 pitch */
.bm-ct-panel {
  min-height: 420px;
  padding: 48px;
  border-radius: var(--bm-r-30);
  background: var(--bm-mint);
}
.bm-ct-panel__row + .bm-ct-panel__row {
  margin-top: 44.4px;
  padding-top: 23px;
  border-top: 1px solid var(--bm-ct-hair);
}
.bm-ct-panel__row .bm-ct-value { margin-top: 8px; }
.bm-ct-panel__row a.bm-ct-value {
  text-decoration: none;
  transition: opacity .3s var(--bm-ease);
}
.bm-ct-panel__row a.bm-ct-value:hover { opacity: .72; }

/* --------------------------------------------------------------------------
   C2 — BOOKING FORM  (Figma 121:2, h 990, mint band on the 1530 column)
   -------------------------------------------------------------------------- */
.bm-ct-book {
  background: var(--bm-mint);
  padding: 120px 0 138px;
}
.bm-ct-book__grid {
  display: grid;
  grid-template-columns: 45.926% 47.407%;   /* 620 steps | 640 form */
  column-gap: 6.667%;                       /* 90 */
}
.bm-ct-book__copy .bm-h2 { max-width: 600px; margin-top: 31px; }
.bm-ct-book__lead {
  max-width: 500px;
  margin-top: 28px;
}

/* Three numbered steps, 110px pitch, rule above each and below the last */
.bm-ct-steps {
  margin-top: 73px;
  border-bottom: 1px solid var(--bm-ct-hair);
}
.bm-ct-step {
  display: flex;
  min-height: 110px;
  padding-top: 20px;
  border-top: 1px solid var(--bm-ct-hair);
}
.bm-ct-step__num {
  flex: 0 0 6.452%;                         /* 40 / 620 */
  margin-top: 4px;
  font-family: var(--bm-font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-teal);
}
.bm-ct-step__name {
  flex: 0 0 41.935%;                        /* 260 / 620 */
  font-family: var(--bm-font-display);
  font-size: 20px;
  line-height: 30px;
  color: var(--bm-ink);
}
.bm-ct-step__desc {
  flex: 0 0 48.387%;                        /* 300 / 620 */
  margin-top: 4px;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-body);
}

/* Enquiry form card — 640 × 732, 39px inset, 560 inner, 270 + 20 + 270 */
.bm-ct-form {
  padding: 39px;
  border: 1px solid var(--bm-ct-cardline);
  border-radius: var(--bm-r-20);
  background: var(--bm-white);
}
.bm-ct-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.bm-ct-field--wide { grid-column: 1 / -1; }

.bm-ct-field > label {
  display: block;
  font-family: var(--bm-font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--bm-body-2);
}
.bm-ct-field input,
.bm-ct-field select,
.bm-ct-field textarea {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 6px;
  padding: 0 18px;
  border: 1px solid var(--bm-ct-inputline);
  border-radius: 12px;
  background: var(--bm-white);
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 24px;
  color: var(--bm-ink);
  transition: border-color .3s var(--bm-ease), box-shadow .3s var(--bm-ease);
}
.bm-ct-field textarea {
  height: 120px;
  padding: 16px 18px;
  resize: vertical;
}
.bm-ct-field input::placeholder,
.bm-ct-field textarea::placeholder { color: var(--bm-grey); }
.bm-ct-field input:focus,
.bm-ct-field select:focus,
.bm-ct-field textarea:focus {
  outline: 0;
  border-color: var(--bm-teal);
  box-shadow: 0 0 0 3px rgba(0, 82, 82, .12);
}

/* Native select, restyled to match the text inputs with a CSS caret */
.bm-ct-field--select { position: relative; }
.bm-ct-field--select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  color: var(--bm-grey);
  cursor: pointer;
}
.bm-ct-field--select select:valid { color: var(--bm-ink); }
.bm-ct-field--select::after {
  content: '';
  position: absolute;
  right: 20px;
  bottom: 24px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--bm-body);
  border-bottom: 1.5px solid var(--bm-body);
  transform: rotate(45deg);
  pointer-events: none;
}

.bm-ct-form__cta { margin-top: 32px; }
.bm-ct-form__cta .bm-btn-round { border: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   C4 — MAP  (Figma 125:2, h 722) — canvas spans the full 1530 page column
   -------------------------------------------------------------------------- */
.bm-ct-map {
  position: relative;
  padding-top: 45px;
}
.bm-ct-map__canvas {
  aspect-ratio: 1530 / 662;
  border-radius: var(--bm-r-30) var(--bm-r-30) 0 0;
  overflow: hidden;
  background: var(--bm-mint);
}
.bm-ct-map__canvas img,
.bm-ct-map__canvas iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.bm-ct-map__card {
  position: absolute;
  left: 8.490%;                             /* 129.9 / 1530 */
  top: 165px;
  width: 27.451%;                           /* 420 / 1530 */
  min-height: 310px;
  padding: 36px;
  border-radius: var(--bm-r-20);
  background: var(--bm-white);
  box-shadow: 0 14px 18px rgba(0, 41, 41, .12);
}
.bm-ct-map__card .bm-ct-value { margin-top: 8px; }
.bm-ct-map__addr {
  margin-top: 12.4px;
  font-family: var(--bm-font-ui);
  font-size: 16px;
  line-height: 30.4px;
  color: var(--bm-body-2);
}
.bm-ct-map__rule {
  margin-top: 17.2px;
  border-top: 1px solid var(--bm-hairline);
}
.bm-ct-map__cta { margin-top: 27px; }

/* ==========================================================================
   CONTACT — RESPONSIVE
   ≥1570 is the Figma frame 1:1 (1920 / 1680). 1536 → 1280 scale off the
   % rail; below that the grids reflow.
   ========================================================================== */
@media (max-width: 1399.98px) {
  .bm-ct-panel { padding: 40px; }
  .bm-ct-form  { padding: 32px; }
  .bm-ct-map__card { padding: 30px; top: 120px; }
}

@media (max-width: 1199.98px) {
  .bm-ct-hero { padding: 80px 0 88px; }
  .bm-ct-book { padding: 88px 0 96px; }

  .bm-ct-hero__cta { margin-top: 20px; }
  .bm-ct-panel     { min-height: 0; }
  .bm-ct-panel__row + .bm-ct-panel__row { margin-top: 10px; padding-top: 20px; }

  .bm-ct-steps { margin-top: 56px; }
  .bm-ct-step  { min-height: 96px; }

  .bm-ct-map__card {
    top: 80px;
    width: 34%;
    min-height: 0;
  }
  .bm-ct-map__value { font-size: 21px; }
}

/* Tablet — the two-column sections stack */
@media (max-width: 991.98px) {
  .bm-ct-hero,
  .bm-ct-book__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .bm-ct-hero { padding: 56px 0 64px; }
  .bm-ct-hero__lead,
  .bm-ct-book__lead { max-width: none; }
  .bm-ct-steps { margin-top: 48px; }

  .bm-ct-map { padding-top: 40px; }
  .bm-ct-map__canvas { aspect-ratio: 16 / 9; }
  .bm-ct-map__card {
    top: 48px;
    width: 46%;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .bm-ct-hero { padding: 40px 0 48px; row-gap: 32px; }
  .bm-ct-hero__lead { margin-top: 22px; }
  .bm-ct-hero__cta  { margin-top: 20px; }
  .bm-ct-panel {
    padding: 28px;
    border-radius: var(--bm-r-20);
  }
  .bm-ct-value { font-size: 18px; line-height: 30px; }

  .bm-ct-book { padding: 48px 0 56px; }
  .bm-ct-book__grid { row-gap: 32px; }
  .bm-ct-steps { margin-top: 36px; }
  .bm-ct-step {
    flex-wrap: wrap;
    min-height: 0;
    padding: 20px 0;
  }
  .bm-ct-step__num  { flex: 0 0 34px; }
  .bm-ct-step__name { flex: 1 1 auto; }
  .bm-ct-step__desc { flex: 1 1 100%; margin-top: 8px; padding-left: 34px; }

  .bm-ct-form { padding: 22px; border-radius: var(--bm-r-15); }
  .bm-ct-form__grid { grid-template-columns: 1fr; gap: 18px; }
  .bm-ct-form__cta  { margin-top: 24px; }

  /* Card drops below the map rather than covering it */
  .bm-ct-map { padding-top: 32px; }
  .bm-ct-map__canvas {
    aspect-ratio: auto;
    height: 300px;
    border-radius: var(--bm-r-20);
  }
  .bm-ct-map__card {
    position: static;
    width: 100%;
    margin-top: 20px;
    padding: 24px;
    border-radius: var(--bm-r-20);
  }
}

@media (max-width: 575.98px) {
  .bm-ct-map__canvas { height: 240px; }
}