/* ==========================================================================
   /over-ons/ en /werkwijze/  (templates/over-ons.html, templates/werkwijze.html)
   Bouwt op sollo.css: .vlak, .vlak-binnen, .label-klein, .knop, .cta-blok.
   HARDE REGEL: neon alleen op aubergine, nooit op beige of wit.
   ========================================================================== */

/* --- kop (aubergine) ----------------------------------------------------- */
.ox-kop .vlak-binnen,.ww-kop .vlak-binnen{padding-top:clamp(40px,5vw,64px)}
.ox-kop h1,.ww-kop h1{font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.02;max-width:15ch;margin:0 0 24px}
.ox-kop h1 b,.ww-kop h1 b{font-weight:600}
.ox-kop .intro,.ww-kop .intro{max-width:48ch}
.ox-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}

.ox-kop-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.ox-kop-beeld{margin:0;border-radius:6px;overflow:hidden}
.ox-kop-beeld img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ox-kop-beeld figcaption{font-size:13px;color:var(--label);padding:10px 2px 0}

.ox-cijfers{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:28px 0 0;border-top:1px solid var(--rand);
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ox-cijfers li{display:flex;flex-direction:column;gap:8px}
.ox-getal{font-family:var(--serif);font-weight:600;font-size:clamp(44px,5.4vw,76px);line-height:1;color:var(--neon)}
.ox-getal-label{font-size:15px;color:var(--gedempt);max-width:22ch}

/* --- tweekoloms tekstblok (beige) ---------------------------------------- */
.ox-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.ox-twee h2{max-width:14ch}
.ox-prose p{font-size:17px;line-height:1.6;max-width:58ch}
.ox-prose p:last-child{margin-bottom:0}

.ox-sectiekop{max-width:62ch;margin-bottom:40px}
.ox .vlak h2,.ww .vlak h2{margin-bottom:20px}
.ox-sectiekop h2{margin-bottom:12px}
.ox-sectiekop .vlak-intro{max-width:56ch}

/* --- drie pijlers -------------------------------------------------------- */
.ox-pijlers{list-style:none;margin:clamp(48px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ox-pijlers li{padding:28px 32px 4px;border-left:1px solid rgba(53,18,42,.18)}
.ox-pijlers li:first-child{padding-left:0;border-left:0}
.ox-pijler-nr{display:block;font-family:var(--serif);font-size:15px;color:var(--label);margin-bottom:18px}
.ox-pijlers h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.1;margin:0 0 12px}
.ox-pijlers p{font-size:15.5px;line-height:1.6;margin:0}

/* --- team (wit) ---------------------------------------------------------- */
.ox-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px)}
.ox-persoon{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:start;
  padding:28px;border:1px solid rgba(53,18,42,.14);border-radius:14px}
.ox-portret{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--aubergine);position:relative}
.ox-portret img{width:100%;height:100%;object-fit:cover;display:block}
.ox-initialen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:56px;letter-spacing:-.01em;color:var(--beige)}
/* dun neon streepje: mag, want het staat op het aubergine vlak van de tegel */
.ox-initialen::after{content:"";position:absolute;left:22px;bottom:22px;width:28px;height:3px;border-radius:2px;background:var(--neon)}
.ox-persoon h3{font-family:var(--serif);font-weight:600;font-size:28px;margin:0 0 4px}
.ox-rol{font-size:14px;font-weight:600;color:var(--label);margin:0 0 14px}
.ox-persoon-tekst p{font-size:15.5px;line-height:1.6}
.ox-verwacht{font-size:13px!important;font-weight:600;letter-spacing:.02em;color:var(--label);margin:20px 0 8px}
.ox-punten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ox-punten li{font-size:15px;line-height:1.5;padding-left:1.3em;position:relative}
.ox-punten li::before{content:"→";position:absolute;left:0}

/* --- vaste partners (aubergine) ------------------------------------------ */
.ox-partners{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.ox-partners-beelden{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ox-partners-beelden img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;display:block}
.ox-partners-beelden img:last-child{margin-top:48px}
.ox-partners p{max-width:54ch}
.ox-disciplines{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rand)}
.ox-disciplines li{padding:14px 0;border-bottom:1px solid var(--rand);font-size:15.5px;line-height:1.5;
  display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;color:var(--gedempt)}
.ox-disciplines b{color:var(--beige);font-weight:600}
.ox-disciplines li::before{content:none}

/* --- werkgebied (beige) -------------------------------------------------- */
.ox-gebied{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:center}
.ox-gebied p{max-width:52ch}
.ox-gebied-beeld{margin:0;border-radius:6px;overflow:hidden}
.ox-gebied-beeld img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}

/* --- slot-CTA in een aubergine vlak -------------------------------------- */
.ox-slot .vlak-binnen{padding-top:clamp(16px,3vw,32px)}
.ox-slot .cta-blok{margin-top:0}

/* ==========================================================================
   /werkwijze/
   ========================================================================== */
.ww-kop-raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.ww-kop-prose p{color:var(--gedempt);max-width:50ch}
.ww-kop-prose .ox-knoppen{margin-top:24px}

.ww-inhoud{margin:clamp(40px,5vw,64px) 0 0;padding-top:24px;border-top:1px solid var(--rand)}
.ww-inhoud ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;counter-reset:ww}
.ww-inhoud li{counter-increment:ww}
.ww-inhoud a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rand);border-radius:999px;
  padding:7px 16px;font-size:14px;font-weight:500;text-decoration:none}
.ww-inhoud a::before{content:counter(ww);font-family:var(--serif);color:var(--neon)}
.ww-inhoud a:hover,.ww-inhoud a:focus-visible{border-color:var(--neon)}

/* --- stappen (beige) ----------------------------------------------------- */
.ww-stappen{list-style:none;margin:0;padding:0;border-top:1px solid rgba(53,18,42,.18)}
.ww-stappen>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(24px,4vw,64px);
  padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid rgba(53,18,42,.18);scroll-margin-top:90px}
.ww-stap-kop{position:relative;padding-left:64px}
.ww-nr{position:absolute;left:0;top:2px;font-family:var(--serif);font-size:26px;line-height:1;color:var(--label)}
.ww-stap-kop h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.3vw,30px);line-height:1.1;margin:0 0 10px}
.ww-stap-kop p{font-size:15.5px;line-height:1.55;margin:0;max-width:40ch}
.ww-drie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0}
.ww-drie>div{background:rgba(255,255,255,.45);border-radius:10px;padding:18px 20px}
.ww-drie dt{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:lowercase;color:var(--label);margin:0 0 8px}
.ww-drie dd{margin:0;font-size:15px;line-height:1.55}
.ww-drie>div:last-child{background:var(--aubergine);color:var(--beige)}
.ww-drie>div:last-child dt{color:#A99AA3}
.vlak-beige .ww-drie>div:last-child a{color:var(--beige)}

/* --- engineering-voorbeelden (wit) --------------------------------------- */
.ew-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(24px,3vw,48px)}
.ew-fig{margin:0;display:flex;flex-direction:column;gap:20px}
.ew-breed{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.ew-zoom{position:relative;display:block;border:1px solid rgba(53,18,42,.14);border-radius:10px;overflow:hidden;
  background:#fff;cursor:zoom-in;text-decoration:none}
.ew-zoom img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ew-fig:not(.ew-breed):not(.ew-paar) .ew-zoom img{aspect-ratio:1/1;object-fit:cover;object-position:center top}
.ew-fig .ew-zoom img[src*="kastontwerp"]{object-position:center 70%}
.ew-zoom:hover img{transform:scale(1.02)}
.ew-vergroot{position:absolute;right:12px;bottom:12px;background:var(--aubergine);color:var(--beige);
  font-size:12.5px;font-weight:600;border-radius:999px;padding:6px 14px}
.ew-zoom:focus-visible{outline:2px solid var(--aubergine);outline-offset:3px}
.ew-paar-beelden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ew-paar-beelden img{aspect-ratio:4/5;object-fit:cover}
.ew-fig figcaption h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.1;margin:0 0 10px;color:var(--aubergine)}
.ew-fig figcaption p{font-size:15.5px;line-height:1.55;margin:0 0 10px;max-width:52ch}
.ew-fig figcaption b{font-weight:600}

/* --- grote weergave ------------------------------------------------------ */
.zoom{border:0;padding:0;margin:auto;max-width:min(96vw,1600px);max-height:94vh;background:transparent;color:var(--beige);overflow:visible}
.zoom::backdrop{background:rgba(44,21,37,.92)}
.zoom-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.zoom-beeld{display:block;max-width:min(96vw,1600px);max-height:84vh;width:auto;height:auto;background:#fff;border-radius:6px}
.zoom-bijschrift{font-size:14px;font-weight:600}
.zoom-sluit-form{display:flex;justify-content:flex-end;margin:0 0 10px}
.zoom-sluit{font:inherit;font-size:14px;font-weight:600;background:var(--aubergine);color:var(--beige);
  border:1px solid rgba(236,224,199,.4);border-radius:999px;padding:8px 18px;cursor:pointer}
.zoom-sluit:hover,.zoom-sluit:focus-visible{border-color:var(--neon)}

/* --- responsief ---------------------------------------------------------- */
@media (max-width:1100px){
  .ox-team{grid-template-columns:1fr}
  .ww-stappen>li{grid-template-columns:1fr;gap:20px}
}
@media (max-width:900px){
  .ox-kop-raster,.ox-twee,.ox-partners,.ox-gebied,.ww-kop-raster{grid-template-columns:minmax(0,1fr)}
  .ox-kop-beeld{order:-1}
  .ox-pijlers{grid-template-columns:1fr}
  .ox-pijlers li{padding:24px 0;border-left:0;border-top:1px solid rgba(53,18,42,.18)}
  .ox-pijlers li:first-child{padding-top:24px}
  .ew-raster{grid-template-columns:1fr}
  .ew-breed{grid-template-columns:1fr}
  .ww-drie{grid-template-columns:1fr;gap:10px}
}
@media (max-width:640px){
  .ox-cijfers{grid-template-columns:1fr;gap:20px}
  .ox-cijfers li{flex-direction:row;align-items:baseline;gap:14px}
  .ox-getal{font-size:44px;min-width:3.2ch}
  .ox-persoon{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px}
  .ox-portret{width:96px}
  .ox-initialen{font-size:32px}
  .ox-initialen::after{left:12px;bottom:12px;width:18px}
  .ox-persoon h3{font-size:24px}
  .ox-disciplines li{grid-template-columns:1fr;gap:2px}
  .ox-partners-beelden img:last-child{margin-top:28px}
  .ww-stap-kop{padding-left:48px}
  .ww-nr{font-size:22px}
  .ww-inhoud a{padding:6px 12px;font-size:13px}
}
.vlak-beige .ww-drie>div:last-child a:hover,.vlak-beige .ww-drie>div:last-child a:focus-visible{color:var(--neon);text-decoration-color:var(--neon)}

/* over ons: tijdlijn */
.ox-tijdlijn{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 32px;counter-reset:t}
.ox-tijdlijn li{position:relative;padding:18px 0 0;border-top:2px solid var(--aubergine,#35122A);display:flex;flex-direction:column;gap:8px}
.ox-tijdlijn li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--aubergine,#35122A)}
.ox-tijdlijn b{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.2}
.ox-tijdlijn span{line-height:1.5}