/* ==========================================================================
   Koers voor Morgen — visueel systeem (FASE 4)
   Gedeelde stylesheet voor het herontwerp. Eén serif (Newsreader) voor gezag,
   één sans (Inter) voor helderheid. Drie oppervlakken: nachtblauw / warm
   off-white / petrol. De "lijn van koers" als doorlopend motief.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* oppervlakken */
  --s-dark:#0d1b2a;      --s-dark-2:#132534;
  --s-light:#f6f2ea;     --s-light-2:#efe9dc;
  --s-petrol:#20423d;

  /* accent */
  --petrol:#3d6b63;      --petrol-bright:#5e9b8f;   --gold:#c49a4a;

  /* tekst op licht */
  --ink:#16232e;  --body:#33414c;  --muted:#556573;  --hair:#d9d2c4;
  /* tekst op donker / petrol */
  --ink-d:#f4f1e9;  --body-d:#c6d2da;  --muted-d:#8ba0ae;  --hair-d:#24384a;  --hair-p:#3c5f59;

  /* semantisch (alleen product-UI, niet marketing) */
  --ok:#3d6b63;  --warn:#b8862f;  --bad:#b0554a;

  /* de lijn van koers */
  --koerslijn:#5e9b8f;

  /* type-schaal (basis 17px, ratio ~1.24) */
  --fs-xs:.78rem; --fs-sm:.9rem; --fs-base:1.0625rem; --fs-md:1.32rem;
  --fs-lg:1.63rem; --fs-xl:2.1rem; --fs-2xl:2.75rem;
  --fs-hero:clamp(2.4rem, 6vw, 4rem);

  /* ruimte / maat */
  --w-text:66ch; --w-wide:1180px; --w-full:1400px;
  --pad-y:clamp(4rem, 9vw, 8rem);
  --pad-x:clamp(1.25rem, 5vw, 3rem);
  --r-sm:6px; --r-md:10px; --r-lg:14px;

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.2,.6,.2,1);
}

/* Het merk werkt met drie vaste oppervlakken (nachtblauw / warm off-white /
   petrol). Die zijn onderdeel van de identiteit en veranderen NIET mee met het
   viewer-thema — een lichte sectie is altijd warm off-white, zoals een pagina in
   een tijdschrift. Alleen losse, thema-neutrale pagina's (privacy, voorwaarden)
   kunnen later een meebewegend `.s-page`-oppervlak krijgen. `body` zet altijd
   expliciet een achtergrond, zodat de pagina op elke host-grond klopt. */

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
html,body{overflow-x:clip}          /* vangnet: de pagina scrollt nooit zijwaarts */
body{
  margin:0; background:var(--s-light); color:var(--body);
  font-family:var(--sans); font-size:var(--fs-base); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* grid-/flex-kinderen mogen krimpen onder hun min-content i.p.v. de rij te verbreden */
.grid > *,.routes > *,.proces__labels > *,.foot__grid > *{min-width:0}
img,svg,video{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.13; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--koerslijn); outline-offset:2px}
::selection{background:var(--petrol); color:#fff}

/* ---------- layout / oppervlakken ---------- */
.wrap{max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--pad-x)}
.wrap--text{max-width:calc(var(--w-text) + 2*var(--pad-x))}
.section{padding-block:var(--pad-y); position:relative}
.section--tight{padding-block:clamp(2.5rem,6vw,4.5rem)}

.s-dark{background:var(--s-dark); color:var(--body-d)}
.s-dark h1,.s-dark h2,.s-dark h3{color:var(--ink-d)}
.s-light{background:var(--s-light); color:var(--body)}
.s-light h1,.s-light h2,.s-light h3{color:var(--ink)}
.s-light-2{background:var(--s-light-2); color:var(--body)}
.s-light-2 h1,.s-light-2 h2,.s-light-2 h3{color:var(--ink)}
.s-petrol{background:var(--s-petrol); color:var(--body-d)}
.s-petrol h1,.s-petrol h2,.s-petrol h3{color:#fff}

.eyebrow{
  font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--petrol); margin:0 0 1rem;
}
.s-dark .eyebrow,.s-petrol .eyebrow{color:var(--petrol-bright)}
.s-petrol .eyebrow{color:var(--gold)}

.section-head{max-width:var(--w-text)}
.section-head h2{font-size:var(--fs-xl); margin:0 0 .5rem}
.section-head .lead{font-size:var(--fs-md); margin-top:.9rem; color:var(--body)}
.s-dark .section-head .lead,.s-petrol .section-head .lead{color:var(--body-d)}
.section-head h2::after{
  content:""; display:block; width:44px; height:2px; background:var(--gold);
  margin-top:1.1rem; transition:width .5s var(--ease);
}
.reveal.in .section-head h2::after{width:64px}

.lead{font-size:var(--fs-md)}
.lead a{color:var(--petrol); text-decoration:underline; text-underline-offset:2px}
.s-dark .lead a,.s-petrol .lead a{color:var(--petrol-bright)}
.prose{max-width:var(--w-text)}
.prose > * + *{margin-top:1.1rem}
.prose h2{font-size:var(--fs-xl); margin-top:2.4rem}
.prose h3{font-size:var(--fs-lg); margin-top:1.8rem}
.prose ul,.prose ol{margin:.5rem 0 .75rem 1.4rem}
.prose li{margin:.35rem 0}
.prose a{color:var(--petrol); text-decoration:underline; text-underline-offset:2px}

/* juridische pagina's — content ongewijzigd, alleen omlijsting */
.legal{max-width:var(--w-text)}
.legal h1{font-size:var(--fs-2xl); margin-bottom:.5rem}
.legal h2{font-size:var(--fs-lg); color:var(--ink); margin:2.5rem 0 .75rem; padding-top:1.75rem; border-top:1px solid var(--hair)}
.legal h2:first-of-type{border-top:0; padding-top:0}
.legal p{margin-bottom:.75rem}
.legal ul{margin:.5rem 0 .9rem 1.4rem}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--petrol); text-decoration:underline; text-underline-offset:2px}
.legal .meta{font-size:var(--fs-xs); color:var(--muted); margin-bottom:2rem}
.legal .highlight{background:#fff; border:1px solid var(--hair); border-radius:var(--r-md); padding:1.25rem; margin:1.25rem 0}
.legal .highlight p{margin-bottom:.4rem}
.legal table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:var(--fs-sm)}
.legal th{text-align:left; padding:8px 12px; background:var(--s-light-2); border:1px solid var(--hair); font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.legal td{padding:8px 12px; border:1px solid var(--hair); vertical-align:top}
.legal-scroll{overflow-x:auto}

/* ---------- de lijn van koers ---------- */
.spine{
  position:fixed; top:0; bottom:0; width:1.5px; background:var(--koerslijn);
  opacity:.22; pointer-events:none; z-index:1;
  left:max(.75rem, calc(50vw - var(--w-wide)/2 - .75rem));
}
.spine::before{
  content:""; position:absolute; left:50%; top:38vh; width:7px; height:7px;
  margin-left:-3px; border-radius:50%; background:var(--s-dark); border:1.5px solid var(--koerslijn);
}
@media (max-width:960px){ .spine{display:none} }

.koersline{stroke:var(--koerslijn); stroke-width:1.5; fill:none; stroke-linecap:round}
.koersline--draw{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s ease-out}
.in .koersline--draw{stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){ .koersline--draw{stroke-dashoffset:0} }
.koersnode{fill:var(--s-dark); stroke:var(--koerslijn); stroke-width:1.5}
.s-light .koersnode{fill:var(--s-light)}
.s-light-2 .koersnode{fill:var(--s-light-2)}
.s-petrol .koersnode{fill:var(--s-petrol)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:20; background:var(--s-dark);
  border-bottom:1px solid var(--hair-d);
}
.nav__in{
  max-width:var(--w-wide); margin-inline:auto; padding:.9rem var(--pad-x);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__brand{font-family:var(--serif); font-size:1.15rem; color:var(--ink-d); white-space:nowrap}
.nav__brand b{color:var(--petrol-bright); font-weight:400}
.nav__links{display:flex; gap:1.4rem; margin-left:auto; align-items:center}
.nav__links a{
  font:500 var(--fs-sm)/1 var(--sans); color:var(--body-d); position:relative; padding:.4rem 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--petrol-bright);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__links a[aria-current]{color:var(--ink-d)}
.nav__cta{
  font:600 var(--fs-sm)/1 var(--sans); color:var(--ink-d);
  background:transparent; border:1px solid color-mix(in srgb, var(--petrol-bright) 55%, transparent);
  padding:.55rem 1.05rem; border-radius:var(--r-sm);
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.nav__cta::after{display:none}
.nav__cta:hover{border-color:var(--petrol-bright); background:color-mix(in srgb, var(--petrol-bright) 12%, transparent); color:#fff}
.nav__login{font:500 var(--fs-xs)/1 var(--sans); color:var(--muted-d); letter-spacing:.04em}
.nav__toggle{display:none; margin-left:auto; background:none; border:0; color:var(--ink-d); padding:.4rem}
/* Marcel, 4 sep 2026: tablet/smal-desktopvenster (481-860px) krijgt geen hamburger meer — de
   navigatie blijft daar een horizontale rij die zijwaarts scrolt. Op echte telefoonbreedte
   (<=480px, zie de media query eronder) blijft het vertrouwde hamburgermenu gewoon bestaan. */
@media (max-width:860px){
  .nav__in{gap:1rem}
  .nav__links{
    min-width:0; flex-wrap:nowrap; overflow-x:auto; gap:1.1rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{white-space:nowrap}
  .nav__cta{white-space:nowrap}
}
@media (max-width:480px){
  .nav__brand{font-size:1rem}
  .nav__links{
    position:absolute; top:100%; left:0; right:0; background:var(--s-dark);
    border-bottom:1px solid var(--hair-d); flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem var(--pad-x) 1.25rem; display:none; overflow-x:visible;
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:.8rem 0; border-bottom:1px solid var(--hair-d); white-space:normal}
  .nav__links a::after{display:none}
  .nav__cta{margin-top:.9rem; text-align:center; order:2; white-space:normal}
  .nav__toggle{display:block}
  .nav__login{display:block; order:1; color:var(--body-d); letter-spacing:normal; font-size:var(--fs-sm); font-weight:500}
}

/* ---------- footer ---------- */
.foot{background:var(--s-dark); color:var(--muted-d); padding-block:3.5rem 2.5rem}
.foot__grid{
  max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--pad-x);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem;
}
@media (max-width:820px){ .foot__grid{grid-template-columns:1fr 1fr; gap:1.75rem} }
@media (max-width:480px){ .foot__grid{grid-template-columns:1fr} }
.foot__brand b{font-family:var(--serif); font-size:1.1rem; color:var(--ink-d); font-weight:400; display:block; margin-bottom:.5rem}
.foot h4{font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--body-d); margin-bottom:.9rem; font-family:var(--sans)}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.foot a{font-size:var(--fs-sm); color:var(--muted-d)}
.foot a:hover{color:var(--ink-d)}
.foot__legal{
  max-width:var(--w-wide); margin:2.5rem auto 0; padding:1.5rem var(--pad-x) 0;
  border-top:1px solid var(--hair-d); font-size:var(--fs-xs); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-block; font:600 var(--fs-sm)/1 var(--sans); padding:.85rem 1.5rem;
  border-radius:var(--r-sm); border:1px solid transparent;
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-primary{background:var(--petrol); color:var(--s-light)}
.btn-primary:hover{transform:translateY(-2px); background:#345c55}
.s-dark .btn-primary,.s-petrol .btn-primary{background:var(--petrol-bright); color:var(--s-dark)}
.s-dark .btn-primary:hover,.s-petrol .btn-primary:hover{background:#6fb0a2}
.btn-secondary{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-secondary:hover{background:var(--ink); color:var(--s-light); transform:translateY(-2px)}
.s-dark .btn-secondary,.s-petrol .btn-secondary{border-color:var(--ink-d); color:var(--ink-d)}
.s-dark .btn-secondary:hover,.s-petrol .btn-secondary:hover{background:var(--ink-d); color:var(--s-dark)}
.btn-ghost{position:relative; color:var(--petrol); padding:.4rem 0; font-weight:600}
.s-dark .btn-ghost,.s-petrol .btn-ghost{color:var(--petrol-bright)}
.btn-ghost::after{
  content:""; position:absolute; left:0; bottom:.15rem; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.btn-ghost:hover::after{transform:scaleX(1)}
.btn-row{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:2rem}

/* ---------- kaarten ---------- */
.card{
  background:var(--s-light-2); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:1.6rem; transition:transform .16s ease, border-color .16s ease;
}
.s-dark .card{background:var(--s-dark-2); border-color:var(--hair-d)}
.s-petrol .card{background:rgba(255,255,255,.04); border-color:var(--hair-p)}
a.card:hover,.card--link:hover{transform:translateY(-3px); border-color:var(--petrol)}
.card h3{font-size:var(--fs-lg); margin-bottom:.5rem}
.card p{font-size:var(--fs-sm)}
.s-dark .card p{color:var(--body-d)}

.grid{display:grid; gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* routekaart — de twee proposities (hele kaart = één link) */
.routes{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2.25rem}
@media (max-width:640px){ .routes{grid-template-columns:1fr} }
.route{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--s-dark-2); border:1px solid var(--hair-d); border-left:2px solid var(--koerslijn);
  border-radius:var(--r-md); padding:1.35rem 1.5rem;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.route:hover{transform:translateY(-2px); border-color:var(--petrol-bright); background:#16293a}
.route:focus-visible{outline:2px solid var(--koerslijn); outline-offset:2px}
.route__ey{font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--petrol-bright); margin-bottom:.55rem}
.route__who{font-family:var(--serif); font-size:var(--fs-md); color:var(--ink-d); margin-bottom:.45rem; line-height:1.25}
.route__p{font-size:var(--fs-sm); color:var(--body-d); margin-bottom:1rem; flex:1}
.route__go{font:600 var(--fs-sm)/1 var(--sans); color:var(--petrol-bright); display:inline-flex; align-items:center}
.route:hover .route__go{text-decoration:underline; text-underline-offset:3px}

/* ---------- twee routes (gelijkwaardig, verschillend gecodeerd) ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.75rem}
@media (max-width:820px){ .duo{grid-template-columns:1fr} }
.duo__col{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hair); border-radius:var(--r-md);
  border-top:3px solid var(--petrol); padding:1.9rem 1.9rem 1.7rem;
}
.duo__col--expertise{border-top-color:var(--gold)}
.s-dark .duo__col{background:var(--s-dark-2); border-color:var(--hair-d); border-top-color:var(--petrol-bright)}
.s-dark .duo__col--expertise{border-top-color:var(--gold)}
.duo__ey{font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--petrol)}
.duo__col--expertise .duo__ey{color:#8a6b28}
.s-dark .duo__ey{color:var(--petrol-bright)} .s-dark .duo__col--expertise .duo__ey{color:var(--gold)}
.duo__who{margin-top:.5rem; font-size:var(--fs-sm); color:var(--muted)}
.s-dark .duo__who{color:var(--muted-d)}
.duo__h{font-family:var(--serif); font-size:var(--fs-lg); margin-top:.9rem; color:var(--ink)}
.s-dark .duo__h{color:var(--ink-d)}
.duo__list{list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; flex:1}
.duo__list li{position:relative; padding-left:1.4rem; font-size:var(--fs-sm)}
.duo__list li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--petrol)}
.duo__col--expertise .duo__list li::before{background:var(--gold)}
.s-dark .duo__list li::before{background:var(--petrol-bright)}
.s-dark .duo__col--expertise .duo__list li::before{background:var(--gold)}
.duo__cta{margin-top:1.6rem}

/* ---------- fase-indeling M&A Expertise (Vooraf / Tijdens / Na closing) ---------- */
.phaseflow{margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
@media (max-width:820px){ .phaseflow{grid-template-columns:1fr} }
.phase{background:var(--s-light-2); border:1px solid var(--hair); border-left:2px solid var(--koerslijn); border-radius:var(--r-md); padding:1.5rem}
.s-dark .phase,.s-petrol .phase{background:var(--s-dark-2); border-color:var(--hair-d); border-left-color:var(--petrol-bright)}
.s-petrol .phase{background:rgba(255,255,255,.04); border-color:var(--hair-p)}
.phase__k{font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--petrol); margin-bottom:1rem}
.s-dark .phase__k,.s-petrol .phase__k{color:var(--petrol-bright)}
.phase ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem}
.phase a{font-family:var(--serif); font-size:var(--fs-md); color:var(--ink); display:inline-flex; align-items:baseline; gap:.4rem}
.s-dark .phase a,.s-petrol .phase a{color:var(--ink-d)}
.phase a span{font-size:var(--fs-sm); color:var(--muted); font-family:var(--sans)}
.s-dark .phase a span,.s-petrol .phase a span{color:var(--muted-d)}
.phase a:hover{color:var(--petrol)} .s-dark .phase a:hover,.s-petrol .phase a:hover{color:var(--petrol-bright)}
.phase--over{margin-top:1.25rem; grid-column:1/-1; border-left-color:var(--gold); display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem}
.phase--over .phase__k{color:#8a6b28; margin-bottom:0}
.s-dark .phase--over,.s-petrol .phase--over{border-left-color:var(--gold)}
.s-dark .phase--over .phase__k,.s-petrol .phase--over .phase__k{color:var(--gold)}

/* ---------- stappen (editorialer alternatief voor een 3-kaartjes-grid) ---------- */
.steps{margin-top:2.75rem; display:flex; flex-direction:column; border-left:1.5px solid color-mix(in srgb, var(--koerslijn) 55%, transparent); max-width:var(--w-text)}
.step{position:relative; padding:0 0 2.1rem 3rem}
.step:last-child{padding-bottom:0}
.step__n{
  position:absolute; left:0; top:-.1em; transform:translateX(-50%);
  width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:50%;
  background:var(--s-dark); border:1.5px solid var(--koerslijn);
  font-family:var(--serif); font-size:var(--fs-md); line-height:1; color:var(--ink-d);
}
.s-light .step__n{background:var(--s-light); color:var(--ink)}
.s-light-2 .step__n{background:var(--s-light-2); color:var(--ink)}
.s-petrol .step__n{background:var(--s-petrol); color:#fff}
.step h3{font-size:var(--fs-lg); margin-bottom:.4rem}
.step p{font-size:var(--fs-base); max-width:54ch}
.s-dark .step p,.s-petrol .step p{color:var(--body-d)}

/* ---------- Marcel-blok (homepage) ---------- */
.marcel{display:grid; grid-template-columns:260px 1fr; gap:clamp(1.75rem,5vw,3.5rem); align-items:start; margin-top:1.25rem}
.marcel__foto{margin:0; max-width:260px}
.marcel__foto img{width:100%; height:auto; display:block; border-radius:var(--r-md); border:1px solid var(--hair-p)}
.marcel__foto figcaption{margin-top:.6rem; font:600 var(--fs-xs)/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--body-d)}
@media (max-width:720px){
  .marcel{grid-template-columns:1fr; gap:1.25rem}
  .marcel__foto{max-width:220px}
}

/* ---------- pull quote ---------- */
.pullquote{display:flex; gap:1.1rem; margin:2.5rem 0; max-width:38ch}
.pullquote .bar{flex:0 0 2px; background:var(--koerslijn)}
.pullquote p{font-family:var(--serif); font-size:var(--fs-lg); line-height:1.32; color:var(--ink)}
.s-dark .pullquote p{color:var(--ink-d)}
.pullquote cite{display:block; margin-top:.7rem; font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-style:normal}
.s-dark .pullquote cite{color:var(--muted-d)}

/* ---------- roltype-labels ---------- */
.pill{display:inline-block; font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.3rem .65rem; border-radius:var(--r-sm); border:1px solid}
.pill-platform{color:var(--petrol); border-color:var(--petrol); background:color-mix(in srgb, var(--petrol) 10%, transparent)}
.pill-expertise{color:#8a6b28; border-color:var(--gold); background:color-mix(in srgb, var(--gold) 14%, transparent)}
.pill-combo{color:var(--ink); border-color:var(--petrol); background:linear-gradient(100deg, color-mix(in srgb, var(--petrol) 12%, transparent) 50%, color-mix(in srgb, var(--gold) 14%, transparent) 50%)}

/* ---------- breadcrumb ---------- */
.crumb{font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:1.5rem}
.s-dark .crumb{color:var(--muted-d)}
.crumb a:hover{color:var(--petrol)}
.crumb b{color:var(--ink); font-weight:600}
.s-dark .crumb b{color:var(--ink-d)}
.crumb .sep{margin:0 .5rem; opacity:.6}

/* ---------- bewijsstrip ---------- */
.proof{display:flex; flex-wrap:wrap; gap:0; margin-top:2rem}
.proof__stat{padding:.25rem 1.75rem; border-left:1px solid color-mix(in srgb, var(--koerslijn) 40%, transparent)}
.proof__stat:first-child{padding-left:0; border-left:0}
@media (max-width:620px){
  .proof{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem}
  .proof__stat{padding:0 0 0 .9rem}
  .proof__stat:first-child{padding-left:.9rem}
  .proof__stat:nth-child(odd){padding-left:0; border-left:0}
}
.proof__v{font-family:var(--serif); font-size:2rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1}
.s-dark .proof__v,.s-petrol .proof__v{color:var(--ink-d)}
.proof__k{font-size:var(--fs-xs); color:var(--muted); margin-top:.3rem}
.s-dark .proof__k,.s-petrol .proof__k{color:var(--muted-d)}

/* ---------- procesvisualisatie (Doorzien -> Beslissen -> Realiseren) ---------- */
.proces{margin-top:3rem}
.proces svg{width:100%; height:auto; overflow:visible}
.proces__labels{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1.4rem}
@media (max-width:760px){ .proces__labels{grid-template-columns:1fr} }
.proces__labels h3{font-size:var(--fs-lg); margin-bottom:.35rem}
.proces__who{display:block; font:600 var(--fs-xs)/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--petrol-bright); margin-bottom:.5rem}
.proces__labels p{font-size:var(--fs-sm)}
.proces__note{margin-top:1.6rem; font-family:var(--serif); font-size:var(--fs-md); max-width:46ch}
.s-dark .proces__note{color:var(--ink-d)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(4rem,11vw,8.5rem)}
.hero h1{font-size:var(--fs-hero); letter-spacing:.005em}
.hero__sub{font-size:var(--fs-md); max-width:54ch; margin-top:1.5rem}
.s-dark .hero__sub{color:var(--body-d)}

/* fotografisch statement achter de homepage-hero */
.hero--photo{position:relative; overflow:hidden; display:flex; align-items:center}
@media (min-width:641px){ .hero--photo{min-height:min(82vh,720px)} }
.hero--photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, var(--s-dark) 0%, rgba(13,27,42,.94) 30%, rgba(13,27,42,.6) 68%, rgba(13,27,42,.38) 100%),
    linear-gradient(to top, var(--s-dark) 4%, rgba(13,27,42,0) 52%),
    url("img/hero-weg.jpg") center 60%/cover no-repeat;
}
.hero--photo .wrap{position:relative; z-index:1; width:100%}
@media (max-width:640px){
  .hero--photo::before{background:
    linear-gradient(180deg, rgba(13,27,42,.7) 0%, rgba(13,27,42,.86) 45%, var(--s-dark) 100%),
    url("img/hero-weg.jpg") center/cover no-repeat;}
}

/* beeld als sectie-achtergrond (i.p.v. ingelijst plaatje in de tekst).
   Per sectie: class s-bg + --bg:url(...) [+ optioneel --bg-pos]. Werkt op
   donkere oppervlakken (s-dark / s-petrol); de gradient houdt de tekst leesbaar. */
.s-bg{position:relative; overflow:hidden; isolation:isolate}
.s-bg::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, var(--s-dark) 0%, rgba(13,27,42,.95) 34%, rgba(13,27,42,.8) 60%, rgba(13,27,42,.58) 100%),
    linear-gradient(to top, var(--s-dark) 3%, rgba(13,27,42,0) 44%),
    var(--bg) var(--bg-pos, center) / cover no-repeat;
}
.s-petrol.s-bg::before{
  background:
    linear-gradient(90deg, var(--s-petrol) 0%, rgba(32,66,61,.95) 34%, rgba(32,66,61,.8) 62%, rgba(32,66,61,.58) 100%),
    linear-gradient(to top, var(--s-petrol) 3%, rgba(32,66,61,0) 44%),
    var(--bg) var(--bg-pos, center) / cover no-repeat;
}
.s-bg > .wrap{position:relative; z-index:1}
/* zachtere variant — beeld mag meer spreken (merklaag: homepage/bedrijfsscan) */
.s-bg--soft::before{
  background:
    linear-gradient(90deg, var(--s-dark) 0%, rgba(13,27,42,.86) 30%, rgba(13,27,42,.52) 62%, rgba(13,27,42,.3) 100%),
    linear-gradient(to top, var(--s-dark) 3%, rgba(13,27,42,0) 50%),
    var(--bg) var(--bg-pos, center) / cover no-repeat !important;
}
@media (max-width:640px){
  .s-bg--soft::before{background:
    linear-gradient(180deg, rgba(13,27,42,.66) 0%, rgba(13,27,42,.86) 55%, var(--s-dark) 100%),
    var(--bg) var(--bg-pos, center) / cover no-repeat !important;}
}
/* tekst op een beeld-achtergrond blijft in de donkere linkerzone + krijgt iets meer body */
.s-bg .section-head,.s-bg .hero__sub,.s-bg .prose,.s-bg > .wrap > .lead,.s-bg .proof{max-width:min(100%, 58ch)}
@media (max-width:640px){ .s-bg .section-head,.s-bg .hero__sub,.s-bg .prose,.s-bg .proof{max-width:100%} }
.s-bg .proof__v{color:#fff}
.s-bg .proof__k{color:var(--body-d)}
.s-bg .hero__sub,.s-bg .lead{color:var(--ink-d)}
/* ingelijst beeld — nog alleen voor het portret op /over-marcel */
.hero__media{margin-inline:0; max-width:100%; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hair-d)}
.hero__media img{width:100%; max-width:100%; height:auto; display:block}
/* walkthrough: stappen links, schermafbeeld rechts ernaast */
.stepblock{display:grid; grid-template-columns:1fr minmax(0,430px); gap:clamp(1.75rem,4vw,3.5rem); align-items:center; margin-top:2.75rem}
.stepblock + .stepblock{margin-top:clamp(2.5rem,6vw,4.5rem)}
.stepblock > .steps{margin-top:0}
.walkshot{margin:0; box-shadow:0 14px 40px -14px rgba(13,27,42,.30)}
.walkshot img{cursor:zoom-in}
@media (max-width:820px){
  .stepblock{grid-template-columns:1fr; gap:1.5rem}
  .walkshot{max-width:560px}
}

/* klik-om-te-vergroten */
.lightbox{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,5vw,4rem); background:rgba(13,27,42,.85); cursor:zoom-out;
  opacity:0; transition:opacity .18s ease}
.lightbox.is-open{opacity:1}
.lightbox img{max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 24px 70px -18px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){ .lightbox{transition:none} }
@media (max-width:640px){
  .s-bg::before{background:
    linear-gradient(180deg, rgba(13,27,42,.74) 0%, rgba(13,27,42,.9) 55%, var(--s-dark) 100%),
    var(--bg) var(--bg-pos, center) / cover no-repeat;}
  .s-petrol.s-bg::before{background:
    linear-gradient(180deg, rgba(32,66,61,.76) 0%, rgba(32,66,61,.92) 55%, var(--s-petrol) 100%),
    var(--bg) var(--bg-pos, center) / cover no-repeat;}
}

/* ---------- formulier ---------- */
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.25rem}
.field label{font:600 var(--fs-sm)/1.3 var(--sans); color:var(--ink)}
.s-dark .field label{color:var(--ink-d)}
.field input,.field textarea,.field select{
  font:inherit; padding:.7rem .85rem; border-radius:var(--r-sm); border:1px solid var(--hair);
  background:var(--s-light); color:var(--ink);
}
.s-dark .field input,.s-dark .field textarea,.s-dark .field select{background:var(--s-dark-2); border-color:var(--hair-d); color:var(--ink-d)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--petrol); outline:2px solid color-mix(in srgb, var(--koerslijn) 35%, transparent); outline-offset:1px}
.field textarea{min-height:8rem; resize:vertical}
.field--hp{position:absolute; left:-9999px}   /* honeypot */

/* ---------- utilities ---------- */
.center{text-align:center; margin-inline:auto}
.mt-0{margin-top:0}
.stack > * + *{margin-top:1.1rem}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
/* portret-variant: vaste fotokolom op desktop, gestapeld op mobiel */
@media (min-width:861px){ .split--portrait{grid-template-columns:320px 1fr} }
.overflow-x{overflow-x:auto}

/* ---------- motion ---------- */
.reveal{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  .reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s}
  .reveal.d3{transition-delay:.18s} .reveal.d4{transition-delay:.24s}
  @keyframes heroIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
  .hero .anim{opacity:0; animation:heroIn .6s var(--ease) forwards}
  .hero .anim.a1{animation-delay:.05s} .hero .anim.a2{animation-delay:.13s}
  .hero .anim.a3{animation-delay:.21s} .hero .anim.a4{animation-delay:.29s}
}