﻿/* Bailey Manor — design tokens from DESIGN.md (v3, "Forget-Me-Not"). Keep in sync with that file. */
:root {
  --color-primary: #22406B;
  --color-primary-dark: #172E4F;
  --color-accent: #7B97D0;
  --color-accent-text: #46629E;
  --color-tint: #E6ECF8;
  --color-tint-strong: #D7E0F3;
  --color-sand: #F4EEE4;
  --color-ink: #1D2E4A;
  --color-body: #454B57;
  --color-muted: #5E6573;
  --color-meta: #5E6573;
  --color-bg: #F5F7FB;
  --color-surface: #FFFFFF;
  --color-border: #DCE3F0;
  --color-rule: #C9D4E8;
  --color-divider: #E9EEF7;
  --color-error: #9B2C2C;
  --color-error-bg: #FBECEC;
  --color-footer-bg: #14233B;
  --color-footer-text: #C5D0E0;
  --color-footer-border: #2A3B55;
  --color-band-text: #DDE5F3;

  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", Helvetica, Arial, sans-serif;

  --radius-sm: 4px;
  --radius-pill: 999px;
  --radius-tile: 18px;
  --radius-card: 24px;
  --radius-panel: 32px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  --shadow-hover: 0 12px 28px rgba(23, 46, 79, .12);
  --shadow-float: 0 24px 50px rgba(23, 46, 79, .14);
  --section-py: var(--space-9);
}

@media (max-width: 991px) { :root { --section-py: var(--space-7); } }
@media (max-width: 575px) { :root { --section-py: 40px; } }

@font-face { font-family: "Source Serif 4"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/source-serif-4-500.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/source-sans-3-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/source-sans-3-700.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  overflow-x: hidden;
}
@media (max-width: 575px) { body { font-size: 1.0625rem; } } /* 17px */

h1, h2, h3 { font-family: var(--font-serif); color: var(--color-ink); margin: 0 0 var(--space-4); }
h1 { font-size: 3.25rem; font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: 2.5rem; font-weight: 500; line-height: 1.12; letter-spacing: -0.012em; }
h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
@media (max-width: 767px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}
@media (max-width: 575px) {
  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.75rem; }
}
p { margin: 0 0 var(--space-4); }
a { color: var(--color-primary); }
.bm-measure { max-width: 38em; }

/* Eyebrow: sentence case with a small periwinkle dot. The hero's location
   line (.bm-hero__badge) shares the look but is a different role — see
   DESIGN.md's Eyebrow Restraint Rule before adding more eyebrows. */
.bm-eyebrow, .bm-hero__badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-2);
}
.bm-eyebrow::before, .bm-hero__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.45em;
}

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-accent-text);
  outline-offset: 3px;
}
/* The periwinkle ring disappears on dark surfaces — switch to white there. */
.bm-utility :focus-visible, .bm-band :focus-visible, .bm-footer :focus-visible {
  outline-color: #fff;
}

.bm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 100;
}
.bm-skip-link:focus { left: var(--space-4); top: var(--space-4); }
/* The skip link sits over the navy utility bar with a navy fill. */
.bm-skip-link:focus-visible { outline-color: #fff; }

.bm-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 575px) { .bm-container { padding: 0 20px; } }
/* .row.g-5's 3rem gutter overflows the 20px phone gutter (and grows with text size, being rem-based). */
@media (max-width: 575px) { .bm-container .row.g-5 { --bs-gutter-x: 40px; } }

.bm-section { padding: var(--section-py) 0; }
.bm-section--sand { background: var(--color-sand); }
.bm-section--tint { background: var(--color-tint); }

/* Buttons — all pills. Navy is the only "act on this" fill (One Accent Rule). */
.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.bm-btn--primary { background: var(--color-primary); color: #fff; }
.bm-btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.bm-btn--secondary { background: var(--color-tint); color: var(--color-primary); }
.bm-btn--secondary:hover { background: var(--color-tint-strong); color: var(--color-primary-dark); }
.bm-btn--on-dark { background: #fff; color: var(--color-primary); }
.bm-btn--on-dark:hover { background: var(--color-tint); color: var(--color-primary-dark); }
.bm-btn--text {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--color-primary);
  font-weight: 600;
  padding: var(--space-3) 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bm-btn--text:hover { color: var(--color-primary-dark); }
.bm-btn--sm { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.bm-btn--block { display: flex; width: 100%; }
@media (prefers-reduced-motion: reduce) { .bm-btn { transition: none; } }

/* Chip: small non-interactive label, e.g. a program's rate. */
.bm-chip {
  display: inline-block;
  background: var(--color-tint);
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

/* Icon circle around a hand-authored inline SVG (always aria-hidden). */
.bm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bm-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bm-icon--sm { width: 40px; height: 40px; }
.bm-icon--sm svg { width: 20px; height: 20px; }

/* Utility bar — scrolls away; only the header below it is sticky. */
.bm-utility { background: var(--color-primary-dark); color: var(--color-band-text); font-size: 0.9375rem; }
.bm-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 44px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.bm-utility__note { margin: 0; }
.bm-utility a { color: #fff; }
@media (max-width: 767px) { .bm-utility { display: none; } }

/* Header */
.bm-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; }
:target { scroll-margin-top: 96px; }
.bm-header__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 84px; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.bm-header__logo { display: flex; flex-shrink: 0; }
.bm-header__logo img { display: block; height: 50px; width: auto; }
.bm-header__nav { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.bm-header__nav a, .bm-header__loc-btn {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) 0;
}
.bm-header__nav a:hover, .bm-header__loc-btn:hover { color: var(--color-primary); }
.bm-header__nav a[aria-current="page"] { color: var(--color-primary); text-decoration-line: underline; }
.bm-header__cta { flex-shrink: 0; }
.bm-header__mobile-actions { display: none; gap: var(--space-3); margin-left: auto; }
.bm-noscript-nav { display: none; }

/* 1180px, not 1100: with seven nav items the row wraps to two lines just
   above 1100px once the text-size control is set to A+ or A++. */
@media (max-width: 1180px) {
  .bm-header__nav, .bm-header__cta { display: none; }
  .bm-header__mobile-actions { display: flex; }
}

.bm-mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-surface);
  z-index: 30;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}
@media (max-width: 575px) { .bm-mobile-nav { padding: var(--space-5) 20px; } }
.bm-mobile-nav[hidden] { display: none; }
.bm-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.bm-mobile-nav .bm-text-size { margin-bottom: var(--space-5); }
.bm-mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.bm-mobile-nav__list li { border-bottom: 1px solid var(--color-divider); }
.bm-mobile-nav__list a { display: block; padding: var(--space-4) 0; font-size: 1.25rem; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.bm-mobile-nav__list a[aria-current="page"] { color: var(--color-primary); }
.bm-mobile-nav__cta { margin-top: var(--space-6); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Footer */
.bm-footer { background: var(--color-footer-bg); color: var(--color-footer-text); margin-top: 0; }
.bm-footer__top { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.bm-footer__brand { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: #fff; margin-bottom: var(--space-3); }
.bm-footer__tagline { color: var(--color-footer-text); max-width: 32em; }
.bm-footer__heading { font-weight: 600; color: #fff; margin-bottom: var(--space-3); }
.bm-footer__links { list-style: none; margin: 0; padding: 0; }
.bm-footer__links li { margin-bottom: var(--space-2); }
.bm-footer__links a { color: var(--color-footer-text); text-decoration: none; }
.bm-footer__links a:hover { color: #fff; text-decoration: underline; }
.bm-footer__bottom {
  border-top: 1px solid var(--color-footer-border);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.9375rem;
}
.bm-footer__bottom a { color: var(--color-footer-text); }
.bm-footer__bottom a:hover { color: #fff; }

/* Media frame — fixes images not filling their containers / grey gaps. */
.bm-media { display: block; overflow: hidden; border-radius: var(--radius-card); background: var(--color-bg); }
.bm-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Text-size control — segmented pill. Default styling is for the dark utility bar. */
.bm-text-size { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.bm-text-size__label { font-weight: 600; }
.bm-text-size__track { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); }
.bm-text-size button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.bm-text-size button:hover { background: rgba(255, 255, 255, .18); }
.bm-text-size button[aria-pressed="true"] { background: #fff; color: var(--color-primary-dark); }
/* Light variant inside the white mobile menu; full 44px touch targets. */
.bm-text-size--light { color: var(--color-ink); }
.bm-text-size--light .bm-text-size__track { background: var(--color-tint); }
.bm-text-size--light button { min-height: 44px; color: var(--color-primary); }
.bm-text-size--light button:hover { background: var(--color-tint-strong); }
.bm-text-size--light button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
@media (prefers-reduced-motion: reduce) { .bm-text-size button { transition: none; } }

/* Hero — rounded photo with the headline card overlapping its lower left.
   The card's float shadow is the one shadow allowed at rest (DESIGN.md). */
.bm-hero { padding-top: var(--space-5); }
/* The hero slides are 960x375 banners with their quote printed in the photo,
   so the frame keeps that ratio at every width — a crop would cut the words. */
.bm-media--hero { aspect-ratio: 960 / 375; border-radius: var(--radius-panel); }
.bm-media--hero img { object-position: center; }

/* Slideshow — slides stacked in one frame, cross-fading. */
.bm-slideshow { position: relative; }
.bm-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.bm-slideshow__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bm-slideshow__slide { transition: none; } }
.bm-hero__card {
  position: relative;
  width: min(680px, 64%);
  /* Shallow overlap: the slides carry their quote in the lower half of the
     photo, so a deeper card would cut the last line off every slide. */
  margin: -56px 0 0 40px;
  padding: 36px 40px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}
.bm-hero__card h1 { font-size: 2.75rem; }
.bm-hero__lead { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.55; color: var(--color-body); max-width: 34em; }
.bm-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
@media (max-width: 991px) { .bm-hero__card { width: min(680px, 88%); } }
@media (max-width: 767px) {
  .bm-media--hero { border-radius: var(--radius-card); }
  .bm-hero__card { width: auto; margin: -24px 12px 0; padding: 28px 24px; }
  .bm-hero__card h1 { font-size: 2.125rem; }
}

.bm-trust-band { padding: var(--space-8) 0 var(--space-2); }
.bm-trust-band__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.bm-trust-band__title { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--color-ink); margin-bottom: var(--space-1); }
.bm-trust-band__text { color: var(--color-muted); font-size: 1rem; line-height: 1.5; margin: 0; }

/* Section heading row with an action on the right; stacks on narrow screens. */
.bm-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-6); }
.bm-section-head h2 { max-width: 16em; margin: 0; }
@media (max-width: 991px) { .bm-section-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); } }

.bm-program-card { height: 100%; display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; }
.bm-media--card { aspect-ratio: 16 / 10; border-radius: 0; }
.bm-program-card__body { padding: var(--space-5) 26px 28px; }
.bm-program-card__name { margin: var(--space-3) 0 var(--space-2); }
.bm-program-card__copy { color: var(--color-muted); font-size: 1rem; margin: 0; }

/* Three-up card grid on desktop; one column below 992px so text never gets squeezed. */
.bm-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 991px) { .bm-card-grid { grid-template-columns: 1fr; } }
/* Tablet: program card goes horizontal (photo left) so a full-width photo isn't 400px tall. */
@media (min-width: 576px) and (max-width: 991px) {
  .bm-program-card { flex-direction: row; }
  .bm-program-card .bm-media--card { flex: 0 0 40%; aspect-ratio: auto; min-height: 100%; }
}

/* Memory-care band — the page's one solid-navy section. */
.bm-band { padding: var(--section-py) 0; background: var(--color-primary); color: var(--color-band-text); }
.bm-band h2 { color: #fff; }
.bm-media--band { aspect-ratio: 4 / 3; border-radius: var(--radius-panel); background: var(--color-primary-dark); }
@media (max-width: 991px) { .bm-media--band { max-width: 520px; } }
.bm-band__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.bm-band__list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.bm-band__list li::before {
  content: "";
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(123, 151, 208, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px;
}

/* Testimonial pull-quote. */
.bm-testimonial__quote {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}
.bm-testimonial__cite { color: var(--color-accent-text); font-weight: 600; margin: 0; }

.bm-breadcrumb { padding: var(--space-4) 0 0; }
.bm-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; font-size: 0.9375rem; color: var(--color-meta); }
.bm-breadcrumb li:not([aria-current]):after { content: "/"; margin-left: var(--space-2); color: var(--color-meta); }
.bm-breadcrumb a { color: var(--color-meta); text-decoration: underline; }
.bm-breadcrumb li[aria-current] { color: var(--color-ink); }

.bm-location-intro { padding-top: var(--space-5); }
.bm-location-hero { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-7); align-items: start; }
@media (max-width: 991px) { .bm-location-hero { grid-template-columns: 1fr; } }

/* Mosaic: large photo left, two stacked right; outer corners rounder than inner. */
.bm-location-photos { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 170px 170px; gap: var(--space-3); margin-top: var(--space-6); }
.bm-location-photos__item { height: 100%; border-radius: 12px; }
.bm-location-photos__item--feature { grid-row: span 2; border-radius: var(--radius-card) 12px 12px var(--radius-card); }
.bm-location-photos__item--top { border-radius: 12px var(--radius-card) 12px 12px; }
.bm-location-photos__item--bottom { border-radius: 12px 12px var(--radius-card) 12px; }
.bm-location-photos__caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: 0.9375rem; color: var(--color-muted); }
@media (max-width: 575px) {
  .bm-location-photos { grid-template-columns: 1fr; grid-template-rows: none; }
  .bm-location-photos__item, .bm-location-photos__item--feature, .bm-location-photos__item--top, .bm-location-photos__item--bottom { height: 200px; grid-row: auto; border-radius: var(--radius-card); }
}

.bm-location-sidebar { background: var(--color-surface); border-radius: var(--radius-card); padding: 30px; display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 992px) { .bm-location-sidebar { position: sticky; top: 104px; } }
.bm-location-sidebar__row { display: flex; gap: var(--space-4); align-items: flex-start; }
.bm-location-sidebar__label { font-size: 0.9375rem; font-weight: 600; color: var(--color-meta); margin-bottom: var(--space-1); }
.bm-location-sidebar__value { color: var(--color-ink); }
.bm-landmark { color: var(--color-muted); font-size: 0.9375rem; margin-top: var(--space-1); }
.bm-location-sidebar__phone { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--color-primary); text-decoration: none; }
.bm-location-sidebar__phone:hover { text-decoration: underline; }
.bm-location-sidebar__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.bm-location-sidebar__note { color: var(--color-meta); font-size: 0.9375rem; margin: 0; }

.bm-program-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.bm-program-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); background: var(--color-surface); border-radius: var(--radius-tile); padding: 18px 22px; }
.bm-program-row__name { margin: 0; font-size: 1.3125rem; }

.bm-amenities { background: var(--color-surface); border-radius: var(--radius-card); padding: 28px 30px; }
.bm-amenities__title { font-size: 1.875rem; }
/* Checkmark list: inside the amenities panel on location/life, and on its
   own (--standalone) in Memory Care's "what we provide". One definition —
   this list used to exist twice under two class names. */
.bm-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.bm-checklist--standalone { margin-top: var(--space-5); max-width: 52em; }
.bm-checklist li { display: flex; gap: var(--space-3); font-size: 1rem; line-height: 1.45; }
.bm-checklist li::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%2322406B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px;
}
.bm-amenities__note { margin: var(--space-4) 0 0; font-size: 0.9375rem; color: var(--color-muted); }
@media (max-width: 575px) {
  .bm-amenities { padding: var(--space-5); }
  .bm-checklist { grid-template-columns: 1fr; }
}

.bm-directions { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-top: var(--space-5); }
.bm-map { border-radius: var(--radius-card); overflow: hidden; min-height: 320px; background: var(--color-tint); }
.bm-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.bm-directions__card { background: var(--color-surface); border-radius: var(--radius-card); padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-3); }
.bm-directions__card h3, .bm-directions__card p { margin: 0; }
@media (max-width: 991px) { .bm-directions { grid-template-columns: 1fr; } }

.bm-other-communities__title { font-size: 1.75rem; }
.bm-other-communities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
/* Two columns below 992px: four-up is too narrow for the serif town names at larger text sizes. */
@media (max-width: 991px) { .bm-other-communities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .bm-other-communities { grid-template-columns: 1fr; } }
.bm-community-card { display: block; background: var(--color-surface); border-radius: var(--radius-tile); padding: 18px 20px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.bm-community-card:hover, .bm-community-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.bm-community-card__name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.1875rem; color: var(--color-ink); overflow-wrap: break-word; }
.bm-community-card__phone { display: block; font-weight: 600; color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .bm-community-card { transition: none; }
  .bm-community-card:hover, .bm-community-card:focus-visible { transform: none; }
}

/* Fills a position:relative parent edge to edge (life cards, CTA photo). */
.bm-media--fill { position: absolute; inset: 0; border-radius: 0; }

/* Locations: intro + map on the left, list on the right; list before map on narrow screens. */
.bm-locations {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas: "intro list" "map list";
  column-gap: var(--space-7);
  row-gap: var(--space-5);
  align-items: start;
}
.bm-locations__intro { grid-area: intro; }
.bm-locations__map { grid-area: map; background: var(--color-surface); border-radius: var(--radius-card); padding: var(--space-5); }
.bm-locations__map svg { display: block; width: 100%; height: auto; }
.bm-locations__list { grid-area: list; align-self: center; display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 991px) {
  .bm-locations { grid-template-columns: 1fr; grid-template-areas: "intro" "list" "map"; }
}
/* On phones the map's labels would drop below the 15px floor; the list carries the information. */
@media (max-width: 575px) { .bm-locations__map { display: none; } }
.bm-map-state { fill: var(--color-tint); stroke: var(--color-rule); stroke-width: 1.5; }
.bm-map-road { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.bm-map-road-label { font-family: var(--font-sans); font-size: 15px; fill: var(--color-muted); }
.bm-map-ref { fill: #fff; stroke: var(--color-muted); stroke-width: 3; }
.bm-map-ref-label { font-family: var(--font-sans); font-size: 17px; fill: var(--color-muted); }
.bm-map-pin { fill: var(--color-primary); stroke: #fff; stroke-width: 3; }
.bm-map-label { font-family: var(--font-sans); font-size: 17px; font-weight: 600; fill: var(--color-ink); }

.bm-location-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-tile);
  padding: var(--space-4) 22px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bm-location-row:hover, .bm-location-row:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.bm-location-row__name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; color: var(--color-ink); }
.bm-location-row__region { display: block; font-size: 0.9375rem; color: var(--color-muted); }
.bm-location-row__phone { font-weight: 600; font-size: 1.0625rem; color: var(--color-primary); white-space: nowrap; }
@media (max-width: 575px) { .bm-location-row { grid-template-columns: 1fr; gap: var(--space-1); } }

/* Life cards — photo fills the card; a navy gradient keeps white text readable. */
.bm-life-card { position: relative; display: block; height: 340px; border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: #fff; transition: box-shadow .2s ease; }
.bm-life-card .bm-media--fill img { transition: transform .3s ease; }
.bm-life-card__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 64px 24px 22px;
  /* Scrim lives on the text block, so it grows with the title at larger text sizes. */
  background: linear-gradient(180deg, rgba(20, 35, 59, 0) 0, rgba(20, 35, 59, .8) 56px, rgba(20, 35, 59, .9) 100%);
}
.bm-life-card__title { color: #fff; font-size: 1.375rem; margin: 0 0 var(--space-2); }
.bm-life-card__label { font-weight: 600; font-size: 0.9375rem; color: var(--color-tint); text-decoration: underline; text-underline-offset: 3px; }
.bm-life-card:hover, .bm-life-card:focus-visible { box-shadow: var(--shadow-hover); }
.bm-life-card:hover .bm-media--fill img { transform: scale(1.03); }
@media (max-width: 991px) { .bm-life-card { height: 300px; } }

/* Testimonial — arched portrait beside an upright serif quote. */
.bm-testimonial-feature { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.bm-media--arch { height: 440px; border-radius: 200px 200px var(--radius-card) var(--radius-card); }
.bm-testimonial--feature { margin: 0; }
.bm-testimonial__mark { display: block; height: 3.25rem; font-family: var(--font-serif); font-size: 7.5rem; line-height: 0.9; color: var(--color-accent); }
.bm-testimonial--feature .bm-testimonial__quote { font-size: 1.625rem; font-style: normal; line-height: 1.45; }
.bm-testimonial__more { margin: var(--space-5) 0 0; }
@media (max-width: 991px) {
  .bm-testimonial-feature { grid-template-columns: 1fr; gap: var(--space-6); }
  .bm-media--arch { height: 320px; }
}
@media (max-width: 575px) { .bm-testimonial--feature .bm-testimonial__quote { font-size: 1.375rem; } }

/* FAQ — native <details> as white cards on a tinted section. */
.bm-accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.bm-accordion__item { background: var(--color-surface); border-radius: var(--radius-tile); }
.bm-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 20px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-tile);
}
.bm-accordion__summary::-webkit-details-marker { display: none; }
.bm-accordion__summary:hover { color: var(--color-primary); }
.bm-accordion__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  transition: transform .15s ease;
}
.bm-accordion__item[open] .bm-accordion__icon { transform: rotate(45deg); }
.bm-accordion__panel { padding: 0 24px 22px; color: var(--color-body); max-width: 40em; }
.bm-accordion__panel ul { padding-left: 1.2em; margin: 0 0 var(--space-3); }
.bm-accordion--compact .bm-accordion__summary { font-size: 1rem; padding: var(--space-3) var(--space-4); }

/* Closing CTA panel. */
.bm-cta-panel { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--color-surface); border-radius: var(--radius-panel); overflow: hidden; }
.bm-cta-panel__text { padding: 52px; }
.bm-cta-panel__text p { max-width: 34em; }
.bm-cta-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.bm-cta-panel__photo { position: relative; min-height: 320px; }
@media (max-width: 991px) {
  .bm-cta-panel { grid-template-columns: 1fr; }
  .bm-cta-panel__photo { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .bm-cta-panel__text { padding: var(--space-6) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-location-row, .bm-life-card, .bm-life-card .bm-media--fill img, .bm-accordion__icon { transition: none; }
  .bm-location-row:hover, .bm-location-row:focus-visible { transform: none; }
  .bm-life-card:hover .bm-media--fill img { transform: none; }
}

/* ========================= Interior pages (shared) ========================= */

/* Page hero: text left, rounded photo right; stacks below 992px. The next
   section supplies the space below, so the hero has no bottom padding. */
.bm-page-hero { padding: var(--space-6) 0 0; }
.bm-page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.bm-page-hero--text .bm-page-hero__inner { grid-template-columns: minmax(0, 1fr); }
.bm-page-hero--text .bm-page-hero__text { max-width: 44rem; }
.bm-page-hero__text .bm-hero__lead { margin-bottom: 0; }
.bm-page-hero__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: var(--space-5) 0 0; padding: 0; font-weight: 600; }
.bm-media--page-hero { aspect-ratio: 3 / 2; border-radius: var(--radius-panel); }
@media (max-width: 991px) {
  .bm-page-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .bm-media--page-hero { border-radius: var(--radius-card); max-width: 640px; }
}

/* Long-form reading column (privacy, accessibility, narrative sections). */
.bm-prose { max-width: 40em; }
.bm-prose h2 { margin-top: var(--space-7); }
.bm-prose h3 { margin-top: var(--space-6); }
.bm-prose > :first-child { margin-top: 0; }
.bm-prose ul, .bm-prose ol { padding-left: 1.3em; margin: 0 0 var(--space-4); }
.bm-prose li + li { margin-top: var(--space-2); }

/* Photo beside text; photo first when stacked. */
.bm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.bm-split__photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; }
.bm-split--reverse .bm-split__photo { order: 2; }
.bm-split__text > :last-child { margin-bottom: 0; }
@media (max-width: 991px) {
  .bm-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .bm-split--reverse .bm-split__photo { order: 0; }
  .bm-split__photo { max-width: 640px; }
}

/* White fact card for 2–4 short points, laid out with .bm-card-grid. */
.bm-feature-card { background: var(--color-surface); border-radius: var(--radius-card); padding: 28px 30px; }
.bm-feature-card .bm-icon { margin-bottom: var(--space-4); }
.bm-feature-card__title { margin-bottom: var(--space-3); }
.bm-feature-card p:last-child { margin-bottom: 0; }
@media (max-width: 575px) { .bm-feature-card { padding: var(--space-5); } }

/* ===== Batch A: memory-care, care-programs, about ===== */

/* About page's three-up testimonial grid, below the feature testimonial. */
.bm-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.bm-testimonial-grid__item { background: var(--color-surface); border-radius: var(--radius-card); padding: 28px 30px; }
.bm-testimonial-grid .bm-testimonial__quote { font-size: 1.25rem; }
@media (max-width: 991px) { .bm-testimonial-grid { grid-template-columns: 1fr; } }

/* ===== end Batch A ===== */




/* ===== Batch B: life, faqs, locations ===== */

/* Life: sample weekly menu, seven day cards. Mobile-first: 1 col below
   576px, 2 cols ≥576px, 3 cols ≥992px, 4 cols ≥1200px. */
.bm-menu-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.bm-menu-day { background: var(--color-surface); border-radius: var(--radius-tile); padding: var(--space-5); }
.bm-menu-day__name { font-family: var(--font-serif); font-size: 1.375rem; color: var(--color-ink); margin: 0 0 var(--space-2); }
.bm-menu-day__meal { font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; color: var(--color-accent-text); margin: var(--space-3) 0 var(--space-1); }
.bm-menu-day__items { list-style: none; margin: 0; padding: 0; }
.bm-menu-day__items li { font-size: 1rem; line-height: 1.45; }
@media (min-width: 576px) { .bm-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .bm-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bm-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* FAQs: narrower reading column than .bm-prose, sized for the accordion. */
.bm-faq-column { max-width: 48rem; }
.bm-faq-column .bm-accordion { margin-bottom: var(--space-5); }

/* Locations: address/phone/director card grid below the map. */
.bm-location-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.bm-location-card { background: var(--color-surface); border-radius: var(--radius-card); padding: 28px 30px; display: flex; flex-direction: column; }
.bm-location-card__name { margin-bottom: var(--space-2); }
.bm-location-card__address { color: var(--color-body); margin: 0 0 var(--space-1); }
.bm-location-card__phone { margin: var(--space-2) 0; }
.bm-location-card__phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.bm-location-card__phone a:hover { text-decoration: underline; }
.bm-location-card__director { color: var(--color-muted); font-size: 0.9375rem; margin: 0 0 var(--space-4); }
.bm-location-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: auto; }
@media (max-width: 991px) { .bm-location-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .bm-location-cards { grid-template-columns: 1fr; } }

/* ===== end Batch B ===== */




/* ===== Batch C: gallery, careers ===== */

/* Gallery grid: uniform 3:2 tiles; the dialog shows the uncropped photo. */
.bm-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 991px) { .bm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .bm-gallery { grid-template-columns: minmax(0, 1fr); } }
.bm-gallery__link { display: block; border-radius: var(--radius-tile); }
.bm-gallery__media { aspect-ratio: 3 / 2; border-radius: var(--radius-tile); }
.bm-gallery__link:hover .bm-gallery__media { box-shadow: var(--shadow-hover); }

.bm-gallery-dialog { padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-surface); width: min(92vw, 900px); max-height: 94vh; }
.bm-gallery-dialog::backdrop { background: rgba(20, 35, 59, .82); }
.bm-gallery-dialog__inner { padding: var(--space-4) var(--space-5) var(--space-5); }
.bm-gallery-dialog__bar, .bm-gallery-dialog__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.bm-gallery-dialog__count { margin: 0; font-size: 0.9375rem; color: var(--color-muted); }
.bm-gallery-dialog__figure { margin: var(--space-4) 0; }
.bm-gallery-dialog__figure img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; border-radius: var(--radius-tile); background: var(--color-bg); }
.bm-gallery-dialog__caption { margin-top: var(--space-3); font-size: 1rem; color: var(--color-body); }

/* Careers "apply near you" grid: same breakpoints as .bm-other-communities,
   but 5 items instead of 4, so the column count differs. Cards are plain
   divs (not links) with a real tel: link for the phone number. */
.bm-careers-communities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 991px) { .bm-careers-communities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .bm-careers-communities { grid-template-columns: 1fr; } }
.bm-careers-communities .bm-community-card { transition: none; }
.bm-careers-communities .bm-community-card:hover { transform: none; box-shadow: none; }
.bm-careers-communities .bm-community-card__value { display: block; color: var(--color-body); font-size: 0.9375rem; margin: 2px 0 var(--space-2); }
.bm-careers-communities .bm-community-card__phone { text-decoration: none; }
.bm-careers-communities .bm-community-card__phone:hover { text-decoration: underline; }

/* ===== end Batch C ===== */




/* ===== Batch D: request-information, privacy, accessibility ===== */

/* Request information: form left, "prefer to call" card right; stacks below 992px. */
.bm-request { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
@media (max-width: 991px) { .bm-request { grid-template-columns: minmax(0, 1fr); } }
.bm-request__form { background: var(--color-surface); border-radius: var(--radius-card); padding: var(--space-6); }
.bm-request__call { background: var(--color-tint); border-radius: var(--radius-card); padding: var(--space-6); }
.bm-request__call-title { font-size: 1.625rem; }
.bm-request__phones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bm-request__phones li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.bm-request__phone-name { font-weight: 600; color: var(--color-ink); }
.bm-request__phone { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 575px) { .bm-request__form, .bm-request__call { padding: var(--space-5); } }

.bm-form { display: grid; gap: var(--space-5); }
.bm-form__field { display: grid; gap: var(--space-2); margin: 0; }
.bm-form label, .bm-form legend { font-weight: 600; color: var(--color-ink); }
/* Bootstrap reboot's legend rule (float:left, ~1.5rem font-size) oversizes this; reset it. */
.bm-form legend { float: none; font-size: inherit; line-height: inherit; }
.bm-form__req { font-weight: 400; color: var(--color-muted); }
.bm-form input[type="text"], .bm-form input[type="tel"], .bm-form input[type="email"], .bm-form select, .bm-form textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  font: inherit; font-size: 1.0625rem; color: var(--color-ink);
  /* --color-muted, not --color-rule: input borders need 3:1 contrast (WCAG 1.4.11). */
  background: var(--color-surface); border: 1px solid var(--color-muted); border-radius: var(--radius-tile);
}
.bm-form textarea { min-height: 140px; resize: vertical; }
.bm-form input:focus-visible, .bm-form select:focus-visible, .bm-form textarea:focus-visible { outline: 3px solid var(--color-accent-text); outline-offset: 2px; border-color: var(--color-primary); }
.bm-form__choices { border: 0; padding: 0; }
.bm-form__choices legend { padding: 0; }
.bm-form__choices label { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-weight: 400; color: var(--color-body); }
.bm-form__choices input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.bm-form .bm-btn { justify-self: start; }

/* Off-screen rather than display:none — a bot reading the markup still finds
   it, while nobody sighted or using a screen reader ever meets it. */
.bm-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bm-form__error { margin: 0; color: var(--color-error); font-weight: 600; }
/* Matches the specificity of the base field rule above, which names each input
   type — a bare [aria-invalid] selector loses to it. */
.bm-form input[aria-invalid="true"], .bm-form select[aria-invalid="true"], .bm-form textarea[aria-invalid="true"] { border-color: var(--color-error); }

.bm-form-notice { background: var(--color-tint); border-left: 4px solid var(--color-primary); border-radius: var(--radius-tile); padding: var(--space-5); margin-bottom: var(--space-6); }
.bm-form-notice--error { background: var(--color-error-bg); border-left-color: var(--color-error); }
.bm-form-notice__title { font-size: 1.375rem; }
.bm-form-notice__phones { margin: 0; padding-left: 1.2em; }

/* ===== end Batch D ===== */

/* ===== Batch E: careers-apply ===== */
.bm-form-wrap { background: var(--color-surface); border-radius: var(--radius-card); padding: var(--space-7); max-width: 820px; margin: 0 auto; }

/* The six steps are one long form until site.js splits them up, so every rule
   below has to read correctly both ways. */
.bm-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.bm-form legend.bm-step__legend { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; line-height: 1.15; color: var(--color-primary); padding: 0; margin: 0 0 var(--space-4); }
.bm-form legend.bm-step__legend:focus-visible { outline: 3px solid var(--color-accent-text); outline-offset: 4px; }
/* Grid, not a bare margin: a fieldset's children are its own flow, and the
   form's gap stops at the fieldset boundary. */
.bm-form--steps .bm-step { display: grid; gap: var(--space-5); }
/* display:grid outranks the UA sheet's [hidden] rule, which would leave every
   step visible once the stepper starts hiding them. */
.bm-form [hidden] { display: none; }
.bm-step__legend, .bm-step__sub { grid-column: 1 / -1; }
.bm-step__sub { font-size: 1.25rem; margin: var(--space-3) 0 0; }
/* Separates the fieldsets when JavaScript is off and all six are stacked. */
.bm-form--steps .bm-step + .bm-step { border-top: 1px solid var(--color-divider); padding-top: var(--space-7); }

.bm-form__help { font-size: 1rem; line-height: 1.5; color: var(--color-muted); margin: 0; }
.bm-form__certify { background: var(--color-tint); border-radius: var(--radius-tile); padding: var(--space-5); }
.bm-form__certify p { margin: 0; }
.bm-form__submit { display: grid; gap: var(--space-3); justify-items: start; }

.bm-step-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
/* Back is hidden on step 1; without this the lone Next jumps to the left. */
.bm-step-nav [data-bm-step-back][hidden] + [data-bm-step-next] { margin-left: auto; }
.bm-step-progress { font-size: 0.9375rem; font-weight: 600; letter-spacing: .02em; color: var(--color-meta); margin: 0; }

/* City/state/ZIP and the from/to/pay dates read badly as a column of
   full-width fields on a desktop. auto-fit keeps them stacked on a phone
   without a second set of breakpoint rules. */
.bm-field-row { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* A file input is sized by its own button chrome and overflows a 360px
   viewport unless it is allowed to shrink. */
.bm-form input[type="file"] { width: 100%; max-width: 100%; font: inherit; font-size: 1rem; }
.bm-form input[type="date"], .bm-form input[type="month"] {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  font: inherit; font-size: 1.0625rem; color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-muted); border-radius: var(--radius-tile);
}
.bm-form input[type="date"][aria-invalid="true"], .bm-form input[type="month"][aria-invalid="true"] { border-color: var(--color-error); }

@media (max-width: 767px) {
  .bm-form-wrap { padding: var(--space-5); }
  .bm-form legend.bm-step__legend { font-size: 1.5rem; }
}
/* ===== end Batch E ===== */
