:root{
    --creme:#FBF6F4;
    --poeder:#F1E5E1;
    --poeder-diep:#DCC8C2;
    --inkt:#2E2320;
    --gedempt:#75625C;
    --roos:#9C6670;
    --roos-diep:#6B4149;
    --roos-licht:#F1E1E3;
    --goud:#BE9A6E;
    --goud-tekst:#8C693F;
    --kaart:#FFFFFF;
    --lijn:#E8DAD5;
    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    --sch:0 1px 2px rgba(46,35,32,.04), 0 10px 30px rgba(46,35,32,.06);
  }
  *{box-sizing:border-box}
  body{background:var(--creme);color:var(--inkt);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
  img{max-width:100%}

  .binnen{max-width:1080px;margin:0 auto;padding:0 26px}
  .sec{padding:74px 0}
  .sec.smal{padding:60px 0}
  .streep{border-top:1px solid var(--lijn)}

  h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;text-wrap:balance;margin:0}
  h1{font-size:clamp(2.4rem,5.4vw,3.5rem);line-height:1.05}
  h2{font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.18}
  h3{font-size:1.08rem;line-height:1.35;letter-spacing:-.008em}
  p{margin:0}
  .eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--gedempt)}
  .goudlijn{width:44px;height:1px;background:var(--goud)}

  /* ---------- header ---------- */
  .balk{border-bottom:1px solid var(--lijn);background:var(--creme);position:sticky;top:0;z-index:20}
  .balk .rij{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
  .merk{display:flex;flex-direction:column;gap:1px;line-height:1.05}
  .logo-img{height:46px;width:auto;display:block}
  .voet .logo-img{height:38px;opacity:.9}
  @media (max-width:520px){.logo-img{height:34px}}
  .merk .naam{font-family:var(--serif);font-weight:700;font-size:1.32rem}
  .merk .naam span{font-weight:400;color:var(--gedempt)}
  .merk .slogan{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--goud-tekst)}
  .balk nav{display:flex;align-items:center;gap:24px}
  .balk nav a{font-size:.94rem;font-weight:600;color:var(--gedempt);text-decoration:none}
  .balk nav a:hover{color:var(--roos-diep)}
  /* de knop in de balk is een <a> in nav: kleur expliciet terugzetten */
  .balk nav a.knop{color:#fff}
  .balk nav a.knop:hover{color:#fff;background:var(--roos-diep)}
  @media (max-width:720px){.balk nav a.verberg{display:none}}

  /* ---------- knoppen ---------- */
  .knop{display:inline-block;font-family:var(--sans);font-size:1rem;font-weight:700;padding:14px 28px;border-radius:8px;border:1px solid transparent;background:var(--roos);color:#fff;text-decoration:none;cursor:pointer}
  .knop:hover{background:var(--roos-diep)}
  .knop.sec{background:transparent;color:var(--roos-diep);border-color:var(--poeder-diep)}
  .knop.sec:hover{background:var(--poeder);color:var(--roos-diep)}
  .knop.klein{font-size:.92rem;padding:11px 20px}
  .knoprij{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  a:focus-visible,.knop:focus-visible,summary:focus-visible{outline:2px solid var(--roos-diep);outline-offset:3px}

  /* ---------- hero ---------- */
  .hero{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
  @media (max-width:900px){.hero{grid-template-columns:1fr;gap:40px}}
  .hero .tekst{display:flex;flex-direction:column;gap:22px}
  .hero .sub{font-size:1.16rem;line-height:1.65;color:var(--gedempt);max-width:44ch}
  .gerust{font-size:.92rem;color:var(--gedempt)}
  .gerust b{color:var(--inkt);font-weight:600}

  /* gedenkpagina-mockup */
  .mock{background:var(--kaart);border:1px solid var(--lijn);border-radius:16px;overflow:hidden;box-shadow:var(--sch)}
  .mock .top{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--lijn);background:var(--poeder)}
  .mock .dot{width:8px;height:8px;border-radius:50%;background:var(--poeder-diep)}
  .mock .adres{margin-left:8px;font-size:.74rem;color:var(--gedempt);font-family:var(--sans)}
  .mock .body{padding:28px 26px 30px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
  .portret{width:118px;height:148px;border-radius:59px 59px 12px 12px;border:1px solid var(--lijn);
    background:linear-gradient(168deg,var(--roos-licht),var(--poeder));
    display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:2.5rem;color:var(--roos-diep)}
  .mock .mnaam{font-family:var(--serif);font-weight:700;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em}
  .mock .datums{font-family:var(--serif);font-size:.92rem;color:var(--goud-tekst);letter-spacing:.02em}
  .mock .haar{width:38px;height:1px;background:var(--goud);margin:3px 0}
  .mock .mtekst{font-size:.9rem;line-height:1.65;color:var(--gedempt);max-width:38ch}
  .mock .mknop{font-size:.82rem;font-weight:700;padding:10px 18px;border-radius:7px;background:var(--roos);color:#fff;margin-top:3px}
  .mock .kaartje{width:100%;text-align:left;background:var(--creme);border:1px solid var(--lijn);border-radius:9px;padding:13px 15px;display:flex;flex-direction:column;gap:4px;margin-top:5px}
  .mock .kaartje .van{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--gedempt)}
  .mock .kaartje .ber{font-family:var(--serif);font-size:.95rem;line-height:1.5}

  /* ---------- erkenning ---------- */
  .erken{background:var(--poeder)}
  .erken .inhoud{display:flex;flex-direction:column;gap:16px;max-width:60ch}
  .erken p{font-size:1.08rem;line-height:1.75;color:var(--inkt)}

  /* ---------- wat erop staat ---------- */
  .koptekst{display:flex;flex-direction:column;gap:13px;max-width:56ch;margin-bottom:38px}
  .koptekst p{color:var(--gedempt);font-size:1.05rem}
  .zesgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
  .item{background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:9px}
  .item .ico{width:30px;height:30px;color:var(--roos)}
  .item p{font-size:.97rem;line-height:1.65;color:var(--gedempt)}

  /* ---------- stappen ---------- */
  .stapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
  .stap{display:flex;flex-direction:column;gap:9px}
  .stap .n{font-family:var(--serif);font-weight:700;font-size:2.1rem;color:var(--goud);line-height:1}
  .stap p{font-size:.97rem;line-height:1.65;color:var(--gedempt)}

  /* ---------- negen ontwerpen ---------- */
  .ontwerpen{background:var(--poeder)}
  .negen{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px}
  .ontw{border-radius:12px;overflow:hidden;border:1px solid rgba(46,35,32,.1);background:var(--dbg);box-shadow:0 1px 2px rgba(46,35,32,.05)}
  .ontw .beeld{padding:24px 18px 22px;display:flex;flex-direction:column;align-items:center;gap:9px}
  .ontw .p{width:52px;height:64px;border:1px solid rgba(46,35,32,.12)}
  .ontw .r1{width:78%;height:11px;border-radius:2px;background:var(--dink);opacity:.88}
  .ontw .r2{width:52%;height:5px;border-radius:2px;background:var(--dacc)}
  .ontw .r3{width:64%;height:4px;border-radius:2px;background:var(--dink);opacity:.22}
  .ontw .naam{font-size:.84rem;font-weight:700;padding:11px 15px;border-top:1px solid rgba(46,35,32,.09);color:#2E2320;background:rgba(255,255,255,.55)}

  /* ---------- verschil ---------- */
  .verschil{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  @media (max-width:820px){.verschil{grid-template-columns:1fr;gap:26px}}
  .verschil .rechts{display:flex;flex-direction:column;gap:15px}
  .vpunt{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
  .vpunt .v{color:var(--roos);margin-top:5px}
  .vpunt p{font-size:.99rem;line-height:1.65}
  .vpunt p b{font-weight:700}

  /* ---------- prijs ---------- */
  .prijsvak{background:var(--kaart);border:1.5px solid var(--roos);border-radius:16px;padding:38px 36px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;box-shadow:var(--sch)}
  @media (max-width:760px){.prijsvak{grid-template-columns:1fr;gap:26px;padding:30px 24px}}
  .prijsvak .bedrag{font-family:var(--serif);font-weight:700;font-size:4.2rem;line-height:1;letter-spacing:-.03em}
  .prijsvak .bedrag small{display:block;font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--gedempt);letter-spacing:0;margin-top:9px;text-transform:uppercase}
  .prijsvak ul{margin:0 0 20px;padding-left:19px;display:flex;flex-direction:column;gap:9px}
  .prijsvak li{font-size:1rem;line-height:1.6}

  /* ---------- faq ---------- */
  .faq{display:flex;flex-direction:column;border-top:1px solid var(--lijn)}
  details{border-bottom:1px solid var(--lijn)}
  summary{cursor:pointer;list-style:none;padding:19px 0;font-family:var(--serif);font-weight:700;font-size:1.12rem;line-height:1.35;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
  summary::-webkit-details-marker{display:none}
  summary .plus{font-family:var(--sans);font-size:1.3rem;font-weight:400;color:var(--roos);flex:none;line-height:1}
  details[open] summary .plus{color:var(--gedempt)}
  details p{padding:0 0 22px;font-size:1rem;line-height:1.7;color:var(--gedempt);max-width:64ch}

  /* ---------- slot ---------- */
  .slot{background:var(--poeder);text-align:center}
  .slot .inhoud{display:flex;flex-direction:column;align-items:center;gap:18px}
  .slot p{font-size:1.08rem;color:var(--gedempt);max-width:48ch;line-height:1.7}

  /* ---------- footer ---------- */
  .voet{border-top:1px solid var(--lijn);padding:34px 0 46px;font-size:.9rem;color:var(--gedempt)}
  .voet .rij{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
  .voet a{color:var(--gedempt);text-decoration:none}
  .voet a:hover{color:var(--roos-diep)}


  /* drie grote ontwerp-previews */
  .drie{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:20px}
  .dkaart{border-radius:14px;overflow:hidden;border:1px solid rgba(46,35,32,.11);background:var(--dbg);box-shadow:0 1px 2px rgba(46,35,32,.05),0 8px 22px rgba(46,35,32,.06)}
  .dpagina{padding:30px 24px 30px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
  .dportret{width:96px;height:120px;border:1px solid rgba(46,35,32,.12)}
  .dnaam{font-family:var(--dfont);font-weight:700;font-size:1.4rem;line-height:1.12;letter-spacing:-.02em;color:var(--dink)}
  .ddat{font-family:var(--dfont);font-size:.8rem;color:var(--dacc);letter-spacing:.03em}
  .dhaar{width:30px;height:1px;background:var(--dacc)}
  .dregels{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:2px}
  .dregels i{display:block;height:5px;border-radius:2px;background:var(--dink);opacity:.16}
  .dknop{margin-top:8px;font-family:var(--sans);font-size:.76rem;font-weight:700;padding:9px 16px;border-radius:6px;background:var(--dacc);color:var(--dknoptekst)}
  .dlabel{font-size:.85rem;font-weight:700;padding:12px 16px;border-top:1px solid rgba(46,35,32,.09);background:rgba(255,255,255,.6);color:#2E2320;display:flex;justify-content:space-between;gap:10px}
  .dlabel span{font-weight:400;color:var(--gedempt)}