/* Raisonné — Site v4 · "Bring what you've got" section.
   Transformation lanes: raw material → finished thing. Uses site tokens. */

.brg { background: var(--paper-2); padding: var(--pad-section) 0; border-top: 1px solid var(--line); }
.brg .brg-head { max-width: 60ch; margin-bottom: 46px; }
.brg .brg-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--grotesk);
  font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px; }
.brg .brg-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.brg .brg-h { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: .98; letter-spacing: -.01em; color: var(--ink); }
.brg .brg-h .it { font-style: italic; color: var(--accent); }
.brg .brg-lede { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--mid); margin-top: 20px; }

.brg .brg-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .brg .brg-lanes { grid-template-columns: 1fr; } }

.brg .brg-lane { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 26px 26px 24px; }
.brg .brg-transform { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 16px;
  margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.brg .brg-from { font-family: var(--grotesk); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--mid); }
.brg .brg-arrow { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--accent); }
.brg .brg-to { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink); }
.brg .brg-body { font-family: var(--grotesk); font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.brg .brg-steps { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.brg .brg-steps li { display: flex; align-items: center; gap: 10px; font-family: var(--grotesk);
  font-size: 12px; color: var(--mid); }
.brg .brg-steps .tick { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-tint);
  color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; flex-shrink: 0; }

.brg .brg-promise { display: flex; align-items: flex-start; gap: 18px; margin-top: 22px;
  background: var(--ink); color: var(--paper); border-radius: 12px; padding: 26px 30px; }
.brg .brg-promise-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.brg .brg-promise-h { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.brg .brg-promise-p { font-family: var(--grotesk); font-size: 13.5px; line-height: 1.6;
  color: rgba(244,236,220,.76); margin-top: 8px; max-width: 78ch; }
:root.theme-dark .brg .brg-promise-p { color: var(--mid); }