/* ============================================================
   INPACT · over-ons.css
   Paginastijl voor Over ons. Opbouw naar het voorbeeld van
   blinqx.ai/over-ons, vertaald naar de Inpact-huisstijl v3.1:
   merkblauw en navy in plaats van geel, Poppins, en overal
   afgeronde vormen. Geen zeshoeken: cirkels en squircles.
   Alleen deze pagina gebruikt dit bestand.
   ============================================================ */

.ov{ --r-xl:56px; --r-l:36px; --r-m:22px; --r-s:12px; }

/* ---------- 1. hero ---------- */
.ov-hero{
  position:relative;
  background:linear-gradient(135deg,#0A1230 0%,#16255C 55%,#2C49C0 130%);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  overflow:hidden;
  padding:clamp(40px,6vw,88px) 0 clamp(52px,7vw,96px);
}
.ov-hero::after{
  content:"";position:absolute;right:-180px;top:-160px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(97,174,202,.30),rgba(47,82,224,0) 62%);
  pointer-events:none;
}
.ov-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.82fr);gap:clamp(28px,4vw,64px);align-items:center;position:relative;z-index:1;}
.ov-hero h1{font-size:clamp(38px,5.4vw,66px);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.06;margin:14px 0 0;}
.ov-hero h1 em{font-style:normal;color:var(--blue-300);}
.ov-hero__lead{margin-top:20px;font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:#C4CCE6;max-width:46ch;}
.ov-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.ov-hero .crumbs{margin-bottom:26px;}

/* beeld bij de hero: één dominant beeld, één klein beeld dat overlapt.
   Beide met dezelfde ronding, uitgelijnd op de tekstkolom ernaast. */
.ov-beeld{position:relative;}
.ov-beeld__hoofd{
  margin:0;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;
  background:var(--navy-700);box-shadow:0 30px 70px rgba(4,9,28,.45);
}
.ov-beeld__hoofd img{width:100%;height:100%;object-fit:cover;display:block;}
.ov-beeld__bij{
  position:absolute;left:-40px;bottom:-40px;width:44%;max-width:210px;
  margin:0;border-radius:var(--r-m);overflow:hidden;aspect-ratio:1/1;
  box-shadow:0 0 0 10px #142253,0 24px 50px rgba(4,9,28,.5);
}
.ov-beeld__bij img{width:100%;height:100%;object-fit:cover;display:block;}

/* feitenregel onder de tekst, geeft de kolom hetzelfde gewicht als het beeld */
.ov-feiten{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
}
.ov-feiten span{font-size:13.5px;color:#C4CCE6;display:inline-flex;align-items:center;gap:9px;}
.ov-feiten span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-cyaan);flex:none;}

/* ---------- sectiekop, breed en rustig ---------- */
.ov-kop{max-width:720px;}
.ov-kop--midden{margin-inline:auto;text-align:center;}
.ov-kop h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:10px 0 0;}
.ov-kop p{margin-top:16px;font-size:16px;line-height:1.7;color:var(--slate-500);}

/* ---------- 2. cijferbalk ---------- */
.ov-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--blue-100);border-radius:var(--r-l);
  padding:clamp(26px,3vw,38px) clamp(18px,2vw,28px);
  gap:10px;
}
.ov-stat{text-align:center;padding:6px 10px;position:relative;}
.ov-stat + .ov-stat::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(47,82,224,.18);}
.ov-stat strong{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;color:var(--blue-600);line-height:1.1;}
.ov-stat span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#3C4358;}
/* Vier tegels sinds 28-9-2026 (aantal collega's erbij). Op een smaller scherm twee naast elkaar;
   de scheidingslijn vervalt dan bij de eerste tegel van elke rij. */
@media(min-width:641px) and (max-width:1000px){
  .ov-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .ov-stat:nth-child(odd)::before{display:none;}
}

/* ---------- 3. missie en visie ---------- */
.ov-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px);}
.ov-duo__item{text-align:center;max-width:460px;margin-inline:auto;padding:32px 26px 24px;}
.ov-ico{
  width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.ov-ico svg{width:28px;height:28px;fill:none;stroke:var(--blue-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ov-duo__item h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.01em;}
.ov-duo__item p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--slate-500);}

/* ---------- 4. gekleurd blok met beeld ---------- */
.ov-band{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(135deg,#16255C 0%,#2646D9 100%);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;
  gap:clamp(24px,3vw,48px);
}
.ov-band__body{padding:clamp(32px,4.4vw,64px);color:#fff;}
.ov-band__body h2{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff;}
.ov-band__body p{margin-top:16px;font-size:15.5px;line-height:1.7;color:#D8E0F8;}
.ov-band__media{align-self:stretch;min-height:100%;}
.ov-band__media img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;}
.ov-band .ticks li{color:#D8E0F8;}
.ov-band .ticks li::before{background:rgba(255,255,255,.18);}
.ov-band .ticks li::after{border-color:#fff;}
.ov-band .btn--wit{background:#fff;color:var(--ink);border-radius:100px;}
.ov-band .btn--wit:hover{background:var(--blue-100);}

/* ---------- 5. citaat ---------- */
.ov-quote{display:grid;grid-template-columns:292px minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center;}
/* het vormvlak staat met zijn linkerrand op dezelfde lijn als de tekst erboven,
   het portret schuift naar rechts en overlapt het. */
.ov-quote__portret{position:relative;width:292px;height:268px;}
.ov-quote__portret::before{
  content:"";position:absolute;left:0;bottom:0;width:212px;height:212px;
  border-radius:var(--r-l);
  background:linear-gradient(145deg,#CFE6EE 0%,#E3EAFE 100%);
}
.ov-quote__portret img{
  position:absolute;right:0;top:0;width:248px;height:248px;
  object-fit:cover;border-radius:50%;box-shadow:var(--shadow-card);
}
.ov-quote blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.3vw,27px);line-height:1.45;letter-spacing:-.01em;color:var(--ink);}
.ov-quote cite{display:block;margin-top:20px;font-style:normal;font-size:15px;font-weight:600;color:var(--ink);}
.ov-quote cite b{font-weight:600;}
.ov-quote__rol{display:inline-block;margin-left:8px;padding:4px 12px;border-radius:100px;background:var(--blue-100);color:var(--blue-600);font-size:13px;font-weight:600;}

/* ---------- 6. team ---------- */
.ov-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);}
.ov-lid{text-align:center;}
.ov-lid__foto{
  position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:1/1;
  background:linear-gradient(150deg,var(--blue-100),#DCE4FD);
  transition:transform .25s var(--ease);
}
.ov-lid:hover .ov-lid__foto{transform:translateY(-4px);}
.ov-lid__foto img{width:100%;height:100%;object-fit:cover;display:block;}
.ov-lid strong{display:block;margin-top:16px;font-family:var(--font-display);font-size:16px;color:var(--ink);}
.ov-lid span{display:block;margin-top:2px;font-size:13px;color:var(--slate-500);}

/* ---------- 7. tijdlijn als schuifrij ---------- */
.ov-tl .slider__track{padding-left:0;padding-right:0;gap:18px;}
.ov-tl-kaart{
  flex:0 0 clamp(260px,32vw,340px);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:var(--r-m);background:#fff;padding:26px 26px 28px;
}
.ov-tl-kaart__jaar{display:inline-block;padding:5px 14px;border-radius:100px;background:var(--blue-600);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;}
.ov-tl-kaart h3{margin:16px 0 8px;font-size:17px;line-height:1.3;}
.ov-tl-kaart p{font-size:14px;line-height:1.65;color:var(--slate-500);margin:0;}
.ov-tl-kaart--beeld{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.ov-tl-kaart--beeld img{width:100%;height:170px;object-fit:cover;display:block;}
.ov-tl-kaart--beeld > div{padding:22px 26px 26px;}
.ov-tl__nav{display:flex;gap:8px;}
.ov-tl__nav .slider__btn{border-color:var(--line);color:var(--ink);background:#fff;}
.ov-tl__nav .slider__btn:hover{border-color:var(--blue-400);background:var(--blue-100);}
.ov-tl .slider__dots button{background:rgba(47,82,224,.22);}
.ov-tl .slider__dots button.is-active{background:var(--blue-600);}

/* ---------- 8. werken bij, met fotoclusters links en rechts ---------- */
.ov-werk{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(18px,3vw,44px);align-items:center;}
.ov-werk__mid{text-align:center;}
.ov-mini{display:grid;gap:14px;}
.ov-mini figure{margin:0;overflow:hidden;background:var(--blue-100);box-shadow:var(--shadow-soft);}
.ov-mini img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1;}
.ov-mini--links figure:nth-child(1){border-radius:50%;width:66%;margin-left:auto;}
.ov-mini--links figure:nth-child(2){border-radius:var(--r-m);width:88%;}
.ov-mini--rechts figure:nth-child(1){border-radius:var(--r-m);width:88%;margin-left:auto;}
.ov-mini--rechts figure:nth-child(2){border-radius:50%;width:66%;}

/* ---------- 9. locaties ---------- */
.ov-loc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);}
.ov-loc__kaart{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:300px;box-shadow:var(--shadow-card);}
.ov-loc__kaart img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}
.ov-loc__body{position:relative;z-index:1;padding:clamp(24px,3vw,34px);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(10,18,48,0) 32%,rgba(10,18,48,.86) 100%);color:#fff;}
.ov-loc__body strong{font-family:var(--font-display);font-size:22px;font-weight:700;}
.ov-loc__body span{display:block;margin-top:6px;font-size:14px;color:#D8E0F8;}

/* ---------- 10. slotblok ---------- */
.ov-slot{
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#0A1230 0%,#16255C 60%,#2646D9 150%);
  padding:clamp(38px,5vw,72px);color:#fff;text-align:center;
}
.ov-slot h2{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:-.02em;color:#fff;}
.ov-slot p{margin-top:16px;font-size:16px;line-height:1.7;color:#C4CCE6;max-width:58ch;margin-inline:auto;}
.ov-slot__acties{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.ov-slot .btn--wit{background:#fff;color:var(--ink);}
.ov-slot .btn--wit:hover{background:var(--blue-100);}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .ov-team{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
  .ov-hero__grid{grid-template-columns:minmax(0,1fr);}
  .ov-beeld{max-width:420px;margin-top:10px;}
  .ov-beeld__bij{left:-20px;bottom:-20px;box-shadow:0 0 0 8px #142253,0 18px 40px rgba(4,9,28,.5);}
  .ov-band{grid-template-columns:minmax(0,1fr);}
  .ov-band__media img{min-height:260px;}
  .ov-quote{grid-template-columns:minmax(0,1fr);}
  .ov-quote__portret{width:252px;height:228px;}
  .ov-quote__portret::before{width:180px;height:180px;}
  .ov-quote__portret img{width:210px;height:210px;}
  .ov-werk{grid-template-columns:minmax(0,1fr);}
  .ov-mini{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ov-mini figure{width:100% !important;margin:0 !important;}
  .ov-loc{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:640px){
  .ov-hero{border-radius:0 0 var(--r-l) var(--r-l);}
  .ov-beeld__bij{left:-8px;bottom:-22px;width:40%;box-shadow:0 0 0 7px #142253,0 16px 34px rgba(4,9,28,.5);}
  .ov-stats{grid-template-columns:minmax(0,1fr);row-gap:20px;}
  .ov-stat::before{display:none !important;}
  .ov-duo{grid-template-columns:minmax(0,1fr);}
  .ov-team{grid-template-columns:minmax(0,1fr);}
  .ov-lid__foto{max-width:260px;margin-inline:auto;}
}

/* ---------- donker blok met dezelfde ronding als de rest ---------- */
.ov-dark{
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#0A1230 0%,#16255C 70%,#1E3480 130%);
  padding:clamp(34px,4.6vw,66px);color:#fff;
}
.ov-dark h2{color:#fff;}
.ov-dark .section__lead{color:#C4CCE6;}
.ov-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.ov-dark .card__title{color:#fff;}
.ov-dark .card__text{color:#C4CCE6;}
.ov-dark .tag{background:rgba(255,255,255,.12);color:#D8E0F8;}
@media(max-width:640px){.ov-dark{border-radius:var(--r-l);}}