/* ── KDEP Brownfields Dashboard — theme overrides & brownfields components ── */

/* Override KDEM color variables for the brownfields theme */
:root {
  --kdem-accent:    #5d4037;
  --kdem-panel-hdr: #307918;

  /* Brownfield status colors */
  --bf-assessment: #1565c0;
  --bf-cleanup:    #e65100;
  --bf-complete:   #2e7d32;
  --bf-unknown:    #546e7a;
}

/* ── Hero image override ─────────────────────────────────────────────── */

.kdep-bf-landing {
  background: linear-gradient(135deg, #2f672b 0%, #2e7d32 50%, #236a27 100%) !important;
}

/* ── Dashboard grid override ─────────────────────────────────────────── */

.kdep-bf-dashboard {
  grid-template-columns: 1fr minmax(280px, 340px);
  grid-template-rows: 1fr auto;
  height: calc(100vh - 320px);
  /* Ensure alerts (~300px) + facebook (420px) always fit, even on short viewports.
     Without this, calc() can leave 0px for the alerts row. */
  min-height: 740px;
  grid-template-areas:
    "map alerts"
    "map facebook";
}

/* Alerts panel: bounded by its grid row; content scrolls inside via .kdem-alerts-list. */
.kdep-bf-dashboard .kdem-panel--alerts {
  min-height: 0;
  overflow: hidden;
}

/* ── Brownfield site cards ───────────────────────────────────────────── */

.kdep-bf-card {
  border-left: 4px solid var(--bf-unknown);
  border-radius: 0 6px 6px 0;
  background: #fafafa;
  padding: 9px 11px;
  font-size: 0.82rem;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 0.15s, opacity 0.15s;
}

.kdep-bf-card:hover  { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.kdep-bf-card:active { opacity: 0.8; }

.kdep-bf-card--assessment { border-left-color: var(--bf-assessment); background: #e8f0fe; }
.kdep-bf-card--cleanup    { border-left-color: var(--bf-cleanup);    background: #fff3e0; }
.kdep-bf-card--complete   { border-left-color: var(--bf-complete);   background: #e8f5e9; }
.kdep-bf-card--unknown    { border-left-color: var(--bf-unknown);    background: #fafafa; }

/* Card header row: site name + badges */
.kdep-bf-card__header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

/* Full-basis, so the name takes a line of its own and the status/funding
   badges wrap underneath it. With `flex: 1` the name shared the row with a
   nowrap badge as long as "CLEANUP / REMEDIATION UNDERWAY" (~200px) — in a
   column that is only ever 280-340px wide, that squeezed the name down to
   one word per line. */
.kdep-bf-card__name {
  font-weight: 700;
  font-size: 0.87rem;
  flex: 1 1 100%;
  min-width: 0;
}

.kdep-bf-card--assessment .kdep-bf-card__name { color: var(--bf-assessment); }
.kdep-bf-card--cleanup    .kdep-bf-card__name { color: var(--bf-cleanup);    }
.kdep-bf-card--complete   .kdep-bf-card__name { color: #1b5e20; }
.kdep-bf-card--unknown    .kdep-bf-card__name { color: var(--bf-unknown);    }

/* Status badge */
.kdep-bf-badge {
  flex-shrink: 0;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.kdep-bf-badge--assessment { background: var(--bf-assessment); }
.kdep-bf-badge--cleanup    { background: var(--bf-cleanup);    }
.kdep-bf-badge--complete   { background: var(--bf-complete);   }
.kdep-bf-badge--unknown    { background: var(--bf-unknown);    }

/* Funding source badge */
.kdep-bf-funding {
  flex-shrink: 0;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.kdep-bf-funding--r    { background: #ede7f6; color: #4527a0; border: 1px solid #b39ddb; }
.kdep-bf-funding--iija { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }

/* Location & size line */
.kdep-bf-card__location {
  color: var(--kdem-muted);
  font-size: 0.78rem;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kdep-bf-card__acres {
  color: var(--kdem-muted);
  font-size: 0.75rem;
  margin-bottom: 4px;
}

/* Suspected contaminants line */
.kdep-bf-card__contaminants {
  color: #555;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

/* Description (truncatable) */
.kdep-bf-card__desc {
  margin-top: 4px;
  color: #444;
  font-size: 0.80rem;
}

.kdep-bf-card__desc--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kdep-bf-card__desc--expanded {
  display: block;
}

.kdep-bf-card__more {
  display: inline-block;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.76rem;
  color: var(--kdem-accent);
  cursor: pointer;
  text-decoration: underline;
}

.kdep-bf-card__more + .kdep-bf-card__more { margin-left: 12px; }

/* Remaining Brownfields layer fields, hidden until "Site details" is clicked */
.kdep-bf-card__details {
  display: none;
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: #444;
}

.kdep-bf-card__details--open { display: block; }

/* Label over value: the side panel is too narrow for two columns */
.kdep-bf-card__details dt { font-weight: 600; color: #555; }
.kdep-bf-card__details dd { margin: 0 0 4px; overflow-wrap: anywhere; }

/* ── "Show all sites" expander ───────────────────────────────────────────
   Phone-only, and hidden entirely on the desktop layout, where the panel is
   bounded by its grid row and the list scrolls inside it.

   On mobile that bounded-scroll behaviour isn't available: the dashboard
   stacks and every panel grows to fit, so the full site list would push the
   About and glossary sections thousands of pixels down the page. Capping the
   panel and keeping the internal scroll would trade that for a two-card
   window inside a scrolling page — a nested scroll region is the harder of
   the two to use on a touch screen, and it hides the same content behind a
   less obvious gesture. Showing the most urgent few with an inline expander
   avoids both: cards stay full-size, the page stays navigable, and nothing
   scrolls except the page. The list arrives sorted cleanup → assessment →
   unknown → complete, so the visible ones are the ones that matter.
   ────────────────────────────────────────────────────────────────────── */

.kdep-bf-showall { display: none; }

/* Empty / error states (reuse kdem-no-alerts structure) */
.kdep-bf-empty i {
  display: block;
  font-size: 2rem;
  margin-bottom: 8px;
  color: #a5c8a5;
}

/* ──────────────────────────────────────────────────────────────────────
   Glossary section ("First time here?")
   ----------------------------------------------------------------------
   Design notes:
   - Anti-card-overuse: terms use definition lists with hairline dividers,
     not bordered boxes. Cards reserved for true hierarchy (the hero term).
   - Asymmetric: numbered cluster rail (left) + definitions (right).
   - Single accent: KDEP green, desaturated. Status-color dots only on
     lifecycle stages where they aid map cross-reference.
   - Outfit typography, weight-based hierarchy, generous spacing.
   ────────────────────────────────────────────────────────────────────── */

/* Local theme bridge: map the brownfields accent into the public-base
   accent slot so any base-styled element inherits the right hue. */
.bf-glossary {
  --pb-accent:        #3d6b2d;   /* desaturated KDEP green */
  --pb-accent-soft:   #e8f0e3;
  --pb-accent-bg:     #f5f8f3;
  --pb-accent-ink:    #1f3517;
  --pb-focus-ring:    0 0 0 3px rgba(61, 107, 45, 0.32);

  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 48px auto 56px;
  padding: 0 24px;
  font-family: var(--pb-font-sans);
  color: var(--pb-text);
  clear: both;
}

/* ── Widget container: the bordered "card" frame ───────────────── */

.bf-glossary__panel {
  background: var(--pb-bg);
  border: 1px solid var(--pb-divider);
  border-radius: var(--pb-radius-2xl);
  box-shadow: var(--pb-shadow-md);
  overflow: hidden;
  transition: box-shadow var(--pb-dur) var(--pb-ease);
}

.bf-glossary__panel:hover {
  box-shadow: var(--pb-shadow-lg);
}

/* ── Lede (widget header face): always visible, even when collapsed ── */

.bf-glossary__lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px;
  padding: 36px 44px;
}

.bf-glossary__lede-text {
  min-width: 0;
}

.bf-glossary__eyebrow {
  font-size: var(--pb-text-xs);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pb-accent);
  margin-bottom: 12px;
}

.bf-glossary__heading {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--pb-tracking-tight);
  color: var(--pb-text);
}

.bf-glossary__heading-soft {
  font-weight: 400;
  color: var(--pb-text-soft);
}

.bf-glossary__sub {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: var(--pb-text-base);
  line-height: 1.6;
  color: var(--pb-text-soft);
}

/* Toggle — top-right of widget header */
.bf-glossary__toggle {
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 16px;
  font-family: inherit;
  font-size: var(--pb-text-sm);
  font-weight: 500;
  color: var(--pb-text-soft);
  background: var(--pb-bg);
  border: 1px solid var(--pb-divider);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color    var(--pb-dur)      var(--pb-ease),
    border   var(--pb-dur)      var(--pb-ease),
    transform var(--pb-dur-fast) var(--pb-ease),
    box-shadow var(--pb-dur)    var(--pb-ease);
}

.bf-glossary__toggle:hover {
  color: var(--pb-text);
  border-color: var(--pb-border);
  transform: translateY(-1px);
  box-shadow: var(--pb-shadow-sm);
}

.bf-glossary__toggle:active { transform: translateY(0); }

.bf-glossary__toggle:focus-visible {
  outline: none;
  box-shadow: var(--pb-focus-ring);
}

.bf-glossary__toggle-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--pb-dur) var(--pb-ease);
}

.bf-glossary__toggle[aria-expanded="false"] .bf-glossary__toggle-icon {
  transform: rotate(-90deg);
}

/* ── Body container ──────────────────────────────────────────── */

.bf-glossary__body {
  border-top: 1px solid var(--pb-divider);
  padding: 40px 44px 44px;
  background: var(--pb-bg);
}

.bf-glossary__body[hidden] { display: none; }

/* ── Hero term: featured definition inside the widget ─────────── */
/* Anti card-in-card: no border or shadow here since the panel already
   has them. Just a tinted background + rounded inner block. */
.bf-glossary__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  padding: 32px 36px;
  background:
    linear-gradient(180deg, var(--pb-accent-bg) 0%, var(--pb-surface) 100%);
  border-radius: var(--pb-radius-xl);
  margin-bottom: 48px;
}

.bf-glossary__hero-label {
  font-size: var(--pb-text-xs);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pb-accent);
  align-self: start;
}

.bf-glossary__hero-term {
  grid-column: 1;
  margin: 6px 0 0;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--pb-tracking-tight);
  color: var(--pb-text);
}

.bf-glossary__hero-def {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  font-size: var(--pb-text-lg);
  line-height: 1.55;
  color: var(--pb-text);
  max-width: 60ch;
}

/* ── Clusters: numbered rail + definition list ─────────────────── */

.bf-glossary__cluster {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  padding: 48px 0;
  border-top: 1px solid var(--pb-divider);
}

.bf-glossary__cluster:first-of-type { border-top: none; padding-top: 8px; }

.bf-glossary__cluster-rail {
  position: sticky;
  top: 24px;
  align-self: start;
}

.bf-glossary__cluster-num {
  font-family: var(--pb-font-mono);
  font-size: var(--pb-text-sm);
  font-weight: 500;
  color: var(--pb-text-faint);
  letter-spacing: 0;
}

.bf-glossary__cluster-label {
  margin-top: 12px;
  font-size: var(--pb-text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--pb-tracking-tight);
  color: var(--pb-text);
}

.bf-glossary__cluster-hint {
  margin: 12px 0 0;
  font-size: var(--pb-text-sm);
  line-height: 1.55;
  color: var(--pb-text-muted);
  max-width: 28ch;
}

.bf-glossary__deflist {
  margin: 0;
  padding: 0;
}

.bf-glossary__row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 40px;
  padding: 22px 0;
  border-top: 1px solid var(--pb-divider);
  transition: background var(--pb-dur) var(--pb-ease);
}

.bf-glossary__row:first-child { border-top: none; padding-top: 6px; }

.bf-glossary__row dt {
  position: relative;
  font-size: var(--pb-text-base);
  font-weight: 600;
  color: var(--pb-text);
  letter-spacing: var(--pb-tracking-tight);
  padding-left: 14px;
}

/* Status dot for lifecycle terms — visual link to the map legend */
.bf-glossary__row dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pb-divider);
  transition: background var(--pb-dur) var(--pb-ease);
}

.bf-glossary__row[data-accent="assessment"] dt::before { background: var(--bf-assessment); }
.bf-glossary__row[data-accent="cleanup"]    dt::before { background: var(--bf-cleanup);    }
.bf-glossary__row[data-accent="complete"]   dt::before { background: var(--bf-complete);   }

.bf-glossary__row dd {
  margin: 0;
  font-size: var(--pb-text-base);
  line-height: 1.65;
  color: var(--pb-text-soft);
}

.bf-glossary__row dd em {
  font-style: normal;
  font-weight: 500;
  color: var(--pb-text);
}

.bf-glossary__row dd strong {
  font-weight: 600;
  color: var(--pb-text);
}

/* ── Outro: external resource links ───────────────────────────── */

.bf-glossary__outro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
  padding: 28px 0 0;
  border-top: 1px solid var(--pb-divider);
}

.bf-glossary__outro-label {
  font-size: var(--pb-text-xs);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pb-text-muted);
}

.bf-glossary__outro a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--pb-text-sm);
  font-weight: 500;
  color: var(--pb-text);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pb-border);
  transition:
    color var(--pb-dur) var(--pb-ease),
    border-color var(--pb-dur) var(--pb-ease),
    transform var(--pb-dur-fast) var(--pb-ease);
}

.bf-glossary__outro a:hover {
  color: var(--pb-accent);
  border-color: var(--pb-accent);
  transform: translateY(-1px);
}

.bf-glossary__outro a:active { transform: translateY(0); }

.bf-glossary__outro a svg {
  width: 12px;
  height: 12px;
  transition: transform var(--pb-dur) var(--pb-ease);
}

.bf-glossary__outro a:hover svg {
  transform: translate(2px, -2px);
}

/* ── Responsive: collapse the rail and grids on narrower screens ── */

@media (max-width: 960px) {
  .bf-glossary { margin: 36px auto 48px; padding: 0 20px; }

  .bf-glossary__lede {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 28px 28px 24px;
  }
  .bf-glossary__toggle {
    justify-self: start;
    margin-top: 4px;
  }

  .bf-glossary__body {
    padding: 28px 28px 32px;
  }

  .bf-glossary__hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 24px;
  }
  .bf-glossary__hero-def {
    grid-column: 1;
    grid-row: auto;
    font-size: var(--pb-text-base);
  }

  .bf-glossary__cluster {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0;
  }
  .bf-glossary__cluster-rail { position: static; }
  .bf-glossary__cluster-hint { max-width: none; }

  .bf-glossary__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
}

@media (max-width: 560px) {
  .bf-glossary { padding: 0 12px; }
  .bf-glossary__panel { border-radius: var(--pb-radius-xl); }
  .bf-glossary__lede { padding: 22px 20px 20px; }
  .bf-glossary__body { padding: 24px 20px 28px; }
  .bf-glossary__hero { padding: 20px 18px; border-radius: var(--pb-radius-lg); }
  .bf-glossary__outro { gap: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────
   "New here?" help chip — sits in the landing card, smooth-scrolls to
   the glossary section below. Quieter visual weight than the external
   resource buttons so it reads as a tip, not a primary action.
   ────────────────────────────────────────────────────────────────────── */

.kdep-bf-help {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 18px 10px 14px;
  font-family: inherit;
  text-decoration: none;
  color: #1f3517;
  background: #e8f0e3;
  border: 1px solid rgba(61, 107, 45, 0.18);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kdep-bf-help:hover {
  background: #dbe7d2;
  border-color: rgba(61, 107, 45, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(61, 107, 45, 0.45);
}

.kdep-bf-help:active { transform: translateY(0); }

.kdep-bf-help:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 107, 45, 0.32);
}

.kdep-bf-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3d6b2d;
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.kdep-bf-help__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  text-align: left;
}

.kdep-bf-help__lead {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #1f3517;
}

.kdep-bf-help__sub {
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #4a6a3f;
}

.kdep-bf-help__arrow {
  width: 14px;
  height: 14px;
  color: #3d6b2d;
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kdep-bf-help:hover .kdep-bf-help__arrow {
  transform: translateY(3px);
}

@media (max-width: 480px) {
  .kdep-bf-help { width: 100%; justify-content: center; }
  .kdep-bf-help__text { align-items: center; text-align: center; }
}

/* Honor scroll preferences for users who set reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

/* ── Responsive overrides ────────────────────────────────────────────── */

@media (max-width: 700px) {
  .kdep-bf-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    /* `height` — not just `min-height` — has to go. The desktop rule pins
       the grid to calc(100vh - 320px) (~520px on a phone) while the three
       stacked panels need ~1160px, so the panels overflowed a box that
       stayed 520px tall. Everything after the dashboard laid out against
       that short box: "About the program" started ~180px above the end of
       the alerts panel and, being z-index:1 with a white background,
       painted straight over the alerts and Facebook widgets. */
    height: auto;
    min-height: unset;
    grid-template-areas:
      "map"
      "alerts"
      "facebook";
  }

  .kdep-bf-dashboard .kdem-panel--map      { min-height: 360px; }
  .kdep-bf-dashboard .kdem-panel--alerts   { min-height: 360px; }
  .kdep-bf-dashboard .kdem-panel--facebook { min-height: 420px; }

  /* Cards past the preview count are hidden until the reader expands. */
  .kdep-bf-list--clampable:not(.kdep-bf-list--expanded) .kdep-bf-card:nth-child(n+4) {
    display: none;
  }

  /* Sibling of the list, so it sits between the cards and the panel footer
     rather than inside the scroll area. */
  .kdep-bf-list--clampable + .kdep-bf-showall {
    display: block;
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 11px 12px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f3517;
    background: #f1f5f0;
    border: 1px solid rgba(61, 107, 45, 0.22);
    border-radius: 6px;
    cursor: pointer;
  }

  .kdep-bf-list--clampable + .kdep-bf-showall:active { background: #e4ebe1; }

  .kdep-bf-glossary        { padding: 0 8px; }
  .kdep-bf-glossary__body  { padding: 14px 16px; }
}

/* ──────────────────────────────────────────────────────────────────────
   "Report a Brownfield" — primary CTA variant of the landing card link.
   Filled KDEP-green vs. the default outlined-black links, so the most
   important action visually leads.
   ────────────────────────────────────────────────────────────────────── */

.kdem-landing__link--report {
  background: #3d6b2d;
  color: #fff;
  border-color: #3d6b2d;
  box-shadow: 0 4px 12px -4px rgba(61, 107, 45, 0.45);
}

.kdem-landing__link--report:hover {
  background: #2f5424;
  color: #fff;
  border-color: #2f5424;
}

/* ──────────────────────────────────────────────────────────────────────
   "About the program" section
   ----------------------------------------------------------------------
   Sits between the dashboard and the glossary. Same panel chrome as the
   glossary so the page reads as two sibling modules; internally it uses
   a softer cluster pattern (no sticky rail) since each subsection has
   its own distinct content shape (goals list / examples grid / benefits).
   ────────────────────────────────────────────────────────────────────── */

.bf-about {
  --pb-accent:        #3d6b2d;
  --pb-accent-soft:   #e8f0e3;
  --pb-accent-bg:     #f5f8f3;
  --pb-accent-ink:    #1f3517;

  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 48px auto 0;
  padding: 0 24px;
  font-family: var(--pb-font-sans);
  color: var(--pb-text);
  clear: both;
}

.bf-about__panel {
  background: var(--pb-bg);
  border: 1px solid var(--pb-divider);
  border-radius: var(--pb-radius-2xl);
  box-shadow: var(--pb-shadow-md);
  overflow: hidden;
  transition: box-shadow var(--pb-dur) var(--pb-ease);
}

.bf-about__panel:hover {
  box-shadow: var(--pb-shadow-lg);
}

/* ── Lede ─────────────────────────────────────────────────────────── */

.bf-about__lede {
  padding: 36px 44px 28px;
  border-bottom: 1px solid var(--pb-divider);
}

.bf-about__eyebrow {
  font-size: var(--pb-text-xs);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pb-accent);
  margin-bottom: 12px;
}

.bf-about__heading {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--pb-tracking-tight);
  color: var(--pb-text);
}

.bf-about__sub {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: var(--pb-text-base);
  line-height: 1.6;
  color: var(--pb-text-soft);
}

/* ── Cluster shell ────────────────────────────────────────────────── */

.bf-about__cluster {
  padding: 40px 44px;
  border-top: 1px solid var(--pb-divider);
}

.bf-about__cluster:first-of-type {
  border-top: none;
}

.bf-about__cluster-title {
  margin: 0 0 10px;
  font-size: var(--pb-text-xl);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-tight);
  color: var(--pb-text);
}

.bf-about__cluster-lede {
  margin: 0 0 4px;
  max-width: 62ch;
  font-size: var(--pb-text-base);
  line-height: 1.6;
  color: var(--pb-text-soft);
}

/* ── Goals (two-column numbered list) ─────────────────────────────── */

.bf-about__goals {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 40px;
}

.bf-about__goals li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--pb-divider);
}

.bf-about__goals li:nth-child(-n+2) {
  border-top: none;
  padding-top: 6px;
}

.bf-about__goal-num {
  font-family: var(--pb-font-mono);
  font-size: var(--pb-text-sm);
  font-weight: 500;
  color: var(--pb-accent);
  padding-top: 3px;
}

.bf-about__goal-text {
  font-size: var(--pb-text-base);
  line-height: 1.6;
  color: var(--pb-text-soft);
}

.bf-about__goal-text strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--pb-text);
}

/* ── Examples (4-up grid of small tinted cards) ───────────────────── */

.bf-about__examples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.bf-about__example {
  background: var(--pb-accent-bg);
  border: 1px solid var(--pb-accent-soft);
  border-radius: var(--pb-radius-lg);
  padding: 20px 18px;
}

.bf-about__example-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--pb-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 14px;
  border: 1px solid var(--pb-accent-soft);
}

.bf-about__example-name {
  font-weight: 600;
  font-size: var(--pb-text-base);
  line-height: 1.3;
  color: var(--pb-text);
  margin-bottom: 6px;
}

.bf-about__example-note {
  font-size: var(--pb-text-sm);
  line-height: 1.5;
  color: var(--pb-text-soft);
}

/* ── Contaminants chip strip ──────────────────────────────────────── */

.bf-about__contaminants {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
}

.bf-about__contaminants-label {
  font-size: var(--pb-text-xs);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pb-text-muted);
  margin-right: 4px;
}

.bf-about__contam-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-divider);
  color: var(--pb-text);
  font-weight: 500;
  font-size: var(--pb-text-xs);
}

/* ── Benefits list (icon + line) ──────────────────────────────────── */

.bf-about__benefits {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.bf-about__benefits li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--pb-divider);
  font-size: var(--pb-text-base);
  line-height: 1.6;
  color: var(--pb-text);
}

.bf-about__benefits li:first-child {
  border-top: none;
  padding-top: 4px;
}

.bf-about__benefits i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pb-accent-bg);
  color: var(--pb-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  border: 1px solid var(--pb-accent-soft);
}

/* ── Outro / CTAs ─────────────────────────────────────────────────── */

.bf-about__outro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 32px 44px 36px;
  background:
    linear-gradient(180deg, var(--pb-accent-bg) 0%, var(--pb-surface) 100%);
  border-top: 1px solid var(--pb-divider);
}

.bf-about__outro-label {
  font-size: var(--pb-text-xs);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pb-accent);
  margin-bottom: 8px;
}

.bf-about__outro-lede {
  margin: 0;
  max-width: 54ch;
  font-size: var(--pb-text-base);
  line-height: 1.55;
  color: var(--pb-text);
}

.bf-about__outro-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.bf-about__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: var(--pb-text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    background var(--pb-dur) var(--pb-ease),
    border-color var(--pb-dur) var(--pb-ease),
    transform var(--pb-dur-fast) var(--pb-ease),
    box-shadow var(--pb-dur) var(--pb-ease);
}

.bf-about__cta--primary {
  background: var(--pb-accent);
  color: #fff;
  border: 1px solid var(--pb-accent);
  box-shadow: 0 4px 12px -4px rgba(61, 107, 45, 0.45);
}

.bf-about__cta--primary:hover {
  background: #2f5424;
  border-color: #2f5424;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(61, 107, 45, 0.55);
}

.bf-about__cta--primary:active { transform: translateY(0); }

.bf-about__cta--secondary {
  background: #fff;
  color: var(--pb-accent-ink);
  border: 1px solid var(--pb-accent);
}

.bf-about__cta--secondary:hover {
  background: var(--pb-accent-bg);
  transform: translateY(-1px);
}

.bf-about__cta--secondary:active { transform: translateY(0); }

.bf-about__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 107, 45, 0.32);
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .bf-about            { margin: 36px auto 0; padding: 0 20px; }
  .bf-about__lede      { padding: 28px 28px 22px; }
  .bf-about__cluster   { padding: 32px 28px; }
  .bf-about__outro     { grid-template-columns: 1fr; padding: 28px 28px 32px; gap: 24px; }
  .bf-about__outro-ctas { flex-direction: row; flex-wrap: wrap; }

  .bf-about__goals     { grid-template-columns: 1fr; }
  .bf-about__goals li,
  .bf-about__goals li:nth-child(-n+2) {
    border-top: 1px solid var(--pb-divider);
    padding: 18px 0;
  }
  .bf-about__goals li:first-child {
    border-top: none;
    padding-top: 4px;
  }

  .bf-about__examples  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bf-about              { padding: 0 12px; }
  .bf-about__panel       { border-radius: var(--pb-radius-xl); }
  .bf-about__lede        { padding: 22px 20px 18px; }
  .bf-about__cluster     { padding: 26px 20px; }
  .bf-about__outro       { padding: 24px 20px 28px; }
  .bf-about__examples    { grid-template-columns: 1fr; }
  .bf-about__outro-ctas  { flex-direction: column; align-items: stretch; }
}