/* Bconnect Home & Living Bewijspunten — bron: ingekort-homeliving2.css
   (hl-sec, hl-lav, hl-eyebrow, hl-head, hl-maincase, hl-stat-row, hl-cases-2,
   hl-qcard, hl-quote, hl-proof-foot). Eindwaarden na laadvolgorde
   ingekort-homeliving2 < upgrade-homeliving2 < upgrade.css < upgrade-effects.css.
   --surface-lavender staat niet in tokens.css; hier met fallback (#f5f4fb). */
.hl-lav > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

/* ---- sectie-ritme ---- */
.hl-sec { padding: var(--space-8) 0; }
.hl-lav { background: var(--surface-lavender, #f5f4fb); }

/* ---- gedeelde sectiekop ---- */
.hl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hl-head { max-width: 800px; margin: 0 auto var(--space-8); text-align: center; }
.hl-head .hl-eyebrow { justify-content: center; }
.hl-head h2 { color: var(--c-navy); margin: 0 0 16px; text-wrap: pretty; }
.hl-head .hl-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-text-muted); margin: 0 auto; max-width: 46em; }

@media (max-width: 768px) { .hl-sec { padding: var(--space-8) 0; } }
@media (max-width: 520px) { .hl-sec { padding: var(--space-7) 0; } }

/* ---- hoofdcase ---- */
.hl-maincase {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-feature);
  box-shadow: var(--shadow-card); padding: var(--space-8);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center;
}
.hl-maincase-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hl-maincase-logo {
  display: grid; place-items: center; min-width: 120px; height: 48px; padding: 0 18px;
  background: #EEF0F7; border: 1px dashed #C9D0E0; border-radius: 10px;
  font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: 0.06em; color: #9098AD;
}
.hl-maincase-logo.has-img { background: #fff; border: 1px solid var(--c-border-soft); min-width: 150px; height: 64px; padding: 0 20px; }
.hl-maincase-logo.has-img img { max-height: 44px; max-width: 150px; width: auto; object-fit: contain; display: block; }
.hl-maincase-label {
  font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-soft);
  padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-lavender, #f5f4fb);
}
.hl-maincase-ctx { font-family: var(--font-body); font-size: 16px; line-height: 1.68; color: var(--c-text-muted); margin: 0; max-width: 36em; }
.hl-maincase-quote { position: relative; margin: 20px 0 0; padding-left: 20px; }
.hl-maincase-quote::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--gradient-brand); }
.hl-maincase-quote p { font-family: var(--font-head); font-size: 17px; font-weight: var(--fw-medium); line-height: 1.5; color: var(--c-navy); letter-spacing: -0.005em; margin: 0; text-wrap: pretty; }
.hl-maincase-quote cite { display: block; margin-top: 10px; font-family: var(--font-body); font-style: normal; font-size: 13.5px; color: var(--c-text-soft); }
.hl-maincase-stats { display: flex; flex-direction: column; gap: 18px; }
.hl-stat-row {
  display: flex; align-items: center; gap: 20px; padding: 18px 22px;
  background: var(--surface-lavender, #f5f4fb); border: 1px solid var(--c-border-soft); border-radius: var(--radius-card);
}
.hl-stat-row .au-num { font-size: clamp(34px, 4vw, 46px); flex: 0 0 auto; min-width: 3.4em; }
.hl-stat-row .au-num.is-narr { font-size: clamp(22px, 2.4vw, 28px); min-width: 4.6em; }
.hl-stat-cap { font-family: var(--font-body); font-size: 14.5px; line-height: 1.45; color: var(--c-text-muted); }

@media (max-width: 900px) { .hl-maincase { grid-template-columns: 1fr; gap: 32px; padding: var(--space-7); } }

/* ---- compacte cases (quote-kaarten) ---- */
.hl-cases-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.hl-qcard {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-feature);
  box-shadow: var(--shadow-card); padding: var(--space-7);
  display: flex; flex-direction: column; gap: 18px;
}
.hl-qcard-head { display: flex; align-items: center; gap: 12px; }
.hl-qcard-logo {
  display: grid; place-items: center; min-width: 110px; height: 42px; padding: 0 16px;
  background: #EEF0F7; border: 1px dashed #C9D0E0; border-radius: 9px;
  font-family: var(--font-head); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.05em; color: #9098AD;
}
.hl-qcard-logo.has-img { background: #fff; border: 1px solid var(--c-border-soft); min-width: 140px; height: 58px; padding: 0 18px; }
.hl-qcard-logo.has-img img { max-height: 40px; max-width: 140px; width: auto; object-fit: contain; display: block; }
.hl-qcard-label {
  font-family: var(--font-head); font-size: 10.5px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-soft);
  padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-lavender, #f5f4fb);
}
.hl-quote { position: relative; padding-left: var(--space-5); margin: 0; }
.hl-quote::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--gradient-brand); }
.hl-quote p { font-family: var(--font-head); font-size: 16.5px; font-weight: var(--fw-medium); line-height: 1.55; color: var(--c-navy); letter-spacing: -0.005em; margin: 0; text-wrap: pretty; }
.hl-quote cite { display: block; margin-top: 12px; font-family: var(--font-body); font-style: normal; font-size: 13.5px; color: var(--c-text-soft); }

.hl-proof-foot { margin-top: var(--space-7); text-align: center; }

@media (max-width: 760px) {
  .hl-cases-2 { grid-template-columns: 1fr; }
}

.au-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.au-textlink:hover { color: var(--c-grad-magenta); gap: 11px; }

.elementor-widget-bconnect_hl_proof { margin: 0 !important; }
.elementor-widget-bconnect_hl_proof .accent { background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; display: inline-block; }