/* OZIIX – Over ons */
.ov { background: #fff; overflow: hidden; }
.ov-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.ov-r { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.ov-r.is-in { opacity: 1; transform: none; }
html:not(.js) .ov-r { opacity: 1; transform: none; }

.ov-hero { position: relative; padding: 150px 0 90px; background: linear-gradient(180deg, #f1f9fc, #fff); }
.ov-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; animation: ovFloat 14s ease-in-out infinite; }
.ov-blob.a { width: 420px; height: 420px; right: -80px; top: 40px; background: rgba(var(--brand-rgb), .28); }
.ov-blob.b { width: 300px; height: 300px; left: -100px; bottom: -60px; background: rgba(94, 184, 208, .3); animation-delay: -6s; }
.ov-blob.c { width: 320px; height: 320px; right: -60px; top: -90px; background: rgba(94, 184, 208, .35); }
@keyframes ovFloat { 50% { transform: translate(30px, -26px) scale(1.08); } }
.ov-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: center; }
.ov-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .82rem; font-weight: 600; }
.ov-kicker svg { width: 16px; height: 16px; }
.ov h1 { margin: 16px 0 0; font-size: clamp(2.2rem, 4.8vw, 3.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.07; color: var(--ink); }
.ov-grad { background: linear-gradient(90deg, var(--brand), #3fa7c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-lead { margin: 18px 0 0; max-width: 620px; font-size: 1.1rem; line-height: 1.75; }
.ov-lead strong { color: var(--ink); }
.ov-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ov-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: 0 14px 26px -14px rgba(var(--brand-rgb), .9); transition: transform .3s, box-shadow .3s, background .3s; }
.ov-btn svg { width: 18px; height: 18px; transition: transform .3s; }
.ov-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 32px -14px rgba(var(--brand-rgb), .9); }
.ov-btn:hover svg:last-child { transform: translateX(4px); }
.ov-btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.ov-btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.ov-btn.light { background: #fff; color: #0b5a70; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); }
.ov-btn.ghost-l { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); box-shadow: none; }
.ov-btn.ghost-l:hover { background: rgba(255, 255, 255, .2); }

/* contactpersoon-kader (klein en clean) */
.ov-person { position: relative; text-align: center; padding: 26px 22px 22px; border: 1px solid rgba(var(--brand-rgb), .25); border-radius: 24px; background: linear-gradient(180deg, #fff, #f6fbfd); box-shadow: 0 30px 50px -34px rgba(var(--brand-rgb), .7); }
.ov-person::before { content: ""; position: absolute; inset: -1px; border-radius: 24px; padding: 1px; background: linear-gradient(135deg, rgba(var(--brand-rgb), .6), transparent 45%, rgba(94, 184, 208, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.ov-photo { position: relative; width: 116px; height: 116px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), #0b5a70); box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(var(--brand-rgb), .3); }
.ov-photo::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(var(--brand-rgb), .35); animation: ovRing 3s ease-out infinite; }
@keyframes ovRing { 0% { transform: scale(.94); opacity: .8; } 100% { transform: scale(1.18); opacity: 0; } }
.ov-photo img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 2; }
.ov-init { color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: .02em; }
.ov-pname { font-size: 1.2rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ov-pname small { font-size: .9rem; font-weight: 500; color: var(--brand); }
.ov-prole { margin-top: 2px; font-size: .86rem; color: #64748b; }
.ov-person p { margin: 10px 0 0; font-size: .9rem; line-height: 1.55; }
.ov-pcont { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.ov-pcont li { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: .9rem; }
.ov-pcont svg { width: 17px; height: 17px; color: var(--brand); }
.ov-pcont a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ov-pcont a:hover { color: var(--brand); }
.ov-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: #ecfdf5; color: #15803d; font-size: .78rem; font-weight: 600; }
.ov-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: ovPulse 2s infinite; }
@keyframes ovPulse { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* secties */
.ov-sec { padding: 84px 0; }
.ov-sec.soft { background: var(--soft); }
.ov-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.ov h2 { margin: 8px 0 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.ov-head { max-width: 780px; margin-bottom: 38px; }
.ov-head p { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.75; }
.ov-head strong, .ov-story strong { color: var(--ink); }
.ov-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 50px; align-items: start; }
.ov-story p { margin: 0 0 14px; font-size: 1.05rem; line-height: 1.8; }

.ov-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ov-card { position: relative; padding: 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, border-color .3s, opacity .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.ov-card:hover { transform: translateY(-5px); border-color: rgba(var(--brand-rgb), .45); box-shadow: 0 24px 40px -28px rgba(var(--brand-rgb), .7); }
.ov-card.big { padding: 30px 26px; border-color: rgba(var(--brand-rgb), .22); background: linear-gradient(180deg, #fff, #f6fbfd); }
.ov-card h3 { margin: 16px 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ov-card p { margin: 0; font-size: .95rem; line-height: 1.65; }
.ov-card a { color: var(--brand); font-weight: 600; }
.ov-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--brand), #0b5a70); box-shadow: 0 10px 20px -10px rgba(var(--brand-rgb), .8); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.ov-ico svg { width: 26px; height: 26px; overflow: visible; }
.ov-ico svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ov-card.is-in .ov-ico svg * { animation: ovDraw 1.1s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
.ov-card:hover .ov-ico { transform: rotate(-8deg) scale(1.1); }
@keyframes ovDraw { to { stroke-dashoffset: 0; } }

.ov-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ov-facts div { padding: 20px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.ov-facts b { display: block; font-size: 1.1rem; color: var(--brand); letter-spacing: -.01em; }
.ov-facts span { display: block; margin-top: 4px; font-size: .86rem; line-height: 1.5; }

.ov-cta { position: relative; overflow: hidden; padding: 56px 40px; border-radius: 28px; text-align: center; color: #cbd5e1; background: radial-gradient(120% 160% at 100% 0%, rgba(14, 116, 144, .75), transparent 60%), linear-gradient(135deg, #0b1220, #0f172a 55%, #12304a); box-shadow: 0 40px 70px -40px rgba(15, 23, 42, .8); }
.ov-cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.ov-cta p { max-width: 560px; margin: 14px auto 0; font-size: 1.08rem; line-height: 1.7; }
.ov-cta .ov-cta-row { justify-content: center; }
.ov-cta > * { position: relative; }
.ov-cta .ov-blob { position: absolute; }

@media (max-width: 980px) {
  .ov-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ov-person { max-width: 360px; }
  .ov-story { grid-template-columns: 1fr; gap: 20px; }
  .ov-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ov-hero { padding: 120px 0 60px; }
  .ov-sec { padding: 60px 0; }
  .ov-grid3 { grid-template-columns: 1fr; }
  .ov-cta { padding: 40px 22px; border-radius: 22px; }
  .ov-person { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-r { opacity: 1; transform: none; transition: none; }
  .ov-blob, .ov-photo::after, .ov-live i { animation: none; }
  .ov-ico svg * { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* taalblokken */
.ov-l { display: none; }
html:not([lang="en"]):not([lang="fr"]) .ov-l[data-l="nl"], html[lang="en"] .ov-l[data-l="en"], html[lang="fr"] .ov-l[data-l="fr"] { display: block; }