/* IK Compliance Advies
   Ontwerprichting: wit, petrol en de oranje stip.
   Wit is de grond, petrol geeft diepte, oranje is het teken dat er iets gebeurt.
   Beweging: één gebaar (wit keert om naar petrol, oranje verschijnt), rustig tempo, vaste richting. */

/* ---------- Lettertypes (zelf gehost, SIL Open Font License) ---------- */
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --white:#FFFFFF;
  --petrol:#1C6079;
  --petrol-deep:#164E62;
  --ink:#243642;
  --oranje:#D9602E;
  --oranje-deep:#C2511F;
  --tan:#9C8A72;
  --tan-text:#7A6A54;
  --creme:#F7EEDF;
  --mist:#EAF1F3;
  --muted:#56676D;
  --line:#DCE6E9;
  --grey:#93A2A8;
  --on-petrol:#CFE1E7;

  --f-display:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --t:.35s;
  --radius:12px;
  --container:1160px;
  --shadow-petrol:0 22px 40px -24px rgba(28,96,121,.7);
  --shadow-soft:0 16px 30px -20px rgba(36,54,66,.45);
  color-scheme:light;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.18;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:var(--petrol);text-underline-offset:3px}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--oranje);outline-offset:3px;border-radius:4px}
::selection{background:var(--petrol);color:var(--white)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--white)}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:6px;font-family:var(--f-display);font-weight:500;text-decoration:none;transition:top .2s var(--ease)}
.skip-link:focus{top:12px}

.container{max-width:var(--container);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.container{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

/* Label boven een sectie: het oranje lijntje uit het logo, dan kapitalen in tan */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan-text)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--oranje);flex:none;transform-origin:left}

/* ---------- Knoppen en links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.2;padding:14px 22px;border-radius:8px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.btn--primary{background:var(--oranje);color:var(--white)}
.btn--primary::after{content:"\2192";transition:transform var(--t) var(--ease)}
.btn--ghost{border-color:var(--petrol);color:var(--petrol);background:transparent}
.btn--small{padding:10px 16px;font-size:15px}
@media (hover:hover){
  .btn--primary:hover{background:var(--oranje-deep);transform:translateY(-2px)}
  .btn--primary:hover::after{transform:translateX(4px)}
  .btn--ghost:hover{background:var(--petrol);color:var(--white)}
}
.more{font-family:var(--f-display);font-weight:500;font-size:16px;text-decoration:none;color:var(--petrol);display:inline-flex;align-items:center;gap:8px}
.more::after{content:"\2192";transition:transform var(--t) var(--ease)}
@media (hover:hover){.more:hover::after{transform:translateX(4px)}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(36,54,66,.5)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;transition:padding var(--t) var(--ease)}
.site-header.is-scrolled .header-inner{padding-block:10px}
.brand{display:block;flex:none}
.brand img{height:48px;width:auto;transition:height var(--t) var(--ease)}
.site-header.is-scrolled .brand img{height:38px}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav ul{display:flex;align-items:center;gap:26px}
.main-nav ul a{position:relative;display:block;padding-block:6px;font-family:var(--f-display);font-weight:500;font-size:16px;color:var(--ink);text-decoration:none}
.main-nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--oranje);transition:width var(--t) var(--ease)}
.main-nav ul a:hover::after,.main-nav ul a:focus-visible::after{width:100%}
.menu-toggle{display:none;align-items:center;gap:10px;background:none;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--ink);cursor:pointer}
.menu-toggle .bars{position:relative;width:18px;height:12px}
.menu-toggle .bars span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease),top var(--t) var(--ease)}
.menu-toggle .bars span:nth-child(1){top:0}
.menu-toggle .bars span:nth-child(2){top:5px}
.menu-toggle .bars span:nth-child(3){top:10px}
.nav-open .menu-toggle .bars span:nth-child(1){top:5px;transform:rotate(45deg)}
.nav-open .menu-toggle .bars span:nth-child(2){opacity:0}
.nav-open .menu-toggle .bars span:nth-child(3){top:5px;transform:rotate(-45deg)}

@media (max-width:1060px){
  .menu-toggle{display:inline-flex}
  .main-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:18px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(36,54,66,.5);padding:12px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px))}
  .nav-open .main-nav{display:flex}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav ul a{padding-block:14px;font-size:19px;border-bottom:1px solid var(--line)}
  .main-nav ul a::after{display:none}
  .main-nav .btn{justify-content:center}
  .brand img{height:40px}
  .site-header.is-scrolled .brand img{height:34px}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:70%;background:linear-gradient(180deg,var(--mist),rgba(234,241,243,0));z-index:-1}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:72px 64px}
.hero h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.015em;margin-top:18px}
h1 .dot{color:var(--oranje)}
.hero-lead{font-size:20px;margin-top:22px;max-width:620px}
.hero-stance{margin-top:16px;font-family:var(--f-display);font-weight:500;font-size:18px;color:var(--petrol)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-micro{margin-top:16px;font-size:16px;color:var(--muted)}
.hero-micro a{white-space:nowrap}

/* Petrol paneel met het witte monogram. Met foto: voeg .visual--photo toe en een <img class="visual-photo">. */
.visual{position:relative;aspect-ratio:4/5;width:100%;max-width:440px;justify-self:end;border-radius:16px;background:var(--petrol);overflow:hidden;isolation:isolate}
.visual::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 85% 0%,rgba(255,255,255,.16),transparent 60%);z-index:1}
.visual-mono{position:absolute;left:12%;bottom:12%;width:76%;z-index:2;transition:all .6s var(--ease)}
.visual-mono img{width:100%}
.ring{position:absolute;left:91.5%;top:86.7%;width:15.9%;aspect-ratio:1;border-radius:50%;border:2px solid var(--oranje);transform:translate(-50%,-50%);opacity:0}
.visual-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;z-index:0}
.visual--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,78,98,0) 62%,rgba(22,78,98,.78));z-index:1}
.visual--photo .visual-mono{left:auto;right:7%;bottom:5%;width:22%}

/* ---------- Bewijspunten: lichten op naar petrol ---------- */
.proof{border-block:1px solid var(--line);background:var(--white)}
.proof-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-block:20px}
.proof-item{position:relative;isolation:isolate;overflow:hidden;border-radius:10px;padding:20px 20px 20px 22px;display:grid;gap:4px;align-content:start;outline-offset:2px;transition:transform var(--t) var(--ease)}
.proof-item::before{content:"";position:absolute;inset:0;background:var(--petrol);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);z-index:-1}
.proof-item strong{font-family:var(--f-display);font-weight:600;color:var(--petrol);font-size:19px;line-height:1.25;display:flex;align-items:center;gap:10px;transition:color var(--t) var(--ease)}
.proof-item strong::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--oranje);flex:none;transform:scale(0);transition:transform var(--t) var(--ease) .05s}
.proof-item span{font-size:15.5px;color:var(--muted);line-height:1.45;transition:color var(--t) var(--ease)}
.proof-item:focus-visible::before{transform:scaleY(1)}
.proof-item:focus-visible strong{color:var(--white)}
.proof-item:focus-visible strong::after{transform:scale(1)}
.proof-item:focus-visible span{color:var(--on-petrol)}
@media (hover:hover){
  .proof-item:hover{transform:translateY(-3px)}
  .proof-item:hover::before{transform:scaleY(1)}
  .proof-item:hover strong{color:var(--white)}
  .proof-item:hover strong::after{transform:scale(1)}
  .proof-item:hover span{color:var(--on-petrol)}
}

/* ---------- Secties ---------- */
.section{padding-block:88px}
.section--mist{background:var(--mist)}
.section--creme{background:var(--creme)}
.section h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px;letter-spacing:-.01em}
.section-intro{max-width:700px;margin-top:14px;color:var(--muted);font-size:19px}
.section-foot{margin-top:28px}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;gap:12px;align-content:start;min-width:0;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.card h3{font-size:20px}
.card p{font-size:16.5px;color:var(--muted)}
.grid{display:grid;gap:20px;margin-top:40px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Sectoren */
.sector{border-top:3px solid var(--petrol);text-decoration:none;color:inherit}
.sector .more{margin-top:auto}
@media (hover:hover){
  .sector:hover{border-top-color:var(--oranje);transform:translateY(-5px);box-shadow:var(--shadow-soft)}
  .sector:hover .more::after{transform:translateX(4px)}
}
.sector:focus-visible{border-top-color:var(--oranje)}
.asides{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:28px;font-size:17px}
.asides strong{font-family:var(--f-display);font-weight:600}

/* Diensten als blokken met symbool: wit keert om naar petrol, symbool wordt oranje */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.service{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:30px 28px 26px;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;text-decoration:none;color:var(--ink);min-width:0;transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.service::after{content:"";position:absolute;left:28px;top:0;height:3px;width:0;background:var(--oranje);transition:width .4s var(--ease)}
.service-icon{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--petrol);color:var(--petrol);display:grid;place-items:center;transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.service-icon svg{width:28px;height:28px}
.service h3{font-size:20px;transition:color .4s var(--ease)}
.service p{font-size:16.5px;color:var(--muted);transition:color .4s var(--ease)}
.service .more{transition:color .4s var(--ease)}
.service:focus-visible{background:var(--petrol);border-color:var(--petrol)}
.service:focus-visible .service-icon{background:var(--oranje);border-color:var(--oranje);color:var(--white)}
.service:focus-visible h3,.service:focus-visible .more{color:var(--white)}
.service:focus-visible p{color:var(--on-petrol)}
@media (hover:hover){
  .service:hover{background:var(--petrol);border-color:var(--petrol);transform:translateY(-6px);box-shadow:var(--shadow-petrol)}
  .service:hover::after{width:56px}
  .service:hover .service-icon{background:var(--oranje);border-color:var(--oranje);color:var(--white);transform:scale(1.07) rotate(-4deg)}
  .service:hover h3,.service:hover .more{color:var(--white)}
  .service:hover p{color:var(--on-petrol)}
  .service:hover .more::after{transform:translateX(4px)}
}

/* Werkterrein: rijen met labels; bij hover kleurt een label petrol en verschijnt de volledige naam */
.scope{margin-top:48px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px 30px 12px}
.scope-rows{display:grid;margin-top:16px}
.scope-row{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:10px 32px;padding-block:18px;border-top:1px solid var(--line);align-items:start}
.scope-label{font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.35;color:var(--ink);padding-top:5px}
.scope-body{display:grid;gap:10px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;font-family:var(--f-display);font-weight:500;font-size:15px;line-height:1.2;color:var(--petrol);background:var(--mist);border:1px solid transparent;padding:7px 13px;border-radius:99px;cursor:default;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.chip-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:max-content;max-width:min(240px,70vw);background:var(--ink);color:var(--white);font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.35;text-align:center;padding:8px 11px;border-radius:7px;opacity:0;visibility:hidden;pointer-events:none;z-index:5;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.chip-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
.scope-note{font-size:15.5px;color:var(--muted)}
@media (hover:hover){
  .chip:hover{background:var(--petrol);color:var(--white);transform:translateY(-2px)}
  .chip:hover .chip-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
@media (max-width:700px){
  .scope{padding:22px 20px 8px}
  .scope-row{grid-template-columns:1fr}
  .scope-label{padding-top:0}
}

/* Werkwijze: lijn met knooppunten */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px}
.steps::before{background:var(--line)}
.steps::after{background:var(--petrol);transform-origin:left;transform:scaleX(1)}
.step{position:relative;display:grid;gap:10px;align-content:start;padding-top:38px}
.step::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--petrol);z-index:1;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.step-n{font-family:var(--f-display);font-weight:600;color:var(--oranje);font-size:15px}
.step h3{font-size:21px;transition:color var(--t) var(--ease)}
.step p{font-size:16.5px;color:var(--muted)}
.step:focus-visible::before{background:var(--oranje);border-color:var(--oranje);transform:scale(1.35)}
@media (hover:hover){
  .step:hover::before{background:var(--oranje);border-color:var(--oranje);transform:scale(1.35)}
  .step:hover h3{color:var(--petrol)}
}

/* Producten. Met werkfoto: voeg .products-wrap--photo toe en zet de foto in .products-photo */
.products-wrap{margin-top:40px}
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.products-photo{display:none}
.products-wrap--photo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:24px;align-items:stretch}
.products-wrap--photo .products-photo{display:block;border-radius:14px;overflow:hidden;min-height:280px}
.products-wrap--photo .products-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .8s var(--ease)}
@media (hover:hover){.products-wrap--photo .products-photo:hover img{transform:scale(1.03)}}
.products-wrap--photo .products{grid-template-columns:repeat(2,minmax(0,1fr))}
.sector,.product{grid-template-rows:auto 1fr auto}
.product{border-left:3px solid var(--oranje);text-decoration:none;color:inherit;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-left-width var(--t) var(--ease)}
.product .more{margin-top:auto}
@media (hover:hover){
  .product:hover{transform:translateY(-5px);border-left-width:8px;box-shadow:var(--shadow-soft)}
  .product:hover .more::after{transform:translateX(4px)}
}
.product:focus-visible{border-left-width:8px}

/* Over mij */
.about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:28px}
.about-text p+p{margin-top:16px}
.credentials{margin-top:20px;font-size:16px;color:var(--muted)}
.values{margin-top:14px;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan-text)}
.about-text .more{margin-top:18px}
.gilde{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;gap:14px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.gilde img{height:70px;width:auto;justify-self:start}
.gilde h3{font-size:20px}
.gilde p{font-size:16.5px;color:var(--muted)}
@media (hover:hover){.gilde:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}}
.employers-label{margin-top:48px}
.employers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.employer{height:88px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;text-align:center;padding:10px 14px;font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.25;color:var(--grey);transition:color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.employer img{max-height:44px;width:auto;filter:grayscale(1);opacity:.65;transition:filter var(--t) var(--ease),opacity var(--t) var(--ease)}
.employer:focus-visible{color:var(--petrol);border-color:var(--petrol)}
@media (hover:hover){
  .employer:hover{color:var(--petrol);border-color:var(--petrol);transform:translateY(-3px)}
  .employer:hover img{filter:none;opacity:1}
}

/* Cases */
.case-label{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tan-text)}
@media (hover:hover){.case:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}}

/* Kennisbank */
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:32px}
.article{display:grid;gap:10px;padding-block:24px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);align-content:start}
.article-topic{font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tan-text)}
.article h3{font-size:20px;justify-self:start;padding-bottom:3px;background:linear-gradient(var(--oranje),var(--oranje)) 0 100%/0 2px no-repeat;transition:background-size .45s var(--ease)}
.article:hover h3,.article:focus-visible h3{background-size:100% 2px}

/* Oproep: petrol met wit monogram als watermerk */
.cta{position:relative;overflow:hidden;background:var(--petrol);color:var(--white);scroll-margin-top:80px}
.cta-mark{position:absolute;right:-50px;bottom:-70px;width:460px;max-width:70%;opacity:.09;pointer-events:none}
.cta-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:28px 48px;align-items:center;padding-block:76px}
.cta h2{color:var(--white);font-size:clamp(28px,3.4vw,40px)}
.cta p{color:var(--on-petrol);margin-top:12px;font-size:19px;max-width:640px}
.cta p a{color:var(--white);font-weight:600}

/* Footer */
.site-footer{background:var(--ink);color:var(--on-petrol);font-size:16px}
.footer-inner{padding-block:56px 32px;display:grid;gap:40px}
.footer-cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) minmax(0,1.35fr);gap:32px}
.footer-brand img{height:46px;width:auto}
.footer-cols>*{min-width:0}
.site-footer a{overflow-wrap:anywhere}
.site-footer h2{font-family:var(--f-display);font-weight:600;color:var(--white);font-size:15px;letter-spacing:.06em;margin-bottom:12px}
.site-footer ul{display:grid;gap:6px}
.site-footer a{color:var(--on-petrol);text-decoration:none}
.site-footer a:hover{color:var(--white);text-decoration:underline}
.footer-legal{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px}

/* 404 */
.notfound{padding-block:120px 140px}
.notfound h1{font-size:clamp(36px,5vw,56px);margin-top:16px}
.notfound p{margin-top:18px;font-size:20px;max-width:600px;color:var(--muted)}
.notfound .hero-ctas{margin-top:32px}
.notfound .notfound-other{margin-top:36px;font-size:16px}

/* ---------- Subpagina's ---------- */
.main-nav ul a[aria-current="page"]::after,.main-nav ul a.is-active::after{width:100%}

/* Kruimelpad */
.crumbs{padding-top:26px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;font-size:15px;line-height:1.4;color:var(--muted)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin-inline:10px;color:var(--grey)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--petrol);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

/* Paginakop */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--mist),rgba(234,241,243,0));z-index:-1}
.page-hero-inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:34px 76px}
.page-hero .eyebrow{margin-top:6px}
.page-hero h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.015em;margin-top:16px}
.page-lead{font-size:20px;margin-top:20px;max-width:640px}
.page-hero .hero-ctas{margin-top:30px}
.visual--compact{aspect-ratio:5/4;max-width:400px}

/* Samenvatting rechts in de kop: petrol kaart met wat u krijgt en de passende producten */
.summary{position:relative;overflow:hidden;isolation:isolate;background:var(--petrol);color:var(--white);border-radius:16px;padding:30px 30px 26px;display:grid;gap:14px;box-shadow:var(--shadow-petrol)}
.summary::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%,rgba(255,255,255,.14),transparent 60%);z-index:-1}
.summary-mark{position:absolute;right:-40px;bottom:-46px;width:230px;opacity:.08;z-index:-1;pointer-events:none}
.summary .service-icon{background:var(--oranje);border-color:var(--oranje);color:var(--white);margin-bottom:4px}
.summary-label{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-petrol)}
.summary-label::before{content:"";width:22px;height:2px;background:var(--oranje);flex:none}
.summary-text{font-size:17px;line-height:1.55}
.summary-label--products{margin-top:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.summary-products{display:grid}
.summary-products a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);color:var(--white);text-decoration:none;font-family:var(--f-display);font-weight:500;font-size:16.5px;line-height:1.3}
.summary-products a::after{content:"\2192";color:var(--oranje);grid-column:2;grid-row:1;transition:transform var(--t) var(--ease)}
.summary-products small{grid-column:1;font-family:var(--f-body);font-weight:400;font-size:14.5px;color:var(--on-petrol)}
.summary-products a:focus-visible{outline-color:var(--white)}
@media (hover:hover){.summary-products a:hover::after{transform:translateX(5px)}.summary-products a:hover{color:var(--creme)}}
.summary-note{font-size:14.5px;color:var(--on-petrol)}

/* Sectiekop met het oranje lijntje */
.section h2.kop{margin-top:0}
.kop::before{content:"";display:block;width:28px;height:2px;background:var(--oranje);margin-bottom:18px}
.section h2.eyebrow{font-size:13px;margin-top:0;letter-spacing:.14em}

/* Herkent u dit? */
.situations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.situation{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--petrol);border-radius:10px;padding:20px 22px 20px 24px;font-size:17.5px;min-width:0;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),border-left-width var(--t) var(--ease)}
@media (hover:hover){.situation:hover{border-left-color:var(--oranje);border-left-width:8px;transform:translateY(-3px);box-shadow:var(--shadow-soft)}}

/* Kop links, inhoud rechts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:32px 72px;align-items:start}
.split-head{position:sticky;top:120px}
.split-head p{margin-top:16px;color:var(--muted);font-size:18px}

/* Lijst met vinkjes: het rondje kleurt oranje bij hover */
.checklist li{position:relative;padding:15px 0 15px 46px;border-top:1px solid var(--line);font-size:18px;min-width:0}
.checklist li:last-child{border-bottom:1px solid var(--line)}
.checklist li::before{content:"";position:absolute;left:0;top:14px;width:28px;height:28px;border-radius:50%;background:var(--mist);transition:background-color var(--t) var(--ease),transform var(--t) var(--ease)}
.checklist li::after{content:"";position:absolute;left:10.5px;top:20px;width:7px;height:12px;border:solid var(--petrol);border-width:0 2px 2px 0;transform:rotate(45deg);transition:border-color var(--t) var(--ease)}
.section--mist .checklist li::before,.panel .checklist li::before{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.panel .checklist li::before{background:var(--mist);box-shadow:none}
@media (hover:hover){
  .checklist li:hover::before{background:var(--oranje);box-shadow:none;transform:scale(1.08)}
  .checklist li:hover::after{border-color:var(--white)}
}

/* Twee panelen naast elkaar */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.duo--top{margin-top:0}
.panel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:32px 30px 30px;display:grid;gap:16px;align-content:start;min-width:0;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.panel h2,.panel h3{font-size:24px;margin-top:0}
.panel>p{color:var(--muted);font-size:17.5px}
.panel .checklist{margin-top:4px}
@media (hover:hover){.panel:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}}

/* Tekst met een kaart ernaast */
.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.feature-text p{font-size:19px;margin-top:18px;max-width:680px}
.gilde-mini{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;display:grid;gap:14px;justify-items:start;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.gilde-mini img{height:64px;width:auto}
.gilde-mini p{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.3}
@media (hover:hover){.gilde-mini:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}}

/* Genummerde lijst, bijvoorbeeld wat de AMLR verandert */
.changes{counter-reset:nr;display:grid;gap:12px}
.changes li{counter-increment:nr;position:relative;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 22px 20px 74px;font-size:18px;min-width:0;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.changes li::before{content:counter(nr);position:absolute;left:20px;top:17px;width:36px;height:36px;border-radius:50%;border:2px solid var(--petrol);color:var(--petrol);display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
@media (hover:hover){
  .changes li:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
  .changes li:hover::before{background:var(--oranje);border-color:var(--oranje);color:var(--white)}
}

/* Drie onderwerpen, het eerste in petrol */
.topics{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:20px}
.topic{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:30px 28px;display:grid;gap:14px;align-content:start;min-width:0;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.topic h2{font-size:23px}
.section .topic h2{margin-top:0}
.topic p{font-size:17px;color:var(--muted)}
.topic--petrol{position:relative;overflow:hidden;isolation:isolate;background:var(--petrol);border-color:var(--petrol)}
.topic--petrol::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%,rgba(255,255,255,.14),transparent 60%);z-index:-1}
.topic--petrol h2{color:var(--white)}
.topic--petrol p{color:var(--on-petrol);font-size:18px}
.dots li{position:relative;padding:6px 0 6px 22px;font-size:17px}
.dots li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--oranje)}
@media (hover:hover){.topic:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}.topic--petrol:hover{box-shadow:var(--shadow-petrol)}}

/* Tabel */
.table-wrap{overflow-x:auto;margin-top:28px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.table{width:100%;border-collapse:collapse;font-size:17px}
.table th{text-align:left;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tan-text);padding:15px 20px;background:var(--creme)}
.table td{padding:15px 20px;border-top:1px solid var(--line);vertical-align:top}
.table td:last-child{font-family:var(--f-display);font-weight:600;color:var(--petrol)}
.table tbody tr{transition:background-color var(--t) var(--ease)}
@media (hover:hover){.table tbody tr:hover{background:var(--mist)}}

/* Uitgelicht blok in petrol */
.callout{position:relative;overflow:hidden;isolation:isolate;background:var(--petrol);color:var(--white);border-radius:16px;padding:34px 32px;display:grid;gap:16px;box-shadow:var(--shadow-petrol)}
.callout::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%,rgba(255,255,255,.14),transparent 60%);z-index:-1}
.section .callout h2{color:var(--white);font-size:26px;margin-top:0}
.callout p{color:var(--on-petrol);font-size:18px}
.duo--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}

/* Ervaring als citaat met oranje streep */
.note{margin-top:28px;padding:4px 0 4px 22px;border-left:3px solid var(--oranje)}
.note-label{display:block;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan-text);margin-bottom:8px}
.note p{font-family:var(--f-display);font-weight:500;font-size:19px;line-height:1.45;color:var(--petrol)}

/* Andere diensten */
.related{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:28px}
.related a{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px 20px;hyphens:auto;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:500;font-size:16.5px;line-height:1.3;transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.related .service-icon{width:44px;height:44px;flex:none}
.related .service-icon svg{width:22px;height:22px}
.related a:focus-visible{background:var(--petrol);border-color:var(--petrol);color:var(--white)}
.related a:focus-visible .service-icon{background:var(--oranje);border-color:var(--oranje);color:var(--white)}
@media (hover:hover){
  .related a:hover{background:var(--petrol);border-color:var(--petrol);color:var(--white);transform:translateY(-4px)}
  .related a:hover .service-icon{background:var(--oranje);border-color:var(--oranje);color:var(--white)}
}

/* Over mij: verhaal */
.story{max-width:820px}
.story p{font-size:20px;margin-top:20px}
.story .statement{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.12;letter-spacing:-.01em;color:var(--petrol);margin-top:48px}
.statement .dot{color:var(--oranje)}
.story .statement+p{margin-top:18px}

/* Over mij: rollen als rijen; bij hover wordt de rij wit en verschijnt de oranje stip */
.roles{margin-top:36px;border-bottom:1px solid var(--line)}
.role{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:8px 40px;padding:24px 18px;border-top:1px solid var(--line);border-radius:10px;transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.role h3{display:flex;align-items:center;gap:12px;font-size:20px;color:var(--petrol)}
.role h3::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--oranje);flex:none;transform:scale(0);transition:transform var(--t) var(--ease)}
.role p{font-size:17.5px;color:var(--muted)}
@media (hover:hover){
  .role:hover{background:var(--white);box-shadow:var(--shadow-soft)}
  .role:hover h3::after{transform:scale(1)}
}

/* Over mij: loopbaan als tijdlijn */
.timeline{position:relative;margin-top:44px}
.timeline::before,.timeline::after{content:"";position:absolute;left:7px;top:12px;bottom:40px;width:2px}
.timeline::before{background:var(--line)}
.timeline::after{background:var(--petrol);transform-origin:top;transform:scaleY(1)}
.tl-item{position:relative;display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:4px 32px;padding:0 0 36px 46px}
.tl-item::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--white);border:2px solid var(--petrol);z-index:1;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.tl-item:first-child::before{background:var(--oranje);border-color:var(--oranje)}
.tl-period{font-family:var(--f-display);font-weight:600;font-size:15px;line-height:1.4;color:var(--tan-text);padding-top:3px}
.tl-org{font-size:21px;transition:color var(--t) var(--ease)}
.tl-role{margin-top:6px;font-size:17px;color:var(--muted);max-width:660px}
@media (hover:hover){
  .tl-item:hover::before{background:var(--oranje);border-color:var(--oranje);transform:scale(1.3)}
  .tl-item:hover .tl-org{color:var(--petrol)}
}

/* Over mij: kernwaarden als kaarten die naar petrol omslaan */
.values-list{display:grid;gap:14px;margin-top:28px}
.value{background:var(--white);border:1px solid var(--line)}
.value strong{font-size:20px}
.value span{font-size:16.5px}
.duo .split-col h2{margin-top:0}
.duo .checklist{margin-top:28px}
.split-col{min-width:0}

/* Over mij: Gilde en eerdere werkgevers */
.about--gilde{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);margin-top:0;align-items:center}
.about--gilde .employers{grid-template-columns:repeat(2,minmax(0,1fr))}
.about--gilde .employers-label{margin-top:0}

/* Colofon en privacyverklaring */
.legal{max-width:780px}
.legal h2{font-size:25px;margin-top:48px}
.legal h2:first-child{margin-top:0}
.section .legal h2{margin-top:48px}
.section .legal h2:first-child{margin-top:0}
.legal p,.legal ul,.legal dl{margin-top:14px;font-size:18px}
.legal ul{list-style:disc;padding-left:22px}
.legal li+li{margin-top:6px}
.legal li::marker{color:var(--oranje)}
.legal dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 32px;padding:24px 26px;background:var(--mist);border-radius:12px}
.legal dt{font-family:var(--f-display);font-weight:600}
.legal dd{margin:0;overflow-wrap:anywhere}
.legal-meta{margin-top:14px;font-size:16px;color:var(--muted)}

@media (prefers-reduced-motion:no-preference){
  .js .page-hero .eyebrow::before{animation:draw-x .8s var(--ease) .2s both}
  .js .summary{animation:panel 1.1s var(--ease) .1s both}
  .js .timeline::after{transform:scaleY(0);transition:transform 1.6s var(--ease) .2s}
  .js .timeline.is-visible::after{transform:scaleY(1)}
}

/* ---------- Beweging bij laden en scrollen (alleen met JavaScript en zonder 'minder beweging') ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .ring{animation:pulse 3.4s var(--ease) 1.2s infinite}
  @keyframes pulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}70%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}}

  .js .hero-anim{animation:rise .9s var(--ease) both}
  .js .hero-anim:nth-child(2){animation-delay:.08s}
  .js .hero-anim:nth-child(3){animation-delay:.16s}
  .js .hero-anim:nth-child(4){animation-delay:.24s}
  .js .hero-anim:nth-child(5){animation-delay:.32s}
  .js .hero-anim:nth-child(6){animation-delay:.4s}
  .js .hero .eyebrow::before{animation:draw-x .8s var(--ease) .2s both}
  .js .visual{animation:panel 1.1s var(--ease) .1s both}
  .js .visual-mono{animation:rise 1.1s var(--ease) .45s both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes panel{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* Inloop met een animatie zonder 'forwards', zodat de hover-bewegingen daarna gewoon werken */
  .js .reveal,.js .reveal-group>*{opacity:0}
  .js .reveal.is-visible,.js .reveal-group.is-visible>*{opacity:1;animation:rise .85s var(--ease) backwards}
  .js .reveal-group.is-visible>*:nth-child(2){animation-delay:.08s}
  .js .reveal-group.is-visible>*:nth-child(3){animation-delay:.16s}
  .js .reveal-group.is-visible>*:nth-child(4){animation-delay:.24s}
  .js .reveal-group.is-visible>*:nth-child(5){animation-delay:.32s}
  .js .reveal-group.is-visible>*:nth-child(6){animation-delay:.4s}
  .js .steps::after{transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
  .js .steps.is-visible::after{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Responsief ---------- */
@media (max-width:1060px){
  .hero-inner{gap:40px}
  .grid--4,.proof-list,.employers,.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services,.grid--3,.articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .steps::before,.steps::after{display:none}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .products-wrap--photo{grid-template-columns:1fr}
  .products-wrap--photo .products-photo{aspect-ratio:16/9;min-height:0}
}
@media (max-width:820px){
  .hero-inner,.about,.cta-inner{grid-template-columns:1fr}
  .hero-inner{padding-block:48px 56px}
  .visual{justify-self:start;max-width:360px}
  .section{padding-block:64px}
}
@media (max-width:600px){
  body{font-size:17px}
  .hero-lead{font-size:18.5px}
  .grid--4,.grid--3,.proof-list,.services,.products,.articles,.steps,.products-wrap--photo .products{grid-template-columns:1fr}
  .employers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-contact{grid-column:1/-1}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center}
  .visual{max-width:100%;aspect-ratio:16/10}
  .visual-mono{left:9%;bottom:16%;width:48%}
}

/* ---------- Responsief: subpagina's ---------- */
@media (max-width:1060px){
  .page-hero-inner{gap:40px}
  .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic--petrol{grid-column:1/-1}
  .split{gap:28px 48px}
  .related{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .page-hero-inner,.split,.feature,.duo,.duo--wide,.about--gilde{grid-template-columns:1fr}
  .page-hero-inner{padding-block:24px 56px}
  .split-head{position:static}
  .visual--compact{display:none}
  .summary{max-width:560px}
  .role{grid-template-columns:1fr;padding-inline:14px}
}
@media (max-width:600px){
  .page-lead,.story p{font-size:18.5px}
  .situations,.topics{grid-template-columns:1fr}
  .tl-item{grid-template-columns:1fr;padding-left:40px}
  .legal dl{grid-template-columns:1fr;gap:2px;padding:20px}
  .legal dd+dt{margin-top:10px}
  .summary{padding:26px 22px 22px}
  .panel{padding:26px 22px 24px}
  .changes li{padding-left:66px}
  .changes li::before{left:16px}
  .page-hero .hero-ctas .btn{flex:1 1 100%;justify-content:center}
  .related{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Tabel als kaartjes onder elkaar */
  .table-wrap{overflow:visible}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block}
  .table tr{padding:14px 18px;border-top:1px solid var(--line)}
  .table tbody tr:first-child{border-top:0}
  .table td{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:12px;padding:4px 0;border-top:0}
  .table td::before{content:attr(data-label);font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tan-text);padding-top:3px}
}
.services--top,.scope--top{margin-top:0}
.section .gilde .gilde-kop{font-size:20px;margin-top:0;letter-spacing:0}
.section--creme .checklist li::before{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.page-hero--text .page-hero-inner{padding-bottom:28px}
.section--legal{padding-top:36px}

/* Cv opvragen en LinkedIn */
.about-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px}
.about-text .about-links .more{margin-top:0}
.more--ext::after,.btn--ext::after{content:"\2197";transition:transform var(--t) var(--ease)}
@media (hover:hover){.more--ext:hover::after,.btn--ext:hover::after{transform:translate(2px,-2px)}}
.cv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:12px;padding:28px 30px;border-radius:14px;background:var(--mist);border-left:3px solid var(--oranje)}
.cv-bar h3{font-size:21px}
.cv-bar p{margin-top:6px;color:var(--muted);font-size:17px;max-width:560px}
.cv-actions{display:flex;flex-wrap:wrap;gap:12px}
.cv-actions .btn{background:var(--white)}
@media (hover:hover){.cv-actions .btn:hover{background:var(--petrol)}}
@media (max-width:600px){
  .cv-bar{padding:24px 20px}
  .cv-actions,.cv-actions .btn{width:100%;justify-content:center}
}

/* Werkwijze met foto (homepage): foto links, stappen als verticale lijn rechts */
.method{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px 80px;align-items:center}
.method-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-soft)}
.method-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .8s var(--ease)}
@media (hover:hover){.method-photo:hover img{transform:scale(1.03)}}
.method .steps{grid-template-columns:1fr;gap:0;margin-top:34px}
.method .steps::before,.method .steps::after{display:none}
.method .step{padding:0 0 26px 44px;gap:6px}
.method .step::before{top:2px}
.method .step:not(:last-child)::after{content:"";position:absolute;left:8px;top:22px;bottom:-2px;width:2px;background:var(--petrol)}
@media (max-width:820px){
  .method{grid-template-columns:1fr;gap:36px}
  .method-photo{aspect-ratio:16/11;max-width:560px}
  .method-photo img{object-position:50% 18%}
}
.hero-lead+.hero-lead{margin-top:14px}

/* Contactpagina */
.contact-list{display:grid;gap:14px;margin-top:4px}
.contact-list dt{font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-petrol)}
.contact-list dd{margin:2px 0 0;font-size:17px;color:var(--white);overflow-wrap:anywhere}
.contact-list a{color:var(--white)}
.contact-list a:hover{color:var(--creme)}
.panel .cv-actions{margin-top:6px}

/* Taalknop NL | EN */
.lang-switch{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--grey);margin:0}
.lang-switch a{color:var(--muted);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.lang-switch a:hover,.lang-switch a:focus-visible{color:var(--petrol);border-bottom-color:var(--oranje)}
.lang-switch .is-current{color:var(--petrol);padding:6px 2px}
@media (max-width:1060px){.lang-switch{font-size:16px;padding-top:4px}}