/* WOW Francis Christian: Aftekenen (na-laag, buiten de bevroren template-css) */
.af{background:var(--ink);color:var(--cream);padding:112px 0;position:relative;overflow:hidden}
.af-wrap{max-width:1400px;margin:0 auto;padding:0 24px;display:grid;gap:56px;align-items:center}
@media (min-width:768px){.af-wrap{padding:0 40px}}
@media (min-width:1024px){.af-wrap{grid-template-columns:5fr 7fr;gap:72px}}
.af .eyebrow{color:#EBC98F}
.af-h2{margin-top:24px;font-weight:500;font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.04;letter-spacing:-.02em;color:var(--cream)}
.af-h2 em{font-style:italic;color:#EBC98F}
.af-p{margin-top:22px;font-size:15px;line-height:1.7;color:rgba(248,242,232,.78);max-width:34rem}
.af-tabs{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px}
.af-tab{font-size:13px;padding:10px 18px;border-radius:999px;border:1px solid rgba(235,201,143,.45);color:var(--cream);background:transparent;transition:background .45s cubic-bezier(.22,1,.36,1),color .45s cubic-bezier(.22,1,.36,1),border-color .45s}
.af-tab:hover{border-color:#EBC98F}
.af-tab.is-on{background:#EBC98F;color:var(--ink);border-color:#EBC98F}
.af-tab:focus-visible,.af-range:focus-visible,.af-opnieuw:focus-visible,.af-cta:focus-visible{outline:2px solid #EBC98F;outline-offset:3px}
.af-meter{margin-top:30px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid rgba(248,242,232,.16)}
.af-kier-label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,242,232,.62)}
.af-kier-waarde{display:block;margin-top:6px;font-family:"Cormorant Garamond",Georgia,serif;font-size:2.6rem;line-height:1;color:var(--cream);font-variant-numeric:tabular-nums;transition:color .5s}
.af-is-klaar .af-kier-waarde{color:#EBC98F}
.af-fase{font-size:13px;color:rgba(248,242,232,.78);text-align:right;max-width:15rem}
.af-schuif{margin-top:20px}
.af-schuif label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,242,232,.62);margin-bottom:10px}
.af-range{width:100%;accent-color:#EBC98F;cursor:pointer}
.af-stappen{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0}
.af-stap{font-size:12px;line-height:1.4;padding-top:10px;border-top:2px solid rgba(248,242,232,.16);color:rgba(248,242,232,.55);transition:border-color .5s,color .5s}
.af-stap b{display:block;font-weight:500;font-size:11px;letter-spacing:.14em;color:inherit}
.af-stap.is-nu{border-color:#EBC98F;color:var(--cream)}
.af-stap.is-klaar{border-color:rgba(235,201,143,.55);color:rgba(248,242,232,.8)}
.af-knoppen{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.af-cta{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;padding:16px 30px;border-radius:var(--radius-pill,999px);background:var(--terra);color:var(--cream);transition:opacity .4s}
.af-cta:hover{opacity:.9}
.af-meer{display:inline-flex;align-items:center;gap:8px;color:#EBC98F;transition:gap .3s}
.af-meer:hover{gap:12px}
.af-podium{position:relative;border-radius:var(--radius-lg,18px);background:#F6EFE3;border:1px solid rgba(235,201,143,.35);box-shadow:0 40px 80px -50px rgba(0,0,0,.7);overflow:hidden}
.af-svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.af-opnieuw{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:999px;background:rgba(58,36,22,.82);color:var(--cream);transition:background .3s}
.af-opnieuw:hover{background:var(--ink)}
.af-onder{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:12px;color:rgba(248,242,232,.6)}
.af-svg-titel{color:var(--cream);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem}
/* tekening */
.af-plafond{fill:#E4D7C3}.af-balk{fill:#C9B193}
.af-romp{fill:#D9C4A4;stroke:#6B4A2E;stroke-width:2}
.af-gang{fill:none;stroke:#B89A74;stroke-width:1}
.af-patrijs{fill:#C9B193;stroke:#6B4A2E;stroke-width:2}.af-patrijs-glas{fill:#BFD3DB;stroke:#6B4A2E;stroke-width:1}
.af-vloer{fill:#E2D2BA}.af-naad{stroke:#CDB898;stroke-width:1}
.af-dak{fill:#D9C4A4;stroke:#6B4A2E;stroke-width:2}.af-spoor{stroke:#B89A74;stroke-width:1}
.af-dakraam{fill:#BFD3DB;stroke:#6B4A2E;stroke-width:1.5}
.af-muur{fill:#EDE3D3}.af-lijn{stroke:#6B4A2E;stroke-width:2}
.af-steen{fill:#DCC9B0;stroke:#6B4A2E;stroke-width:2}.af-voeg{stroke:#C4AC8C;stroke-width:1}
.af-kroon{fill:#D3BFA2}.af-schoorsteen{fill:#E9DECC;stroke:#CDB898;stroke-width:1}
.af-kier{fill:rgba(136,74,44,.28);stroke:none}
.af-kast{fill:url(#af-hout);stroke:#5C3A20;stroke-width:2;stroke-linejoin:round}
.af-vul{fill:rgba(255,236,200,.28);stroke:#5C3A20;stroke-width:1;stroke-dasharray:3 3}
.af-deur{fill:rgba(255,240,215,.13);stroke:#6B4426;stroke-width:1.4}
.af-knop{fill:#3A2416}
.af-potlood{fill:none;stroke:#2B211A;stroke-width:2.2;stroke-dasharray:0;stroke-linecap:round;transition:opacity .6s}
.af-punt{transition:opacity .3s}.af-punt-ring{fill:none;stroke:#884A2C;stroke-width:2}.af-punt-kern{fill:#2B211A}
.af-schaaf{transition:opacity .3s}.af-schaaf-body{fill:#884A2C;stroke:#3A2416;stroke-width:1.2}.af-schaaf-knop{fill:#EBC98F}
.af-maat{transition:opacity .4s}.af-maat-lijn{stroke:#884A2C;stroke-width:1.4;marker-start:url(#af-pijl);marker-end:url(#af-pijl)}
.af-maat-tekst{font:600 13px/1 Inter,system-ui,sans-serif;fill:#884A2C;paint-order:stroke;stroke:#F6EFE3;stroke-width:4px;font-variant-numeric:tabular-nums}
.af-vink{transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.af-vink-bg{fill:#3A2416}.af-vink-tekst{font:500 13px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;fill:#EBC98F;text-transform:uppercase}
@media (max-width:640px){
  .af{padding:80px 0}
  .af-stappen{grid-template-columns:1fr;gap:6px}
  .af-meter{flex-direction:column;align-items:flex-start}
  .af-fase{text-align:left;max-width:none}
  .af-knoppen{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.af *{transition:none !important}}
.no-js .af-schuif,.no-js .af-opnieuw,.no-js .af-tabs{display:none}
.no-js .af-podium,.no-js .af-onder{display:none}
@media (max-width:1023px){
  .af-wrap{row-gap:0}
  .af-tekst{display:contents}
  .af-tekst>.eyebrow{justify-self:start}
  .af-beeld{order:2;margin:32px 0 6px}
  .af-meter,.af-schuif,.af-stappen,.af-knoppen{order:3}
  .af-opnieuw{right:auto;left:12px;top:12px}
}
@media (max-width:640px){.af-maat-tekst{font-size:21px;stroke-width:6px}.af-vink-tekst{font-size:18px}}