/* ==========================================================================
   branding-projects.css
   Branding Projects page only — loaded AFTER our-work.css and
   our-work-portfolio.css.
   1. Project listing: filter pills at the top of the grid + filter fade
   2. Branding project modal (#bp-modal, .bpm*) filled by js/branding-projects.js

   Popup layout (no empty space by construction):
     top row      hero visual | project header + industry / type + description
                  (the hero image covers whatever height the header needs)
     full rows    brand identity · applications · website design · showcase ·
                  capabilities · highlights — each grid takes its column count
                  from its own item count (--n, set by the JS), so a row is
                  always filled edge to edge
     results row  performance marketing / SEO / logo animation — 1 to 3 panels
                  share the row (--n); a single panel spans it
     footer       live website + CTA
   A section without data is never rendered, so nothing reserves height.
   The only per-project colour is --bpm-accent (lines, icons, tints).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PROJECT LISTING
   -------------------------------------------------------------------------- */
.cs-grid-section__filters {
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cs-line);
}

.cs-card.is-filtered-in {
  animation: bpFilterIn 0.42s var(--svc-ease) both;
}

@keyframes bpFilterIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* "View Project" is a <button> with the existing .cs-link look */
button.cs-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

button.cs-link:focus-visible {
  outline: 3px solid rgba(28, 111, 208, 0.35);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. BRANDING PROJECT MODAL
   -------------------------------------------------------------------------- */
html.bpm-lock,
html.bpm-lock body {
  overflow: hidden;
}

.bpm {
  --bpm-accent: #1c6fd0;
  --bpm-pad: 26px;
  --bpm-gap: 22px;
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.bpm[hidden] {
  display: none;
}

.bpm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 27, 71, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--svc-ease);
}

.bpm__dialog {
  position: relative;
  width: 100%;
  max-width: 1320px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(4, 27, 71, 0.35);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.3s var(--svc-ease), transform 0.4s var(--svc-ease);
}

.bpm__dialog:focus {
  outline: none;
}

.bpm.is-open .bpm__backdrop {
  opacity: 1;
}

.bpm.is-open .bpm__dialog {
  opacity: 1;
  transform: none;
}

.bpm__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cs-line);
  border-radius: 50%;
  background: #fff;
  color: var(--cs-navy);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(6, 42, 107, 0.18);
  transition: transform 0.25s var(--svc-ease), color 0.25s var(--svc-ease);
}

.bpm__close i {
  display: inline-flex;
}

.bpm__close:hover {
  color: var(--accent2);
  transform: rotate(90deg);
}

.bpm__close:focus-visible {
  outline: 3px solid rgba(28, 111, 208, 0.45);
  outline-offset: 2px;
}

.bpm__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
  padding: var(--bpm-pad);
}

.bpm__grid,
.bpm__body {
  display: flex;
  flex-direction: column;
  gap: var(--bpm-gap);
  min-width: 0;
}

.bpm__body[hidden],
.bpm__results[hidden],
.bpm__visual[hidden],
.bpm__info[hidden],
.bpm__tags[hidden],
.bpm__logo[hidden],
.bpm__tagline[hidden],
.bpm__intro[hidden] {
  display: none;
}

/* ---- top row: hero | header ---- */
.bpm__top {
  display: grid;
  /* grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); */
  gap: 28px;
  align-items: stretch;
}

/* no hero image → the header simply takes the full width */
.bpm__top:has(> .bpm__visual[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.bpm__visual {
  display: flex;
  min-width: 0;
}

.bpm-hero {
  flex: 1 1 auto;
  margin: 0;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cs-pale);
  box-shadow: 0 14px 34px rgba(6, 42, 107, 0.14);
}

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

.bpm__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bpm__headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 18px;
  padding-right: 48px; /* room for the close button */
}

.bpm__headline-text {
  min-width: 0;
}

.bpm__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-navy);
}

.bpm__eyebrow::before {
  content: "";
  width: 28px;
  height: 10px;
  background: var(--bpm-accent);
  flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h29M26 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h29M26 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat left center / contain;
}

.bpm__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cs-navy);
  margin: 6px 0 6px;
  overflow-wrap: anywhere;
}

.bpm__tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.45vw, 1.18rem);
  line-height: 1.35;
  color: var(--cs-navy);
  margin: 0;
}

.bpm__intro {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
}

.bpm__logo {
  align-self: start;
}

.bpm__logo img {
  display: block;
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  border-radius: 8px;
}

.bpm__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bpm-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cs-line);
  box-shadow: 0 4px 12px rgba(6, 42, 107, 0.05);
  color: var(--cs-navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}

.bpm-tag i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bpm-accent) 14%, #fff);
  color: var(--bpm-accent);
  font-size: 0.9rem;
}

.bpm__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ---- Industry / Project Type ---- */
.bpm-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line);
}

.bpm-meta__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.bpm-meta__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bpm-accent) 12%, #fff);
  color: var(--bpm-accent);
  font-size: 1rem;
}

.bpm-meta__icon i {
  display: inline-flex;
}

.bpm-meta dl {
  margin: 0;
  min-width: 0;
}

.bpm-meta dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cs-navy);
}

.bpm-meta dd {
  margin: 1px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text2);
}

/* ---- shared section heading ---- */
.bpm-sec {
  min-width: 0;
}

.bpm-sec__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--cs-navy);
  margin: 0 0 12px;
}

.bpm-sec__title i {
  display: inline-flex;
  color: var(--bpm-accent);
  font-size: 1.05rem;
}

.bpm-sec p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
}

.bpm-desc .bpm-sec__title {
  margin-bottom: 6px;
}

/* caption under tiles / devices */
.bpm-cap {
  display: block;
  margin-top: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--cs-navy);
  text-align: center;
}

/* ---- count-aware tile grids (--n set by the JS) ---- */
.bpm-tiles {
  --n: 4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 14px;
}

.bpm-tiles > li {
  min-width: 0;
}

/* brand identity tiles */
.bpm-id__box {
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 14px;
  background: var(--cs-pale-2);
  border: 1px solid var(--cs-line);
  overflow: hidden;
}

.bpm-id__box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.bpm-palette {
  gap: 10px;
  align-items: flex-start;
  padding-top: 22px;
}

.bpm-swatch {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.bpm-swatch__dot {
  width: 100%;
  max-width: 46px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(6, 42, 107, 0.14);
  box-shadow: 0 4px 10px rgba(6, 42, 107, 0.1);
}

.bpm-swatch__name {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--text2);
}

.bpm-type {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.bpm-type__aa {
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--cs-navy);
}

.bpm-type__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cs-navy);
}

.bpm-type__set {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text2);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* image tiles (applications / showcase / creatives) */
.bpm-tile__media {
  border-radius: 14px;
  overflow: hidden;
  background: var(--cs-pale);
  aspect-ratio: 4 / 3;
  box-shadow: 0 8px 22px rgba(6, 42, 107, 0.08);
}

.bpm-tile__media--square {
  aspect-ratio: 1;
}

.bpm-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--svc-ease);
}

.bpm-tile:hover .bpm-tile__media img {
  transform: scale(1.04);
}

/* ---- website design: laptop · tablet · phone ---- */
.bpm-devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.3fr) minmax(0, 0.5fr);
  gap: 18px;
  align-items: end;
}

.bpm-device {
  min-width: 0;
}

.bpm-device__frame {
  background: #0d1b33;
  border-radius: 12px;
  padding: 7px;
  box-shadow: 0 14px 30px rgba(6, 42, 107, 0.18);
}

.bpm-device--mobile .bpm-device__frame {
  border-radius: 18px;
  padding: 6px;
}

.bpm-device__screen {
  border-radius: 6px;
  overflow: hidden;
  background: #f4f7fb;
  aspect-ratio: 16 / 10;
}

.bpm-device--tablet .bpm-device__screen {
  aspect-ratio: 4 / 3;
}

.bpm-device--mobile .bpm-device__screen {
  aspect-ratio: 1 / 2;
  border-radius: 13px;
}

.bpm-device__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---- in-house capabilities ---- */
.bpm-capability {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cs-pale-2);
  border: 1px solid var(--cs-line);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cs-navy);
}

.bpm-capability i {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--bpm-accent);
  font-size: 1.1rem;
}

/* ---- website highlights ---- */
.bpm-highlights {
  background: var(--cs-pale-2);
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  padding: 16px;
}

.bpm-highlight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cs-line);
}

.bpm-highlight__icon {
  flex: 0 0 auto;
  display: inline-flex;
  font-size: 1.2rem;
  color: var(--bpm-accent);
  margin-top: 1px;
}

.bpm-highlight__icon i {
  display: inline-flex;
}

.bpm-highlight__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--cs-navy);
  margin: 0 0 3px;
}

.bpm-sec .bpm-highlight__text {
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---- results: marketing / SEO / logo animation ----
   Panels stack full width so each is exactly as tall as its own content
   (side by side, a short SEO note next to a tall panel would leave a gap).
   Media-heavy panels lay their media beside the copy instead (.bpm-split). */
.bpm__results {
  display: flex;
  flex-direction: column;
  gap: var(--bpm-gap);
}

.bpm-split {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 18px 24px;
  align-items: center;
}

.bpm-split--wide {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.bpm-split--solo {
  grid-template-columns: minmax(0, 1fr);
}

.bpm-split__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* placeholders are shown whole (never cropped) until the final image exists */
.bpm img[data-bp-fallback] {
  object-fit: contain;
}

.bpm-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bpm-accent) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--bpm-accent) 20%, transparent);
}

.bpm-panel .bpm-sec__title {
  margin: 0;
}

/* SEO */
.bpm-seo__wrap {
  overflow-x: auto;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cs-line);
}

.bpm-seo__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.bpm-seo__table th {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--cs-navy);
  text-align: left;
  padding: 8px 12px;
  background: var(--cs-pale);
}

.bpm-seo__table th:last-child,
.bpm-seo__pos {
  text-align: center;
  white-space: nowrap;
  width: 1%;
}

.bpm-seo__table td {
  padding: 7px 12px;
  border-top: 1px solid var(--cs-line);
  color: var(--text);
  overflow-wrap: anywhere;
}

.bpm-seo__table td.bpm-seo__pos {
  font-family: var(--font-head);
  font-weight: 800;
  color: #1f7a36;
}

/* logo animation */
.bpm-anim__media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--cs-line);
}

.bpm-anim__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpm-anim__link {
  align-self: flex-start;
}

/* performance marketing */
.bpm-messages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bpm-messages li {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cs-line);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--cs-navy);
}

.bpm-messages li::before {
  content: "\201C";
  color: var(--bpm-accent);
  margin-right: 2px;
}

.bpm-messages li::after {
  content: "\201D";
  color: var(--bpm-accent);
  margin-left: 2px;
}

.bpm-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.bpm-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text2);
}

.bpm-flow__step strong {
  font-family: var(--font-head);
  font-size: 0.98rem;
  color: var(--cs-navy);
  margin-top: 6px;
}

.bpm-flow__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bpm-accent);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bpm-accent) 30%, transparent);
}

.bpm-flow__icon i {
  display: inline-flex;
}

/* arrow between steps */
.bpm-flow__step + .bpm-flow__step::before {
  content: "";
  position: absolute;
  top: 25px;
  right: calc(50% + 34px);
  width: calc(100% - 40px);
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bpm-accent) 45%, transparent));
}

/* ---- footer: live website + CTA ---- */
.bpm__foot {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 16px var(--bpm-gap);
  align-items: stretch;
}

/* no live website → the CTA takes the row */
.bpm__foot:has(> .bpm-live[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.bpm-live {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--cs-pale);
  border: 1px solid var(--cs-line);
  color: var(--cs-navy);
  text-decoration: none;
  transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease);
}

.bpm-live[hidden] {
  display: none;
}

.bpm-live:hover {
  transform: translateY(-2px);
  box-shadow: var(--cs-shadow);
  color: var(--cs-navy);
}

.bpm-live:focus-visible {
  outline: 3px solid rgba(28, 111, 208, 0.45);
  outline-offset: 2px;
}

.bpm-live__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  color: #fff;
  font-size: 1.1rem;
}

.bpm-live__icon i,
.bpm-live__ext {
  display: inline-flex;
}

.bpm-live__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.bpm-live__text strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
}

.bpm-live__text strong i {
  font-size: 0.78rem;
  vertical-align: middle;
}

.bpm-live__text span {
  font-size: 0.95rem;
  color: var(--accent2);
  overflow-wrap: anywhere;
}

.bpm-live__ext {
  color: var(--accent2);
}

.bpm-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--cs-pale-2);
  border: 1px solid var(--cs-line);
  text-align: center;
}

.bpm-cta__text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--cs-navy);
}

.bpm-cta__text i {
  display: inline-flex;
  color: var(--accent2);
  font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
/* laptop: 4 highlight cards → 2 × 2 keeps their text comfortable */
@media (max-width: 1199.98px) {
  .bpm-tiles--hl {
    --n: 2 !important;
  }
}

/* tablet: one column; hero above the header */
@media (max-width: 991.98px) {
  .bpm {
    --bpm-pad: 22px;
    --bpm-gap: 20px;
  }

  .bpm__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* close button sits over the hero, so the header needs no side gutter */
  .bpm__headline {
    padding-right: 0;
  }

  .bpm-hero {
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  .bpm-tiles--cap {
    --n: 3 !important;
  }

  .bpm-split--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpm__foot {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* large phones / small tablets: 2-column tiles; an odd last tile spans the row */
@media (max-width: 767.98px) {
  .bpm {
    --bpm-pad: 18px;
    --bpm-gap: 18px;
    padding: 12px 10px;
  }

  .bpm__dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
  }

  .bpm__close {
    top: 10px;
    right: 10px;
  }

  /* .bpm-hero {
    aspect-ratio: 16 / 9;
  } */

  .bpm-tiles,
  .bpm-tiles--cap {
    --n: 2 !important;
    gap: 12px;
  }

  .bpm-tiles > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* a full-width image tile keeps a sensible height */
  .bpm-tiles--img > li:last-child:nth-child(odd) .bpm-tile__media {
    aspect-ratio: 16 / 9;
  }

  .bpm-devices {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: 14px;
  }

  .bpm-device--desktop {
    grid-column: 1 / -1;
  }

  .bpm-id__box {
    height: 120px;
  }
}

@media (max-width: 575.98px) {
  .bpm {
    --bpm-pad: 16px;
    --bpm-gap: 16px;
  }

  .bpm__headline {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpm__logo {
    margin-top: 10px;
  }

  .bpm-meta,
  .bpm-tiles--hl {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpm-tiles--hl > li:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .bpm-highlights,
  .bpm-panel {
    padding: 14px;
  }

  .bpm-tag {
    font-size: 0.85rem;
  }

  .bpm-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpm-flow {
    gap: 14px;
  }

  .bpm-flow__step + .bpm-flow__step::before {
    display: none;
  }

  .bpm-cta {
    flex-direction: column;
  }

  .bpm-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 374.98px) {
  .bpm {
    --bpm-pad: 14px;
    padding: 8px 6px;
  }

  .bpm-capability {
    padding: 10px;
    font-size: 0.85rem;
  }

  .bpm-seo__table th,
  .bpm-seo__table td {
    padding: 6px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card.is-filtered-in {
    animation: none;
  }

  .bpm__backdrop,
  .bpm__dialog,
  .bpm__close,
  .bpm-live,
  .bpm-tile__media img {
    transition: none;
  }

  .bpm__dialog,
  .bpm__close:hover,
  .bpm-live:hover,
  .bpm-tile:hover .bpm-tile__media img {
    transform: none;
  }
}