/* ===== Over-ons-ontwerp 2026-10-19 (Claude Design "Website sloopauto's verkopen", Over ons.dc.html) — laadt na artikel.css + pillar.css ===== */
.pil-label.geel{color:var(--geel)}
.oo-hero{background:var(--navy);color:#fff;padding:clamp(40px,6vw,80px) 0 clamp(100px,10vw,140px)}
.oo-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px 64px;align-items:end}
.oo-hero h1{margin:12px 0 0;font-size:clamp(34px,5.2vw,64px);line-height:1.02;letter-spacing:-2px;font-weight:800;color:#fff;text-wrap:balance}
.oo-hero .intro{margin:0;color:var(--navy-soft);font-size:18px;line-height:1.6;max-width:520px;text-wrap:pretty}
.oo-foto{margin-top:clamp(-80px,-7vw,-60px)}
.oo-foto .kader{aspect-ratio:21/9;min-height:240px}

.oo-stats{padding:clamp(40px,6vw,72px) 24px 0}
.oo-stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.oo-stats .stat{background:var(--bg-warm);border-radius:16px;padding:28px 26px}
.oo-stats .waarde{font-size:clamp(34px,3.5vw,48px);font-weight:800;letter-spacing:-1.5px;color:var(--accent);line-height:1}
.oo-stats .label{margin-top:10px;color:var(--text-muted);font-size:15px;font-weight:600;line-height:1.4}

.oo-2kol{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 64px;align-items:center}
.oo-verhaal,.oo-team,.oo-wat,.oo-cijfers,.oo-cert,.oo-werk,.oo-reviews,.oo-contact{padding:clamp(56px,8vw,100px) 24px 0}
.oo-verhaal h2,.oo-team h2,.oo-wat h2,.oo-cijfers h2,.oo-cert h2,.oo-werk h2,.oo-reviews h2,.oo-contact h2{margin:12px 0 0;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-1.2px;font-weight:800;color:var(--navy);text-wrap:balance;scroll-margin-top:24px}
.oo-verhaal .tekst p{margin:18px 0 0;color:var(--text-muted);font-size:17px;line-height:1.6;text-wrap:pretty}
.oo-verhaal .foto{aspect-ratio:4/3;min-height:280px;border-radius:24px;overflow:hidden}
.oo-verhaal .foto img,.oo-team .foto img{width:100%;height:100%;object-fit:cover;display:block}

/* team: 2 personen */
.oo-team .kop{text-align:center;max-width:640px;margin:0 auto}
.oo-team .leden{margin:40px auto 0;max-width:960px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.oo-team .lid{background:var(--navy);border-radius:24px;overflow:hidden;position:relative;color:#fff;display:flex;flex-direction:column;scroll-margin-top:24px}
.oo-team .lid::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 100%,rgba(10,92,230,.55) 0%,rgba(10,92,230,0) 65%);pointer-events:none}
.oo-team .foto{position:relative;aspect-ratio:1/1;margin:28px 28px 0;border-radius:18px;overflow:hidden;box-shadow:0 24px 32px rgba(0,0,0,.4)}
.oo-team .band{position:relative;background:var(--geel);color:var(--navy);padding:22px 28px 26px;margin-top:24px;flex:1}
.oo-team .band .naam{font-weight:800;font-size:20px;letter-spacing:-.3px}
.oo-team .band .rol{font-size:13px;font-weight:700;margin-top:2px;opacity:.75}
.oo-team .band .bio{font-size:14px;line-height:1.55;margin-top:10px;text-wrap:pretty}
.oo-team .band .bio p{margin:0}
.oo-team .band a{color:var(--navy);text-decoration:underline;font-weight:700}

/* wat we doen: donker blok */
.oo-wat .blok{background:var(--navy);border-radius:24px;padding:clamp(32px,5vw,64px);color:#fff}
.oo-wat h2{color:#fff}
.oo-wat .kop{max-width:720px}
.oo-wat .kop p{margin:16px 0 0;color:var(--navy-soft);font-size:16px;line-height:1.6}
.oo-wat .kop a{color:#fff;text-decoration:underline}
.oo-wat .kaarten{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.oo-wat .kaart{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px}
.oo-wat .ico{width:44px;height:44px;border-radius:12px;background:var(--geel);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:17px}
.oo-wat .kaart .titel{margin-top:18px;font-weight:800;font-size:20px;letter-spacing:-.4px}
.oo-wat .kaart .tekst{margin-top:10px;color:var(--navy-soft);font-size:15px;line-height:1.55;text-wrap:pretty}
.oo-wat .slot{margin-top:24px;color:var(--navy-soft);font-size:15px;line-height:1.6}
.oo-wat .slot p{margin:0}

/* cijfers + contact: inhoud in artikelstijl */
.oo-content{margin-top:20px;max-width:900px}
.oo-content h3{margin:28px 0 10px}
.oo-content .price-table{width:100%}
.oo-content p em{color:var(--text-light);font-size:14px}

/* erkenningen */
.oo-cert .blok{background:var(--bg-warm);border-radius:24px;padding:clamp(32px,5vw,64px)}
.oo-cert p{margin:20px 0 0;color:var(--text-muted);font-size:17px;line-height:1.6}
.oo-cert .lijst{display:flex;flex-direction:column;gap:12px}
.oo-cert .cert{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.oo-cert .vink{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.oo-cert .cert .titel{font-weight:800;font-size:17px;color:var(--navy)}
.oo-cert .cert .tekst{color:var(--text-muted);font-size:14px;line-height:1.5;margin-top:4px}

/* werkwijze */
.oo-werk{align-items:start}
.oo-werk .oo-2kol{align-items:start}
.oo-werk p{margin:20px 0 0;color:var(--text-muted);font-size:17px;line-height:1.6;max-width:520px}
.knop-donker{margin-top:28px;display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font-weight:700;font-size:16px;padding:16px 24px;border-radius:12px;text-decoration:none}
.knop-donker:hover{background:var(--accent);color:#fff;text-decoration:none}
.oo-werk .stappen{display:flex;flex-direction:column;gap:14px}
.oo-werk .stap{display:flex;gap:20px;border:1px solid var(--border);border-radius:16px;padding:24px}
.oo-werk .nr{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--geel);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.oo-werk .stap .titel{font-weight:800;font-size:19px;letter-spacing:-.3px;color:var(--navy)}
.oo-werk .stap .tekst{margin-top:6px;color:var(--text-muted);font-size:15px;line-height:1.55;text-wrap:pretty}

/* reviews */
.oo-reviews .kop.rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
.oo-reviews .score{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text-muted)}
.oo-reviews .score b{color:var(--navy);font-weight:800;font-size:18px}
.sterren{color:var(--geel);letter-spacing:2px;font-size:16px}
.oo-reviews .intro p{margin:16px 0 0;color:var(--text-muted);font-size:16px}
.oo-reviews .kaarten{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.oo-reviews .review{background:var(--bg-warm);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.oo-reviews .review p{margin:0;font-size:16px;line-height:1.6;color:var(--navy);text-wrap:pretty}
.oo-reviews .wie{margin-top:auto;display:flex;align-items:center;gap:12px}
.oo-reviews .ini{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.oo-reviews .naam{font-weight:700;font-size:14px;color:var(--navy)}
.oo-reviews .meta{color:var(--text-muted);font-size:14px}
.oo-reviews+.hp-kenteken.kt-pagina{padding-top:clamp(40px,6vw,72px)}
.pil-cta .adres{margin-top:22px;font-size:14px;color:#dbe7fb;font-weight:600}

@media (max-width:640px){
  .oo-hero{padding:28px 8px 72px}
  .oo-stats,.oo-verhaal,.oo-team,.oo-wat,.oo-cijfers,.oo-cert,.oo-werk,.oo-reviews,.oo-contact{padding-left:16px;padding-right:16px}
  .oo-team .foto{margin:16px 16px 0}
  .oo-team .band{padding:18px 16px 22px}
  .oo-verhaal .foto{min-height:200px}
  .oo-werk .stap{padding:18px;gap:14px}
}