/* ============================================================
   Cohentis — gedeelde stylesheet
   Fonts: Fraunces (serif) + Figtree (sans), lokaal gehost.
   Zie assets/fonts/ en de @font-face blok hieronder.
   ============================================================ */

/* --- FONTS ---
   Figtree v9 + Fraunces v38, latin, van gwfh.mranftl.com
   Alle bestanden in assets/fonts/
   Enkel de gewichten die de site effectief gebruikt.
   ---------------------------------------------------------- */

/* Figtree */
@font-face { font-family:'Figtree'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/figtree-v9-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/figtree-v9-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/figtree-v9-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/figtree-v9-latin-600.woff2') format('woff2'); }

/* Fraunces */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/fraunces-v38-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/fraunces-v38-latin-600.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/fraunces-v38-latin-700.woff2') format('woff2'); }

/* --- TOKENS --- */
:root{
  --petrol:#12716C; --petrol-deep:#0E4F4B; --petrol-dark:#0A3936; --petrol-light:#7FC4BE;
  --terra:#C87941; --terra-soft:#D98E4A; --terra-light:#E3A56B;
  --cream:#FAF8F5; --cream-2:#F2EEE7; --ink:#2C2C2A; --ink-soft:#565652; --line:#E3DDD3;
  --maxw:1120px; --r:10px;
}

/* --- RESET --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'Figtree',system-ui,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-0.01em;line-height:1.15}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
picture{display:block}

/* --- LAYOUT --- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;color:var(--terra)}

/* --- NAV --- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* De CTA staat naast het menu in plaats van erin: op mobiel moet ze
   zichtbaar blijven terwijl de links achter de hamburger zitten.
   margin-left:auto houdt links + CTA rechts, zoals voorheen. */
.nav .wrap{display:flex;align-items:center;gap:30px;min-height:74px;padding:10px 0}
.nav .nav-links{margin-left:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand .tagline{font-family:'Figtree',sans-serif;font-size:11px;font-weight:500;letter-spacing:.2px;color:var(--ink-soft);margin-top:1px}
/* De tagline staat niet meer in de nav. Die kapt op 1120px en moet zes
   menu-items plus de CTA kwijt; de nieuwe regel is 480px breed en duwt de
   links dan naar een tweede regel, bij elke schermbreedte. Nagemeten: de
   oude, kortere regel paste nog tot 1160px, de nieuwe nergens. In de voet
   staat ze op elke pagina, en op de homepage ook als hero-eyebrow. */
.brand .tagline{display:none}
.brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--petrol-deep);letter-spacing:-0.5px}
.brand .name .dot{color:var(--terra)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-soft);transition:color .18s}
.nav-links a:hover{color:var(--petrol-deep)}
.nav-links a.active{color:var(--petrol-deep);font-weight:600}
/* text-decoration stond eerder op .nav-links a; de CTA valt daar niet meer onder */
/* text-decoration stond eerder op .nav-links a; de CTA valt daar niet meer onder.
   min-width houdt de knop even breed als het label verschilt: de companion-app
   pagina heeft "Start de app" in plaats van "Plan een gesprek", en zonder deze
   regel verspringt het hele menu daar 31px omdat het rechts uitlijnt. */
.nav-cta{display:inline-flex;align-items:center;background:var(--petrol);color:var(--cream)!important;padding:10px 20px;border-radius:8px;font-weight:600!important;text-decoration:none;font-size:15px;transition:background .18s;min-width:156px;justify-content:center}
.nav-cta:hover{background:var(--petrol-deep)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--petrol-deep);margin:5px 0;transition:.2s}

/* --- NAV SUBMENU --- */
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:5px}
.nav-item>a .chev{transition:transform .2s;font-size:10px;opacity:.6}
.nav-item:hover>a .chev{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.15);
  min-width:240px;padding:8px 0;opacity:0;visibility:hidden;
  transition:opacity .18s,visibility .18s,transform .18s;
  transform:translateX(-50%) translateY(-6px);z-index:100}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:10px 18px;font-size:14.5px;font-weight:500;
  color:var(--ink-soft);text-decoration:none;transition:background .15s,color .15s;
  white-space:nowrap}
.submenu a:hover{background:var(--cream-2);color:var(--petrol-deep)}

/* --- BUTTONS --- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Figtree',sans-serif;font-weight:600;font-size:16px;padding:15px 28px;border-radius:9px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .16s, background .18s, box-shadow .18s;line-height:1}
.btn-primary{background:var(--terra);color:#fff}
.btn-primary:hover{background:#b96d38;transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(200,121,65,.7)}
.btn-ghost{background:transparent;color:var(--petrol-deep);border-color:var(--petrol)}
.btn-ghost:hover{background:var(--petrol);color:var(--cream)}
.btn-on-dark{background:var(--terra);color:#fff}
.btn-on-dark:hover{background:var(--terra-soft)}
.btn-ghost-dark{background:transparent;color:var(--cream);border-color:rgba(250,248,245,.4)}
.btn-ghost-dark:hover{background:rgba(250,248,245,.1);border-color:var(--cream)}
.btn-full{width:100%;justify-content:center}
.arrow{transition:transform .18s}
.btn:hover .arrow{transform:translateX(3px)}

/* --- HERO (index.html) --- */
.hero{position:relative;overflow:hidden;padding:52px 0 60px}
.hero-bg-mark{position:absolute;right:-140px;top:50%;transform:translateY(-50%);opacity:.06;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero-inner{max-width:760px}
.hero h1{font-size:clamp(34px,4.6vw,54px);color:var(--petrol-dark);margin:18px 0 0;text-wrap:pretty}
.hero .lead{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);margin-top:20px;max-width:560px;line-height:1.55}
.hero .lead strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* --- PAGE HERO (subpagina's) --- */
.page-hero{position:relative;overflow:hidden;padding:80px 0 20px}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.page-hero .eyebrow{display:block;margin-bottom:16px}
.page-hero h1{font-size:clamp(32px,4.6vw,52px);color:var(--petrol-dark);max-width:780px}
.page-hero .lead{font-size:clamp(18px,2.1vw,22px);color:var(--ink-soft);margin-top:20px;max-width:680px;line-height:1.55}
.page-hero-mark{position:absolute;right:-120px;top:50%;transform:translateY(-50%);opacity:.05;pointer-events:none;z-index:0}
.page-hero .kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--petrol);text-decoration:none;margin-bottom:20px}
.page-hero .kicker svg{transform:rotate(180deg)}
.page-hero .sub{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(19px,2.3vw,25px);color:var(--terra);margin-top:16px;line-height:1.3}

/* --- SECTION SHELL --- */
section{position:relative}
.band{padding:72px 0}
.band-cream2{background:var(--cream-2)}
.band-petrol{background:var(--petrol-deep);color:var(--cream)}
.band-petrol h2{color:var(--cream)}
.section-head{max-width:640px;margin-bottom:52px}
.section-head h2{font-size:clamp(28px,3.6vw,40px);color:var(--petrol-dark);margin-top:14px}
.band-petrol .section-head h2{color:var(--cream)}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:18px}
.sec{max-width:760px;margin:0 auto}
.sec .eyebrow{margin-bottom:14px;display:block}
.sec h2{font-size:clamp(27px,3.4vw,38px);color:var(--petrol-dark);margin-bottom:22px}
.band-petrol .sec h2{color:var(--cream)}
.sec p{margin-bottom:18px;color:var(--ink-soft);font-size:17.5px}
.band-petrol .sec p{color:rgba(250,248,245,.84)}
.sec p:last-of-type{margin-bottom:0}
.sec strong{color:var(--ink);font-weight:600}
.band-petrol .sec strong{color:#fff}
.pull{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(22px,2.8vw,30px);line-height:1.35;color:var(--petrol-dark);margin:6px 0 8px}
.band-petrol .pull{color:var(--terra-light)}

/* --- INTRO / PROBLEM --- */
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.intro-lead{padding-left:24px;border-left:4px solid var(--petrol)}
.intro-lead p{font-size:clamp(21px,2.5vw,27px);font-family:'Fraunces',serif;font-weight:400;line-height:1.4;color:var(--petrol-dark)}
.intro-body p{margin-bottom:18px;color:var(--ink-soft);font-size:17.5px}
.intro-body p:last-child{margin-bottom:0}
.intro-body strong{color:var(--ink);font-weight:600}
.intro-highlight{color:var(--petrol)!important;font-weight:600}

/* --- SERVICES --- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px}
.svc{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:34px 32px 30px;position:relative;transition:transform .2s, box-shadow .2s, border-color .2s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.band-cream2 .svc{background:#fff}
.svc:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(14,79,75,.35);border-color:var(--petrol-light)}
.svc-num{position:absolute;top:30px;right:30px}
.svc .svc-num{position:static;margin-bottom:16px}
.svc h3{font-size:23px;color:var(--petrol-dark);margin-bottom:12px;padding-right:0}
.svc p{color:var(--ink-soft);font-size:16px;flex:1}
.svc .more{margin-top:20px;font-weight:600;font-size:15px;color:var(--petrol);display:inline-flex;align-items:center;gap:7px}

/* --- APPROACH (petrol band) --- */
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.approach-copy .eyebrow{color:var(--terra-light)}
.approach-copy h2{margin:14px 0 20px}
.approach-copy p{color:rgba(250,248,245,.82);font-size:18px;margin-bottom:26px}
.approach-visual{display:flex;justify-content:center;align-items:center}

/* --- OVER GEERT (index.html sectie) --- */
.over-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.over-photo{position:relative}
.over-photo img,.person-photo img{aspect-ratio:675/901;width:100%;border-radius:18px;display:block;box-shadow:0 24px 60px -30px rgba(14,79,75,.5)}
.over-photo .photo-badge{position:absolute;left:-26px;bottom:-26px;z-index:2;background:var(--cream);border-radius:16px;padding:16px 18px;box-shadow:0 14px 34px -16px rgba(14,79,75,.45);display:flex;align-items:center;justify-content:center}
.over-copy .eyebrow{color:var(--terra)}
.over-copy h2{margin:14px 0 22px;color:var(--petrol-dark)}
.over-copy p{color:var(--ink-soft);margin-bottom:18px}
.over-copy .signoff{font-family:'Fraunces',serif;font-size:20px;color:var(--petrol-deep);font-style:italic}
.over-copy .more{margin-top:8px;font-weight:600;color:var(--petrol);display:inline-flex;gap:7px;text-decoration:none}

/* --- PERSON (over.html) --- */
.person{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start;max-width:900px;margin:0 auto}
.person-photo{position:relative}
.person-photo img{width:100%;border-radius:18px;display:block;box-shadow:0 24px 60px -30px rgba(14,79,75,.5)}
.person-photo .photo-badge{position:absolute;left:-22px;bottom:-22px;z-index:2;background:var(--cream);border-radius:14px;padding:13px 15px;box-shadow:0 14px 34px -16px rgba(14,79,75,.45)}
.person-photo .cap{margin-top:16px;font-size:14px;color:var(--ink-soft);text-align:center}
.person-photo .cap strong{display:block;color:var(--petrol-deep);font-size:15px;font-weight:600}
.person-copy .eyebrow{display:block;margin-bottom:12px}
.person-copy h2{font-size:clamp(24px,3vw,32px);color:var(--petrol-deep);margin-bottom:18px}
.person-copy p{margin-bottom:16px;color:var(--ink-soft);font-size:17px}
.person-copy strong{color:var(--ink);font-weight:600}

/* --- NAAM BAND (over.html) --- */

/* --- DIAGRAM --- */
.diagram-band{background:var(--petrol-deep);padding:76px 0}
.diagram-wrap{max-width:820px;margin:0 auto;text-align:center}
.diagram-wrap .eyebrow{color:var(--terra-light);margin-bottom:12px;display:block}
.diagram-wrap h2{color:var(--cream);font-size:clamp(24px,3vw,34px);margin-bottom:36px}
.diagram-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;text-align:left}
.dstep{background:rgba(250,248,245,.06);border:1px solid rgba(250,248,245,.14);border-radius:14px;padding:22px 20px}
.dstep .n{font-family:'Fraunces',serif;font-size:15px;color:var(--terra-light);font-weight:600}
.dstep h3{color:var(--cream);font-size:17px;margin:8px 0 8px}
.dstep p{color:rgba(250,248,245,.72);font-size:14.5px;line-height:1.55}

/* --- CLOSING --- */
.closing{max-width:720px;margin:0 auto;text-align:center}
.closing .eyebrow{display:block;margin-bottom:14px}
.closing h2{font-size:clamp(27px,3.4vw,40px);color:var(--petrol-dark);margin-bottom:20px}
.closing p{font-size:19px;color:var(--ink-soft);margin-bottom:14px}
.closing .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* --- WAITLIST --- */
.wait{background:var(--petrol-deep);border-radius:22px;padding:56px 52px;color:var(--cream);position:relative;overflow:hidden}
.wait .wait-mark{position:absolute;right:-60px;bottom:-60px;opacity:.1}
.wait-inner{position:relative;z-index:1;max-width:560px}
.wait .eyebrow{color:var(--terra-light)}
.wait h2{color:var(--cream);font-size:clamp(26px,3vw,34px);margin:12px 0 14px}
.wait p{color:rgba(250,248,245,.82);margin-bottom:24px}
.wait-form{display:flex;gap:12px;flex-wrap:wrap}
.wait-form input[type=email]{flex:1;min-width:220px;padding:15px 18px;border-radius:9px;border:1.5px solid rgba(250,248,245,.25);background:rgba(250,248,245,.07);color:var(--cream);font-family:inherit;font-size:16px}
.wait-form input[type=email]::placeholder{color:rgba(250,248,245,.5)}
.wait-form input[type=email]:focus{outline:none;border-color:var(--terra-light)}
.wait-consent{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:13.5px;color:rgba(250,248,245,.7)}
.wait-consent a{color:var(--terra-light)}
.wait-note{margin-top:14px;font-size:13.5px;color:rgba(250,248,245,.6)}

/* --- APP-SECTIE (index.html) --- */
.app-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:48px 52px;position:relative;overflow:hidden}
.app-card .app-mark{position:absolute;right:-50px;bottom:-50px;opacity:.06;pointer-events:none}
.app-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;position:relative;z-index:1}
/* Zonder het teamblok ernaast staat de copy alleen in de kaart. Eén kolom
   dus, met een leesbare regellengte in plaats van de volle 1120px. */
.app-grid--solo{grid-template-columns:minmax(0,1fr)}
.app-grid--solo .app-copy{max-width:760px}
.app-copy .eyebrow{color:var(--terra)}
.app-copy h2{color:var(--petrol-dark);margin:12px 0 16px;font-size:clamp(26px,3.2vw,36px)}
.app-copy p{color:var(--ink-soft);font-size:17px;margin-bottom:16px}
.app-copy p:last-of-type{margin-bottom:0}
.app-copy strong{color:var(--ink);font-weight:600}
.app-privacy{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:14.5px;color:var(--ink-soft)}
.app-privacy svg{flex:none;color:var(--petrol)}
.app-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.app-team{background:var(--cream-2);border-radius:14px;padding:26px 28px}
.app-team .k{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--terra);margin-bottom:10px}
.app-team h3{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--petrol-dark);margin-bottom:10px;line-height:1.25}
.app-team p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:16px}
.app-team a{font-weight:600;font-size:15px;color:var(--petrol);display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.app-team a:hover{color:var(--petrol-deep)}

/* --- CONTACT CTA --- */
.contact-cta{text-align:center;max-width:640px;margin:0 auto}
.contact-cta h2{font-size:clamp(28px,3.6vw,42px);color:var(--petrol-dark)}
.contact-cta p{color:var(--ink-soft);font-size:19px;margin:18px 0 34px}
.contact-cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --- CONTACT PAGINA --- */
.contact-band{padding:56px 0 72px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px;display:flex;flex-direction:column}
.card.petrol{background:var(--petrol-deep);border-color:var(--petrol-deep)}
.card h2{font-size:22px;color:var(--petrol-dark);margin-bottom:12px}
.card.petrol h2{color:var(--cream)}
.card p{color:var(--ink-soft);font-size:16px;margin-bottom:22px}
.card.petrol p{color:rgba(250,248,245,.82)}
.card .grow{flex:1}
.card.petrol .btn-primary{background:var(--terra)}
.card.petrol .btn-primary:hover{background:var(--terra-soft)}
.agenda-mock{border:1px dashed rgba(250,248,245,.3);border-radius:12px;padding:20px;text-align:center;color:rgba(250,248,245,.55);font-size:13.5px;margin-bottom:22px}
/* Directe contactgegevens als kaarten naast de titel (vervangt de .direct rij) */
.contact-direct{display:flex;flex-direction:column;gap:14px}
.contact-direct-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.contact-direct-card .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:var(--cream-2);color:var(--petrol)}
.contact-direct-card .k{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:2px}
.contact-direct-card a{color:var(--petrol-deep);text-decoration:none;font-weight:600}
.contact-direct-card a:hover{color:var(--terra)}
.legal-note{max-width:820px;margin:34px auto 0;font-size:13.5px;color:var(--ink-soft);text-align:center}

/* --- CONTENT BLOCKS (detailpagina's) --- */
.content{max-width:720px;margin:0 auto}
.block{margin-bottom:44px}
.block:last-child{margin-bottom:0}
.block h2{font-size:22px;color:var(--petrol-deep);margin-bottom:16px}
.block p{margin-bottom:16px;color:var(--ink-soft);font-size:17.5px}
.block p:last-child{margin-bottom:0}
.block strong{color:var(--ink);font-weight:600}
.callout{background:var(--petrol-deep);color:var(--cream);border-radius:16px;padding:30px 32px;margin:8px 0}
.callout .eyebrow{color:var(--terra-light);display:block;margin-bottom:10px}
.callout h3{color:var(--cream);font-size:21px;margin-bottom:10px}
.callout p{color:rgba(250,248,245,.82);font-size:16px;margin-bottom:18px}
.callout p:last-of-type{margin-bottom:0}
/* Tweekoloms variant: tekst links, formulier rechts */
.callout-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;padding:36px 40px}
.callout-split h3{font-size:24px}
@media(max-width:900px){.callout-split{grid-template-columns:1fr;gap:24px;padding:30px 26px}}
.callout .btn-primary{background:var(--terra)}
.callout .btn-primary:hover{background:var(--terra-soft)}
.subcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px;margin-bottom:18px}
.card-grid .subcard{margin-bottom:0}
.subcard h3{font-size:19px;color:var(--petrol-dark);margin-bottom:10px}
.subcard p{color:var(--ink-soft);font-size:16px;margin-bottom:14px}
.subcard .price{font-size:14.5px;color:var(--petrol);font-weight:600;margin-bottom:14px}
.not-this{border-left:3px solid var(--terra);background:var(--cream-2);border-radius:0 12px 12px 0;padding:22px 26px;margin:8px 0}
.not-this h2{margin-bottom:12px}
.cta-band{background:var(--cream-2);padding:64px 0;text-align:center}
.cta-band .inner{max-width:600px;margin:0 auto}
.cta-band h2{font-size:clamp(24px,3vw,32px);color:var(--petrol-dark);margin-bottom:26px}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --- FOOTER --- */
footer{background:var(--petrol-dark);color:rgba(250,248,245,.72);padding:64px 0 30px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(250,248,245,.14)}
.foot-brand .name{font-family:'Fraunces',serif;font-size:22px;color:var(--cream);font-weight:600}
.foot-brand .name .dot{color:var(--terra-light)}
.foot-brand p{margin-top:14px;max-width:280px;line-height:1.6}
.foot-brand .tagline{margin-top:6px;font-size:13px;color:var(--terra-light);font-weight:500;letter-spacing:.2px}
.foot-col h4{color:var(--cream);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.foot-col a{display:block;color:rgba(250,248,245,.72);text-decoration:none;margin-bottom:10px;transition:color .16s}
.foot-col a:hover{color:var(--terra-light)}
.foot-contact div{margin-bottom:10px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:13px;color:rgba(250,248,245,.55)}
.foot-bottom a{color:rgba(250,248,245,.55);text-decoration:none;margin-left:18px}
.foot-bottom a:hover{color:var(--terra-light)}

/* --- REVEAL --- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* --- COOKIE BANNER --- */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--petrol-dark);color:rgba(250,248,245,.88);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:14.5px;border-top:2px solid var(--petrol)}
#cookie-banner p{margin:0;max-width:680px}
#cookie-banner a{color:var(--terra-light);text-decoration:underline}
#cookie-banner .cb-btns{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
.cb-accept{background:var(--terra);color:#fff;border:none;padding:10px 22px;border-radius:8px;font-family:'Figtree',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:background .16s}
.cb-accept:hover{background:var(--terra-soft)}
.cb-decline{background:transparent;color:rgba(250,248,245,.72);border:1px solid rgba(250,248,245,.3);padding:10px 18px;border-radius:8px;font-family:'Figtree',sans-serif;font-weight:500;font-size:14px;cursor:pointer;transition:border-color .16s}
.cb-decline:hover{border-color:rgba(250,248,245,.7)}

/* --- CALENDLY PLACEHOLDER --- */
.calendly-wrap{position:relative}
.calendly-placeholder{border:1px dashed rgba(250,248,245,.3);border-radius:12px;padding:28px;text-align:center;color:rgba(250,248,245,.6);font-size:14px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.calendly-placeholder button{background:rgba(250,248,245,.12);color:rgba(250,248,245,.88);border:1px solid rgba(250,248,245,.3);padding:10px 20px;border-radius:8px;font-family:'Figtree',sans-serif;font-weight:500;font-size:14px;cursor:pointer;transition:background .16s}
.calendly-placeholder button:hover{background:rgba(250,248,245,.2)}

/* --- FORMS --- */
label.fl{display:block;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin:0 0 6px}
.field{width:100%;padding:13px 15px;border-radius:9px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);font-family:'Figtree',sans-serif;font-size:15.5px;margin-bottom:16px;transition:border-color .16s}
.field:focus{outline:none;border-color:var(--petrol-light)}
.field.err{border-color:#c0392b}
textarea.field{min-height:110px;resize:vertical}
.consent{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-soft);margin-bottom:20px}
.consent a{color:var(--petrol);font-weight:600}
.form-msg{padding:13px 16px;border-radius:9px;font-size:15px;margin-bottom:16px;display:none}
.form-msg.ok{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.form-msg.fail{background:#fdecea;color:#b71c1c;border:1px solid #ef9a9a}

/* --- JURIDISCHE PAGINA'S --- */
/* Juridische pagina's: compacte hero met de merk-driehoeken erachter */
.legal-hero{position:relative;overflow:hidden;padding:44px 0 12px}
.legal-hero > *{position:relative;z-index:1}
.legal-hero .page-hero-mark{position:absolute;right:-120px;top:50%;transform:translateY(-50%);opacity:.05;pointer-events:none;z-index:0}
.legal-hero .eyebrow{display:block;margin-bottom:14px}
.legal-hero h1{font-size:clamp(28px,4vw,44px);color:var(--petrol-dark)}
.legal-hero .meta{font-size:14px;color:var(--ink-soft);margin-top:14px}
.legal-body{max-width:720px;margin:0 auto;padding:40px 28px 80px}
.legal-body h2{font-size:20px;color:var(--petrol-deep);margin:36px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin-bottom:16px;color:var(--ink-soft);font-size:16.5px}
/* Intro-alinea als quote-blok, zelfde patroon als elders op de site */
.legal-body .legal-intro{padding-left:20px;border-left:4px solid var(--petrol);color:var(--ink);font-size:17.5px}

/* Slotblok: waar kan je terecht, en door naar het andere beleid */
.legal-foot{background:var(--cream-2);border-radius:14px;padding:26px 28px;margin-top:44px}
.legal-foot h2{margin:0 0 10px;font-size:19px}
.legal-foot p{margin:0 0 16px;font-size:16px}
.legal-foot .chips{display:flex;flex-wrap:wrap;gap:10px}
.legal-foot .chips a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--petrol-deep);font-weight:600;font-size:14.5px;text-decoration:none;transition:border-color .18s,transform .18s}
.legal-foot .chips a:hover{border-color:var(--petrol);transform:translateY(-2px)}
.legal-body ul{margin:0 0 16px 20px;color:var(--ink-soft);font-size:16.5px}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--petrol);text-decoration:underline}
.legal-body table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:15px}
.legal-body th{background:var(--cream-2);text-align:left;padding:10px 12px;border:1px solid var(--line);font-weight:600;color:var(--ink)}
.legal-body td{padding:10px 12px;border:1px solid var(--line);color:var(--ink-soft);vertical-align:top}

/* --- RESPONSIVE --- */
@media(max-width:900px){
  .intro-grid,.approach-grid,.over-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .svc-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  /* width:100% is nodig: met alleen `margin:0 auto` valt een grid-item terug
     op shrink-to-fit, en dat is 0 zolang een lazy-image nog geen maat heeft. */
  .over-photo,.person-photo{width:100%;max-width:360px;margin-left:auto;margin-right:auto}
  .approach-visual{order:-1}
  .intro-lead p{font-size:22px}
  .diagram-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:820px){
  .person{grid-template-columns:1fr;gap:32px}
  .person-photo{max-width:320px;margin:0 auto}
  .app-card{padding:36px 28px}
  .app-grid{grid-template-columns:1fr;gap:32px}
  .contact-grid{grid-template-columns:1fr}
}
/* De navigatie past pas vanaf ~948px op één regel: daaronder liepen de
   links door tot voorbij de rand en werd de CTA van het scherm geduwd
   (zichtbaar op een telefoon in landschap en op tablets). De grens stond
   eerst op 940px; tussen 941 en 947px wipte de nav dan nog net naar twee
   regels. Nagemeten per 4px: 948 is het eerste punt waarop hij past. */
@media(max-width:947px){
  .nav-links{position:fixed;inset:75px 0 auto 0;background:var(--cream);flex-direction:column;align-items:stretch;gap:0;padding:12px 0;border-bottom:1px solid var(--line);box-shadow:0 12px 30px -18px rgba(0,0,0,.3);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 28px}
  .nav .nav-links{margin-left:0}
  .nav-cta{margin-left:auto}
  .nav-toggle{display:block}
  .submenu{position:static;transform:none!important;opacity:1;visibility:visible;
    box-shadow:none;border:none;border-radius:0;background:var(--cream-2);
    padding:0 0 0 16px;display:none}
  .nav-item.open .submenu{display:block}
  .nav-item>a .chev{display:inline-block;margin-left:auto;font-size:13px;opacity:.75}
  /* hover-reset eerst: op touch blijft :hover plakken en zou hij de open-staat overrulen */
  .nav-item:hover>a .chev{transform:none}
  .nav-item.open>a .chev{transform:rotate(180deg)}
}
@media(max-width:680px){
  .nav .wrap{gap:10px}
  .nav-cta{margin-left:auto;padding:11px 16px;font-size:14.5px;white-space:nowrap;min-width:0;flex:0 0 auto}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:64px 0 72px}
  .band{padding:64px 0}
  .wait{padding:40px 28px}
  #cookie-banner{flex-direction:column;align-items:flex-start}
}
/* Smalle toestellen (en telefoons met een grotere systeemschaal, wat de
   CSS-breedte terugbrengt tot ~320px): merk, CTA en hamburger passen daar
   alleen naast elkaar als ze alle drie een maat kleiner worden. Zonder dit
   kromp de CTA en liep het label links en rechts buiten de knop. */
@media(max-width:400px){
  .nav .wrap{gap:8px}
  .brand{gap:9px}
  .brand svg{width:30px;height:26px}
  .brand .name{font-size:21px}
  .nav-cta{padding:10px 12px;font-size:13.5px}
  .nav-toggle{padding:8px 0 8px 2px}
}
/* Lange samenstellingen (Dutch is fond of them) mogen breken in plaats van
   de regel buiten het scherm te duwen. */
h1,h2,h3,.lead,.hero h1{overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){
  .js .reveal,.reveal{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Taalwisselaar */
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.lang-switch a{color:var(--ink-soft);text-decoration:none}
.lang-switch a.on{color:var(--petrol-deep)}
.lang-switch a:hover{color:var(--terra)}
.lang-switch .sep{color:var(--line)}

/* ============================================================
   TOEGANKELIJKHEID
   ============================================================ */

/* Zichtbare focus voor toetsenbordgebruikers (WCAG 2.4.7).
   :focus-visible laat de ring weg bij muisklikken. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--terra);
  outline-offset:3px;
  border-radius:4px;
}
.band-petrol a:focus-visible,.band-petrol button:focus-visible,
#cookie-banner a:focus-visible,#cookie-banner button:focus-visible{
  outline-color:var(--terra-light);
}
/* De formuliervelden zetten outline uit; geef ze een echte focusindicatie terug. */
.field:focus-visible,.wait-form input[type=email]:focus-visible,
.cta-box input[type=email]:focus-visible{
  outline:3px solid var(--terra);
  outline-offset:2px;
}

/* Sla-over-link: eerste tabstop op elke pagina */
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:300;
  background:var(--petrol-deep);color:var(--cream);
  padding:12px 20px;border-radius:0 0 9px 9px;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:top .16s;
}
.skip-link:focus{top:0}

/* Doelen van de sla-over-link en ankers vallen niet onder de sticky nav */
main[id],#main{scroll-margin-top:90px}

/* ============================================================
   TABELLEN — laat brede tabellen scrollen i.p.v. de pagina
   ============================================================ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.table-scroll table{margin:0}
@media(max-width:680px){
  .table-scroll table{min-width:520px}
}

/* ============================================================
   FORMULIERBERICHTEN
   Stond eerder als style.cssText in vier losse inline scripts.
   ============================================================ */
.form-msg{display:none;padding:10px 16px;border-radius:9px;font-size:14px;margin-bottom:10px}
.form-msg.is-shown{display:block}
.form-msg.is-warn {background:#F2EEE7;color:#0A3936;border:1px solid #E3DDD3}
.form-msg.is-ok   {background:#EAF3F2;color:#0E4F4B;border:1px solid #BFD9D6}
.form-msg.is-error{background:#F9ECE4;color:#8a3d18;border:1px solid #E8C9B2}

/* Op de donkere banden */
.form-msg--dark.is-warn {background:rgba(255,255,255,.10);color:#FAF8F5;border-color:rgba(250,248,245,.3)}
.form-msg--dark.is-ok   {background:rgba(255,255,255,.12);color:#FAF8F5;border-color:rgba(250,248,245,.4)}
.form-msg--dark.is-error{background:rgba(255,80,80,.15);color:#FAF8F5;border-color:rgba(255,100,100,.4)}

/* Contactformulier: groter, en ook de invulwaarschuwing is rood */
.form-msg--alert{padding:13px 16px;font-size:15px;margin-bottom:16px}
.form-msg--alert.is-warn,.form-msg--alert.is-error{background:#fdecea;color:#b71c1c;border-color:#ef9a9a}

/* ============================================================
   REDESIGN DIENSTPAGINA'S
   Layoutpatronen uit de handoff-briefing. Ze benutten de volle
   1120px in plaats van de smalle contentkolom van 720px.
   ============================================================ */

/* 1. Gesplitste page-hero: titel + CTA's links, contextblok rechts.
      De padding zit op de modifier, niet op .page-hero zelf: die klasse
      staat ook op ruim vijftig inzicht- en hubpagina's, en die hebben
      hun eigen ritme (80px 0 20px). */
.page-hero--split{padding:56px 0 64px}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
.hero-note{align-self:center;padding-left:24px;border-left:4px solid var(--petrol)}
.hero-note p{margin:0;color:var(--ink-soft);font-size:17.5px}
/* De hero-note had tot nu toe altijd één alinea, vandaar margin:0. Met twee
   alinea's liepen ze in elkaar over. */
.hero-note p + p{margin-top:14px}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* Fase-navigator (hero van dienst-verandermanagement) */
.fase-nav{background:var(--petrol-deep);border-radius:22px;padding:30px 32px;color:var(--cream);box-shadow:0 24px 60px -30px rgba(14,79,75,.5)}
.fase-nav .k{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--terra-light);margin-bottom:14px}
.fase-nav a{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid rgba(250,248,245,.12);text-decoration:none;color:var(--cream);transition:color .16s}
.fase-nav a:last-child{border-bottom:none}
.fase-nav a:hover{color:var(--terra-light)}
.fase-nav .nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(250,248,245,.12);color:var(--petrol-light);font-family:'Fraunces',serif;font-weight:600;font-size:14px}

/* 2. Sectie met sticky linkerrail: kop + signatuurquote links, inhoud rechts */
.rail-grid{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:32px 56px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.rail{position:sticky;top:100px}
.rail h2{font-size:clamp(24px,2.8vw,32px);color:var(--petrol-dark);margin:14px 0 18px}
.rail .sig{margin:0}
/* Lopende tekst in de rechterkolom krijgt hetzelfde ritme als .block p:
   die wrapper is hier vervangen door het rail-grid. */
.rail-grid > div > p{margin-bottom:16px;color:var(--ink-soft);font-size:17.5px}
.rail-grid > div > p:last-child{margin-bottom:0}
.petrol-split > div > p{margin-bottom:16px}
.petrol-split > div > p:last-child{margin-bottom:0}
.band-petrol .em{color:var(--terra-light);font-weight:600}
.sig{font-family:'Fraunces',Georgia,serif;font-size:19px;line-height:1.45;color:var(--petrol-deep);border-left:3px solid var(--terra);padding:2px 0 2px 18px;margin:0 0 18px}

/* 3. Verdiepingskaarten (vervangen de grijze .deep-blokken) */
.deep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:10px}
.deep-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;border-top:3px solid var(--petrol)}
.deep-card h3{font-family:'Fraunces',serif;font-size:17px;color:var(--petrol-dark);margin-bottom:10px;line-height:1.3}
.deep-card p{margin-bottom:10px;color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.deep-card p:last-child{margin-bottom:0}

/* 4. Fase- en stappenrijen over de volle breedte */
.phase-row{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:16px 48px;padding:36px 0;border-bottom:1px solid var(--line);align-items:start}
.phase-row:last-child{border-bottom:none}
.phase-row .head{display:flex;align-items:center;gap:12px}
.phase-nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--petrol);color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:15px}
.phase-row p{margin-bottom:14px;color:var(--ink-soft);font-size:17px}
.phase-row p:last-child{margin-bottom:0}
.phase-row h3{font-size:21px;color:var(--petrol-deep);margin:0;line-height:1.2}
.phase-row .short{margin:10px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
/* Slotnoten onder een reeks fase-rijen: uitgelijnd met de tekstkolom rechts */
.traject-slot{margin-top:28px;padding-left:calc(300px + 48px)}
.traject-slot p{margin-bottom:14px;color:var(--ink-soft);font-size:17px}
.traject-slot p:last-child{margin-bottom:0}
@media(max-width:900px){.traject-slot{padding-left:0}}

/* 5. Petrol-band met kop links, tekst rechts */
.petrol-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.band-petrol .clients{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-weight:600;color:var(--petrol-light);font-size:15px}

/* Volle-breedte variant van .content: de dienstpagina's gebruiken het
   hele 1120px-grid in plaats van de smalle leeskolom. */
.content-wide{max-width:none;margin:0 auto}
.content-wide > .block + .block{margin-top:48px}

/* 6. Kaartenroosters voor resultaten, situaties en FAQ.
      Let op: article.css definieert een eigen .card-grid voor de
      hub- en inzichtpagina's. Die laadt ná site.css en wint daar,
      wat de bedoeling is: dit raster geldt op de dienstpagina's. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card-grid--wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
/* Slotalinea's onder een kaartenraster: leesbare regellengte, links uitgelijnd */
.praktijk-slot{max-width:680px;margin-top:28px}
.praktijk-slot p{margin-bottom:16px;color:var(--ink-soft);font-size:17px}
.praktijk-slot p:last-child{margin-bottom:0}
.check-card{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.check-card svg{flex:none;margin-top:3px}
.faq-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.faq-card h3{font-family:'Fraunces',serif;font-size:17px;color:var(--petrol-dark);margin-bottom:10px;line-height:1.3}
.faq-card p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.6}

/* 7. Gelaagde dienstpagina (portfolio, PMO, programma en change office).
      Deze regels stonden tot nu toe in een <style> op de pagina zelf. Nu de
      pagina alleen nog site.css-klassen gebruikt, horen ze hier. */

/* .band-alt stond in vier pagina's apart; één definitie volstaat. */
.band-alt{background:var(--cream-2)}

/* Laag-navigator onder de hero: vier ankerlinks naar de lagen. Wrapt
   vanzelf naar een tweede regel op een smal scherm. */
.layer-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.layer-nav .wrap{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.layer-nav-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.layer-nav a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:15px;font-weight:600;color:var(--petrol-deep)}
.layer-nav a:hover{color:var(--terra)}
.layer-nav .nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--cream-2);color:var(--petrol);font-family:'Fraunces',serif;font-size:13px}

/* Werkwijze-stappen: het nummer staat naast de titel, niet erboven. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:0}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.step .nr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--petrol);color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:14px}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.step-head .nr{flex:none;margin-bottom:0}
.step-head h3{margin:0;font-size:18px;color:var(--petrol-dark)}
.step p{color:var(--ink-soft);font-size:15.5px;line-height:1.55;margin-bottom:10px}
.step p:last-child{margin-bottom:0}

/* Rollenkaarten. Het raster komt van .card-grid, alleen de kaart is eigen. */
.inzet-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.inzet-card h3{font-family:'Fraunces',serif;font-size:18px;color:var(--petrol-dark);margin:0 0 8px}
.inzet-card p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin:0}

/* Slotalinea onder een raster. */
.rail-outro{margin:18px 0 0;color:var(--ink-soft);font-size:17.5px}
.steps-outro{margin:26px 0 0;color:var(--ink-soft);font-size:17.5px}

/* --- Mobiel --- */
@media(max-width:900px){
  .page-hero-grid,.rail-grid,.petrol-split{grid-template-columns:1fr;gap:28px}
  .rail{position:static}
  .phase-row{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .deep-grid,.card-grid,.card-grid--wide{grid-template-columns:1fr}
}
@media(max-width:680px){
  .hero{padding:40px 0 44px}
  .hero h1{font-size:31px}
  .band{padding:44px 0}
  .page-hero--split{padding:36px 0 44px}
  /* CTA's stapelen en vol-breed, primair bovenaan */
  .hero-cta,.hero-cta-row,.cta-band .btns,.contact-cta .btns{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.hero-cta-row .btn,.cta-band .btn,.contact-cta .btn{justify-content:center}
  /* Footer: merkblok boven, daaronder twee kolommen */
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}

/* Onder ~420px past de tweekoloms voet niet meer: de kolommen konden niet
   verder krimpen dan hun inhoud en duwden de pagina 27px breder dan het
   scherm, waardoor de hele pagina horizontaal meeschoof. Staat achteraan
   omdat een later 680px-blok de voet weer op twee kolommen zet. */
@media(max-width:420px){
  .foot-grid{grid-template-columns:1fr;gap:28px}
}

/* Een grid-kolom van 1fr krimpt niet onder de langste ononderbroken tekst.
   Op 320px duwden "Organisatorische transformatie" en een lange URL de
   pagina daardoor breder dan het scherm; minmax(0,1fr) laat de kolom wél
   krimpen en de tekst gewoon afbreken. */
.svc-grid>*,.diagram-steps>*,.card-grid>*,.deep-grid>*,.rail-grid>*{min-width:0}
@media(max-width:900px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:420px){
  /* lange URL's en e-mailadressen mogen midden in het woord afbreken */
  .legal-body a,.contact-direct-card a,.foot-col a{overflow-wrap:anywhere}
  /* anywhere i.p.v. break-word: alleen deze variant telt ook mee voor de
     minimale breedte van een grid-kolom */
  h1,h2,h3,.svc h3{overflow-wrap:anywhere}
  .svc{padding:28px 22px 26px}
}

/* Calendly-agenda op de contactpagina.
   De widget staat in een kaart met 32px padding, binnen een .wrap met 28px
   padding. Op een telefoon bleef daar ~200px over, terwijl de widget 320px
   opeiste: de pagina schoof dan tot 94px naar rechts. Onder 620px neemt het
   kader daarom het grootste deel van de kaartpadding terug, zodat de agenda
   bijna de volle schermbreedte krijgt maar de kaart eromheen zichtbaar
   blijft. overflow-x is het vangnet: schuift er ooit toch iets uit, dan
   schuift het kader mee en niet de hele pagina. */
#calendly-container{max-width:100%;overflow-x:auto}
#calendly-container .calendly-inline-widget{min-width:0;max-width:100%}
@media(max-width:620px){
  /* max-width:none is nodig: 100% rekent tegen de kaart en zou de negatieve
     marges meteen weer wegkappen. */
  #calendly-container.has-calendly{margin-left:-22px;margin-right:-22px;max-width:none}
  #calendly-container.has-calendly .calendly-inline-widget{border-radius:12px;overflow:hidden}
}
@media(max-width:420px){
  /* smallere zijmarge op de contactband geeft de agenda er nog wat bij */
  .contact-band .wrap{padding-left:16px;padding-right:16px}
}