/*!
Theme Name: BizProMedia (Kadence Child)
Theme URI: https://bizpromedia.com/
Description: Child theme for Kadence — carries BizProMedia brand tokens, the signature hero/stat/reveal effects, and section CSS for the homepage rebuild. Hand-authored to match the approved index.html mockup.
Author: Fritz Barnes — BizProMedia
Template: kadence
Version: 0.1.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: bizpromedia
*/

/* ============================================================
   BizProMedia — Brand Tokens
   Mirrors the approved mockup (index.html). Kept here as a
   single source of truth so every section CSS block below can
   lean on the same variables. The Kadence *global* palette is
   set separately in Appearance → Customize; these tokens are
   for the custom effects that aren't native Kadence blocks.
   ============================================================ */
:root {
  --bpm-blue:        #174E8C;
  --bpm-blue-deep:   #0e3461;
  --bpm-red:         #C63D2F;
  --bpm-red-deep:    #9c2c20;
  --bpm-green:       #4FA83D;
  --bpm-green-deep:  #387a2a;
  --bpm-charcoal:    #2F2F2F;
  --bpm-gray:        #7C7C7C;
  --bpm-neutral:     #F5F7FA;
  --bpm-white:       #ffffff;

  --bpm-ink:         #1d2329;
  --bpm-muted:       #5b6770;

  --bpm-radius:      18px;
  --bpm-radius-lg:   28px;
  --bpm-shadow-sm:   0 2px 8px rgba(20,40,70,.06);
  --bpm-shadow-md:   0 14px 40px -12px rgba(20,40,70,.22);
  --bpm-shadow-lg:   0 40px 80px -24px rgba(20,40,70,.30);
  --bpm-ease:        cubic-bezier(.2,.7,.2,1);
}

/* Prevent horizontal scroll caused by fullbleed sections breaking out of the content container */
html, body { overflow-x: hidden; }

/* ============================================================
   Shared motifs (used across hero + stat card)
   pixel-burst squares + dot grid + floaty keyframe
   ============================================================ */
@keyframes bpm-floaty {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-14px) rotate(8deg); }
}

/* ============================================================
   Scroll reveal (driven by bpm.js)
   Add the class "bpm-reveal" to any block to fade+rise it in.
   Stagger with bpm-d1 / bpm-d2 / bpm-d3.
   ============================================================ */
.bpm-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--bpm-ease), transform .7s var(--bpm-ease); }
.bpm-reveal.bpm-in { opacity: 1; transform: none; }
.bpm-reveal.bpm-d1 { transition-delay: .08s; }
.bpm-reveal.bpm-d2 { transition-delay: .16s; }
.bpm-reveal.bpm-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .bpm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SECTION CSS — filled in as we build, top → bottom.
   Each block targets a custom class on the markup we paste in.
   ------------------------------------------------------------
   [ ] Header tweaks
   [x] Hero
   [ ] Logo strip
   [ ] Services (3 color-coded cards)
   [ ] Why / stat card (count-up)
   [ ] Process (4 steps)
   [ ] Testimonial
   [ ] CTA + form
   [ ] Footer (dark + knockout logo)
   ============================================================ */

/* ============================================================
   BUTTONS (shared — hero, CTA, etc.)
   ============================================================ */
.bpm-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: .98rem;
  letter-spacing: -.01em; padding: 15px 26px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; position: relative; text-decoration: none;
  transition: transform .25s var(--bpm-ease), box-shadow .25s var(--bpm-ease), background .25s var(--bpm-ease), border-color .25s var(--bpm-ease);
}
.bpm-btn svg { width: 18px; height: 18px; }
.bpm-btn-primary { background: var(--bpm-red); color: #fff; box-shadow: 0 10px 24px -8px rgba(198,61,47,.6); }
.bpm-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(198,61,47,.7); color: #fff; }
.bpm-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.bpm-btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); border-color: #fff; color: #fff; }
.bpm-btn-light { background: #fff; color: var(--bpm-blue); }
.bpm-btn-light:hover { transform: translateY(-3px); box-shadow: var(--bpm-shadow-md); color: var(--bpm-blue); }

/* ============================================================
   HERO
   ============================================================ */
.bpm-hero {
  position: relative; overflow: hidden; padding: 88px 0 100px; isolation: isolate;
  /* Full-bleed: break out of any constrained container to the viewport edges.
     Idempotent — collapses to 0 if the Kadence row is already full width. */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.bpm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 65% at 85% 0%, rgba(23,78,140,.55), transparent 60%),
    radial-gradient(50% 60% at 6% 100%, rgba(198,61,47,.34), transparent 60%),
    radial-gradient(45% 55% at 55% 125%, rgba(79,168,61,.30), transparent 60%),
    linear-gradient(160deg, #24272c, var(--bpm-charcoal) 55%, #1f2226);
}
.bpm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
}
.bpm-hero-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.bpm-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

/* pixel bursts (inline style sets --c per square) */
.bpm-hero-pixels { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bpm-hero-pixels span {
  position: absolute; width: 12px; height: 12px; border-radius: 2px;
  background: var(--c, #fff); opacity: .9; animation: bpm-floaty 7s var(--bpm-ease) infinite;
}

/* copy column */
.bpm-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Public Sans", system-ui, sans-serif; font-weight: 700; font-size: .88rem;
  color: #dce7f4; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12);
  padding: 8px 15px; border-radius: 999px;
}
.bpm-eyebrow .bpm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bpm-green); box-shadow: 0 0 0 4px rgba(79,168,61,.2); }
.bpm-hero-h1 {
  font-family: "Public Sans", system-ui, sans-serif; font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1.04; letter-spacing: -.02em;
  color: #fff; margin: 22px 0 0;
}
.bpm-hl { position: relative; white-space: nowrap; color: #fff; }
.bpm-hl::after {
  content: ""; position: absolute; left: -2%; bottom: 6%; width: 104%; height: .42em; z-index: -1;
  background: rgba(79,168,61,.5); border-radius: 4px; transform: rotate(-1.2deg);
}
.bpm-hero-lead {
  font-family: "Merriweather Sans", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(255,255,255,.74); line-height: 1.6;
  margin: 24px 0 0; max-width: 42ch;
}
.bpm-hero-lead em { color: #fff; font-style: normal; border-bottom: 2px solid var(--bpm-green); }
.bpm-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.bpm-trustline { display: flex; align-items: center; gap: 14px; margin-top: 30px; color: rgba(255,255,255,.66); font-size: .9rem; font-family: "Merriweather Sans", system-ui, sans-serif; }
.bpm-avatars { display: flex; }
.bpm-avatars i {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; margin-left: -10px;
  display: grid; place-items: center; color: #fff; font-style: normal;
  font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: .8rem;
}
.bpm-avatars i:first-child { margin-left: 0; }
.bpm-stars { color: var(--bpm-green); font-weight: 800; font-family: "Public Sans", system-ui, sans-serif; }

/* photo column */
.bpm-hero-photo { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; }
.bpm-photo-frame {
  position: relative; z-index: 2; width: min(360px, 78%); aspect-ratio: 4 / 5;
  border-radius: 30px; overflow: hidden; background: var(--bpm-neutral);
  border: 5px solid #fff; box-shadow: var(--bpm-shadow-lg);
  transform: rotate(1.6deg); transition: transform .5s var(--bpm-ease);
}
.bpm-hero-photo:hover .bpm-photo-frame { transform: rotate(0deg) translateY(-5px); }
.bpm-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bpm-accent { position: absolute; z-index: 1; width: min(360px, 78%); aspect-ratio: 4 / 5; border-radius: 30px; }
.bpm-accent-1 { background: var(--bpm-blue);  transform: translate(-24px, -22px) rotate(-5deg); opacity: .92; }
.bpm-accent-2 { background: var(--bpm-green); transform: translate(24px, 24px) rotate(5deg); opacity: .85; }
.bpm-name-chip {
  position: absolute; z-index: 3; bottom: 7%; left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 14px; padding: 9px 18px; box-shadow: var(--bpm-shadow-md); text-align: center; white-space: nowrap;
}
.bpm-name-chip b { display: block; font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; color: var(--bpm-charcoal); font-size: 1rem; letter-spacing: -.02em; }
.bpm-name-chip span { font-size: .72rem; color: var(--bpm-gray); font-family: "Public Sans", system-ui, sans-serif; font-weight: 600; }

.bpm-float-badge {
  position: absolute; z-index: 3; background: #fff; border-radius: 14px; box-shadow: var(--bpm-shadow-md);
  padding: 13px 16px; display: flex; align-items: center; gap: 11px; color: var(--bpm-charcoal);
  font-family: "Public Sans", system-ui, sans-serif; font-weight: 700; font-size: .85rem;
  animation: bpm-floaty 5.5s var(--bpm-ease) infinite;
}
.bpm-float-badge .bpm-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.bpm-float-badge small { display: block; color: var(--bpm-gray); font-weight: 600; font-size: .72rem; }
.bpm-fb-1 { left: -34px; top: 30%; }
.bpm-fb-2 { right: -26px; bottom: 16%; animation-delay: 1.5s; }

/* trust badge strip */
.bpm-trust-badges { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.bpm-trust-badge { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.68); font-size: .86rem; font-family: "Public Sans", system-ui, sans-serif; font-weight: 600; }
.bpm-trust-badge svg { width: 16px; height: 16px; color: var(--bpm-green); flex: none; }
.bpm-trust-sep { color: rgba(255,255,255,.22); font-size: .7rem; align-self: center; }

@media (max-width: 980px) {
  .bpm-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .bpm-hero-lead { max-width: 46ch; }
  .bpm-float-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bpm-hero-pixels span, .bpm-float-badge { animation: none; }
}

/* ============================================================
   SHARED — full-bleed section + inner container
   Use .bpm-fullbleed on any <section> placed in a plain Custom
   HTML block so its background reaches the viewport edges, and
   .bpm-container on the inner wrapper to constrain content.
   ============================================================ */
.bpm-fullbleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.bpm-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.bpm-narrow-text { max-width: 740px; margin-inline: auto; }
.bpm-sec-head { max-width: 660px; margin: 0 auto 56px; text-align: center; }
.bpm-kicker { font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--bpm-red); }
.bpm-sec-head h2 { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--bpm-charcoal); margin: 14px 0 0; line-height: 1.04; letter-spacing: -.02em; }
.bpm-sec-head p { color: var(--bpm-muted); font-size: 1.08rem; margin-top: 16px; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.6; }

/* ============================================================
   LOGO STRIP
   ============================================================ */
.bpm-strip { padding: 30px 0; background: #fff; border-top: 1px solid rgba(20,40,70,.06); border-bottom: 1px solid rgba(20,40,70,.06); }
.bpm-strip .bpm-container { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.bpm-strip-label { font-family: "Public Sans", system-ui, sans-serif; font-weight: 700; color: var(--bpm-gray); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.bpm-strip-logos { display: flex; gap: 38px; flex-wrap: wrap; align-items: center; opacity: .6; }
.bpm-strip-logos b { font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: 1.12rem; color: var(--bpm-charcoal); letter-spacing: -.02em; }

/* ============================================================
   SERVICES — 3 color-coded cards (color set per card via --svc)
   ============================================================ */
.bpm-services { background: var(--bpm-neutral); padding: 100px 0; }
.bpm-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bpm-svc {
  background: #fff; border-radius: var(--bpm-radius-lg); padding: 36px 32px 34px; position: relative;
  border: 1px solid rgba(20,40,70,.06); overflow: hidden;
  transition: transform .35s var(--bpm-ease), box-shadow .35s var(--bpm-ease);
}
.bpm-svc::before { content: ""; position: absolute; left: 0; top: 0; height: 6px; width: 100%; background: var(--svc); }
.bpm-svc::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: var(--svc); opacity: .08; transition: transform .5s var(--bpm-ease); }
.bpm-svc:hover { transform: translateY(-8px); box-shadow: var(--bpm-shadow-md); }
.bpm-svc:hover::after { transform: scale(1.5); }
.bpm-svc-ic { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; color: #fff; margin-bottom: 22px; box-shadow: var(--bpm-shadow-sm); background: linear-gradient(135deg, var(--svc), var(--svc-deep)); }
.bpm-svc-ic svg { width: 30px; height: 30px; }
.bpm-svc h3 { font-family: "Public Sans", system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--bpm-charcoal); }
.bpm-svc > p { color: var(--bpm-muted); margin-top: 12px; font-size: .98rem; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.6; }
.bpm-svc ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.bpm-svc li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--bpm-charcoal); font-family: "Public Sans", system-ui, sans-serif; font-weight: 600; }
.bpm-svc li svg { width: 17px; height: 17px; flex: none; color: var(--svc); }
.bpm-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: .92rem; color: var(--svc); text-decoration: none; }
.bpm-more svg { width: 16px; height: 16px; transition: transform .25s var(--bpm-ease); }
.bpm-more:hover svg { transform: translateX(4px); }

.bpm-svc-blue  { --svc: var(--bpm-blue);  --svc-deep: var(--bpm-blue-deep); }
.bpm-svc-green { --svc: var(--bpm-green); --svc-deep: var(--bpm-green-deep); }
.bpm-svc-red   { --svc: var(--bpm-red);   --svc-deep: var(--bpm-red-deep); }

@media (max-width: 900px) {
  .bpm-svc-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* ============================================================
   WHY WORK WITH ME + STAT CARD (count-up)
   ============================================================ */
.bpm-why { background: #fff; padding: 100px 0; }
.bpm-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bpm-why h2 { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--bpm-charcoal); margin-top: 14px; line-height: 1.04; letter-spacing: -.02em; }
.bpm-why-list { display: grid; gap: 22px; margin-top: 28px; }
.bpm-why-item { display: flex; gap: 18px; }
.bpm-why-item .bpm-num { font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: 1.1rem; color: #fff; width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.bpm-why-item:nth-child(1) .bpm-num { background: var(--bpm-blue); }
.bpm-why-item:nth-child(2) .bpm-num { background: var(--bpm-red); }
.bpm-why-item:nth-child(3) .bpm-num { background: var(--bpm-green); }
.bpm-why-item h4 { font-family: "Public Sans", system-ui, sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--bpm-charcoal); }
.bpm-why-item p { color: var(--bpm-muted); margin-top: 5px; font-size: .96rem; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.6; }

.bpm-stat-card { background: var(--bpm-charcoal); border-radius: var(--bpm-radius-lg); padding: 44px; color: #fff; position: relative; overflow: hidden; }
.bpm-stat-card .bpm-hero-pixels span { opacity: .5; }
.bpm-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; position: relative; z-index: 1; }
.bpm-stat .bpm-n { font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.1rem); letter-spacing: -.03em; line-height: 1; }
.bpm-stat .bpm-n.b { color: #6ea4e6; }
.bpm-stat .bpm-n.g { color: #7fd06d; }
.bpm-stat .bpm-n.r { color: #f08070; }
.bpm-stat .bpm-n.w { color: #fff; }
.bpm-stat .bpm-l { color: rgba(255,255,255,.62); font-size: .92rem; margin-top: 4px; font-family: "Merriweather Sans", system-ui, sans-serif; }

@media (max-width: 900px) {
  .bpm-why-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ============================================================
   CUSTOM DEV CAPABILITIES — 2×3 grid
   ============================================================ */
.bpm-custom-dev { background: var(--bpm-neutral); padding: 100px 0; }
.bpm-cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.bpm-cap {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff; border-radius: var(--bpm-radius); padding: 24px 20px;
  border: 1px solid rgba(20,40,70,.06);
  transition: box-shadow .3s var(--bpm-ease), transform .3s var(--bpm-ease);
}
.bpm-cap:hover { box-shadow: var(--bpm-shadow-sm); transform: translateY(-3px); }
.bpm-cap-ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.bpm-cap-ic svg { width: 22px; height: 22px; color: #fff; }
.bpm-cap h4 { font-family: "Public Sans", system-ui, sans-serif; font-size: 1rem; font-weight: 800; color: var(--bpm-charcoal); }
.bpm-cap p { color: var(--bpm-muted); font-size: .9rem; margin-top: 4px; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.5; }
@media (max-width: 680px) { .bpm-cap-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AI AUTOMATION SHOWCASE
   ============================================================ */
.bpm-automation { background: var(--bpm-neutral); padding: 100px 0; }
.bpm-auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.bpm-auto-card {
  background: #fff; border-radius: var(--bpm-radius-lg); padding: 32px;
  display: flex; gap: 20px; align-items: flex-start;
  border: 1px solid rgba(20,40,70,.06);
  transition: box-shadow .3s var(--bpm-ease), transform .3s var(--bpm-ease);
}
.bpm-auto-card:hover { box-shadow: var(--bpm-shadow-md); transform: translateY(-4px); }
.bpm-auto-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.bpm-auto-icon svg { width: 28px; height: 28px; color: #fff; }
.bpm-auto-card h3 { font-family: "Public Sans", system-ui, sans-serif; font-size: 1.18rem; font-weight: 800; color: var(--bpm-charcoal); }
.bpm-auto-card p { color: var(--bpm-muted); font-size: .93rem; margin-top: 8px; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.6; }
.bpm-auto-banner {
  margin-top: 28px; background: var(--bpm-charcoal); border-radius: var(--bpm-radius);
  padding: 22px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.bpm-auto-banner-text {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.88); font-family: "Public Sans", system-ui, sans-serif;
  font-weight: 700; font-size: 1rem;
}
.bpm-auto-banner-text svg { width: 22px; height: 22px; color: var(--bpm-green); flex: none; }
@media (max-width: 760px) { .bpm-auto-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .bpm-auto-banner { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   PROCESS — 4 steps
   ============================================================ */
.bpm-process { background: var(--bpm-neutral); padding: 100px 0; }
.bpm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bpm-step { background: #fff; border-radius: var(--bpm-radius); padding: 30px 26px; border: 1px solid rgba(20,40,70,.06); position: relative; }
.bpm-step .bpm-tag { font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: 2.6rem; line-height: 1; color: rgba(23,78,140,.14); }
.bpm-step h4 { font-family: "Public Sans", system-ui, sans-serif; font-size: 1.18rem; font-weight: 800; color: var(--bpm-charcoal); margin-top: 6px; }
.bpm-step p { color: var(--bpm-muted); font-size: .92rem; margin-top: 8px; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.6; }
.bpm-step:nth-child(2) .bpm-tag { color: rgba(198,61,47,.16); }
.bpm-step:nth-child(3) .bpm-tag { color: rgba(79,168,61,.18); }
.bpm-step:nth-child(4) .bpm-tag { color: rgba(47,47,47,.14); }
@media (max-width: 900px) { .bpm-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bpm-steps { grid-template-columns: 1fr; } }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.bpm-testi { background: var(--bpm-charcoal); padding: 80px 0; }
.bpm-quote-wrap { max-width: 760px; margin-inline: auto; }
.bpm-quote-wrap blockquote { font-family: "Public Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.25rem, 2.5vw, 1.9rem); letter-spacing: -.02em; color: #fff; border-left: 3px solid var(--bpm-green); padding-left: 28px; line-height: 1.4; }
.bpm-quote-who { margin-top: 30px; display: flex; align-items: center; gap: 14px; padding-left: 31px; }
.bpm-quote-who i { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--bpm-blue); color: #fff; font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-style: normal; flex: none; }
.bpm-quote-who b { display: block; font-family: "Public Sans", system-ui, sans-serif; color: #fff; }
.bpm-quote-who span { color: rgba(255,255,255,.62); font-size: .9rem; }

/* ============================================================
   INTAKE — two-path CTA
   ============================================================ */
.bpm-intake { background: var(--bpm-neutral); padding: 72px 0; }
.bpm-intake-paths {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 820px; margin-inline: auto;
}
@media (max-width: 640px) { .bpm-intake-paths { grid-template-columns: 1fr; } }
.bpm-intake-path {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff; border-radius: var(--bpm-radius-lg); padding: 32px;
  border: 2px solid rgba(20,40,70,.08); text-decoration: none; color: inherit;
  transition: border-color .25s var(--bpm-ease), box-shadow .25s var(--bpm-ease), transform .25s var(--bpm-ease);
}
.bpm-intake-path:hover { border-color: var(--bpm-blue); box-shadow: var(--bpm-shadow-md); transform: translateY(-4px); }
.bpm-intake-path.guided:hover { border-color: var(--bpm-green); }
.bpm-path-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.bpm-path-icon svg { width: 26px; height: 26px; color: #fff; }
.bpm-intake-path h3 { font-family: "Public Sans", system-ui, sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--bpm-charcoal); line-height: 1.2; }
.bpm-intake-path p { color: var(--bpm-muted); font-size: .93rem; margin-top: 8px; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.5; }
.bpm-path-time { display: inline-block; margin-top: 14px; font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: .88rem; color: var(--bpm-blue); }
.bpm-intake-path.guided .bpm-path-time { color: var(--bpm-green); }
.bpm-intake-fine { text-align: center; color: var(--bpm-gray); font-size: .82rem; margin-top: 18px; font-family: "Merriweather Sans", system-ui, sans-serif; }

/* ============================================================
   FOOTER CTA BAND
   ============================================================ */
.bpm-footer-band {
  background: linear-gradient(130deg, var(--bpm-red-deep), var(--bpm-red));
  padding: 64px 0; text-align: center; position: relative; overflow: hidden;
}
.bpm-footer-band::before {
  content: ""; position: absolute; right: -80px; bottom: -80px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(79,168,61,.25), transparent 65%);
}
.bpm-footer-band::after {
  content: ""; position: absolute; left: -60px; top: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(23,78,140,.25), transparent 65%);
}
.bpm-footer-band h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; position: relative; z-index: 1; }
.bpm-footer-band p { color: rgba(255,255,255,.78); font-size: 1.05rem; margin-top: 12px; max-width: 50ch; margin-inline: auto; position: relative; z-index: 1; font-family: "Merriweather Sans", system-ui, sans-serif; }
.bpm-footer-band-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; position: relative; z-index: 1; }

/* ============================================================
   CTA + QUOTE FORM
   ============================================================ */
.bpm-cta { position: relative; overflow: hidden; padding: 100px 0; color: #fff; background: linear-gradient(130deg, var(--bpm-blue-deep), var(--bpm-blue) 55%, #1c63b0); }
.bpm-cta::before { content: ""; position: absolute; left: -100px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(198,61,47,.34), transparent 65%); }
.bpm-cta::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(79,168,61,.4), transparent 65%); }
.bpm-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.bpm-cta-copy h2 { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; color: #fff; }
.bpm-cta-copy p { color: rgba(255,255,255,.82); margin-top: 16px; font-size: 1.08rem; max-width: 42ch; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.6; }
.bpm-perks { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.bpm-perks span { display: flex; align-items: center; gap: 8px; font-family: "Public Sans", system-ui, sans-serif; font-weight: 700; font-size: .92rem; }
.bpm-perks svg { width: 18px; height: 18px; color: #7fd06d; }

.bpm-quote-form { background: #fff; border-radius: var(--bpm-radius-lg); padding: 34px; box-shadow: var(--bpm-shadow-lg); }
.bpm-quote-form h3 { font-family: "Public Sans", system-ui, sans-serif; color: var(--bpm-charcoal); font-size: 1.4rem; font-weight: 800; }
.bpm-quote-form .bpm-sub { color: var(--bpm-gray); font-size: .9rem; margin-top: 4px; font-family: "Merriweather Sans", system-ui, sans-serif; }
.bpm-field { margin-top: 16px; }
.bpm-field label { display: block; font-family: "Public Sans", system-ui, sans-serif; font-weight: 700; font-size: .82rem; color: var(--bpm-charcoal); margin-bottom: 7px; }
.bpm-field input, .bpm-field select {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid rgba(20,40,70,.14);
  font-family: "Merriweather Sans", system-ui, sans-serif; font-size: .95rem; color: var(--bpm-ink);
  background: var(--bpm-neutral); transition: border .2s, box-shadow .2s;
}
.bpm-field input:focus, .bpm-field select:focus { outline: none; border-color: var(--bpm-blue); box-shadow: 0 0 0 4px rgba(23,78,140,.12); background: #fff; }
.bpm-quote-form .bpm-btn { width: 100%; justify-content: center; margin-top: 22px; }
.bpm-quote-form .bpm-fine { text-align: center; color: var(--bpm-gray); font-size: .78rem; margin-top: 14px; font-family: "Merriweather Sans", system-ui, sans-serif; }
@media (max-width: 900px) { .bpm-cta-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.bpm-foot { background: var(--bpm-charcoal); color: rgba(255,255,255,.72); padding: 70px 0 34px; }
.bpm-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }

/* Wordmark */
.bpm-foot-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-bottom: 16px; }
.bpm-foot-burst { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; }
.bpm-foot-burst i { width: 5px; height: 5px; border-radius: 1px; display: block; font-style: normal; animation: bpm-floaty 7s var(--bpm-ease) infinite; }
.bpm-foot-burst i:nth-child(2) { animation-delay: .4s; }
.bpm-foot-burst i:nth-child(4) { animation-delay: .8s; }
.bpm-foot-burst i:nth-child(6) { animation-delay: 1.2s; }
.bpm-foot-burst i:nth-child(8) { animation-delay: 1.6s; }
.bpm-foot-wm { font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; }
.bpm-foot-wm-biz { color: #6ea4e6; }
.bpm-foot-wm-media { color: #f08070; }
.bpm-foot-blurb { font-size: .92rem; max-width: 32ch; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.6; }

/* Column headings */
.bpm-foot h5 { font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }

/* Nav links */
.bpm-foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.bpm-foot-links a { font-size: .93rem; color: rgba(255,255,255,.72); text-decoration: none; font-family: "Merriweather Sans", system-ui, sans-serif; transition: color .2s; }
.bpm-foot-links a:hover { color: #fff; }
.bpm-foot-address { font-style: normal; font-size: .93rem; color: rgba(255,255,255,.72); font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.8; }
.bpm-foot-tel { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
.bpm-foot-tel:hover { color: #fff; }
.bpm-foot-legal { display: flex; gap: 16px; }
.bpm-foot-legal a { font-size: .85rem; color: rgba(255,255,255,.5); text-decoration: none; font-family: "Public Sans", system-ui, sans-serif; transition: color .2s; }
.bpm-foot-legal a:hover { color: rgba(255,255,255,.72); }

/* Bottom bar */
.bpm-foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 50px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: rgba(255,255,255,.5); font-family: "Public Sans", system-ui, sans-serif; }

/* Social icons */
.bpm-foot-socials { display: flex; gap: 10px; }
.bpm-foot-socials a { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .2s, transform .2s; }
.bpm-foot-socials a:hover { background: var(--bpm-green); transform: translateY(-2px); }
.bpm-foot-socials svg { width: 17px; height: 17px; color: #fff; }

@media (max-width: 820px) { .bpm-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .bpm-foot-grid { grid-template-columns: 1fr; } .bpm-foot-bottom { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   SHARED SECTION UTILITIES
   ============================================================ */
.bpm-section-title { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: var(--bpm-charcoal); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 12px; }
.bpm-section-sub { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: 1.05rem; color: var(--bpm-muted); line-height: 1.65; max-width: 54ch; margin-top: 12px; }

/* Checklist */
.bpm-check-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.bpm-check-list li { display: flex; align-items: flex-start; gap: 12px; font-family: "Merriweather Sans", system-ui, sans-serif; font-size: .97rem; color: var(--bpm-ink); line-height: 1.65; }
.bpm-check-list li svg { width: 18px; height: 18px; color: var(--bpm-green); flex: none; margin-top: 3px; }

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.bpm-service-included { background: var(--bpm-neutral); padding: 80px 0; }
.bpm-service-who { background: #fff; padding: 80px 0; }
.bpm-service-diff { background: var(--bpm-charcoal); padding: 80px 0; }
.bpm-service-diff .bpm-section-title { color: #fff; }
.bpm-service-diff .bpm-kicker { color: var(--bpm-green); }
.bpm-service-diff p { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: 1rem; color: rgba(255,255,255,.78); line-height: 1.8; margin-bottom: 16px; }
.bpm-service-diff p:last-child { margin-bottom: 0; }
.bpm-service-pricing { background: var(--bpm-neutral); padding: 60px 0; }
.bpm-price-note { background: #fff; border-left: 3px solid var(--bpm-blue); border-radius: 0 var(--bpm-radius) var(--bpm-radius) 0; padding: 24px 28px; max-width: 740px; margin-inline: auto; box-shadow: var(--bpm-shadow-sm); }
.bpm-price-note p { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: .97rem; color: var(--bpm-muted); line-height: 1.75; margin: 0; }
.bpm-price-note strong { display: block; font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; color: var(--bpm-charcoal); font-size: 1rem; margin-bottom: 8px; }

/* Automation examples grid */
.bpm-examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.bpm-example { background: #fff; border-radius: var(--bpm-radius); padding: 22px 20px; border: 1px solid rgba(20,40,70,.08); }
.bpm-example-label { font-family: "Public Sans", system-ui, sans-serif; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--bpm-green); margin-bottom: 10px; }
.bpm-example h4 { font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: .93rem; color: var(--bpm-charcoal); margin-bottom: 8px; line-height: 1.3; }
.bpm-example p { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: .87rem; color: var(--bpm-muted); line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .bpm-examples-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bpm-examples-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Hero */
.bpm-about-hero { background: linear-gradient(160deg, #1a1d22, var(--bpm-charcoal) 55%, #202326); padding: 80px 0 70px; }
.bpm-about-hero .bpm-kicker { color: var(--bpm-green); }
.bpm-about-hero-title { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; letter-spacing: -.03em; line-height: 1.05; margin-top: 14px; }
.bpm-about-dot { color: var(--bpm-green); }
.bpm-about-hero-lead { color: rgba(255,255,255,.72); font-size: 1.12rem; max-width: 52ch; margin-top: 20px; font-family: "Merriweather Sans", system-ui, sans-serif; line-height: 1.75; }

/* Narrative body */
.bpm-about-story { background: #fff; padding: 80px 0 90px; }
.bpm-about-narrative { }
.bpm-about-narrative h2 { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 900; color: var(--bpm-charcoal); letter-spacing: -.025em; margin-top: 56px; margin-bottom: 18px; }
.bpm-about-narrative h2:first-child { margin-top: 0; }
.bpm-about-narrative p { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: 1rem; color: var(--bpm-ink); line-height: 1.82; margin-bottom: 18px; }
.bpm-about-narrative p:last-child { margin-bottom: 0; }
.bpm-about-narrative strong { font-weight: 700; color: var(--bpm-charcoal); }

/* Service mini-cards (inside narrative) */
.bpm-about-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 8px; }
.bpm-about-svc { background: var(--bpm-neutral); border-radius: var(--bpm-radius); padding: 22px 18px; border-left: 3px solid var(--bpm-blue); }
.bpm-about-svc.green { border-left-color: var(--bpm-green); }
.bpm-about-svc.red { border-left-color: var(--bpm-red); }
.bpm-about-svc h4 { font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: .92rem; color: var(--bpm-charcoal); margin-bottom: 10px; }
.bpm-about-svc p { font-size: .88rem; color: var(--bpm-muted); line-height: 1.65; margin-bottom: 0; }
@media (max-width: 640px) { .bpm-about-svc-grid { grid-template-columns: 1fr; } }

/* "One person" callout box */
.bpm-about-callout { background: var(--bpm-charcoal); border-radius: var(--bpm-radius-lg); padding: 40px 44px; margin: 52px 0; }
.bpm-about-callout h2 { color: #fff; margin-top: 0; font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.bpm-about-callout p { color: rgba(255,255,255,.78); }
.bpm-about-callout strong { color: #fff; }
@media (max-width: 600px) { .bpm-about-callout { padding: 28px 22px; } }

/* Quick facts strip */
.bpm-about-facts-strip { background: var(--bpm-neutral); padding: 60px 0; border-top: 1px solid rgba(20,40,70,.08); }
.bpm-about-facts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 900px; margin-inline: auto; text-align: center; }
.bpm-about-fact strong { display: block; font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: 2rem; color: var(--bpm-blue); letter-spacing: -.04em; line-height: 1; }
.bpm-about-fact span { display: block; font-size: .82rem; color: var(--bpm-muted); font-family: "Merriweather Sans", system-ui, sans-serif; margin-top: 8px; line-height: 1.5; }
@media (max-width: 700px) { .bpm-about-facts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 440px) { .bpm-about-facts-grid { grid-template-columns: repeat(2, 1fr); } }

/* About CTA */
.bpm-about-cta { background: #fff; padding: 80px 0; text-align: center; border-top: 1px solid rgba(20,40,70,.08); }
.bpm-about-cta h2 { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: var(--bpm-charcoal); letter-spacing: -.02em; }
.bpm-about-cta p { color: var(--bpm-muted); font-size: 1.05rem; margin-top: 14px; font-family: "Merriweather Sans", system-ui, sans-serif; max-width: 44ch; margin-inline: auto; line-height: 1.6; }
.bpm-about-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.kadence-mobile-nav .menu-item > a,
.kadence-mobile-nav .menu-item > a:visited {
    color: #fff;
}
.kadence-mobile-nav .menu-item > a:hover,
.kadence-mobile-nav .menu-item > a:focus {
    color: rgba(255,255,255,.72);
}

/* ============================================================
   CASE STUDIES — SINGLE
   ============================================================ */
.bpm-cs-hero { background: linear-gradient(160deg, #1a1d22, var(--bpm-charcoal) 55%, #202326); padding: 80px 0 70px; }
.bpm-cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bpm-cs-tag { display: inline-block; font-family: "Public Sans", system-ui, sans-serif; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--bpm-green); background: rgba(127,208,109,.12); border: 1px solid rgba(127,208,109,.25); border-radius: 100px; padding: 4px 12px; }
.bpm-cs-hero-title { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 14px; }
.bpm-cs-hero-client { font-family: "Public Sans", system-ui, sans-serif; font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 18px; }
.bpm-cs-hero-lead { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: 1.12rem; color: rgba(255,255,255,.72); line-height: 1.75; max-width: 56ch; margin: 0; }

.bpm-cs-results { background: var(--bpm-neutral); padding: 50px 0; border-bottom: 1px solid rgba(20,40,70,.08); }
.bpm-cs-results-grid { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; }
.bpm-cs-result { text-align: center; min-width: 140px; }
.bpm-cs-result strong { display: block; font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: 2.4rem; color: var(--bpm-blue); letter-spacing: -.04em; line-height: 1; }
.bpm-cs-result span { display: block; font-family: "Merriweather Sans", system-ui, sans-serif; font-size: .82rem; color: var(--bpm-muted); margin-top: 8px; line-height: 1.5; }

.bpm-cs-body { background: #fff; padding: 80px 0 90px; }
.bpm-cs-body .bpm-narrow-text h2 { font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 900; color: var(--bpm-charcoal); letter-spacing: -.025em; margin-top: 48px; margin-bottom: 16px; }
.bpm-cs-body .bpm-narrow-text h2:first-child { margin-top: 0; }
.bpm-cs-body .bpm-narrow-text p { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: 1rem; color: var(--bpm-ink); line-height: 1.82; margin-bottom: 18px; }
.bpm-cs-body .bpm-narrow-text p:last-child { margin-bottom: 0; }
.bpm-cs-body .bpm-narrow-text strong { font-weight: 700; color: var(--bpm-charcoal); }

.bpm-cs-service-cta { background: var(--bpm-neutral); padding: 40px 0; border-top: 1px solid rgba(20,40,70,.08); }
.bpm-cs-service-label { font-family: "Public Sans", system-ui, sans-serif; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--bpm-muted); margin-bottom: 10px; }
.bpm-cs-service-link { font-family: "Public Sans", system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--bpm-blue); text-decoration: none; }
.bpm-cs-service-link:hover { text-decoration: underline; }

/* ============================================================
   CASE STUDIES — ARCHIVE
   ============================================================ */
.bpm-cs-archive-hero { background: linear-gradient(160deg, #1a1d22, var(--bpm-charcoal) 55%, #202326); padding: 80px 0 70px; }

.bpm-cs-filter-bar { background: #fff; padding: 22px 0; border-bottom: 1px solid rgba(20,40,70,.08); }
.bpm-cs-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.bpm-cs-filter-btn { font-family: "Public Sans", system-ui, sans-serif; font-size: .8rem; font-weight: 700; color: var(--bpm-muted); text-decoration: none; border: 1px solid rgba(20,40,70,.15); border-radius: 100px; padding: 6px 16px; transition: background .2s, color .2s, border-color .2s; }
.bpm-cs-filter-btn:hover, .bpm-cs-filter-btn.active { background: var(--bpm-charcoal); color: #fff; border-color: var(--bpm-charcoal); }

.bpm-cs-archive-body { background: var(--bpm-neutral); padding: 70px 0 90px; }
.bpm-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bpm-cs-card { background: #fff; border-radius: var(--bpm-radius); overflow: hidden; border: 1px solid rgba(20,40,70,.08); box-shadow: var(--bpm-shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.bpm-cs-card:hover { transform: translateY(-3px); box-shadow: var(--bpm-shadow); }
.bpm-cs-card-thumb { display: block; }
.bpm-cs-card-thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }
.bpm-cs-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.bpm-cs-card-title { font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: 1.05rem; color: var(--bpm-charcoal); letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.bpm-cs-card-title a { color: inherit; text-decoration: none; }
.bpm-cs-card-title a:hover { color: var(--bpm-blue); }
.bpm-cs-card-excerpt { font-family: "Merriweather Sans", system-ui, sans-serif; font-size: .88rem; color: var(--bpm-muted); line-height: 1.65; margin: 0; }
.bpm-cs-card-metric { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(20,40,70,.08); }
.bpm-cs-card-metric strong { display: block; font-family: "Public Sans", system-ui, sans-serif; font-weight: 900; font-size: 1.5rem; color: var(--bpm-blue); letter-spacing: -.03em; line-height: 1; }
.bpm-cs-card-metric span { font-size: .78rem; color: var(--bpm-muted); font-family: "Merriweather Sans", system-ui, sans-serif; }
.bpm-cs-card-link { display: inline-block; font-family: "Public Sans", system-ui, sans-serif; font-size: .85rem; font-weight: 700; color: var(--bpm-blue); text-decoration: none; margin-top: 4px; }
.bpm-cs-card-link:hover { text-decoration: underline; }

.bpm-cs-pagination { margin-top: 48px; text-align: center; }
.bpm-cs-pagination .nav-links { display: inline-flex; gap: 6px; }
.bpm-cs-pagination a.page-numbers, .bpm-cs-pagination span.page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--bpm-radius); font-family: "Public Sans", sans-serif; font-size: .9rem; font-weight: 700; color: var(--bpm-charcoal); text-decoration: none; border: 1px solid rgba(20,40,70,.15); transition: background .2s, color .2s; }
.bpm-cs-pagination span.current, .bpm-cs-pagination a.page-numbers:hover { background: var(--bpm-charcoal); color: #fff; border-color: var(--bpm-charcoal); }

.bpm-cs-empty { font-family: "Merriweather Sans", system-ui, sans-serif; color: var(--bpm-muted); text-align: center; padding: 60px 0; }

@media (max-width: 900px) { .bpm-cs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .bpm-cs-grid { grid-template-columns: 1fr; } }