/* ============================================================
   Bconnect Over ons-pagina — widget-styling
   Bron: ingekort-over.css (ob-blok). Tokens uit tokens.css.
   ============================================================ */

/* ============================================================
   over.css — pagina /over-bconnect/  (redesign "ob-")
   Vervangt de oude ov-* opzet. Tokens uit het Bconnect-designsysteem.
   Accent = signatuur-gradient. Laad NA components.css + colors_and_type.css.
   ============================================================ */

/* ===== Over Bconnect ===== */
.ob-page { background: #fff; color: var(--c-navy); }
.ob-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ob-section { padding: 64px 0; }
.ob-section-alt { background: var(--c-bg-soft); }
.ob-h1 {
  /* gelijkgetrokken met .kc-hero h1 (klantcases) */
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.06; font-weight: var(--fw-semibold); letter-spacing: -0.025em;
  margin: 18px 0 22px; color: var(--c-navy);
}
.ob-h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1; font-weight: 800; letter-spacing: -0.015em;
  color: var(--c-navy); margin: 0 0 18px;
}
.ob-grad {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ob-p { font-size: 17px; line-height: 1.7; color: #2b2b4a; margin: 0 0 16px; max-width: 60ch; }
.ob-intro { font-size: 18px; line-height: 1.6; color: #3a3a55; max-width: 70ch; margin: 0 0 32px; }
.ob-eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #6d6d8a; font-weight: 600; margin-bottom: 10px;
}

.ob-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.ob-reveal.is-in { opacity: 1; transform: none; }

.ob-pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(20,20,100,0.06); color: var(--c-navy);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}

/* Hero */
.ob-hero {
  position: relative; overflow: hidden;
  padding: 72px 0 64px;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(168,2,144,0.08), transparent 60%),
    radial-gradient(800px 600px at -10% 20%, rgba(35,1,251,0.07), transparent 60%),
    #fff;
}
.ob-hero-inner { max-width: 920px; margin: 0 auto; padding: 0 24px; text-align: center; }
.ob-hero .ob-sub { font-size: 18px; line-height: 1.65; color: #3a3a55; margin: 0 auto 28px; max-width: 64ch; }
.ob-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.ob-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-decoration: none; border: 1.5px solid transparent;
}
.ob-btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: 0 10px 28px rgba(168,2,144,0.25); }
.ob-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(168,2,144,0.32); }
.ob-btn-ghost { color: var(--c-navy); border-color: rgba(20,20,100,0.18); background: #fff; }
.ob-btn-ghost:hover { border-color: var(--c-navy); }
.ob-btn-ghost-light { color: #fff; border-color: rgba(255,255,255,0.4); background: transparent; }
.ob-btn-ghost-light:hover { background: rgba(255,255,255,0.08); border-color: #fff; }

/* Story
   Was een tweekolomsraster met het accentblok "2010 / Begonnen in Amsterdam"
   als zijkolom. Dat blok is op verzoek verwijderd (zie de widget-PHP), dus het
   raster is nu één kolom: zonder deze wijziging zou de tweede kolom nog steeds
   1fr van de breedte opeisen en stond het verhaal onnodig smal. De
   .ob-accent-*-regels zijn mee verwijderd; ze hadden geen markup meer. */
.ob-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; }
/* De twee verhaal-alinea's naast elkaar (13-08-2026). .ob-story is 1180px breed
   maar .ob-p staat op 60ch (642px gemeten), dus in één kolom bleef er 538px
   dood vlak rechts van de tekst staan. Twee kolommen van ~542px vullen de
   breedte en blijven onder de leesbreedte. De max-width hier op `none`: hij
   bindt in een kolom van 542px toch niet, maar zo is de bedoeling expliciet. */
.ob-story-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; align-items: start; margin-top: 20px; }
.ob-story-cols .ob-p { max-width: none; margin-bottom: 0; }

/* Why */
.ob-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; max-width: 820px; }
.ob-check {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 22px; border-radius: 16px; background: #fff;
  border: 1px solid rgba(20,20,100,0.08);
  font-size: 16px; line-height: 1.55; color: #2b2b4a;
}
.ob-check-icon {
  flex: 0 0 32px; height: 32px; width: 32px; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand);
  box-shadow: 0 6px 14px rgba(168,2,144,0.22);
}

/* Track record */
.ob-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 16px;
}
.ob-stat {
  padding: 28px 22px; border-radius: 20px; background: #fff;
  border: 1px solid rgba(20,20,100,0.08);
  box-shadow: 0 8px 24px rgba(20,20,100,0.05);
}
.ob-stat-num {
  font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ob-stat-count { background: inherit; -webkit-background-clip: text; background-clip: text; color: inherit; }
.ob-stat-label { margin-top: 10px; font-size: 14px; color: #5a5a78; font-weight: 500; }
.ob-stat-dummy {
  border-style: dashed; background: #fafafb; position: relative;
}
.ob-stat-dummy .ob-stat-num { background: none; color: #a5a5b8; -webkit-text-fill-color: #a5a5b8; }
.ob-dummy-tag {
  position: absolute; top: 12px; right: 14px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9494a8; font-weight: 600;
}
.ob-stats-sub { margin-top: 24px; font-size: 15px; color: #5a5a78; max-width: 70ch; }

/* People */
.ob-people { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ob-people-media { display: flex; justify-content: flex-end; }
.ob-photo {
  width: 100%; max-width: 520px; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(20,20,100,0.18), 0 6px 14px rgba(20,20,100,0.08);
  background: #f0f0f5;
}
.ob-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.ob-award-line {
  margin-top: 10px; font-size: 14px; color: #6d6d8a; font-style: italic;
}
.ob-link-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.ob-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px;
  color: var(--c-navy); text-decoration: none;
  border-bottom: 1.5px solid rgba(20,20,100,0.18); padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.ob-link:hover { border-color: var(--c-navy); }
.ob-link span { transition: transform .2s ease; }
.ob-link:hover span { transform: translateX(3px); }

/* Badges */
.ob-badges-intro { font-size: 15px; color: #5a5a78; margin-bottom: 22px; }
.ob-badges {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px;
}
.ob-badge-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center;
  padding: 22px; border-radius: 18px; background: #fff;
  border: 1px solid rgba(20,20,100,0.08);
  box-shadow: 0 8px 24px rgba(20,20,100,0.05);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ob-badge-card-link:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(20,20,100,0.10); }
.ob-badge-img {
  width: 120px; height: 120px; border-radius: 12px; overflow: hidden;
  background: #f4f5fa; display: grid; place-items: center;
}
.ob-badge-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-badge-img-contain img { object-fit: contain; padding: 6px; }
.ob-badge-thumb {
  width: 120px; height: 120px; border-radius: 12px; overflow: hidden;
  background: var(--c-navy); display: grid; place-items: center;
  padding: 10px;
}
.ob-badge-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ob-badge-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--c-navy); }
.ob-badge-text { margin: 0; font-size: 14px; line-height: 1.55; color: #5a5a78; }

/* Closing CTA */
.ob-cta-block {
  position: relative; overflow: hidden;
  padding: 64px 48px; border-radius: 32px; color: #fff; text-align: center;
  background: var(--gradient-brand-rich, var(--gradient-brand));
  box-shadow: 0 30px 60px rgba(20,20,100,0.25);
}
.ob-cta-eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.12); font-size: 13px; font-weight: 600;
  margin-bottom: 18px;
}
.ob-cta-h2 {
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.015em;
  margin: 0 0 14px; color: #fff;
}
.ob-cta-body { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 60ch; margin: 0 auto 28px; }
.ob-cta-block .ob-cta-row { justify-content: center; }

/* Responsive */
@media (max-width: 900px) {
  .ob-section { padding: 48px 0; }
  .ob-hero { padding: 56px 0 48px; }
  .ob-story, .ob-people { grid-template-columns: 1fr; gap: 32px; }
  /* Twee kolommen lopende tekst is op tablet/telefoon te smal om te lezen. */
  .ob-story-cols { grid-template-columns: 1fr; gap: 16px; }
  .ob-story-cols .ob-p { margin-bottom: 0; }
  .ob-people-media { justify-content: flex-start; }
  .ob-stats { grid-template-columns: repeat(2, 1fr); }
  .ob-badges { grid-template-columns: 1fr; }
  .ob-cta-block { padding: 48px 24px; border-radius: 24px; }
  .ob-badge-card { grid-template-columns: 96px 1fr; }
  .ob-badge-img { width: 96px; height: 96px; }
  .ob-badge-thumb { width: 96px; height: 96px; padding: 8px; }
}
@media (max-width: 520px) {
  .ob-stats { grid-template-columns: 1fr; }
}

/* ===== Over Bconnect — Location section ===== */
.ob-location-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.ob-h2-sm { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-top: 8px; }
.ob-location-grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 32px;
  align-items: stretch;
}
.ob-location-text { display: flex; flex-direction: column; gap: 14px; }
.ob-loc-card {
  margin-top: 10px;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid rgba(20, 20, 100, 0.08);
  border-left: 4px solid var(--c-blue, #3B82F6);
  border-radius: 18px;
  box-shadow: 0 12px 30px -18px rgba(20, 20, 100, 0.25);
}
.ob-loc-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.ob-loc-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 0.96rem; }
.ob-loc-row dt { color: #6b7280; font-weight: 500; }
.ob-loc-row dd { margin: 0; color: var(--c-navy, #141464); font-weight: 600; }
.ob-loc-row dd a { color: inherit; text-decoration: none; }
.ob-loc-row dd a:hover { text-decoration: underline; }
.ob-loc-cta { display: inline-flex; }
.ob-location-map {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(20, 20, 100, 0.35);
  border: 1px solid rgba(20, 20, 100, 0.08);
  background: #eef0f7;
}
.ob-location-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 880px) {
  .ob-location-grid { grid-template-columns: 1fr; gap: 24px; }
  .ob-location-map { height: 300px; }
  .ob-loc-row { grid-template-columns: 92px 1fr; }
}

/* ===== Over Bconnect — Hero tag ===== */
.ob-hero-tag {
  display: inline-block;
  margin: 0 auto 22px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(168, 2, 144, 0.06);
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(168, 2, 144, 0.18);
}

/* ===== Over Bconnect — Proof bar ===== */
.ob-proofbar-section { padding: 8px 0 0; }
.ob-proofbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* start i.p.v. center: met de icoontegels erbij verschillen de celhoogtes
     (een badge met een tweeregelige titel is hoger dan één met één regel), en
     centreren legde de icoonrij dan niet meer op één lijn — de eerste badge
     zakte 18px t.o.v. de cijfercellen. */
  align-items: start;
  gap: 8px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(20, 20, 100, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(20, 20, 100, 0.28);
}
.ob-proof-item { text-align: center; padding: 6px 10px; position: relative; }
/* Icoontegel in de proofbar (13-08-2026). Bewust lavendel met een navy icoon
   en niet de gradient-tegel van .ob-hybrid-icon: in deze balk dragen de
   CIJFERS al de merkgradient, dus vijf gradient-tegels ernaast zouden daarmee
   vechten. 38px i.p.v. de 44px van .ob-hybrid-icon, want de cel is hier maar
   ~226px breed. */
.ob-proof-icon {
  width: 38px; height: 38px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(20, 20, 100, 0.06);
  color: var(--c-navy);
}
.ob-proof-item + .ob-proof-item::before,
.ob-proof-badge::before {
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(20,20,100,0.12), transparent);
}
.ob-proof-num {
  /* flex i.p.v. block: zo verdwijnt de witruimte-tekstknoop tussen het getal
     en het plusje, die anders als spatie rendert ("60 +"). */
  display: flex; align-items: baseline; justify-content: center;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ob-proof-label { margin-top: 4px; font-size: 13px; color: #5a5a78; font-weight: 500; }
/* Het plusje achter "60" hoort bij het cijfer maar niet in de gradient-clip:
   background-clip:text over een los teken geeft een andere ramp dan over het
   getal ernaast. Vandaar een eigen span die de navy-tint aanhoudt. */
.ob-proof-plus { font-size: 0.72em; font-weight: 800; color: var(--c-navy); margin-left: 1px; }
.ob-proof-badge { position: relative; text-align: center; padding: 6px 10px; }
.ob-proof-badge-title { font-size: 14px; font-weight: 700; color: var(--c-navy); line-height: 1.25; }
.ob-proof-badge-sub { margin-top: 4px; font-size: 12px; color: #6b6b85; line-height: 1.4; }
@media (max-width: 900px) {
  .ob-proofbar { grid-template-columns: repeat(2, 1fr); gap: 18px 8px; padding: 20px 18px; }
  .ob-proof-item + .ob-proof-item::before,
  .ob-proof-badge::before { display: none; }
  .ob-proof-icon { width: 34px; height: 34px; margin-bottom: 8px; }
}
@media (max-width: 460px) {
  .ob-proofbar { grid-template-columns: 1fr; }
}

/* ===== Over Bconnect — Hybride aanpak cards ===== */
.ob-hybrid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
/* Icoon en titel naast elkaar op rij 1, de tekst eronder over de volle
   breedte (12-08-2026; stond daarvoor alle drie onder elkaar). Zelfde
   grid-aanpak als .km-step op /kennismaken/: geen extra wrapper in de
   markup nodig, en de alinea loopt onder het icoon door in plaats van
   ernaast te blijven hangen. */
.ob-hybrid-card {
  background: #fff;
  border: 1px solid rgba(20, 20, 100, 0.08);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 12px 30px -22px rgba(20, 20, 100, 0.2);
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 12px;
  align-items: center;
  align-content: start;
}
.ob-hybrid-card > .ob-hybrid-icon  { grid-column: 1; grid-row: 1; }
.ob-hybrid-card > .ob-hybrid-title { grid-column: 2; grid-row: 1; }
.ob-hybrid-card > .ob-hybrid-text  { grid-column: 1 / -1; grid-row: 2; }
.ob-hybrid-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--gradient-brand);
  color: #fff;
  /* De ruimte onder het icoon komt nu van de row-gap; een eigen
     ondermarge zou de titel ernaast mee omlaag trekken. */
}
.ob-hybrid-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-navy); }
.ob-hybrid-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5a5a78; }
@media (max-width: 900px) {
  .ob-hybrid-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ===== Over Bconnect — Mini-cases ===== */
.ob-mini-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.ob-mini-case {
  background: #fff;
  border: 1px solid rgba(20, 20, 100, 0.08);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 12px 30px -22px rgba(20, 20, 100, 0.2);
}
.ob-mini-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(168, 2, 144, 0.08);
  color: var(--c-navy);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.ob-mini-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--c-navy); }
.ob-mini-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5a5a78; }
@media (max-width: 760px) {
  .ob-mini-cases { grid-template-columns: 1fr; }
}

/* ===== Over Bconnect — Badge link in award card ===== */
.ob-badge-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 13px; font-weight: 600;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Over Bconnect — Compact teamblok (fotokaarten) ===== */
.ob-team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.ob-team-card {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(20, 20, 100, 0.08);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 30px -22px rgba(20, 20, 100, 0.2);
}
.ob-team-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  border-radius: 14px;
  background-color: #eef0f7;
  background-image: url("assets/team/team-placeholder.png");
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ob-team-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ob-team-photo-initial {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(20, 20, 60, 0.35);
  line-height: 1;
}
.ob-team-name {
  margin-top: 16px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-navy);
}
.ob-team-note {
  margin: 36px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #6d6d8a;
  font-style: italic;
}

/* ===== Teampreview op /over-bconnect/ — klikt door naar /team/ ===== */
.ob-team-preview { display: block; max-width: 720px; margin-top: 8px; text-decoration: none; }
.ob-tp-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 20px;
  padding: 0;
}
.ob-tp-tile {
  background: #fff;
  border: 1px solid rgba(20, 20, 100, 0.08);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 30px -22px rgba(20, 20, 100, 0.2);
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}
.ob-team-preview:hover .ob-tp-tile,
.ob-team-preview:focus-visible .ob-tp-tile {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -20px rgba(20, 20, 100, 0.32);
}
.ob-tp-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.05;
  border-radius: 11px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  color: var(--c-navy);
  background-image:
    radial-gradient(120% 100% at 80% 0%, rgba(35, 1, 251, 0.16), transparent 58%),
    radial-gradient(120% 100% at 10% 100%, rgba(168, 2, 144, 0.14), transparent 58%),
    linear-gradient(165deg, #f3f1fd 0%, #e7e3f8 100%);
}
.ob-tp-more .ob-tp-photo { background-image: var(--gradient-brand-rich); color: #fff; }
.ob-tp-name {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  color: var(--c-navy);
}
.ob-tp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  color: var(--c-grad-blue);
}
.ob-tp-arrow { transition: transform 0.25s var(--ease, ease); }
.ob-team-preview:hover .ob-tp-arrow,
.ob-team-preview:focus-visible .ob-tp-arrow { transform: translateX(5px); }
@media (max-width: 560px) {
  .ob-tp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 900px) {
  .ob-team-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
  .ob-team-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Light variant of gradient text on dark CTA */
.ob-grad-light {
  background: linear-gradient(90deg, #ffffff 0%, #ffd9f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* reveal: maak alles direct zichtbaar in standalone export */
.ob-reveal { opacity: 1 !important; transform: none !important; }

/* ===== Elementor-context + HARDENING tegen theme-resets ===== */
/* De widget-wrappers van de zeven ob-secties + de oude pagina-widget.
   Elke Bconnect-widget zet zijn eigen wrapper-marge op 0; dat kan niet
   generiek, want Elementor zet die marge per widgettype.

   OPSPLITSING 13-08-2026: de hardening-regels hieronder hingen aan
   `.elementor-widget-bconnect_over`, de wrapper van de pagina-widget die de
   hele pagina rendeerde. Nu elke sectie een eigen widget is, bestaat die
   wrapper niet meer en scopen ze op `.ob-page` — de paginaschil die elke
   ob-widget zelf om zijn sectie rendert, en waar de typografie in dit bestand
   ook al aan hangt. Zelfde specificiteit (0,2,0). */
.elementor-widget-bconnect_over,
.elementor-widget-bconnect_ob_hero,
.elementor-widget-bconnect_ob_proof,
.elementor-widget-bconnect_ob_story,
.elementor-widget-bconnect_ob_beloftes,
.elementor-widget-bconnect_ob_team,
.elementor-widget-bconnect_ob_badges,
.elementor-widget-bconnect_ob_location { margin: 0 !important; }

/* Een eigen foto in een teamtegel in plaats van de letter, en een eigen beeld
   in een beloftetegel in plaats van het lijnicoon. De tegelmaat blijft gelijk;
   het beeld vult hem met behoud van verhouding. */
.ob-page .ob-tp-photo-img,
.ob-page .ob-hybrid-icon.bc-ic-img {
	background: none !important;
	padding: 0;
	overflow: hidden;
}
.ob-page .ob-tp-photo-img img,
.ob-page .ob-hybrid-icon.bc-ic-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ob-page .ob-hybrid-icon.bc-ic-img img { object-fit: contain; }
.ob-page .ob-grad {
	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;
}
.ob-page .ob-btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.ob-page a { text-decoration: none; }

/* ============================================================
   Basistypografie binnen de widget: de bron leunt op de globale
   body/heading-fonts van het designsysteem (colors_and_type.css);
   die levert Hello Elementor niet, dus hier gescopet op .ob-page.
   Staat onderaan zodat dit wint van eerdere declaraties.
   ============================================================ */
.ob-page { font-family: var(--font-body); }
.ob-page h1, .ob-page h2, .ob-page h3, .ob-page h4,
.ob-page .ob-btn, .ob-page .ob-pill, .ob-page .ob-hero-tag,
.ob-page .ob-proof-num,
.ob-page .ob-proof-badge-title, .ob-page .ob-cta-eyebrow {
	font-family: var(--font-head);
}