/* --------------------------------------------------------------------------
   Benson Blackburn — client section styles.

   Why this file exists: assets/css/tailwind.css is a FROZEN static build of
   only the utilities the shipped mfin1 PHP uses. Utility classes written into
   post_content would not exist in it. Page content is therefore authored with
   semantic `bb-` classes and styled here — which also keeps the markup in the
   editor readable for the client.

   Loaded after theme.css. Tokens come from the Theme Options :root block:
     --color-primary   #000000  Benson Blackburn Black
     --color-secondary #3D7CC9  Benson Blackburn Blue
     --color-text      #6F7271  Benson Blackburn Gray

   Neutral tints come from the --bb-grey-* ramp in style.css, which is derived
   from #6F7271. Do not reach for Tailwind's `slate` scale here: it is blue-cast
   and clashes with #3D7CC9.
   -------------------------------------------------------------------------- */

:root {
  --bb-wrap: 1280px;
  --bb-gutter: 1.5rem;
  --bb-rule: rgba(0, 0, 0, 0.12);
  --bb-rule-dark: rgba(255, 255, 255, 0.16);

  /* Height of the fixed header once scrolled (py-4 + 2.375rem logo), for
     anchor offsets and anything that sticks beneath it. Keep in step with
     the header padding and scrolled logo heights below. */
  --bb-header-h: 4.5rem;
  /* Solutions mobile index bar; 0 where the index sits beside the content. */
  --bb-subnav-h: 3rem;
}

@media (min-width: 640px) {
  :root { --bb-gutter: 2.5rem; }
}

@media (min-width: 1000px) {
  :root { --bb-subnav-h: 0px; }
}

@media (min-width: 1024px) {
  :root { --bb-gutter: 60px; --bb-header-h: 4.875rem; }
}

@media (min-width: 1400px) {
  :root { --bb-header-h: 5.25rem; }
}

/* The fixed header sits below the WP admin bar when logged in
   (32px, or 46px at 782px and under — see theme.css). */
body.admin-bar { --bb-header-h: calc(4.5rem + 46px); }

@media (min-width: 783px) {
  body.admin-bar { --bb-header-h: calc(4.5rem + 32px); }
}

@media (min-width: 1024px) {
  body.admin-bar { --bb-header-h: calc(4.875rem + 32px); }
}

@media (min-width: 1400px) {
  body.admin-bar { --bb-header-h: calc(5.25rem + 32px); }
}

/* Type scale. Every size above 1rem is a clamp() that runs from its
   desktop size (at 1280px+) down to a phone size (at 375px) of
   16px × (desktop / 16px)^0.673. That curve shrinks large headings the
   most (72px → 44px) and body copy barely (17px → 16.7px), and because it
   is monotonic the size order never flips. Sizes of 1rem and under don't
   scale, so small labels stay readable. To add a size, run it through the
   same formula rather than adding breakpoint font-size steps.
   Exceptions: form inputs stay at 16px+ (iOS zooms on focus below that),
   and the desktop nav keeps its own steps so it fits on one line. */
body { font-size: 1rem; }

/* The frozen Tailwind build sizes its text utilities in fixed rem. Re-point
   the ones the templates use at the scale. Line heights are the same ratios
   Tailwind uses, made unitless so they follow the font size. */
.text-\[9px\]  { font-size: 0.5625rem; }
.text-\[11px\] { font-size: 0.6875rem; }
.text-xs   { font-size: 0.75rem;  line-height: 1.3333; }
.text-sm   { font-size: 0.875rem; line-height: 1.4286; }
.text-base { font-size: 1rem;               line-height: 1.5; }
.text-lg   { font-size: clamp(1.082rem, 1.065rem + 0.07515vw, 1.125rem); line-height: 1.5556; }
.text-xl   { font-size: clamp(1.162rem, 1.126rem + 0.1555vw, 1.25rem);  line-height: 1.4; }
.text-2xl  { font-size: clamp(1.314rem, 1.237rem + 0.3293vw, 1.5rem);   line-height: 1.3333; }
.text-3xl  { font-size: clamp(1.527rem, 1.382rem + 0.6159vw, 1.875rem); line-height: 1.2; }
.text-4xl  { font-size: clamp(1.726rem, 1.509rem + 0.9266vw, 2.25rem);  line-height: 1.1111; }
.text-5xl  { font-size: clamp(2.095rem, 1.719rem + 1.601vw, 3rem);     line-height: 1; }
.text-6xl  { font-size: clamp(2.434rem, 1.889rem + 2.327vw, 3.75rem);  line-height: 1; }
.text-7xl  { font-size: clamp(2.752rem, 2.027rem + 3.091vw, 4.5rem);   line-height: 1; }

/* Same specificity as the rules above, so restate the leading utilities the
   templates pair with them or they would lose. */
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.1\] { line-height: 1.1; }

.bb-wrap {
  width: 100%;
  max-width: var(--bb-wrap);
  margin-inline: auto;
  padding-inline: var(--bb-gutter);
}

/* ==========================================================================
   Header fit

   mfin1 ships a 1024px desktop/mobile nav switch sized for its demo's four
   short nav labels. This client has six longer ones ("Who We Serve",
   "Contact Us") plus the CLIENT PORTAL button, beside a 612x118 wordmark —
   which at the stock h-12 is 247px wide. Below ~1200px that does not fit, and
   the flex row silently wraps three labels onto two lines.

   Fixed here rather than in the PHP because the theme's tailwind.css is a
   frozen build with no `xl:` display utilities and no 1280px media block.
   ========================================================================== */

/* Logo is large at rest over the hero and shrinks to the compact size once
   `.scrolled` paints the bar white. The at-rest height scales with the
   viewport because it has to share the bar with six nav labels and the
   CLIENT PORTAL button — see the fit note above. */
#site-header .logo-white,
#site-header .logo-color {
  height: clamp(2.75rem, -0.25rem + 4.5vw, 4.25rem);
  width: auto;
  transition: height 300ms ease;
}

#site-header.scrolled .logo-white,
#site-header.scrolled .logo-color {
  height: 2.375rem;
}

#site-header .nav-link,
#site-header .portal-btn {
  white-space: nowrap;
}

@media (min-width: 1024px) {
  #site-header > div:first-of-type > nav { gap: 1.75rem; }

  #site-header .nav-link {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  #site-header .portal-btn {
    padding-inline: 1.125rem;
    padding-block: 0.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }
}

@media (min-width: 1400px) {
  #site-header.scrolled .logo-white,
  #site-header.scrolled .logo-color { height: 2.75rem; }

  #site-header > div:first-of-type > nav { gap: 2.25rem; }

  #site-header .nav-link,
  #site-header .portal-btn {
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
  }
}

/* Move the desktop/mobile switch from 1024px up to 1200px. */
@media (max-width: 1199.98px) {
  #site-header > div:first-of-type > nav { display: none; }
  #site-header #mobile-menu-toggle { display: inline-flex; }
  #mobile-menu:not(.hidden) { display: block; }
}

@media (min-width: 1200px) {
  #site-header #mobile-menu-toggle { display: none; }
  #mobile-menu { display: none; }
}

/* Shared eyebrow / rule / heading -------------------------------------- */

.bb-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  /* 0.35em on a 63-character eyebrow costs three lines on a 390px screen. */
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .bb-eyebrow {
    letter-spacing: 0.35em;
  }
}

.bb-rule {
  width: 8rem;
  height: 2px;
  border: 0;
  margin: 1.75rem 0 0;
  background: var(--color-secondary);
}

.bb-h2 {
  margin: 0;
  color: var(--color-primary);
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(2.324rem, 1.836rem + 2.08vw, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.bb-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  /* 100vh on mobile is the *large* viewport, which would hide the bottom 60px
     of copy behind the browser chrome. svh is the same 100vh on desktop. */
  height: 100svh;
  min-height: 32rem;
  overflow: hidden;
  background-color: var(--color-primary);
}

.bb-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Two scrims. The stops are not eyeballed: this lobby shot has a near-white
   ceiling and a glass wall directly behind both the header nav and the
   headline, so the alpha at each band was solved from the brightest composited
   pixel measured there, targeting >= 4.5:1 for white text.
     top    — carries the fixed header's white nav at rest (scrolled state
              paints the bar white and needs no help)
     bottom — carries the eyebrow / h1 / sub block
   Lightening these will silently break WCAG AA; re-measure if you touch them. */
.bb-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.52) 12%, rgba(0, 0, 0, 0.18) 22%, rgba(0, 0, 0, 0) 32%),
    linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.80) 25%, rgba(0, 0, 0, 0.66) 50%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.06) 88%, rgba(0, 0, 0, 0) 100%);
}

.bb-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 7rem var(--bb-gutter) 2.5rem;
}

/* Pinned to the hero's own edges, not the centred content column — the copy
   sits 60px from the left and 60px from the bottom, as the template does. */
@media (min-width: 1024px) {
  .bb-hero__inner {
    padding: 9rem 60px 60px;
  }
}

.bb-hero__inner .bb-wrap {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.bb-hero__copy {
  max-width: 60rem;
}

.bb-hero .bb-eyebrow {
  color: #ffffff;
}

.bb-hero__title {
  margin: 0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(2.752rem, 2.027rem + 3.091vw, 4.5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: balance;
}

.bb-hero__sub {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.123rem, 1.096rem + 0.1147vw, 1.1875rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   Tier 1 — split section: image left, content right

   This is mfin1's stock `.section-split`, reproduced in semantic CSS because
   the content lives in post_content and tailwind.css is a frozen build.
   Template equivalents kept 1:1:
     grid-cols-1 lg:grid-cols-2 · gap-10 lg:gap-16 · py-14 sm:py-20 lg:py-28
     image column full-bleed to the left edge · content column pr-[60px]
     inner measure max-w-xl · h2 font-serif text-brand-primary
     w-32 h-px bg-brand-secondary rule · body text-slate-600
   ========================================================================== */

.bb-split {
  padding-block: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  overflow: hidden;
}

.bb-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .bb-split__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }
}

.bb-split__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-primary);
  overflow: hidden;
}

/* The stock template fixes the image at aspect-[4/3] with the row centred.
   This client's right column carries a heading, an intro and three named
   audiences, so on desktop the image stretches to match rather than floating
   short against a much taller column (the "orphaned column" the house rules
   forbid). Below lg it keeps the 4:3 the template specifies. */
@media (min-width: 1024px) {
  .bb-split__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 32rem;
  }
}

.bb-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.bb-split__body {
  padding-inline: var(--bb-gutter);
}

@media (min-width: 1024px) {
  .bb-split__body {
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-right: max(var(--bb-gutter), (100vw - var(--bb-wrap)) / 2);
  }
}

.bb-split__measure {
  width: 100%;
  max-width: 36rem;
}

.bb-split .bb-h2 { color: var(--color-primary); }

.bb-split__intro {
  margin: 1.75rem 0 0;
  font-size: clamp(1.042rem, 1.033rem + 0.03687vw, 1.0625rem);
  line-height: 1.75;
  color: var(--color-text);
}

/* The three audiences the plan lists under Tier 1. */
.bb-audiences {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bb-rule);
}

.bb-audiences li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--bb-rule);
}

.bb-audiences__title {
  margin: 0 0 0.375rem;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(1.123rem, 1.096rem + 0.1147vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-primary);
}

.bb-audiences__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* ==========================================================================
   Tier 2 — feature section: dark band + overlapping notched card

   mfin1's stock `.section-feature`. Template equivalents kept 1:1:
     dark band pt-20 sm:pt-24 lg:pt-32 / pb-28 sm:pb-36 lg:pb-44, centred
     card pulled up -mt-20 sm:-mt-24 lg:-mt-32, bg-slate-100 (remapped to --bb-grey-100),
     border-b-4 border-brand-primary, centred body

   Three departures, all requested by the client:
     - the card is Benson Blackburn Gray (--bb-grey-600, #6F7271), not the
       #F3F4F4 tint, so its copy is reversed out in white
     - no notch (the template's `.card-notch` triangle is omitted)
     - card caps at 1200px, not the template's max-w-5xl (1024px)
   ========================================================================== */

.bb-feature {
  position: relative;
  /* One knob drives both the band's lower padding and how far the card is
     pulled up into it, so the overlap can never invert at a small viewport. */
  --bb-band-pad: clamp(7rem, 4rem + 10vw, 16rem);
  --bb-card-lift: calc(var(--bb-band-pad) - 2.75rem);
}

.bb-feature__band {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
}

.bb-feature__band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Graded scrim: heavier over the text at the top of the band, easing off over
   the lower half so the photograph still reads behind the card. Stops solved
   from the brightest pixel in the image, not picked by eye. */
.bb-feature__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0) 72%),
    rgba(0, 0, 0, 0.55);
}

.bb-feature__bandinner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4.5rem, 3rem + 6vw, 8rem) var(--bb-band-pad);
  padding-inline: var(--bb-gutter);
  text-align: center;
}

/* White, not brand blue. mfin1's demo uses the secondary colour for this
   pre-headline, but #3D7CC9 against a photograph needs a near-black backdrop
   to clear 4.5:1 — measured 1.26:1 here — which would mean hiding the image
   entirely. Blue stays on the rule below the title, where it is decorative. */
.bb-feature .bb-eyebrow { color: #ffffff; }

.bb-feature__title {
  max-width: 64rem;
  margin: 0 auto;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(2.095rem, 1.719rem + 1.601vw, 3rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-wrap: balance;
}

.bb-feature__rule {
  width: 6rem;
  height: 2px;
  border: 0;
  margin: 1.75rem auto 0;
  background: var(--color-secondary);
}

.bb-feature__cardwrap {
  position: relative;
  padding-inline: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
  padding-bottom: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  margin-top: calc(-1 * var(--bb-card-lift));
}

.bb-feature__card {
  position: relative;
  max-width: var(--bb-card-max, 1200px);
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 0.5rem + 4vw, 5rem);
  background: var(--bb-grey-600);
  border-bottom: 4px solid var(--color-primary);
  text-align: center;
}

/* Full card width by request (was a 48rem centred measure). */
.bb-feature__copy {
  max-width: none;
}

/* Everything inside the card is white now that the card is Benson Blackburn
   Gray: white on #6F7271 is 4.86:1, which clears AA at every size used here.
   Brand grey on itself would of course be invisible, and --color-primary
   (black) is only 4.32:1 — under AA for the 16px proof headings. */
.bb-feature__copy p {
  margin: 0;
  font-size: clamp(1.042rem, 1.033rem + 0.03687vw, 1.0625rem);
  line-height: 1.8;
  color: #ffffff;
}

.bb-feature__copy p + p { margin-top: 1.25rem; }

/* Five proof points, inside the card so the section keeps the template's
   single-card silhouette. */
.bb-proof {
  --bb-proof-gap: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem var(--bb-proof-gap);
  margin-top: clamp(2.5rem, 1.8rem + 2.8vw, 3.5rem);
  padding-top: clamp(2.5rem, 1.8rem + 2.8vw, 3.5rem);
  border-top: 1px solid var(--bb-rule-dark);
  text-align: center;
}

/* Fixed basis, no grow: the row stays an even 1 / 2 / 3 up, and the two
   left over on the last row centre instead of packing to the left. */
.bb-proof > * { flex: 0 1 100%; }

@media (min-width: 560px) {
  .bb-proof > * { flex-basis: calc((100% - var(--bb-proof-gap)) / 2); }
}

@media (min-width: 900px) {
  .bb-proof > * { flex-basis: calc((100% - 2 * var(--bb-proof-gap)) / 3); }
}

.bb-proof__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

/* The tick above each proof point was brand blue. On #6F7271 that is 1.14:1 —
   it simply disappears — so it matches the copy. Blue is kept on the band's
   `.bb-feature__rule` above, where it still reads. */
.bb-proof__title::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin: 0 auto 0.75rem;
  background: #ffffff;
}

.bb-proof__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #ffffff;
}

/* Visually-hidden label. Tailwind's `sr-only` is not in this theme's frozen
   utility build, so the footer's fax row needs its own. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Motion
   ========================================================================== */

/* No content on this page is revealed by animation, so nothing is hidden when
   motion is off — this just stops the decorative nav underline, header fade
   and smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* --- Page banner -------------------------------------------------------- */

/* mfin1's page hero uses a flat bg-black/40 over the banner. These banners are
   bright glass-and-sky architecture and the fixed white nav sits over the top
   of them, so it gets the same treatment as the homepage hero: a graded scrim
   solved from measured pixels rather than a single flat alpha. */
.page-hero > .absolute.inset-0.bg-black\/40 {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.50) 22%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.52) 100%);
}

.page-hero h1 {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* --- Shared interior prose ---------------------------------------------- */

.bb-page {
  padding-block: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
}

.bb-prose {
  font-size: clamp(1.042rem, 1.033rem + 0.03687vw, 1.0625rem);
  line-height: 1.8;
  color: var(--color-text);
}

.bb-prose p { margin: 0; }

/* `p + p` (0,1,2) rather than `> * + *` (0,1,0): the latter loses to the
   `margin: 0` shorthand above and the paragraphs run together. */
.bb-prose p + p,
.bb-prose ul + p { margin-top: 1.25rem; }

.bb-prose ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem 2.5rem;
}

@media (min-width: 720px) {
  .bb-prose ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bb-prose li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.6;
}

.bb-prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 2px;
  background: var(--color-secondary);
}

/* A lede is larger, not a different colour — it sits next to body copy. */
.bb-lede {
  font-size: clamp(1.314rem, 1.237rem + 0.3293vw, 1.5rem);
  line-height: 1.55;
  color: var(--color-text);
  font-weight: 400;
}

/* --- Tiered interior sections (Who We Serve) ---------------------------- */

.bb-tiers {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}

.bb-tier {
  display: grid;
  gap: 1.5rem 4rem;
  padding-top: clamp(2.5rem, 1.8rem + 2.8vw, 3.5rem);
  border-top: 1px solid var(--bb-rule);
  align-items: start;
}

@media (min-width: 900px) {
  .bb-tier { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.bb-tier__title {
  margin: 0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(1.661rem, 1.468rem + 0.8207vw, 2.125rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-primary);
  text-wrap: balance;
}

/* --- Solutions: sticky numbered index + numbered panels ------------------ */

.bb-solutions {
  display: grid;
  /* minmax(0, …) so the one-line mobile index bar scrolls instead of
     stretching the column wider than the screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .bb-solutions { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 5rem; }
}

.bb-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bb-rule);
}

/* Sticky has to sit on the grid item, not the <ul> inside it: the <ul>'s
   parent is only as tall as the list, so it had no range to travel.
   `align-self: start` keeps the item from stretching to the row height,
   which would also leave it nothing to scroll through. */
@media (min-width: 1000px) {
  .bb-index-wrap {
    position: sticky;
    top: calc(var(--bb-header-h) + 2rem);
    align-self: start;
    /* Never taller than the viewport under the fixed header. */
    max-height: calc(100vh - var(--bb-header-h) - 4rem);
    overflow-y: auto;
  }
}

.bb-index a {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--bb-rule);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.bb-index a:hover,
.bb-index a:focus-visible { color: var(--color-primary); }

.bb-index a[aria-current="true"] {
  color: var(--color-primary);
  font-weight: 600;
}

/* Brand gray (4.86:1), not brand blue: at 13px the blue is 4.26:1 and fails
   AA. Blue is fine on `.bb-panel__num`, which is large text. */
.bb-index__num {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-weight: 700;
}

.bb-index a[aria-current="true"] .bb-index__num { color: var(--color-primary); }

.bb-panel + .bb-panel {
  margin-top: var(--bb-panel-gap);
  padding-top: var(--bb-panel-gap);
  border-top: 1px solid var(--bb-rule);
}

/* Clears the fixed header (and the mobile index bar) when an index link
   jumps to a panel, so the number and title land in full view. */
.bb-panel {
  --bb-panel-gap: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);
  scroll-margin-top: calc(var(--bb-header-h) + var(--bb-subnav-h) + 1.5rem);
}

/* Later panels carry a divider and top padding above the number; take the
   padding back out so every jump lands with the number 1.5rem under the
   header rather than a large empty band. */
.bb-panel + .bb-panel {
  scroll-margin-top: calc(var(--bb-header-h) + var(--bb-subnav-h) + 1.5rem - var(--bb-panel-gap));
}

/* Below 1000px there is no room for the side index. It stays as the full
   stacked list where it sits at the top of the page; once that list has
   scrolled up under the header, client.js shows this compact copy of it as
   a bar of tabs pinned beneath the header. The bar scrolls sideways and
   client.js keeps the active tab in view. Never shown at 1000px+. */
.bb-index-bar {
  position: fixed;
  top: var(--bb-header-h);
  left: 0;
  right: 0;
  z-index: 30; /* under the header (z-40), so it slides out from behind it */
  background: #ffffff;
  border-bottom: 1px solid var(--bb-rule);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 250ms ease, visibility 0s linear 250ms;
}

.bb-index-bar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 250ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .bb-index-bar,
  .bb-index-bar.is-shown { transition: none; }
}

@media (min-width: 1000px) {
  .bb-index-bar { display: none; }
}

.bb-index-bar__list {
  display: flex;
  gap: 0.25rem;
  height: var(--bb-subnav-h);
  margin: 0;
  padding: 0 var(--bb-gutter);
  list-style: none;
  position: relative; /* offsetParent for the tab-centring maths */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bb-index-bar__list::-webkit-scrollbar { display: none; }

.bb-index-bar__list li { flex: none; }

.bb-index-bar__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 0 0.75rem;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.bb-index-bar__list a:hover,
.bb-index-bar__list a:focus-visible { color: var(--color-primary); }

.bb-index-bar__list a[aria-current="true"] {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-secondary);
}

.bb-index-bar__list a[aria-current="true"] .bb-index__num { color: var(--color-primary); }

/* Panel 01's title is wider than a phone; the full title is right there in
   the panel, so the tab can truncate. */
.bb-index-bar__list a > span:last-child {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-panel__num {
  display: block;
  margin: 0 0 0.75rem;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(1.853rem, 1.585rem + 1.144vw, 2.5rem);
  line-height: 1;
  color: var(--color-secondary);
}

.bb-panel__title {
  margin: 0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(1.853rem, 1.585rem + 1.144vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-primary);
  text-wrap: balance;
}

.bb-panel__sub {
  margin: 0.75rem 0 0;
  font-size: clamp(1.082rem, 1.065rem + 0.07515vw, 1.125rem);
  line-height: 1.5;
  color: var(--color-text);
  font-style: italic;
}

.bb-panel .bb-rule { margin-top: 1.5rem; }
.bb-panel .bb-prose { margin-top: 1.75rem; }

/* --- Alliances: the two buttons the plan calls for ---------------------- */

.bb-choices {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 1.8rem + 2.8vw, 3.5rem);
}

@media (min-width: 720px) {
  .bb-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bb-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-primary);
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(1.527rem, 1.382rem + 0.6159vw, 1.875rem);
  line-height: 1.2;
  text-align: center;
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.bb-choice:hover,
.bb-choice:focus-visible {
  background: var(--color-primary);
  color: #ffffff;
}

/* --- Contact ------------------------------------------------------------ */

.bb-contact {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .bb-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}

.bb-contact__list {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

/* Brand gray, not blue: at 11px the blue is 4.26:1 on white and fails AA.
   Rule of thumb on this site — brand blue is for rules, bars and large text
   only; small text on white is brand gray (4.86:1) or black. */
.bb-contact__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text);
}

.bb-contact__value {
  font-size: clamp(1.042rem, 1.033rem + 0.03687vw, 1.0625rem);
  line-height: 1.6;
  color: var(--color-primary);
}

.bb-contact__value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--bb-rule); }
.bb-contact__value a:hover { border-bottom-color: var(--color-secondary); }

/* Clients We Serve map, below the info/form grid. The source image is
   745px wide, so it is capped there rather than stretched. */
.bb-clients-map {
  margin-top: clamp(3rem, 2.2rem + 3.2vw, 4.5rem);
  padding-top: clamp(3rem, 2.2rem + 3.2vw, 4.5rem);
  border-top: 1px solid var(--bb-rule);
  text-align: center;
}

.bb-clients-map .bb-h2 { color: var(--color-primary); }

.bb-clients-map .bb-rule { margin-inline: auto; }

.bb-map {
  display: block;
  width: 100%;
  max-width: 745px;
  height: auto;
  margin: 2.5rem auto 0;
}

/* Page-banner eyebrow: the theme uses the secondary colour, but brand blue
   over a photograph does not reach AA (same finding as the homepage feature
   band). White here; blue stays on the rule beside the name in the body. */
.page-hero p {
  color: #ffffff !important;
}

.bb-team-email {
  margin: 2rem 0 0;
  font-size: 0.9375rem;
}

.bb-team-email a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-secondary);
  padding-bottom: 2px;
}

.bb-team-email a:hover { color: var(--color-secondary); }

/* The single-bio body reuses .bb-prose inside the theme's own grid. */
.team-single .bb-prose p + p { margin-top: 1.25rem; }

/* --- Gravity Forms ------------------------------------------------------
   The contact form ships with Gravity's own blue submit button and default
   inputs, which read as an unstyled third-party block on the page. Pulled
   into the design system here. */

.bb-form .gform_wrapper .gform_fields {
  grid-row-gap: 1.5rem;
}

.bb-form .gform_wrapper .gfield_label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.bb-form .gform_wrapper .gfield_required,
.bb-form .gform_wrapper .gfield_required_text {
  color: #b42318;
  letter-spacing: 0;
}

.bb-form .gform_wrapper input[type="text"],
.bb-form .gform_wrapper input[type="email"],
.bb-form .gform_wrapper input[type="tel"],
.bb-form .gform_wrapper textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--bb-rule);
  border-radius: 0;
  background: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-primary);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.bb-form .gform_wrapper input:focus,
.bb-form .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgb(var(--color-secondary-rgb) / 0.18);
}

.bb-form .gform_wrapper textarea { min-height: 10rem; resize: vertical; }

/* GF 2.9's orbital theme does not paint the submit button from a plain rule —
   it resolves every visual property from --gf-ctrl-btn-* custom properties, so
   the `.gform_button` declarations below never reach it no matter how specific
   they are. Retheming through GF's own variables is the supported route, and
   it wins on specificity alone: GF declares the defaults on
   `.gform-theme--framework` (0,1,0), this scope is (0,2,0).
   The plain rule is kept for a form switched to GF's legacy theme, where these
   variables do not exist. */
.bb-form .gform_wrapper {
  --gf-ctrl-btn-font-family: inherit;
  /* A default-size button resolves font-size and padding-x from the `-md`
     variants directly, skipping the unsuffixed ones; both are set so the
     button holds its shape if the size class ever changes. */
  --gf-ctrl-btn-font-size: 0.6875rem;
  --gf-ctrl-btn-font-size-md: 0.6875rem;
  --gf-ctrl-btn-font-weight: 700;
  --gf-ctrl-btn-letter-spacing: 0.25em;
  --gf-ctrl-btn-text-transform: uppercase;
  --gf-ctrl-btn-radius: 0;
  --gf-ctrl-btn-size: auto;
  --gf-ctrl-btn-padding-x: 2rem;
  --gf-ctrl-btn-padding-x-md: 2rem;
  --gf-ctrl-btn-padding-y: 1rem;
  --gf-ctrl-btn-border-width-primary: 1px;
  --gf-ctrl-btn-border-style-primary: solid;

  --gf-ctrl-btn-bg-color-primary: transparent;
  --gf-ctrl-btn-color-primary: var(--color-primary);
  --gf-ctrl-btn-border-color-primary: var(--color-primary);

  --gf-ctrl-btn-bg-color-hover-primary: var(--color-primary);
  --gf-ctrl-btn-color-hover-primary: #ffffff;
  --gf-ctrl-btn-border-color-hover-primary: var(--color-primary);

  --gf-ctrl-btn-bg-color-focus-primary: var(--color-primary);
  --gf-ctrl-btn-color-focus-primary: #ffffff;
  --gf-ctrl-btn-border-color-focus-primary: var(--color-primary);

  --gf-ctrl-btn-shadow: none;
  --gf-ctrl-btn-shadow-hover: none;
  --gf-ctrl-btn-shadow-focus: none;
}

.bb-form .gform_wrapper .gform_footer { margin-top: 2rem; padding: 0; }

.bb-form .gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.bb-form .gform_wrapper .gform_button:hover,
.bb-form .gform_wrapper .gform_button:focus-visible {
  background: var(--color-primary);
  color: #ffffff;
}

.bb-form .gform_wrapper .gfield_validation_message,
.bb-form .gform_wrapper .validation_message {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-left: 3px solid #b42318;
  background: #fef3f2;
  font-size: 0.875rem;
  color: #912018;
}

.bb-form .gform_wrapper .gform_validation_errors {
  border-radius: 0;
  border-left: 3px solid #b42318;
}

.bb-form .gform_confirmation_message {
  padding: 1.5rem;
  border-left: 3px solid var(--color-secondary);
  background: var(--bb-grey-100);
  font-size: clamp(1.042rem, 1.033rem + 0.03687vw, 1.0625rem);
  line-height: 1.7;
  color: var(--color-primary);
}

/* Team archive / single: the theme sets the role line in the secondary colour,
   which at 11px is 4.26:1 on white and fails AA. Brand gray is 4.86:1. */
.team-card p.text-brand-secondary,
.team-single p.text-brand-secondary {
  color: var(--color-text) !important;
}

/* --- M Financial POM feed ------------------------------------------------
   The embed ships its own palette. These rules pull its neutral copy onto the
   site's, and deliberately keep out of the two places the embed colours text
   itself.

   Headings inherit --color-text. They render around 40px, so 4.49:1 on the
   embed's own #f6f6f4 band clears the 3:1 AA threshold for large text.

   Body copy is one step darker: --bb-grey-700 is Benson Blackburn Gray at the
   same hue and saturation with lower lightness. On the #f6f6f4 band the brand
   grey itself is 4.49:1 — under AA for normal text by a hair — where
   --bb-grey-700 is 6.42:1. Scoped to the embed, so brand grey is untouched
   everywhere else on the site. */
#pom1-feed-root {
  color: var(--color-text);
}

#pom1-feed-root p,
#pom1-feed-root li {
  color: var(--bb-grey-700);
}

/* Tier 3 is a photographic band; the embed sets `color:#fff` on the section
   for it. But `#pom1-feed-root p` is (1,0,1) and beats the embed's
   `.pom-section-3` at (0,1,0), so that paragraph was forced back to grey and
   left unreadable on the photo — while its sibling h2, which the blanket rule
   never targeted, stayed white. Hand the section back to the embed. */
#pom1-feed-root .pom-section-3,
#pom1-feed-root .pom-section-3 p,
#pom1-feed-root .pom-section-3 li {
  color: #ffffff;
}

/* The embed gives its tier 4 button `margin-top: 10px` but writes no equivalent
   rule for tier 3, so that button sits flush against the paragraph above it.
   Match tier 4. The `#pom1-feed-root` prefix is only there to outrank the
   embed's own stylesheet, which it injects at runtime after this file. */
#pom1-feed-root .pom-section-3 .__2025__pom-button {
  margin-top: 10px;
}

/* Same collision on the eyebrow, which the embed sets to its own #006090
   (6.31:1 on its band). The blanket rule was repainting it grey at 13.6px —
   4.49:1, under AA. Brand blue is not the answer here: #3D7CC9 is 3.94:1 on
   that band and would still fail. Left as M Financial's blue, inside M
   Financial's own embed. */
#pom1-feed-root .eyebrow {
  color: #006090;
}

/* Team archive: five members in a 3-up grid leaves two on the last row, and
   grid tracks always pack them left. Flex with a fixed basis keeps the same
   1 / 2 / 3-up rhythm and centres the short row. (The gap utilities —
   gap-10 / lg:gap-14 — carry over to flex, so the maths below matches them.) */
@media (min-width: 640px) {
  .team-grid .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .team-grid .grid > * { flex: 0 1 calc((100% - 2.5rem) / 2); }
}

@media (min-width: 1024px) {
  .team-grid .grid > * { flex: 0 1 calc((100% - 2 * 3.5rem) / 3); }
}

/* The feed's masthead logo is display:block with no side margins, so the
   wrapper's text-align:center cannot reach it and it sits left of centre. */
#pom1-feed-root .__2025__pom-wrap > img {
  margin-inline: auto;
}

/* The embed's first tier carries its own 120px top padding on top of
   .bb-page's, which stacked into a large empty gap under the banner. */
#pom1-feed-root .__2025__pom-tier.pom-section-1 {
  padding-top: 0;
}

/* Headshots vary in aspect ratio (Scott's is taller than 4:5), so a centred
   cover crop put his head near the top edge while the others sat lower.
   Anchoring to the top lines the head heights up across the grid. */
.team-card .headshot {
  background-position: center top;
}

/* --- Who We Serve intro: copy paired with an image ----------------------
   The lede alone left a constrained measure against a wide empty right side.
   Two columns that both carry weight. */
.bb-intro {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .bb-intro {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 4rem;
  }
}

/* Same body copy as the homepage Tier 1 intro (.bb-split__intro). */
.bb-intro .bb-lede {
  margin: 1.75rem 0 0;
  font-size: clamp(1.042rem, 1.033rem + 0.03687vw, 1.0625rem);
  line-height: 1.75;
}

.bb-intro__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
}

/* Tier headings ride alongside their own section while it scrolls past. */
@media (min-width: 900px) {
  .bb-tier__title {
    position: sticky;
    top: 8rem;
  }
}

/* ==========================================================================
   Motion — entrance (above the fold) and reveal (below it)

   Two guards keep this from ever stranding content:

     * The whole thing is inside `prefers-reduced-motion: no-preference` and
       scoped to `html.js-anim` — a class only ever added by an inline script.
       No JS, or a visitor who wants no motion, and none of it applies.
     * The hidden state is written as `:not(.is-in)` rather than as a separate
       reveal rule. A reveal rule has to out-specify every hide rule to win;
       the first version did not, so elements that HAD been given `.is-in`
       stayed invisible anyway (team bios among them). Written this way the
       hide rule simply stops matching the moment the class lands — there is
       no specificity contest to lose.

   `assets/js/client.js` queries the same list (BB_ANIM_TARGETS) and only ever
   adds `.is-in`. Keep the two in sync.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .js-anim .bb-hero__copy > *,
  .js-anim .page-hero__inner > *,
  .js-anim .bb-intro__copy > *,
  .js-anim .bb-intro__media,
  .js-anim .bb-split__measure > *,
  .js-anim .bb-split__media,
  .js-anim .bb-feature__bandinner > *,
  .js-anim .bb-feature__card,
  .js-anim .bb-proof > *,
  .js-anim .bb-tier > *,
  .js-anim .bb-panel > *,
  .js-anim .bb-index-wrap,
  .js-anim .bb-choice,
  .js-anim .bb-contact > *,
  .js-anim .bb-map,
  .js-anim .team-card,
  .js-anim .team-single > .max-w-7xl > .grid > * {
    transition:
      opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .js-anim .bb-hero__copy > *:not(.is-in),
  .js-anim .page-hero__inner > *:not(.is-in),
  .js-anim .bb-intro__copy > *:not(.is-in),
  .js-anim .bb-intro__media:not(.is-in),
  .js-anim .bb-split__measure > *:not(.is-in),
  .js-anim .bb-split__media:not(.is-in),
  .js-anim .bb-feature__bandinner > *:not(.is-in),
  .js-anim .bb-feature__card:not(.is-in),
  .js-anim .bb-proof > *:not(.is-in),
  .js-anim .bb-tier > *:not(.is-in),
  .js-anim .bb-panel > *:not(.is-in),
  .js-anim .bb-index-wrap:not(.is-in),
  .js-anim .bb-choice:not(.is-in),
  .js-anim .bb-contact > *:not(.is-in),
  .js-anim .bb-map:not(.is-in),
  .js-anim .team-card:not(.is-in),
  .js-anim .team-single > .max-w-7xl > .grid > *:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }

  /* Sticky elements never move. A transform on a sticky element makes it a
     containing block and breaks the pinning, so these fade only. */
  .js-anim .bb-index-wrap:not(.is-in),
  .js-anim .bb-tier > .bb-tier__title:not(.is-in) {
    transform: none;
  }

  /* Last-ditch: if the script never runs to completion, show everything. */
  .js-anim.bb-anim-failsafe .bb-hero__copy > *,
  .js-anim.bb-anim-failsafe .page-hero__inner > *,
  .js-anim.bb-anim-failsafe .bb-intro__copy > *,
  .js-anim.bb-anim-failsafe .bb-intro__media,
  .js-anim.bb-anim-failsafe .bb-split__measure > *,
  .js-anim.bb-anim-failsafe .bb-split__media,
  .js-anim.bb-anim-failsafe .bb-feature__bandinner > *,
  .js-anim.bb-anim-failsafe .bb-feature__card,
  .js-anim.bb-anim-failsafe .bb-proof > *,
  .js-anim.bb-anim-failsafe .bb-tier > *,
  .js-anim.bb-anim-failsafe .bb-panel > *,
  .js-anim.bb-anim-failsafe .bb-index-wrap,
  .js-anim.bb-anim-failsafe .bb-choice,
  .js-anim.bb-anim-failsafe .bb-contact > *,
  .js-anim.bb-anim-failsafe .bb-map,
  .js-anim.bb-anim-failsafe .team-card,
  .js-anim.bb-anim-failsafe .team-single > .max-w-7xl > .grid > * {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   Tailwind `slate` remap

   assets/css/tailwind.css is a FROZEN build (see its header) and still carries
   Tailwind's stock slate palette, which the shipped mfin1 PHP uses for every
   neutral: nav labels, mobile-menu rules, the CLIENT PORTAL button, the staff
   placeholder tile, 404 and archive body copy. Slate is blue-cast — slate-600
   is #475569, slate-900 is #0F172A — so beside Benson Blackburn Blue it reads
   as a second, wrong blue rather than as grey.

   Rebinding the utilities here rather than editing the markup keeps the class
   names the frozen build emits, covers any slate class authored into
   post_content, and survives a Tailwind regeneration (client.css loads last).
   Each utility keeps its --tw-*-opacity channel so `/60`-style alpha still
   works.
   ========================================================================== */

.text-slate-500 { color: rgb(139 142 141 / var(--tw-text-opacity, 1)); }
.text-slate-600 { color: rgb(var(--color-text-rgb) / var(--tw-text-opacity, 1)); }
.text-slate-700 { color: rgb(88 90 90 / var(--tw-text-opacity, 1)); }
.text-slate-900 { color: rgb(var(--color-primary-rgb) / var(--tw-text-opacity, 1)); }

.border-slate-100 { border-color: rgb(243 244 244 / var(--tw-border-opacity, 1)); }
.border-slate-200 { border-color: rgb(230 231 231 / var(--tw-border-opacity, 1)); }
.border-slate-900 { border-color: rgb(var(--color-primary-rgb) / var(--tw-border-opacity, 1)); }

.bg-slate-100 { background-color: rgb(243 244 244 / var(--tw-bg-opacity, 1)); }
.bg-slate-300 { background-color: rgb(214 215 214 / var(--tw-bg-opacity, 1)); }

.hover\:text-slate-900:hover { color: rgb(var(--color-primary-rgb) / var(--tw-text-opacity, 1)); }
.hover\:bg-slate-50:hover    { background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1)); }
.hover\:bg-slate-900:hover   { background-color: rgb(var(--color-primary-rgb) / var(--tw-bg-opacity, 1)); }

/* Tailwind's preflight sets the form-placeholder grey to #9CA3AF. */
input::-moz-placeholder,
textarea::-moz-placeholder { color: var(--bb-grey-400); }

input::placeholder,
textarea::placeholder { color: var(--bb-grey-400); }


/* ==========================================================================
   Footer disclosure

   M Financial member-firm compliance copy, full width below the footer
   columns. Authored with `bb-` classes rather than utilities because
   tailwind.css is a frozen build with nothing for this block.

   Legal small print, so it is set for reading rather than for hiding: 0.75rem
   at 1.7 line-height, and rgba(255,255,255,0.8) on the black footer is
   13.08:1 — the same treatment as the copyright line beside it. Runs the full
   width of the footer container by request, rather than on a capped measure.
   ========================================================================== */

.bb-disclosure {
  margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
  padding-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  border-top: 1px solid var(--bb-rule-dark);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  line-height: 1.7;
}

/* Disclosure copy is set in italic at the client's request.

   Every rule below that targets one of the two modifier rows carries a `p.`
   prefix. Without it `.bb-disclosure p` (0,1,1) outranks a bare
   `.bb-disclosure__links` (0,1,0) and silently swallows both its margin-top
   and its upright font-style — the margin looked right only because the
   preceding paragraph's margin-bottom happened to stand in for it. */
.bb-disclosure p {
  margin: 0 0 0.9rem;
  font-style: italic;
}

.bb-disclosure p:last-child {
  margin-bottom: 0;
}

.bb-disclosure a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 180ms ease;
}

.bb-disclosure a:hover,
.bb-disclosure a:focus-visible {
  color: var(--color-secondary);
}

/* Compliance tracking reference, on its own line below the paragraphs. */
.bb-disclosure p.bb-disclosure__ref {
  margin-top: 1.2rem;
}

/* Link row. Not disclosure copy, so it is set back upright. Wraps rather than
   overflowing on a phone, and the separators dim so the labels stay the thing
   you read. Each separator is a ::before on the label that follows it, which
   keeps the two in the same flex item — so a wrap can never strand a "|" at
   the end of a line. Drawing it in CSS also keeps it out of the accessibility
   tree, where it is just noise. */
.bb-disclosure p.bb-disclosure__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-top: 1.4rem;
  font-style: normal;
}

.bb-disclosure__links > span + span::before {
  content: "|";
  margin-right: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Four labels cannot sit on one line on a phone, and a wrapped row reads badly
   either way — a stranded "|" at the end of one line, or a leading one at the
   start of the next. Below 480px drop the separators and let a wider gap do
   the separating instead. */
@media (max-width: 480px) {
  .bb-disclosure p.bb-disclosure__links {
    gap: 0.4rem 1.35rem;
  }

  .bb-disclosure__links > span + span::before {
    content: none;
  }
}

/* ==========================================================================
   404 page (404.php). Interior-page hero, then a centred recovery block in
   the same type and rule treatment as the rest of the site.
   ========================================================================== */

.bb-404__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.bb-404 .bb-rule { margin-inline: auto; }

/* The message is the page's headline: serif, between body copy and the
   section H2 in size (28px desktop, ~23px phone). */
.bb-404__lede {
  margin: 0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(1.457rem, 1.336rem + 0.5174vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-primary);
  text-wrap: balance;
}

/* Desktop: one sentence per line. Each line is wider than the 44rem column,
   so the lines are centred flex items, which overflow the column evenly on
   both sides instead of running off to the right. */
@media (min-width: 1024px) {
  .bb-404__lede {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bb-404__lede span { white-space: nowrap; }
}

.bb-404__search {
  max-width: 32rem;
  margin: 2.5rem auto 0;
  text-align: left;
}

/* 16px so iOS does not zoom the page when the field is tapped. min-width: 0
   lets the field shrink on phones instead of pushing the button past the
   right margin. */
.search-form input[type="search"] { font-size: 1rem; min-width: 0; }

.bb-404__links ul {
  display: grid;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bb-rule);
  text-align: left;
}

@media (min-width: 640px) {
  .bb-404__links ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

.bb-404__links li { border-bottom: 1px solid var(--bb-rule); }

.bb-404__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0.25rem;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-size: clamp(1.162rem, 1.126rem + 0.1555vw, 1.25rem);
  color: var(--color-primary);
  text-decoration: none;
  transition: color 180ms ease;
}

.bb-404__links a i {
  font-size: 0.75rem;
  color: var(--color-secondary);
  transition: transform 180ms ease;
}

.bb-404__links a:hover,
.bb-404__links a:focus-visible { color: var(--color-secondary); }

.bb-404__links a:hover i,
.bb-404__links a:focus-visible i { transform: translateX(4px); }

.bb-404__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  padding: 1rem 2rem;
  border: 1px solid var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease;
}

.bb-404__home:hover,
.bb-404__home:focus-visible {
  background: var(--color-primary);
  color: #ffffff;
}