/* Zenitpat Life — gedeelde stylesheet (Blok A, 25 jul 2026).
   Bron van waarheid voor alle niet-compass-pagina's; het @font-face-blok blijft inline. */
:root{
    --navy:#0F325A;
    --navy-deep:#0A2440;
    --navy-ink:#071A30;
    --slate:#4F6377;
    --body-c:#3D4A59;
    --beige:#F5F3E8;
    --beige-deep:#EFEBDB;
    --hairline:#DCD6BF;
    --hairline-w:#E6E2D2;
    --olive:#5F783C;
    --olive-dark:#4C6130;
    --brown:#783C1E;
    --gold:#C9A45C;
    --white:#FFFFFF;
    --todo:#C9962E;
    --todo-bg:#FCF6E6;
    --maxw:1200px;
    --gutter:clamp(20px,4.2vw,56px);
    --section:clamp(74px,9vw,130px);
    --section-tight:clamp(56px,7vw,100px);
    --stack-lg:clamp(44px,6vw,78px);
    --stack-md:clamp(36px,4.5vw,64px);
    --col-gap:clamp(48px,6.5vw,88px);
    --head:"Work Sans","Avenir Next","Helvetica Neue",sans-serif;
    --body:"Montserrat","Avenir Next","Helvetica Neue",sans-serif;
    --ease:cubic-bezier(.22,.68,.32,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
  body{margin:0;background:var(--white);color:var(--body-c);font-family:var(--body);font-size:16px;line-height:1.75;font-weight:400}
  ::selection{background:var(--navy);color:#fff}
  h1,h2,h3{font-family:var(--head);color:var(--navy);line-height:1.12;text-wrap:balance;margin:0;font-weight:600}
  p{margin:0}
  img{max-width:100%;display:block}
  a{color:var(--olive-dark)}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
  .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:300}
  .skip:focus{left:12px;top:12px}

  /* grain texture for warm sections */
  .grain{position:relative}
  .grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .grain>*{position:relative;z-index:1}

  /* star + rule motif (from the logo's stars) */
  .starline{display:flex;align-items:center;gap:14px;color:var(--olive);margin:0 0 20px}
  .starline i{display:block;width:46px;height:1px;background:currentColor;opacity:.45}
  .starline svg{flex:none}
  .starline.center{justify-content:center}
  .starline.on-dark{color:var(--gold)}

  .eyebrow{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:var(--brown)}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 34px;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:2px;cursor:pointer;border:none;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
  .btn:active{transform:scale(.97)}
  /* responsive-fixes */
  @media(max-width:520px){.btn{white-space:normal;line-height:1.45;text-align:center}}
  /* tiny-screen-fixes */
  html,body{overflow-x:clip}
  @media(max-width:374px){
    .hero h1{font-size:clamp(30px,10.5vw,40px)}
    .cinfo.plaque{padding:36px 20px 32px}
    .todo{overflow-wrap:anywhere}
    .wrap{padding:0 20px}
  }
  .btn .arr{display:inline-block;transition:transform .25s var(--ease);font-size:16px;line-height:1}
  .btn:hover .arr{transform:translateX(5px)}
  .btn-primary{background:var(--olive);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.14)}
  .btn-primary:hover,.btn-primary:focus-visible{background:var(--olive-dark)}
  .btn-navy{background:var(--navy);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .btn-navy:hover,.btn-navy:focus-visible{background:var(--navy-deep)}
  .btn-outline{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
  .btn-outline:hover,.btn-outline:focus-visible{background:var(--navy);color:#fff}
  .btn-outline.on-dark{border-color:rgba(255,255,255,.8);color:#fff}
  .btn-outline.on-dark:hover,.btn-outline.on-dark:focus-visible{background:#fff;color:var(--navy)}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--olive);outline-offset:2px}

  /* ---------- header ---------- */
  header.site{position:sticky;top:0;z-index:100;background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(7,26,48,.28)}
  .head-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:40px;height:82px}
  .logo{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
  .logo img{height:50px;width:auto}
  .logo span{font-family:var(--head);font-weight:600;font-size:19px;color:#fff;letter-spacing:.03em;white-space:nowrap}
  nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
  nav.main a:not(.head-cta){font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;padding:10px 14px;white-space:nowrap;position:relative}
  nav.main a:not(.head-cta)::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
  nav.main a:not(.head-cta):hover{color:#fff}
  nav.main a:not(.head-cta):hover::after{transform:scaleX(1)}
  nav.main a:not(.head-cta)[aria-current="page"]{color:#fff}
  nav.main a:not(.head-cta)[aria-current="page"]::after{transform:scaleX(1)}
  .head-cta{margin-left:18px;min-height:44px;padding:10px 22px;font-size:12px}
  .menu-btn{display:none;margin-left:auto;background:none;border:none;cursor:pointer;padding:12px;flex-direction:column;gap:5px;min-width:48px;min-height:48px;justify-content:center;align-items:center}
  .menu-btn span{display:block;width:24px;height:2px;background:#fff;transition:transform .25s var(--ease),opacity .2s}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-panel{display:none;background:var(--navy-deep);padding:14px var(--gutter) 30px}
  .mobile-panel a{display:block;padding:15px 0;font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .mobile-panel .btn{margin-top:22px;width:100%}
  @media(max-width:1080px){
    nav.main{display:none}
    .menu-btn{display:flex}
    .mobile-panel.open{display:block}
  }

  main[data-page]{display:none}
  main[data-page].active{display:block}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;background-size:cover;background-position:center;isolation:isolate}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
    linear-gradient(180deg,rgba(7,26,48,.46) 0%,rgba(7,26,48,.10) 28%,rgba(7,26,48,.40) 58%,rgba(7,26,48,.82) 100%),
    linear-gradient(95deg,rgba(7,26,48,.46) 0%,rgba(7,26,48,.06) 62%)}
  .hero-in{max-width:var(--maxw);margin:0 auto;padding:clamp(112px,15vh,168px) var(--gutter) clamp(72px,10vh,104px);width:100%}
  .hero .starline{color:var(--gold)}
  .hero .eyebrow{color:#E7DDC2;display:block}
  .hero h1{color:#fff;font-size:clamp(40px,6vw,76px);font-weight:600;letter-spacing:-0.025em;max-width:15ch;text-shadow:0 2px 30px rgba(7,26,48,.35)}
  .hero p.sub{color:rgba(255,255,255,.95);font-size:clamp(17px,1.6vw,19.5px);line-height:1.7;max-width:50ch;margin:28px 0 40px;text-shadow:0 1px 16px rgba(7,26,48,.4)}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
  .hero .proof{margin-top:32px;font-size:13.5px;color:rgba(255,255,255,.62)}
  .hero.short{min-height:62vh}
  /* hand-drawn underline accent */
  .mark{font-style:normal;position:relative;white-space:nowrap}
  .mark svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.22em;color:var(--gold);overflow:visible}
  .mark svg path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1s .9s var(--ease) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  /* staggered entrance */
  .hero-in>*{opacity:0;transform:translateY(26px);animation:rise .8s var(--ease) forwards}
  .hero-in>*:nth-child(1){animation-delay:.05s}
  .hero-in>*:nth-child(2){animation-delay:.15s}
  .hero-in>*:nth-child(3){animation-delay:.28s}
  .hero-in>*:nth-child(4){animation-delay:.42s}
  .hero-in>*:nth-child(5){animation-delay:.56s}
  @keyframes rise{to{opacity:1;transform:none}}
  .scroll-cue{position:absolute;right:44px;bottom:40px;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.65);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;writing-mode:vertical-rl}
  .scroll-cue i{display:block;width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));animation:cue 2.2s var(--ease) infinite}
  @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  @media(max-width:760px){.scroll-cue{display:none}}

  /* ---------- sections ---------- */
  section{padding:var(--section) 0}
  section.tight{padding:var(--section-tight) 0}
  section .eyebrow{display:block;margin-bottom:18px}
  section h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:26px;letter-spacing:-0.02em}
  section h1.as-h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:26px;letter-spacing:-0.02em}
  .lead{font-size:17.5px;line-height:1.85;max-width:60ch}
  .center{text-align:center}
  .center .lead{margin-left:auto;margin-right:auto}
  .bg-beige{background:var(--beige)}

  /* values: vintage ranch plaques */
  .values{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:var(--stack-lg)}
  .plaque{background:#FFFDF8;border:1px solid var(--hairline);position:relative;padding:52px 28px 40px;text-align:center;box-shadow:0 1px 2px rgba(15,50,90,.05),0 14px 34px rgba(15,50,90,.07);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .plaque::before{content:"";position:absolute;inset:9px;border:1px solid rgba(201,164,92,.5);pointer-events:none}
  .plaque .notch{position:absolute;top:9px;left:50%;transform:translate(-50%,-50%);background:#FFFDF8;padding:0 12px;color:var(--gold);line-height:0}
  .plaque:hover{transform:translateY(-5px);box-shadow:0 2px 3px rgba(15,50,90,.05),0 24px 48px rgba(15,50,90,.12)}
  .value h3{font-size:16px;margin-bottom:12px;letter-spacing:.06em;text-transform:uppercase}
  .value p{font-size:14px;line-height:1.8;color:var(--slate)}
  @media(max-width:900px){.values{grid-template-columns:1fr 1fr;gap:24px}}
  @media(max-width:560px){.values{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){.plaque:hover{transform:none}}

  /* stats strip */
  .stats{background:var(--navy);position:relative;isolation:isolate;overflow:hidden}
  .stats::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .stats-in{max-width:var(--maxw);margin:0 auto;padding:clamp(52px,6vw,76px) var(--gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
  .stat b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(30px,3.4vw,44px);color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .stat span{display:block;margin-top:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
  .stat small{display:block;margin-top:6px;font-size:12px;color:rgba(255,255,255,.5)}
  @media(max-width:700px){.stats-in{grid-template-columns:1fr;gap:36px}}

  /* audience split */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:var(--stack-md)}
  .aud{position:relative;min-height:460px;display:flex;align-items:flex-end;isolation:isolate;text-decoration:none;overflow:hidden;border-radius:2px}
  .aud>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.01);transition:transform .8s var(--ease)}
  .aud:hover>img{transform:scale(1.06)}
  .aud::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,48,.02) 30%,rgba(7,26,48,.82) 100%);z-index:-1;transition:background .3s}
  .aud-in{padding:42px}
  .aud .k{display:block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
  .aud h3{color:#fff;font-size:28px;margin-bottom:10px;letter-spacing:-.01em}
  .aud p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.92);max-width:42ch;margin-bottom:22px}
  .aud .faux{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid var(--gold);padding-bottom:6px}
  .aud .faux::after{content:"\2192";font-size:17px;transition:transform .25s var(--ease)}
  .aud:hover .faux::after{transform:translateX(6px)}
  @media(max-width:760px){.split{grid-template-columns:1fr}.aud{min-height:360px}}

  /* recognition list: editorial pull-quote treatment */
  .pains{display:grid;grid-template-columns:1fr 1fr;gap:0 76px;margin-top:32px}
  .pain{padding:38px 0 38px 52px;border-bottom:1px dotted #C6BFA4;position:relative}
  .pain::before{content:"\2014";position:absolute;left:0;top:34px;font-family:var(--head);font-weight:600;font-size:26px;color:var(--gold);line-height:1}
  .pain:nth-last-child(-n+2){border-bottom:none}
  .pain h3{font-size:21px;margin-bottom:10px;letter-spacing:-.01em}
  .pain p{font-size:15.5px;line-height:1.75;color:var(--slate)}
  @media(max-width:700px){.pains{grid-template-columns:1fr}.pain:nth-last-child(2){border-bottom:1px dotted #C6BFA4}}

  /* photo band with oversized quote mark */
  .band{position:relative;min-height:56vh;background-size:cover;background-position:center;display:flex;align-items:center;isolation:isolate}
  @media(max-width:900px){.band{background-attachment:scroll}}
  .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,48,.38),rgba(7,26,48,.52));z-index:-1}
  .band .wrap{width:100%;position:relative}
  .band .qmark{position:absolute;top:-70px;left:12px;font-family:var(--head);font-weight:700;font-size:220px;line-height:1;color:rgba(255,255,255,.14);pointer-events:none;user-select:none}
  .band blockquote{margin:0;font-family:var(--head);font-weight:600;font-size:clamp(26px,3.4vw,42px);color:#fff;max-width:24ch;line-height:1.25;text-wrap:balance;letter-spacing:-.015em;text-shadow:0 2px 24px rgba(7,26,48,.4)}
  .band cite{display:block;margin-top:22px;font-family:var(--body);font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

  /* evidence: giant typographic verdicts */
  .evidence{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:var(--stack-lg)}
  .evidence>div{border-top:3px solid var(--navy);padding-top:30px}
  .evidence .kw{font-family:var(--head);font-weight:600;font-size:clamp(42px,4.6vw,58px);color:var(--navy);letter-spacing:-.025em;line-height:1;display:block;margin-bottom:22px}
  .evidence .kw::after{content:".";color:var(--gold)}
  .evidence h3{font-size:16px;margin-bottom:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--brown)}
  .evidence p{font-size:15px;line-height:1.85;color:var(--slate)}
  @media(max-width:820px){.evidence{grid-template-columns:1fr;gap:48px}}

  /* programs */
  .progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--stack-lg);align-items:stretch;box-shadow:0 24px 70px rgba(15,50,90,.10)}
  .prog{background:var(--white);display:flex;flex-direction:column;min-width:0;padding:48px 40px;gap:16px;border:1px solid var(--hairline);border-right-width:0}
  .prog:last-child{border-right-width:1px}
  .prog.featured{background:var(--navy);border-color:var(--navy);margin:-22px -1px;padding:70px 40px;position:relative;z-index:2;box-shadow:0 30px 80px rgba(7,26,48,.35)}
  .prog.featured h3{color:#fff}
  .prog.featured p,.prog.featured li{color:rgba(255,255,255,.85)}
  .prog .kind{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);display:flex;align-items:center;gap:10px}
  .prog.featured .kind{color:var(--gold)}
  .prog .kind svg{flex:none}
  .prog h3{font-size:24px;letter-spacing:-.01em}
  .prog .meta{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
  .prog.featured .meta{color:rgba(255,255,255,.6)}
  .prog p.desc{font-size:14.5px;line-height:1.8;color:var(--slate)}
  .prog ul{margin:4px 0 0;padding-left:18px;font-size:14.5px;display:grid;gap:9px;line-height:1.65;color:var(--slate)}
  .prog .price{margin-top:auto;padding-top:24px;border-top:1px solid var(--hairline-w);font-family:var(--head);font-weight:600;font-size:21px;color:var(--navy);font-variant-numeric:tabular-nums}
  .prog.featured .price{border-top-color:rgba(255,255,255,.2);color:#fff}
  .prog .price small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--slate);margin-top:4px;letter-spacing:.02em}
  .prog.featured .price small{color:rgba(255,255,255,.55)}
  .prog .btn{margin-top:8px}
  @media(max-width:880px){
    .progs{grid-template-columns:minmax(0,1fr);box-shadow:none;gap:26px}
    .prog{border:1px solid var(--hairline)}
    .prog.featured{margin:0;padding:48px 40px}
  }

  /* duo */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);align-items:center;margin-top:var(--stack-lg)}
  .duo .photo{position:relative}
  .duo .photo img{width:100%;height:100%;max-height:600px;object-fit:cover;position:relative;z-index:1}
  .duo .photo::after{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid var(--gold);z-index:0}
  .duo .copy{display:grid;gap:22px;font-size:16px}
  .duo ol{margin:0;padding:0;list-style:none;display:grid;counter-reset:sessie}
  .duo ol li{counter-increment:sessie;padding:24px 0 24px 62px;position:relative;border-bottom:1px solid var(--hairline-w);font-size:15.5px;line-height:1.75;color:var(--slate)}
  .duo ol li:last-child{border-bottom:none}
  .duo ol li::before{content:counter(sessie);position:absolute;left:0;top:21px;font-family:var(--head);font-weight:600;font-size:24px;color:var(--olive);font-variant-numeric:tabular-nums}
  .duo ol li strong{color:var(--navy);font-family:var(--head);font-weight:600}
  @media(max-width:820px){.duo{grid-template-columns:1fr;gap:52px}}

  /* quotes */
  .quote-lead{max-width:840px;margin:var(--stack-md) auto 0;text-align:center;position:relative}
  .quote-lead .qmark{position:absolute;top:-58px;left:50%;transform:translateX(-50%);font-family:var(--head);font-weight:700;font-size:150px;line-height:1;color:rgba(15,50,90,.08);pointer-events:none;user-select:none}
  .quote-lead blockquote{margin:0;font-family:var(--head);font-weight:500;font-size:clamp(21px,2.5vw,29px);line-height:1.5;color:var(--navy);text-wrap:balance;position:relative}
  .quote-lead .who{margin-top:30px;display:inline-flex;align-items:center;gap:16px;text-align:left}
  .quote-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 80px;max-width:1000px;margin:var(--stack-md) auto 0;border-top:1px solid var(--hairline);padding-top:10px}
  .quote-sm{padding:40px 0 40px 58px;position:relative}
  .quote-sm::before{content:"\201C";position:absolute;left:0;top:30px;font-family:var(--head);font-weight:700;font-size:64px;line-height:1;color:var(--gold)}
  .quote-sm blockquote{margin:0;font-size:15.5px;line-height:1.85;font-style:italic;color:var(--body-c)}
  .quote-sm .who{margin-top:22px;display:flex;align-items:center;gap:14px}
  .face{width:50px;height:50px;border-radius:50%;flex:none;border:2px dashed var(--todo);background:var(--todo-bg);display:grid;place-items:center;font-size:8.5px;font-weight:600;color:#8A6516;letter-spacing:.05em}
  .face.init{border:2px solid var(--gold);background:var(--navy);color:var(--gold);font-family:var(--head);font-size:18px;letter-spacing:0}
  .who p{font-size:13px;line-height:1.5;color:var(--slate)}
  .who strong{color:var(--navy)}
  @media(max-width:760px){.quote-pair{grid-template-columns:1fr;gap:0}}

  /* founder teaser */
  .teaser{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--col-gap);align-items:center}
  .teaser .photo{position:relative}
  .teaser .photo img{width:100%;max-height:660px;object-fit:cover;position:relative;z-index:1}
  .teaser .photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--gold);z-index:0}
  .teaser .copy{display:grid;gap:24px}
  .teaser .copy p{font-size:17px;line-height:1.9}
  @media(max-width:840px){.teaser{grid-template-columns:1fr;gap:52px}}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:var(--stack-lg)}
  .step .num{font-family:var(--head);font-weight:600;font-size:15px;color:var(--olive);display:block;margin-bottom:16px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
  .step h3{font-size:19px;margin-bottom:12px}
  .step p{font-size:14.5px;line-height:1.8;color:var(--slate)}
  @media(max-width:760px){.steps{grid-template-columns:1fr;gap:44px}}

  /* faq */
  .faq{max-width:820px;margin:var(--stack-md) auto 0;border-top:1px solid var(--hairline)}
  details{border-bottom:1px solid var(--hairline-w)}
  .bg-beige details{border-color:var(--hairline)}
  summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 4px;font-family:var(--head);font-weight:600;font-size:17.5px;color:var(--navy);transition:color .2s}
  summary:hover{color:var(--olive-dark)}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-size:26px;color:var(--olive);flex:none;font-weight:300;line-height:1;transition:transform .25s var(--ease)}
  details[open] summary::after{transform:rotate(45deg)}
  details .a{padding:0 4px 32px;font-size:15.5px;line-height:1.85;max-width:64ch;color:var(--slate)}

  /* contact */
  .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--col-gap);margin-top:var(--stack-md);align-items:start}
  .cinfo{display:grid;gap:18px;font-size:16px}
  .cinfo.plaque{text-align:left;padding:44px 36px 40px}
  .cinfo.plaque:hover{transform:none;box-shadow:0 1px 2px rgba(15,50,90,.05),0 14px 34px rgba(15,50,90,.07)}
  .cinfo .row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
  .cinfo .row span:not(.lbl){overflow-wrap:anywhere;min-width:0}
  .cinfo .lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brown);width:66px;flex:none}
  form{background:var(--white);padding:52px 46px;display:grid;gap:22px;box-shadow:0 3px 40px rgba(15,50,90,.09);border-top:3px solid var(--olive)}
  form label{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);display:grid;gap:9px}
  form input,form select,form textarea{font-family:var(--body);font-size:15.5px;padding:14px 15px;border:1px solid #CFCBB6;background:#fff;color:var(--body-c);width:100%;border-radius:2px;transition:border-color .2s}
  form input:hover,form select:hover,form textarea:hover{border-color:var(--slate)}
  .fine{font-size:12.5px;color:var(--slate);line-height:1.6}
  @media(max-width:840px){.contact-grid{grid-template-columns:1fr;gap:52px}}

  /* founder page */
  .founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--col-gap);align-items:start;margin-top:var(--stack-md)}
  .founder .photo{position:relative}
  .founder .photo img{width:100%;object-fit:cover;position:relative;z-index:1}
  .founder .photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--gold);z-index:0}
  .founder .copy{display:grid;gap:22px;font-size:16.5px;line-height:1.9}
  .fill{background:var(--todo-bg);border-bottom:2px dashed var(--todo);padding:0 4px;color:#7A5A12;font-style:italic}
  .creds{margin:12px 0 0;padding:0;list-style:none;display:grid}
  .creds li{padding:15px 0 15px 30px;border-bottom:1px solid var(--hairline-w);font-size:14.5px;color:var(--slate);position:relative}
  .creds li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:12px;background:var(--olive);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
  .creds li:last-child{border-bottom:none}
  @media(max-width:840px){.founder{grid-template-columns:1fr;gap:52px}}

  /* blog index */
  .pcat{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
  .pmeta{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
  .readmore{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid var(--gold);padding-bottom:6px}
  .readmore::after{content:"\2192";font-size:16px;transition:transform .25s var(--ease)}
  .feat-card{display:grid;grid-template-columns:1.15fr .85fr;background:#FFFDF8;border:1px solid var(--hairline);box-shadow:0 2px 4px rgba(15,50,90,.04),0 24px 60px rgba(15,50,90,.10);margin-top:var(--stack-md);text-decoration:none;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .feat-card:hover{transform:translateY(-4px);box-shadow:0 3px 6px rgba(15,50,90,.05),0 32px 70px rgba(15,50,90,.14)}
  .feat-card:hover .readmore::after{transform:translateX(5px)}
  .feat-card .img{position:relative;overflow:hidden;min-height:380px}
  .feat-card .img img,.post-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .8s var(--ease)}
  .feat-card:hover .img img,.post-card:hover .img img{transform:scale(1.05)}
  .feat-card .txt{padding:52px 48px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  .feat-card h3{font-size:clamp(24px,2.4vw,31px);letter-spacing:-.015em}
  .feat-card p.ex{font-size:15.5px;line-height:1.8;color:var(--slate)}
  .feat-card .pmeta{margin-top:auto;padding-top:14px}
  .post-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
  .post-card{background:#FFFDF8;border:1px solid var(--hairline);text-decoration:none;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(15,50,90,.04),0 14px 34px rgba(15,50,90,.07);transition:transform .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden}
  .post-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(15,50,90,.05),0 24px 48px rgba(15,50,90,.12)}
  .post-card .img{position:relative;overflow:hidden;height:250px}
  .post-card .txt{padding:34px 32px 36px;display:grid;gap:12px;align-content:start}
  .post-card h3{font-size:21px;letter-spacing:-.01em}
  .post-card p.ex{font-size:14.5px;line-height:1.75;color:var(--slate)}
  .more-list{margin-top:var(--stack-lg);border-top:1px solid var(--hairline)}
  .more-list a{display:flex;justify-content:space-between;gap:28px;align-items:baseline;padding:24px 4px;border-bottom:1px solid var(--hairline-w);text-decoration:none}
  .bg-beige .more-list a{border-color:var(--hairline)}
  .more-list h4{font-family:var(--head);font-weight:600;font-size:17.5px;color:var(--navy);margin:0;transition:color .2s}
  .more-list a:hover h4{color:var(--olive-dark)}
  .more-list .d{font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);white-space:nowrap;flex:none}
  @media(max-width:840px){.feat-card{grid-template-columns:1fr}.feat-card .img{min-height:260px}.post-grid{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){.feat-card:hover,.post-card:hover{transform:none}}

  /* article */
  .article-head{text-align:center}
  .article-head .backlink{display:inline-block;margin-bottom:34px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);text-decoration:none}
  .article-head .backlink:hover{color:var(--olive-dark)}
  .article-head h1{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.02em;max-width:19ch;margin:18px auto 22px}
  .article-body{max-width:66ch;margin:0 auto;font-size:17px;line-height:1.95;display:grid;gap:26px;color:var(--body-c)}
  .article-body>p:first-child::first-letter{font-family:var(--head);font-weight:600;font-size:66px;float:left;line-height:.85;padding:8px 16px 0 0;color:var(--navy)}
  .article-stat{text-align:center;padding:22px 0 8px}
  .article-stat b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(44px,5vw,62px);color:var(--navy);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
  .article-stat b em{font-style:normal;color:var(--gold)}
  .article-stat span{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
  .article-plaque{max-width:560px;margin:14px auto;text-align:left;padding:48px 40px 36px}
  .article-plaque h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;text-align:center}
  .article-qs{text-align:center;font-family:var(--head);font-weight:500;font-size:clamp(20px,2.2vw,25px);color:var(--navy);line-height:1.7;padding:14px 0}
  .author-box{max-width:66ch;margin:var(--stack-lg) auto 0;display:flex;gap:22px;align-items:center;border-top:1px solid var(--hairline-w);padding-top:40px}
  .author-box img{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold);flex:none}
  .author-box p{font-size:14px;line-height:1.6;color:var(--slate)}
  .author-box strong{color:var(--navy)}

  /* todo blocks */
  .todo{border:1.5px dashed var(--todo);background:var(--todo-bg);padding:18px 20px;font-size:13.5px;line-height:1.65;color:#6B4E14}
  .todo .tag{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#8A6516;margin-bottom:6px}
  .todo strong{color:#4A3208}
  .ph-img{border:1.5px dashed var(--todo);background:var(--todo-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;color:#6B4E14;padding:30px;min-height:240px;font-size:13px;line-height:1.6}
  .ph-img .tag{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#8A6516}
  .ph-img span{max-width:36ch}
  .ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:64px}
  @media(max-width:820px){.ph-grid{grid-template-columns:1fr}}

  /* cta band */
  .cta-band{position:relative;background-size:cover;background-position:center;isolation:isolate;padding:clamp(96px,13vw,160px) 0}
  .cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,48,.5),rgba(7,26,48,.66));z-index:-1}
  .cta-band .eyebrow{color:#E7DDC2;display:block;margin-bottom:0}
  .cta-band h2{color:#fff;font-size:clamp(30px,4.2vw,52px);max-width:19ch;letter-spacing:-.02em;text-shadow:0 2px 26px rgba(7,26,48,.4)}
  .cta-band p{color:rgba(255,255,255,.93);font-size:17px;line-height:1.8;max-width:50ch;margin:24px 0 42px}

  /* ---------- Ranch Compass banner ---------- */
  .compass-banner{background:var(--navy);position:relative;isolation:isolate;overflow:hidden;margin:0}
  .compass-banner::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .compass-banner .cb-in{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,5vw,60px) var(--gutter);display:flex;align-items:center;gap:48px;position:relative}
  .compass-banner .cb-in::after{content:"";position:absolute;inset:14px 18px;border:1px solid rgba(201,164,92,.35);pointer-events:none}
  .compass-banner .cb-icon{flex:none;width:116px;height:116px}
  .compass-banner .cb-copy{flex:1;min-width:0}
  .compass-banner .cb-eyebrow{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:#E7DDC2;margin-bottom:10px}
  .compass-banner h2{color:#fff;font-size:clamp(22px,2.8vw,32px);letter-spacing:-.015em;max-width:24ch;margin:0 0 10px}
  .compass-banner p{color:rgba(255,255,255,.85);font-size:15px;line-height:1.75;max-width:52ch;margin:0}
  .compass-banner .cb-cta{flex:none}
  @media(max-width:900px){
    .compass-banner .cb-in{flex-wrap:wrap;gap:24px;padding:48px var(--gutter)}
    .compass-banner .cb-icon{width:88px;height:88px}
    .compass-banner .cb-cta{width:100%}
    .compass-banner .cb-cta .btn{width:100%}
  }
  .cta-band .cta-alt{margin:24px 0 0;font-size:14px;color:rgba(255,255,255,.82)}
  .cta-band .cta-alt a{color:var(--gold);font-weight:600}


  /* internal */
  .internal-page section{background:var(--todo-bg)}
  .internal-page .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 46px;margin-top:44px}
  .check{display:flex;gap:15px;align-items:flex-start;font-size:14.5px;color:#5C4610;line-height:1.65}
  .check::before{content:"";width:17px;height:17px;border:2px solid var(--todo);flex:none;margin-top:4px;background:#fff}
  .check strong{color:#3F2F08}
  .seo-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:13.5px;line-height:1.6}
  .seo-table th{font-family:var(--head);font-weight:600;text-align:left;color:#3F2F08;padding:12px 16px 12px 0;border-bottom:2px solid var(--todo);vertical-align:bottom}
  .seo-table td{padding:14px 16px 14px 0;border-bottom:1px solid #E8D9AE;vertical-align:top;color:#5C4610}
  .seo-table td:first-child{font-weight:600;color:#3F2F08;white-space:nowrap}
  .table-scroll{overflow-x:auto}
  @media(max-width:720px){.internal-page .check-grid{grid-template-columns:1fr}}

  /* footer */
  footer.site{background:var(--navy-ink);color:rgba(255,255,255,.72);padding:0 0 44px;font-size:14px;position:relative;isolation:isolate;overflow:hidden}
  footer.site::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .foot-mark{max-width:var(--maxw);margin:0 auto;padding:64px var(--gutter) 20px;font-family:var(--head);font-weight:600;font-size:clamp(52px,9vw,120px);letter-spacing:.06em;color:rgba(255,255,255,.07);line-height:1;white-space:nowrap;user-select:none}
  .foot-grid{max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter) 0;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px}
  .foot-grid h4{font-family:var(--head);color:#fff;font-size:13px;margin:0 0 16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
  .foot-grid a{color:rgba(255,255,255,.72);text-decoration:none;display:block;padding:5px 0;transition:color .2s}
  .foot-grid a:hover{color:var(--gold)}
  .foot-grid a.internal-link{color:var(--todo)}
  .foot-bottom{max-width:var(--maxw);margin:48px auto 0;padding:24px var(--gutter) 0;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(255,255,255,.42)}
  @media(max-width:720px){.foot-grid{grid-template-columns:1fr}}

  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}
  .reveal.d2{transition-delay:.16s}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal,.hero-in>*{opacity:1;transform:none;transition:none;animation:none}
    .band{background-attachment:scroll}
    .scroll-cue i{animation:none}
    .mark svg path{animation:none;stroke-dashoffset:0}
  }

  /* tiny-screen-fixes-late: laat als laatste in de stylesheet staan (overschrijft eerdere regels) */
  .feat-card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-card .txt,.post-card .txt,.contact-grid>div,.cinfo,.cinfo .row{min-width:0}
  .cinfo .row span{overflow-wrap:anywhere}
  @media(max-width:840px){.feat-card{grid-template-columns:minmax(0,1fr)}.post-grid{grid-template-columns:minmax(0,1fr)}}
  @media(max-width:374px){
    .hero h1{font-size:clamp(30px,10.5vw,40px)}
    .cinfo.plaque{padding:36px 20px 32px}
    .feat-card .txt{padding:36px 24px}
    .post-card .txt{padding:28px 22px}
    form{padding:36px 18px}
    form input,form select,form textarea{min-width:0;max-width:100%}
  }

  /* launch */
  div.post-card:hover{transform:none;box-shadow:0 1px 2px rgba(15,50,90,.05),0 14px 34px rgba(15,50,90,.06)}
  span.mlrow{display:flex;justify-content:space-between;gap:28px;align-items:baseline;padding:24px 4px;border-bottom:1px solid var(--hairline-w)}
  .binnenkort{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:14px;padding:2px 10px;white-space:nowrap}
  .form-msg{padding:14px 16px;border-radius:2px;font-size:14.5px;line-height:1.6;display:none}
  .form-msg.ok{display:block;background:#EFF3E6;border:1px solid var(--olive);color:#3D5223}
  .form-msg.err{display:block;background:#FBEFE8;border:1px solid var(--rust);color:#6E2F18}

/* leadgen-extra (concepten) */
.form-consent{display:flex;gap:.7rem;align-items:flex-start;margin:.9rem 0 .2rem}
.form-consent input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 24px;width:24px;height:24px;margin-top:2px;border:2px solid #0F325A;border-radius:2px;background:#fff;cursor:pointer;position:relative}
.form-consent input[type=checkbox]:checked{background:#0F325A}
.form-consent input[type=checkbox]:checked::after{content:"";position:absolute;left:7px;top:2.5px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.form-consent input[type=checkbox]:focus-visible{outline:3px solid #C9A45C;outline-offset:2px}
.form-consent.invalid input[type=checkbox]{border-color:#A3271E;box-shadow:0 0 0 2px rgba(163,39,30,.25)}
.form-consent label{font-size:.92rem;line-height:1.5;cursor:pointer}
.form-consent .cerr{display:none;color:#A3271E;font-size:.85rem;margin-top:.25rem}
.form-consent.invalid .cerr{display:block}
.dl-success{display:none;background:#F5F3E8;border:1px solid #C9A45C;padding:1.2rem 1.4rem;margin-top:1rem}
.dl-success.show{display:block}
.dl-success h3{margin:0 0 .4rem}
.kennis-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:1rem}
.kennis-steps .pain h3{font-size:1rem}
.draft-note{background:#0F325A;color:#F5F3E8;text-align:center;padding:.45rem .8rem;font-size:.85rem;letter-spacing:.04em}
.draft-note strong{color:#C9A45C}

/* ZP-LIFT-V6-START — design-lift leadgen: banden, ademruimte, hiërarchie */
.btn-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:clamp(26px,3vw,36px)}
.btn-row .btn{margin:0}
.btn-row + p{margin-top:clamp(22px,2.6vw,30px)}
main[data-page="leadgen"] .wrap>p{max-width:74ch}
.center>p{margin-left:auto;margin-right:auto;max-width:64ch}
.values.v3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.values.v3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.values.v3{grid-template-columns:1fr}}
.steps.s4{grid-template-columns:repeat(4,1fr);gap:48px}
@media(max-width:1100px){.steps.s4{grid-template-columns:1fr 1fr;gap:44px}}
@media(max-width:640px){.steps.s4{grid-template-columns:1fr}}
.steps .pain-note{margin-top:var(--stack-md)}
main[data-page="leadgen"] form{max-width:700px;margin-left:auto;margin-right:auto;margin-top:38px}
main[data-page="leadgen"] form .btn{justify-self:start;margin-top:4px}
.form-consent label{text-transform:none;letter-spacing:normal;font-weight:400;font-size:.92rem;line-height:1.6}
main[data-page="leadgen"] .center .faq{text-align:left}
.compass-banner .cb-in{padding:clamp(60px,6.5vw,86px) calc(var(--gutter) + 16px)}
.compass-banner .cb-in::after{inset:40px 22px}
@media(max-width:900px){.compass-banner .cb-in{padding:56px calc(var(--gutter) + 8px)}.compass-banner .cb-in::after{inset:26px 14px}}
.founder .photo img{aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;width:100%}
.duo ol li{padding:26px 0 26px 64px}
.duo .copy .btn-row{margin-top:18px}
/* ZP-LIFT-V6-END */

/* ZP-NOTCH-V15-START */
/* --- Volgende-stap-strook: plaque met een ECHT uitgesneden notch.
   De bovenrand is transparant en wordt getekend als een 1px achtergrondlaag met
   een gat ter hoogte van de ster. Zo staat de ster in de onderbreking in plaats
   van erop, is er niets dat over de rand geschilderd wordt, en kan er dus ook
   niets buiten het kader kleuren. Ster: 14px breed, links op 26px, dus 26-40px;
   het gat loopt van 15 tot 53px, dus exact 12px lucht aan elke kant.
   background-origin:border-box, anders begint de laag op de paddingbox en ligt
   de lijn 1px lager dan de zijranden. --- */
.next-step{position:relative;display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.2vw,40px);
  padding:clamp(24px,2.6vw,30px) clamp(20px,2.4vw,30px) clamp(20px,2.2vw,26px);
  border:1px solid var(--hairline);border-top-color:transparent;border-radius:2px;
  background-color:#FFFDF8;
  background-image:linear-gradient(90deg,
    var(--hairline) 0,var(--hairline) 15px,
    transparent 15px,transparent 53px,
    var(--hairline) 53px,var(--hairline) 100%);
  background-repeat:no-repeat;background-size:100% 1px;background-position:0 0;
  background-origin:border-box;background-clip:border-box;
  text-decoration:none;color:var(--body-c);font-size:15.5px;line-height:1.75;
  box-shadow:0 1px 2px rgba(15,50,90,.04),0 14px 34px rgba(15,50,90,.06);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
/* -1px compenseert de rand: `top` rekent vanaf de paddingbox, zonder deze
   correctie staat de ster 1px onder de lijn in plaats van erop */
.next-step .ns-star{position:absolute;top:-1px;left:26px;
  transform:translateY(-50%);padding:0;background:none;color:var(--gold);
  line-height:0}
.next-step .ns-body{flex:1 1 320px;min-width:0}
.next-step .ns-body b{display:block;font-family:var(--head);font-weight:600;
  color:var(--navy);font-size:16.5px;line-height:1.35;letter-spacing:-.005em;
  margin-bottom:4px}
a.next-step .ns-body b{text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px;text-underline-offset:5px}
/* kaderknop: 1px navy i.p.v. de 1,5px van .btn-outline, zodat hij de primaire
   groene knop op het scherm niet naar de kroon steekt */
.next-step .ns-cta{display:inline-flex;align-items:center;justify-content:center;
  gap:10px;flex:0 0 auto;margin-left:auto;min-height:46px;padding:12px 26px;
  font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);background:transparent;
  border:1px solid var(--navy);border-radius:2px;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)}
.next-step .ns-arr{display:inline-block;font-size:15px;line-height:1;
  transition:transform .25s var(--ease)}
a.next-step:hover{background-color:var(--beige);
  box-shadow:0 2px 4px rgba(15,50,90,.05),0 18px 44px rgba(15,50,90,.09)}
a.next-step:hover .ns-body b{text-decoration-color:var(--brown);color:var(--brown)}
a.next-step:hover .ns-cta,
a.next-step:focus-visible .ns-cta{background:var(--navy);color:#fff}
a.next-step:hover .ns-arr{transform:translateX(4px)}
a.next-step:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.next-step.multi .ns-body a{color:var(--olive-dark);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1.5px;text-underline-offset:4px}
.next-step.multi .ns-body a:hover{color:var(--brown);text-decoration-color:var(--brown)}

/* --- Twee sporen in een naambord: de eerste-stap-keuze.
   Zelfde uitgesneden notch, maar gecentreerd. Ster 15px breed, dus het gat
   loopt van 50%-20px tot 50%+20px: ruim 12px lucht aan elke kant. --- */
.sporen{position:relative;display:grid;grid-template-columns:1.05fr 1fr;
  border:1px solid var(--hairline);border-top-color:transparent;border-radius:2px;
  background-color:#FFFDF8;
  background-image:linear-gradient(90deg,
    var(--hairline) 0,var(--hairline) calc(50% - 20px),
    transparent calc(50% - 20px),transparent calc(50% + 20px),
    var(--hairline) calc(50% + 20px),var(--hairline) 100%);
  background-repeat:no-repeat;background-size:100% 1px;background-position:0 0;
  background-origin:border-box;background-clip:border-box;
  margin-top:clamp(30px,3.4vw,44px);
  box-shadow:0 1px 2px rgba(15,50,90,.05),0 18px 44px rgba(15,50,90,.08)}
.sporen>.notch{position:absolute;top:-1px;left:50%;
  transform:translate(-50%,-50%);padding:0;background:none;color:var(--gold);
  line-height:0;z-index:1}
.spoor{position:relative;display:flex;flex-direction:column;min-width:0;
  text-decoration:none;
  padding:clamp(30px,3.6vw,46px) clamp(24px,3vw,42px) clamp(26px,3vw,38px);
  transition:background .3s var(--ease)}
/* de scheidingslijn begint 14px lager, anders loopt hij tot tegen de onderkant
   van de ster; die moet aan alle kanten lucht houden */
.spoor+.spoor::before{content:"";position:absolute;left:0;top:14px;bottom:0;
  width:1px;background:var(--hairline-w)}
a.spoor:hover{background:#FBF9EF}
a.spoor:focus-visible{outline:2px solid var(--olive);outline-offset:-4px}
.spoor .tijd{font-family:var(--head);font-weight:600;color:var(--navy);
  font-size:clamp(38px,4.4vw,54px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-bottom:16px}
.spoor .tijd small{font-family:var(--body);font-weight:500;font-size:14px;
  letter-spacing:.1em;color:var(--slate);margin-left:7px;vertical-align:baseline}
.spoor h3{font-family:var(--head);font-weight:600;color:var(--navy);
  font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.01em;margin:0 0 10px}
.spoor p{font-size:15px;line-height:1.75;color:var(--slate);margin:0}
.spoor .terzijde{font-style:italic;font-size:13.5px;color:var(--slate);
  margin-top:14px}
.spoor .ga{margin-top:auto;padding-top:20px;align-self:flex-start;
  font-weight:600;font-size:15px;color:var(--olive-dark);
  text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px;text-underline-offset:5px;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
a.spoor:hover .ga{color:var(--brown);text-decoration-color:var(--brown)}

/* --- Editoriale voetnoot: kort gouden streepje, geen doos. --- */
.voetnoot{position:relative;margin-top:clamp(28px,3.2vw,38px);padding-top:18px;
  font-size:15px;line-height:1.75;color:var(--slate);max-width:62ch}
.voetnoot::before{content:"";position:absolute;top:0;left:0;width:44px;height:1px;
  background:var(--gold)}
.voetnoot strong{font-family:var(--head);font-weight:600;color:var(--navy)}
.voetnoot a{color:var(--olive-dark);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--gold);text-decoration-thickness:1.5px;
  text-underline-offset:4px}
.voetnoot a:hover{color:var(--brown);text-decoration-color:var(--brown)}

@media (max-width:700px){
  .sporen{grid-template-columns:minmax(0,1fr)}
  .spoor+.spoor::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
}
/* smal scherm: knop over de volle breedte i.p.v. naast de tekst, en tekst mag
   afbreken zodat er nooit iets buiten het kader kan steken */
@media (max-width:560px){
  .next-step .ns-cta{margin-left:0;width:100%;white-space:normal;
    text-align:center;padding:12px 18px;line-height:1.4}
}
@media (prefers-reduced-motion:reduce){
  .next-step,.next-step .ns-arr,.spoor,.spoor .ga{transition:none}
}
/* ZP-NOTCH-V15-END */
