/* Better by Mom components. Load after tokens.css.
   Every value is a token (var(--…)); the only literals are CSS mechanics (0, 100%, auto, keywords, halving and doubling).
   Container queries can't read variables, so each repeats its breakpoint value and names the breakpoint- token beside it.
   Class names: bbm- plus block__element--modifier. Components lay themselves out by their own width. */

/* ------------------------------------------------------------------ base helpers */
.bbm-visually-hidden {
  position: absolute;
  width: var(--sr-only-size);
  height: var(--sr-only-size);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bbm-skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: calc(var(--space-16) * -1);
  z-index: var(--layer-header);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--deep-green);
  color: var(--white);
  font: var(--text-label);
}
.bbm-skip-link:focus { inset-block-start: var(--space-4); outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bbm-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + var(--space-6) * 2);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (width >= 700px) { /* breakpoint-tablet */
  .bbm-container { padding-inline: var(--space-6); }
}
/* From breakpoint-desktop every page runs edge to edge like Home: content starts where the hero's words do
   (page-gutter, a share of the screen's width) and there is no centred maximum. */
@media (width >= 1024px) { /* breakpoint-desktop */
  .bbm-container { max-width: none; padding-inline: var(--page-gutter); }
}
.bbm-section {
  position: relative;
  padding-block: var(--space-16);
  overflow: hidden;
}
@media (width >= 1024px) { /* breakpoint-desktop */
  .bbm-section { padding-block: var(--section-pad); }
}
.bbm-section--peach { background: var(--peach); }
.bbm-section--sage { background: var(--sage-soft); }
.bbm-section--soft { background: var(--taupe-soft); }
.bbm-section--tight-top { padding-block-start: 0; }
.bbm-section > .bbm-container { position: relative; z-index: var(--layer-raised); }
.bbm-pending {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) dashed var(--terracotta-text);
  border-radius: var(--radius-sm);
  color: var(--terracotta-text);
  font: var(--text-small);
}
.bbm-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.bbm-icon .bbm-icon__accent { stroke: var(--terracotta); }
.bbm-link {
  color: var(--deep-green);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--underline-offset);
}
.bbm-link:hover { color: var(--terracotta-text); }
.bbm-link:focus-visible,
.bbm-footer a:focus-visible,
.bbm-nav__link:focus-visible,
.bbm-header__brand:focus-visible,
.bbm-choice:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ------------------------------------------------------------------ Button */
.bbm-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--button-pad-y) var(--button-pad-x);
  border: var(--border-strong) solid var(--deep-green);
  border-radius: var(--radius-pill);
  background: var(--deep-green);
  color: var(--white);
  font: var(--text-button-label-small);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-hover), background-color var(--duration-hover), color var(--duration-hover), box-shadow var(--duration-hover);
}
.bbm-btn:hover { background: var(--ink); border-color: var(--ink); transform: var(--lift-hover); box-shadow: var(--shadow-card-hover); }
.bbm-btn:active { transform: var(--press); box-shadow: none; }
.bbm-btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bbm-btn .bbm-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--glyph-stroke); transition: transform var(--duration-hover); }
.bbm-btn:hover .bbm-icon { transform: translateX(calc(var(--space-1) / 2)); }
.bbm-btn--secondary { background: transparent; color: var(--deep-green); }
.bbm-btn--secondary:hover { background: var(--deep-green); border-color: var(--deep-green); color: var(--white); }
.bbm-btn--on-dark { background: var(--cream); border-color: var(--cream); color: var(--deep-green); }
.bbm-btn--on-dark:hover { background: var(--peach); border-color: var(--peach); color: var(--deep-green); }
.bbm-btn--on-dark:focus-visible { outline-color: var(--focus-ring-on-dark); }
.bbm-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .bbm-btn, .bbm-btn .bbm-icon, .bbm-choice { transition: none; }
  .bbm-btn:hover, .bbm-btn:active, .bbm-choice:hover { transform: none; }
  .bbm-btn:hover .bbm-icon { transform: none; }
}

/* ------------------------------------------------------------------ Header */
/* After the Original's website and phone concepts: a white bar, the ink logo with its orange leaf mark, ink links
   and the deep-green pill; on phones the logo and a plain three-line menu button. */
.bbm-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--layer-header);
  background: var(--header);
  container-type: inline-size;
}
.bbm-header__bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height-narrow);
  padding-inline: var(--header-pad-start-narrow) var(--header-pad-end-narrow);
}
.bbm-header__brand { display: block; flex: none; line-height: 0; border-radius: var(--radius-sm); }
.bbm-header__brand picture { display: block; }
.bbm-header__brand img { width: var(--logo-header-narrow); height: auto; }
.bbm-menu-button {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.bbm-menu-button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.bbm-menu-button .bbm-icon { width: var(--menu-glyph); height: var(--menu-glyph); stroke-width: var(--glyph-stroke); }
.bbm-menu-button__close { display: none; }
.bbm-header[data-open] .bbm-menu-button__open { display: none; }
.bbm-header[data-open] .bbm-menu-button__close { display: block; }
.bbm-header__nav {
  display: none;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  padding: var(--space-2) var(--space-5) var(--space-6);
  background: var(--header);
  border-block-start: var(--border-width) solid var(--divider);
  box-shadow: var(--shadow-float);
}
.bbm-header[data-open] .bbm-header__nav { display: block; }
.bbm-nav__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bbm-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--ink);
  font: var(--text-nav-mobile);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.bbm-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--terracotta); text-decoration-thickness: var(--underline-weight); text-underline-offset: var(--underline-offset); }
.bbm-nav__link:hover { color: var(--deep-green); text-decoration: underline; text-decoration-thickness: var(--underline-weight); text-underline-offset: var(--underline-offset); }
.bbm-nav__item--cta { margin-block-start: var(--space-3); }
.bbm-nav__item--cta .bbm-btn { width: 100%; }
.bbm-header__cta { display: none; }
/* From breakpoint-nav the bar is the Original's: logo hard left, links and button hard right, every size and gap a
   share of the screen's width (cqw), so the layout holds its proportions on wide screens instead of centring. */
@container (width >= 1200px) { /* breakpoint-nav */
  .bbm-header__bar { gap: 0; min-height: var(--header-height); padding-inline: var(--header-pad-start) var(--header-pad-end); }
  .bbm-header__brand img { width: var(--logo-header); }
  .bbm-menu-button { display: none; }
  .bbm-header__nav { display: block; position: static; min-width: 0; margin-inline-start: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .bbm-nav__list { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; column-gap: var(--nav-gap); } /* wraps only under user text spacing */
  .bbm-nav__link { font: var(--text-nav); letter-spacing: var(--tracking-ui); }
  .bbm-nav__link:hover { text-decoration: underline; }
  .bbm-nav__item--cta, .bbm-nav__item--phone { display: none; }
  .bbm-header__cta {
    display: inline-flex;
    flex: none;
    min-height: var(--header-button-height);
    margin-inline-start: var(--header-cta-gap);
    padding: 0 var(--header-button-pad-x);
    font: var(--text-header-button);
    letter-spacing: var(--tracking-ui);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ Hero */
/* Every page's hero, after the Original's home hero (and the board's pages, which share its shape): one picture with
   the words laid over it. On phones the tall picture (leaves along the top, the photo at the foot); from
   breakpoint-tablet the wide one (leaves at the left edge, the photo on the right, the words over the light wood).
   The box keeps each picture's proportions and every position and size is a share of its width (cqw); if a page's
   words need more room, the box grows and the picture keeps covering it. --home: the Original's own home hero, with
   its larger title set at its exact place. Container queries, so it works in any layout. */
.bbm-hero { background: var(--cream); color: var(--ink); container-type: inline-size; overflow: hidden; } /* data-theme="light": the photographs keep their light words in the dark theme */
.bbm-hero__stage { position: relative; display: grid; aspect-ratio: var(--ratio-page-hero-phone); }
.bbm-hero--home .bbm-hero__stage { aspect-ratio: var(--ratio-home-hero-phone); }
.bbm-hero__picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bbm-hero__picture--wide { display: none; }
.bbm-hero__inner {
  position: relative;
  z-index: var(--layer-raised);
  padding: var(--page-hero-pad-top-phone) var(--space-4) var(--page-hero-pad-bottom-phone) var(--home-hero-gutter-phone);
}
.bbm-hero__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--terracotta-text);
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.bbm-hero__title {
  margin: 0;
  color: var(--deep-green);
  font: var(--text-page-title-phone);
  letter-spacing: var(--tracking-home-title);
}
.bbm-hero__title-first { display: block; }
.bbm-hero__lead {
  margin: var(--home-hero-lead-gap-phone) 0 0;
  color: var(--ink);
  font: var(--text-page-lead-phone);
  letter-spacing: var(--tracking-ui-phone);
}
.bbm-hero__lead-part { display: block; }
.bbm-hero__actions { margin-block-start: var(--page-hero-action-gap-phone); }
.bbm-hero__actions .bbm-btn {
  min-height: var(--home-hero-button-height-phone);
  padding: 0 var(--space-6);
  font: var(--text-button-label-small);
  letter-spacing: var(--tracking-ui-phone);
}
.bbm-hero__actions .bbm-btn .bbm-icon { width: var(--icon-in-text); height: var(--icon-in-text); }
.bbm-hero--home .bbm-hero__inner { padding-block: var(--home-hero-pad-top-phone) 0; }
.bbm-hero:not(.bbm-hero--home) .bbm-hero__inner { align-self: center; } /* phones: the other pages' words sit centred between the leaves and the photo, so pages with less to say leave no gap below */
.bbm-hero--home .bbm-hero__title { font: var(--text-home-title-phone); }
.bbm-hero--home .bbm-hero__lead { font: var(--text-home-lead-phone); }
.bbm-hero--home .bbm-hero__actions { margin-block-start: var(--home-hero-action-gap-phone); }
.bbm-hero--home .bbm-hero__actions .bbm-btn { padding: 0 var(--home-hero-button-pad-x-phone); font: var(--text-home-button-phone); }
@container (width >= 700px) { /* breakpoint-tablet */
  .bbm-hero__stage, .bbm-hero--home .bbm-hero__stage { aspect-ratio: var(--ratio-home-hero); }
  .bbm-hero__picture--tall { display: none; }
  .bbm-hero__picture--wide { display: block; object-position: right center; }
  .bbm-hero__inner { align-self: center; padding: var(--page-hero-pad-block) 0 var(--page-hero-pad-block) var(--home-hero-gutter); }
  .bbm-hero__eyebrow { margin-block-end: var(--page-hero-eyebrow-gap); font: var(--text-eyebrow-wide); }
  .bbm-hero__title { max-width: var(--page-hero-title-measure); font: var(--text-page-title); }
  .bbm-hero__title-first { margin-inline-start: var(--home-hero-title-hang); color: var(--ink); }
  .bbm-hero__lead { max-width: var(--page-hero-measure); margin-block-start: var(--home-hero-lead-gap); font: var(--text-page-lead); letter-spacing: var(--tracking-ui); }
  .bbm-hero__actions { margin-block-start: var(--home-hero-action-gap); }
  .bbm-hero__actions .bbm-btn {
    min-height: var(--home-hero-button-height);
    padding: 0 var(--home-hero-button-pad-x);
    font: var(--text-home-button);
    letter-spacing: var(--tracking-ui);
  }
  /* the other pages: if their words make the box taller than the picture, it grows from its left edge, keeping
     the wood behind the words and letting the photo run off to the right */
  .bbm-hero:not(.bbm-hero--home) .bbm-hero__picture--wide { object-position: left center; }
  .bbm-hero--home .bbm-hero__inner { align-self: start; padding: var(--home-hero-pad-top) 0 0 var(--home-hero-gutter); }
  .bbm-hero--home .bbm-hero__title { max-width: none; font: var(--text-home-title); }
  .bbm-hero--home .bbm-hero__lead { max-width: none; font: var(--text-home-lead); }
  .bbm-hero--home .bbm-hero__actions { margin-block-start: var(--home-hero-action-gap); }
}
/* Tablets and small laptops, the other pages only: their longer words don't fit on the picture's wood below
   breakpoint-nav, so the wide picture shows whole as a band under the words, on cream (proposed; the Original has
   no tablet concept). From breakpoint-nav every page's hero is the same height: the picture's own. */
@container (width >= 700px) and (width < 1200px) { /* breakpoint-tablet to breakpoint-nav */
  .bbm-hero:not(.bbm-hero--home) .bbm-hero__stage { display: flex; flex-direction: column; aspect-ratio: auto; }
  .bbm-hero:not(.bbm-hero--home) .bbm-hero__picture--wide { position: static; height: auto; aspect-ratio: var(--ratio-home-hero); order: 2; }
  .bbm-hero:not(.bbm-hero--home) .bbm-hero__inner { align-self: stretch; box-sizing: border-box; min-height: var(--page-hero-words-min); padding: var(--space-12) var(--space-6) var(--space-10) var(--home-hero-gutter); }
  .bbm-hero:not(.bbm-hero--home) .bbm-hero__title { max-width: none; }
  .bbm-hero:not(.bbm-hero--home) .bbm-hero__lead { max-width: var(--measure); }
}
@container (width >= 1024px) { /* breakpoint-desktop: the home line's first two sentences share a line, as in the Original */
  .bbm-hero__lead-part { display: inline; }
  .bbm-hero__lead-part:last-child { display: block; }
}

/* ------------------------------------------------------------------ CategoryBar */
/* The Original's category strip, straight under the home hero: a white band of five columns split by hairlines,
   each an ink line icon (no disc) with a terracotta accent, a bold capital title and a grey second line. */
.bbm-catbar { background: var(--white); container-type: inline-size; }
.bbm-catbar__list {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--grid-two);
  gap: var(--space-8) var(--space-4);
  max-width: calc(var(--container) + var(--space-6) * 2);
  margin: 0 auto;
  padding: var(--strip-pad) var(--space-5);
  list-style: none;
}
.bbm-catbar__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.bbm-catbar__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bbm-catbar .bbm-icon { width: var(--strip-icon); height: var(--strip-icon); color: var(--ink); stroke-width: var(--icon-stroke-strip); margin-block-end: var(--space-2); }
.bbm-catbar__title { margin: 0; color: var(--ink); font: var(--text-strip-title); letter-spacing: var(--tracking-strip); text-transform: uppercase; }
.bbm-catbar__caption { margin: 0; color: var(--ink-soft); font: var(--text-caption); }
@container (width >= 560px) { /* breakpoint-columns-two */
  .bbm-catbar__list { grid-template-columns: var(--grid-three); }
  .bbm-catbar__item:last-child:nth-child(odd) { grid-column: auto; }
}
/* From breakpoint-columns-wide: the Original's strip, five equal columns across the whole screen, split by
   hairlines, sized as a share of the width like the hero above it. */
@container (width >= 960px) { /* breakpoint-columns-wide */
  .bbm-catbar__list { grid-template-columns: var(--grid-five); gap: 0; max-width: none; padding: var(--strip-pad-wide) 0; }
  .bbm-catbar__item { gap: var(--space-1); padding-inline: var(--space-2); }
  .bbm-catbar__item + .bbm-catbar__item { border-inline-start: var(--border-width) solid var(--divider); }
  .bbm-catbar .bbm-icon { width: var(--strip-icon-wide); height: var(--strip-icon-wide); margin-block-end: var(--strip-icon-gap-wide); }
  .bbm-catbar__title { font: var(--text-strip-title-wide); }
  .bbm-catbar__caption { font: var(--text-caption-wide); }
}
.bbm-catbar--four .bbm-catbar__item:last-child:nth-child(odd) { grid-column: auto; }
.bbm-catbar--four .bbm-catbar__title { font: var(--text-strip-label); letter-spacing: var(--tracking-ui); text-transform: none; } /* Board: the other pages' strips are set in plain words */
@container (width >= 560px) { /* breakpoint-columns-two */
  .bbm-catbar--four .bbm-catbar__list { grid-template-columns: var(--grid-two); }
}
@container (width >= 960px) { /* breakpoint-columns-wide */
  .bbm-catbar--four .bbm-catbar__list { grid-template-columns: var(--grid-four); }
  .bbm-catbar--four .bbm-catbar__title { font: var(--text-strip-label-wide); }
}
@container (width >= 1280px) { /* breakpoint-wide */
  .bbm-catbar__caption { white-space: nowrap; }
}

/* ------------------------------------------------------------------ SectionHeading */
.bbm-section-heading { max-width: var(--measure); margin: 0 auto var(--space-10); text-align: center; }
.bbm-section-heading--start { margin-inline: 0; text-align: start; }
.bbm-section-heading__title {
  margin: 0;
  color: var(--deep-green);
  font: var(--text-h2-mobile);
  text-wrap: balance;
}
.bbm-section-heading__intro { margin: var(--space-4) 0 0; color: var(--deep-green); }
.bbm-section-heading__sprig { display: block; width: auto; height: var(--space-12); margin: 0 auto var(--space-3); }
.bbm-section-heading--start .bbm-section-heading__sprig { margin-inline: 0; }
@media (width >= 1024px) { /* breakpoint-desktop: section titles start where the hero's words do */
  .bbm-section-heading { margin-inline: 0; text-align: start; }
  .bbm-section-heading__sprig { margin-inline: 0; }
}
@media (width >= 700px) { /* breakpoint-tablet */
  .bbm-section-heading__title { font: var(--text-h2); }
}

/* ------------------------------------------------------------------ IconStrip */
/* Icons in soft discs with a title and an optional caption. --categories: the Original's five-up category strip,
   centred. --row: icon beside text, for benefits with a sentence each. --band: on a white card band under a hero. */
.bbm-icons { container-type: inline-size; }
.bbm-icons__list {
  display: grid;
  grid-template-columns: var(--grid-two);
  gap: var(--space-8) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bbm-icons__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.bbm-icons__disc {
  display: grid;
  place-items: center;
  width: var(--icon-disc-sm);
  height: var(--icon-disc-sm);
  border-radius: var(--radius-pill);
  background: var(--taupe-soft);
  color: var(--deep-green);
}
.bbm-icons__title { margin: 0; color: var(--deep-green); font: var(--text-label); }
.bbm-icons__caption { margin: 0; color: var(--deep-green); font: var(--text-caption); }
.bbm-icons__text { margin: 0; color: var(--deep-green); font: var(--text-small); }
.bbm-icons--categories .bbm-icons__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bbm-icons--categories .bbm-icons__title { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.bbm-icons--band {
  box-sizing: border-box;
  padding: var(--space-8) var(--space-6);
  border: var(--border-width) solid var(--taupe);
  border-radius: var(--radius-md);
  background: var(--white);
}
.bbm-icons--row .bbm-icons__list { grid-template-columns: var(--grid-one); gap: var(--space-6); }
.bbm-icons--row .bbm-icons__item { display: grid; grid-template-columns: var(--grid-icon-row); align-items: start; gap: var(--space-4); text-align: start; }
.bbm-icons--row .bbm-icons__body { display: flex; flex-direction: column; gap: var(--space-1); }
.bbm-icons--sage .bbm-icons__disc { background: var(--sage-soft); }
.bbm-icons--white .bbm-icons__disc { background: var(--white); }
@container (width >= 560px) { /* breakpoint-columns-two */
  .bbm-icons--categories .bbm-icons__list { grid-template-columns: var(--grid-three); }
  .bbm-icons--categories .bbm-icons__item:last-child:nth-child(odd) { grid-column: auto; }
  .bbm-icons__disc { width: var(--icon-disc); height: var(--icon-disc); }
}
@container (width >= 700px) { /* breakpoint-tablet */
  .bbm-icons--row .bbm-icons__list { grid-template-columns: var(--grid-three); gap: var(--space-8); }
  .bbm-icons--row .bbm-icons__item { grid-template-columns: var(--grid-one); }
  .bbm-icons--four .bbm-icons__list { grid-template-columns: var(--grid-four); }
}
@container (width >= 960px) { /* breakpoint-columns-wide: --row titles become section-card titles, as large as the steps' */
  .bbm-icons--categories .bbm-icons__list { grid-template-columns: var(--grid-five); }
  .bbm-icons--row .bbm-icons__list { gap: var(--space-12); }
  .bbm-icons--row .bbm-icons__item { grid-template-columns: var(--grid-one); gap: var(--space-5); }
  .bbm-icons--row .bbm-icons__title { font: var(--text-h3); letter-spacing: var(--tracking-heading); }
  .bbm-icons--row .bbm-icons__text { font: var(--text-body); }
}

/* ------------------------------------------------------------------ SplitSection */
.bbm-split { container-type: inline-size; }
.bbm-split__inner { display: grid; grid-template-columns: var(--grid-one); gap: var(--space-8); align-items: center; }
.bbm-split__media { margin: 0; }
.bbm-split__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-landscape);
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.bbm-split__media--edge { display: none; }
.bbm-split__title { margin: 0; color: var(--deep-green); font: var(--text-h2-mobile); text-wrap: balance; }
.bbm-split__text p { margin: var(--space-4) 0 0; color: var(--deep-green); max-width: var(--measure); }
.bbm-split__actions { margin-block-start: var(--space-8); }
.bbm-split__text .bbm-split__signature { font: var(--text-quote); font-style: italic; color: var(--terracotta-text); }
@container (width >= 700px) { /* breakpoint-tablet */
  .bbm-split__title { font: var(--text-h2); }
}
@container (width >= 820px) { /* breakpoint-split */
  .bbm-split__inner { grid-template-columns: var(--grid-split); gap: var(--space-12); }
  .bbm-split--reverse .bbm-split__inner { grid-template-columns: var(--grid-split-reverse); }
  .bbm-split--reverse .bbm-split__media { order: -1; }
  /* photographed leaves run in from the page's edge, as in the hero: the figure reaches back over the container's
     padding (--space-6 here) and is as tall as the text beside it */
  .bbm-split__media--edge { display: block; position: relative; align-self: stretch; margin-inline-start: calc(-1 * var(--space-6)); }
  .bbm-split__media--edge img { position: absolute; inset-block: 0; inset-inline-start: 0; width: auto; height: 100%; aspect-ratio: auto; border-radius: 0; }
}
@media (width >= 1024px) { /* breakpoint-desktop: the container's padding is the page gutter */
  .bbm-split__media--edge { margin-inline-start: calc(-1 * var(--page-gutter)); }
}

/* ------------------------------------------------------------------ Steps */
/* The guide's three steps as one numbered line: terracotta discs joined by a hairline, each step's words under its
   disc (beside it, with the line running down, on phones). No cards. */
.bbm-steps { container-type: inline-size; }
.bbm-steps__list { display: grid; grid-template-columns: var(--grid-one); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: bbm-step; }
.bbm-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-icon-row);
  gap: var(--space-5);
  align-items: start;
  padding-block-end: var(--space-8);
  counter-increment: bbm-step;
}
.bbm-steps__item::before {
  content: counter(bbm-step);
  position: relative;
  z-index: var(--layer-raised);
  display: grid;
  place-items: center;
  width: var(--step-disc);
  height: var(--step-disc);
  border-radius: var(--radius-pill);
  background: var(--terracotta);
  color: var(--on-accent);
  font: var(--text-h3);
}
.bbm-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: var(--step-disc) 0;
  inset-inline-start: calc(var(--step-disc) / 2);
  border-inline-start: var(--border-strong) solid var(--taupe);
}
.bbm-steps__title { margin: 0; color: var(--deep-green); font: var(--text-h3-mobile); letter-spacing: var(--tracking-heading); }
.bbm-steps__text { margin: var(--space-2) 0 0; color: var(--deep-green); font: var(--text-body-mobile); }
@container (width >= 960px) { /* breakpoint-columns-wide */
  .bbm-steps__list { grid-template-columns: var(--grid-three); gap: var(--space-12); }
  .bbm-steps__item { grid-template-columns: var(--grid-one); align-content: start; gap: var(--space-6); padding: 0; }
  .bbm-steps__item:not(:last-child)::after { inset-block: calc(var(--step-disc) / 2) auto; inset-inline: var(--step-disc) calc(var(--space-12) * -1); border-inline-start: 0; border-block-start: var(--border-strong) solid var(--taupe); }
  .bbm-steps__title { font: var(--text-h3); }
  .bbm-steps__text { max-width: var(--measure); font: var(--text-body); }
}

/* ------------------------------------------------------------------ ChoiceCards */
.bbm-choices { container-type: inline-size; }
.bbm-choices__list { display: grid; grid-template-columns: var(--grid-one); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.bbm-choice {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--grid-icon-row);
  gap: var(--space-4);
  align-items: center;
  height: 100%;
  min-height: var(--touch-target);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--taupe);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--deep-green);
  text-decoration: none;
  transition: transform var(--duration-hover), box-shadow var(--duration-hover), border-color var(--duration-hover);
}
.bbm-choice:hover { transform: var(--lift-hover); box-shadow: var(--shadow-card-hover); border-color: var(--terracotta); }
.bbm-choice__disc { display: grid; place-items: center; width: var(--icon-disc-sm); height: var(--icon-disc-sm); border-radius: var(--radius-pill); background: var(--sage-soft); }
.bbm-choice__title { display: block; font: var(--text-label); }
.bbm-choice__text { display: block; margin-block-start: var(--space-1); font: var(--text-small); }
@container (width >= 560px) { /* breakpoint-columns-two */
  .bbm-choices__list { grid-template-columns: var(--grid-two); }
}
@container (width >= 960px) { /* breakpoint-columns-wide */
  .bbm-choices__list { gap: var(--space-6); }
  .bbm-choice { gap: var(--space-6); padding: var(--space-8); }
  .bbm-choice__disc { width: var(--icon-disc); height: var(--icon-disc); }
  .bbm-choice__title { font: var(--text-h3); letter-spacing: var(--tracking-heading); }
  .bbm-choice__text { margin-block-start: var(--space-2); font: var(--text-body); }
}

/* ------------------------------------------------------------------ Form */
.bbm-form {
  box-sizing: border-box;
  padding: var(--space-6);
  border: var(--border-width) solid var(--taupe);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  container-type: inline-size;
}
.bbm-form__title { margin: 0 0 var(--space-2); color: var(--deep-green); font: var(--text-h3-mobile); }
.bbm-form__intro { margin: 0 0 var(--space-6); color: var(--deep-green); font: var(--text-small); }
.bbm-form__grid { display: grid; grid-template-columns: var(--grid-one); gap: var(--space-5); align-items: end; }
.bbm-field { display: flex; flex-direction: column; gap: var(--space-2); }
.bbm-field__label { color: var(--deep-green); font: var(--text-label); }
.bbm-field__optional { font: var(--text-small); }
.bbm-field__hint { margin: 0; color: var(--deep-green); font: var(--text-small); }
.bbm-field__control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--deep-green);
  font: var(--text-body-mobile);
}
textarea.bbm-field__control { min-height: var(--textarea-min); resize: vertical; }
.bbm-field__control:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--border-width); border-color: var(--deep-green); }
.bbm-field__control[aria-invalid="true"] { border-color: var(--error); }
.bbm-field__select { position: relative; }
.bbm-field__select select { appearance: none; padding-inline-end: var(--space-12); }
.bbm-field__select::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-5);
  inset-block-start: 50%;
  width: var(--chevron-size);
  height: var(--chevron-size);
  border-inline-end: var(--glyph-stroke) solid var(--deep-green);
  border-block-end: var(--glyph-stroke) solid var(--deep-green);
  transform: var(--chevron-transform);
  pointer-events: none;
}
input[type="file"].bbm-field__control { padding-block: var(--space-3); font: var(--text-small); }
.bbm-field__error { margin: 0; color: var(--error); font: var(--text-label); }
.bbm-form__actions { margin-block-start: var(--space-6); }
.bbm-form__note { margin: var(--space-4) 0 0; color: var(--deep-green); font: var(--text-small); }
@container (width >= 560px) { /* breakpoint-columns-two */
  .bbm-form { padding: var(--space-8); }
  .bbm-form__grid { grid-template-columns: var(--grid-two); }
  .bbm-field--full { grid-column: 1 / -1; }
  .bbm-form__title { font: var(--text-h3); }
}

/* ------------------------------------------------------------------ ContactDetails */
.bbm-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-6); }
.bbm-contact__item { display: grid; grid-template-columns: var(--grid-icon-row); gap: var(--space-4); align-items: start; }
.bbm-contact__disc { display: grid; place-items: center; width: var(--icon-disc-sm); height: var(--icon-disc-sm); border-radius: var(--radius-pill); background: var(--peach); color: var(--deep-green); }
.bbm-contact__label { margin: 0; color: var(--deep-green); font: var(--text-label); }
.bbm-contact__value { margin: var(--space-1) 0 0; color: var(--deep-green); font: var(--text-small); }

/* ------------------------------------------------------------------ Note */
.bbm-note {
  box-sizing: border-box;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--taupe);
  border-radius: var(--radius-md);
  background: var(--taupe-soft);
  color: var(--deep-green);
  font: var(--text-small);
}
.bbm-note__title { display: block; color: var(--terracotta-text); font: var(--text-label); }

/* ------------------------------------------------------------------ Columns (two-up layout helper) */
.bbm-columns { container-type: inline-size; }
.bbm-columns__inner { display: grid; grid-template-columns: var(--grid-one); gap: var(--space-10); align-items: start; }
@container (width >= 820px) { /* breakpoint-split */
  .bbm-columns__inner { grid-template-columns: var(--grid-form); gap: var(--space-12); }
}

/* ------------------------------------------------------------------ CtaBand */
.bbm-cta {
  position: relative;
  overflow: hidden;
  background: var(--deep-green);
  color: var(--cream);
  container-type: inline-size;
}
.bbm-cta__inner {
  position: relative;
  z-index: var(--layer-raised);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--grid-one);
  gap: var(--space-6);
  align-items: center;
  max-width: calc(var(--container) + var(--space-6) * 2);
  margin-inline: auto;
  padding: var(--space-16) var(--space-5);
}
.bbm-cta__title { margin: 0; color: var(--cream); font: var(--text-h2-mobile); max-width: var(--measure-title); text-wrap: balance; }
.bbm-cta__text { margin: var(--space-3) 0 0; color: var(--cream); max-width: var(--measure); }
@container (width >= 700px) { /* breakpoint-tablet */
  .bbm-cta__inner { grid-template-columns: var(--grid-band); padding: var(--space-16) var(--space-6); }
  .bbm-cta__title { font: var(--text-h2); }
}
@media (width >= 1024px) { /* breakpoint-desktop */
  .bbm-cta__inner { max-width: none; padding: var(--section-pad) var(--page-gutter); }
}

/* ------------------------------------------------------------------ Footer */
.bbm-footer { background: var(--deep-green); color: var(--cream); container-type: inline-size; }
.bbm-footer__inner { box-sizing: border-box; max-width: calc(var(--container) + var(--space-6) * 2); margin-inline: auto; padding: var(--space-16) var(--space-5) var(--space-8); }
.bbm-footer__main { display: grid; grid-template-columns: var(--grid-one); gap: var(--space-10); }
.bbm-footer__brand img { width: var(--logo-footer); height: auto; }
.bbm-footer__line { margin: var(--space-4) 0 0; font: var(--text-small); max-width: var(--measure-title); }
.bbm-footer__label { margin: 0 0 var(--space-3); color: var(--peach); font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.bbm-footer__links { margin: 0; padding: 0; list-style: none; }
.bbm-footer__links a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--cream); font: var(--text-footer-link); text-decoration: none; border-radius: var(--radius-sm); }
.bbm-footer__links a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.bbm-footer__info { margin: 0; padding: 0; list-style: none; font: var(--text-small); display: grid; gap: var(--space-2); }
.bbm-footer__pending { opacity: var(--opacity-decor); font-style: italic; }
.bbm-footer a:focus-visible { outline-color: var(--focus-ring-on-dark); }
.bbm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width) solid var(--cream-line);
  font: var(--text-small);
}
.bbm-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.bbm-footer__legal a { color: var(--cream); }
.bbm-footer__legal p { margin: 0; }
@container (width >= 700px) { /* breakpoint-tablet */
  .bbm-footer__inner { padding-inline: var(--space-6); }
  .bbm-footer__main { grid-template-columns: var(--grid-two); }
}
@container (width >= 960px) { /* breakpoint-columns-wide */
  .bbm-footer__main { grid-template-columns: var(--grid-footer); }
}
@media (width >= 1024px) { /* breakpoint-desktop */
  .bbm-footer__inner { max-width: none; padding-inline: var(--page-gutter); }
}
.bbm-footer__info a { color: var(--cream); }