/* De branchepagina's (/leadopvolging-*), één sjabloon uit site-bron/branches.mjs. Bouwt op pagina.css. */

.br-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; max-width: 22ch; }
.br-hero .lede { max-width: 54ch; }
.br-hero .branchekeuze { margin-top: 40px; }

/* Drie aanvragen, als meldingen op een telefoon. */
.br-aanvragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.br-melding { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 11px 14px; background: #F1F1EE; border: 1px solid rgba(23, 32, 27, 0.07); border-radius: 18px; box-shadow: 0 6px 18px rgba(23, 32, 27, 0.06); font-size: 0.92rem; }
.br-melding:nth-child(2) { margin-left: 28px; }
.br-melding:nth-child(3) { margin-left: 12px; }
.br-app { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #DADBD6; color: #3A413D; }
.br-tekst { flex: 1; min-width: 0; }
.br-tijd { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.br-onder { margin-top: 24px; max-width: 52ch; color: var(--ink-2); font-size: 1.02rem; }
@media (max-width: 520px) { .br-melding:nth-child(n) { margin-left: 0; } }

/* Wat Emma vraagt */
.br-emma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.br-uitleg { margin-top: 14px; color: var(--ink-2); font-size: 1rem; max-width: 50ch; }
.br-vragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: v; }
.br-vragen li { counter-increment: v; position: relative; padding: 14px 16px 14px 48px; background: var(--green); color: var(--green-ink); border-radius: 16px 16px 16px 6px; font-size: 0.98rem; line-height: 1.45; max-width: 30rem; }
.br-vragen li::before { content: counter(v); position: absolute; left: 16px; top: 13px; font-family: var(--font-ui); color: var(--champagne); }
@media (max-width: 860px) { .br-emma { grid-template-columns: 1fr; gap: 28px; } }

/* De bron bij de cijfers */
.br-klein-kop { font-size: 1.05rem; }
.br-bron { margin-top: 10px; max-width: 70ch; font-size: 0.9rem; color: var(--ink-2); }

.br-verder { margin-top: 24px; }
.br-verder a { padding: 8px 0; color: var(--green-soft); font-weight: 600; text-decoration: none; }