@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --blm-ink: #0d1f26;
  --blm-ink-2: #274552;
  --blm-body: #3b5a66;
  --blm-paper: #ffffff;
  --blm-paper-2: #f1f7f7;
  --blm-paper-3: #e3eef0;
  --blm-line: #d2e1e4;
  --blm-aqua: #0e7f81;
  --blm-aqua-600: #0a6364;
  --blm-aqua-100: #d5efef;
  --blm-sun: #c9761f;
  --blm-sun-100: #fbead6;
  --blm-deep: #07242b;
  --blm-deep-2: #0c323b;
  --blm-dark-text: #eaf4f5;
  --blm-dark-soft: #a9c5cb;
  --blm-radius: 20px;
  --blm-radius-sm: 12px;
  --blm-shadow: 0 18px 50px -22px rgba(7, 36, 43, 0.38);
  --blm-shadow-lg: 0 34px 70px -28px rgba(7, 36, 43, 0.48);
  --blm-font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --blm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --blm-shell: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--blm-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--blm-body);
  background: var(--blm-paper);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--blm-font-display);
  color: var(--blm-ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1rem; }

a {
  color: var(--blm-aqua-600);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover { color: var(--blm-aqua); }

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

ul.blm-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

ul.blm-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.6rem;
}

ul.blm-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--blm-aqua);
  font-size: 0.85rem;
}

/* ---------- Shell & sections ---------- */

.blm-shell {
  width: 100%;
  max-width: var(--blm-shell);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.blm-section {
  position: relative;
  padding: 5rem 0;
}

.blm-section--tight { padding: 3.25rem 0; }
.blm-section--paper { background: var(--blm-paper); }
.blm-section--soft { background: var(--blm-paper-2); }
.blm-section--tint { background: linear-gradient(180deg, var(--blm-paper-2), var(--blm-aqua-100)); }

.blm-section--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--blm-dark-text);
}

.blm-section--photo h1,
.blm-section--photo h2,
.blm-section--photo h3,
.blm-section--photo h4 {
  color: #ffffff;
}

.blm-section--photo p,
.blm-section--photo .blm-lead {
  color: var(--blm-dark-text);
}

.blm-section--dark {
  background: var(--blm-deep);
  color: var(--blm-dark-text);
}

.blm-section--dark h1,
.blm-section--dark h2,
.blm-section--dark h3,
.blm-section--dark h4 { color: #ffffff; }

.blm-section--dark p { color: var(--blm-dark-soft); }

.blm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--blm-font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blm-aqua-600);
  background: var(--blm-aqua-100);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  margin-bottom: 1.1rem;
}

.blm-section--photo .blm-eyebrow,
.blm-section--dark .blm-eyebrow {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.blm-lead {
  font-size: 1.08rem;
  color: var(--blm-ink-2);
  max-width: 62ch;
}

.blm-head {
  max-width: 62ch;
  margin-bottom: 2.6rem;
}

.blm-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.blm-rule {
  width: 68px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blm-aqua), var(--blm-sun));
  margin: 0 0 1.4rem;
}

.blm-head--center .blm-rule { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */

.blm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--blm-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.blm-btn:hover { transform: translateY(-2px); }

.blm-btn--solid {
  background: var(--blm-aqua);
  color: #ffffff;
  box-shadow: 0 14px 30px -16px rgba(14, 127, 129, 0.9);
}

.blm-btn--solid:hover {
  background: var(--blm-aqua-600);
  color: #ffffff;
}

.blm-btn--sun {
  background: var(--blm-sun);
  color: #ffffff;
  box-shadow: 0 14px 30px -16px rgba(201, 118, 31, 0.9);
}

.blm-btn--sun:hover { background: #a95f13; color: #ffffff; }

.blm-btn--outline {
  background: transparent;
  border-color: var(--blm-aqua);
  color: var(--blm-aqua-600);
}

.blm-btn--outline:hover {
  background: var(--blm-aqua);
  color: #ffffff;
}

.blm-btn--light {
  background: #ffffff;
  color: var(--blm-deep);
}

.blm-btn--light:hover { background: var(--blm-aqua-100); color: var(--blm-deep); }

.blm-btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.blm-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.blm-btn--block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */

.blm-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--blm-line);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}

.blm-header.is-stuck {
  box-shadow: 0 14px 34px -22px rgba(7, 36, 43, 0.5);
}

.blm-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
}

.blm-header.is-stuck .blm-header__bar { padding: 0.55rem 0; }

.blm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--blm-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--blm-ink);
  letter-spacing: -0.02em;
}

.blm-brand:hover { color: var(--blm-aqua-600); }

.blm-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blm-aqua), var(--blm-deep));
  color: #ffffff;
  font-size: 1.05rem;
}

.blm-header__meta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 0.88rem;
  color: var(--blm-ink-2);
}

.blm-header__meta a { color: var(--blm-ink-2); font-weight: 500; }
.blm-header__meta a:hover { color: var(--blm-aqua-600); }

.blm-header__meta i { color: var(--blm-aqua); margin-right: 0.4rem; }

.blm-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.blm-nav__link {
  font-family: var(--blm-font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--blm-ink);
  padding: 0.35rem 0;
  position: relative;
}

.blm-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--blm-aqua);
  transition: width 0.28s ease;
}

.blm-nav__link:hover::after,
.blm-nav__link.is-active::after { width: 100%; }

.blm-nav__link.is-active { color: var(--blm-aqua-600); }

.blm-burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--blm-line);
  background: #ffffff;
  color: var(--blm-ink);
  font-size: 1.1rem;
  cursor: pointer;
}

.blm-nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 86vw);
  background: #ffffff;
  padding: 5rem 1.6rem 2rem;
  transform: translateX(105%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1045;
  box-shadow: var(--blm-shadow-lg);
  overflow-y: auto;
}

.blm-nav-panel.is-open { transform: translateX(0); }

.blm-nav-panel__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--blm-line);
  background: #ffffff;
  color: var(--blm-ink);
  cursor: pointer;
}

.blm-nav-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blm-nav-panel__list li { border-bottom: 1px solid var(--blm-line); }

.blm-nav-panel__list a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--blm-font-display);
  font-weight: 600;
  color: var(--blm-ink);
}

.blm-nav-panel__list a:hover,
.blm-nav-panel__list a.is-active {
  color: var(--blm-aqua-600);
}

.blm-nav-panel__contact {
  margin-top: 1.8rem;
  font-size: 0.9rem;
  color: var(--blm-body);
}

.blm-nav-panel__contact p { margin-bottom: 0.5rem; }

.blm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 36, 43, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1040;
}

.blm-scrim.is-visible { opacity: 1; visibility: visible; }

/* ---------- Hero slider ---------- */

.blm-hero { position: relative; }

.blm-hero .carousel-item {
  min-height: clamp(560px, 82vh, 780px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.blm-hero__content {
  max-width: 660px;
  color: #ffffff;
}

.blm-hero__content h1 {
  color: #ffffff;
  margin-bottom: 1.1rem;
}

.blm-hero__content p {
  color: var(--blm-dark-text);
  font-size: 1.08rem;
  max-width: 54ch;
}

.blm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.7rem;
}

.blm-hero .carousel-indicators {
  bottom: 2rem;
  margin-bottom: 0;
}

.blm-hero .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  opacity: 1;
}

.blm-hero .carousel-indicators .active { background: var(--blm-sun); }

.blm-hero__nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(7, 36, 43, 0.35);
  color: #ffffff;
  z-index: 12;
  cursor: pointer;
}

.blm-hero__nav--prev { left: 1.4rem; }
.blm-hero__nav--next { right: 1.4rem; }

.blm-hero__nav:hover { background: var(--blm-aqua); border-color: var(--blm-aqua); }

.blm-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--blm-font-display);
  font-weight: 600;
  margin-bottom: 1.2rem;
  color: #ffffff;
}

/* ---------- Cards & grids ---------- */

.blm-grid {
  display: grid;
  gap: 1.6rem;
}

.blm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.blm-card {
  background: #ffffff;
  border: 1px solid var(--blm-line);
  border-radius: var(--blm-radius);
  padding: 1.9rem;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Pricing labels reuse the image badge, which is absolutely positioned.
   Inside a text card they must sit in normal flow, otherwise they pin to the
   section and sit on top of the heading. */
.blm-card > .blm-service__badge {
  position: static;
  display: inline-block;
  margin: 0 0 0.9rem;
}

.blm-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--blm-shadow);
  border-color: var(--blm-aqua-100);
}

.blm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--blm-aqua-100);
  color: var(--blm-aqua-600);
  font-size: 1.25rem;
  margin-bottom: 1.1rem;
}

.blm-card h3 { margin-bottom: 0.5rem; font-size: 1.18rem; }

.blm-card p:last-child { margin-bottom: 0; }

.blm-service {
  position: relative;
  border-radius: var(--blm-radius);
  overflow: hidden;
  background: var(--blm-paper-2);
  border: 1px solid var(--blm-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blm-service:hover { transform: translateY(-6px); box-shadow: var(--blm-shadow); }

.blm-service__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--blm-paper-3);
  overflow: hidden;
}

.blm-service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blm-service:hover .blm-service__media img { transform: scale(1.05); }

.blm-service__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(7, 36, 43, 0.78);
  color: #ffffff;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--blm-font-display);
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}

.blm-service__body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blm-service__body p { flex: 1; }

.blm-service__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--blm-line);
  font-family: var(--blm-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--blm-aqua-600);
}

/* ---------- Steps ---------- */

.blm-steps {
  counter-reset: blm-step;
  display: grid;
  gap: 1.4rem;
}

.blm-step {
  position: relative;
  padding: 1.9rem 1.7rem 1.7rem 5rem;
  background: #ffffff;
  border: 1px solid var(--blm-line);
  border-radius: var(--blm-radius);
}

.blm-step::before {
  counter-increment: blm-step;
  content: counter(blm-step, decimal-leading-zero);
  position: absolute;
  left: 1.5rem;
  top: 1.75rem;
  font-family: var(--blm-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blm-aqua);
  line-height: 1;
}

.blm-step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.blm-step p:last-child { margin-bottom: 0; }

/* ---------- Stats ---------- */

.blm-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.blm-stat {
  text-align: center;
  padding: 1.8rem 1rem;
  border-radius: var(--blm-radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.blm-stat__value {
  font-family: var(--blm-font-display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 0.45rem;
}

.blm-stat__label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blm-dark-soft);
  margin: 0;
}

.blm-section--paper .blm-stat,
.blm-section--soft .blm-stat {
  background: #ffffff;
  border-color: var(--blm-line);
}

.blm-section--paper .blm-stat__value,
.blm-section--soft .blm-stat__value { color: var(--blm-ink); }

.blm-section--paper .blm-stat__label,
.blm-section--soft .blm-stat__label { color: var(--blm-body); }

/* ---------- Split / media block ---------- */

.blm-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

.blm-split--reverse .blm-split__media { order: -1; }

.blm-split__media {
  border-radius: var(--blm-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--blm-paper-3);
  box-shadow: var(--blm-shadow);
}

.blm-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blm-figure {
  margin: 0;
}

.blm-figure figcaption {
  font-size: 0.87rem;
  color: var(--blm-body);
  margin-top: 0.7rem;
}

.blm-section--photo .blm-figure figcaption,
.blm-section--dark .blm-figure figcaption { color: var(--blm-dark-soft); }

/* ---------- Gallery ---------- */

.blm-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.blm-gallery__item {
  border-radius: var(--blm-radius-sm);
  overflow: hidden;
  background: var(--blm-paper-3);
  aspect-ratio: 4 / 3;
}

.blm-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.blm-gallery__item:hover img { transform: scale(1.06); }

.blm-gallery__item:first-child {
  grid-column: span 2;
  aspect-ratio: 8 / 5;
}

/* ---------- Testimonials ---------- */

.blm-quote {
  background: #ffffff;
  border: 1px solid var(--blm-line);
  border-radius: var(--blm-radius);
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blm-quote__stars { color: var(--blm-sun); margin-bottom: 1rem; font-size: 0.9rem; }

.blm-quote__text {
  font-size: 1rem;
  color: var(--blm-ink-2);
  flex: 1;
}

.blm-quote__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--blm-line);
}

.blm-quote__person img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blm-paper-3);
}

.blm-quote__name {
  font-family: var(--blm-font-display);
  font-weight: 600;
  color: var(--blm-ink);
  margin: 0;
  font-size: 0.95rem;
}

.blm-quote__role {
  font-size: 0.82rem;
  color: var(--blm-body);
  margin: 0;
}

/* ---------- Team ---------- */

.blm-person {
  background: #ffffff;
  border: 1px solid var(--blm-line);
  border-radius: var(--blm-radius);
  overflow: hidden;
  height: 100%;
}

.blm-person__photo {
  aspect-ratio: 1 / 1;
  background: var(--blm-paper-3);
  overflow: hidden;
}

.blm-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blm-person__body { padding: 1.4rem; }
.blm-person__body h3 { font-size: 1.08rem; margin-bottom: 0.2rem; }
.blm-person__body p:last-child { margin-bottom: 0; }

.blm-person__role {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blm-aqua-600);
  font-family: var(--blm-font-display);
  font-weight: 600;
  margin-bottom: 0.7rem;
}

/* ---------- FAQ ---------- */

.blm-faq .accordion-item {
  border: 1px solid var(--blm-line);
  border-radius: var(--blm-radius-sm) !important;
  margin-bottom: 0.9rem;
  overflow: hidden;
  background: #ffffff;
}

.blm-faq .accordion-button {
  font-family: var(--blm-font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--blm-ink);
  background: #ffffff;
  padding: 1.15rem 1.4rem;
  box-shadow: none;
}

.blm-faq .accordion-button:not(.collapsed) {
  background: var(--blm-aqua-100);
  color: var(--blm-aqua-600);
}

.blm-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(14, 127, 129, 0.22); }

.blm-faq .accordion-body {
  color: var(--blm-body);
  padding: 0.25rem 1.4rem 1.3rem;
}

/* ---------- Forms ---------- */

.blm-form {
  background: #ffffff;
  border: 1px solid var(--blm-line);
  border-radius: var(--blm-radius);
  padding: 2rem;
  box-shadow: var(--blm-shadow);
}

.blm-form--on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.blm-field { margin-bottom: 1.1rem; }

.blm-field__label {
  display: block;
  font-family: var(--blm-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blm-ink);
  margin-bottom: 0.45rem;
}

.blm-form--on-dark .blm-field__label { color: #ffffff; }

.blm-field__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--blm-line);
  border-radius: var(--blm-radius-sm);
  font-family: var(--blm-font-body);
  font-size: 0.95rem;
  color: var(--blm-ink);
  background: #ffffff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.blm-field__input::placeholder { color: #8aa3ac; }

.blm-field__input:focus {
  outline: none;
  border-color: var(--blm-aqua);
  box-shadow: 0 0 0 3px rgba(14, 127, 129, 0.18);
}

.blm-field__hint {
  display: block;
  font-size: 0.8rem;
  color: var(--blm-body);
  margin-top: 0.35rem;
}

.blm-form--on-dark .blm-field__hint { color: var(--blm-dark-soft); }

.blm-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  margin-bottom: 1.1rem;
}

.blm-choice input { margin-top: 0.3rem; }

.blm-form .invalid-feedback { color: #a3261f; font-size: 0.83rem; }

.blm-form--on-dark .invalid-feedback { color: #ffc9a6; }

/* ---------- Info strip ---------- */

.blm-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.blm-strip__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--blm-radius);
  background: #ffffff;
  border: 1px solid var(--blm-line);
}

.blm-strip__item i {
  color: var(--blm-aqua);
  font-size: 1.15rem;
  margin-top: 0.25rem;
}

.blm-strip__item h3 { font-size: 0.98rem; margin-bottom: 0.25rem; }
.blm-strip__item p { margin: 0; font-size: 0.92rem; }

/* ---------- Map ---------- */

.blm-map {
  border-radius: var(--blm-radius);
  overflow: hidden;
  border: 1px solid var(--blm-line);
  line-height: 0;
}

.blm-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* ---------- Footer ---------- */

.blm-footer {
  background: var(--blm-deep);
  color: var(--blm-dark-soft);
  padding: 4.2rem 0 2rem;
}

.blm-footer h3,
.blm-footer h4 {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}

.blm-footer p { color: var(--blm-dark-soft); font-size: 0.92rem; }

.blm-footer a { color: var(--blm-dark-soft); }
.blm-footer a:hover { color: #ffffff; }

.blm-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.4rem;
}

.blm-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blm-footer__list li { margin-bottom: 0.6rem; font-size: 0.92rem; }

.blm-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--blm-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}

.blm-footer__social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.blm-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.blm-footer__social a:hover { background: var(--blm-aqua); color: #ffffff; }

.blm-footer__legal {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.84rem;
}

.blm-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

/* ---------- Back to top ---------- */

.blm-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--blm-aqua);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.3s ease;
  z-index: 1020;
}

.blm-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.blm-top:hover { background: var(--blm-aqua-600); }

/* ---------- Cookie banner ---------- */

.blm-cookie {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%) translateY(10px);
  width: min(1080px, calc(100% - 2rem));
  z-index: 1060;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

.blm-cookie.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.blm-cookie__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--blm-deep);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 5px solid var(--blm-aqua);
  border-radius: var(--blm-radius);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--blm-shadow-lg);
}

.blm-cookie__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--blm-aqua);
  color: #ffffff;
  font-size: 1.15rem;
}

.blm-cookie__copy { flex: 1 1 auto; min-width: 0; }

.blm-cookie__title {
  font-family: var(--blm-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.3rem;
}

.blm-cookie__text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--blm-dark-soft);
  margin: 0;
}

.blm-cookie__link { color: #8fe0e1; text-decoration: underline; }
.blm-cookie__link:hover { color: #ffffff; }

.blm-cookie__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.7rem;
}

.blm-cookie__btn {
  font-family: var(--blm-font-display);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.blm-cookie__btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.blm-cookie__btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.blm-cookie__btn--solid {
  background: var(--blm-sun);
  color: #ffffff;
}

.blm-cookie__btn--solid:hover { background: #a95f13; }

/* ---------- Utilities ---------- */

.blm-center { text-align: center; }
.blm-mt-3 { margin-top: 1.5rem; }
.blm-mt-4 { margin-top: 2.5rem; }
.blm-mb-4 { margin-bottom: 2.5rem; }
.blm-nowrap { white-space: nowrap; }

.blm-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
}

.blm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  font-family: var(--blm-font-display);
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--blm-paper-2);
  border: 1px solid var(--blm-line);
  color: var(--blm-ink-2);
}

.blm-section--photo .blm-pill,
.blm-section--dark .blm-pill {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .blm-header__meta { display: none; }
  .blm-nav { display: none; }
  .blm-burger { display: inline-flex; align-items: center; justify-content: center; }
  .blm-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .blm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .blm-grid--3,
  .blm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blm-gallery__item:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .blm-split { grid-template-columns: 1fr; gap: 2rem; }
  .blm-split--reverse .blm-split__media { order: 0; }
  .blm-strip { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .blm-section { padding: 3.4rem 0; }
  .blm-grid--2,
  .blm-grid--3,
  .blm-grid--4 { grid-template-columns: 1fr; }
  .blm-stats { grid-template-columns: 1fr; }
  .blm-footer__grid { grid-template-columns: 1fr; }
  .blm-step { padding: 1.7rem 1.3rem 1.5rem 4.2rem; }
  .blm-cookie__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .blm-cookie__badge { display: none; }
  .blm-cookie__actions { flex-direction: column; }
  .blm-cookie__btn { width: 100%; }
  .blm-hero__nav { display: none; }
  .blm-form { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* QA_GRID_COLUMN_FIX .blm-stats.blm-mt-4.row */
.blm-stats.blm-mt-4.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.blm-stats.blm-mt-4.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}
/* QA_GRID_COLUMN_FIX .blm-steps.row */
.blm-steps.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.blm-steps.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}
/* QA_GRID_COLUMN_FIX .blm-gallery.row */
.blm-gallery.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.blm-gallery.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}


/* QA_STEP_CARD_GRID_FIX .blm-steps:has(> .blm-step) */
@media(min-width:992px){.blm-steps:has(> .blm-step){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.blm-steps:has(> .blm-step)>:not(.blm-step){grid-column:1/-1}.blm-steps:has(> .blm-step)>.blm-step{width:100%;max-width:100%;min-width:0}}

/* ===== QA FIXES: contrast + gallery grid ===== */

/* Contrast: primary orange button (white text on darker orange, >=4.5:1) */
.blm-btn--sun { background: #a95f13; color: #ffffff; }
.blm-btn--sun:hover { background: #8c4d0e; color: #ffffff; }
.blm-cookie__btn--solid { background: #a95f13; color: #ffffff; }
.blm-cookie__btn--solid:hover { background: #8c4d0e; }

/* Gallery: the custom grid children are Bootstrap columns; make each direct
   column child fill its grid track, drop gutter padding and reset margins
   while preserving the 3-column (desktop) / 2-column (mobile) layout. */
.blm-gallery.row { display: grid; }
.blm-gallery.row > .blm-gallery__item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  align-self: start;
  justify-self: stretch;
}

/* ===== QA FIX: contrast on light sections (contacts page) ===== */

/* Bootstrap gives .h5-classed headings `color: var(--bs-heading-color)`
   (inherit), so an h2.h5 inside a light card was rendering at body colour.
   Re-assert the dark heading ink for headings used inside light info cards. */
.blm-strip__item h2,
.blm-strip__item h3,
.blm-strip__item .h5 { color: var(--blm-ink); }

.blm-strip__item p { color: var(--blm-ink-2); }

/* Links inside light info cards: use a darker aqua that clears 4.5:1 with margin */
.blm-strip__item a { color: #06494a; }
.blm-strip__item a:hover { color: var(--blm-aqua-600); }

/* Stats blocks placed on an ordinary light section were inheriting the
   "dark theme" palette (white value / pale label) over a white background.
   Give the light-section treatment to any stats outside a dark/photo band. */
.blm-section:not(.blm-section--dark):not(.blm-section--photo) .blm-stat {
  background: #ffffff;
  border-color: var(--blm-line);
}

.blm-section:not(.blm-section--dark):not(.blm-section--photo) .blm-stat__value {
  color: var(--blm-ink);
}

.blm-section:not(.blm-section--dark):not(.blm-section--photo) .blm-stat__label {
  color: var(--blm-ink-2);
}

/* Inline "submitted" confirmation appended by the form handler must stay
   readable on the light contact form. */
.blm-form [data-form-success] { color: var(--blm-ink) !important; }

/* ===== QA FIXES: statistics contrast on light sections + animation visibility ===== */

/* The .blm-stat styles default to white text for dark/photo backgrounds, but the
   About section on the homepage is a plain light section. Give the stats proper
   dark text and a light card surface whenever they are NOT on a dark/photo band. */
.blm-section:not(.blm-section--dark):not(.blm-section--photo) .blm-stat {
  background: #ffffff;
  border-color: var(--blm-line);
}

.blm-section:not(.blm-section--dark):not(.blm-section--photo) .blm-stat__value {
  color: var(--blm-ink);
}

.blm-section:not(.blm-section--dark):not(.blm-section--photo) .blm-stat__label {
  color: var(--blm-body);
}

/* Keep animated content visible. AOS sets opacity:0/transform inline before an
   element scrolls into view, which leaves copy invisible (and failing contrast)
   in some viewports. Force the resting, fully visible state. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ===== QA FIX: footer/header brand mark contrast ===== */
/* The brand mark badge relies on a background-image gradient, so the computed
   background-color stays transparent/white and the white label can fail
   contrast checks (especially inside the footer). Add a solid dark teal
   background-color underneath the gradient so the white "Blemaro" mark always
   sits on a dark surface. */
.blm-brand__mark {
  background-color: #0a6364;
}
.blm-footer .blm-brand__mark,
.blm-header .blm-brand__mark {
  background-color: #0a6364;
  color: #ffffff;
}

/* ===== QA FIX: readable text inside white-surfaced cards/steps even when the
   surrounding section uses the light-on-dark (dark/photo band) palette. ===== */

.blm-card,
.blm-step {
  color: var(--blm-body);
}

.blm-card h1,
.blm-card h2,
.blm-card h3,
.blm-card h4,
.blm-card h5,
.blm-card h6,
.blm-step h1,
.blm-step h2,
.blm-step h3,
.blm-step h4,
.blm-step h5,
.blm-step h6 {
  color: var(--blm-ink);
}

.blm-card p,
.blm-card li,
.blm-card .blm-lead,
.blm-step p,
.blm-step li,
.blm-step .blm-lead {
  color: var(--blm-body);
}

/* Price figures rendered as .blm-stat__value inside a white card must be dark. */
.blm-card .blm-stat__value,
.blm-step .blm-stat__value,
.blm-card .blm-stat__label,
.blm-step .blm-stat__label {
  color: var(--blm-ink);
}

/* Pills sitting on a white card/step surface need the light-surface styling. */
.blm-card .blm-pill,
.blm-step .blm-pill {
  background: var(--blm-paper-2);
  border-color: var(--blm-line);
  color: var(--blm-ink-2);
}

/* Links on white card/step surfaces keep the accessible dark aqua. */
.blm-card a:not(.blm-btn),
.blm-step a:not(.blm-btn) {
  color: var(--blm-aqua-600);
}

/* ===== QA FIX: inline links on dark / photo bands need a bright aqua that
   clears 4.5:1 against the deep background. ===== */
.blm-section--dark a:not(.blm-btn):not(.blm-btn--solid):not(.blm-btn--sun):not(.blm-btn--outline):not(.blm-cookie__link),
.blm-section--photo a:not(.blm-btn):not(.blm-btn--solid):not(.blm-btn--sun):not(.blm-btn--outline):not(.blm-cookie__link) {
  color: #8fe0e1;
}

.blm-section--dark a:not(.blm-btn):hover,
.blm-section--photo a:not(.blm-btn):hover {
  color: #ffffff;
}

/* The success note appended by the form handler must stay legible on the
   translucent dark enquiry form. */
.blm-form--on-dark [data-form-success] {
  color: var(--blm-dark-text) !important;
}

/* ===== QA FIX: brand mark contrast in header/footer ===== */
/* .blm-brand__mark paints its background with a gradient (background-image),
   so the element's computed background-color stays transparent. Automated
   contrast checks then resolve the backdrop to the page white and flag the
   white "Blemaro" label. Give the mark a solid dark background-color as well
   (the gradient still paints over it, so the look is unchanged) so white text
   always clears 4.5:1. */
.blm-header .blm-brand__mark,
.blm-footer .blm-brand__mark {
  background-color: #0e7f81;
}

/* ===== QA FIX: figure caption contrast on the thank-you page =====
   The caption sits directly over the light media surface (.blm-split__media
   background: --blm-paper-3), but the dark-band rule was giving it the light
   on-dark colour (--blm-dark-soft), which fails contrast. Use the dark ink
   instead so it is readable on the light media surface. */
.blm-section--dark .blm-figure figcaption,
.blm-section--photo .blm-figure figcaption {
  color: var(--blm-ink-2);
}

/* ===== QA FIX: duplicated checklist marker inflating pricing plan cards =====
   Rules such as `ul.blm-list li::before` already draw a check glyph for every
   list item. Several lists (e.g. the pricing plan cards in section 4) ALSO carry
   an inline `<i class="fas fa-check">` inside each <li>, so each row rendered two
   checkmarks and the inline icon ate ~1.4rem of the first line's width. That
   forced almost every benefit line to wrap, making each plan card roughly a full
   mobile viewport tall and stretching the section to ~2000px.

   Hide only the redundant inline check icon; the CSS-generated marker stays, the
   list padding keeps its alignment, and non-check icons (phone / envelope /
   location in the enquiry list) are deliberately left visible. */

.blm-list > li > i.fa-check,
.blm-list > li > i.fas.fa-check,
.blm-list > li > i.fa-solid.fa-check {
  display: none;
}

/* ===== QA FIX: form placeholder contrast =====
   .blm-field__input keeps a white background even inside the dark enquiry form,
   so its placeholder colour (#8aa3ac) was rendering on white at ~2.65:1 and
   failing the 4.5:1 requirement. Darken the placeholder to a mid blue-grey from
   the site palette (#5c7a85 resolves to ~4.7:1 against #ffffff) so the example
   text stays readable on the white field surface, without touching any other
   text colour on the page. */
.blm-field__input::placeholder {
  color: #5c7a85;
  opacity: 1;
}

/* Removed: the lighter-tint variant left white-painted inputs with a ~1.28:1
   placeholder. The base #5c7a85 rule above applies to every field surface. */

/* ===== QA FIX: enquiry form heading contrast =====
   The contact form (.blm-form--on-dark) only paints a translucent white wash
   (rgba(255,255,255,0.06)) for its own surface, so the real backdrop is the
   light card it sits in (.blm-split__media background: --blm-paper-3,
   #e3eef0). Against that pale teal the form's white heading ("Request a quote
   or a pickup"), white labels and pale hints all fall well under 4.5:1.

   The form was designed as "on dark", so give its media wrapper the site's
   deep teal surface instead of recolouring the text. That keeps the palette,
   changes nothing on light forms, and restores the intended white-on-dark
   contrast for the heading, labels and hints at once. */
.blm-split__media:has(> .blm-form--on-dark) {
  background: var(--blm-deep);
}

/* Belt-and-braces: if the form itself is ever placed on an ordinary light
   surface, darken its own backdrop just enough to carry white text. */
.blm-form--on-dark {
  background: rgba(7, 36, 43, 0.72);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ===== MANUAL QA FIX: hero slides hidden by class collision =====
   The hero slides reused .blm-scrim, which is the fixed, opacity:0,
   visibility:hidden mobile-nav overlay — so every slide rendered invisible and
   the hero section showed only its arrows. Slides now use .blm-hero__bg. */
.blm-hero__bg {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== MANUAL QA FIX: section shells squeezed into one grid track =====
   .blm-strip is a 3-column grid but its only child is the .blm-shell wrapper,
   so the shell was confined to the first ~465px track and the inner 4-column
   card grid squeezed to ~87px columns with vertical text. Span the shell
   across all tracks. */
.blm-strip > .blm-shell { grid-column: 1 / -1; }

/* Same defect in the footer: .blm-footer__grid is a 4-track grid whose single
   child is the Bootstrap .row, so all footer columns collapsed into ~330px.
   Span the row across every track. */
.blm-footer__grid > .row { grid-column: 1 / -1; }

/* ===== MANUAL QA FIX: strip card content squeezed into a side column =====
   .blm-strip__item is a plain flex row: [icon][h3][p] all share one line, so
   the paragraph ended up as a ~90px text column. Wrap the paragraph to its
   own full-width line; icon stays beside the title. */
.blm-strip__item { flex-wrap: wrap; }
.blm-strip__item h3 { flex: 1; min-width: 0; }
.blm-strip__item p { flex: 1 1 100%; }

/* ===== MANUAL QA FIX: footer brand block crams the intro paragraph beside
   the logo ===== .blm-footer__brand is inline-flex and wrongly contains the
   description <p>, so the text rendered as a narrow column next to the logo.
   The inner .blm-brand link already carries its own inline-flex layout, so the
   wrapper can safely be a plain block again. */
.blm-footer__brand { display: block; }
.blm-footer__brand > .blm-brand { margin-bottom: 0.4rem; }

/* ===== MANUAL QA FIX: brand badge crops its own wordmark =====
   .blm-brand__mark is a fixed 42px badge but holds the full "Blemaro" label —
   the text overflowed the gradient badge and rendered white-on-white outside
   it. Let the badge grow to the wordmark so text always stays on the teal
   surface. */
.blm-brand__mark { width: auto; min-width: 42px; padding: 0 0.7rem; }

/* ===== MANUAL QA FIX: logo rendered squished =====
   logo.png is square (1024x1024) but the img tag forces 80x40. Preserve its
   aspect: fixed height, natural width. */
.blm-brand img { height: 50px; width: auto; }

/* ===== Forms, captions and footer must stay inside their blocks ===== */

/* The 4:3 media frame was clipping enquiry forms. Let the frame grow with the form. */
.blm-split__media:has(> .blm-form),
.blm-split__media:has(> form) {
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Captions under split photos were cropped by the same frame. */
.blm-split__media:has(> .blm-figure) {
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.blm-split__media:has(> .blm-figure) img,
.blm-split__media > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--blm-radius);
}

/* Gallery cards kept a fixed ratio and hid the caption underneath the photo. */
.blm-gallery__item {
  overflow: visible;
  aspect-ratio: auto;
  height: auto;
  background: transparent;
}

.blm-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--blm-radius-sm);
}

.blm-gallery__item:first-child { aspect-ratio: auto; }

.blm-gallery__item:first-child img { aspect-ratio: 8 / 5; }

/* Even service galleries (Bootstrap rows) should keep four equal photos. */
.blm-gallery.row > .blm-gallery__item:first-child {
  grid-column: auto;
}

.blm-gallery.row > .blm-gallery__item:first-child img { aspect-ratio: 4 / 3; }

@media (max-width: 900px) {
  .blm-gallery__item:first-child { aspect-ratio: auto; }
  .blm-gallery:not(.row) > .blm-gallery__item:first-child img { aspect-ratio: 16 / 9; }
}

/* Footer columns were pulled outside the grid by Bootstrap's negative gutters,
   and the map only occupied the first track of the four-column grid. */
.blm-footer__grid > .row {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.blm-footer__grid > .blm-map {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}

/* Long header contact line was overflowing the bar. */
.blm-header__meta {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.35rem;
}

.blm-header__meta .blm-nowrap { white-space: normal; }